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

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