]>
Commit | Line | Data |
---|---|---|
39ae355f TL |
1 | import { |
2 | AfterViewInit, | |
3 | ChangeDetectorRef, | |
4 | Component, | |
5 | EventEmitter, | |
6 | Output, | |
7 | ViewChild | |
8 | } from '@angular/core'; | |
9f95a23c | 9 | |
f67539c2 | 10 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; |
9f95a23c | 11 | import { TableColumnProp } from '@swimlane/ngx-datatable'; |
f67539c2 TL |
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'; | |
a4b75251 | 21 | import { WizardStepsService } from '~/app/shared/services/wizard-steps.service'; |
9f95a23c TL |
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 { | |
f67539c2 | 29 | @ViewChild('inventoryDevices') |
9f95a23c TL |
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; | |
39ae355f | 40 | diskType: string; |
9f95a23c TL |
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, | |
39ae355f | 53 | private cdRef: ChangeDetectorRef, |
f67539c2 | 54 | public activeModal: NgbActiveModal, |
a4b75251 TL |
55 | public actionLabels: ActionLabelsI18n, |
56 | public wizardStepService: WizardStepsService | |
9f95a23c TL |
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 | }); | |
f67539c2 TL |
68 | // Fixes 'ExpressionChangedAfterItHasBeenCheckedError' |
69 | setTimeout(() => { | |
70 | this.requiredFilters = _.map(cols, 'name'); | |
71 | }, 0); | |
9f95a23c TL |
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 | } | |
39ae355f | 95 | this.cdRef.detectChanges(); |
9f95a23c TL |
96 | } |
97 | ||
98 | onSubmit() { | |
99 | this.submitAction.emit(this.event); | |
f67539c2 | 100 | this.activeModal.close(); |
9f95a23c TL |
101 | } |
102 | } |