From d06d31c09a0e27ba87757205cfddceedfe0e24bc Mon Sep 17 00:00:00 2001 From: Chantsova Ekaterina Date: Mon, 19 Aug 2024 18:35:37 +0300 Subject: [PATCH] UI: new hide options implementation --- .../timewindow-config-dialog.component.ts | 24 +- .../time/timewindow-panel.component.html | 2 +- .../time/timewindow-panel.component.ts | 299 +++++++++--------- .../components/time/timewindow.component.html | 1 + .../components/time/timewindow.component.ts | 12 +- .../src/app/shared/models/time/time.models.ts | 93 ++++-- 6 files changed, 240 insertions(+), 191 deletions(-) diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts index 5f8fa10f94..b154b4140d 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts @@ -20,8 +20,10 @@ import { AggregationType, DAY, HistoryWindowType, + historyWindowTypeTranslations, quickTimeIntervalPeriod, RealtimeWindowType, + realtimeWindowTypeTranslations, Timewindow, TimewindowType } from '@shared/models/time/time.models'; @@ -72,22 +74,22 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On realtimeTimewindowOptions: ToggleHeaderOption[] = [ { - name: this.translate.instant('timewindow.relative'), + name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.INTERVAL)), value: this.realtimeTypes.INTERVAL } ]; historyTimewindowOptions: ToggleHeaderOption[] = [ { - name: this.translate.instant('timewindow.last'), + name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.LAST_INTERVAL)), value: this.historyTypes.LAST_INTERVAL }, { - name: this.translate.instant('timewindow.fixed'), + name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.FIXED)), value: this.historyTypes.FIXED }, { - name: this.translate.instant('timewindow.relative'), + name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.INTERVAL)), value: this.historyTypes.INTERVAL } ]; @@ -107,7 +109,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On if (!this.quickIntervalOnly) { this.realtimeTimewindowOptions.unshift({ - name: this.translate.instant('timewindow.last'), + name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.LAST_INTERVAL)), value: this.realtimeTypes.LAST_INTERVAL }); } @@ -176,18 +178,6 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On limit: [ isDefined(aggregation?.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null ] }), timezone: [ isDefined(this.timewindow.timezone) ? this.timewindow.timezone : null ], - hideInterval: [ isDefinedAndNotNull(this.timewindow.hideInterval) - ? this.timewindow.hideInterval : false ], - hideLastInterval: [{ - value: isDefinedAndNotNull(this.timewindow.hideLastInterval) - ? this.timewindow.hideLastInterval : false, - disabled: this.timewindow.hideInterval - }], - hideQuickInterval: [{ - value: isDefinedAndNotNull(this.timewindow.hideQuickInterval) - ? this.timewindow.hideQuickInterval : false, - disabled: this.timewindow.hideInterval - }], hideAggregation: [ isDefinedAndNotNull(this.timewindow.hideAggregation) ? this.timewindow.hideAggregation : false ], hideAggInterval: [ isDefinedAndNotNull(this.timewindow.hideAggInterval) diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html index 9c6ed91d05..45a735187c 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html @@ -131,7 +131,7 @@ -
+
{{ 'aggregation.aggregation' | translate }}
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts index d60cf1b6ce..cc75725c74 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts @@ -20,8 +20,10 @@ import { AggregationType, DAY, HistoryWindowType, + historyWindowTypeTranslations, quickTimeIntervalPeriod, RealtimeWindowType, + realtimeWindowTypeTranslations, Timewindow, TimewindowType } from '@shared/models/time/time.models'; @@ -30,7 +32,7 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { TimeService } from '@core/services/time.service'; -import { isDefined, isDefinedAndNotNull } from '@core/utils'; +import { isDefined } from '@core/utils'; import { OverlayRef } from '@angular/cdk/overlay'; import { ToggleHeaderOption } from '@shared/components/toggle-header.component'; import { TranslateService } from '@ngx-translate/core'; @@ -91,25 +93,13 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { realtimeTimewindowOptions: ToggleHeaderOption[] = []; - historyTimewindowOptions: ToggleHeaderOption[] = [ - { - name: this.translate.instant('timewindow.last'), - value: this.historyTypes.LAST_INTERVAL - }, - { - name: this.translate.instant('timewindow.fixed'), - value: this.historyTypes.FIXED - }, - { - name: this.translate.instant('timewindow.relative'), - value: this.historyTypes.INTERVAL - } - ]; + historyTimewindowOptions: ToggleHeaderOption[] = []; realtimeTypeSelectionAvailable: boolean; realtimeIntervalSelectionAvailable: boolean; historyTypeSelectionAvailable: boolean; historyIntervalSelectionAvailable: boolean; + aggregationOptionsAvailable: boolean; constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData, public overlayRef: OverlayRef, @@ -128,53 +118,60 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { this.timezone = data.timezone; this.isEdit = data.isEdit; - // for backward compatibility - if (isDefinedAndNotNull(this.timewindow.hideInterval)) { - this.timewindow.realtime.hideInterval = this.timewindow.hideInterval; - this.timewindow.history.hideInterval = this.timewindow.hideInterval; - // delete this.timewindow.hideInterval; - } - if (isDefinedAndNotNull(this.timewindow.hideLastInterval)) { - this.timewindow.realtime.hideLastInterval = this.timewindow.hideLastInterval; - // delete this.timewindow.hideLastInterval; - } - if (isDefinedAndNotNull(this.timewindow.hideQuickInterval)) { - this.timewindow.realtime.hideQuickInterval = this.timewindow.hideQuickInterval; - // delete this.timewindow.hideQuickInterval; - } - - if (this.forAllTimeEnabled) { - this.historyTimewindowOptions.unshift({ - name: this.translate.instant('timewindow.for-all-time'), - value: this.historyTypes.FOR_ALL_TIME - }); - } - if ((this.isEdit || !this.timewindow.realtime.hideLastInterval) && !this.quickIntervalOnly) { this.realtimeTimewindowOptions.push({ - name: this.translate.instant('timewindow.last'), + name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.LAST_INTERVAL)), value: this.realtimeTypes.LAST_INTERVAL }); } if (this.isEdit || !this.timewindow.realtime.hideQuickInterval || this.quickIntervalOnly) { this.realtimeTimewindowOptions.push({ - name: this.translate.instant('timewindow.relative'), + name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.INTERVAL)), value: this.realtimeTypes.INTERVAL }); } + if (this.forAllTimeEnabled) { + this.historyTimewindowOptions.push({ + name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.FOR_ALL_TIME)), + value: this.historyTypes.FOR_ALL_TIME + }); + } + + if (this.isEdit || !this.timewindow.history.hideLastInterval) { + this.historyTimewindowOptions.push({ + name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.LAST_INTERVAL)), + value: this.historyTypes.LAST_INTERVAL + }); + } + + if (this.isEdit || !this.timewindow.history.hideFixedInterval) { + this.historyTimewindowOptions.push({ + name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.FIXED)), + value: this.historyTypes.FIXED + }); + } + + if (this.isEdit || !this.timewindow.history.hideQuickInterval) { + this.historyTimewindowOptions.push({ + name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.INTERVAL)), + value: this.historyTypes.INTERVAL + }); + } + this.realtimeTypeSelectionAvailable = this.realtimeTimewindowOptions.length > 1; this.historyTypeSelectionAvailable = this.historyTimewindowOptions.length > 1; this.realtimeIntervalSelectionAvailable = this.isEdit || !(this.timewindow.realtime.hideInterval || (this.timewindow.realtime.hideLastInterval && this.timewindow.realtime.hideQuickInterval)); - this.historyIntervalSelectionAvailable = this.isEdit || !this.timewindow.hideInterval; + this.historyIntervalSelectionAvailable = this.isEdit || !(this.timewindow.history.hideInterval || + (this.timewindow.history.hideLastInterval && this.timewindow.history.hideQuickInterval && this.timewindow.history.hideFixedInterval)); + + this.aggregationOptionsAvailable = this.aggregation && (this.isEdit || + !(this.timewindow.hideAggregation && this.timewindow.hideAggInterval)); } ngOnInit(): void { - const hideInterval = this.timewindow.hideInterval || false; - const hideLastInterval = this.timewindow.realtime.hideLastInterval || false; - const hideQuickInterval = this.timewindow.realtime.hideQuickInterval || false; const hideAggregation = this.timewindow.hideAggregation || false; const hideAggInterval = this.timewindow.hideAggInterval || false; const hideTimezone = this.timewindow.hideTimezone || false; @@ -186,51 +183,51 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { this.timewindowForm = this.fb.group({ realtime: this.fb.group({ realtimeType: [{ - value: isDefined(realtime?.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL, - disabled: hideInterval + value: isDefined(realtime?.realtimeType) ? realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL, + disabled: realtime.hideInterval }], timewindowMs: [{ - value: isDefined(realtime?.timewindowMs) ? this.timewindow.realtime.timewindowMs : null, - disabled: hideInterval || hideLastInterval + value: isDefined(realtime?.timewindowMs) ? realtime.timewindowMs : null, + disabled: realtime.hideInterval || realtime.hideLastInterval }], interval: [{ - value:isDefined(realtime?.interval) ? this.timewindow.realtime.interval : null, + value:isDefined(realtime?.interval) ? realtime.interval : null, disabled: hideAggInterval }], quickInterval: [{ - value: isDefined(realtime?.quickInterval) ? this.timewindow.realtime.quickInterval : null, - disabled: hideInterval || hideQuickInterval + value: isDefined(realtime?.quickInterval) ? realtime.quickInterval : null, + disabled: realtime.hideInterval || realtime.hideQuickInterval }] }), history: this.fb.group({ historyType: [{ - value: isDefined(history?.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL, - disabled: hideInterval + value: isDefined(history?.historyType) ? history.historyType : HistoryWindowType.LAST_INTERVAL, + disabled: history.hideInterval }], timewindowMs: [{ - value: isDefined(history?.timewindowMs) ? this.timewindow.history.timewindowMs : null, - disabled: hideInterval + value: isDefined(history?.timewindowMs) ? history.timewindowMs : null, + disabled: history.hideInterval || history.hideLastInterval }], interval: [{ - value:isDefined(history?.interval) ? this.timewindow.history.interval : null, + value:isDefined(history?.interval) ? history.interval : null, disabled: hideAggInterval }], fixedTimewindow: [{ - value: isDefined(history?.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : null, - disabled: hideInterval + value: isDefined(history?.fixedTimewindow) ? history.fixedTimewindow : null, + disabled: history.hideInterval || history.hideFixedInterval }], quickInterval: [{ - value: isDefined(history?.quickInterval) ? this.timewindow.history.quickInterval : null, - disabled: hideInterval + value: isDefined(history?.quickInterval) ? history.quickInterval : null, + disabled: history.hideInterval || history.hideQuickInterval }] }), aggregation: this.fb.group({ type: [{ - value: isDefined(aggregation?.type) ? this.timewindow.aggregation.type : null, + value: isDefined(aggregation?.type) ? aggregation.type : null, disabled: hideAggregation }], limit: [{ - value: isDefined(aggregation?.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null, + value: isDefined(aggregation?.limit) ? this.checkLimit(aggregation.limit) : null, disabled: hideAggInterval }, []] }), @@ -330,12 +327,71 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { private updateTimewindowForm() { this.timewindowForm.patchValue(this.timewindow); - this.onHideIntervalChanged(); - this.onHideLastIntervalChanged(); - this.onHideQuickIntervalChanged(); - this.onHideAggregationChanged(); - this.onHideAggIntervalChanged(); - this.onHideTimezoneChanged(); + + if (this.timewindow.realtime.hideInterval) { + this.timewindowForm.get('realtime.realtimeType').disable({emitEvent: false}); + this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false}); + this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false}); + } else { + this.timewindowForm.get('realtime.realtimeType').enable({emitEvent: false}); + if (this.timewindow.realtime.hideLastInterval) { + this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false}); + } else { + this.timewindowForm.get('realtime.timewindowMs').enable({emitEvent: false}); + } + if (this.timewindow.realtime.hideQuickInterval) { + this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false}); + } else { + this.timewindowForm.get('realtime.quickInterval').enable({emitEvent: false}); + } + } + + if (this.timewindow.history.hideInterval) { + this.timewindowForm.get('history.historyType').disable({emitEvent: false}); + this.timewindowForm.get('history.timewindowMs').disable({emitEvent: false}); + this.timewindowForm.get('history.fixedTimewindow').disable({emitEvent: false}); + this.timewindowForm.get('history.quickInterval').disable({emitEvent: false}); + } else { + this.timewindowForm.get('history.historyType').enable({emitEvent: false}); + if (this.timewindow.history.hideLastInterval) { + this.timewindowForm.get('history.timewindowMs').disable({emitEvent: false}); + } else { + this.timewindowForm.get('history.timewindowMs').enable({emitEvent: false}); + } + if (this.timewindow.history.hideFixedInterval) { + this.timewindowForm.get('history.fixedTimewindow').disable({emitEvent: false}); + } else { + this.timewindowForm.get('history.fixedTimewindow').enable({emitEvent: false}); + } + if (this.timewindow.history.hideQuickInterval) { + this.timewindowForm.get('history.quickInterval').disable({emitEvent: false}); + } else { + this.timewindowForm.get('history.quickInterval').enable({emitEvent: false}); + } + } + + if (this.timewindow.hideAggregation) { + this.timewindowForm.get('aggregation.type').disable({emitEvent: false}); + } else { + this.timewindowForm.get('aggregation.type').enable({emitEvent: false}); + } + if (this.timewindow.hideAggInterval) { + this.timewindowForm.get('aggregation.limit').disable({emitEvent: false}); + this.timewindowForm.get('realtime.interval').disable({emitEvent: false}); + this.timewindowForm.get('history.interval').disable({emitEvent: false}); + } else { + this.timewindowForm.get('aggregation.limit').enable({emitEvent: false}); + this.timewindowForm.get('realtime.interval').enable({emitEvent: false}); + this.timewindowForm.get('history.interval').enable({emitEvent: false}); + } + + if (this.timewindow.hideTimezone) { + this.timewindowForm.get('timezone').disable({emitEvent: false}); + } else { + this.timewindowForm.get('timezone').enable({emitEvent: false}); + } + + this.timewindowForm.markAsDirty(); } cancel() { @@ -392,89 +448,34 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit { } } - onHideIntervalChanged() { - if (this.timewindow.hideInterval) { - this.timewindowForm.get('history.historyType').disable({emitEvent: false}); - this.timewindowForm.get('history.timewindowMs').disable({emitEvent: false}); - this.timewindowForm.get('history.fixedTimewindow').disable({emitEvent: false}); - this.timewindowForm.get('history.quickInterval').disable({emitEvent: false}); - this.timewindowForm.get('realtime.realtimeType').disable({emitEvent: false}); - this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false}); - this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false}); - } else { - this.timewindowForm.get('history.historyType').enable({emitEvent: false}); - this.timewindowForm.get('history.timewindowMs').enable({emitEvent: false}); - this.timewindowForm.get('history.fixedTimewindow').enable({emitEvent: false}); - this.timewindowForm.get('history.quickInterval').enable({emitEvent: false}); - this.timewindowForm.get('realtime.realtimeType').enable({emitEvent: false}); - if (!this.timewindow.realtime.hideLastInterval) { - this.timewindowForm.get('realtime.timewindowMs').enable({emitEvent: false}); - } - if (!this.timewindow.realtime.hideQuickInterval) { - this.timewindowForm.get('realtime.quickInterval').enable({emitEvent: false}); - } - } - this.timewindowForm.markAsDirty(); - } + // TODO: pay attention to selecting another option on hiding interval in config + // onHideLastIntervalChanged() { + // if (this.timewindow.realtime.hideLastInterval) { + // this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false}); + // if (!this.timewindow.realtime.hideQuickInterval) { + // this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.INTERVAL); + // } + // } else { + // if (!this.timewindow.hideInterval) { + // this.timewindowForm.get('realtime.timewindowMs').enable({emitEvent: false}); + // } + // } + // this.timewindowForm.markAsDirty(); + // } - onHideLastIntervalChanged() { - if (this.timewindow.realtime.hideLastInterval) { - this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false}); - if (!this.timewindow.realtime.hideQuickInterval) { - this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.INTERVAL); - } - } else { - if (!this.timewindow.hideInterval) { - this.timewindowForm.get('realtime.timewindowMs').enable({emitEvent: false}); - } - } - this.timewindowForm.markAsDirty(); - } - - onHideQuickIntervalChanged() { - if (this.timewindow.realtime.hideQuickInterval) { - this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false}); - if (!this.timewindow.realtime.hideLastInterval) { - this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.LAST_INTERVAL); - } - } else { - if (!this.timewindow.hideInterval) { - this.timewindowForm.get('realtime.quickInterval').enable({emitEvent: false}); - } - } - this.timewindowForm.markAsDirty(); - } - - onHideAggregationChanged() { - if (this.timewindow.hideAggregation) { - this.timewindowForm.get('aggregation.type').disable({emitEvent: false}); - } else { - this.timewindowForm.get('aggregation.type').enable({emitEvent: false}); - } - this.timewindowForm.markAsDirty(); - } - - onHideAggIntervalChanged() { - if (this.timewindow.hideAggInterval) { - this.timewindowForm.get('aggregation.limit').disable({emitEvent: false}); - this.timewindowForm.get('realtime.interval').disable({emitEvent: false}); - this.timewindowForm.get('history.interval').disable({emitEvent: false}); - } else { - this.timewindowForm.get('aggregation.limit').enable({emitEvent: false}); - this.timewindowForm.get('realtime.interval').enable({emitEvent: false}); - this.timewindowForm.get('history.interval').enable({emitEvent: false}); - } - this.timewindowForm.markAsDirty(); - } - - onHideTimezoneChanged() { - if (this.timewindow.hideTimezone) { - this.timewindowForm.get('timezone').disable({emitEvent: false}); - } else { - this.timewindowForm.get('timezone').enable({emitEvent: false}); - } - this.timewindowForm.markAsDirty(); - } + // onHideQuickIntervalChanged() { + // if (this.timewindow.realtime.hideQuickInterval) { + // this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false}); + // if (!this.timewindow.realtime.hideLastInterval) { + // this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.LAST_INTERVAL); + // } + // } else { + // if (!this.timewindow.hideInterval) { + // this.timewindowForm.get('realtime.quickInterval').enable({emitEvent: false}); + // } + // } + // this.timewindowForm.markAsDirty(); + // } openTimewindowConfig() { this.prepareTimewindowConfig(); diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html index 622f5654d9..9896d65bc0 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html @@ -44,6 +44,7 @@ [class]="{'no-padding': noPadding}" matTooltip="{{ 'timewindow.edit' | translate }}" [matTooltipPosition]="tooltipPosition" + [matTooltipDisabled]="timewindowDisabled" [style]="timewindowComponentStyle" (click)="toggleTimewindow($event)"> ([ + [RealtimeWindowType.LAST_INTERVAL, 'timewindow.last'], + [RealtimeWindowType.INTERVAL, 'timewindow.relative'] +]); +export const historyWindowTypeTranslations = new Map([ + [HistoryWindowType.LAST_INTERVAL, 'timewindow.last'], + [HistoryWindowType.FIXED, 'timewindow.fixed'], + [HistoryWindowType.INTERVAL, 'timewindow.relative'], + [HistoryWindowType.FOR_ALL_TIME, 'timewindow.for-all-time'] +]); + export type Interval = number | IntervalType; export class IntervalMath { @@ -128,8 +139,17 @@ export interface Aggregation { export interface Timewindow { displayValue?: string; displayTimezoneAbbr?: string; + /** + * @deprecated + */ hideInterval?: boolean; + /** + * @deprecated + */ hideQuickInterval?: boolean; + /** + * @deprecated + */ hideLastInterval?: boolean; hideAggregation?: boolean; hideAggInterval?: boolean; @@ -247,9 +267,6 @@ export const defaultTimewindow = (timeService: TimeService): Timewindow => { const currentTime = moment().valueOf(); return { displayValue: '', - hideInterval: false, - hideLastInterval: false, - hideQuickInterval: false, hideAggregation: false, hideAggInterval: false, hideTimezone: false, @@ -258,7 +275,10 @@ export const defaultTimewindow = (timeService: TimeService): Timewindow => { realtimeType: RealtimeWindowType.LAST_INTERVAL, interval: SECOND, timewindowMs: MINUTE, - quickInterval: QuickTimeInterval.CURRENT_DAY + quickInterval: QuickTimeInterval.CURRENT_DAY, + hideInterval: false, + hideLastInterval: false, + hideQuickInterval: false }, history: { historyType: HistoryWindowType.LAST_INTERVAL, @@ -268,7 +288,11 @@ export const defaultTimewindow = (timeService: TimeService): Timewindow => { startTimeMs: currentTime - DAY, endTimeMs: currentTime }, - quickInterval: QuickTimeInterval.CURRENT_DAY + quickInterval: QuickTimeInterval.CURRENT_DAY, + hideInterval: false, + hideLastInterval: false, + hideFixedInterval: false, + hideQuickInterval: false }, aggregation: { type: AggregationType.AVG, @@ -289,14 +313,34 @@ export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalO historyOnly: boolean, timeService: TimeService): Timewindow => { const model = defaultTimewindow(timeService); if (value) { - model.hideInterval = value.hideInterval; - model.hideLastInterval = value.hideLastInterval; - model.hideQuickInterval = value.hideQuickInterval; model.hideAggregation = value.hideAggregation; model.hideAggInterval = value.hideAggInterval; model.hideTimezone = value.hideTimezone; model.selectedTab = getTimewindowType(value); + + // for backward compatibility + if (isDefinedAndNotNull(value.hideInterval)) { + model.realtime.hideInterval = value.hideInterval; + model.history.hideInterval = value.hideInterval; + } + if (isDefinedAndNotNull(value.hideLastInterval)) { + model.realtime.hideLastInterval = value.hideLastInterval; + } + if (isDefinedAndNotNull(value.hideQuickInterval)) { + model.realtime.hideQuickInterval = value.hideQuickInterval; + } + if (isDefined(value.realtime)) { + if (isDefinedAndNotNull(value.realtime.hideInterval)) { + model.realtime.hideInterval = value.realtime.hideInterval; + } + if (isDefinedAndNotNull(value.realtime.hideLastInterval)) { + model.realtime.hideLastInterval = value.realtime.hideLastInterval; + } + if (isDefinedAndNotNull(value.realtime.hideQuickInterval)) { + model.realtime.hideQuickInterval = value.realtime.hideQuickInterval; + } + if (isDefined(value.realtime.interval)) { model.realtime.interval = value.realtime.interval; } @@ -317,6 +361,19 @@ export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalO } } if (isDefined(value.history)) { + if (isDefinedAndNotNull(value.history.hideInterval)) { + model.history.hideInterval = value.history.hideInterval; + } + if (isDefinedAndNotNull(value.history.hideLastInterval)) { + model.history.hideLastInterval = value.history.hideLastInterval; + } + if (isDefinedAndNotNull(value.history.hideFixedInterval)) { + model.history.hideFixedInterval = value.history.hideFixedInterval; + } + if (isDefinedAndNotNull(value.history.hideQuickInterval)) { + model.history.hideQuickInterval = value.history.hideQuickInterval; + } + if (isDefined(value.history.interval)) { model.history.interval = value.history.interval; } @@ -382,9 +439,6 @@ export const toHistoryTimewindow = (timewindow: Timewindow, startTimeMs: number, limit = timeService.getMaxDatapointsLimit(); } return { - hideInterval: timewindow.hideInterval || false, - hideLastInterval: timewindow.hideLastInterval || false, - hideQuickInterval: timewindow.hideQuickInterval || false, hideAggregation: timewindow.hideAggregation || false, hideAggInterval: timewindow.hideAggInterval || false, hideTimezone: timewindow.hideTimezone || false, @@ -395,7 +449,10 @@ export const toHistoryTimewindow = (timewindow: Timewindow, startTimeMs: number, startTimeMs, endTimeMs }, - interval: timeService.boundIntervalToTimewindow(endTimeMs - startTimeMs, interval, AggregationType.AVG) + interval: timeService.boundIntervalToTimewindow(endTimeMs - startTimeMs, interval, AggregationType.AVG), + hideInterval: timewindow.history?.hideInterval || false, + hideLastInterval: timewindow.history?.hideLastInterval || false, + hideQuickInterval: timewindow.history?.hideQuickInterval || false, }, aggregation: { type: aggType, @@ -850,20 +907,14 @@ export const createTimewindowForComparison = (subscriptionTimewindow: Subscripti export const cloneSelectedTimewindow = (timewindow: Timewindow): Timewindow => { const cloned: Timewindow = {}; - cloned.hideInterval = timewindow.hideInterval || false; - cloned.hideLastInterval = timewindow.hideLastInterval || false; - cloned.hideQuickInterval = timewindow.hideQuickInterval || false; cloned.hideAggregation = timewindow.hideAggregation || false; cloned.hideAggInterval = timewindow.hideAggInterval || false; cloned.hideTimezone = timewindow.hideTimezone || false; if (isDefined(timewindow.selectedTab)) { cloned.selectedTab = timewindow.selectedTab; - if (timewindow.selectedTab === TimewindowType.REALTIME) { - cloned.realtime = deepClone(timewindow.realtime); - } else if (timewindow.selectedTab === TimewindowType.HISTORY) { - cloned.history = deepClone(timewindow.history); - } } + cloned.realtime = deepClone(timewindow.realtime); + cloned.history = deepClone(timewindow.history); cloned.aggregation = deepClone(timewindow.aggregation); cloned.timezone = timewindow.timezone; return cloned;