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 15af06ae24..185f6eceaf 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 @@ -26,7 +26,8 @@ import { RealtimeWindowType, realtimeWindowTypeTranslations, Timewindow, - TimewindowType + TimewindowType, + updateFormValuesOnTimewindowTypeChange } from '@shared/models/time/time.models'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; @@ -350,41 +351,16 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On private onTimewindowTypeChange(selectedTab: TimewindowType) { const timewindowFormValue = this.timewindowForm.getRawValue(); - if (selectedTab === TimewindowType.REALTIME) { - if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED - && !(this.quickIntervalOnly && timewindowFormValue.history.historyType === HistoryWindowType.LAST_INTERVAL)) { - const allowedLastIntervals = timewindowFormValue.realtime.advancedParams.allowedLastIntervals; - const allowedQuickIntervals = timewindowFormValue.realtime.advancedParams.allowedQuickIntervals; - if (Object.keys(RealtimeWindowType).includes(HistoryWindowType[timewindowFormValue.history.historyType])) { - this.timewindowForm.get('realtime.realtimeType').patchValue(RealtimeWindowType[HistoryWindowType[timewindowFormValue.history.historyType]]); - } - if (!allowedLastIntervals?.length || allowedLastIntervals.includes(timewindowFormValue.history.timewindowMs)) { - this.timewindowForm.get('realtime.timewindowMs').patchValue(timewindowFormValue.history.timewindowMs); - } - if (allowedQuickIntervals?.includes(timewindowFormValue.history.quickInterval) || - (!allowedQuickIntervals?.length && timewindowFormValue.history.quickInterval.startsWith('CURRENT'))) { - this.timewindowForm.get('realtime.quickInterval').patchValue(timewindowFormValue.history.quickInterval); - } - setTimeout(() => this.timewindowForm.get('realtime.interval').patchValue(timewindowFormValue.history.interval)); - } - } else { - const allowedLastIntervals = timewindowFormValue.history.advancedParams.allowedLastIntervals; - const allowedQuickIntervals = timewindowFormValue.history.advancedParams.allowedQuickIntervals; - this.timewindowForm.get('history.historyType').patchValue(HistoryWindowType[RealtimeWindowType[timewindowFormValue.realtime.realtimeType]]); - if (!allowedLastIntervals?.length || allowedLastIntervals?.includes(timewindowFormValue.realtime.timewindowMs)) { - this.timewindowForm.get('history.timewindowMs').patchValue(timewindowFormValue.realtime.timewindowMs); - } - if (!allowedQuickIntervals?.length || allowedQuickIntervals?.includes(timewindowFormValue.realtime.quickInterval)) { - this.timewindowForm.get('history.quickInterval').patchValue(timewindowFormValue.realtime.quickInterval); - } - setTimeout(() => this.timewindowForm.get('history.interval').patchValue(timewindowFormValue.realtime.interval)); - } + const realtimeDisableCustomInterval = timewindowFormValue.realtime.disableCustomInterval; + const historyDisableCustomInterval = timewindowFormValue.history.disableCustomInterval; + const realtimeAllowedLastIntervals = timewindowFormValue.realtime.advancedParams.allowedLastIntervals; + const realtimeAllowedQuickIntervals = timewindowFormValue.realtime.advancedParams.allowedQuickIntervals; + const historyAllowedLastIntervals = timewindowFormValue.history.advancedParams.allowedLastIntervals; + const historyAllowedQuickIntervals = timewindowFormValue.history.advancedParams.allowedQuickIntervals; + updateFormValuesOnTimewindowTypeChange(selectedTab, this.quickIntervalOnly, this.timewindowForm, + realtimeDisableCustomInterval, historyDisableCustomInterval, + realtimeAllowedLastIntervals, realtimeAllowedQuickIntervals, historyAllowedLastIntervals, historyAllowedQuickIntervals); this.timewindowForm.patchValue({ - aggregation: { - type: timewindowFormValue.aggregation.type, - limit: timewindowFormValue.aggregation.limit - }, - timezone: timewindowFormValue.timezone, hideAggregation: timewindowFormValue.hideAggregation, hideAggInterval: timewindowFormValue.hideAggInterval, hideTimezone: timewindowFormValue.hideTimezone 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 787b7c842a..68db208d0a 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 @@ -52,7 +52,7 @@ subscriptSizing="dynamic" appearance="outline" [allowedIntervals]="realtimeAllowedLastIntervals" - [disabledAdvanced]="timewindow.realtime.disableCustomInterval" + [disabledAdvanced]="realtimeDisableCustomInterval" [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME && timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> @@ -98,7 +98,7 @@ subscriptSizing="dynamic" appearance="outline" [allowedIntervals]="historyAllowedLastIntervals" - [disabledAdvanced]="timewindow.history.disableCustomInterval" + [disabledAdvanced]="historyDisableCustomInterval" [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY && timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> @@ -154,7 +154,7 @@ useCalendarIntervals subscriptSizing="dynamic" appearance="outline" - [disabledAdvanced]="timewindow.realtime.disableCustomGroupInterval"> + [disabledAdvanced]="realtimeDisableCustomGroupInterval">
{{ 'aggregation.group-interval' | translate }}
@@ -165,7 +165,7 @@ useCalendarIntervals subscriptSizing="dynamic" appearance="outline" - [disabledAdvanced]="timewindow.history.disableCustomGroupInterval"> + [disabledAdvanced]="historyDisableCustomGroupInterval">
{{ 'aggregation.group-interval' | 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 42108b5379..420b5531b3 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 @@ -26,7 +26,8 @@ import { RealtimeWindowType, realtimeWindowTypeTranslations, Timewindow, - TimewindowType + TimewindowType, + updateFormValuesOnTimewindowTypeChange } from '@shared/models/time/time.models'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; @@ -105,6 +106,11 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O historyIntervalSelectionAvailable: boolean; aggregationOptionsAvailable: boolean; + realtimeDisableCustomInterval: boolean; + realtimeDisableCustomGroupInterval: boolean; + historyDisableCustomInterval: boolean; + historyDisableCustomGroupInterval: boolean; + realtimeAllowedLastIntervals: Array; realtimeAllowedQuickIntervals: Array; historyAllowedLastIntervals: Array; @@ -318,40 +324,9 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O } private onTimewindowTypeChange(selectedTab: TimewindowType) { - const timewindowFormValue = this.timewindowForm.getRawValue(); - if (selectedTab === TimewindowType.REALTIME) { - if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED - && !((this.quickIntervalOnly || this.timewindow.realtime.hideLastInterval) - && timewindowFormValue.history.historyType === HistoryWindowType.LAST_INTERVAL) - && !(this.timewindow.realtime.hideQuickInterval && timewindowFormValue.history.historyType === HistoryWindowType.INTERVAL)) { - - this.timewindowForm.get('realtime').patchValue({ - realtimeType: Object.keys(RealtimeWindowType).includes(HistoryWindowType[timewindowFormValue.history.historyType]) ? - RealtimeWindowType[HistoryWindowType[timewindowFormValue.history.historyType]] : - timewindowFormValue.realtime.realtimeType, - timewindowMs: timewindowFormValue.history.timewindowMs, - quickInterval: timewindowFormValue.history.quickInterval.startsWith('CURRENT') ? - timewindowFormValue.history.quickInterval : timewindowFormValue.realtime.quickInterval - }); - setTimeout(() => this.timewindowForm.get('realtime.interval').patchValue(timewindowFormValue.history.interval)); - } - } else if (!(this.timewindow.history.hideLastInterval && timewindowFormValue.realtime.realtimeType === RealtimeWindowType.LAST_INTERVAL) - && !(this.timewindow.history.hideQuickInterval && timewindowFormValue.realtime.realtimeType === RealtimeWindowType.INTERVAL)) { - - this.timewindowForm.get('history').patchValue({ - historyType: HistoryWindowType[RealtimeWindowType[timewindowFormValue.realtime.realtimeType]], - timewindowMs: timewindowFormValue.realtime.timewindowMs, - quickInterval: timewindowFormValue.realtime.quickInterval - }); - setTimeout(() => this.timewindowForm.get('history.interval').patchValue(timewindowFormValue.realtime.interval)); - } - this.timewindowForm.patchValue({ - aggregation: { - type: timewindowFormValue.aggregation.type, - limit: timewindowFormValue.aggregation.limit - }, - timezone: timewindowFormValue.timezone - }); + updateFormValuesOnTimewindowTypeChange(selectedTab, this.quickIntervalOnly, this.timewindowForm, + this.realtimeDisableCustomInterval, this.historyDisableCustomInterval, + this.realtimeAllowedLastIntervals, this.realtimeAllowedQuickIntervals, this.historyAllowedLastIntervals, this.historyAllowedQuickIntervals); } update() { @@ -377,31 +352,6 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O quickInterval: timewindowFormValue.history.quickInterval, }}; - // if (!this.timewindow.realtime.advancedParams?.allowedLastIntervals?.length) { - // delete this.timewindow.realtime.advancedParams.allowedLastIntervals; - // } - // if (!this.timewindow.realtime.advancedParams?.allowedQuickIntervals?.length) { - // delete this.timewindow.realtime.advancedParams.allowedQuickIntervals; - // } - // - // if (!this.timewindow.history.advancedParams?.allowedLastIntervals?.length) { - // delete this.timewindow.history.advancedParams.allowedLastIntervals; - // } - // if (!this.timewindow.history.advancedParams?.allowedQuickIntervals?.length) { - // } else { - // delete this.timewindow.history.advancedParams.allowedQuickIntervals; - // } - // - // if (!Object.keys(this.timewindow.realtime.advancedParams).length) { - // delete this.timewindow.realtime.advancedParams; - // } - // if (!Object.keys(this.timewindow.history.advancedParams).length) { - // delete this.timewindow.history.advancedParams; - // } - // - // if (!this.timewindow.allowedAggTypes?.length) { - // delete this.timewindow.allowedAggTypes; - // } if (this.aggregation) { this.timewindow.aggregation = { type: timewindowFormValue.aggregation.type, @@ -551,6 +501,11 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O } private updateTimewindowAdvancedParams() { + this.realtimeDisableCustomInterval = this.timewindow.realtime.disableCustomInterval; + this.realtimeDisableCustomGroupInterval = this.timewindow.realtime.disableCustomGroupInterval; + this.historyDisableCustomInterval = this.timewindow.history.disableCustomInterval; + this.historyDisableCustomGroupInterval = this.timewindow.history.disableCustomGroupInterval; + if (this.timewindow.realtime.advancedParams) { this.realtimeAllowedLastIntervals = this.timewindow.realtime.advancedParams.allowedLastIntervals; this.realtimeAllowedQuickIntervals = this.timewindow.realtime.advancedParams.allowedQuickIntervals; diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts index 9b7bfc1e6e..3b556c8ba9 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/ui-ngx/src/app/shared/models/time/time.models.ts @@ -19,6 +19,7 @@ import { deepClone, isDefined, isDefinedAndNotNull, isNumeric, isUndefined } fro import moment_ from 'moment'; import * as momentTz from 'moment-timezone'; import { IntervalType } from '@shared/models/telemetry/telemetry.models'; +import { FormGroup } from '@angular/forms'; const moment = moment_; @@ -493,6 +494,48 @@ export const timewindowTypeChanged = (newTimewindow: Timewindow, oldTimewindow: return newType !== oldType; }; +export const updateFormValuesOnTimewindowTypeChange = (selectedTab: TimewindowType, + quickIntervalOnly: boolean, timewindowForm: FormGroup, + realtimeDisableCustomInterval: boolean, historyDisableCustomInterval: boolean, + realtimeAllowedLastIntervals?: Array, realtimeAllowedQuickIntervals?: Array, + historyAllowedLastIntervals?: Array, historyAllowedQuickIntervals?: Array) => { + const timewindowFormValue = timewindowForm.getRawValue(); + if (selectedTab === TimewindowType.REALTIME) { + if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED + && !(quickIntervalOnly && timewindowFormValue.history.historyType === HistoryWindowType.LAST_INTERVAL)) { + if (Object.keys(RealtimeWindowType).includes(HistoryWindowType[timewindowFormValue.history.historyType])) { + timewindowForm.get('realtime.realtimeType').patchValue(RealtimeWindowType[HistoryWindowType[timewindowFormValue.history.historyType]]); + } + if (!realtimeDisableCustomInterval || + !realtimeAllowedLastIntervals?.length || realtimeAllowedLastIntervals.includes(timewindowFormValue.history.timewindowMs)) { + timewindowForm.get('realtime.timewindowMs').patchValue(timewindowFormValue.history.timewindowMs); + } + if (realtimeAllowedQuickIntervals?.includes(timewindowFormValue.history.quickInterval) || + (!realtimeAllowedQuickIntervals?.length && timewindowFormValue.history.quickInterval.startsWith('CURRENT'))) { + timewindowForm.get('realtime.quickInterval').patchValue(timewindowFormValue.history.quickInterval); + } + setTimeout(() => timewindowForm.get('realtime.interval').patchValue(timewindowFormValue.history.interval)); + } + } else { + timewindowForm.get('history.historyType').patchValue(HistoryWindowType[RealtimeWindowType[timewindowFormValue.realtime.realtimeType]]); + if (!historyDisableCustomInterval || + !historyAllowedLastIntervals?.length || historyAllowedLastIntervals?.includes(timewindowFormValue.realtime.timewindowMs)) { + timewindowForm.get('history.timewindowMs').patchValue(timewindowFormValue.realtime.timewindowMs); + } + if (!historyAllowedQuickIntervals?.length || historyAllowedQuickIntervals?.includes(timewindowFormValue.realtime.quickInterval)) { + timewindowForm.get('history.quickInterval').patchValue(timewindowFormValue.realtime.quickInterval); + } + setTimeout(() => timewindowForm.get('history.interval').patchValue(timewindowFormValue.realtime.interval)); + } + timewindowForm.patchValue({ + aggregation: { + type: timewindowFormValue.aggregation.type, + limit: timewindowFormValue.aggregation.limit + }, + timezone: timewindowFormValue.timezone + }); +}; + export const getTimezone = (tz: string): moment_.Moment => moment.tz(tz); export const calculateTsOffset = (timezone?: string): number => {