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

   1 import { Component, Input, 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
  19 @Component({
  20   selector: 'cd-cephfs-subvolume-group',
  21   templateUrl: './cephfs-subvolume-group.component.html',
  22   styleUrls: ['./cephfs-subvolume-group.component.scss']
  23 })
  24 export class CephfsSubvolumeGroupComponent implements OnInit {
  25   @ViewChild('quotaUsageTpl', { static: true })
  26   quotaUsageTpl: any;
  27
  28   @ViewChild('typeTpl', { static: true })
  29   typeTpl: any;
  30
  31   @ViewChild('modeToHumanReadableTpl', { static: true })
  32   modeToHumanReadableTpl: any;
  33
  34   @ViewChild('nameTpl', { static: true })
  35   nameTpl: any;
  36
  37   @ViewChild('quotaSizeTpl', { static: true })
  38   quotaSizeTpl: any;
  39
  40   @Input()
  41   fsName: any;
  42   @Input() pools: any[];
  43
  44   columns: CdTableColumn[];
  45   tableActions: CdTableAction[];
  46   context: CdTableFetchDataContext;
  47   selection = new CdTableSelection();
  48   icons = Icons;
  49   permissions: Permissions;
  50
  51   subvolumeGroup$: Observable<CephfsSubvolumeGroup[]>;
  52   subject = new ReplaySubject<CephfsSubvolumeGroup[]>();
  53
  54   constructor(
  55     private cephfsSubvolumeGroup: CephfsSubvolumeGroupService,
  56     private actionLabels: ActionLabelsI18n,
  57     private modalService: ModalService,
  58     private authStorageService: AuthStorageService
  59   ) {
  60     this.permissions = this.authStorageService.getPermissions();
  61   }
  62
  63   ngOnInit(): void {
  64     this.columns = [
  65       {
  66         name: $localize`Name`,
  67         prop: 'name',
  68         flexGrow: 0.6,
  69         cellTransformation: CellTemplate.bold
  70       },
  71       {
  72         name: $localize`Data Pool`,
  73         prop: 'info.data_pool',
  74         flexGrow: 0.7,
  75         cellTransformation: CellTemplate.badge,
  76         customTemplateConfig: {
  77           class: 'badge-background-primary'
  78         }
  79       },
  80       {
  81         name: $localize`Usage`,
  82         prop: 'info.bytes_pcent',
  83         flexGrow: 0.7,
  84         cellTemplate: this.quotaUsageTpl,
  85         cellClass: 'text-right'
  86       },
  87       {
  88         name: $localize`Mode`,
  89         prop: 'info.mode',
  90         flexGrow: 0.5,
  91         cellTemplate: this.modeToHumanReadableTpl
  92       },
  93       {
  94         name: $localize`Created`,
  95         prop: 'info.created_at',
  96         flexGrow: 0.5,
  97         cellTransformation: CellTemplate.timeAgo
  98       }
  99     ];
 100
 101     this.tableActions = [
 102       {
 103         name: this.actionLabels.CREATE,
 104         permission: 'create',
 105         icon: Icons.add,
 106         click: () => this.openModal(),
 107         canBePrimary: (selection: CdTableSelection) => !selection.hasSelection
 108       },
 109       {
 110         name: this.actionLabels.EDIT,
 111         permission: 'update',
 112         icon: Icons.edit,
 113         click: () => this.openModal(true)
 114       }
 115     ];
 116
 117     this.subvolumeGroup$ = this.subject.pipe(
 118       switchMap(() =>
 119         this.cephfsSubvolumeGroup.get(this.fsName).pipe(
 120           catchError(() => {
 121             this.context.error();
 122             return of(null);
 123           })
 124         )
 125       ),
 126       shareReplay(1)
 127     );
 128   }
 129
 130   fetchData() {
 131     this.subject.next();
 132   }
 133
 134   ngOnChanges() {
 135     this.subject.next();
 136   }
 137
 138   updateSelection(selection: CdTableSelection) {
 139     this.selection = selection;
 140   }
 141
 142   openModal(edit = false) {
 143     this.modalService.show(
 144       CephfsSubvolumegroupFormComponent,
 145       {
 146         fsName: this.fsName,
 147         subvolumegroupName: this.selection?.first()?.name,
 148         pools: this.pools,
 149         isEdit: edit
 150       },
 151       { size: 'lg' }
 152     );
 153   }
 154 }