git.apps.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
   2 import { Observable, of } from 'rxjs';
   3 import { catchError } from 'rxjs/operators';
   4 import { CephfsSubvolumeService } from '~/app/shared/api/cephfs-subvolume.service';
   5 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
   6 import { Icons } from '~/app/shared/enum/icons.enum';
   7 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
   8 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
   9 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
  10 import { CephfsSubvolume } from '~/app/shared/models/cephfs-subvolume.model';
  11
  12 @Component({
  13   selector: 'cd-cephfs-subvolume-list',
  14   templateUrl: './cephfs-subvolume-list.component.html',
  15   styleUrls: ['./cephfs-subvolume-list.component.scss']
  16 })
  17 export class CephfsSubvolumeListComponent implements OnInit, OnChanges {
  18   @ViewChild('quotaUsageTpl', { static: true })
  19   quotaUsageTpl: any;
  20
  21   @ViewChild('typeTpl', { static: true })
  22   typeTpl: any;
  23
  24   @ViewChild('modeToHumanReadableTpl', { static: true })
  25   modeToHumanReadableTpl: any;
  26
  27   @ViewChild('nameTpl', { static: true })
  28   nameTpl: any;
  29
  30   @ViewChild('quotaSizeTpl', { static: true })
  31   quotaSizeTpl: any;
  32
  33   @Input() fsName: string;
  34
  35   columns: CdTableColumn[] = [];
  36   context: CdTableFetchDataContext;
  37   selection = new CdTableSelection();
  38   icons = Icons;
  39
  40   subVolumes$: Observable<CephfsSubvolume[]>;
  41
  42   constructor(private cephfsSubVolume: CephfsSubvolumeService) {}
  43
  44   ngOnInit(): void {
  45     this.columns = [
  46       {
  47         name: $localize`Name`,
  48         prop: 'name',
  49         flexGrow: 1,
  50         cellTemplate: this.nameTpl
  51       },
  52       {
  53         name: $localize`Data Pool`,
  54         prop: 'info.data_pool',
  55         flexGrow: 0.7,
  56         cellTransformation: CellTemplate.badge,
  57         customTemplateConfig: {
  58           class: 'badge-background-primary'
  59         }
  60       },
  61       {
  62         name: $localize`Usage`,
  63         prop: 'info.bytes_pcent',
  64         flexGrow: 0.7,
  65         cellTemplate: this.quotaUsageTpl,
  66         cellClass: 'text-right'
  67       },
  68       {
  69         name: $localize`Path`,
  70         prop: 'info.path',
  71         flexGrow: 1,
  72         cellTransformation: CellTemplate.path
  73       },
  74       {
  75         name: $localize`Mode`,
  76         prop: 'info.mode',
  77         flexGrow: 0.5,
  78         cellTemplate: this.modeToHumanReadableTpl
  79       },
  80       {
  81         name: $localize`Created`,
  82         prop: 'info.created_at',
  83         flexGrow: 0.5,
  84         cellTransformation: CellTemplate.timeAgo
  85       }
  86     ];
  87   }
  88
  89   ngOnChanges() {
  90     this.subVolumes$ = this.cephfsSubVolume.get(this.fsName).pipe(
  91       catchError(() => {
  92         this.context.error();
  93         return of(null);
  94       })
  95     );
  96   }
  97
  98   updateSelection(selection: CdTableSelection) {
  99     this.selection = selection;
 100   }
 101 }