git.apps.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
   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 { CephfsSubvolumeGroup } from '~/app/shared/models/cephfs-subvolumegroup.model';
  13 import { CephfsSubvolumegroupFormComponent } from '../cephfs-subvolumegroup-form/cephfs-subvolumegroup-form.component';
  14 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
  15 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  16 import { ModalService } from '~/app/shared/services/modal.service';
  17 import { Permissions } from '~/app/shared/models/permissions';
  18 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  19 import { FinishedTask } from '~/app/shared/models/finished-task';
  20 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  21
  22 @Component({
  23   selector: 'cd-cephfs-subvolume-group',
  24   templateUrl: './cephfs-subvolume-group.component.html',
  25   styleUrls: ['./cephfs-subvolume-group.component.scss']
  26 })
  27 export class CephfsSubvolumeGroupComponent implements OnInit, OnChanges {
  28   @ViewChild('quotaUsageTpl', { static: true })
  29   quotaUsageTpl: any;
  30
  31   @ViewChild('typeTpl', { static: true })
  32   typeTpl: any;
  33
  34   @ViewChild('modeToHumanReadableTpl', { static: true })
  35   modeToHumanReadableTpl: any;
  36
  37   @ViewChild('nameTpl', { static: true })
  38   nameTpl: any;
  39
  40   @ViewChild('quotaSizeTpl', { static: true })
  41   quotaSizeTpl: any;
  42
  43   @Input()
  44   fsName: any;
  45   @Input() pools: any[];
  46
  47   columns: CdTableColumn[];
  48   tableActions: CdTableAction[];
  49   context: CdTableFetchDataContext;
  50   selection = new CdTableSelection();
  51   icons = Icons;
  52   permissions: Permissions;
  53
  54   subvolumeGroup$: Observable<CephfsSubvolumeGroup[]>;
  55   subject = new ReplaySubject<CephfsSubvolumeGroup[]>();
  56
  57   constructor(
  58     private cephfsSubvolumeGroup: CephfsSubvolumeGroupService,
  59     private actionLabels: ActionLabelsI18n,
  60     private modalService: ModalService,
  61     private authStorageService: AuthStorageService,
  62     private taskWrapper: TaskWrapperService
  63   ) {
  64     this.permissions = this.authStorageService.getPermissions();
  65   }
  66
  67   ngOnInit(): void {
  68     this.columns = [
  69       {
  70         name: $localize`Name`,
  71         prop: 'name',
  72         flexGrow: 0.6,
  73         cellTransformation: CellTemplate.bold
  74       },
  75       {
  76         name: $localize`Data Pool`,
  77         prop: 'info.data_pool',
  78         flexGrow: 0.7,
  79         cellTransformation: CellTemplate.badge,
  80         customTemplateConfig: {
  81           class: 'badge-background-primary'
  82         }
  83       },
  84       {
  85         name: $localize`Usage`,
  86         prop: 'info.bytes_pcent',
  87         flexGrow: 0.7,
  88         cellTemplate: this.quotaUsageTpl,
  89         cellClass: 'text-right'
  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         name: this.actionLabels.REMOVE,
 121         permission: 'delete',
 122         icon: Icons.destroy,
 123         click: () => this.removeSubVolumeModal()
 124       }
 125     ];
 126
 127     this.subvolumeGroup$ = this.subject.pipe(
 128       switchMap(() =>
 129         this.cephfsSubvolumeGroup.get(this.fsName).pipe(
 130           catchError(() => {
 131             this.context.error();
 132             return of(null);
 133           })
 134         )
 135       ),
 136       shareReplay(1)
 137     );
 138   }
 139
 140   fetchData() {
 141     this.subject.next();
 142   }
 143
 144   ngOnChanges() {
 145     this.subject.next();
 146   }
 147
 148   updateSelection(selection: CdTableSelection) {
 149     this.selection = selection;
 150   }
 151
 152   openModal(edit = false) {
 153     this.modalService.show(
 154       CephfsSubvolumegroupFormComponent,
 155       {
 156         fsName: this.fsName,
 157         subvolumegroupName: this.selection?.first()?.name,
 158         pools: this.pools,
 159         isEdit: edit
 160       },
 161       { size: 'lg' }
 162     );
 163   }
 164
 165   removeSubVolumeModal() {
 166     const name = this.selection.first().name;
 167     this.modalService.show(CriticalConfirmationModalComponent, {
 168       itemDescription: 'subvolume group',
 169       itemNames: [name],
 170       actionDescription: 'remove',
 171       submitActionObservable: () =>
 172         this.taskWrapper.wrapTaskAroundCall({
 173           task: new FinishedTask('cephfs/subvolume/group/remove', { subvolumegroupName: name }),
 174           call: this.cephfsSubvolumeGroup.remove(this.fsName, name)
 175         })
 176     });
 177   }
 178 }