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 @@
/>
+
+
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,
+ };
+ }
+}