Timewindow: move common for timewindow type change to time models

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) {
+    const realtimeDisableCustomInterval = timewindowFormValue.realtime.disableCustomInterval;
-      if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED
+    const historyDisableCustomInterval = timewindowFormValue.history.disableCustomInterval;
-        && !(this.quickIntervalOnly && timewindowFormValue.history.historyType === HistoryWindowType.LAST_INTERVAL)) {
+    const realtimeAllowedLastIntervals = timewindowFormValue.realtime.advancedParams.allowedLastIntervals;
-        const allowedLastIntervals = timewindowFormValue.realtime.advancedParams.allowedLastIntervals;
+    const realtimeAllowedQuickIntervals = timewindowFormValue.realtime.advancedParams.allowedQuickIntervals;
-        const allowedQuickIntervals = timewindowFormValue.realtime.advancedParams.allowedQuickIntervals;
+    const historyAllowedLastIntervals = timewindowFormValue.history.advancedParams.allowedLastIntervals;
-        if (Object.keys(RealtimeWindowType).includes(HistoryWindowType[timewindowFormValue.history.historyType])) {
+    const historyAllowedQuickIntervals = timewindowFormValue.history.advancedParams.allowedQuickIntervals;
-          this.timewindowForm.get('realtime.realtimeType').patchValue(RealtimeWindowType[HistoryWindowType[timewindowFormValue.history.historyType]]);
+    updateFormValuesOnTimewindowTypeChange(selectedTab, this.quickIntervalOnly, this.timewindowForm,
-        }
+      realtimeDisableCustomInterval, historyDisableCustomInterval,
-        if (!allowedLastIntervals?.length || allowedLastIntervals.includes(timewindowFormValue.history.timewindowMs)) {
+      realtimeAllowedLastIntervals, realtimeAllowedQuickIntervals, historyAllowedLastIntervals, historyAllowedQuickIntervals);
-          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));
-    }
     this.timewindowForm.patchValue({
-      aggregation: {
-        type: timewindowFormValue.aggregation.type,
-        limit: timewindowFormValue.aggregation.limit
-      },
-      timezone: timewindowFormValue.timezone,
       hideAggregation: timewindowFormValue.hideAggregation,
       hideAggInterval: timewindowFormValue.hideAggInterval,
       hideTimezone: timewindowFormValue.hideTimezone

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">
           </tb-timeinterval>
@@ -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">
           </tb-timeinterval>
@@ -154,7 +154,7 @@
             useCalendarIntervals
             subscriptSizing="dynamic"
             appearance="outline"
-            [disabledAdvanced]="timewindow.realtime.disableCustomGroupInterval">
+            [disabledAdvanced]="realtimeDisableCustomGroupInterval">
             <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
           </tb-timeinterval>
         </ng-container>
@@ -165,7 +165,7 @@
             useCalendarIntervals
             subscriptSizing="dynamic"
             appearance="outline"
-            [disabledAdvanced]="timewindow.history.disableCustomGroupInterval">
+            [disabledAdvanced]="historyDisableCustomGroupInterval">
             <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
           </tb-timeinterval>
         </ng-container>

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<Interval>;
   realtimeAllowedQuickIntervals: Array<QuickTimeInterval>;
   historyAllowedLastIntervals: Array<Interval>;
@@ -318,40 +324,9 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O
   }
 
   private onTimewindowTypeChange(selectedTab: TimewindowType) {
-    const timewindowFormValue = this.timewindowForm.getRawValue();
+    updateFormValuesOnTimewindowTypeChange(selectedTab, this.quickIntervalOnly, this.timewindowForm,
-    if (selectedTab === TimewindowType.REALTIME) {
+      this.realtimeDisableCustomInterval, this.historyDisableCustomInterval,
-      if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED
+      this.realtimeAllowedLastIntervals, this.realtimeAllowedQuickIntervals, this.historyAllowedLastIntervals, this.historyAllowedQuickIntervals);
-        && !((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
-    });
   }
 
   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;

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<Interval>, realtimeAllowedQuickIntervals?: Array<QuickTimeInterval>,
+                                                       historyAllowedLastIntervals?: Array<Interval>, historyAllowedQuickIntervals?: Array<QuickTimeInterval>) => {
+  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 => {