Timewindow: apply list of allowed grouping interval options

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html

@@ -26,7 +26,7 @@
       <div class="tb-form-table-header-cell tb-interval">{{"timewindow.interval" | translate }}</div>
       <ng-container *ngIf="aggregation">
         <div class="tb-form-table-header-cell tb-agg-interval">{{"timewindow.allowed-agg-intervals" | translate }}</div>
-        <div class="tb-form-table-header-cell tb-agg-interval">{{"timewindow.preferred-agg-interval" | translate }}</div>
+        <div class="tb-form-table-header-cell tb-agg-interval">{{"timewindow.default-agg-interval" | translate }}</div>
       </ng-container>
     </div>
     <div class="tb-form-table-body" formArrayName="intervals">
@@ -54,7 +54,7 @@
             <div class="tb-form-table-row-cell tb-agg-interval">
               <tb-timeinterval
                 class="tb-inline-field"
-                formControlName="preferredAggInterval"
+                formControlName="defaultAggInterval"
                 [min]="minAggInterval(interval.get('value').value)"
                 [max]="maxAggInterval(interval.get('value').value)"
                 useCalendarIntervals

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss

@@ -28,10 +28,11 @@
     .tb-form-table-header-cell, .tb-form-table-row-cell {
       &.tb-interval {
         flex: 1 1 30%;
-        width: 30%;
       }
       &.tb-agg-interval {
         flex: 1 1 35%;
+        width: 35%;
+        max-width: 35%;
       }
     }
 

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts

@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, DestroyRef, inject, Input, OnInit } from '@angular/core';
 import {
   HistoryWindowType,
   QuickTimeInterval, quickTimeIntervalPeriod,
   QuickTimeIntervalTranslationMap,
   RealtimeWindowType,
-  TimewindowAllowedAggIntervalOption,
+  TimewindowAggIntervalOptions,
-  TimewindowAllowedAggIntervalsConfig,
+  TimewindowAggIntervalsConfig,
   TimewindowInterval,
   TimewindowIntervalOption,
   TimewindowType
@@ -31,6 +31,12 @@ import { TbPopoverComponent } from '@shared/components/popover.component';
 import { TimeService } from '@core/services/time.service';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+export interface IntervalOptionsConfigPanelData {
+  allowedIntervals: Array<TimewindowInterval>;
+  aggIntervalsConfig: TimewindowAggIntervalsConfig
+}
 
 @Component({
   selector: 'tb-interval-options-config-panel',
@@ -47,7 +53,7 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
   allowedIntervals: Array<TimewindowInterval>;
 
   @Input()
-  allowedAggIntervals: TimewindowAllowedAggIntervalsConfig;
+  aggIntervalsConfig: TimewindowAggIntervalsConfig;
 
   @Input()
   intervalType: RealtimeWindowType | HistoryWindowType;
@@ -56,7 +62,7 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
   timewindowType: TimewindowType;
 
   @Input()
-  onClose: (result: Array<any> | null) => void;
+  onClose: (result: IntervalOptionsConfigPanelData | null) => void;
 
   @Input()
   popoverComponent: TbPopoverComponent;
@@ -68,6 +74,8 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
 
   private timeIntervalTranslationMap = QuickTimeIntervalTranslationMap;
 
+  private destroyRef = inject(DestroyRef);
+
   constructor(private fb: FormBuilder,
               private timeService: TimeService,
               private translate: TranslateService) {}
@@ -86,22 +94,36 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
     }
 
     this.intervalOptionsConfigForm = this.fb.group({
-      allowedIntervals: [this.allowedIntervals?.length ? this.allowedIntervals : this.allIntervalValues],
       intervals: this.fb.array([])
     });
 
     const intervalControls: Array<AbstractControl> = [];
     for (const interval of this.allIntervals) {
-      const intervalConfig: TimewindowAllowedAggIntervalOption = this.allowedAggIntervals?.hasOwnProperty(interval.value)
+      const intervalConfig: TimewindowAggIntervalOptions = this.aggIntervalsConfig?.hasOwnProperty(interval.value)
         ? this.allIntervalValues[interval.value]
         : null;
-      intervalControls.push(this.fb.group({
+      const intervalEnabled = this.allowedIntervals?.length ? this.allowedIntervals.includes(interval.value) : true;
+      const intervalControl = this.fb.group({
         name: [this.translate.instant(interval.name, interval.translateParams)],
         value: [interval.value],
-        enabled: [this.allowedIntervals?.length ? this.allowedIntervals.includes(interval.value) : true],
+        enabled: [intervalEnabled],
-        aggIntervals: [intervalConfig ? intervalConfig.aggIntervals : []],
+        aggIntervals: [{value: intervalConfig ? intervalConfig.aggIntervals : [], disabled: !(intervalEnabled && this.aggregation)}],
-        preferredAggInterval: [intervalConfig ? intervalConfig.preferredAggInterval : null]
+        defaultAggInterval: [{value: intervalConfig ? intervalConfig.defaultAggInterval : null, disabled: !(intervalEnabled && this.aggregation)}],
-      }));
+      });
+      if (this.aggregation) {
+        intervalControl.get('enabled').valueChanges.pipe(
+          takeUntilDestroyed(this.destroyRef)
+        ).subscribe((intervalEnabled) => {
+          if (intervalEnabled) {
+            intervalControl.get('aggIntervals').enable({emitEvent: false});
+            intervalControl.get('defaultAggInterval').enable({emitEvent: false});
+          } else {
+            intervalControl.get('aggIntervals').disable({emitEvent: false});
+            intervalControl.get('defaultAggInterval').disable({emitEvent: false});
+          }
+        });
+      }
+      intervalControls.push(intervalControl);
     }
     this.intervalOptionsConfigForm.setControl('intervals', this.fb.array(intervalControls), {emitEvent: false});
   }
@@ -132,9 +154,30 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
 
   update() {
     if (this.onClose) {
-      const allowedIntervals = this.intervalOptionsConfigForm.get('allowedIntervals').value;
+      const allowedIntervals: Array<TimewindowInterval> = [];
+      const aggIntervalsConfig: TimewindowAggIntervalsConfig = {};
+      const intervalOptionsConfig = this.intervalOptionsConfigForm.get('intervals').value;
+      for (const interval of intervalOptionsConfig) {
+        if (interval.enabled) {
+          allowedIntervals.push(interval.value);
+          if (this.aggregation && (interval.aggIntervals.length || interval.defaultAggInterval)) {
+            const intervalParams: TimewindowAggIntervalOptions = {};
+            if (interval.aggIntervals.length) {
+              intervalParams.aggIntervals = interval.aggIntervals;
+            }
+            if (interval.defaultAggInterval) {
+              intervalParams.defaultAggInterval = interval.defaultAggInterval;
+            }
+            aggIntervalsConfig[interval.value] = intervalParams;
+          }
+        }
+      }
+      console.log(aggIntervalsConfig);
+      this.onClose({
         // if full list selected returns empty for optimization
-      this.onClose(allowedIntervals?.length < this.allIntervals.length ? allowedIntervals : []);
+        allowedIntervals: allowedIntervals?.length < this.allIntervals.length ? allowedIntervals : [],
+        aggIntervalsConfig
+      });
     }
   }
 
@@ -145,7 +188,14 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
   }
 
   reset() {
-    this.intervalOptionsConfigForm.reset();
+    const intervalControls = this.intervalsFormArray.controls;
+    for (const interval of intervalControls) {
+      interval.patchValue({
+        enabled: true,
+        aggIntervals: [],
+        defaultAggInterval: null,
+      });
+    }
     this.intervalOptionsConfigForm.markAsDirty();
   }
 

ui-ngx/src/app/shared/components/time/time-intervals-list.component.html

@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<section [formGroup]="timeintervalFormGroup">
+<section class="flex flex-1 flex-row" [formGroup]="timeintervalFormGroup">
   <mat-form-field class="flex flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
     <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
     <mat-select formControlName="intervals" multiple>
-      <mat-option *ngFor="let interval of intervals" [value]="interval.value">
+      <mat-option *ngFor="let interval of allIntervals" [value]="interval.value">
         {{ interval.name | translate:interval.translateParams }}
       </mat-option>
     </mat-select>

ui-ngx/src/app/shared/components/time/time-intervals-list.component.ts

@@ -67,7 +67,8 @@ export class TimeIntervalsListComponent implements OnInit, ControlValueAccessor
   @Input()
   appearance: MatFormFieldAppearance = 'fill';
 
-  intervals: Array<TimeInterval>;
+  allIntervals: Array<TimeInterval>;
+  allIntervalValues: Array<Interval>;
 
   timeintervalFormGroup: FormGroup;
 
@@ -119,12 +120,13 @@ export class TimeIntervalsListComponent implements OnInit, ControlValueAccessor
   }
 
   private updateIntervalsList() {
-    this.intervals = this.timeService.getIntervals(this.min, this.max, this.useCalendarIntervals);
+    this.allIntervals = this.timeService.getIntervals(this.min, this.max, this.useCalendarIntervals);
+    this.allIntervalValues = this.allIntervals.map(interval => interval.value);
   }
 
   private setIntervals(intervals: Array<Interval>) {
     this.timeintervalFormGroup.get('intervals').patchValue(
-      (this.setAllIfEmpty && !intervals?.length) ? this.intervals : intervals,
+      (this.setAllIfEmpty && !intervals?.length) ? this.allIntervalValues : intervals,
       {emitEvent: false});
   }
 
@@ -135,7 +137,7 @@ export class TimeIntervalsListComponent implements OnInit, ControlValueAccessor
     let value: Array<Interval>;
     const intervals: Array<Interval> = this.timeintervalFormGroup.get('intervals').value;
 
-    if (!this.returnEmptyIfAllSet || intervals.length < this.intervals.length) {
+    if (!this.returnEmptyIfAllSet || intervals.length < this.allIntervals.length) {
       value = intervals;
     } else {
       value = [];

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

@@ -240,7 +240,8 @@
               </ng-container>
               <tb-timeinterval
                 formControlName="interval"
-                [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
+                [min]="minRealtimeAggInterval" [max]="maxRealtimeAggInterval"
+                [allowedIntervals]="realtimeAllowedAggIntervals"
                 useCalendarIntervals
                 subscriptSizing="dynamic"
                 appearance="outline"
@@ -261,7 +262,8 @@
             <ng-container formGroupName="history">
               <tb-timeinterval
                 formControlName="interval"
-                [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
+                [min]="minHistoryAggInterval" [max]="maxHistoryAggInterval"
+                [allowedIntervals]="historyAllowedAggIntervals"
                 useCalendarIntervals
                 subscriptSizing="dynamic"
                 appearance="outline"

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

@@ -17,12 +17,13 @@
 import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
 import {
   AggregationType,
-  DAY,
+  currentHistoryTimewindow,
+  currentRealtimeTimewindow,
+  historyAllowedAggIntervals,
   HistoryWindowType,
   historyWindowTypeTranslations,
   Interval,
-  QuickTimeInterval,
+  realtimeAllowedAggIntervals,
-  quickTimeIntervalPeriod,
   RealtimeWindowType,
   realtimeWindowTypeTranslations,
   Timewindow,
@@ -34,7 +35,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { TimeService } from '@core/services/time.service';
-import { deepClone, isDefined, isDefinedAndNotNull, mergeDeep } from '@core/utils';
+import { deepClone, isDefined, isDefinedAndNotNull, isObject, mergeDeep } from '@core/utils';
 import { ToggleHeaderOption } from '@shared/components/toggle-header.component';
 import { TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -44,7 +45,10 @@ import { TbPopoverService } from '@shared/components/popover.service';
 import {
   AggregationOptionsConfigPanelComponent
 } from '@shared/components/time/aggregation/aggregation-options-config-panel.component';
-import { IntervalOptionsConfigPanelComponent } from '@shared/components/time/interval-options-config-panel.component';
+import {
+  IntervalOptionsConfigPanelComponent,
+  IntervalOptionsConfigPanelData
+} from '@shared/components/time/interval-options-config-panel.component';
 
 export interface TimewindowConfigDialogData {
   quickIntervalOnly: boolean;
@@ -171,7 +175,11 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
           allowedLastIntervals: [ isDefinedAndNotNull(this.timewindow.realtime?.advancedParams?.allowedLastIntervals)
             ? this.timewindow.realtime.advancedParams.allowedLastIntervals : null ],
           allowedQuickIntervals: [ isDefinedAndNotNull(this.timewindow.realtime?.advancedParams?.allowedQuickIntervals)
-            ? this.timewindow.realtime.advancedParams.allowedQuickIntervals : null ]
+            ? this.timewindow.realtime.advancedParams.allowedQuickIntervals : null ],
+          lastAggIntervalsConfig: [ isDefinedAndNotNull(this.timewindow.realtime?.advancedParams?.lastAggIntervalsConfig)
+            ? this.timewindow.realtime.advancedParams.lastAggIntervalsConfig : null ],
+          quickAggIntervalsConfig: [ isDefinedAndNotNull(this.timewindow.realtime?.advancedParams?.quickAggIntervalsConfig)
+            ? this.timewindow.realtime.advancedParams.quickAggIntervalsConfig : null ]
         })
       }),
       history: this.fb.group({
@@ -205,7 +213,11 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
           allowedLastIntervals: [ isDefinedAndNotNull(this.timewindow.history?.advancedParams?.allowedLastIntervals)
             ? this.timewindow.history.advancedParams.allowedLastIntervals : null ],
           allowedQuickIntervals: [ isDefinedAndNotNull(this.timewindow.history?.advancedParams?.allowedQuickIntervals)
-            ? this.timewindow.history.advancedParams.allowedQuickIntervals : null ]
+            ? this.timewindow.history.advancedParams.allowedQuickIntervals : null ],
+          lastAggIntervalsConfig: [ isDefinedAndNotNull(this.timewindow.history?.advancedParams?.lastAggIntervalsConfig)
+            ? this.timewindow.history.advancedParams.lastAggIntervalsConfig : null ],
+          quickAggIntervalsConfig: [ isDefinedAndNotNull(this.timewindow.history?.advancedParams?.quickAggIntervalsConfig)
+            ? this.timewindow.history.advancedParams.quickAggIntervalsConfig : null ]
         })
       }),
       aggregation: this.fb.group({
@@ -381,6 +393,18 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
     } else {
       delete this.timewindow.realtime.advancedParams.allowedQuickIntervals;
     }
+    if (isObject(timewindowFormValue.realtime.advancedParams.lastAggIntervalsConfig) &&
+      Object.keys(timewindowFormValue.realtime.advancedParams.lastAggIntervalsConfig).length) {
+      this.timewindow.realtime.advancedParams.lastAggIntervalsConfig = timewindowFormValue.realtime.advancedParams.lastAggIntervalsConfig;
+    } else {
+      delete this.timewindow.realtime.advancedParams.lastAggIntervalsConfig;
+    }
+    if (isObject(timewindowFormValue.realtime.advancedParams.quickAggIntervalsConfig) &&
+      Object.keys(timewindowFormValue.realtime.advancedParams.quickAggIntervalsConfig).length) {
+      this.timewindow.realtime.advancedParams.quickAggIntervalsConfig = timewindowFormValue.realtime.advancedParams.quickAggIntervalsConfig;
+    } else {
+      delete this.timewindow.realtime.advancedParams.quickAggIntervalsConfig;
+    }
 
     if (timewindowFormValue.history.advancedParams.allowedLastIntervals?.length) {
       this.timewindow.history.advancedParams.allowedLastIntervals = timewindowFormValue.history.advancedParams.allowedLastIntervals;
@@ -392,6 +416,18 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
     } else {
       delete this.timewindow.history.advancedParams.allowedQuickIntervals;
     }
+    if (isObject(timewindowFormValue.history.advancedParams.lastAggIntervalsConfig) &&
+      Object.keys(timewindowFormValue.history.advancedParams.lastAggIntervalsConfig).length) {
+      this.timewindow.history.advancedParams.lastAggIntervalsConfig = timewindowFormValue.history.advancedParams.lastAggIntervalsConfig;
+    } else {
+      delete this.timewindow.history.advancedParams.lastAggIntervalsConfig;
+    }
+    if (isObject(timewindowFormValue.history.advancedParams.quickAggIntervalsConfig) &&
+      Object.keys(timewindowFormValue.history.advancedParams.quickAggIntervalsConfig).length) {
+      this.timewindow.history.advancedParams.quickAggIntervalsConfig = timewindowFormValue.history.advancedParams.quickAggIntervalsConfig;
+    } else {
+      delete this.timewindow.history.advancedParams.quickAggIntervalsConfig;
+    }
 
     if (!Object.keys(this.timewindow.realtime.advancedParams).length) {
       delete this.timewindow.realtime.advancedParams;
@@ -429,46 +465,38 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
     this.dialogRef.close();
   }
 
-  minRealtimeAggInterval() {
+  get minRealtimeAggInterval() {
     return this.timeService.minIntervalLimit(this.currentRealtimeTimewindow());
   }
 
-  maxRealtimeAggInterval() {
+  get maxRealtimeAggInterval() {
     return this.timeService.maxIntervalLimit(this.currentRealtimeTimewindow());
   }
 
-  currentRealtimeTimewindow(): number {
+  private currentRealtimeTimewindow(): number {
-    const timeWindowFormValue = this.timewindowForm.getRawValue();
+    return currentRealtimeTimewindow(this.timewindowForm.getRawValue());
-    switch (timeWindowFormValue.realtime.realtimeType) {
-      case RealtimeWindowType.LAST_INTERVAL:
-        return timeWindowFormValue.realtime.timewindowMs;
-      case RealtimeWindowType.INTERVAL:
-        return quickTimeIntervalPeriod(timeWindowFormValue.realtime.quickInterval);
-      default:
-        return DAY;
-    }
   }
 
-  minHistoryAggInterval() {
+  get minHistoryAggInterval() {
     return this.timeService.minIntervalLimit(this.currentHistoryTimewindow());
   }
 
-  maxHistoryAggInterval() {
+  get maxHistoryAggInterval() {
     return this.timeService.maxIntervalLimit(this.currentHistoryTimewindow());
   }
 
-  currentHistoryTimewindow() {
+  private currentHistoryTimewindow(): number {
-    const timewindowFormValue = this.timewindowForm.getRawValue();
+    return currentHistoryTimewindow(this.timewindowForm.getRawValue());
-    if (timewindowFormValue.history.historyType === HistoryWindowType.LAST_INTERVAL) {
-      return timewindowFormValue.history.timewindowMs;
-    } else if (timewindowFormValue.history.historyType === HistoryWindowType.INTERVAL) {
-      return quickTimeIntervalPeriod(timewindowFormValue.history.quickInterval);
-    } else if (timewindowFormValue.history.fixedTimewindow) {
-      return timewindowFormValue.history.fixedTimewindow.endTimeMs -
-        timewindowFormValue.history.fixedTimewindow.startTimeMs;
-    } else {
-      return DAY;
   }
+
+  get realtimeAllowedAggIntervals(): Array<Interval> {
+    const timewindowFormValue = this.timewindowForm.getRawValue();
+    return realtimeAllowedAggIntervals(timewindowFormValue, timewindowFormValue.realtime.advancedParams);
+  }
+
+  get historyAllowedAggIntervals(): Array<Interval> {
+    const timewindowFormValue = this.timewindowForm.getRawValue();
+    return historyAllowedAggIntervals(timewindowFormValue, timewindowFormValue.history.advancedParams);
   }
 
   openAggregationOptionsConfig($event: Event) {
@@ -499,38 +527,32 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
   }
 
   configureRealtimeLastIntervalOptions($event: Event) {
-    const resFn = (res) => {
+    this.openIntervalOptionsConfig($event,
-      this.timewindowForm.get('realtime.advancedParams.allowedLastIntervals').patchValue(res);
+      'realtime.advancedParams.allowedLastIntervals', 'realtime.advancedParams.lastAggIntervalsConfig',
-    };
+      RealtimeWindowType.LAST_INTERVAL);
-    this.openIntervalOptionsConfig($event, this.timewindowForm.get('realtime.advancedParams.allowedLastIntervals').value,
-      resFn, RealtimeWindowType.LAST_INTERVAL);
   }
 
   configureRealtimeQuickIntervalOptions($event: Event) {
-    const resFn = (res) => {
+    this.openIntervalOptionsConfig($event,
-      this.timewindowForm.get('realtime.advancedParams.allowedQuickIntervals').patchValue(res);
+      'realtime.advancedParams.allowedQuickIntervals', 'realtime.advancedParams.quickAggIntervalsConfig',
-    };
+      RealtimeWindowType.INTERVAL, TimewindowType.REALTIME);
-    this.openIntervalOptionsConfig($event, this.timewindowForm.get('realtime.advancedParams.allowedQuickIntervals').value,
-      resFn, RealtimeWindowType.INTERVAL, TimewindowType.REALTIME);
   }
 
   configureHistoryLastIntervalOptions($event: Event) {
-    const resFn = (res) => {
+    this.openIntervalOptionsConfig($event,
-      this.timewindowForm.get('history.advancedParams.allowedLastIntervals').patchValue(res);
+      'history.advancedParams.allowedLastIntervals', 'history.advancedParams.lastAggIntervalsConfig',
-    };
+      HistoryWindowType.LAST_INTERVAL);
-    this.openIntervalOptionsConfig($event, this.timewindowForm.get('history.advancedParams.allowedLastIntervals').value,
-      resFn, HistoryWindowType.LAST_INTERVAL);
   }
 
   configureHistoryQuickIntervalOptions($event: Event) {
-    const resFn = (res) => {
+    this.openIntervalOptionsConfig($event,
-      this.timewindowForm.get('history.advancedParams.allowedQuickIntervals').patchValue(res);
+      'history.advancedParams.allowedQuickIntervals', 'history.advancedParams.quickAggIntervalsConfig',
-    };
+      HistoryWindowType.INTERVAL, TimewindowType.HISTORY);
-    this.openIntervalOptionsConfig($event, this.timewindowForm.get('history.advancedParams.allowedQuickIntervals').value,
-      resFn, HistoryWindowType.INTERVAL, TimewindowType.HISTORY);
   }
 
-  private openIntervalOptionsConfig($event: Event, allowedIntervals: Array<Interval | QuickTimeInterval>, resFn: (res) => void,
+  private openIntervalOptionsConfig($event: Event,
+                                    allowedIntervalsControlName: string,
+                                    aggIntervalsConfigControlName: string,
                                     intervalType: RealtimeWindowType | HistoryWindowType, timewindowType?: TimewindowType) {
     if ($event) {
       $event.stopPropagation();
@@ -543,12 +565,16 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
         this.viewContainerRef, IntervalOptionsConfigPanelComponent, ['left', 'leftTop', 'leftBottom'], true, null,
         {
           aggregation: this.aggregation,
-          allowedIntervals: deepClone(allowedIntervals),
+          allowedIntervals: deepClone(this.timewindowForm.get(allowedIntervalsControlName).value),
+          aggIntervalsConfig: deepClone(this.timewindowForm.get(aggIntervalsConfigControlName).value),
           intervalType: intervalType,
           timewindowType: timewindowType,
-          onClose: (result: Array<any> | null) => {
+          onClose: (result: IntervalOptionsConfigPanelData | null) => {
             intervalsConfigPopover.hide();
-            resFn(result);
+            if (result) {
+              this.timewindowForm.get(allowedIntervalsControlName).patchValue(result.allowedIntervals);
+              this.timewindowForm.get(aggIntervalsConfigControlName).patchValue(result.aggIntervalsConfig);
+            }
           }
         },
         {maxHeight: '500px', height: '100%'},

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

@@ -140,7 +140,7 @@
                  *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE && (isEdit || !timewindow.hideAggInterval)">
           <div>{{ 'aggregation.limit' | translate }}</div>
           <tb-datapoints-limit formControlName="limit"
-                               [required]="timewindowForm.get('aggregation.type').value === aggregationTypes.MIN">
+                               [required]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
           </tb-datapoints-limit>
         </section>
       </ng-container>
@@ -150,7 +150,8 @@
         <ng-container formGroupName="realtime" *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
           <tb-timeinterval
             formControlName="interval"
-            [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
+            [min]="minRealtimeAggInterval" [max]="maxRealtimeAggInterval"
+            [allowedIntervals]="realtimeAllowedAggIntervals"
             useCalendarIntervals
             subscriptSizing="dynamic"
             appearance="outline"
@@ -161,7 +162,8 @@
         <ng-container formGroupName="history" *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
           <tb-timeinterval
             formControlName="interval"
-            [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
+            [min]="minHistoryAggInterval" [max]="maxHistoryAggInterval"
+            [allowedIntervals]="historyAllowedAggIntervals"
             useCalendarIntervals
             subscriptSizing="dynamic"
             appearance="outline"

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

@@ -17,15 +17,16 @@
 import { Component, Inject, InjectionToken, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import {
   AggregationType,
-  DAY,
+  currentHistoryTimewindow,
+  currentRealtimeTimewindow, historyAllowedAggIntervals,
   HistoryWindowType,
   historyWindowTypeTranslations,
   Interval,
-  QuickTimeInterval,
+  QuickTimeInterval, realtimeAllowedAggIntervals,
-  quickTimeIntervalPeriod,
   RealtimeWindowType,
   realtimeWindowTypeTranslations,
   Timewindow,
+  TimewindowAdvancedParams,
   TimewindowType,
   updateFormValuesOnTimewindowTypeChange
 } from '@shared/models/time/time.models';
@@ -111,8 +112,10 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O
   historyDisableCustomInterval: boolean;
   historyDisableCustomGroupInterval: boolean;
 
+  realtimeAdvancedParams: TimewindowAdvancedParams;
   realtimeAllowedLastIntervals: Array<Interval>;
   realtimeAllowedQuickIntervals: Array<QuickTimeInterval>;
+  historyAdvancedParams: TimewindowAdvancedParams;
   historyAllowedLastIntervals: Array<Interval>;
   historyAllowedQuickIntervals: Array<QuickTimeInterval>;
   allowedAggTypes: Array<AggregationType>;
@@ -436,46 +439,36 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O
     this.overlayRef.dispose();
   }
 
-  minRealtimeAggInterval() {
+  get minRealtimeAggInterval() {
     return this.timeService.minIntervalLimit(this.currentRealtimeTimewindow());
   }
 
-  maxRealtimeAggInterval() {
+  get maxRealtimeAggInterval() {
     return this.timeService.maxIntervalLimit(this.currentRealtimeTimewindow());
   }
 
-  currentRealtimeTimewindow(): number {
+  private currentRealtimeTimewindow(): number {
-    const timeWindowFormValue = this.timewindowForm.getRawValue();
+    return currentRealtimeTimewindow(this.timewindowForm.getRawValue());
-    switch (timeWindowFormValue.realtime.realtimeType) {
-      case RealtimeWindowType.LAST_INTERVAL:
-        return timeWindowFormValue.realtime.timewindowMs;
-      case RealtimeWindowType.INTERVAL:
-        return quickTimeIntervalPeriod(timeWindowFormValue.realtime.quickInterval);
-      default:
-        return DAY;
-    }
   }
 
-  minHistoryAggInterval() {
+  get minHistoryAggInterval() {
     return this.timeService.minIntervalLimit(this.currentHistoryTimewindow());
   }
 
-  maxHistoryAggInterval() {
+  get maxHistoryAggInterval() {
     return this.timeService.maxIntervalLimit(this.currentHistoryTimewindow());
   }
 
-  currentHistoryTimewindow() {
+  private currentHistoryTimewindow(): number {
-    const timewindowFormValue = this.timewindowForm.getRawValue();
+    return currentHistoryTimewindow(this.timewindowForm.getRawValue());
-    if (timewindowFormValue.history.historyType === HistoryWindowType.LAST_INTERVAL) {
-      return timewindowFormValue.history.timewindowMs;
-    } else if (timewindowFormValue.history.historyType === HistoryWindowType.INTERVAL) {
-      return quickTimeIntervalPeriod(timewindowFormValue.history.quickInterval);
-    } else if (timewindowFormValue.history.fixedTimewindow) {
-      return timewindowFormValue.history.fixedTimewindow.endTimeMs -
-        timewindowFormValue.history.fixedTimewindow.startTimeMs;
-    } else {
-      return DAY;
   }
+
+  get realtimeAllowedAggIntervals(): Array<Interval> {
+    return realtimeAllowedAggIntervals(this.timewindowForm.getRawValue(), this.realtimeAdvancedParams);
+  }
+
+  get historyAllowedAggIntervals(): Array<Interval> {
+    return historyAllowedAggIntervals(this.timewindowForm.getRawValue(), this.historyAdvancedParams);
   }
 
   openTimewindowConfig() {
@@ -507,16 +500,20 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O
     this.historyDisableCustomGroupInterval = this.timewindow.history.disableCustomGroupInterval;
 
     if (this.timewindow.realtime.advancedParams) {
+      this.realtimeAdvancedParams = this.timewindow.realtime.advancedParams;
       this.realtimeAllowedLastIntervals = this.timewindow.realtime.advancedParams.allowedLastIntervals;
       this.realtimeAllowedQuickIntervals = this.timewindow.realtime.advancedParams.allowedQuickIntervals;
     } else {
+      this.realtimeAdvancedParams = null;
       this.realtimeAllowedLastIntervals = null;
       this.realtimeAllowedQuickIntervals = null;
     }
     if (this.timewindow.history.advancedParams) {
+      this.historyAdvancedParams = this.timewindow.history.advancedParams;
       this.historyAllowedLastIntervals = this.timewindow.history.advancedParams.allowedLastIntervals;
       this.historyAllowedQuickIntervals = this.timewindow.history.advancedParams.allowedQuickIntervals;
     } else {
+      this.historyAdvancedParams = null;
       this.historyAllowedLastIntervals = null;
       this.historyAllowedQuickIntervals = null;
     }

ui-ngx/src/app/shared/models/time/time.models.ts

@@ -88,17 +88,19 @@ export class IntervalMath {
 export interface TimewindowAdvancedParams {
   allowedLastIntervals? : Array<Interval>;
   allowedQuickIntervals? : Array<QuickTimeInterval>;
+  lastAggIntervalsConfig? : TimewindowAggIntervalsConfig;
+  quickAggIntervalsConfig? : TimewindowAggIntervalsConfig;
 }
 
 export type TimewindowInterval = Interval | QuickTimeInterval;
 
-export interface TimewindowAllowedAggIntervalsConfig {
+export interface TimewindowAggIntervalsConfig {
-  [key: string]: TimewindowAllowedAggIntervalOption;
+  [key: string]: TimewindowAggIntervalOptions;
 }
 
-export interface TimewindowAllowedAggIntervalOption {
+export interface TimewindowAggIntervalOptions {
-  aggIntervals: Array<TimewindowInterval>;
+  aggIntervals?: Array<Interval>;
-  preferredAggInterval: TimewindowInterval;
+  defaultAggInterval?: Interval;
 }
 
 export interface IntervalWindow {
@@ -565,6 +567,58 @@ export const updateFormValuesOnTimewindowTypeChange = (selectedTab: TimewindowTy
   });
 };
 
+export const currentRealtimeTimewindow = (timewindow: Timewindow): number => {
+  switch (timewindow.realtime.realtimeType) {
+    case RealtimeWindowType.LAST_INTERVAL:
+      return timewindow.realtime.timewindowMs;
+    case RealtimeWindowType.INTERVAL:
+      return quickTimeIntervalPeriod(timewindow.realtime.quickInterval);
+    default:
+      return DAY;
+  }
+};
+
+export const currentHistoryTimewindow = (timewindow: Timewindow): number => {
+  if (timewindow.history.historyType === HistoryWindowType.LAST_INTERVAL) {
+    return timewindow.history.timewindowMs;
+  } else if (timewindow.history.historyType === HistoryWindowType.INTERVAL) {
+    return quickTimeIntervalPeriod(timewindow.history.quickInterval);
+  } else if (timewindow.history.fixedTimewindow) {
+    return timewindow.history.fixedTimewindow.endTimeMs -
+      timewindow.history.fixedTimewindow.startTimeMs;
+  } else {
+    return DAY;
+  }
+}
+
+export const realtimeAllowedAggIntervals = (timewindow: Timewindow,
+                                            advancedParams: TimewindowAdvancedParams): Array<Interval> => {
+  if (timewindow.realtime.realtimeType === RealtimeWindowType.LAST_INTERVAL &&
+    advancedParams?.lastAggIntervalsConfig?.hasOwnProperty(timewindow.realtime.timewindowMs) &&
+    advancedParams.lastAggIntervalsConfig[timewindow.realtime.timewindowMs].aggIntervals?.length) {
+    return advancedParams.lastAggIntervalsConfig[timewindow.realtime.timewindowMs].aggIntervals;
+  } else if (timewindow.realtime.realtimeType === RealtimeWindowType.INTERVAL &&
+    advancedParams?.quickAggIntervalsConfig?.hasOwnProperty(timewindow.realtime.quickInterval) &&
+    advancedParams.quickAggIntervalsConfig[timewindow.realtime.quickInterval].aggIntervals?.length) {
+    return advancedParams.quickAggIntervalsConfig[timewindow.realtime.quickInterval].aggIntervals;
+  }
+  return [];
+};
+
+export const historyAllowedAggIntervals = (timewindow: Timewindow,
+                                            advancedParams: TimewindowAdvancedParams): Array<Interval> => {
+  if (timewindow.history.historyType === HistoryWindowType.LAST_INTERVAL &&
+    advancedParams?.lastAggIntervalsConfig?.hasOwnProperty(timewindow.history.timewindowMs) &&
+    advancedParams.lastAggIntervalsConfig[timewindow.history.timewindowMs].aggIntervals?.length) {
+    return advancedParams.lastAggIntervalsConfig[timewindow.history.timewindowMs].aggIntervals;
+  } else if (timewindow.history.historyType === HistoryWindowType.INTERVAL &&
+    advancedParams?.quickAggIntervalsConfig?.hasOwnProperty(timewindow.history.quickInterval) &&
+    advancedParams.quickAggIntervalsConfig[timewindow.history.quickInterval].aggIntervals?.length) {
+    return advancedParams.quickAggIntervalsConfig[timewindow.history.quickInterval].aggIntervals;
+  }
+  return [];
+};
+
 export const getTimezone = (tz: string): moment_.Moment => moment.tz(tz);
 
 export const calculateTsOffset = (timezone?: string): number => {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -4710,7 +4710,7 @@
         "allowed-aggregation-functions": "Allowed aggregation functions",
         "edit-intervals-list": "Edit intervals list",
         "allowed-agg-intervals": "Allowed grouping intervals",
-        "preferred-agg-interval": "Preferred intervals",
+        "default-agg-interval": "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."
     },