git-server-git.apps.pok.os.sepia.ceph.com Git - ceph.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: () => this.openModal(),
 111         canBePrimary: (selection: CdTableSelection) => !selection.hasSelection
 112       },
 113       {
 114         name: this.actionLabels.EDIT,
 115         permission: 'update',
 116         icon: Icons.edit,
 117         click: () => this.openModal(true)
 118       }
 119     ];
 120
 121     this.subVolumes$ = this.subject.pipe(
 122       switchMap(() =>
 123         this.cephfsSubVolume.get(this.fsName).pipe(
 124           catchError(() => {
 125             this.context.error();
 126             return of(null);
 127           })
 128         )
 129       ),
 130       shareReplay(1)
 131     );
 132   }
 133
 134   fetchData() {
 135     this.subject.next();
 136   }
 137
 138   ngOnChanges() {
 139     this.subject.next();
 140   }
 141
 142   updateSelection(selection: CdTableSelection) {
 143     this.selection = selection;
 144   }
 145
 146   openModal(edit = false) {
 147     this.modalService.show(
 148       CephfsSubvolumeFormComponent,
 149       {
 150         fsName: this.fsName,
 151         subVolumeName: this.selection?.first()?.name,
 152         pools: this.pools,
 153         isEdit: edit
 154       },
 155       { size: 'lg' }
 156     );
 157   }
 158 }