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

   1 import { AfterViewInit, Component, EventEmitter, Output, ViewChild } from '@angular/core';
   2
   3 import * as _ from 'lodash';
   4 import { BsModalRef } from 'ngx-bootstrap/modal';
   5
   6 import { TableColumnProp } from '@swimlane/ngx-datatable';
   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', { static: false })
  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 bsModalRef: BsModalRef,
  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     this.requiredFilters = _.map(cols, 'name');
  58   }
  59
  60   createForm() {
  61     this.formGroup = this.formBuilder.group({});
  62   }
  63
  64   onFilterChange(event: CdTableColumnFiltersChange) {
  65     this.capacity = 0;
  66     this.canSubmit = false;
  67     if (_.isEmpty(event.filters)) {
  68       // filters are cleared
  69       this.filteredDevices = [];
  70       this.event = undefined;
  71     } else {
  72       // at least one filter is required (except hostname)
  73       const filters = event.filters.filter((filter) => {
  74         return filter.prop !== 'hostname';
  75       });
  76       this.canSubmit = !_.isEmpty(filters);
  77       this.filteredDevices = event.data;
  78       this.capacity = _.sumBy(this.filteredDevices, 'sys_api.size');
  79       this.event = event;
  80     }
  81   }
  82
  83   onSubmit() {
  84     this.submitAction.emit(this.event);
  85     this.bsModalRef.hide();
  86   }
  87 }