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 { ModalCdsService } from '~/app/shared/services/modal-cds.service';
  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     private cdsModalService: ModalCdsService
  69   ) {
  70     this.permissions = this.authStorageService.getPermissions();
  71   }
  72
  73   ngOnInit(): void {
  74     this.columns = [
  75       {
  76         name: $localize`Name`,
  77         prop: 'name',
  78         flexGrow: 0.6,
  79         cellTransformation: CellTemplate.bold
  80       },
  81       {
  82         name: $localize`Data Pool`,
  83         prop: 'info.data_pool',
  84         flexGrow: 0.7,
  85         cellTransformation: CellTemplate.badge,
  86         customTemplateConfig: {
  87           class: 'badge-background-primary'
  88         }
  89       },
  90       {
  91         name: $localize`Usage`,
  92         prop: 'info.bytes_pcent',
  93         flexGrow: 0.7,
  94         cellTemplate: this.quotaUsageTpl,
  95         cellClass: 'text-right'
  96       },
  97       {
  98         name: $localize`Mode`,
  99         prop: 'info.mode',
 100         flexGrow: 0.5,
 101         cellTemplate: this.modeToHumanReadableTpl
 102       },
 103       {
 104         name: $localize`Created`,
 105         prop: 'info.created_at',
 106         flexGrow: 0.5,
 107         cellTransformation: CellTemplate.timeAgo
 108       }
 109     ];
 110
 111     this.tableActions = [
 112       {
 113         name: this.actionLabels.CREATE,
 114         permission: 'create',
 115         icon: Icons.add,
 116         click: () => this.openModal(),
 117         canBePrimary: (selection: CdTableSelection) => !selection.hasSelection
 118       },
 119       {
 120         name: this.actionLabels.EDIT,
 121         permission: 'update',
 122         icon: Icons.edit,
 123         click: () => this.openModal(true)
 124       },
 125       {
 126         name: this.actionLabels.NFS_EXPORT,
 127         permission: 'create',
 128         icon: Icons.nfsExport,
 129         routerLink: () => ['/cephfs/nfs/create', this.fsName, this.selection?.first()?.name],
 130         disable: () => !this.selection.hasSingleSelection
 131       },
 132       {
 133         name: this.actionLabels.REMOVE,
 134         permission: 'delete',
 135         icon: Icons.destroy,
 136         click: () => this.removeSubVolumeModal()
 137       }
 138     ];
 139
 140     this.subvolumeGroup$ = this.subject.pipe(
 141       switchMap(() =>
 142         this.cephfsSubvolumeGroup.get(this.fsName).pipe(
 143           catchError(() => {
 144             this.context.error();
 145             return of(null);
 146           })
 147         )
 148       ),
 149       shareReplay(1)
 150     );
 151   }
 152
 153   fetchData() {
 154     this.subject.next([]);
 155   }
 156
 157   ngOnChanges(changes: SimpleChanges) {
 158     if (changes.fsName) {
 159       this.subject.next([]);
 160     }
 161   }
 162
 163   updateSelection(selection: CdTableSelection) {
 164     this.selection = selection;
 165   }
 166
 167   openModal(edit = false) {
 168     this.modalService.show(
 169       CephfsSubvolumegroupFormComponent,
 170       {
 171         fsName: this.fsName,
 172         subvolumegroupName: this.selection?.first()?.name,
 173         pools: this.pools,
 174         isEdit: edit
 175       },
 176       { size: 'lg' }
 177     );
 178   }
 179
 180   removeSubVolumeModal() {
 181     const name = this.selection.first().name;
 182     this.cdsModalService.show(CriticalConfirmationModalComponent, {
 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 }