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

   1 import { AfterViewInit, Component, EventEmitter, Output, ViewChild } from '@angular/core';
   2
   3 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
   4 import { TableColumnProp } from '@swimlane/ngx-datatable';
   5 import * as _ from 'lodash';
   6
   7 import { ActionLabelsI18n } from '../../../../shared/constants/app.constants';
   8 import { Icons } from '../../../../shared/enum/icons.enum';
   9 import { CdFormBuilder } from '../../../../shared/forms/cd-form-builder';
  10 import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
  11 import { CdTableColumnFiltersChange } from '../../../../shared/models/cd-table-column-filters-change';
  12 import { InventoryDevice } from '../../inventory/inventory-devices/inventory-device.model';
  13 import { InventoryDevicesComponent } from '../../inventory/inventory-devices/inventory-devices.component';
  14
  15 @Component({
  16   selector: 'cd-osd-devices-selection-modal',
  17   templateUrl: './osd-devices-selection-modal.component.html',
  18   styleUrls: ['./osd-devices-selection-modal.component.scss']
  19 })
  20 export class OsdDevicesSelectionModalComponent implements AfterViewInit {
  21   @ViewChild('inventoryDevices')
  22   inventoryDevices: InventoryDevicesComponent;
  23
  24   @Output()
  25   submitAction = new EventEmitter<CdTableColumnFiltersChange>();
  26
  27   icons = Icons;
  28   filterColumns: TableColumnProp[] = [];
  29
  30   hostname: string;
  31   deviceType: string;
  32   formGroup: CdFormGroup;
  33   action: string;
  34
  35   devices: InventoryDevice[] = [];
  36   filteredDevices: InventoryDevice[] = [];
  37   capacity = 0;
  38   event: CdTableColumnFiltersChange;
  39   canSubmit = false;
  40   requiredFilters: string[] = [];
  41
  42   constructor(
  43     private formBuilder: CdFormBuilder,
  44     public activeModal: NgbActiveModal,
  45     public actionLabels: ActionLabelsI18n
  46   ) {
  47     this.action = actionLabels.ADD;
  48     this.createForm();
  49   }
  50
  51   ngAfterViewInit() {
  52     // At least one filter other than hostname is required
  53     // Extract the name from table columns for i18n strings
  54     const cols = _.filter(this.inventoryDevices.columns, (col) => {
  55       return this.filterColumns.includes(col.prop) && col.prop !== 'hostname';
  56     });
  57     // Fixes 'ExpressionChangedAfterItHasBeenCheckedError'
  58     setTimeout(() => {
  59       this.requiredFilters = _.map(cols, 'name');
  60     }, 0);
  61   }
  62
  63   createForm() {
  64     this.formGroup = this.formBuilder.group({});
  65   }
  66
  67   onFilterChange(event: CdTableColumnFiltersChange) {
  68     this.capacity = 0;
  69     this.canSubmit = false;
  70     if (_.isEmpty(event.filters)) {
  71       // filters are cleared
  72       this.filteredDevices = [];
  73       this.event = undefined;
  74     } else {
  75       // at least one filter is required (except hostname)
  76       const filters = event.filters.filter((filter) => {
  77         return filter.prop !== 'hostname';
  78       });
  79       this.canSubmit = !_.isEmpty(filters);
  80       this.filteredDevices = event.data;
  81       this.capacity = _.sumBy(this.filteredDevices, 'sys_api.size');
  82       this.event = event;
  83     }
  84   }
  85
  86   onSubmit() {
  87     this.submitAction.emit(this.event);
  88     this.activeModal.close();
  89   }
  90 }