ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.ts

   1 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
   2 import { Router } from '@angular/router';
   3
   4 import _ from 'lodash';
   5
   6 import { InventoryDevice } from '~/app/ceph/cluster/inventory/inventory-devices/inventory-device.model';
   7 import { OsdService } from '~/app/shared/api/osd.service';
   8 import { Icons } from '~/app/shared/enum/icons.enum';
   9 import { CdTableColumnFiltersChange } from '~/app/shared/models/cd-table-column-filters-change';
  10 import { ModalService } from '~/app/shared/services/modal.service';
  11 import { OsdDevicesSelectionModalComponent } from '../osd-devices-selection-modal/osd-devices-selection-modal.component';
  12 import { DevicesSelectionChangeEvent } from './devices-selection-change-event.interface';
  13 import { DevicesSelectionClearEvent } from './devices-selection-clear-event.interface';
  14
  15 @Component({
  16   selector: 'cd-osd-devices-selection-groups',
  17   templateUrl: './osd-devices-selection-groups.component.html',
  18   styleUrls: ['./osd-devices-selection-groups.component.scss']
  19 })
  20 export class OsdDevicesSelectionGroupsComponent implements OnInit, OnChanges {
  21   // data, wal, db
  22   @Input() type: string;
  23
  24   // Data, WAL, DB
  25   @Input() name: string;
  26
  27   @Input() hostname: string;
  28
  29   @Input() availDevices: InventoryDevice[];
  30
  31   @Input() canSelect: boolean;
  32
  33   @Output()
  34   selected = new EventEmitter<DevicesSelectionChangeEvent>();
  35
  36   @Output()
  37   cleared = new EventEmitter<DevicesSelectionClearEvent>();
  38
  39   icons = Icons;
  40   devices: InventoryDevice[] = [];
  41   capacity = 0;
  42   appliedFilters = new Array();
  43   expansionCanSelect = false;
  44   isOsdPage: boolean;
  45
  46   addButtonTooltip: String;
  47   tooltips = {
  48     noAvailDevices: $localize`No available devices`,
  49     addPrimaryFirst: $localize`Please add primary devices first`,
  50     addByFilters: $localize`Add devices by using filters`
  51   };
  52
  53   constructor(
  54     private modalService: ModalService,
  55     public osdService: OsdService,
  56     private router: Router
  57   ) {
  58     this.isOsdPage = this.router.url.includes('/osd');
  59   }
  60
  61   ngOnInit() {
  62     if (!this.isOsdPage) {
  63       this.osdService?.osdDevices[this.type]
  64         ? (this.devices = this.osdService.osdDevices[this.type])
  65         : (this.devices = []);
  66       this.capacity = _.sumBy(this.devices, 'sys_api.size');
  67       this.osdService?.osdDevices
  68         ? (this.expansionCanSelect = this.osdService?.osdDevices['disableSelect'])
  69         : (this.expansionCanSelect = false);
  70     }
  71     this.updateAddButtonTooltip();
  72   }
  73
  74   ngOnChanges() {
  75     this.updateAddButtonTooltip();
  76   }
  77
  78   showSelectionModal() {
  79     let filterColumns = ['human_readable_type', 'sys_api.vendor', 'sys_api.model', 'sys_api.size'];
  80     if (this.type === 'data') {
  81       filterColumns = ['hostname', ...filterColumns];
  82     }
  83     const initialState = {
  84       hostname: this.hostname,
  85       deviceType: this.name,
  86       devices: this.availDevices,
  87       filterColumns: filterColumns
  88     };
  89     const modalRef = this.modalService.show(OsdDevicesSelectionModalComponent, initialState, {
  90       size: 'xl'
  91     });
  92     modalRef.componentInstance.submitAction.subscribe((result: CdTableColumnFiltersChange) => {
  93       this.devices = result.data;
  94       this.capacity = _.sumBy(this.devices, 'sys_api.size');
  95       this.appliedFilters = result.filters;
  96       const event = _.assign({ type: this.type }, result);
  97       if (!this.isOsdPage) {
  98         this.osdService.osdDevices[this.type] = this.devices;
  99         this.osdService.osdDevices['disableSelect'] =
 100           this.canSelect || this.devices.length === this.availDevices.length;
 101         this.osdService.osdDevices[this.type]['capacity'] = this.capacity;
 102       }
 103       this.selected.emit(event);
 104     });
 105   }
 106
 107   private updateAddButtonTooltip() {
 108     if (this.type === 'data' && this.availDevices.length === 0) {
 109       this.addButtonTooltip = this.tooltips.noAvailDevices;
 110     } else {
 111       if (!this.canSelect) {
 112         // No primary devices added yet.
 113         this.addButtonTooltip = this.tooltips.addPrimaryFirst;
 114       } else if (this.availDevices.length === 0) {
 115         this.addButtonTooltip = this.tooltips.noAvailDevices;
 116       } else {
 117         this.addButtonTooltip = this.tooltips.addByFilters;
 118       }
 119     }
 120   }
 121
 122   clearDevices() {
 123     if (!this.isOsdPage) {
 124       this.expansionCanSelect = false;
 125       this.osdService.osdDevices['disableSelect'] = false;
 126       this.osdService.osdDevices = [];
 127     }
 128     const event = {
 129       type: this.type,
 130       clearedDevices: [...this.devices]
 131     };
 132     this.devices = [];
 133     this.cleared.emit(event);
 134   }
 135 }