ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts

   1 import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
   2 import { Router } from '@angular/router';
   3
   4 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
   5 import { delay } from 'rxjs/operators';
   6
   7 import { CephServiceService } from '~/app/shared/api/ceph-service.service';
   8 import { OrchestratorService } from '~/app/shared/api/orchestrator.service';
   9 import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
  10 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  11 import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants';
  12 import { TableComponent } from '~/app/shared/datatable/table/table.component';
  13 import { Icons } from '~/app/shared/enum/icons.enum';
  14 import { CdTableAction } from '~/app/shared/models/cd-table-action';
  15 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
  16 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
  17 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
  18 import { FinishedTask } from '~/app/shared/models/finished-task';
  19 import { OrchestratorFeature } from '~/app/shared/models/orchestrator.enum';
  20 import { OrchestratorStatus } from '~/app/shared/models/orchestrator.interface';
  21 import { Permissions } from '~/app/shared/models/permissions';
  22 import { CephServiceSpec } from '~/app/shared/models/service.interface';
  23 import { RelativeDatePipe } from '~/app/shared/pipes/relative-date.pipe';
  24 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  25 import { ModalService } from '~/app/shared/services/modal.service';
  26 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  27 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
  28 import { PlacementPipe } from './placement.pipe';
  29 import { ServiceFormComponent } from './service-form/service-form.component';
  30
  31 const BASE_URL = 'services';
  32
  33 @Component({
  34   selector: 'cd-services',
  35   templateUrl: './services.component.html',
  36   styleUrls: ['./services.component.scss'],
  37   providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }]
  38 })
  39 export class ServicesComponent extends ListWithDetails implements OnChanges, OnInit {
  40   @ViewChild(TableComponent, { static: true })
  41   table: TableComponent;
  42
  43   @Input() hostname: string;
  44
  45   // Do not display these columns
  46   @Input() hiddenColumns: string[] = [];
  47
  48   @Input() hiddenServices: string[] = [];
  49
  50   @Input() hasDetails = true;
  51
  52   @Input() routedModal = true;
  53
  54   permissions: Permissions;
  55   tableActions: CdTableAction[];
  56   showDocPanel = false;
  57   bsModalRef: NgbModalRef;
  58
  59   orchStatus: OrchestratorStatus;
  60   actionOrchFeatures = {
  61     create: [OrchestratorFeature.SERVICE_CREATE],
  62     update: [OrchestratorFeature.SERVICE_EDIT],
  63     delete: [OrchestratorFeature.SERVICE_DELETE]
  64   };
  65
  66   columns: Array<CdTableColumn> = [];
  67   services: Array<CephServiceSpec> = [];
  68   isLoadingServices = false;
  69   selection: CdTableSelection = new CdTableSelection();
  70
  71   constructor(
  72     private actionLabels: ActionLabelsI18n,
  73     private authStorageService: AuthStorageService,
  74     private modalService: ModalService,
  75     private orchService: OrchestratorService,
  76     private cephServiceService: CephServiceService,
  77     private relativeDatePipe: RelativeDatePipe,
  78     private taskWrapperService: TaskWrapperService,
  79     private router: Router
  80   ) {
  81     super();
  82     this.permissions = this.authStorageService.getPermissions();
  83     this.tableActions = [
  84       {
  85         permission: 'create',
  86         icon: Icons.add,
  87         click: () => this.openModal(),
  88         name: this.actionLabels.CREATE,
  89         canBePrimary: (selection: CdTableSelection) => !selection.hasSelection,
  90         disable: (selection: CdTableSelection) => this.getDisable('create', selection)
  91       },
  92       {
  93         permission: 'update',
  94         icon: Icons.edit,
  95         click: () => this.openModal(true),
  96         name: this.actionLabels.EDIT,
  97         disable: (selection: CdTableSelection) => this.getDisable('update', selection)
  98       },
  99       {
 100         permission: 'delete',
 101         icon: Icons.destroy,
 102         click: () => this.deleteAction(),
 103         name: this.actionLabels.DELETE,
 104         disable: (selection: CdTableSelection) => this.getDisable('delete', selection)
 105       }
 106     ];
 107   }
 108
 109   openModal(edit = false) {
 110     if (this.routedModal) {
 111       edit
 112         ? this.router.navigate([
 113             BASE_URL,
 114             {
 115               outlets: {
 116                 modal: [
 117                   URLVerbs.EDIT,
 118                   this.selection.first().service_type,
 119                   this.selection.first().service_name
 120                 ]
 121               }
 122             }
 123           ])
 124         : this.router.navigate([BASE_URL, { outlets: { modal: [URLVerbs.CREATE] } }]);
 125     } else {
 126       let initialState = {};
 127       edit
 128         ? (initialState = {
 129             serviceName: this.selection.first()?.service_name,
 130             serviceType: this.selection?.first()?.service_type,
 131             hiddenServices: this.hiddenServices,
 132             editing: edit
 133           })
 134         : (initialState = {
 135             hiddenServices: this.hiddenServices,
 136             editing: edit
 137           });
 138       this.bsModalRef = this.modalService.show(ServiceFormComponent, initialState, { size: 'lg' });
 139     }
 140   }
 141
 142   ngOnInit() {
 143     const columns = [
 144       {
 145         name: $localize`Service`,
 146         prop: 'service_name',
 147         flexGrow: 1
 148       },
 149       {
 150         name: $localize`Placement`,
 151         prop: '',
 152         pipe: new PlacementPipe(),
 153         flexGrow: 2
 154       },
 155       {
 156         name: $localize`Running`,
 157         prop: 'status.running',
 158         flexGrow: 1
 159       },
 160       {
 161         name: $localize`Size`,
 162         prop: 'status.size',
 163         flexGrow: 1
 164       },
 165       {
 166         name: $localize`Last Refreshed`,
 167         prop: 'status.last_refresh',
 168         pipe: this.relativeDatePipe,
 169         flexGrow: 1
 170       }
 171     ];
 172
 173     this.columns = columns.filter((col: any) => {
 174       return !this.hiddenColumns.includes(col.prop);
 175     });
 176
 177     this.orchService.status().subscribe((status: OrchestratorStatus) => {
 178       this.orchStatus = status;
 179       this.showDocPanel = !status.available;
 180     });
 181   }
 182
 183   ngOnChanges() {
 184     if (this.orchStatus?.available) {
 185       this.services = [];
 186       this.table.reloadData();
 187     }
 188   }
 189
 190   getDisable(
 191     action: 'create' | 'update' | 'delete',
 192     selection: CdTableSelection
 193   ): boolean | string {
 194     if (action === 'delete') {
 195       if (!selection?.hasSingleSelection) {
 196         return true;
 197       }
 198     }
 199     if (action === 'update') {
 200       const disableEditServices = ['osd', 'container'];
 201       if (disableEditServices.indexOf(this.selection.first()?.service_type) >= 0) {
 202         return true;
 203       }
 204     }
 205     return this.orchService.getTableActionDisableDesc(
 206       this.orchStatus,
 207       this.actionOrchFeatures[action]
 208     );
 209   }
 210
 211   getServices(context: CdTableFetchDataContext) {
 212     if (this.isLoadingServices) {
 213       return;
 214     }
 215     this.isLoadingServices = true;
 216     this.cephServiceService.list().subscribe(
 217       (services: CephServiceSpec[]) => {
 218         this.services = services;
 219         this.services = this.services.filter((col: any) => {
 220           return !this.hiddenServices.includes(col.service_name);
 221         });
 222         this.isLoadingServices = false;
 223       },
 224       () => {
 225         this.isLoadingServices = false;
 226         this.services = [];
 227         context.error();
 228       }
 229     );
 230   }
 231
 232   updateSelection(selection: CdTableSelection) {
 233     this.selection = selection;
 234   }
 235
 236   deleteAction() {
 237     const service = this.selection.first();
 238     this.modalService.show(CriticalConfirmationModalComponent, {
 239       itemDescription: $localize`Service`,
 240       itemNames: [service.service_name],
 241       actionDescription: 'delete',
 242       submitActionObservable: () =>
 243         this.taskWrapperService
 244           .wrapTaskAroundCall({
 245             task: new FinishedTask(`service/${URLVerbs.DELETE}`, {
 246               service_name: service.service_name
 247             }),
 248             call: this.cephServiceService.delete(service.service_name)
 249           })
 250           .pipe(
 251             // Delay closing the dialog, otherwise the datatable still
 252             // shows the deleted service after an auto-reload.
 253             // Showing the dialog while delaying is done to increase
 254             // the user experience.
 255             delay(5000)
 256           )
 257     });
 258   }
 259 }