Timewindow: start adding allowed aggregation intervals

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

@@ -47,7 +47,7 @@ export class AggregationOptionsConfigPanelComponent implements OnInit {
 
   ngOnInit(): void {
     this.aggregationOptionsConfigForm = this.fb.group({
-      allowedAggregationTypes: [this.allowedAggregationTypes]
+      allowedAggregationTypes: [this.allowedAggregationTypes?.length ? this.allowedAggregationTypes : this.allAggregationTypes]
     });
   }
 

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

@@ -24,13 +24,40 @@
   <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>
+      <ng-container *ngIf="aggregation">
+        <div class="tb-form-table-header-cell">{{"timewindow.allowed-agg-intervals" | translate }}</div>
+        <div class="tb-form-table-header-cell">{{"timewindow.preferred-agg-interval" | translate }}</div>
+      </ng-container>
     </div>
     <div class="tb-form-table-body">
-      <mat-selection-list formControlName="allowedIntervals">
+<!--      <mat-selection-list formControlName="allowedIntervals">-->
-        <mat-list-option *ngFor="let interval of allIntervals" [value]="interval.value" togglePosition="before">
+<!--        <mat-list-option *ngFor="let interval of allIntervals" [value]="interval.value" togglePosition="before">-->
-          {{ interval.name | translate:interval.translateParams }}
+<!--          {{ interval.name | translate:interval.translateParams }}-->
-        </mat-list-option>
+<!--        </mat-list-option>-->
-      </mat-selection-list>
+<!--      </mat-selection-list>-->
+      <ng-container *ngFor="let interval of intervalsFormArray.controls; let i = index; trackBy: trackByElement">
+        <div [formGroupName]="i" class="tb-form-table-row">
+          <div class="tb-form-table-row-cell">
+            <mat-checkbox formControlName="enabled">
+              <mat-label>{{ interval.get('name').value }}</mat-label>
+            </mat-checkbox>
+          </div>
+          <ng-container *ngIf="aggregation">
+            <div class="tb-form-table-row-cell"></div>
+            <div class="tb-form-table-row-cell">
+              <tb-timeinterval
+                formControlName="interval"
+                [min]="minAggInterval(interval.get('value').value)"
+                [max]="maxAggInterval(interval.get('value').value)"
+                useCalendarIntervals
+                subscriptSizing="dynamic"
+                appearance="outline"
+                disabledAdvanced>
+              </tb-timeinterval>
+            </div>
+          </ng-container>
+        </div>
+      </ng-container>
     </div>
   </div>
   <div class="flex flex-row gap-2 items-center">

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

@@ -17,16 +17,20 @@
 import { Component, Input, OnInit } from '@angular/core';
 import {
   HistoryWindowType,
-  QuickTimeInterval,
+  QuickTimeInterval, quickTimeIntervalPeriod,
   QuickTimeIntervalTranslationMap,
   RealtimeWindowType,
+  TimewindowAllowedAggIntervalOption,
+  TimewindowAllowedAggIntervalsConfig,
+  TimewindowInterval,
   TimewindowIntervalOption,
   TimewindowType
 } from '@shared/models/time/time.models';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, UntypedFormArray } from '@angular/forms';
 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';
 
 @Component({
   selector: 'tb-interval-options-config-panel',
@@ -40,7 +44,10 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
   aggregation = false;
 
   @Input()
-  allowedIntervals: Array<any>;
+  allowedIntervals: Array<TimewindowInterval>;
+
+  @Input()
+  allowedAggIntervals: TimewindowAllowedAggIntervalsConfig;
 
   @Input()
   intervalType: RealtimeWindowType | HistoryWindowType;
@@ -57,27 +64,72 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
   intervalOptionsConfigForm: FormGroup;
 
   allIntervals: Array<TimewindowIntervalOption>;
+  allIntervalValues: Array<TimewindowInterval>
 
   private timeIntervalTranslationMap = QuickTimeIntervalTranslationMap;
 
   constructor(private fb: FormBuilder,
-              private timeService: TimeService) {}
+              private timeService: TimeService,
+              private translate: TranslateService) {}
 
   ngOnInit(): void {
     if (this.intervalType === RealtimeWindowType.LAST_INTERVAL ||
         this.intervalType === HistoryWindowType.LAST_INTERVAL) {
       this.allIntervals = this.timeService.getIntervals(undefined, undefined, false);
+      this.allIntervalValues = this.allIntervals.map(interval => interval.value);
     } else {
-      const quickIntervals = this.getQuickIntervals();
+      this.allIntervalValues = this.getQuickIntervals();
-      this.allIntervals = quickIntervals.map(interval => ({
+      this.allIntervals = this.allIntervalValues.map(interval => ({
-        name: this.timeIntervalTranslationMap.get(interval),
+        name: this.timeIntervalTranslationMap.get(interval as QuickTimeInterval),
         value: interval
       }));
     }
 
     this.intervalOptionsConfigForm = this.fb.group({
-      allowedIntervals: [this.allowedIntervals]
+      allowedIntervals: [this.allowedIntervals?.length ? this.allowedIntervals : this.allIntervalValues],
+      intervals: this.fb.array([])
     });
+
+    if (this.aggregation) {
+      const intervalControls: Array<AbstractControl> = [];
+      for (const interval of this.allIntervals) {
+        const intervalConfig: TimewindowAllowedAggIntervalOption = this.allowedAggIntervals?.hasOwnProperty(interval.value)
+          ? this.allIntervalValues[interval.value]
+          : null;
+        intervalControls.push(this.fb.group({
+          name: [this.translate.instant(interval.name, interval.translateParams)],
+          value: [interval.value],
+          enabled: [this.allowedIntervals?.length ? this.allowedIntervals.includes(interval.value) : true],
+          aggIntervals: [intervalConfig ? intervalConfig.aggIntervals : []],
+          preferredAggInterval: [intervalConfig ? intervalConfig.preferredAggInterval : null]
+        }));
+      }
+      this.intervalOptionsConfigForm.setControl('intervals', this.fb.array(intervalControls), {emitEvent: false});
+    }
+  }
+
+  get intervalsFormArray(): UntypedFormArray {
+    return this.intervalOptionsConfigForm.get('intervals') as UntypedFormArray;
+  }
+
+  minAggInterval(interval: TimewindowInterval) {
+    return this.timeService.minIntervalLimit(this.getIntervalMs(interval));
+  }
+
+  maxAggInterval(interval: TimewindowInterval) {
+    return this.timeService.maxIntervalLimit(this.getIntervalMs(interval));
+  }
+
+  private getIntervalMs(interval: TimewindowInterval): number {
+    if (this.intervalType === RealtimeWindowType.INTERVAL ||
+      this.intervalType === HistoryWindowType.INTERVAL) {
+      return quickTimeIntervalPeriod(interval as QuickTimeInterval);
+    }
+    return interval as number;
+  }
+
+  trackByElement(i: number, item: any) {
+    return item;
   }
 
   update() {

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

@@ -90,6 +90,17 @@ export interface TimewindowAdvancedParams {
   allowedQuickIntervals? : Array<QuickTimeInterval>;
 }
 
+export type TimewindowInterval = Interval | QuickTimeInterval;
+
+export interface TimewindowAllowedAggIntervalsConfig {
+  [key: string]: TimewindowAllowedAggIntervalOption;
+}
+
+export interface TimewindowAllowedAggIntervalOption {
+  aggIntervals: Array<TimewindowInterval>;
+  preferredAggInterval: TimewindowInterval;
+}
+
 export interface IntervalWindow {
   interval?: Interval;
   timewindowMs?: number;
@@ -186,7 +197,7 @@ export interface WidgetTimewindow {
 export interface TimewindowIntervalOption {
   name: string;
   translateParams?: {[key: string]: any};
-  value: Interval | QuickTimeInterval;
+  value: TimewindowInterval;
 }
 
 export enum QuickTimeInterval {

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

@@ -4548,6 +4548,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",
+        "allowed-agg-intervals": "Allowed aggregation intervals",
+        "preferred-agg-interval": "Preferred intervals",
         "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."
     },