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

   1 import { Component, ViewChild } from '@angular/core';
   2
   3 import { I18n } from '@ngx-translate/i18n-polyfill';
   4 import { BlockUI, NgBlockUI } from 'ng-block-ui';
   5 import { timer as observableTimer } from 'rxjs';
   6
   7 import { MgrModuleService } from '../../../../shared/api/mgr-module.service';
   8 import { TableComponent } from '../../../../shared/datatable/table/table.component';
   9 import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
  10 import { Icons } from '../../../../shared/enum/icons.enum';
  11 import { CdTableAction } from '../../../../shared/models/cd-table-action';
  12 import { CdTableColumn } from '../../../../shared/models/cd-table-column';
  13 import { CdTableFetchDataContext } from '../../../../shared/models/cd-table-fetch-data-context';
  14 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
  15 import { Permission } from '../../../../shared/models/permissions';
  16 import { AuthStorageService } from '../../../../shared/services/auth-storage.service';
  17 import { NotificationService } from '../../../../shared/services/notification.service';
  18
  19 @Component({
  20   selector: 'cd-mgr-module-list',
  21   templateUrl: './mgr-module-list.component.html',
  22   styleUrls: ['./mgr-module-list.component.scss']
  23 })
  24 export class MgrModuleListComponent {
  25   @ViewChild(TableComponent, { static: true })
  26   table: TableComponent;
  27   @BlockUI()
  28   blockUI: NgBlockUI;
  29
  30   permission: Permission;
  31   tableActions: CdTableAction[];
  32   columns: CdTableColumn[] = [];
  33   modules: object[] = [];
  34   selection: CdTableSelection = new CdTableSelection();
  35
  36   constructor(
  37     private authStorageService: AuthStorageService,
  38     private mgrModuleService: MgrModuleService,
  39     private notificationService: NotificationService,
  40     private i18n: I18n
  41   ) {
  42     this.permission = this.authStorageService.getPermissions().configOpt;
  43     this.columns = [
  44       {
  45         name: this.i18n('Name'),
  46         prop: 'name',
  47         flexGrow: 1
  48       },
  49       {
  50         name: this.i18n('Enabled'),
  51         prop: 'enabled',
  52         flexGrow: 1,
  53         cellClass: 'text-center',
  54         cellTransformation: CellTemplate.checkIcon
  55       }
  56     ];
  57     const getModuleUri = () =>
  58       this.selection.first() && encodeURIComponent(this.selection.first().name);
  59     this.tableActions = [
  60       {
  61         name: this.i18n('Edit'),
  62         permission: 'update',
  63         disable: () => {
  64           if (!this.selection.hasSelection) {
  65             return true;
  66           }
  67           // Disable the 'edit' button when the module has no options.
  68           return Object.values(this.selection.first().options).length === 0;
  69         },
  70         routerLink: () => `/mgr-modules/edit/${getModuleUri()}`,
  71         icon: Icons.edit
  72       },
  73       {
  74         name: this.i18n('Enable'),
  75         permission: 'update',
  76         click: () => this.updateModuleState(),
  77         disable: () => this.isTableActionDisabled('enabled'),
  78         icon: Icons.start
  79       },
  80       {
  81         name: this.i18n('Disable'),
  82         permission: 'update',
  83         click: () => this.updateModuleState(),
  84         disable: () => this.isTableActionDisabled('disabled'),
  85         icon: Icons.stop
  86       }
  87     ];
  88   }
  89
  90   getModuleList(context: CdTableFetchDataContext) {
  91     this.mgrModuleService.list().subscribe(
  92       (resp: object[]) => {
  93         this.modules = resp;
  94       },
  95       () => {
  96         context.error();
  97       }
  98     );
  99   }
 100
 101   updateSelection(selection: CdTableSelection) {
 102     this.selection = selection;
 103   }
 104
 105   /**
 106    * Check if the table action is disabled.
 107    * @param state The expected module state, e.g. ``enabled`` or ``disabled``.
 108    * @returns If the specified state is validated to true or no selection is
 109    *   done, then ``true`` is returned, otherwise ``false``.
 110    */
 111   isTableActionDisabled(state: 'enabled' | 'disabled') {
 112     if (!this.selection.hasSelection) {
 113       return true;
 114     }
 115     // Make sure the user can't modify the run state of the 'Dashboard' module.
 116     // This check is only done in the UI because the REST API should still be
 117     // able to do so.
 118     if (this.selection.first().name === 'dashboard') {
 119       return true;
 120     }
 121     switch (state) {
 122       case 'enabled':
 123         return this.selection.first().enabled;
 124       case 'disabled':
 125         return !this.selection.first().enabled;
 126     }
 127   }
 128
 129   /**
 130    * Update the Ceph Mgr module state to enabled or disabled.
 131    */
 132   updateModuleState() {
 133     if (!this.selection.hasSelection) {
 134       return;
 135     }
 136
 137     let $obs;
 138     const fnWaitUntilReconnected = () => {
 139       observableTimer(2000).subscribe(() => {
 140         // Trigger an API request to check if the connection is
 141         // re-established.
 142         this.mgrModuleService.list().subscribe(
 143           () => {
 144             // Resume showing the notification toasties.
 145             this.notificationService.suspendToasties(false);
 146             // Unblock the whole UI.
 147             this.blockUI.stop();
 148             // Reload the data table content.
 149             this.table.refreshBtn();
 150           },
 151           () => {
 152             fnWaitUntilReconnected();
 153           }
 154         );
 155       });
 156     };
 157
 158     // Note, the Ceph Mgr is always restarted when a module
 159     // is enabled/disabled.
 160     const module = this.selection.first();
 161     if (module.enabled) {
 162       $obs = this.mgrModuleService.disable(module.name);
 163     } else {
 164       $obs = this.mgrModuleService.enable(module.name);
 165     }
 166     $obs.subscribe(
 167       () => {},
 168       () => {
 169         // Suspend showing the notification toasties.
 170         this.notificationService.suspendToasties(true);
 171         // Block the whole UI to prevent user interactions until
 172         // the connection to the backend is reestablished
 173         this.blockUI.start(this.i18n('Reconnecting, please wait ...'));
 174         fnWaitUntilReconnected();
 175       }
 176     );
 177   }
 178 }