diff --git a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.model.ts b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.model.ts index 0c1dd84f..d4d8957f 100644 --- a/src/datapoints-graph/alarm-event-selector/alarm-event-selector.model.ts +++ b/src/datapoints-graph/alarm-event-selector/alarm-event-selector.model.ts @@ -1,4 +1,4 @@ -import { IIdentified } from '@c8y/client'; +import { IIdentified, Severity } from '@c8y/client'; import { AlarmEventSelectorModalComponent } from './alarm-event-selector-modal/alarm-event-selector-modal.component'; export type TimelineType = 'ALARM' | 'EVENT'; @@ -30,6 +30,8 @@ export type AlarmDetails = AlarmOrEventBase & { filters: { type: string; }; + __hidden?: boolean; + __severity?: Severity[]; }; export type EventDetails = AlarmOrEventBase & { @@ -37,6 +39,7 @@ export type EventDetails = AlarmOrEventBase & { filters: { type: string; }; + __hidden?: boolean; }; export type AlarmOrEvent = AlarmDetails | EventDetails; diff --git a/src/datapoints-graph/charts/chart-realtime.service.spec.ts b/src/datapoints-graph/charts/chart-realtime.service.spec.ts index e745347b..968da59c 100644 --- a/src/datapoints-graph/charts/chart-realtime.service.spec.ts +++ b/src/datapoints-graph/charts/chart-realtime.service.spec.ts @@ -5,11 +5,18 @@ import { DatapointsGraphKPIDetails } from '../model'; import { interval, timer } from 'rxjs'; import { map, take } from 'rxjs/operators'; import { IMeasurement } from '@c8y/client'; -import { MeasurementRealtimeService } from '@c8y/ngx-components'; +import { + AlarmRealtimeService, + EventRealtimeService, + MeasurementRealtimeService, +} from '@c8y/ngx-components'; +import { EchartsOptionsService } from './echarts-options.service'; describe('ChartRealtimeService', () => { let service: ChartRealtimeService; let measurementRealtime: MeasurementRealtimeService; + let eventRealtime: EventRealtimeService; + let alarmRealtime: AlarmRealtimeService; const dp1: DatapointsGraphKPIDetails = { fragment: 'c8y_Temperature', series: 'T', @@ -30,7 +37,7 @@ describe('ChartRealtimeService', () => { .mockReturnValue({ series: [ { - datapointId: dp1.__target.id + dp1.fragment + dp1.series, + datapointId: dp1.__target?.id + dp1.fragment + dp1.series, data: [], }, ], @@ -43,14 +50,21 @@ describe('ChartRealtimeService', () => { providers: [ ChartRealtimeService, { provide: MeasurementRealtimeService, useValue: {} }, + { provide: EventRealtimeService, useValue: {} }, + { provide: AlarmRealtimeService, useValue: {} }, + { provide: EchartsOptionsService, useValue: {} }, ], }); service = TestBed.inject(ChartRealtimeService); measurementRealtime = TestBed.inject(MeasurementRealtimeService); + eventRealtime = TestBed.inject(EventRealtimeService); + alarmRealtime = TestBed.inject(AlarmRealtimeService); measurementRealtime.onCreateOfSpecificMeasurement$ = jest .fn() .mockName('onCreateOfSpecificMeasurement$'); + eventRealtime.onAll$ = jest.fn().mockName('onAll$'); + alarmRealtime.onAll$ = jest.fn().mockName('onAll$'); }); afterEach(() => { @@ -86,7 +100,8 @@ describe('ChartRealtimeService', () => { [dp1], { dateFrom: lastMinute.toISOString(), dateTo: now.toISOString() }, jest.fn(), - timeRangeCallback + timeRangeCallback, + [] ); jest.advanceTimersByTime(3000); // then @@ -122,7 +137,8 @@ describe('ChartRealtimeService', () => { [dp1], { dateFrom: lastMinute.toISOString(), dateTo: now.toISOString() }, jest.fn(), - jest.fn() + jest.fn(), + [] ); expect(counter).toBe(0); // first measurement emits @@ -161,7 +177,8 @@ describe('ChartRealtimeService', () => { [dp1], { dateFrom: last10Minutes.toISOString(), dateTo: now.toISOString() }, jest.fn(), - jest.fn() + jest.fn(), + [] ); expect(counter).toBe(0); // first measurement emitted @@ -202,7 +219,8 @@ describe('ChartRealtimeService', () => { [dp1], { dateFrom: lastWeek.toISOString(), dateTo: now.toISOString() }, jest.fn(), - jest.fn() + jest.fn(), + [] ); expect(counter).toBe(0); // first measurement emitted @@ -228,11 +246,11 @@ describe('ChartRealtimeService', () => { jest.spyOn(echartsInstance, 'getOption').mockReturnValue({ series: [ { - datapointId: dp1.__target.id + dp1.fragment + dp1.series, + datapointId: dp1.__target?.id + dp1.fragment + dp1.series, data: [], }, { - datapointId: dp2.__target.id + dp2.fragment + dp2.series, + datapointId: dp2.__target?.id + dp2.fragment + dp2.series, data: [], }, ], @@ -257,7 +275,8 @@ describe('ChartRealtimeService', () => { [dp1, dp2], { dateFrom: lastMinute.toISOString(), dateTo: now.toISOString() }, jest.fn(), - jest.fn() + jest.fn(), + [] ); jest.advanceTimersByTime(250); jest.advanceTimersByTime(250); @@ -277,7 +296,7 @@ describe('ChartRealtimeService', () => { jest.spyOn(echartsInstance, 'getOption').mockReturnValue({ series: [ { - datapointId: dp1.__target.id + dp1.fragment + dp1.series, + datapointId: dp1.__target?.id + dp1.fragment + dp1.series, data: [], }, ], @@ -303,7 +322,8 @@ describe('ChartRealtimeService', () => { [dp1], { dateFrom: lastMinute.toISOString(), dateTo: now.toISOString() }, jest.fn(), - jest.fn() + jest.fn(), + [] ); // time to fill whole chart with time span of 1 minute of measurements with interval of 1s jest.advanceTimersByTime(60_000); @@ -321,7 +341,7 @@ describe('ChartRealtimeService', () => { jest.spyOn(echartsInstance, 'getOption').mockReturnValue({ series: [ { - datapointId: dp1.__target.id + dp1.fragment + dp1.series, + datapointId: dp1.__target?.id + dp1.fragment + dp1.series, data: [], }, ], @@ -348,7 +368,8 @@ describe('ChartRealtimeService', () => { [dp1], { dateFrom: lastMinute.toISOString(), dateTo: now.toISOString() }, callback, - jest.fn() + jest.fn(), + [] ); jest.advanceTimersByTime(250); expect(callback).toHaveBeenCalledWith(dp1); diff --git a/src/datapoints-graph/charts/chart-realtime.service.ts b/src/datapoints-graph/charts/chart-realtime.service.ts index 6fe243b7..013ae2f1 100644 --- a/src/datapoints-graph/charts/chart-realtime.service.ts +++ b/src/datapoints-graph/charts/chart-realtime.service.ts @@ -1,16 +1,39 @@ import { Injectable } from '@angular/core'; -import { interval, merge, Observable, Subscription } from 'rxjs'; -import { IMeasurement } from '@c8y/client'; -import { buffer, map, tap, throttleTime } from 'rxjs/operators'; import { + combineLatest, + from, + interval, + merge, + Observable, + Subscription, +} from 'rxjs'; +import { IAlarm, IEvent, IMeasurement } from '@c8y/client'; +import { + buffer, + distinctUntilChanged, + map, + mergeMap, + 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; @@ -19,11 +42,17 @@ export class ChartRealtimeService { private INTERVAL: Milliseconds = 1000; private MIN_REALTIME_TIMEOUT: Milliseconds = 250; private MAX_REALTIME_TIMEOUT: Milliseconds = 5_000; - private realtimeSubscription: Subscription; + private realtimeSubscriptionMeasurements: Subscription; + private realtimeSubscriptionAlarmsEvents: Subscription; 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,7 +61,8 @@ export class ChartRealtimeService { datapointOutOfSyncCallback: (dp: DatapointsGraphKPIDetails) => void, timeRangeChangedCallback: ( timeRange: Pick - ) => void + ) => void, + alarmOrEventConfig: AlarmOrEvent[] = [] ) { this.echartsInstance = echartsInstance; this.currentTimeRange = { @@ -40,6 +70,27 @@ export class ChartRealtimeService { 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 = from( + uniqueAlarmOrEventTargets + ).pipe( + mergeMap((targetId) => { + const alarmsRealtime$: Observable> = + this.alarmRealtimeService.onAll$(targetId); + const eventsRealtime$: Observable> = + this.eventRealtimeService.onAll$(targetId); + return merge(alarmsRealtime$, eventsRealtime$).pipe( + map((realtimeMessage) => realtimeMessage.data as IAlarm | IEvent) + ); + }) + ); + const measurementsForDatapoints: Observable[] = datapoints.map((dp) => { const source$: Observable = @@ -57,6 +108,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,15 +125,47 @@ export class ChartRealtimeService { ) ).pipe(throttleTime(this.MIN_REALTIME_TIMEOUT)); - this.realtimeSubscription = measurement$ + this.realtimeSubscriptionMeasurements = measurement$ .pipe(buffer(bufferReset$)) .subscribe((measurements) => { - this.updateChartInstance(measurements, datapointOutOfSyncCallback); + this.updateChartInstance( + measurements, + null, + datapointOutOfSyncCallback + ); + }); + + const combined$ = combineLatest([allAlarmsAndEvents$, measurement$]); + + this.realtimeSubscriptionAlarmsEvents = combined$ + .pipe( + map(([alarmOrEvent, measurements]) => { + const foundAlarmOrEvent = alarmOrEventConfig.find((aOrE) => { + return aOrE.filters.type === alarmOrEvent.type; + }); + if (foundAlarmOrEvent) { + alarmOrEvent.color = foundAlarmOrEvent.color; + } + + return foundAlarmOrEvent ? { alarmOrEvent, measurements } : null; + }) + ) + .subscribe((data) => { + if (!data) { + return; + } + const { alarmOrEvent, measurements } = data; + this.updateChartInstance( + [measurements], + alarmOrEvent, + datapointOutOfSyncCallback + ); }); } stopRealtime() { - this.realtimeSubscription?.unsubscribe(); + this.realtimeSubscriptionMeasurements?.unsubscribe(); + this.realtimeSubscriptionAlarmsEvents?.unsubscribe(); } private removeValuesBeforeTimeRange(series: SeriesOption): SeriesValue[] { @@ -117,12 +201,19 @@ export class ChartRealtimeService { private updateChartInstance( receivedMeasurements: DatapointRealtimeMeasurements[], + alarmOrEvent: IAlarm | IEvent | null, datapointOutOfSyncCallback: (dp: DatapointsGraphKPIDetails) => void ) { + const isEvent = (item: IAlarm | IEvent): item is IEvent => + !('severity' in item); + const isAlarm = (item: IAlarm | IEvent): item is IAlarm => + 'severity' in item; + const seriesDataToUpdate = new Map< DatapointsGraphKPIDetails, IMeasurement[] >(); + receivedMeasurements.forEach(({ datapoint, measurement }) => { if (!seriesDataToUpdate.has(datapoint)) { seriesDataToUpdate.set(datapoint, []); @@ -149,6 +240,73 @@ export class ChartRealtimeService { seriesMatchingDatapoint.data = this.removeValuesBeforeTimeRange( seriesMatchingDatapoint ); + + if (alarmOrEvent) { + const renderType: DatapointChartRenderType = + datapoint.renderType || 'min'; + const dp: DatapointWithValues = { + ...datapoint, + values: seriesMatchingDatapoint.data as { + [date: string]: { min: number; max: number }[]; + }, + }; + + if (isEvent(alarmOrEvent)) { + // if event series with the same id already exists, return + const eventExists = allDataSeries.some((series: { data: any[] }) => + series.data.some( + (data) => data[0] === (alarmOrEvent as IEvent).creationTime + ) + ); + if (eventExists) { + return; + } + const newEventSeries = + this.echartsOptionsService.getAlarmOrEventSeries( + dp, + renderType, + false, + [alarmOrEvent], + 'event', + alarmOrEvent.creationTime + ); + allDataSeries.push(...newEventSeries); + } else if (isAlarm(alarmOrEvent)) { + const alarmExists = allDataSeries.some((series: { data: any[] }) => + series.data.some( + (data) => data[0] === (alarmOrEvent as IEvent).creationTime + ) + ); + if (alarmExists) { + const alarmSeries = allDataSeries.find((series: { data: any[] }) => + series.data.some( + (data) => data[0] === (alarmOrEvent as IAlarm).creationTime + ) + ); + // update the last value of the markline to the new value + alarmSeries.markLine.data[1].xAxis = ( + alarmOrEvent as IAlarm + ).lastUpdated; + // update the last value of the markpoint to the new value + alarmSeries.markPoint.data[1].coord[0] = ( + alarmOrEvent as IAlarm + ).lastUpdated; + } else { + const newAlarmSeries = + this.echartsOptionsService.getAlarmOrEventSeries( + dp, + renderType, + false, + [alarmOrEvent], + 'alarm', + (alarmOrEvent as IEvent).id + ); + + allDataSeries.push(...newAlarmSeries); + } + } + } + this.checkForValuesAfterTimeRange( seriesMatchingDatapoint.data as SeriesValue[], datapoint, diff --git a/src/datapoints-graph/charts/chart.model.ts b/src/datapoints-graph/charts/chart.model.ts new file mode 100644 index 00000000..1348b2b8 --- /dev/null +++ b/src/datapoints-graph/charts/chart.model.ts @@ -0,0 +1,30 @@ +import { SeriesValue } from '../model'; + +export interface CustomSeriesOptions extends echarts.EChartsOption { + // typeOfSeries is used for formatter to distinguish between events/alarms series + typeOfSeries?: 'alarm' | 'event' | null; + id: string; + data: SeriesValue[]; + itemStyle: { color: 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. + */ diff --git a/src/datapoints-graph/charts/charts.component.ts b/src/datapoints-graph/charts/charts.component.ts index 5e0b51b4..6275822f 100644 --- a/src/datapoints-graph/charts/charts.component.ts +++ b/src/datapoints-graph/charts/charts.component.ts @@ -8,7 +8,7 @@ import { OnInit, Output, } from '@angular/core'; -import type { ECharts, EChartsOption } from 'echarts'; +import type { ECharts, EChartsOption, SeriesOption } from 'echarts'; import { DatapointsGraphKPIDetails, DatapointsGraphWidgetConfig, @@ -20,10 +20,12 @@ import { BehaviorSubject, forkJoin, Observable, of } from 'rxjs'; import { map, switchMap, tap } from 'rxjs/operators'; import { CustomMeasurementService } from './custom-measurements.service'; import { + AlarmRealtimeService, CoreModule, DismissAlertStrategy, DynamicComponentAlert, DynamicComponentAlertAggregator, + EventRealtimeService, gettext, MeasurementRealtimeService, } from '@c8y/ngx-components'; @@ -31,7 +33,10 @@ import { TranslateService } from '@ngx-translate/core'; import { EchartsOptionsService } from './echarts-options.service'; import { ChartRealtimeService } from './chart-realtime.service'; import type { DataZoomOption } from 'echarts/types/src/component/dataZoom/DataZoomModel'; -import type { ECActionEvent } from 'echarts/types/src/util/types'; +import type { + ECActionEvent, + TooltipFormatterCallback, +} from 'echarts/types/src/util/types'; import { ChartTypesService } from './chart-types.service'; import { CommonModule } from '@angular/common'; import { NGX_ECHARTS_CONFIG, NgxEchartsModule } from 'ngx-echarts'; @@ -39,6 +44,15 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip'; import { PopoverModule } from 'ngx-bootstrap/popover'; import { YAxisService } from './y-axis.service'; import { ChartAlertsComponent } from './chart-alerts/chart-alerts.component'; +import { AlarmStatus, IAlarm, IEvent } from '@c8y/client'; +import { + AlarmDetails, + AlarmOrEvent, + EventDetails, +} from '../alarm-event-selector'; +import { ChartEventsService } from '../datapoints-graph-view/chart-events.service'; +import { ChartAlarmsService } from '../datapoints-graph-view/chart-alarms.service'; +import { TopLevelFormatterParams } from 'echarts/types/src/component/tooltip/TooltipModel'; type ZoomState = Record<'startValue' | 'endValue', number | string | Date>; @@ -52,6 +66,8 @@ type ZoomState = Record<'startValue' | 'endValue', number | string | Date>; }, ChartRealtimeService, MeasurementRealtimeService, + AlarmRealtimeService, + EventRealtimeService, ChartTypesService, EchartsOptionsService, CustomMeasurementService, @@ -72,6 +88,8 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { echartsInstance: ECharts; zoomHistory: ZoomState[] = []; zoomInActive = false; + alarms: IAlarm[]; + events: IEvent[]; @Input() config: DatapointsGraphWidgetConfig; @Input() alerts: DynamicComponentAlertAggregator; @Output() configChangeOnZoomOut = @@ -80,6 +98,7 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { Pick >(); @Output() datapointOutOfSync = new EventEmitter(); + @Output() updateAlarmsAndEvents = new EventEmitter(); private configChangedSubject = new BehaviorSubject(null); @HostListener('keydown.escape') onEscapeKeyDown() { @@ -92,9 +111,12 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { private measurementService: CustomMeasurementService, private translateService: TranslateService, private echartsOptionsService: EchartsOptionsService, - private chartRealtimeService: ChartRealtimeService + private chartRealtimeService: ChartRealtimeService, + private chartEventsService: ChartEventsService, + private chartAlarmsService: ChartAlarmsService ) { this.chartOption$ = this.configChangedSubject.pipe( + switchMap(() => this.loadAlarmsAndEvents()), switchMap(() => this.fetchSeriesForDatapoints$()), switchMap((datapointsWithValues: DatapointWithValues[]) => { if (datapointsWithValues.length === 0) { @@ -143,6 +165,114 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { this.chartRealtimeService.stopRealtime(); } }); + this.echartsInstance.on('click', this.onChartClick.bind(this)); + + let originalFormatter = null; + this.echartsInstance.on('mouseover', (params: any) => { + if ( + params?.componentType !== 'markLine' && + params?.componentType !== 'markPoint' + ) { + return; + } + const options = this.echartsInstance.getOption(); + originalFormatter = originalFormatter ?? options.tooltip[0].formatter; + + const updatedOptions: Partial = { + tooltip: options.tooltip, + }; + updatedOptions.tooltip[0].formatter = ( + tooltipParams: TooltipFormatterCallback + ) => { + return this.echartsOptionsService.getTooltipFormatterForAlarmAndEvents( + tooltipParams, + params, + this.events, + this.alarms + ); + }; + + this.echartsInstance.setOption(updatedOptions); + }); + + this.echartsInstance.on('mouseout', () => { + const options = this.echartsInstance.getOption(); + if (originalFormatter) { + options.tooltip[0].formatter = originalFormatter; + this.echartsInstance.setOption(options); + } + }); + } + + onChartClick(params) { + const options = this.echartsInstance.getOption(); + if (!this.isAlarmClick(params)) { + this.echartsInstance.setOption({ + tooltip: { triggerOn: 'mousemove' }, + series: [ + { + markArea: { + data: [], + }, + markLine: { + data: [], + }, + }, + ], + }); + return; + } + + const clickedAlarms = this.alarms.filter( + (alarm) => alarm.type === params.data.itemType + ); + + const updatedOptions = !this.hasMarkArea(options) + ? { + tooltip: { + enterable: true, + triggerOn: 'click', + }, + series: [ + { + markArea: { + label: { + show: false, + }, + data: this.getMarkedAreaData(clickedAlarms), + }, + markLine: { + showSymbol: true, + symbol: ['none', 'none'], + data: this.getMarkedLineData(clickedAlarms), + }, + }, + ], + } + : // if markArea already exists, remove it and remove lastUpdated from markLine + { + tooltip: { triggerOn: 'mousemove' }, + series: [ + { + markArea: { + data: [], + }, + markLine: { + data: [], + }, + }, + ], + }; + + this.echartsInstance.setOption(updatedOptions); + } + + isAlarmClick(params): boolean { + return this.alarms.some((alarm) => alarm.type === params.data.itemType); + } + + hasMarkArea(options): boolean { + return options?.series?.[0]?.markArea?.data?.length > 0; } toggleZoomIn(): void { @@ -224,6 +354,102 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { }); } + private getMarkedAreaData(clickedAlarms: IAlarm[]) { + const timeRange = this.getTimeRange(); + const clearedAlarmColor = 'rgba(221,255,221,1.00)'; + const activeAlarmColor = 'rgba(255, 173, 177, 0.4)'; + + return clickedAlarms.map((clickedAlarm) => { + return [ + { + name: clickedAlarm.type, + xAxis: clickedAlarm.creationTime, + itemStyle: { + color: + clickedAlarm.status === AlarmStatus.CLEARED + ? clearedAlarmColor + : activeAlarmColor, + }, + }, + { + xAxis: + clickedAlarm.lastUpdated === clickedAlarm.creationTime || + clickedAlarm.status !== AlarmStatus.CLEARED + ? timeRange.dateTo + : clickedAlarm.lastUpdated, + }, + ]; + }); + } + + private getMarkedLineData(clickedAlarms: IAlarm[]) { + return clickedAlarms.reduce((acc, alarm) => { + const isClickedAlarmCleared = alarm.status === AlarmStatus.CLEARED; + if (isClickedAlarmCleared) { + return acc.concat([ + { + xAxis: alarm.creationTime, + alarmType: alarm.type, + label: { + show: false, + formatter: alarm.type, + }, + itemStyle: { color: alarm.color }, + }, + { + xAxis: alarm.lastUpdated, + alarmType: alarm.type, + label: { + show: false, + formatter: alarm.type, + }, + itemStyle: { color: alarm.color }, + }, + ]); + } + return acc.concat([ + { + xAxis: alarm.creationTime, + alarmType: alarm.type, + label: { + show: false, + formatter: alarm.type, + }, + itemStyle: { color: alarm.color }, + }, + ]); + }, []); + } + + private async loadAlarmsAndEvents(): Promise { + const timeRange = this.getTimeRange(); + const updatedTimeRange = { + lastUpdatedFrom: timeRange.dateFrom, + createdTo: timeRange.dateTo, + }; + if (!this.config.alarmsEventsConfigs) return; + const visibleAlarmsOrEvents = this.config.alarmsEventsConfigs?.filter( + (alarmOrEvent) => !alarmOrEvent.__hidden + ); + const alarms = visibleAlarmsOrEvents?.filter( + (alarmOrEvent) => alarmOrEvent.timelineType === 'ALARM' + ) as AlarmDetails[]; + const events = visibleAlarmsOrEvents?.filter( + (alarmOrEvent) => alarmOrEvent.timelineType === 'EVENT' + ) as EventDetails[]; + + const [listedEvents, listedAlarms] = await Promise.all([ + this.chartEventsService.listEvents(updatedTimeRange, events), + this.chartAlarmsService.listAlarms(updatedTimeRange, alarms), + ]); + + this.events = listedEvents; + this.alarms = listedAlarms; + await this.addActiveAlarms(alarms); + + this.updateAlarmsAndEvents.emit(this.config.alarmsEventsConfigs); + } + private startRealtimeIfPossible(): void { if (this.config.realtime && this.echartsInstance) { this.chartRealtimeService.startRealtime( @@ -231,11 +457,38 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { this.config.datapoints.filter((dp) => dp.__active), this.getTimeRange(), (dp) => this.datapointOutOfSync.emit(dp), - (timeRange) => this.timeRangeChangeOnRealtime.emit(timeRange) + (timeRange) => this.timeRangeChangeOnRealtime.emit(timeRange), + this.config.alarmsEventsConfigs ); } } + /* + This method should check and add active alarms from the begining of time to the alarm array + */ + private async addActiveAlarms(alarms: AlarmDetails[]): Promise { + const timeRange = this.getTimeRange(); + const params = { + dateFrom: '1970-01-01T01:00:00+01:00', + dateTo: timeRange.dateTo, + status: AlarmStatus.ACTIVE, + }; + + const activeAlarms = await this.chartAlarmsService.listAlarms( + params, + alarms + ); + this.config.activeAlarmTypesOutOfRange = []; + // iterate through the activeAlarms and check if the alarm is in the alarms array, if not update the config.activeAlarmTypesOutOfRange prop + activeAlarms.forEach((activeAlarm) => { + const alarmType = activeAlarm.type; + const alarm = this.alarms.find((alarm) => alarm.type === alarmType); + if (!alarm) { + this.config.activeAlarmTypesOutOfRange.push(alarmType); + } + }); + } + private updateZoomState(): void { const { startValue, endValue }: DataZoomOption = this.echartsInstance.getOption().dataZoom[0]; @@ -252,7 +505,9 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { { YAxis: this.config.yAxisSplitLines, XAxis: this.config.xAxisSplitLines, - } + }, + this.events, + this.alarms ); } diff --git a/src/datapoints-graph/charts/echarts-options.service.ts b/src/datapoints-graph/charts/echarts-options.service.ts index 5c7dcb7b..587d1248 100644 --- a/src/datapoints-graph/charts/echarts-options.service.ts +++ b/src/datapoints-graph/charts/echarts-options.service.ts @@ -6,6 +6,9 @@ import { DatapointChartRenderType, DatapointWithValues, DateString, + DpValuesItem, + MarkLineData, + MarkPointData, SeriesDatapointInfo, SeriesValue, } from '../model'; @@ -13,6 +16,9 @@ import { YAxisService } from './y-axis.service'; import { ChartTypesService } from './chart-types.service'; import type { TooltipFormatterCallback } from 'echarts/types/src/util/types'; import type { TopLevelFormatterParams } from 'echarts/types/src/component/tooltip/TooltipModel'; +import { AlarmStatus, IAlarm, IEvent } from '@c8y/client'; +import { ICONS_MAP } from './svg-icons.model'; +import { CustomSeriesOptions } from './chart.model'; @Injectable() export class EchartsOptionsService { @@ -27,7 +33,9 @@ export class EchartsOptionsService { getChartOptions( datapointsWithValues: DatapointWithValues[], timeRange: { dateFrom: string; dateTo: string }, - showSplitLines: { YAxis: boolean; XAxis: boolean } + showSplitLines: { YAxis: boolean; XAxis: boolean }, + events: IEvent[], + alarms: IAlarm[] ): EChartsOption { const yAxis = this.yAxisService.getYAxis(datapointsWithValues, { showSplitLines: showSplitLines.YAxis, @@ -78,11 +86,6 @@ export class EchartsOptionsService { }, legend: { show: false, - // legend styling is needed for screenshot feature which adds legend to image - itemHeight: 8, - textStyle: { - fontSize: 10, - }, }, xAxis: { min: timeRange.dateFrom, @@ -111,24 +114,441 @@ export class EchartsOptionsService { }, }, yAxis, - series: this.getChartSeries(datapointsWithValues), + series: this.getChartSeries(datapointsWithValues, events, alarms), }; } + /** + * This method is used to get the series for alarms and events. + * @param dp - The data point. + * @param renderType - The render type. + * @param isMinMaxChart - If the chart is min max chart. + * @param items - All alarms or events which should be displayed on the chart. + * @param itemType - The item type. + * @param id - The id of the device + */ + getAlarmOrEventSeries( + dp: DatapointWithValues, + renderType: DatapointChartRenderType, + isMinMaxChart = false, + items: IAlarm[] | IEvent[] = [], + itemType: 'alarm' | 'event' = 'alarm', + id?: string | number + ): SeriesOption[] { + if (!items.length) { + return []; + } + + //filter items that are not __hidden + const filteredItems = items.filter((item) => !item.__hidden); + const itemsByType = this.groupByType(filteredItems, 'type'); + const isAlarm = itemType === 'alarm'; + + return Object.entries(itemsByType).map( + ([type, itemsOfType]: [string, any]) => ({ + id: `${type}/${dp.__target.id}+${id ? id : ''}`, + name: type, + showSymbol: false, + // typeOfSeries is used for formatter to distinguish between events/alarms series + typeOfSeries: itemType, + data: itemsOfType.map((item) => [ + item.creationTime, + null, + 'markLineFlag', + ]), + markPoint: { + showSymbol: true, + data: itemsOfType.reduce((acc, item) => { + if (dp.__target.id === item.source.id) { + const isCleared = isAlarm && item.status === AlarmStatus.CLEARED; + const isEvent = !isAlarm; + return acc.concat( + this.createMarkPoint(item, dp, isCleared, isEvent) + ); + } else { + return acc.concat([ + { + coord: [item.creationTime, null], + name: item.type, + itemType: item.type, + itemStyle: { color: item.color }, + }, + ]); + } + }, [] as any), + }, + markLine: { + showSymbol: false, + // no symbol should be shown in the beginning and end of the marked line + symbol: ['none', 'none'], + data: this.createMarkLine(itemsOfType), + }, + ...this.chartTypesService.getSeriesOptions( + dp, + isMinMaxChart, + renderType + ), + }) + ) as SeriesOption[]; + } + + /** + * This method is used to get tooltip formatter for alarms and events. + * @param tooltipParams - The tooltip parameters. + * @param params - The parameters data. + * @param allEvents - All events. + * @param allAlarms - All alarms. + * @returns The formatted string for the tooltip. + */ + getTooltipFormatterForAlarmAndEvents( + tooltipParams: TooltipFormatterCallback, + params: { data: { itemType: string } }, + allEvents: IEvent[], + allAlarms: IAlarm[] + ): string { + const XAxisValue: string = tooltipParams[0].data[0]; + const YAxisReadings: string[] = []; + const allSeries = this.echartsInstance.getOption() + .series as CustomSeriesOptions[]; + + // filter out alarm and event series + const allDataPointSeries = allSeries.filter( + (series) => + series.typeOfSeries !== 'alarm' && series.typeOfSeries !== 'event' + ); + + this.processSeries(allDataPointSeries, XAxisValue, YAxisReadings); + + // find event and alarm of the same type as the hovered markedLine or markedPoint + const event = allEvents.find((e) => e.type === params.data.itemType); + const alarm = allAlarms.find((a) => a.type === params.data.itemType); + + let value: string; + if (event) { + value = this.processEvent(event); + } + + if (alarm) { + value = this.processAlarm(alarm); + } + YAxisReadings.push(value); + + return ( + this.datePipe.transform(XAxisValue) + '
' + YAxisReadings.join('') + ); + } + + /** + * This method is used to add the data point info to the tooltip. + * @param allDataPointSeries - All the data point series. + * @param XAxisValue - The X Axis value. + * @param YAxisReadings - The Y Axis readings. + */ + private processSeries( + allDataPointSeries: CustomSeriesOptions[], + XAxisValue: string, + YAxisReadings: string[] + ): void { + allDataPointSeries.forEach((series: any) => { + let value: string; + if (series.id.endsWith('/min')) { + value = this.processMinSeries(series, allDataPointSeries, XAxisValue); + } else if (!series.id.endsWith('/max')) { + value = this.processRegularSeries(series, XAxisValue); + } + + if (value) { + YAxisReadings.push( + `` + // color circle + `${series.datapointLabel}: ` + // name + value // single value or min-max range + ); + } + }); + } + + /** + * This method is used to process the min series. + * @param series - The series. + * @param allDataPointSeries - All the data point series. + * @param XAxisValue - The X Axis value. + * @returns The processed value. + */ + private processMinSeries( + series: any, + allDataPointSeries: CustomSeriesOptions[], + XAxisValue: string + ): string { + const minValue = this.findValueForExactOrEarlierTimestamp( + series.data, + XAxisValue + ); + if (!minValue) { + return; + } + const maxSeries = allDataPointSeries.find( + (s) => s.id === series.id.replace('/min', '/max') + ); + const maxValue = this.findValueForExactOrEarlierTimestamp( + maxSeries.data as SeriesValue[], + XAxisValue + ); + return ( + `${minValue[1]} — ${maxValue[1]}` + + (series.datapointUnit ? ` ${series.datapointUnit}` : '') + + `
${this.datePipe.transform( + minValue[0] + )}
` + ); + } + + /** + * This method is used to process the regular series. + * @param series - The series. + * @param XAxisValue - The X Axis value. + * @returns The processed value. + */ + private processRegularSeries(series: any, XAxisValue: string): string { + const seriesValue = this.findValueForExactOrEarlierTimestamp( + series.data, + XAxisValue + ); + if (!seriesValue) { + return; + } + return ( + seriesValue[1]?.toString() + + (series.datapointUnit ? ` ${series.datapointUnit}` : '') + + `
${this.datePipe.transform( + seriesValue[0] + )}
` + ); + } + + /** + * This method is used to process the event tooltip. + * @param event - The event object. + * @returns The processed value. + */ + private processEvent(event: IEvent): string { + let value = `
Event Time: ${event.time}
`; + value += `
Event Type: ${event.type}
`; + value += `
Event Text: ${event.text}
`; + value += `
Event Last Updated: ${event.lastUpdated}
`; + return value; + } + + /** + * This method is used to process the alarm tooltip. + * @param alarm - The alarm object. + * @returns The processed value. + */ + private processAlarm(alarm: IAlarm): string { + let value = `
Alarm Time: ${alarm.time}
`; + value += `
Alarm Type: ${alarm.type}
`; + value += `
Alarm Text: ${alarm.text}
`; + value += `
Alarm Last Updated: ${alarm.lastUpdated}
`; + value += `
Alarm Count: ${alarm.count}
`; + return value; + } + private getChartSeries( - datapointsWithValues: DatapointWithValues[] + datapointsWithValues: DatapointWithValues[], + events: IEvent[], + alarms: IAlarm[] ): SeriesOption[] { const series: SeriesOption[] = []; + let eventSeries: SeriesOption[] = []; + let alarmSeries: SeriesOption[] = []; datapointsWithValues.forEach((dp, idx) => { const renderType: DatapointChartRenderType = dp.renderType || 'min'; if (renderType === 'area') { series.push(this.getSingleSeries(dp, 'min', idx, true)); series.push(this.getSingleSeries(dp, 'max', idx, true)); } else { - series.push(this.getSingleSeries(dp, renderType, idx)); + series.push(this.getSingleSeries(dp, renderType, idx, false)); } + + const newEventSeries = this.getAlarmOrEventSeries( + dp, + renderType, + false, + events, + 'event' + ); + const newAlarmSeries = this.getAlarmOrEventSeries( + dp, + renderType, + false, + alarms, + 'alarm' + ); + eventSeries = [...eventSeries, ...newEventSeries]; + alarmSeries = [...alarmSeries, ...newAlarmSeries]; }); - return series; + return [...series, ...eventSeries, ...alarmSeries]; + } + + private groupByType( + items: IAlarm[] | IEvent[], + typeField: string + ): Record { + return items.reduce((grouped, item) => { + (grouped[item[typeField]] = grouped[item[typeField]] || []).push(item); + return grouped; + }, {} as any); + } + + private getClosestDpValueToTargetTime( + dpValuesArray: DpValuesItem[], + targetTime: number + ): DpValuesItem { + return dpValuesArray.reduce((prev, curr) => + Math.abs(curr.time - targetTime) < Math.abs(prev.time - targetTime) + ? curr + : prev + ); + } + + /** + * This method creates a markPoint on the chart which represents the icon of the alarm or event. + * @param item Single alarm or event + * @param dp Data point + * @param isCleared If the alarm is cleared in case of alarm + * @param isEvent If the item is an event + * @returns MarkPointDataItemOption[] + */ + private createMarkPoint( + item: IAlarm | IEvent, + dp: DatapointWithValues, + isCleared: boolean, + isEvent: boolean + ): MarkPointData[] { + const dpValuesArray: DpValuesItem[] = Object.entries(dp.values).map( + ([time, values]) => ({ + time: new Date(time).getTime(), + values, + }) + ); + const creationTime = new Date(item.creationTime).getTime(); + const closestDpValue = this.getClosestDpValueToTargetTime( + dpValuesArray, + creationTime + ); + const lastUpdatedTime = new Date(item.lastUpdated).getTime(); + const closestDpValueLastUpdated = this.getClosestDpValueToTargetTime( + dpValuesArray, + lastUpdatedTime + ); + + if (isEvent) { + return [ + { + coord: [ + item.creationTime, + closestDpValue?.values[0]?.min ?? closestDpValue?.values[1] ?? null, + ], + name: item.type, + itemType: item.type, + itemStyle: { color: item.color }, + symbol: ICONS_MAP.EVENT, + symbolSize: 15, + }, + ]; + } + + return isCleared + ? [ + { + coord: [ + item.creationTime, + closestDpValue?.values[0]?.min ?? + closestDpValue?.values[1] ?? + null, + ], + name: item.type, + itemType: item.type, + itemStyle: { color: item.color }, + symbol: ICONS_MAP[item.severity], + symbolSize: 15, + }, + { + coord: [ + item.lastUpdated, + closestDpValueLastUpdated?.values[0]?.min ?? + closestDpValueLastUpdated?.values[1] ?? + null, + ], + name: item.type, + itemType: item.type, + itemStyle: { color: item.color }, + symbol: ICONS_MAP.CLEARED, + symbolSize: 15, + }, + ] + : [ + { + coord: [ + item.creationTime, + closestDpValue?.values[0]?.min ?? + closestDpValue?.values[1] ?? + null, + ], + name: item.type, + itemType: item.type, + itemStyle: { color: item.color }, + symbol: ICONS_MAP[item.severity], + symbolSize: 15, + }, + { + coord: [ + item.lastUpdated, + closestDpValueLastUpdated?.values[0]?.min ?? + closestDpValueLastUpdated?.values[1] ?? + null, + ], + name: item.type, + itemType: item.type, + itemStyle: { color: item.color }, + symbol: ICONS_MAP[item.severity], + symbolSize: 15, + }, + ]; + } + + /** + * This method creates a markLine on the chart which represents the line between every alarm or event on the chart. + * @param items Array of alarms or events + * @returns MarkLineDataItemOptionBase[] + */ + private createMarkLine(items: T): MarkLineData[] { + return items.reduce((acc, item) => { + if (item.creationTime === item.lastUpdated) { + return acc.concat([ + { + xAxis: item.creationTime, + itemType: item.type, + label: { show: false, formatter: item.type }, + itemStyle: { color: item.color }, + }, + ]); + } else { + return acc.concat([ + { + xAxis: item.creationTime, + itemType: item.type, + label: { show: false, formatter: item.type }, + itemStyle: { color: item.color }, + }, + { + xAxis: item.lastUpdated, + itemType: item.type, + label: { show: false, formatter: item.type }, + itemStyle: { color: item.color }, + }, + ]); + } + }, [] as any); } private getSingleSeries( @@ -154,13 +574,26 @@ export class EchartsOptionsService { }; } + /** + * This method creates a general tooltip formatter for the chart. + * @returns TooltipFormatterCallback + */ private getTooltipFormatter(): TooltipFormatterCallback { return (params) => { + if (!params[0]?.data) { + return; + } const XAxisValue: string = params[0].data[0]; const YAxisReadings: string[] = []; const allSeries = this.echartsInstance.getOption() - .series as SeriesOption[]; - allSeries.forEach((series: any) => { + .series as CustomSeriesOptions[]; + + const allDataPointSeries = allSeries.filter( + (series) => + series.typeOfSeries !== 'alarm' && series.typeOfSeries !== 'event' + ); + + allDataPointSeries.forEach((series: CustomSeriesOptions) => { let value: string; if (series.id.endsWith('/min')) { const minValue = this.findValueForExactOrEarlierTimestamp( @@ -170,7 +603,7 @@ export class EchartsOptionsService { if (!minValue) { return; } - const maxSeries = allSeries.find( + const maxSeries = allDataPointSeries.find( (s) => s.id === series.id.replace('/min', '/max') ); const maxValue = this.findValueForExactOrEarlierTimestamp( diff --git a/src/datapoints-graph/charts/index.ts b/src/datapoints-graph/charts/index.ts index e86d1674..932285b9 100644 --- a/src/datapoints-graph/charts/index.ts +++ b/src/datapoints-graph/charts/index.ts @@ -1 +1,3 @@ export * from './charts.component'; +export * from '../datapoints-graph-view/chart-events.service'; +export * from '../datapoints-graph-view/chart-alarms.service'; diff --git a/src/datapoints-graph/charts/svg-icons.model.ts b/src/datapoints-graph/charts/svg-icons.model.ts new file mode 100644 index 00000000..98ca5d2f --- /dev/null +++ b/src/datapoints-graph/charts/svg-icons.model.ts @@ -0,0 +1,21 @@ +enum ICONS { + ALARM = 'path://M18.375 15.8462L20.4423 17.9135V18.9231H4V17.9135L6.06731 15.8462V10.75C6.06731 9.14744 6.47596 7.75321 7.29327 6.56731C8.11058 5.38141 9.24038 4.61218 10.6827 4.25962V3.53846C10.6827 3.12179 10.8269 2.76122 11.1154 2.45673C11.4038 2.15224 11.7724 2 12.2212 2C12.6699 2 13.0385 2.15224 13.3269 2.45673C13.6154 2.76122 13.7596 3.12179 13.7596 3.53846V4.25962C15.2019 4.61218 16.3317 5.38141 17.149 6.56731C17.9663 7.75321 18.375 9.14744 18.375 10.75V15.8462ZM12.2212 22C11.6442 22 11.1554 21.8077 10.7548 21.4231C10.3542 21.0385 10.1538 20.5577 10.1538 19.9808H14.2885C14.2885 20.5256 14.0801 20.9984 13.6635 21.399C13.2468 21.7997 12.766 22 12.2212 22Z', + EVENT = 'path://M97.3013 63L128.939 95.1315C79.296 134.335 47.7653 191.526 47.7653 255.276C47.7653 319.027 79.296 376.218 128.917 415.421L97.28 447.574C37.76 400.552 0 331.93 0 255.276C0 178.622 37.76 110.001 97.3013 63ZM414.72 63C474.24 110.001 512 178.622 512 255.276C512 331.93 474.24 400.552 414.72 447.574L383.083 415.421C432.704 376.218 464.235 319.027 464.235 255.276C464.235 191.526 432.704 134.335 383.083 95.1315L414.72 63ZM160.405 127.092L192 159.181C162.24 182.681 143.317 217.013 143.317 255.276C143.317 293.539 162.219 327.871 192 351.372L160.405 383.461C120.725 352.119 95.552 306.379 95.552 255.276C95.552 204.174 120.725 158.433 160.405 127.092ZM351.595 127.092C391.296 158.433 416.448 204.174 416.448 255.276C416.448 306.379 391.275 352.119 351.595 383.461L320 351.372C349.781 327.871 368.683 293.539 368.683 255.276C368.683 217.013 349.781 182.703 320 159.181L351.595 127.092ZM256 192.722C291.505 192.722 320.287 221.504 320.287 257.009C320.287 292.514 291.505 321.296 256 321.296C220.495 321.296 191.713 292.514 191.713 257.009C191.713 221.504 220.495 192.722 256 192.722Z', + ACKNOWLEDGED = 'path://M10.4795 2H13.4807V4.18054C14.1215 4.35248 14.7155 4.61821 15.2626 4.97773C15.8097 5.35287 16.2864 5.79836 16.6928 6.31419C17.0993 6.81438 17.4119 7.3771 17.6307 8.00234C17.8652 8.62759 17.9824 9.29191 17.9824 9.99531V13.7702L16.9742 12.762V12.7855L9.72919 5.54045C9.74482 5.54045 9.75264 5.54045 9.75264 5.54045L9.00234 4.79015C9.22118 4.64947 9.45565 4.53224 9.70574 4.43845C9.95584 4.34467 10.2138 4.25869 10.4795 4.18054V2ZM4.4068 3.03165L21.4291 20.0305L19.9988 21.4373L17.5604 18.9988H13.6917C13.7855 19.1551 13.8558 19.3193 13.9027 19.4912C13.9496 19.6475 13.973 19.8195 13.973 20.007C13.973 20.5541 13.7776 21.0231 13.3869 21.4138C12.9961 21.8046 12.5272 22 11.9801 22C11.4174 22 10.9406 21.8046 10.5498 21.4138C10.159 21.0231 9.96366 20.5541 9.96366 20.007C9.96366 19.8195 9.9871 19.6475 10.034 19.4912C10.0809 19.3193 10.1512 19.1551 10.245 18.9988H3.96131V17.9906L5.97773 15.9977V9.99531C5.97773 9.60453 6.00899 9.22939 6.07151 8.86987C6.14967 8.51036 6.25127 8.15866 6.37632 7.81477L3 4.43845L4.4068 3.03165Z', + CLEARED = 'path://M9.09375 19.5977C9.09375 20.2617 9.32812 20.8281 9.79688 21.2969C10.2786 21.7656 10.8516 22 11.5156 22C12.1927 22 12.7656 21.7656 13.2344 21.2969C13.7161 20.8281 13.957 20.2617 13.957 19.5977H9.09375ZM16.8672 10.418C16.3203 10.5091 15.7995 10.6784 15.3047 10.9258C14.8229 11.1732 14.3867 11.4922 13.9961 11.8828C13.5013 12.3776 13.1172 12.944 12.8438 13.582C12.5833 14.2201 12.4531 14.8841 12.4531 15.5742C12.4531 16.0299 12.5052 16.4727 12.6094 16.9023C12.7266 17.332 12.8958 17.7422 13.1172 18.1328H3V16.375C4.04167 16.0495 4.74479 15.3919 5.10938 14.4023C5.47396 13.4128 5.76693 12.3385 5.98828 11.1797C6.20964 10.0208 6.48958 8.88802 6.82812 7.78125C7.16667 6.6875 7.83724 5.85417 8.83984 5.28125C9.11328 5.125 9.32812 4.91667 9.48438 4.65625C9.64062 4.38281 9.71875 4.08984 9.71875 3.77734C9.71875 3.28255 9.88802 2.86589 10.2266 2.52734C10.5781 2.17578 11.0013 2 11.4961 2C11.9909 2 12.4076 2.17578 12.7461 2.52734C13.0977 2.86589 13.2734 3.28255 13.2734 3.77734C13.2734 4.08984 13.3516 4.38281 13.5078 4.65625C13.6771 4.91667 13.8984 5.125 14.1719 5.28125C15.0443 5.78906 15.6562 6.51172 16.0078 7.44922C16.3724 8.38672 16.6589 9.3763 16.8672 10.418ZM11.4961 4.48047C11.6914 4.48047 11.8607 4.41536 12.0039 4.28516C12.1471 4.14193 12.2188 3.97266 12.2188 3.77734C12.2188 3.56901 12.1471 3.39974 12.0039 3.26953C11.8607 3.1263 11.6914 3.05469 11.4961 3.05469C11.3008 3.05469 11.1315 3.1263 10.9883 3.26953C10.8451 3.39974 10.7734 3.56901 10.7734 3.77734C10.7734 3.97266 10.8451 4.14193 10.9883 4.28516C11.1315 4.41536 11.3008 4.48047 11.4961 4.48047ZM16.9062 17.6055L19.9922 14.5195L19.2305 13.7773L16.9062 16.1016L15.8906 15.0859L15.1289 15.8477L16.9062 17.6055ZM17.5312 11.8633C18.5599 11.8633 19.4388 12.2279 20.168 12.957C20.8971 13.6862 21.2617 14.5651 21.2617 15.5938C21.2617 16.6224 20.8971 17.5013 20.168 18.2305C19.4388 18.9596 18.5599 19.3242 17.5312 19.3242C16.5026 19.3242 15.6237 18.9596 14.8945 18.2305C14.1654 17.5013 13.8008 16.6224 13.8008 15.5938C13.8008 14.5651 14.1654 13.6862 14.8945 12.957C15.6237 12.2279 16.5026 11.8633 17.5312 11.8633Z', + MINOR = 'path://M21.9787 11.9894L11.9894 22L2 11.9894L11.9894 2L21.9787 11.9894ZM12.9052 16.5474V14.7157H11.0735V16.5474H12.9052ZM12.9052 12.9052V7.45261H11.0735V12.9052H12.9052Z', + MAJOR = 'path://M12.8936 13.8936V10.234H11.1064V13.8936H12.8936ZM12.8936 17.5106V15.6809H11.1064V17.5106H12.8936ZM2 20.234L12 3L22 20.234H2Z', + CRITICAL = 'path://M12.0117 22C10.6362 22 9.3388 21.7343 8.11958 21.2028C6.90035 20.687 5.83744 19.9758 4.93083 19.0692C4.02423 18.1626 3.31301 17.0996 2.79719 15.8804C2.26573 14.6768 2 13.3794 2 11.9883C2 10.6127 2.26573 9.31536 2.79719 8.09613C3.31301 6.89254 4.02423 5.83744 4.93083 4.93083C5.83744 4.02423 6.90035 3.3052 8.11958 2.77374C9.3388 2.25791 10.6362 2 12.0117 2C13.3873 2 14.6846 2.25791 15.9039 2.77374C17.1231 3.3052 18.186 4.02423 19.0926 4.93083C19.9992 5.83744 20.7104 6.89254 21.2263 8.09613C21.7577 9.31536 22.0234 10.6127 22.0234 11.9883C22.0234 13.3794 21.7577 14.6768 21.2263 15.8804C20.7104 17.0996 19.9992 18.1626 19.0926 19.0692C18.186 19.9758 17.1231 20.687 15.9039 21.2028C14.6846 21.7343 13.3873 22 12.0117 22ZM13.0199 6.99414H11.0035V12.9965H13.0199V6.99414ZM13.0199 14.9894H11.0035V17.0059H13.0199V14.9894Z', + WARNING = 'path://M12 2C13.3772 2 14.6761 2.25822 15.8967 2.77465C17.1174 3.29108 18.1815 4.00313 19.0892 4.9108C19.9969 5.81847 20.7089 6.88263 21.2254 8.10329C21.7418 9.32394 22 10.6228 22 12C22 13.3772 21.7418 14.6761 21.2254 15.8967C20.7089 17.1174 19.9969 18.1815 19.0892 19.0892C18.1815 19.9969 17.1174 20.7089 15.8967 21.2254C14.6761 21.7418 13.3772 22 12 22C10.6228 22 9.32394 21.7418 8.10329 21.2254C6.88263 20.7089 5.81847 19.9969 4.9108 19.0892C4.00313 18.1815 3.29108 17.1174 2.77465 15.8967C2.25822 14.6761 2 13.3772 2 12C2 10.6228 2.25822 9.32394 2.77465 8.10329C3.29108 6.88263 4.00313 5.81847 4.9108 4.9108C5.81847 4.00313 6.88263 3.29108 8.10329 2.77465C9.32394 2.25822 10.6228 2 12 2Z', +} + +export const ICONS_MAP = { + ALARM: ICONS.ALARM, + EVENT: ICONS.EVENT, + ACKNOWLEDGED: ICONS.ACKNOWLEDGED, + CLEARED: ICONS.CLEARED, + MINOR: ICONS.MINOR, + MAJOR: ICONS.MAJOR, + CRITICAL: ICONS.CRITICAL, + WARNING: ICONS.WARNING, +}; diff --git a/src/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.spec.ts b/src/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.spec.ts index 8dbe9062..bba2ffff 100644 --- a/src/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.spec.ts +++ b/src/datapoints-graph/datapoints-graph-config/datapoints-graph-widget-config.component.spec.ts @@ -221,7 +221,7 @@ describe('DatapointsGraphWidgetConfigComponent', () => { fixture.detectChanges(); component.formGroup.patchValue({ dateFrom: null }); // when - const result = component.onBeforeSave(null); + const result = component.onBeforeSave(undefined); // then expect(result).toBeFalsy(); }); diff --git a/src/datapoints-graph/datapoints-graph-view/chart-alarms.service.spec.ts b/src/datapoints-graph/datapoints-graph-view/chart-alarms.service.spec.ts new file mode 100644 index 00000000..af96c9ba --- /dev/null +++ b/src/datapoints-graph/datapoints-graph-view/chart-alarms.service.spec.ts @@ -0,0 +1,49 @@ +import { TestBed } from '@angular/core/testing'; +import { ChartAlarmsService } from './chart-alarms.service'; +import { AlarmService, IAlarm, IFetchOptions, IResultList } from '@c8y/client'; +import { AlarmDetails } from '../alarm-event-selector'; + +describe('ChartAlarmsService', () => { + let service: ChartAlarmsService; + let alarmService: AlarmService; + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ChartAlarmsService, AlarmService], + }); + service = TestBed.inject(ChartAlarmsService); + alarmService = TestBed.inject(AlarmService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + describe('listAlarms', () => { + it('should return a list of alarms', async () => { + const mockAlarms: IAlarm[] = [ + { id: '1', text: 'Alarm 1' }, + { id: '2', text: 'Alarm 2' }, + { id: '3', text: 'Alarm 3' }, + ]; + jest.spyOn(alarmService, 'list').mockResolvedValue(mockAlarms); + + const result = await service.listAlarms(); + + expect(result).toEqual(mockAlarms); + }); + + it('should filter alarms based on the provided parameters', async () => { + const mockAlarms: IAlarm[] = [ + { id: '1', text: 'Alarm 1', severity: 'MAJOR' }, + { id: '2', text: 'Alarm 2', severity: 'MINOR' }, + { id: '3', text: 'Alarm 3', severity: 'CRITICAL' }, + ]; + jest.spyOn(alarmService, 'list').mockResolvedValue(mockAlarms); + + const result = await service.listAlarms({ severity: 'MAJOR' }); + + expect(result).toEqual([{ id: '1', text: 'Alarm 1', severity: 'MAJOR' }]); + }); + }); +}); diff --git a/src/datapoints-graph/datapoints-graph-view/chart-alarms.service.ts b/src/datapoints-graph/datapoints-graph-view/chart-alarms.service.ts new file mode 100644 index 00000000..6427f59d --- /dev/null +++ b/src/datapoints-graph/datapoints-graph-view/chart-alarms.service.ts @@ -0,0 +1,44 @@ +import { Injectable } from '@angular/core'; +import { AlarmService, IAlarm, IFetchOptions, IResultList } from '@c8y/client'; +import { AlarmDetails } from '../alarm-event-selector'; + +@Injectable() +export class ChartAlarmsService { + constructor(private alarmService: AlarmService) {} + + /** + * List alarms for the given alarm details. + * @param params Additonal fetchOptions + * @param alarms List of alarm types with details like color, target, etc. + * @returns List of alarms for the given alarm details + */ + async listAlarms(params?, alarms?: AlarmDetails[]): Promise { + if (!alarms) { + return []; + } + const promises = alarms.map((alarm) => { + if (alarm.__severity?.length > 0) { + const severities = alarm.__severity.join(','); + params = { + ...params, + severity: severities, + }; + } + const fetchOptions: IFetchOptions = { + source: alarm.__target.id, + type: alarm.filters.type, + withTotalPages: true, + pageSize: 1000, + ...params, + }; + return this.alarmService.list(fetchOptions).then((result) => { + result.data.forEach((iAlarm) => { + iAlarm.color = alarm.color; + }); + return result.data; + }); + }); + const result = await Promise.all(promises); + return result.flat(); + } +} diff --git a/src/datapoints-graph/datapoints-graph-view/chart-events.service.spec.ts b/src/datapoints-graph/datapoints-graph-view/chart-events.service.spec.ts new file mode 100644 index 00000000..14de024b --- /dev/null +++ b/src/datapoints-graph/datapoints-graph-view/chart-events.service.spec.ts @@ -0,0 +1,40 @@ +import { TestBed } from '@angular/core/testing'; +import { EventService, IEvent, IFetchOptions, IResultList } from '@c8y/client'; +import { ChartEventsService } from './chart-events.service'; +import { EventDetails } from '../alarm-event-selector'; + +describe('ChartEventsService', () => { + let service: ChartEventsService; + let eventService: EventService; + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [EventService], + }); + service = TestBed.inject(ChartEventsService); + eventService = TestBed.inject(EventService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + describe('listEvents', () => { + it('should return a list of events', async () => { + const params = { pageSize: 10 }; + const events: EventDetails[] = []; + + const mockEvents: IEvent[] = [ + { id: '1', type: 'EventType1', text: 'Event 1' }, + { id: '2', type: 'EventType2', text: 'Event 2' }, + ] as IEvent[]; + + jest.spyOn(service, 'listEvents').mockResolvedValue(mockEvents); + + const result = await service.listEvents(params, events); + + expect(result).toEqual(mockEvents); + expect(service.listEvents).toHaveBeenCalledWith(params, events); + }); + }); +}); diff --git a/src/datapoints-graph/datapoints-graph-view/chart-events.service.ts b/src/datapoints-graph/datapoints-graph-view/chart-events.service.ts new file mode 100644 index 00000000..cbf22bad --- /dev/null +++ b/src/datapoints-graph/datapoints-graph-view/chart-events.service.ts @@ -0,0 +1,37 @@ +import { Injectable } from '@angular/core'; +import { EventService, IEvent, IFetchOptions, IResultList } from '@c8y/client'; +import { EventDetails } from '../alarm-event-selector'; + +@Injectable() +export class ChartEventsService { + constructor(private eventService: EventService) {} + + /** + * List events for the given event details. + * @param params Additonal fetchOptions + * @param events List of event types with details like color, target, etc. + * @returns List of events for the given event details + */ + async listEvents(params?, events?: EventDetails[]): Promise { + if (!events) { + return []; + } + const promises = events.map((event) => { + const fetchOptions: IFetchOptions = { + source: event.__target.id, + type: event.filters.type, + withTotalPages: true, + pageSize: 1000, + ...params, + }; + return this.eventService.list(fetchOptions).then((result) => { + result.data.forEach((iEvent) => { + iEvent.color = event.color; + }); + return result.data; + }); + }); + const result = await Promise.all(promises); + return result.flat(); + } +} diff --git a/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.html b/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.html index 9dd614fb..3f354b11 100644 --- a/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.html +++ b/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.html @@ -39,6 +39,24 @@ > +
  • + +
    • +
    -
    -
    - +
    +
    - - + + +
    - - {{ datapoint.label }} + + + + {{ datapoint.label }} + + + {{ datapoint.__target.name }} + - - {{ datapoint.__target.name }} - - + +
    +
    + + +
    + +
    + + + + {{ alarm.filters.type }} + + + {{ alarm.__target.name }} + + +
    +
    + +
    + +
    + + + + {{ event.filters.type }} + + + {{ event.__target.name }} + + +
    @@ -147,6 +269,7 @@ #chart [config]="displayConfig" [alerts]="alerts" + (updateAlarmsAndEvents)="updateAlarmsAndEvents($event)" (configChangeOnZoomOut)="timePropsChanged($event)" (datapointOutOfSync)="handleDatapointOutOfSync($event)" (timeRangeChangeOnRealtime)="updateTimeRangeOnRealtime($event)" diff --git a/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.ts b/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.ts index ec08adb6..da6433a6 100644 --- a/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.ts +++ b/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.ts @@ -12,12 +12,19 @@ import { DatapointsGraphKPIDetails, DatapointsGraphWidgetConfig, DatapointsGraphWidgetTimeProps, + SEVERITY_LABELS, + SeverityType, } from '../model'; import { DynamicComponentAlertAggregator, gettext } from '@c8y/ngx-components'; import { cloneDeep } from 'lodash-es'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs/internal/Subject'; +import { + AlarmDetails, + AlarmOrEvent, + EventDetails, +} from '../alarm-event-selector'; @Component({ selector: 'c8y-datapoints-graph-widget-view', @@ -28,6 +35,8 @@ import { Subject } from 'rxjs/internal/Subject'; export class DatapointsGraphWidgetViewComponent implements OnChanges, OnDestroy { + events: EventDetails[] = []; + alarms: AlarmDetails[] = []; AGGREGATION_ICONS = AGGREGATION_ICONS; AGGREGATION_TEXTS = AGGREGATION_TEXTS; alerts: DynamicComponentAlertAggregator; @@ -50,6 +59,7 @@ export class DatapointsGraphWidgetViewComponent ); readonly hideDatapointLabel = gettext('Hide data point'); readonly showDatapointLabel = gettext('Show data point'); + readonly severitiesList = Object.keys(SEVERITY_LABELS) as SeverityType[]; private destroy$ = new Subject(); constructor(private formBuilder: FormBuilder) { @@ -104,6 +114,50 @@ export class DatapointsGraphWidgetViewComponent this.datapointsOutOfSync.set(dpMatch, true); } + toggleAlarmEventType(alarmOrEvent: AlarmOrEvent): void { + if (alarmOrEvent.timelineType === 'ALARM') { + this.alarms = this.alarms.map((alarm) => { + if (alarm.filters.type === alarmOrEvent.filters.type) { + alarm.__hidden = !alarm.__hidden; + } + return alarm; + }); + } else { + this.events = this.events.map((event) => { + if (event.filters.type === alarmOrEvent.filters.type) { + event.__hidden = !event.__hidden; + } + return event; + }); + } + this.displayConfig = { ...this.displayConfig }; + } + + updateAlarmsAndEvents(alarmsEventsConfigs: AlarmOrEvent[]): void { + this.alarms = alarmsEventsConfigs.filter( + (alarm) => alarm.timelineType === 'ALARM' + ) as AlarmDetails[]; + this.events = alarmsEventsConfigs.filter( + (event) => event.timelineType === 'EVENT' + ) as EventDetails[]; + } + + filterSeverity(severity, eventTarget) { + const isChecked = eventTarget.checked; + this.alarms = this.alarms.map((alarm) => { + if (!alarm.__severity) { + alarm.__severity = []; + } + if (!isChecked) { + alarm.__severity = alarm.__severity.filter((sev) => sev !== severity); + return alarm; + } + alarm.__severity = [...alarm.__severity, severity]; + return alarm; + }); + this.displayConfig = { ...this.displayConfig }; + } + private initForm(): void { this.timeControlsFormGroup = this.formBuilder.group({ dateFrom: [null, [Validators.required]], diff --git a/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.module.ts b/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.module.ts index 63ff6bbd..fcafd4ce 100644 --- a/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.module.ts +++ b/src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.module.ts @@ -5,6 +5,8 @@ import { TimeControlsModule } from '../time-controls'; import { ChartsComponent } from '../charts'; import { CoreModule } from '@c8y/ngx-components'; import { TooltipModule } from 'ngx-bootstrap/tooltip'; +import { ChartEventsService } from './chart-events.service'; +import { ChartAlarmsService } from './chart-alarms.service'; @NgModule({ imports: [ @@ -15,5 +17,6 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip'; TimeControlsModule, ], declarations: [DatapointsGraphWidgetViewComponent], + providers: [ChartEventsService, ChartAlarmsService], }) export class DatapointsGraphWidgetViewModule {} diff --git a/src/datapoints-graph/datapoints-graph-widget.module.ts b/src/datapoints-graph/datapoints-graph-widget.module.ts index de42dfe9..7181fef9 100644 --- a/src/datapoints-graph/datapoints-graph-widget.module.ts +++ b/src/datapoints-graph/datapoints-graph-widget.module.ts @@ -8,6 +8,7 @@ import { HOOK_COMPONENTS, } from '@c8y/ngx-components'; import { ContextWidgetConfig } from '@c8y/ngx-components/context-dashboard'; +import { ChartAlarmsService, ChartEventsService } from './charts'; async function loadViewComponent() { const { DatapointsGraphWidgetViewComponent } = await import( @@ -61,6 +62,8 @@ async function loadConfigComponent() { } as DynamicComponentDefinition, ], }, + ChartAlarmsService, + ChartEventsService, ], }) export class DatapointsGraphWidgetModule {} diff --git a/src/datapoints-graph/model/datapoints-graph-widget.model.ts b/src/datapoints-graph/model/datapoints-graph-widget.model.ts index 8f1c1c34..4f6a59c5 100644 --- a/src/datapoints-graph/model/datapoints-graph-widget.model.ts +++ b/src/datapoints-graph/model/datapoints-graph-widget.model.ts @@ -5,7 +5,7 @@ import { KPIDetails, } from '@c8y/ngx-components/datapoint-selector'; import { DateTimeContext, gettext } from '@c8y/ngx-components'; -import { aggregationType, IMeasurement, ISeries } from '@c8y/client'; +import { aggregationType, IMeasurement, ISeries, Severity } from '@c8y/client'; import type { BarSeriesOption, LineSeriesOption, @@ -27,6 +27,7 @@ export type DatapointsGraphWidgetConfig = { widgetInstanceGlobalTimeContext?: boolean; dateFrom?: Date; dateTo?: Date; + activeAlarmTypesOutOfRange?: string[]; interval?: Interval['id']; aggregation?: aggregationType; realtime?: boolean; @@ -115,6 +116,31 @@ export interface DatapointWithValues extends DatapointsGraphKPIDetails { values: DatapointApiValues; } +type DataPointValues = { + min: number; + max: number; +}; +export type DpValuesItem = { + time: number; + values: DataPointValues[]; +}; + +export interface MarkPointData { + coord: [string, number | DataPointValues | null]; + name: string; + itemType: string; + itemStyle: { color: string }; + symbol: string; // Symbol to display for the mark point (reference to ICONS_MAP) + symbolSize: number; +} + +export interface MarkLineData { + xAxis: number; + itemType: string; + label: { show: boolean; formatter: (params: any) => string }; + itemStyle: { color: string }; +} + export type DatapointLineType = (typeof CHART_LINE_TYPES)[number]['val']; export type EchartsSeriesOptions = | LineSeriesOption @@ -162,3 +188,26 @@ export interface SeriesDatapointInfo { datapointLabel: string; datapointUnit: string; } + +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; + +export type SeverityType = keyof typeof Severity; + +export const ALARM_SEVERITY_ICON = { + CIRCLE: 'circle', + HIGH_PRIORITY: 'high-priority', + WARNING: 'warning', + EXCLAMATION_CIRCLE: 'exclamation-circle', +} as const; + +export const ALARM_SEVERITY_ICON_MAP = { + [Severity.CRITICAL]: ALARM_SEVERITY_ICON.EXCLAMATION_CIRCLE, + [Severity.MAJOR]: ALARM_SEVERITY_ICON.WARNING, + [Severity.MINOR]: ALARM_SEVERITY_ICON.HIGH_PRIORITY, + [Severity.WARNING]: ALARM_SEVERITY_ICON.CIRCLE, +} as const; diff --git a/tsconfig.json b/tsconfig.json index de3eb457..ccc48852 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,7 @@ "experimentalDecorators": true, "target": "es6", "module": "es2020", - "lib": ["dom", "es2015", "es2016"], + "lib": ["dom", "es2020"], "skipLibCheck": true }, "exclude": ["node_modules", "**/*.spec.ts"],