From 034c3a3cf5e20b5101be1e3a7abf3fb5ba925b64 Mon Sep 17 00:00:00 2001 From: enio_sultan Date: Wed, 15 May 2024 20:33:28 +0200 Subject: [PATCH] MTM-58884 Legend re-work initial commit. --- .../charts/chart-realtime.service.ts | 70 ++----------------- .../charts/charts.component.ts | 58 +-------------- src/datapoints-graph/charts/index.ts | 2 + .../chart-alarms.service.ts | 46 ++++++------ .../chart-events.service.ts | 46 ++++++------ ...atapoints-graph-widget-view.component.html | 2 + .../datapoints-graph-widget-view.component.ts | 65 ++++++++++++++++- .../datapoints-graph-widget-view.module.ts | 3 + .../datapoints-graph-widget.module.ts | 3 + 9 files changed, 123 insertions(+), 172 deletions(-) rename src/datapoints-graph/{charts => datapoints-graph-view}/chart-alarms.service.ts (56%) rename src/datapoints-graph/{charts => datapoints-graph-view}/chart-events.service.ts (56%) diff --git a/src/datapoints-graph/charts/chart-realtime.service.ts b/src/datapoints-graph/charts/chart-realtime.service.ts index 2f291e05..2b341c1b 100644 --- a/src/datapoints-graph/charts/chart-realtime.service.ts +++ b/src/datapoints-graph/charts/chart-realtime.service.ts @@ -13,9 +13,7 @@ import { } from '../model'; import { MeasurementRealtimeService } from '@c8y/ngx-components'; import type { ECharts, SeriesOption } from 'echarts'; -import { ChartEventsService } from './chart-events.service'; import { EchartsOptionsService } from './echarts-options.service'; -import { ChartAlarmsService } from './chart-alarms.service'; type Milliseconds = number; @@ -30,9 +28,7 @@ export class ChartRealtimeService { constructor( private measurementRealtime: MeasurementRealtimeService, - private eventsService: ChartEventsService, - private echartsOptionsService: EchartsOptionsService, - private alarmsService: ChartAlarmsService + private echartsOptionsService: EchartsOptionsService ) {} startRealtime( @@ -83,23 +79,13 @@ export class ChartRealtimeService { ) ).pipe(throttleTime(this.MIN_REALTIME_TIMEOUT)); - const events$ = interval(this.INTERVAL).pipe( - switchMap(() => this.loadEvents().pipe(throttleTime(updateThrottleTime))) - ); - - const alarms$ = interval(this.INTERVAL).pipe( - switchMap(() => this.loadAlarms().pipe(throttleTime(updateThrottleTime))) - ); - this.realtimeSubscription = combineLatest([ measurement$.pipe(buffer(bufferReset$)), - events$, - alarms$, - ]).subscribe(([measurements, events, alarms]) => { + ]).subscribe(([measurements]) => { this.updateChartInstance( measurements, - events, - alarms, + [], + [], datapointOutOfSyncCallback ); }); @@ -109,54 +95,6 @@ export class ChartRealtimeService { this.realtimeSubscription?.unsubscribe(); } - private loadEvents(): Observable { - const timeRange = { - dateFrom: this.currentTimeRange.dateFrom.toISOString(), - dateTo: this.currentTimeRange.dateTo.toISOString(), - }; - return this.eventsService.listEvents$(timeRange, [ - { - __target: { id: '7713695199' }, - filters: { type: 'TestEvent' }, - color: '#08293F', - }, - { - __target: { id: '7713695199' }, - filters: { type: 'AnotherEventType' }, - color: '#349EDF', - }, - { - __target: { id: '352734984' }, - filters: { type: 'AnotherEventType' }, - color: '#349EDF', - }, - ]); - } - - private loadAlarms(): Observable { - const timeRange = { - dateFrom: this.currentTimeRange.dateFrom.toISOString(), - dateTo: this.currentTimeRange.dateTo.toISOString(), - }; - return this.alarmsService.listAlarms$(timeRange, [ - { - __target: { id: '7713695199' }, - filters: { type: 'TestAlarm' }, - color: '#08293F', - }, - { - __target: { id: '7713695199' }, - filters: { type: 'AnotherAlarmType' }, - color: '#349EDF', - }, - { - __target: { id: '352734984' }, - filters: { type: 'AnotherAlarmType' }, - color: '#349EDF', - }, - ]); - } - private removeValuesBeforeTimeRange(series: SeriesOption): SeriesValue[] { const firstValidValueByDateIndex = (series.data as SeriesValue[]).findIndex( ([dateString, _]) => { diff --git a/src/datapoints-graph/charts/charts.component.ts b/src/datapoints-graph/charts/charts.component.ts index 49543cac..07fb5d20 100644 --- a/src/datapoints-graph/charts/charts.component.ts +++ b/src/datapoints-graph/charts/charts.component.ts @@ -40,9 +40,7 @@ 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 { ChartEventsService } from './chart-events.service'; import { AlarmStatus, IAlarm, IEvent } from '@c8y/client'; -import { ChartAlarmsService } from './chart-alarms.service'; type ZoomState = Record<'startValue' | 'endValue', number | string | Date>; @@ -59,8 +57,6 @@ type ZoomState = Record<'startValue' | 'endValue', number | string | Date>; ChartTypesService, EchartsOptionsService, CustomMeasurementService, - ChartEventsService, - ChartAlarmsService, YAxisService, ], standalone: true, @@ -76,12 +72,12 @@ type ZoomState = Record<'startValue' | 'endValue', number | string | Date>; export class ChartsComponent implements OnChanges, OnInit, OnDestroy { chartOption$: Observable; echartsInstance: ECharts; - events: IEvent[] = []; - alarms: IAlarm[] = []; zoomHistory: ZoomState[] = []; zoomInActive = false; @Input() config: DatapointsGraphWidgetConfig; @Input() alerts: DynamicComponentAlertAggregator; + @Input() events: IEvent[] = []; + @Input() alarms: IAlarm[] = []; @Output() configChangeOnZoomOut = new EventEmitter(); @Output() timeRangeChangeOnRealtime = new EventEmitter< @@ -98,8 +94,6 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { constructor( private measurementService: CustomMeasurementService, - private eventsService: ChartEventsService, - private alarmsService: ChartAlarmsService, private translateService: TranslateService, private echartsOptionsService: EchartsOptionsService, private chartRealtimeService: ChartRealtimeService @@ -114,13 +108,7 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { if (this.echartsInstance) { this.echartsInstance.on('click', this.onChartClick.bind(this)); } - return forkJoin([this.loadEvents(), this.loadAlarms()]).pipe( - map(([events, alarms]) => { - this.events = events; - this.alarms = alarms; - return this.getChartOptions(datapointsWithValues); - }) - ); + return of(this.getChartOptions(datapointsWithValues)); }), tap(() => { if (this.zoomInActive) { @@ -290,46 +278,6 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy { }); } - private loadEvents(): Observable { - return this.eventsService.listEvents$(this.getTimeRange(), [ - { - __target: { id: '7713695199' }, - filters: { type: 'TestEvent' }, - color: '#08293F', - }, - { - __target: { id: '7713695199' }, - filters: { type: 'AnotherEventType' }, - color: '#349EDF', - }, - { - __target: { id: '352734984' }, - filters: { type: 'AnotherEventType' }, - color: '#349EDF', - }, - ]); - } - - private loadAlarms(): Observable { - return this.alarmsService.listAlarms$(this.getTimeRange(), [ - { - __target: { id: '7713695199' }, - filters: { type: 'TestAlarm' }, - color: '#08293F', - }, - { - __target: { id: '7713695199' }, - filters: { type: 'AnotherAlarmType' }, - color: '#349EDF', - }, - { - __target: { id: '352734984' }, - filters: { type: 'AnotherAlarmType' }, - color: '#349EDF', - }, - ]); - } - async zoomOut() { if (this.zoomInActive) { this.toggleZoomIn(); 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/chart-alarms.service.ts b/src/datapoints-graph/datapoints-graph-view/chart-alarms.service.ts similarity index 56% rename from src/datapoints-graph/charts/chart-alarms.service.ts rename to src/datapoints-graph/datapoints-graph-view/chart-alarms.service.ts index 875abf53..78501bda 100644 --- a/src/datapoints-graph/charts/chart-alarms.service.ts +++ b/src/datapoints-graph/datapoints-graph-view/chart-alarms.service.ts @@ -20,30 +20,28 @@ export class ChartAlarmsService extends AlarmService { this.apiService = apiService; } - listAlarms$(params?, alarms?: Alarm[]): Observable { - return from( - new Promise(async (resolve) => { - const url = `/${this.baseUrl}/alarms`; - const allAlarms: IAlarm[] = []; - for (const alarm of alarms) { - const fetchOptions: IFetchOptions = { - params: { - source: alarm.__target.id, - type: alarm.filters.type, - withTotalPages: true, - pageSize: 1000, - ...params, - }, - }; - const result = await this.getAlarms(url, fetchOptions); - result.data.forEach((iAlarm) => { - iAlarm.color = alarm.color; - }); - allAlarms.push(...result.data); - } - resolve(allAlarms); - }) - ); + listAlarms$(params?, alarms?: Alarm[]): Promise { + return new Promise(async (resolve) => { + const url = `/${this.baseUrl}/alarms`; + const allAlarms: IAlarm[] = []; + for (const alarm of alarms) { + const fetchOptions: IFetchOptions = { + params: { + source: alarm.__target.id, + type: alarm.filters.type, + withTotalPages: true, + pageSize: 1000, + ...params, + }, + }; + const result = await this.getAlarms(url, fetchOptions); + result.data.forEach((iAlarm) => { + iAlarm.color = alarm.color; + }); + allAlarms.push(...result.data); + } + resolve(allAlarms); + }); } private async getAlarms( diff --git a/src/datapoints-graph/charts/chart-events.service.ts b/src/datapoints-graph/datapoints-graph-view/chart-events.service.ts similarity index 56% rename from src/datapoints-graph/charts/chart-events.service.ts rename to src/datapoints-graph/datapoints-graph-view/chart-events.service.ts index 4a53c8c3..9d2e6fcb 100644 --- a/src/datapoints-graph/charts/chart-events.service.ts +++ b/src/datapoints-graph/datapoints-graph-view/chart-events.service.ts @@ -20,30 +20,28 @@ export class ChartEventsService extends EventService { this.apiService = apiService; } - listEvents$(params?, events?: Event[]): Observable { - return from( - new Promise(async (resolve) => { - const url = `/${this.baseUrl}/events`; - const allEvents: IEvent[] = []; - for (const event of events) { - const fetchOptions: IFetchOptions = { - params: { - source: event.__target.id, - type: event.filters.type, - withTotalPages: true, - pageSize: 1000, - ...params, - }, - }; - const result = await this.getEvents(url, fetchOptions); - result.data.forEach((iEvent) => { - iEvent.color = event.color; - }); - allEvents.push(...result.data); - } - resolve(allEvents); - }) - ); + listEvents$(params?, events?: Event[]): Promise { + return new Promise(async (resolve) => { + const url = `/${this.baseUrl}/events`; + const allEvents: IEvent[] = []; + for (const event of events) { + const fetchOptions: IFetchOptions = { + params: { + source: event.__target.id, + type: event.filters.type, + withTotalPages: true, + pageSize: 1000, + ...params, + }, + }; + const result = await this.getEvents(url, fetchOptions); + result.data.forEach((iEvent) => { + iEvent.color = event.color; + }); + allEvents.push(...result.data); + } + resolve(allEvents); + }); } private async getEvents( 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..74acc9e0 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 @@ -147,6 +147,8 @@ #chart [config]="displayConfig" [alerts]="alerts" + [alarms]="alarms" + [events]="events" (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..d2b42199 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 @@ -18,6 +18,9 @@ import { cloneDeep } from 'lodash-es'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs/internal/Subject'; +import { ChartEventsService } from './chart-events.service'; +import { ChartAlarmsService } from './chart-alarms.service'; +import { IAlarm, IEvent } from '@c8y/client'; @Component({ selector: 'c8y-datapoints-graph-widget-view', @@ -28,6 +31,8 @@ import { Subject } from 'rxjs/internal/Subject'; export class DatapointsGraphWidgetViewComponent implements OnChanges, OnDestroy { + events: IEvent[] = []; + alarms: IAlarm[] = []; AGGREGATION_ICONS = AGGREGATION_ICONS; AGGREGATION_TEXTS = AGGREGATION_TEXTS; alerts: DynamicComponentAlertAggregator; @@ -52,7 +57,11 @@ export class DatapointsGraphWidgetViewComponent readonly showDatapointLabel = gettext('Show data point'); private destroy$ = new Subject(); - constructor(private formBuilder: FormBuilder) { + constructor( + private formBuilder: FormBuilder, + private eventsService: ChartEventsService, + private alarmsService: ChartAlarmsService + ) { this.initForm(); this.timeControlsFormGroup.valueChanges .pipe(takeUntil(this.destroy$)) @@ -83,9 +92,11 @@ export class DatapointsGraphWidgetViewComponent this.timeControlsFormGroup.patchValue(timeProps); } - updateTimeRangeOnRealtime( + async updateTimeRangeOnRealtime( timeRange: Pick - ): void { + ): Promise { + this.alarms = await this.loadAlarms(timeRange); + this.events = await this.loadEvents(timeRange); this.timeControlsFormGroup.patchValue(timeRange, { emitEvent: false }); } @@ -115,4 +126,52 @@ export class DatapointsGraphWidgetViewComponent }); this.timeControlsFormGroup.patchValue(this.displayConfig); } + + private loadEvents(timeRange): Promise { + const formattedTimeRange = { + dateFrom: timeRange.dateFrom.toISOString(), + dateTo: timeRange.dateTo.toISOString(), + }; + return this.eventsService.listEvents$(formattedTimeRange, [ + { + __target: { id: '7713695199' }, + filters: { type: 'TestEvent' }, + color: '#08293F', + }, + { + __target: { id: '7713695199' }, + filters: { type: 'AnotherEventType' }, + color: '#349EDF', + }, + { + __target: { id: '352734984' }, + filters: { type: 'AnotherEventType' }, + color: '#349EDF', + }, + ]); + } + + private loadAlarms(timeRange): Promise { + const formattedTimeRange = { + dateFrom: timeRange.dateFrom.toISOString(), + dateTo: timeRange.dateTo.toISOString(), + }; + return this.alarmsService.listAlarms$(formattedTimeRange, [ + { + __target: { id: '7713695199' }, + filters: { type: 'TestAlarm' }, + color: '#08293F', + }, + { + __target: { id: '7713695199' }, + filters: { type: 'AnotherAlarmType' }, + color: '#349EDF', + }, + { + __target: { id: '352734984' }, + filters: { type: 'AnotherAlarmType' }, + color: '#349EDF', + }, + ]); + } } 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 {}