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

   1 import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
   2 import { Observable, ReplaySubject, of } from 'rxjs';
   3 import { catchError, shareReplay, switchMap } from 'rxjs/operators';
   4 import { CephfsSubvolumeService } from '~/app/shared/api/cephfs-subvolume.service';
   5 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
   6 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
   7 import { Icons } from '~/app/shared/enum/icons.enum';
   8 import { CdTableAction } from '~/app/shared/models/cd-table-action';
   9 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
  10 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
  11 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
  12 import { CephfsSubvolume } from '~/app/shared/models/cephfs-subvolume.model';
  13 import { ModalService } from '~/app/shared/services/modal.service';
  14 import { CephfsSubvolumeFormComponent } from '../cephfs-subvolume-form/cephfs-subvolume-form.component';
  15 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  16 import { Permissions } from '~/app/shared/models/permissions';
  17
  18 @Component({
  19   selector: 'cd-cephfs-subvolume-list',
  20   templateUrl: './cephfs-subvolume-list.component.html',
  21   styleUrls: ['./cephfs-subvolume-list.component.scss']
  22 })
  23 export class CephfsSubvolumeListComponent implements OnInit, OnChanges {
  24   @ViewChild('quotaUsageTpl', { static: true })
  25   quotaUsageTpl: any;
  26
  27   @ViewChild('typeTpl', { static: true })
  28   typeTpl: any;
  29
  30   @ViewChild('modeToHumanReadableTpl', { static: true })
  31   modeToHumanReadableTpl: any;
  32
  33   @ViewChild('nameTpl', { static: true })
  34   nameTpl: any;
  35
  36   @ViewChild('quotaSizeTpl', { static: true })
  37   quotaSizeTpl: any;
  38
  39   @Input() fsName: string;
  40   @Input() pools: any[];
  41
  42   columns: CdTableColumn[] = [];
  43   tableActions: CdTableAction[];
  44   context: CdTableFetchDataContext;
  45   selection = new CdTableSelection();
  46   icons = Icons;
  47   permissions: Permissions;
  48
  49   subVolumes$: Observable<CephfsSubvolume[]>;
  50   subject = new ReplaySubject<CephfsSubvolume[]>();
  51
  52   constructor(
  53     private cephfsSubVolume: CephfsSubvolumeService,
  54     private actionLabels: ActionLabelsI18n,
  55     private modalService: ModalService,
  56     private authStorageService: AuthStorageService
  57   ) {
  58     this.permissions = this.authStorageService.getPermissions();
  59   }
  60
  61   ngOnInit(): void {
  62     this.columns = [
  63       {
  64         name: $localize`Name`,
  65         prop: 'name',
  66         flexGrow: 1,
  67         cellTemplate: this.nameTpl
  68       },
  69       {
  70         name: $localize`Data Pool`,
  71         prop: 'info.data_pool',
  72         flexGrow: 0.7,
  73         cellTransformation: CellTemplate.badge,
  74         customTemplateConfig: {
  75           class: 'badge-background-primary'
  76         }
  77       },
  78       {
  79         name: $localize`Usage`,
  80         prop: 'info.bytes_pcent',
  81         flexGrow: 0.7,
  82         cellTemplate: this.quotaUsageTpl,
  83         cellClass: 'text-right'
  84       },
  85       {
  86         name: $localize`Path`,
  87         prop: 'info.path',
  88         flexGrow: 1,
  89         cellTransformation: CellTemplate.path
  90       },
  91       {
  92         name: $localize`Mode`,
  93         prop: 'info.mode',
  94         flexGrow: 0.5,
  95         cellTemplate: this.modeToHumanReadableTpl
  96       },
  97       {
  98         name: $localize`Created`,
  99         prop: 'info.created_at',
 100         flexGrow: 0.5,
 101         cellTransformation: CellTemplate.timeAgo
 102       }
 103     ];
 104
 105     this.tableActions = [
 106       {
 107         name: this.actionLabels.CREATE,
 108         permission: 'create',
 109         icon: Icons.add,
 110         click: () =>
 111           this.modalService.show(
 112             CephfsSubvolumeFormComponent,
 113             {
 114               fsName: this.fsName,
 115               pools: this.pools
 116             },
 117             { size: 'lg' }
 118           )
 119       }
 120     ];
 121
 122     this.subVolumes$ = this.subject.pipe(
 123       switchMap(() =>
 124         this.cephfsSubVolume.get(this.fsName).pipe(
 125           catchError(() => {
 126             this.context.error();
 127             return of(null);
 128           })
 129         )
 130       ),
 131       shareReplay(1)
 132     );
 133   }
 134
 135   fetchData() {
 136     this.subject.next();
 137   }
 138
 139   ngOnChanges() {
 140     this.subject.next();
 141   }
 142
 143   updateSelection(selection: CdTableSelection) {
 144     this.selection = selection;
 145   }
 146 }