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 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  18 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  19 import { FinishedTask } from '~/app/shared/models/finished-task';
  20
  21 @Component({
  22   selector: 'cd-cephfs-subvolume-list',
  23   templateUrl: './cephfs-subvolume-list.component.html',
  24   styleUrls: ['./cephfs-subvolume-list.component.scss']
  25 })
  26 export class CephfsSubvolumeListComponent implements OnInit, OnChanges {
  27   @ViewChild('quotaUsageTpl', { static: true })
  28   quotaUsageTpl: any;
  29
  30   @ViewChild('typeTpl', { static: true })
  31   typeTpl: any;
  32
  33   @ViewChild('modeToHumanReadableTpl', { static: true })
  34   modeToHumanReadableTpl: any;
  35
  36   @ViewChild('nameTpl', { static: true })
  37   nameTpl: any;
  38
  39   @ViewChild('quotaSizeTpl', { static: true })
  40   quotaSizeTpl: any;
  41
  42   @Input() fsName: string;
  43   @Input() pools: any[];
  44
  45   columns: CdTableColumn[] = [];
  46   tableActions: CdTableAction[];
  47   context: CdTableFetchDataContext;
  48   selection = new CdTableSelection();
  49   icons = Icons;
  50   permissions: Permissions;
  51
  52   subVolumes$: Observable<CephfsSubvolume[]>;
  53   subject = new ReplaySubject<CephfsSubvolume[]>();
  54
  55   constructor(
  56     private cephfsSubVolume: CephfsSubvolumeService,
  57     private actionLabels: ActionLabelsI18n,
  58     private modalService: ModalService,
  59     private authStorageService: AuthStorageService,
  60     private taskWrapper: TaskWrapperService
  61   ) {
  62     this.permissions = this.authStorageService.getPermissions();
  63   }
  64
  65   ngOnInit(): void {
  66     this.columns = [
  67       {
  68         name: $localize`Name`,
  69         prop: 'name',
  70         flexGrow: 1,
  71         cellTemplate: this.nameTpl
  72       },
  73       {
  74         name: $localize`Data Pool`,
  75         prop: 'info.data_pool',
  76         flexGrow: 0.7,
  77         cellTransformation: CellTemplate.badge,
  78         customTemplateConfig: {
  79           class: 'badge-background-primary'
  80         }
  81       },
  82       {
  83         name: $localize`Usage`,
  84         prop: 'info.bytes_pcent',
  85         flexGrow: 0.7,
  86         cellTemplate: this.quotaUsageTpl,
  87         cellClass: 'text-right'
  88       },
  89       {
  90         name: $localize`Path`,
  91         prop: 'info.path',
  92         flexGrow: 1,
  93         cellTransformation: CellTemplate.path
  94       },
  95       {
  96         name: $localize`Mode`,
  97         prop: 'info.mode',
  98         flexGrow: 0.5,
  99         cellTemplate: this.modeToHumanReadableTpl
 100       },
 101       {
 102         name: $localize`Created`,
 103         prop: 'info.created_at',
 104         flexGrow: 0.5,
 105         cellTransformation: CellTemplate.timeAgo
 106       }
 107     ];
 108
 109     this.tableActions = [
 110       {
 111         name: this.actionLabels.CREATE,
 112         permission: 'create',
 113         icon: Icons.add,
 114         click: () =>
 115           this.modalService.show(
 116             CephfsSubvolumeFormComponent,
 117             {
 118               fsName: this.fsName,
 119               pools: this.pools
 120             },
 121             { size: 'lg' }
 122           )
 123       },
 124       {
 125         name: this.actionLabels.REMOVE,
 126         permission: 'delete',
 127         icon: Icons.destroy,
 128         click: () => this.removeSubVolumeModal()
 129       }
 130     ];
 131
 132     this.subVolumes$ = this.subject.pipe(
 133       switchMap(() =>
 134         this.cephfsSubVolume.get(this.fsName).pipe(
 135           catchError(() => {
 136             this.context.error();
 137             return of(null);
 138           })
 139         )
 140       ),
 141       shareReplay(1)
 142     );
 143   }
 144
 145   fetchData() {
 146     this.subject.next();
 147   }
 148
 149   ngOnChanges() {
 150     this.subject.next();
 151   }
 152
 153   updateSelection(selection: CdTableSelection) {
 154     this.selection = selection;
 155   }
 156
 157   openModal(edit = false) {
 158     this.modalService.show(
 159       CephfsSubvolumeFormComponent,
 160       {
 161         fsName: this.fsName,
 162         subVolumeName: this.selection?.first()?.name,
 163         pools: this.pools,
 164         isEdit: edit
 165       },
 166       { size: 'lg' }
 167     );
 168   }
 169
 170   removeSubVolumeModal() {
 171     const name = this.selection.first().name;
 172     this.modalService.show(CriticalConfirmationModalComponent, {
 173       itemDescription: 'subvolume',
 174       itemNames: [name],
 175       actionDescription: 'remove',
 176       submitActionObservable: () =>
 177         this.taskWrapper.wrapTaskAroundCall({
 178           task: new FinishedTask('cephfs/subvolume/remove', { subVolumeName: name }),
 179           call: this.cephfsSubVolume.remove(this.fsName, name)
 180         })
 181     });
 182   }
 183 }