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