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

   1 import {
   2   Component,
   3   Input,
   4   OnChanges,
   5   OnInit,
   6   SimpleChanges,
   7   TemplateRef,
   8   ViewChild
   9 } from '@angular/core';
  10 import { BehaviorSubject, Observable, of } from 'rxjs';
  11 import { catchError, switchMap, tap } from 'rxjs/operators';
  12 import { CephfsSubvolumeService } from '~/app/shared/api/cephfs-subvolume.service';
  13 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
  14 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
  15 import { Icons } from '~/app/shared/enum/icons.enum';
  16 import { CdTableAction } from '~/app/shared/models/cd-table-action';
  17 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
  18 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
  19 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
  20 import { CephfsSubvolume } from '~/app/shared/models/cephfs-subvolume.model';
  21 import { ModalService } from '~/app/shared/services/modal.service';
  22 import { CephfsSubvolumeFormComponent } from '../cephfs-subvolume-form/cephfs-subvolume-form.component';
  23 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  24 import { Permissions } from '~/app/shared/models/permissions';
  25 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  26 import { FinishedTask } from '~/app/shared/models/finished-task';
  27 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
  28 import { FormControl } from '@angular/forms';
  29 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
  30 import { CdForm } from '~/app/shared/forms/cd-form';
  31 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  32 import { CephfsSubvolumeGroupService } from '~/app/shared/api/cephfs-subvolume-group.service';
  33 import { CephfsSubvolumeGroup } from '~/app/shared/models/cephfs-subvolume-group.model';
  34 import { CephfsMountDetailsComponent } from '../cephfs-mount-details/cephfs-mount-details.component';
  35 import { HealthService } from '~/app/shared/api/health.service';
  36 import _ from 'lodash';
  37 import { DeletionImpact } from '~/app/shared/enum/critical-confirmation-modal-impact.enum';
  38
  39 const DEFAULT_SUBVOLUME_GROUP = '_nogroup';
  40
  41 @Component({
  42   selector: 'cd-cephfs-subvolume-list',
  43   templateUrl: './cephfs-subvolume-list.component.html',
  44   styleUrls: ['./cephfs-subvolume-list.component.scss']
  45 })
  46 export class CephfsSubvolumeListComponent extends CdForm implements OnInit, OnChanges {
  47   @ViewChild('quotaUsageTpl', { static: true })
  48   quotaUsageTpl: any;
  49
  50   @ViewChild('typeTpl', { static: true })
  51   typeTpl: any;
  52
  53   @ViewChild('modeToHumanReadableTpl', { static: true })
  54   modeToHumanReadableTpl: any;
  55
  56   @ViewChild('nameTpl', { static: true })
  57   nameTpl: any;
  58
  59   @ViewChild('quotaSizeTpl', { static: true })
  60   quotaSizeTpl: any;
  61
  62   @ViewChild('removeTmpl', { static: true })
  63   removeTmpl: TemplateRef<any>;
  64
  65   @Input() fsName: string;
  66   @Input() pools: any[];
  67
  68   columns: CdTableColumn[] = [];
  69   tableActions: CdTableAction[];
  70   context: CdTableFetchDataContext;
  71   selection = new CdTableSelection();
  72   removeForm: CdFormGroup;
  73   icons = Icons;
  74   permissions: Permissions;
  75   modalRef: NgbModalRef;
  76   errorMessage: string = '';
  77   selectedName: string = '';
  78
  79   subVolumes$: Observable<CephfsSubvolume[]>;
  80   subVolumeGroups$: Observable<CephfsSubvolumeGroup[]>;
  81   subject = new BehaviorSubject<CephfsSubvolume[]>([]);
  82   groupsSubject = new BehaviorSubject<CephfsSubvolume[]>([]);
  83
  84   subvolumeGroupList: string[] = [];
  85   subVolumesList: CephfsSubvolume[] = [];
  86
  87   activeGroupName: string = '';
  88
  89   constructor(
  90     private cephfsSubVolumeService: CephfsSubvolumeService,
  91     private actionLabels: ActionLabelsI18n,
  92     private modalService: ModalService,
  93     private authStorageService: AuthStorageService,
  94     private taskWrapper: TaskWrapperService,
  95     private cephfsSubvolumeGroupService: CephfsSubvolumeGroupService,
  96     private healthService: HealthService
  97   ) {
  98     super();
  99     this.permissions = this.authStorageService.getPermissions();
 100   }
 101
 102   ngOnInit(): void {
 103     this.columns = [
 104       {
 105         name: $localize`Name`,
 106         prop: 'name',
 107         flexGrow: 1,
 108         cellTemplate: this.nameTpl
 109       },
 110       {
 111         name: $localize`Data Pool`,
 112         prop: 'info.data_pool',
 113         flexGrow: 0.7,
 114         cellTransformation: CellTemplate.badge,
 115         customTemplateConfig: {
 116           class: 'badge-background-primary'
 117         }
 118       },
 119       {
 120         name: $localize`Usage`,
 121         prop: 'info.bytes_pcent',
 122         flexGrow: 0.7,
 123         cellTemplate: this.quotaUsageTpl,
 124         cellClass: 'text-right'
 125       },
 126       {
 127         name: $localize`Path`,
 128         prop: 'info.path',
 129         flexGrow: 1,
 130         cellTransformation: CellTemplate.path
 131       },
 132       {
 133         name: $localize`Mode`,
 134         prop: 'info.mode',
 135         flexGrow: 0.5,
 136         cellTemplate: this.modeToHumanReadableTpl
 137       },
 138       {
 139         name: $localize`Created`,
 140         prop: 'info.created_at',
 141         flexGrow: 0.5,
 142         cellTransformation: CellTemplate.timeAgo
 143       }
 144     ];
 145
 146     this.tableActions = [
 147       {
 148         name: this.actionLabels.CREATE,
 149         permission: 'create',
 150         icon: Icons.add,
 151         click: () => this.openModal()
 152       },
 153       {
 154         name: this.actionLabels.EDIT,
 155         permission: 'update',
 156         icon: Icons.edit,
 157         click: () => this.openModal(true)
 158       },
 159       {
 160         name: this.actionLabels.ATTACH,
 161         permission: 'read',
 162         icon: Icons.bars,
 163         disable: () => !this.selection?.hasSelection,
 164         click: () => this.showAttachInfo()
 165       },
 166       {
 167         name: this.actionLabels.NFS_EXPORT,
 168         permission: 'create',
 169         icon: Icons.nfsExport,
 170         routerLink: () => [
 171           '/cephfs/nfs/create',
 172           this.fsName,
 173           _.isEmpty(this.activeGroupName) ? DEFAULT_SUBVOLUME_GROUP : this.activeGroupName,
 174           { subvolume: this.selection?.first()?.name }
 175         ],
 176         disable: () => !this.selection?.hasSingleSelection
 177       },
 178       {
 179         name: this.actionLabels.REMOVE,
 180         permission: 'delete',
 181         icon: Icons.destroy,
 182         click: () => this.removeSubVolumeModal()
 183       }
 184     ];
 185
 186     this.subVolumeGroups$ = this.groupsSubject.pipe(
 187       switchMap(() =>
 188         this.cephfsSubvolumeGroupService.get(this.fsName, false).pipe(
 189           tap((groups) => {
 190             this.subvolumeGroupList = groups.map((group) => group.name);
 191             this.subvolumeGroupList.unshift('');
 192           }),
 193           catchError(() => {
 194             this.context.error();
 195             return of(null);
 196           })
 197         )
 198       )
 199     );
 200   }
 201
 202   fetchData() {
 203     this.subject.next([]);
 204   }
 205
 206   ngOnChanges(changes: SimpleChanges) {
 207     if (changes.fsName) {
 208       this.subject.next([]);
 209       this.groupsSubject.next([]);
 210     }
 211   }
 212
 213   updateSelection(selection: CdTableSelection) {
 214     this.selection = selection;
 215   }
 216
 217   showAttachInfo() {
 218     const selectedSubVolume = this.selection?.selected?.[0];
 219
 220     this.healthService.getClusterFsid().subscribe({
 221       next: (clusterId: string) => {
 222         this.modalRef = this.modalService.show(CephfsMountDetailsComponent, {
 223           onSubmit: () => this.modalRef.close(),
 224           mountData: {
 225             fsId: clusterId,
 226             fsName: this.fsName,
 227             rootPath: selectedSubVolume.info.path
 228           }
 229         });
 230       }
 231     });
 232   }
 233
 234   openModal(edit = false) {
 235     this.modalService.show(
 236       CephfsSubvolumeFormComponent,
 237       {
 238         fsName: this.fsName,
 239         subVolumeName: this.selection?.first()?.name,
 240         subVolumeGroupName: this.activeGroupName,
 241         pools: this.pools,
 242         isEdit: edit
 243       },
 244       { size: 'lg' }
 245     );
 246   }
 247
 248   removeSubVolumeModal() {
 249     this.removeForm = new CdFormGroup({
 250       retainSnapshots: new FormControl(false)
 251     });
 252     this.errorMessage = '';
 253     this.selectedName = this.selection.first().name;
 254     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
 255       impact: DeletionImpact.high,
 256       actionDescription: 'Remove',
 257       itemNames: [this.selectedName],
 258       itemDescription: 'Subvolume',
 259       childFormGroup: this.removeForm,
 260       childFormGroupTemplate: this.removeTmpl,
 261       submitAction: () =>
 262         this.taskWrapper
 263           .wrapTaskAroundCall({
 264             task: new FinishedTask('cephfs/subvolume/remove', { subVolumeName: this.selectedName }),
 265             call: this.cephfsSubVolumeService.remove(
 266               this.fsName,
 267               this.selectedName,
 268               this.activeGroupName,
 269               this.removeForm.getValue('retainSnapshots')
 270             )
 271           })
 272           .subscribe({
 273             complete: () => this.modalRef.close(),
 274             error: (error) => {
 275               this.modalRef.componentInstance.stopLoadingSpinner();
 276               this.errorMessage = error.error.detail;
 277             }
 278           })
 279     });
 280   }
 281
 282   selectSubVolumeGroup(subVolumeGroupName: string) {
 283     this.activeGroupName = subVolumeGroupName;
 284     this.getSubVolumes();
 285   }
 286
 287   getSubVolumes() {
 288     this.subVolumes$ = this.subject.pipe(
 289       switchMap(() =>
 290         this.cephfsSubVolumeService.get(this.fsName, this.activeGroupName).pipe(
 291           catchError(() => {
 292             this.context?.error();
 293             return of(null);
 294           })
 295         )
 296       )
 297     );
 298   }
 299 }