From 7e8ea0775ea8d520ab1db3db527cdf6563e9f9ef Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Mon, 28 Oct 2024 17:43:35 +0200
Subject: [PATCH] Timewindow: display full interval options list for
 customization

---
 .../aggregation-type-select.component.html    |  2 +-
 ...terval-options-config-panel.component.html | 18 +++++--
 ...terval-options-config-panel.component.scss |  1 -
 ...interval-options-config-panel.component.ts | 50 +++++++++++++++++--
 .../timewindow-config-dialog.component.ts     | 45 +++++++++++++----
 .../src/app/shared/models/time/time.models.ts |  8 +++
 .../assets/locale/locale.constant-en_US.json  |  3 +-
 7 files changed, 105 insertions(+), 22 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html
index 5e80fc3237..205e25cdf5 100644
--- a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html
+++ b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-form-field [formGroup]="aggregationTypeFormGroup"
                 [subscriptSizing]="subscriptSizing" [appearance]="appearance"
-                class="mat-block">
+                class="flex flex-1">
   <mat-label *ngIf="displayLabel">{{ label }}</mat-label>
   <mat-select [required]="required" formControlName="aggregationType">
     <mat-option *ngFor="let type of aggregationTypes" [value]="type">
diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
index ce8abdd7e5..afeaf2b2a2 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
@@ -15,22 +15,32 @@
     limitations under the License.
 
 -->
-<form [formGroup]="intervalOptionsConfigForm" class="tb-interval-options-form tb-form-panel no-border">
+<form [formGroup]="intervalOptionsConfigForm" class="tb-interval-options-form tb-form-panel no-border"
+      [style]="aggregation ? {maxWidth: '600px'} : {maxWidth: '350px'}">
   <div class="tb-form-panel-title">{{ 'timewindow.edit-intervals-list' | translate }}</div>
-  <div class="tb-form-hint tb-primary-fill">{{ 'timewindow.edit-intervals-list-hint' | translate }}</div>
+  <div class="tb-form-hint tb-primary-fill">
+    {{ 'timewindow.edit-intervals-list-hint' | translate }} {{ aggregation ? ('timewindow.edit-grouping-intervals-list-hint' | translate) : '' }}
+  </div>
   <div class="tb-form-table no-gap no-padding">
     <div class="tb-form-table-header">
       <div class="tb-form-table-header-cell">{{"timewindow.interval" | translate }}</div>
     </div>
     <div class="tb-form-table-body">
       <mat-selection-list formControlName="allowedIntervals">
-        <mat-list-option *ngFor="let interval of intervals" [value]="interval.value" togglePosition="before">
+        <mat-list-option *ngFor="let interval of allIntervals" [value]="interval.value" togglePosition="before">
           {{ interval.name | translate:interval.translateParams }}
         </mat-list-option>
       </mat-selection-list>
     </div>
   </div>
-  <div class="tb-flex flex-end no-gap">
+  <div class="flex flex-row gap-2 items-center">
+    <button type="button"
+            mat-button
+            color="primary"
+            (click)="reset()">
+      {{ 'action.reset' | translate }}
+    </button>
+    <span class="flex-1"></span>
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
index e6ffca11ee..a3433a9013 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
@@ -16,7 +16,6 @@
 :host {
   .tb-interval-options-form {
     height: 100%;
-    max-width: 600px;
 
     .tb-form-table {
       overflow: hidden;
diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts
index 53de09e28f..88e8303480 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts
@@ -15,9 +15,18 @@
 ///
 
 import { Component, Input, OnInit } from '@angular/core';
-import { HistoryWindowType, RealtimeWindowType, TimewindowType } from '@shared/models/time/time.models';
+import {
+  HistoryWindowType,
+  QuickTimeInterval,
+  QuickTimeIntervalTranslationMap,
+  RealtimeWindowType,
+  TimewindowIntervalOption,
+  TimewindowType
+} from '@shared/models/time/time.models';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { TbPopoverComponent } from '@shared/components/popover.component';
+import { TimeService } from '@core/services/time.service';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-interval-options-config-panel',
@@ -26,6 +35,10 @@ import { TbPopoverComponent } from '@shared/components/popover.component';
 })
 export class IntervalOptionsConfigPanelComponent implements OnInit {
 
+  @Input()
+  @coerceBoolean()
+  aggregation = false;
+
   @Input()
   allowedIntervals: Array<any>;
 
@@ -43,11 +56,25 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
 
   intervalOptionsConfigForm: FormGroup;
 
-  intervals = [];
+  allIntervals: Array<TimewindowIntervalOption>;
+
+  private timeIntervalTranslationMap = QuickTimeIntervalTranslationMap;
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private fb: FormBuilder,
+              private timeService: TimeService) {}
 
   ngOnInit(): void {
+    if (this.intervalType === RealtimeWindowType.LAST_INTERVAL ||
+        this.intervalType === HistoryWindowType.LAST_INTERVAL) {
+      this.allIntervals = this.timeService.getIntervals(undefined, undefined, false);
+    } else {
+      const quickIntervals = this.getQuickIntervals();
+      this.allIntervals = quickIntervals.map(interval => ({
+        name: this.timeIntervalTranslationMap.get(interval),
+        value: interval
+      }));
+    }
+
     this.intervalOptionsConfigForm = this.fb.group({
       allowedIntervals: [this.allowedIntervals]
     });
@@ -55,7 +82,9 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
 
   update() {
     if (this.onClose) {
-      this.onClose([]);
+      const allowedIntervals = this.intervalOptionsConfigForm.get('allowedIntervals').value;
+      // if full list selected returns empty for optimization
+      this.onClose(allowedIntervals?.length < this.allIntervals.length ? allowedIntervals : []);
     }
   }
 
@@ -65,4 +94,17 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
     }
   }
 
+  reset() {
+    this.intervalOptionsConfigForm.reset();
+    this.intervalOptionsConfigForm.markAsDirty();
+  }
+
+  private getQuickIntervals() {
+    const allQuickIntervals = Object.values(QuickTimeInterval);
+    if (this.timewindowType === TimewindowType.REALTIME) {
+      return allQuickIntervals.filter(interval => interval.startsWith('CURRENT_'));
+    }
+    return allQuickIntervals;
+  }
+
 }
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 e85e5dbaa0..5e67b403d5 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,6 +20,8 @@ import {
   DAY,
   HistoryWindowType,
   historyWindowTypeTranslations,
+  Interval,
+  QuickTimeInterval,
   quickTimeIntervalPeriod,
   RealtimeWindowType,
   realtimeWindowTypeTranslations,
@@ -148,6 +150,10 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
         timewindowMs: [ isDefined(realtime?.timewindowMs) ? this.timewindow.realtime.timewindowMs : null ],
         interval: [ isDefined(realtime?.interval) ? this.timewindow.realtime.interval : null ],
         quickInterval: [ isDefined(realtime?.quickInterval) ? this.timewindow.realtime.quickInterval : null ],
+        allowedLastIntervals: [ isDefinedAndNotNull(this.timewindow.realtime?.allowedLastIntervals)
+          ? this.timewindow.realtime?.allowedLastIntervals : null ],
+        allowedQuickIntervals: [ isDefinedAndNotNull(this.timewindow.realtime?.allowedQuickIntervals)
+          ? this.timewindow.realtime?.allowedQuickIntervals : null ],
         disableCustomInterval: [ isDefinedAndNotNull(this.timewindow.realtime?.disableCustomInterval)
           ? this.timewindow.realtime?.disableCustomInterval : false ],
         disableCustomGroupInterval: [ isDefinedAndNotNull(this.timewindow.realtime?.disableCustomGroupInterval)
@@ -171,6 +177,10 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
         interval: [ isDefined(history?.interval) ? this.timewindow.history.interval : null ],
         fixedTimewindow: [ isDefined(history?.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : null ],
         quickInterval: [ isDefined(history?.quickInterval) ? this.timewindow.history.quickInterval : null ],
+        allowedLastIntervals: [ isDefinedAndNotNull(this.timewindow.history?.allowedLastIntervals)
+          ? this.timewindow.history?.allowedLastIntervals : null ],
+        allowedQuickIntervals: [ isDefinedAndNotNull(this.timewindow.realtime?.allowedQuickIntervals)
+          ? this.timewindow.realtime?.allowedQuickIntervals : null ],
         disableCustomInterval: [ isDefinedAndNotNull(this.timewindow.history?.disableCustomInterval)
           ? this.timewindow.history?.disableCustomInterval : false ],
         disableCustomGroupInterval: [ isDefinedAndNotNull(this.timewindow.history?.disableCustomGroupInterval)
@@ -450,7 +460,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
             }
           }
         },
-        {maxHeight: '90vh', height: '100%'},
+        {maxHeight: '500px', height: '100%'},
         {}, {}, true, () => {}, {padding: 0});
       aggregationConfigPopover.tbComponentRef.instance.popoverComponent = aggregationConfigPopover;
     }
@@ -458,26 +468,38 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
   }
 
   configureRealtimeLastIntervalOptions($event: Event) {
-    const resFn = (res) => {};
-    this.openIntervalOptionsConfig($event, [], resFn, RealtimeWindowType.LAST_INTERVAL);
+    const resFn = (res) => {
+      this.timewindowForm.get('realtime.allowedLastIntervals').patchValue(res);
+    };
+    this.openIntervalOptionsConfig($event, this.timewindowForm.get('realtime.allowedLastIntervals').value,
+      resFn, RealtimeWindowType.LAST_INTERVAL);
   }
 
   configureRealtimeQuickIntervalOptions($event: Event) {
-    const resFn = (res) => {};
-    this.openIntervalOptionsConfig($event, [], resFn, RealtimeWindowType.INTERVAL, TimewindowType.REALTIME);
+    const resFn = (res) => {
+      this.timewindowForm.get('realtime.allowedQuickIntervals').patchValue(res);
+    };
+    this.openIntervalOptionsConfig($event, this.timewindowForm.get('realtime.allowedQuickIntervals').value,
+      resFn, RealtimeWindowType.INTERVAL, TimewindowType.REALTIME);
   }
 
   configureHistoryLastIntervalOptions($event: Event) {
-    const resFn = (res) => {};
-    this.openIntervalOptionsConfig($event, [], resFn, HistoryWindowType.LAST_INTERVAL);
+    const resFn = (res) => {
+      this.timewindowForm.get('history.allowedLastIntervals').patchValue(res);
+    };
+    this.openIntervalOptionsConfig($event, this.timewindowForm.get('history.allowedLastIntervals').value,
+      resFn, HistoryWindowType.LAST_INTERVAL);
   }
 
   configureHistoryQuickIntervalOptions($event: Event) {
-    const resFn = (res) => {};
-    this.openIntervalOptionsConfig($event, [], resFn, HistoryWindowType.INTERVAL, TimewindowType.HISTORY);
+    const resFn = (res) => {
+      this.timewindowForm.get('history.allowedQuickIntervals').patchValue(res);
+    };
+    this.openIntervalOptionsConfig($event, this.timewindowForm.get('history.allowedQuickIntervals').value,
+      resFn, HistoryWindowType.INTERVAL, TimewindowType.HISTORY);
   }
 
-  private openIntervalOptionsConfig($event: Event, allowedIntervals: Array<any>, resFn: (res) => void,
+  private openIntervalOptionsConfig($event: Event, allowedIntervals: Array<Interval | QuickTimeInterval>, resFn: (res) => void,
                                     intervalType: RealtimeWindowType | HistoryWindowType, timewindowType?: TimewindowType) {
     if ($event) {
       $event.stopPropagation();
@@ -489,6 +511,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
       const intervalsConfigPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, IntervalOptionsConfigPanelComponent, ['left', 'leftTop', 'leftBottom'], true, null,
         {
+          aggregation: this.aggregation,
           allowedIntervals: deepClone(allowedIntervals),
           intervalType: intervalType,
           timewindowType: timewindowType,
@@ -497,7 +520,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
             resFn(result);
           }
         },
-        {maxHeight: '90vh', height: '100%'},
+        {maxHeight: '500px', height: '100%'},
         {}, {}, true, () => {}, {padding: 0});
       intervalsConfigPopover.tbComponentRef.instance.popoverComponent = intervalsConfigPopover;
     }
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 83cb5a6403..7290abbc03 100644
--- a/ui-ngx/src/app/shared/models/time/time.models.ts
+++ b/ui-ngx/src/app/shared/models/time/time.models.ts
@@ -88,6 +88,8 @@ export interface IntervalWindow {
   interval?: Interval;
   timewindowMs?: number;
   quickInterval?: QuickTimeInterval;
+  allowedLastIntervals? : Array<Interval>;
+  allowedQuickIntervals? : Array<QuickTimeInterval>;
   disableCustomInterval?: boolean;
   disableCustomGroupInterval?: boolean;
   hideInterval?: boolean;
@@ -176,6 +178,12 @@ export interface WidgetTimewindow {
   stDiff?: number;
 }
 
+export interface TimewindowIntervalOption {
+  name: string;
+  translateParams?: {[key: string]: any};
+  value: Interval | QuickTimeInterval;
+}
+
 export enum QuickTimeInterval {
   YESTERDAY = 'YESTERDAY',
   DAY_BEFORE_YESTERDAY = 'DAY_BEFORE_YESTERDAY',
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index e699f75c11..9a31a0bec9 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4547,7 +4547,8 @@
         "edit-aggregation-functions-list-hint": "List of available options can be specified.",
         "allowed-aggregation-functions": "Allowed aggregation functions",
         "edit-intervals-list": "Edit intervals list",
-        "edit-intervals-list-hint": "List of available interval options can be specified. It is possible to configure the grouping intervals list and default grouping interval."
+        "edit-intervals-list-hint": "List of available interval options can be specified.",
+        "edit-grouping-intervals-list-hint": "It is possible to configure the grouping intervals list and default grouping interval."
     },
     "tooltip": {
         "trigger": "Trigger",