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

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