UI: adjust hide interval timewindow options

ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts

@@ -199,6 +199,17 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
         this.timewindowForm.get('realtime.hideQuickInterval').enable();
       }
     });
+    this.timewindowForm.get('realtime.hideLastInterval').valueChanges.subscribe((hideLastInterval: boolean) => {
+      if (hideLastInterval && !this.timewindowForm.get('realtime.hideQuickInterval').value) {
+        this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.INTERVAL);
+      }
+    });
+    this.timewindowForm.get('realtime.hideQuickInterval').valueChanges.subscribe((hideQuickInterval: boolean) => {
+      if (hideQuickInterval && !this.timewindowForm.get('realtime.hideLastInterval').value) {
+        this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.LAST_INTERVAL);
+      }
+    });
+
     this.timewindowForm.get('history.hideInterval').valueChanges.subscribe((value: boolean) => {
       if (value) {
         this.timewindowForm.get('history.hideLastInterval').disable();
@@ -210,6 +221,33 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
         this.timewindowForm.get('history.hideFixedInterval').enable();
       }
     });
+    this.timewindowForm.get('history.hideLastInterval').valueChanges.subscribe((hideLastInterval: boolean) => {
+      if (hideLastInterval) {
+        if (!this.timewindowForm.get('history.hideFixedInterval').value) {
+          this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.FIXED);
+        } else if (!this.timewindowForm.get('history.hideQuickInterval').value) {
+          this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.INTERVAL);
+        }
+      }
+    });
+    this.timewindowForm.get('history.hideFixedInterval').valueChanges.subscribe((hideFixedInterval: boolean) => {
+      if (hideFixedInterval) {
+        if (!this.timewindowForm.get('history.hideLastInterval').value) {
+          this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.LAST_INTERVAL);
+        } else if (!this.timewindowForm.get('history.hideQuickInterval').value) {
+          this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.INTERVAL);
+        }
+      }
+    });
+    this.timewindowForm.get('history.hideQuickInterval').valueChanges.subscribe((hideQuickInterval: boolean) => {
+      if (hideQuickInterval) {
+        if (!this.timewindowForm.get('history.hideLastInterval').value) {
+          this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.LAST_INTERVAL);
+        } else if (!this.timewindowForm.get('history.hideFixedInterval').value) {
+          this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.FIXED);
+        }
+      }
+    });
   }
 
   private checkLimit(limit?: number): number {
@@ -234,6 +272,26 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
   onTimewindowTypeChange() {
     this.timewindowForm.markAsDirty();
     const timewindowFormValue = this.timewindowForm.getRawValue();
+    if (this.timewindow.selectedTab === TimewindowType.REALTIME) {
+      if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED) {
+        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 {
+      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,

ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts

@@ -180,6 +180,37 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
     const history = this.timewindow.history;
     const aggregation = this.timewindow.aggregation;
 
+    if (!this.isEdit) {
+      if (realtime.hideLastInterval && !realtime.hideQuickInterval) {
+        realtime.realtimeType = RealtimeWindowType.INTERVAL;
+      }
+      if (realtime.hideQuickInterval && !realtime.hideLastInterval) {
+        realtime.realtimeType = RealtimeWindowType.LAST_INTERVAL;
+      }
+
+      if (history.hideLastInterval) {
+        if (!history.hideFixedInterval) {
+          history.historyType = HistoryWindowType.FIXED;
+        } else if (!history.hideQuickInterval) {
+          history.historyType = HistoryWindowType.INTERVAL;
+        }
+      }
+      if (history.hideFixedInterval) {
+        if (!history.hideLastInterval) {
+          history.historyType = HistoryWindowType.LAST_INTERVAL;
+        } else if (!history.hideQuickInterval) {
+          history.historyType = HistoryWindowType.INTERVAL;
+        }
+      }
+      if (history.hideQuickInterval) {
+        if (!history.hideLastInterval) {
+          history.historyType = HistoryWindowType.LAST_INTERVAL;
+        } else if (!history.hideFixedInterval) {
+          history.historyType = HistoryWindowType.FIXED;
+        }
+      }
+    }
+
     this.timewindowForm = this.fb.group({
       realtime: this.fb.group({
         realtimeType: [{
@@ -448,35 +479,6 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
     }
   }
 
-  // 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();
-  // }
-
-  // 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();
     this.dialog.open<TimewindowConfigDialogComponent, TimewindowConfigDialogData, Timewindow>(