diff --git a/src/datapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.html b/src/datapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.html index 75bb43f3..a9b7501c 100644 --- a/src/datapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.html +++ b/src/datapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.html @@ -24,4 +24,44 @@ /> + +
+ {{ 'Severities' | translate }} + + + + + + + {{ 'Select at least one severity.' | translate }} + + + +
diff --git a/src/datapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.ts b/src/datapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.ts index 65b654ca..8d423fbc 100644 --- a/src/datapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.ts +++ b/src/datapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.ts @@ -8,9 +8,14 @@ import { NG_VALUE_ACCESSOR, ValidationErrors, Validator, + ValidatorFn, Validators, } from '@angular/forms'; import { take } from 'rxjs/operators'; +import { + DEFAULT_SEVERITY_VALUES, + SEVERITY_LABELS, +} from '../alarm-selector-modal/alarm-selector-modal.model'; @Component({ selector: 'c8y-alarm-attributes-form', @@ -32,12 +37,17 @@ export class AlarmAttributesFormComponent implements ControlValueAccessor, Validator { formGroup: FormGroup; + severityList = Object.keys(SEVERITY_LABELS); + readonly SEVERITY_LABELS = SEVERITY_LABELS; constructor(private formBuilder: FormBuilder) { this.formGroup = this.formBuilder.group({ label: '', filters: this.formBuilder.group({ type: ['', [Validators.required]] }), timelineType: '', + severities: this.formBuilder.group(DEFAULT_SEVERITY_VALUES, { + validators: this.minSelectedCheckboxes(1), + }), }); } @@ -60,4 +70,17 @@ export class AlarmAttributesFormComponent setDisabledState(isDisabled: boolean): void { isDisabled ? this.formGroup.disable() : this.formGroup.enable(); } + + private minSelectedCheckboxes(min = 1): ValidatorFn { + const validator: ValidatorFn = (formGroup: FormGroup) => { + const totalSelected = Object.values(formGroup.controls).reduce( + (prev, next) => (next.value ? prev + next.value : prev), + 0 + ); + + return totalSelected >= min ? null : { required: true }; + }; + + return validator; + } } diff --git a/src/datapoints-graph/alarm-selector/alarm-selector-modal/alarm-selector-modal.model.ts b/src/datapoints-graph/alarm-selector/alarm-selector-modal/alarm-selector-modal.model.ts index f494e983..985b6b60 100644 --- a/src/datapoints-graph/alarm-selector/alarm-selector-modal/alarm-selector-modal.model.ts +++ b/src/datapoints-graph/alarm-selector/alarm-selector-modal/alarm-selector-modal.model.ts @@ -1,5 +1,6 @@ import { IIdentified } from '@c8y/client'; import { AlarmSelectorModalComponent } from './alarm-selector-modal.component'; +import { gettext } from '@c8y/ngx-components'; export type TimelineType = 'ALARM' | 'EVENT'; @@ -21,8 +22,36 @@ export type AlarmOrEvent = { export type AlarmDetails = AlarmOrEvent & { timelineType: 'ALARM'; + filters: { + type: string; + severities: Record; + }; }; export type EventDetails = AlarmOrEvent & { timelineType: 'EVENT'; + filters: { + type: string; + }; }; + +export const SEVERITY_VALUES = { + CRITICAL: 'CRITICAL', + MAJOR: 'MAJOR', + MINOR: 'MINOR', + WARNING: 'WARNING', +} as const; + +export const DEFAULT_SEVERITY_VALUES = { + [SEVERITY_VALUES.CRITICAL]: true, + [SEVERITY_VALUES.MAJOR]: true, + [SEVERITY_VALUES.MINOR]: true, + [SEVERITY_VALUES.WARNING]: true, +}; + +export const SEVERITY_LABELS = { + CRITICAL: gettext('Critical`alarm`') as 'CRITICAL', + MAJOR: gettext('Major`alarm`') as 'MAJOR', + MINOR: gettext('Minor`alarm`') as 'MINOR', + WARNING: gettext('Warning`alarm`') as 'WARNING', +} as const; diff --git a/src/datapoints-graph/alarm-selector/alarm-selector.module.ts b/src/datapoints-graph/alarm-selector/alarm-selector.module.ts index f769f098..80256ae7 100644 --- a/src/datapoints-graph/alarm-selector/alarm-selector.module.ts +++ b/src/datapoints-graph/alarm-selector/alarm-selector.module.ts @@ -10,6 +10,7 @@ import { AlarmSelectorModalComponent } from './alarm-selector-modal/alarm-select import { AlarmSelectorComponent } from './alarm-selector.component'; import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator'; import { IncludesAlarmPipe } from './pipes/includes-alarm.pipe'; +import { SeverityIconPipe } from './pipes/severity-icon.pipe'; @NgModule({ imports: [ @@ -26,6 +27,7 @@ import { IncludesAlarmPipe } from './pipes/includes-alarm.pipe'; AlarmSelectorModalComponent, AlarmSelectorComponent, IncludesAlarmPipe, + SeverityIconPipe, ], exports: [AlarmSelectionListComponent], }) diff --git a/src/datapoints-graph/alarm-selector/pipes/severity-icon.pipe.ts b/src/datapoints-graph/alarm-selector/pipes/severity-icon.pipe.ts new file mode 100644 index 00000000..f7e84273 --- /dev/null +++ b/src/datapoints-graph/alarm-selector/pipes/severity-icon.pipe.ts @@ -0,0 +1,44 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { SEVERITY_VALUES } from '../alarm-selector-modal/alarm-selector-modal.model'; + +interface SeverityIcon { + c8yIcon?: string; + iconClass: string; + severityClass?: string; +} + +@Pipe({ + name: 'severityIcon', +}) +export class SeverityIconPipe implements PipeTransform { + transform(severity: string): SeverityIcon { + let severityClassName = ''; + let iconClassName = ''; + + switch (severity) { + case SEVERITY_VALUES.CRITICAL: + severityClassName = 'critical'; + iconClassName = 'exclamation-circle'; + break; + case SEVERITY_VALUES.MAJOR: + severityClassName = 'major'; + iconClassName = 'warning'; + break; + case SEVERITY_VALUES.MINOR: + severityClassName = 'minor'; + iconClassName = 'high-priority'; + break; + case SEVERITY_VALUES.WARNING: + severityClassName = 'warning'; + iconClassName = 'circle'; + break; + default: + return { iconClass: '', severityClass: '' }; + } + + return { + iconClass: `status icon-lg stroked-icon dlt-c8y-icon-${iconClassName} ${severityClassName}`, + c8yIcon: severityClassName, + }; + } +}