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

   1 import { Component, TemplateRef, ViewChild } from '@angular/core';
   2 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
   3 import { MultiClusterService } from '~/app/shared/api/multi-cluster.service';
   4 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
   5 import { Icons } from '~/app/shared/enum/icons.enum';
   6 import { CdTableAction } from '~/app/shared/models/cd-table-action';
   7 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
   8 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
   9 import { ModalService } from '~/app/shared/services/modal.service';
  10 import { MultiClusterFormComponent } from '../multi-cluster-form/multi-cluster-form.component';
  11 import { TableComponent } from '~/app/shared/datatable/table/table.component';
  12 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  13 import { Permissions } from '~/app/shared/models/permissions';
  14 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  15 import { NotificationService } from '~/app/shared/services/notification.service';
  16 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
  17 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
  18 import { MultiCluster } from '~/app/shared/models/multi-cluster';
  19 import { SummaryService } from '~/app/shared/services/summary.service';
  20 import { Router } from '@angular/router';
  21
  22 @Component({
  23   selector: 'cd-multi-cluster-list',
  24   templateUrl: './multi-cluster-list.component.html',
  25   styleUrls: ['./multi-cluster-list.component.scss']
  26 })
  27 export class MultiClusterListComponent {
  28   @ViewChild(TableComponent)
  29   table: TableComponent;
  30   @ViewChild('urlTpl', { static: true })
  31   public urlTpl: TemplateRef<any>;
  32
  33   permissions: Permissions;
  34   tableActions: CdTableAction[];
  35   clusterTokenStatus: object = {};
  36   columns: Array<CdTableColumn> = [];
  37   data: any;
  38   selection = new CdTableSelection();
  39   bsModalRef: NgbModalRef;
  40   clustersTokenMap: Map<string, string> = new Map<string, string>();
  41   newData: any;
  42   modalRef: NgbModalRef;
  43
  44   constructor(
  45     private multiClusterService: MultiClusterService,
  46     private router: Router,
  47     private summaryService: SummaryService,
  48     public actionLabels: ActionLabelsI18n,
  49     private notificationService: NotificationService,
  50     private authStorageService: AuthStorageService,
  51     private modalService: ModalService
  52   ) {
  53     this.tableActions = [
  54       {
  55         permission: 'create',
  56         icon: Icons.add,
  57         name: this.actionLabels.CONNECT,
  58         click: () => this.openRemoteClusterInfoModal('connect')
  59       },
  60       {
  61         permission: 'update',
  62         icon: Icons.edit,
  63         name: this.actionLabels.EDIT,
  64         disable: (selection: CdTableSelection) => this.getDisable('edit', selection),
  65         click: () => this.openRemoteClusterInfoModal('edit')
  66       },
  67       {
  68         permission: 'update',
  69         icon: Icons.refresh,
  70         name: this.actionLabels.RECONNECT,
  71         disable: (selection: CdTableSelection) => this.getDisable('reconnect', selection),
  72         click: () => this.openRemoteClusterInfoModal('reconnect')
  73       },
  74       {
  75         permission: 'delete',
  76         icon: Icons.destroy,
  77         name: this.actionLabels.DISCONNECT,
  78         disable: (selection: CdTableSelection) => this.getDisable('disconnect', selection),
  79         click: () => this.openDeleteClusterModal()
  80       }
  81     ];
  82     this.permissions = this.authStorageService.getPermissions();
  83   }
  84
  85   ngOnInit(): void {
  86     this.multiClusterService.subscribe((resp: object) => {
  87       if (resp && resp['config']) {
  88         const clusterDetailsArray = Object.values(resp['config']).flat();
  89         this.data = clusterDetailsArray;
  90         this.checkClusterConnectionStatus();
  91       }
  92     });
  93
  94     this.columns = [
  95       {
  96         prop: 'cluster_alias',
  97         name: $localize`Alias`,
  98         flexGrow: 2
  99       },
 100       {
 101         prop: 'cluster_connection_status',
 102         name: $localize`Connection`,
 103         flexGrow: 2,
 104         cellTransformation: CellTemplate.badge,
 105         customTemplateConfig: {
 106           map: {
 107             1: { value: 'DISCONNECTED', class: 'badge-danger' },
 108             0: { value: 'CONNECTED', class: 'badge-success' },
 109             2: { value: 'CHECKING..', class: 'badge-info' }
 110           }
 111         }
 112       },
 113       {
 114         prop: 'name',
 115         name: $localize`FSID`,
 116         flexGrow: 2
 117       },
 118       {
 119         prop: 'url',
 120         name: $localize`URL`,
 121         flexGrow: 2,
 122         cellTemplate: this.urlTpl
 123       },
 124       {
 125         prop: 'user',
 126         name: $localize`User`,
 127         flexGrow: 2
 128       }
 129     ];
 130
 131     this.multiClusterService.subscribeClusterTokenStatus((resp: object) => {
 132       this.clusterTokenStatus = resp;
 133       this.checkClusterConnectionStatus();
 134     });
 135   }
 136
 137   checkClusterConnectionStatus() {
 138     if (this.clusterTokenStatus && this.data) {
 139       this.data.forEach((cluster: MultiCluster) => {
 140         const clusterStatus = this.clusterTokenStatus[cluster.name];
 141
 142         if (clusterStatus !== undefined) {
 143           cluster.cluster_connection_status = clusterStatus.status;
 144         } else {
 145           cluster.cluster_connection_status = 2;
 146         }
 147
 148         if (cluster.cluster_alias === 'local-cluster') {
 149           cluster.cluster_connection_status = 0;
 150         }
 151       });
 152     }
 153   }
 154
 155   openRemoteClusterInfoModal(action: string) {
 156     const initialState = {
 157       clustersData: this.data,
 158       action: action,
 159       cluster: this.selection.first()
 160     };
 161     this.bsModalRef = this.modalService.show(MultiClusterFormComponent, initialState, {
 162       size: 'xl'
 163     });
 164     this.bsModalRef.componentInstance.submitAction.subscribe(() => {
 165       this.multiClusterService.refresh();
 166       this.summaryService.refresh();
 167       const currentRoute = this.router.url.split('?')[0];
 168       if (currentRoute.includes('dashboard')) {
 169         this.router.navigateByUrl('/pool', { skipLocationChange: true }).then(() => {
 170           this.router.navigate([currentRoute]);
 171         });
 172       } else {
 173         this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
 174           this.router.navigate([currentRoute]);
 175         });
 176       }
 177     });
 178   }
 179
 180   updateSelection(selection: CdTableSelection) {
 181     this.selection = selection;
 182   }
 183
 184   openDeleteClusterModal() {
 185     const cluster = this.selection.first();
 186     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
 187       actionDescription: $localize`Disconnect`,
 188       itemDescription: $localize`Cluster`,
 189       itemNames: [cluster['cluster_alias'] + ' - ' + cluster['user']],
 190       submitAction: () =>
 191         this.multiClusterService.deleteCluster(cluster['name'], cluster['user']).subscribe(() => {
 192           this.modalRef.close();
 193           this.notificationService.show(
 194             NotificationType.success,
 195             $localize`Disconnected cluster '${cluster['cluster_alias']}'`
 196           );
 197         })
 198     });
 199   }
 200
 201   getDisable(action: string, selection: CdTableSelection): string | boolean {
 202     if (!selection.hasSelection) {
 203       return $localize`Please select one or more clusters to ${action}`;
 204     }
 205     if (selection.hasSingleSelection) {
 206       const cluster = selection.first();
 207       if (cluster['cluster_alias'] === 'local-cluster') {
 208         return $localize`Cannot ${action} local cluster`;
 209       }
 210     }
 211     return false;
 212   }
 213 }