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

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