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

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