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

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