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

   1 import { Component, Input, OnInit, ViewChild } from '@angular/core';
   2 import { Observable, of } from 'rxjs';
   3 import { catchError } from 'rxjs/operators';
   4
   5 import { CephfsSubvolumeGroupService } from '~/app/shared/api/cephfs-subvolume-group.service';
   6 import { CellTemplate } from '~/app/shared/enum/cell-template.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 { CephfsSubvolumeGroup } from '~/app/shared/models/cephfs-subvolume-group.model';
  11
  12 @Component({
  13   selector: 'cd-cephfs-subvolume-group',
  14   templateUrl: './cephfs-subvolume-group.component.html',
  15   styleUrls: ['./cephfs-subvolume-group.component.scss']
  16 })
  17 export class CephfsSubvolumeGroupComponent implements OnInit {
  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()
  34   fsName: any;
  35
  36   columns: CdTableColumn[];
  37   context: CdTableFetchDataContext;
  38   selection = new CdTableSelection();
  39
  40   subvolumeGroup$: Observable<CephfsSubvolumeGroup[]>;
  41
  42   constructor(private cephfsSubvolumeGroup: CephfsSubvolumeGroupService) {}
  43
  44   ngOnInit(): void {
  45     this.columns = [
  46       {
  47         name: $localize`Name`,
  48         prop: 'name',
  49         flexGrow: 0.6,
  50         cellTransformation: CellTemplate.bold
  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`Mode`,
  70         prop: 'info.mode',
  71         flexGrow: 0.5,
  72         cellTemplate: this.modeToHumanReadableTpl
  73       },
  74       {
  75         name: $localize`Created`,
  76         prop: 'info.created_at',
  77         flexGrow: 0.5,
  78         cellTransformation: CellTemplate.timeAgo
  79       }
  80     ];
  81   }
  82
  83   ngOnChanges() {
  84     this.subvolumeGroup$ = this.cephfsSubvolumeGroup.get(this.fsName).pipe(
  85       catchError(() => {
  86         this.context.error();
  87         return of(null);
  88       })
  89     );
  90   }
  91
  92   updateSelection(selection: CdTableSelection) {
  93     this.selection = selection;
  94   }
  95 }