feat(datapoints-graph): alarm attributes form

Alarm attributes form component- select severities n/a
SoftwareAG · Apr 26, 2024 · 6c42625 · 6c42625
1 parent 45e168d
commit 6c42625
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 0 deletions.
diff --git a/...atapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.html b/...atapoints-graph/alarm-selector/alarm-attributes-form/alarm-attributes-form.component.html
@@ -24,4 +24,44 @@
       />
     </c8y-form-group>
   </div>
+
+  <fieldset class="c8y-fieldset" formArrayName="severities">
+    <legend>{{ 'Severities' | translate }}</legend>
+    <c8y-form-group
+      [hasError]="formGroup.controls.severities.hasError('required')"
+      [ngClass]="{
+        'm-b-8': !formGroup.controls.severities.hasError('required')
+      }"
+    >
+      <ng-container *ngFor="let severityOption of severityList">
+        <label
+          class="c8y-checkbox m-t-0 gap-4"
+          [title]="SEVERITY_LABELS[severityOption] | translate"
+        >
+          <input
+            type="checkbox"
+            [formControlName]="severityOption"
+            [name]="severityOption"
+          />
+          <span class="a-s-center"></span>
+          <ng-container
+            *ngIf="{ result: severityOption | severityIcon } as severityIcon"
+          >
+            <i
+              class="a-s-center m-r-4 icon-20 {{
+                severityIcon.result.iconClass
+              }}"
+              [c8yIcon]="severityIcon.result.c8yIcon"
+            ></i>
+          </ng-container>
+          <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>
+        </label>
+      </ng-container>
+      <c8y-messages>
+        <c8y-message *ngIf="formGroup.controls.severities.hasError('required')">
+          {{ 'Select at least one severity.' | translate }}
+        </c8y-message>
+      </c8y-messages>
+    </c8y-form-group>
+  </fieldset>
 </div>
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
@@ -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
@@ -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<keyof typeof SEVERITY_VALUES, boolean>;
+  };
 };
 
 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
@@ -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
@@ -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,
+    };
+  }
+}