[MTM-58884] UI as datapoint graph user i want to see configured events and alarms

src/datapoints-graph/alarm-event-selector/alarm-event-selector.model.ts

@@ -30,13 +30,15 @@ export type AlarmDetails = AlarmOrEventBase & {
   filters: {
     type: string;
   };
+  __hidden?: boolean;
 };
 
 export type EventDetails = AlarmOrEventBase & {
   timelineType: 'EVENT';
   filters: {
     type: string;
   };
+  __hidden?: boolean;
 };
 
 export type AlarmOrEvent = AlarmDetails | EventDetails;

src/datapoints-graph/charts/chart-realtime.service.ts

@@ -1,16 +1,25 @@
 import { Injectable } from '@angular/core';
-import { interval, merge, Observable, Subscription } from 'rxjs';
-import { IMeasurement } from '@c8y/client';
+import { combineLatest, interval, merge, Observable, Subscription } from 'rxjs';
+import { IAlarm, IEvent, IMeasurement } from '@c8y/client';
 import { buffer, map, tap, throttleTime } from 'rxjs/operators';
 import {
+  DatapointChartRenderType,
   DatapointRealtimeMeasurements,
   DatapointsGraphKPIDetails,
   DatapointsGraphWidgetConfig,
+  DatapointWithValues,
   SeriesDatapointInfo,
   SeriesValue,
 } from '../model';
-import { MeasurementRealtimeService } from '@c8y/ngx-components';
+import {
+  AlarmRealtimeService,
+  EventRealtimeService,
+  MeasurementRealtimeService,
+  RealtimeMessage,
+} from '@c8y/ngx-components';
 import type { ECharts, SeriesOption } from 'echarts';
+import { EchartsOptionsService } from './echarts-options.service';
+import { AlarmOrEvent } from '../alarm-event-selector';
 
 type Milliseconds = number;
 
@@ -23,7 +32,12 @@ export class ChartRealtimeService {
   private echartsInstance: ECharts;
   private currentTimeRange: { dateFrom: Date; dateTo: Date };
 
-  constructor(private measurementRealtime: MeasurementRealtimeService) {}
+  constructor(
+    private measurementRealtime: MeasurementRealtimeService,
+    private alarmRealtimeService: AlarmRealtimeService,
+    private eventRealtimeService: EventRealtimeService,
+    private echartsOptionsService: EchartsOptionsService
+  ) {}
 
   startRealtime(
     echartsInstance: ECharts,
@@ -32,14 +46,35 @@ export class ChartRealtimeService {
     datapointOutOfSyncCallback: (dp: DatapointsGraphKPIDetails) => void,
     timeRangeChangedCallback: (
       timeRange: Pick<DatapointsGraphWidgetConfig, 'dateFrom' | 'dateTo'>
-    ) => void
+    ) => void,
+    alarmOrEventConfig: AlarmOrEvent[]
   ) {
     this.echartsInstance = echartsInstance;
     this.currentTimeRange = {
       dateFrom: new Date(timeRange.dateFrom),
       dateTo: new Date(timeRange.dateTo),
     };
 
+    const activeAlarmsOrEvents = alarmOrEventConfig.filter(
+      (alarmOrEvent) => alarmOrEvent.__active
+    );
+    const uniqueAlarmOrEventTargets = Array.from(
+      new Set(activeAlarmsOrEvents.map((aOrE) => aOrE.__target.id))
+    );
+
+    const allAlarmsAndEvents: Observable<IAlarm | IEvent>[] =
+      uniqueAlarmOrEventTargets.map((targetId) => {
+        const alarmsRealtime$: Observable<RealtimeMessage<IAlarm>> =
+          this.alarmRealtimeService.onAll$(targetId);
+        const eventsRealtime$: Observable<RealtimeMessage<IEvent>> =
+          this.eventRealtimeService.onAll$(targetId);
+        return merge(alarmsRealtime$, eventsRealtime$).pipe(
+          map((realtimeMessage) => realtimeMessage.data as IAlarm | IEvent)
+        );
+      });
+
+    const allAlarmsAndEvents$ = merge(...allAlarmsAndEvents);
+
     const measurementsForDatapoints: Observable<DatapointRealtimeMeasurements>[] =
       datapoints.map((dp) => {
         const source$: Observable<IMeasurement> =
@@ -57,6 +92,7 @@ export class ChartRealtimeService {
     const measurement$ = merge(...measurementsForDatapoints);
     const bufferReset$ = merge(
       measurement$.pipe(throttleTime(updateThrottleTime)),
+      allAlarmsAndEvents$.pipe(throttleTime(updateThrottleTime)),
       interval(this.INTERVAL).pipe(
         tap(() => {
           this.currentTimeRange = {
@@ -73,11 +109,34 @@ export class ChartRealtimeService {
       )
     ).pipe(throttleTime(this.MIN_REALTIME_TIMEOUT));
 
-    this.realtimeSubscription = measurement$
-      .pipe(buffer(bufferReset$))
-      .subscribe((measurements) => {
-        this.updateChartInstance(measurements, datapointOutOfSyncCallback);
-      });
+    this.realtimeSubscription = combineLatest([
+      measurement$.pipe(buffer(bufferReset$)),
+      allAlarmsAndEvents$.pipe(buffer(bufferReset$)),
+    ]).subscribe(([measurements, alarmsAndEvents]) => {
+      const filteredAlarmsOrEvents = alarmsAndEvents.filter(
+        (alarmOrEvent: IAlarm | IEvent) => {
+          return alarmOrEventConfig.some((aOrE) => {
+            return aOrE.filters.type === alarmOrEvent.type;
+          });
+        }
+      );
+      const alarmsAndEventsWithColor = filteredAlarmsOrEvents.map(
+        (alarmOrEvent: IAlarm | IEvent) => {
+          const foundAlarmOrEvent = alarmOrEventConfig.find((aOrE) => {
+            return aOrE.filters.type === alarmOrEvent.type;
+          });
+          if (foundAlarmOrEvent) {
+            alarmOrEvent.color = foundAlarmOrEvent.color;
+          }
+          return alarmOrEvent;
+        }
+      );
+      this.updateChartInstance(
+        measurements,
+        alarmsAndEventsWithColor,
+        datapointOutOfSyncCallback
+      );
+    });
   }
 
   stopRealtime() {
@@ -117,12 +176,19 @@ export class ChartRealtimeService {
 
   private updateChartInstance(
     receivedMeasurements: DatapointRealtimeMeasurements[],
+    alarmsAndEvents: (IAlarm | IEvent | number)[],
     datapointOutOfSyncCallback: (dp: DatapointsGraphKPIDetails) => void
   ) {
+    const isEvent = (item: IAlarm | IEvent | number): item is IEvent =>
+      !(item as IAlarm | IEvent).severity;
+    const isAlarm = (item: IAlarm | IEvent | number): item is IAlarm =>
+      !!(item as IAlarm | IEvent).severity;
+
     const seriesDataToUpdate = new Map<
       DatapointsGraphKPIDetails,
       IMeasurement[]
     >();
+
     receivedMeasurements.forEach(({ datapoint, measurement }) => {
       if (!seriesDataToUpdate.has(datapoint)) {
         seriesDataToUpdate.set(datapoint, []);
@@ -149,6 +215,58 @@ export class ChartRealtimeService {
       seriesMatchingDatapoint.data = this.removeValuesBeforeTimeRange(
         seriesMatchingDatapoint
       );
+
+      alarmsAndEvents.forEach((item) => {
+        if (
+          typeof seriesMatchingDatapoint.data !== 'object' ||
+          seriesMatchingDatapoint.data === null
+        ) {
+          return;
+        }
+        const renderType: DatapointChartRenderType =
+          datapoint.renderType || 'min';
+        const dp: DatapointWithValues = {
+          ...datapoint,
+          values: seriesMatchingDatapoint.data as {
+            [date: string]: { min: number; max: number }[];
+          },
+        };
+
+        if (isEvent(item)) {
+          const newEventSeries =
+            this.echartsOptionsService.getAlarmOrEventSeries(
+              dp,
+              renderType,
+              false,
+              [item],
+              'event',
+              item.id
+            );
+          allDataSeries.push(...newEventSeries);
+        } else if (isAlarm(item)) {
+          const alarmExists = allDataSeries.some((series: { data: any[] }) =>
+            series.data.some((data) => data[0] === item.creationTime)
+          );
+          if (alarmExists) {
+            const alarmSeries = allDataSeries.find((series: { data: any[] }) =>
+              series.data.some((data) => data[0] === item.creationTime)
+            );
+            // Instead of updating the existing alarm series, it would be easier if we remove all existing series for the current time range and add them again.
+            allDataSeries.splice(allDataSeries.indexOf(alarmSeries), 1);
+          }
+          const newAlarmSeries =
+            this.echartsOptionsService.getAlarmOrEventSeries(
+              dp,
+              renderType,
+              false,
+              [item],
+              'alarm',
+              item.id
+            );
+          allDataSeries.push(...newAlarmSeries);
+        }
+      });
+
       this.checkForValuesAfterTimeRange(
         seriesMatchingDatapoint.data as SeriesValue[],
         datapoint,

src/datapoints-graph/charts/chart.model.ts

@@ -0,0 +1,26 @@
+export interface CustomSeriesOptions extends echarts.EChartsOption {
+  // typeOfSeries is used for formatter to distinguish between events/alarms series and datapoints
+  typeOfSeries?: 'alarm' | 'event' | null;
+  id: string;
+}
+
+// Add the following info to a markdown file:
+
+/* Alarm properties related to time:
+  time --> Used for filtering alarms in the BE. So it could happen that the alarm is not displayed in the graph
+  because lastUpdated might fit the timeframe while time does not. When a new occurrence of the alarm happens, the time property is
+  updated together with the lastUpdated property. On the other hand for severity changes (e.g. via smart rules) and
+  clearing the alarm, only the lastUpdated property is updated.
+
+  firstOccurrence ----> Time in which the alarm was first raised. So if a new occurrence of the alarm happens,
+  the count property is increased, but the firstOccurrence is not updated.
+
+
+  creationTime --> Time in which the alarm was created. Can be used to filter alarms in the BE using creationTimeTo and
+  creationTimeFrom.
+
+
+  lastUpdated --> Time in which the alarm was last updated. NOTE: Clearing an alarm updated the lastUpdated, but does
+  not update the time property! Can also be used to filter alarms in the BE using lastUpdatedTo and lastUpdatedFrom.
+  Note that using only that filter could also miss alarms that were created before the lastUpdatedFrom.
+  */