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

   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     const filterColumns = [
  80       'hostname',
  81       'human_readable_type',
  82       'sys_api.vendor',
  83       'sys_api.model',
  84       'sys_api.size'
  85     ];
  86     const diskType = this.name === 'Primary' ? 'hdd' : 'ssd';
  87     const initialState = {
  88       hostname: this.hostname,
  89       deviceType: this.name,
  90       diskType: diskType,
  91       devices: this.availDevices,
  92       filterColumns: filterColumns
  93     };
  94     const modalRef = this.modalService.show(OsdDevicesSelectionModalComponent, initialState, {
  95       size: 'xl'
  96     });
  97     modalRef.componentInstance.submitAction.subscribe((result: CdTableColumnFiltersChange) => {
  98       this.devices = result.data;
  99       this.capacity = _.sumBy(this.devices, 'sys_api.size');
 100       this.appliedFilters = result.filters;
 101       const event = _.assign({ type: this.type }, result);
 102       if (!this.isOsdPage) {
 103         this.osdService.osdDevices[this.type] = this.devices;
 104         this.osdService.osdDevices['disableSelect'] =
 105           this.canSelect || this.devices.length === this.availDevices.length;
 106         this.osdService.osdDevices[this.type]['capacity'] = this.capacity;
 107       }
 108       this.selected.emit(event);
 109     });
 110   }
 111
 112   private updateAddButtonTooltip() {
 113     if (this.type === 'data' && this.availDevices.length === 0) {
 114       this.addButtonTooltip = this.tooltips.noAvailDevices;
 115     } else {
 116       if (!this.canSelect) {
 117         // No primary devices added yet.
 118         this.addButtonTooltip = this.tooltips.addPrimaryFirst;
 119       } else if (this.availDevices.length === 0) {
 120         this.addButtonTooltip = this.tooltips.noAvailDevices;
 121       } else {
 122         this.addButtonTooltip = this.tooltips.addByFilters;
 123       }
 124     }
 125   }
 126
 127   clearDevices() {
 128     if (!this.isOsdPage) {
 129       this.expansionCanSelect = false;
 130       this.osdService.osdDevices['disableSelect'] = false;
 131       this.osdService.osdDevices = [];
 132     }
 133     const event = {
 134       type: this.type,
 135       clearedDevices: [...this.devices]
 136     };
 137     this.devices = [];
 138     this.cleared.emit(event);
 139   }
 140 }