<button type="button"
class="btn btn-light"
(click)="showSelectionModal()"
+ data-toggle="tooltip"
+ [title]="addButtonTooltip"
[disabled]="availDevices.length === 0 || !canSelect">
<i [ngClass]="[icons.add]"></i>
<ng-container i18n>Add</ng-container>
</div>
<div>
<cd-inventory-devices [devices]="devices"
- [hiddenColumns]="['available']"
+ [hiddenColumns]="['available', 'osd_ids']"
[filterColumns]="[]">
</cd-inventory-devices>
</div>
+ <div *ngIf="type === 'data'"
+ class="float-right">
+ <span i18n>Raw capacity: {{ capacity | dimlessBinary }}</span>
+ </div>
</ng-template>
</div>
</div>
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { I18n } from '@ngx-translate/i18n-polyfill';
import * as _ from 'lodash';
templateUrl: './osd-devices-selection-groups.component.html',
styleUrls: ['./osd-devices-selection-groups.component.scss']
})
-export class OsdDevicesSelectionGroupsComponent {
+export class OsdDevicesSelectionGroupsComponent implements OnInit, OnChanges {
// data, wal, db
@Input() type: string;
icons = Icons;
devices: InventoryDevice[] = [];
+ capacity = 0;
appliedFilters: any[] = [];
- constructor(private bsModalService: BsModalService) {}
+ addButtonTooltip: String;
+ tooltips = {
+ noAvailDevices: this.i18n('No available devices'),
+ addPrimaryFirst: this.i18n('Please add primary devices first'),
+ addByFilters: this.i18n('Add devices by using filters')
+ };
+
+ constructor(private bsModalService: BsModalService, private i18n: I18n) {}
+
+ ngOnInit() {
+ this.updateAddButtonTooltip();
+ }
+
+ ngOnChanges() {
+ this.updateAddButtonTooltip();
+ }
showSelectionModal() {
let filterColumns = ['human_readable_type', 'sys_api.vendor', 'sys_api.model', 'sys_api.size'];
const modalRef = this.bsModalService.show(OsdDevicesSelectionModalComponent, options);
modalRef.content.submitAction.subscribe((result: CdTableColumnFiltersChange) => {
this.devices = result.data;
+ this.capacity = _.sumBy(this.devices, 'sys_api.size');
this.appliedFilters = result.filters;
const event = _.assign({ type: this.type }, result);
this.selected.emit(event);
});
}
+ private updateAddButtonTooltip() {
+ if (this.type === 'data' && this.availDevices.length === 0) {
+ this.addButtonTooltip = this.tooltips.noAvailDevices;
+ } else {
+ if (!this.canSelect) {
+ // No primary devices added yet.
+ this.addButtonTooltip = this.tooltips.addPrimaryFirst;
+ } else if (this.availDevices.length === 0) {
+ this.addButtonTooltip = this.tooltips.noAvailDevices;
+ } else {
+ this.addButtonTooltip = this.tooltips.addByFilters;
+ }
+ }
+ }
+
clearDevices() {
const event = {
type: this.type,
<cd-modal [modalRef]="bsModalRef">
<ng-container class="modal-title"
- i18n>Add {{ deviceType }} devices</ng-container>
+ i18n>{{ deviceType }} devices</ng-container>
<ng-container class="modal-content">
<form #frm="ngForm"
[formGroup]="formGroup"
novalidate>
<div class="modal-body">
- <div class="col-sm-12">
- <cd-inventory-devices [devices]="devices"
- [filterColumns]="filterColumns"
- [hiddenColumns]="['available', 'osd_ids']"
- (filterChange)="onFilterChange($event)">
- </cd-inventory-devices>
+ <cd-alert-panel *ngIf="!canSubmit"
+ type="warning"
+ size="slim"
+ [showTitle]="false">
+ <ng-container i18n>At least one of these filters must be applied in order to proceed:</ng-container>
+ <span *ngFor="let filter of requiredFilters"
+ class="badge badge-dark ml-2">
+ {{ filter }}
+ </span>
+ </cd-alert-panel>
+ <cd-inventory-devices #inventoryDevices
+ [devices]="devices"
+ [filterColumns]="filterColumns"
+ [hiddenColumns]="['available', 'osd_ids']"
+ (filterChange)="onFilterChange($event)">
+ </cd-inventory-devices>
+ <div *ngIf="canSubmit">
+ <p class="text-center">
+ <span i18n>Number of devices: {{ filteredDevices.length }}. Raw capacity:
+ {{ capacity | dimlessBinary }}.</span>
+ </p>
</div>
</div>
<div class="modal-footer">
-import { Component, EventEmitter, Output } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Output, ViewChild } from '@angular/core';
import * as _ from 'lodash';
import { BsModalRef } from 'ngx-bootstrap/modal';
+import { TableColumnProp } from '@swimlane/ngx-datatable';
import { ActionLabelsI18n } from '../../../../shared/constants/app.constants';
import { Icons } from '../../../../shared/enum/icons.enum';
import { CdFormBuilder } from '../../../../shared/forms/cd-form-builder';
import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
import { CdTableColumnFiltersChange } from '../../../../shared/models/cd-table-column-filters-change';
import { InventoryDevice } from '../../inventory/inventory-devices/inventory-device.model';
+import { InventoryDevicesComponent } from '../../inventory/inventory-devices/inventory-devices.component';
@Component({
selector: 'cd-osd-devices-selection-modal',
templateUrl: './osd-devices-selection-modal.component.html',
styleUrls: ['./osd-devices-selection-modal.component.scss']
})
-export class OsdDevicesSelectionModalComponent {
+export class OsdDevicesSelectionModalComponent implements AfterViewInit {
+ @ViewChild('inventoryDevices', { static: false })
+ inventoryDevices: InventoryDevicesComponent;
+
@Output()
submitAction = new EventEmitter<CdTableColumnFiltersChange>();
icons = Icons;
- filterColumns: string[] = [];
+ filterColumns: TableColumnProp[] = [];
hostname: string;
deviceType: string;
devices: InventoryDevice[] = [];
filteredDevices: InventoryDevice[] = [];
+ capacity = 0;
event: CdTableColumnFiltersChange;
canSubmit = false;
+ requiredFilters: string[] = [];
constructor(
private formBuilder: CdFormBuilder,
this.createForm();
}
+ ngAfterViewInit() {
+ // At least one filter other than hostname is required
+ // Extract the name from table columns for i18n strings
+ const cols = _.filter(this.inventoryDevices.columns, (col) => {
+ return this.filterColumns.includes(col.prop) && col.prop !== 'hostname';
+ });
+ this.requiredFilters = _.map(cols, 'name');
+ }
+
createForm() {
this.formGroup = this.formBuilder.group({});
}
onFilterChange(event: CdTableColumnFiltersChange) {
+ this.capacity = 0;
this.canSubmit = false;
if (_.isEmpty(event.filters)) {
// filters are cleared
});
this.canSubmit = !_.isEmpty(filters);
this.filteredDevices = event.data;
+ this.capacity = _.sumBy(this.filteredDevices, 'sys_api.size');
this.event = event;
}
}
projects / ceph.git / commitdiff