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

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