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