1 import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
2 import { Observable, ReplaySubject, of } from 'rxjs';
3 import { catchError, shareReplay, switchMap } from 'rxjs/operators';
4 import { CephfsSubvolumeService } from '~/app/shared/api/cephfs-subvolume.service';
5 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
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 { CephfsSubvolume } from '~/app/shared/models/cephfs-subvolume.model';
13 import { ModalService } from '~/app/shared/services/modal.service';
14 import { CephfsSubvolumeFormComponent } from '../cephfs-subvolume-form/cephfs-subvolume-form.component';
15 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
16 import { Permissions } from '~/app/shared/models/permissions';
17 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
18 import { FinishedTask } from '~/app/shared/models/finished-task';
19 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
20 import { FormControl } from '@angular/forms';
21 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
22 import { CdForm } from '~/app/shared/forms/cd-form';
23 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
24 import { CephfsSubvolumeGroupService } from '~/app/shared/api/cephfs-subvolume-group.service';
25 import { CephfsSubvolumeGroup } from '~/app/shared/models/cephfs-subvolumegroup.model';
28 selector: 'cd-cephfs-subvolume-list',
29 templateUrl: './cephfs-subvolume-list.component.html',
30 styleUrls: ['./cephfs-subvolume-list.component.scss']
32 export class CephfsSubvolumeListComponent extends CdForm implements OnInit, OnChanges {
33 @ViewChild('quotaUsageTpl', { static: true })
36 @ViewChild('typeTpl', { static: true })
39 @ViewChild('modeToHumanReadableTpl', { static: true })
40 modeToHumanReadableTpl: any;
42 @ViewChild('nameTpl', { static: true })
45 @ViewChild('quotaSizeTpl', { static: true })
48 @ViewChild('removeTmpl', { static: true })
49 removeTmpl: TemplateRef<any>;
51 @Input() fsName: string;
52 @Input() pools: any[];
54 columns: CdTableColumn[] = [];
55 tableActions: CdTableAction[];
56 context: CdTableFetchDataContext;
57 selection = new CdTableSelection();
58 removeForm: CdFormGroup;
60 permissions: Permissions;
61 modalRef: NgbModalRef;
62 errorMessage: string = '';
63 selectedName: string = '';
65 subVolumes$: Observable<CephfsSubvolume[]>;
66 subVolumeGroups$: Observable<CephfsSubvolumeGroup[]>;
67 subject = new ReplaySubject<CephfsSubvolume[]>();
68 groupsSubject = new ReplaySubject<CephfsSubvolume[]>();
70 activeGroupName: string = '';
73 private cephfsSubVolume: CephfsSubvolumeService,
74 private actionLabels: ActionLabelsI18n,
75 private modalService: ModalService,
76 private authStorageService: AuthStorageService,
77 private taskWrapper: TaskWrapperService,
78 private cephfsSubvolumeGroupService: CephfsSubvolumeGroupService
81 this.permissions = this.authStorageService.getPermissions();
87 name: $localize`Name`,
90 cellTemplate: this.nameTpl
93 name: $localize`Data Pool`,
94 prop: 'info.data_pool',
96 cellTransformation: CellTemplate.badge,
97 customTemplateConfig: {
98 class: 'badge-background-primary'
102 name: $localize`Usage`,
103 prop: 'info.bytes_pcent',
105 cellTemplate: this.quotaUsageTpl,
106 cellClass: 'text-right'
109 name: $localize`Path`,
112 cellTransformation: CellTemplate.path
115 name: $localize`Mode`,
118 cellTemplate: this.modeToHumanReadableTpl
121 name: $localize`Created`,
122 prop: 'info.created_at',
124 cellTransformation: CellTemplate.timeAgo
128 this.tableActions = [
130 name: this.actionLabels.CREATE,
131 permission: 'create',
133 click: () => this.openModal()
136 name: this.actionLabels.EDIT,
137 permission: 'update',
139 click: () => this.openModal(true)
142 name: this.actionLabels.REMOVE,
143 permission: 'delete',
145 click: () => this.removeSubVolumeModal()
149 this.getSubVolumes();
151 this.subVolumeGroups$ = this.groupsSubject.pipe(
153 this.cephfsSubvolumeGroupService.get(this.fsName).pipe(
155 this.context.error();
169 this.groupsSubject.next();
172 updateSelection(selection: CdTableSelection) {
173 this.selection = selection;
176 openModal(edit = false) {
177 this.modalService.show(
178 CephfsSubvolumeFormComponent,
181 subVolumeName: this.selection?.first()?.name,
182 subVolumeGroupName: this.activeGroupName,
190 removeSubVolumeModal() {
191 this.removeForm = new CdFormGroup({
192 retainSnapshots: new FormControl(false)
194 this.errorMessage = '';
195 this.selectedName = this.selection.first().name;
196 this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
197 actionDescription: 'Remove',
198 itemNames: [this.selectedName],
199 itemDescription: 'Subvolume',
200 childFormGroup: this.removeForm,
201 childFormGroupTemplate: this.removeTmpl,
204 .wrapTaskAroundCall({
205 task: new FinishedTask('cephfs/subvolume/remove', { subVolumeName: this.selectedName }),
206 call: this.cephfsSubVolume.remove(
209 this.activeGroupName,
210 this.removeForm.getValue('retainSnapshots')
214 complete: () => this.modalRef.close(),
216 this.modalRef.componentInstance.stopLoadingSpinner();
217 this.errorMessage = error.error.detail;
223 selectSubVolumeGroup(subVolumeGroupName: string) {
224 this.activeGroupName = subVolumeGroupName;
225 this.getSubVolumes(subVolumeGroupName);
228 getSubVolumes(subVolumeGroupName = '') {
229 this.subVolumes$ = this.subject.pipe(
231 this.cephfsSubVolume.get(this.fsName, subVolumeGroupName).pipe(
233 this.context.error();