diff --git a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.ts b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.ts index bddbe3fba3..c206f712b9 100644 --- a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.ts +++ b/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] }); } 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 afeaf2b2a2..b99da0d5af 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 @@ -24,13 +24,40 @@
{{"timewindow.interval" | translate }}
+ +
{{"timewindow.allowed-agg-intervals" | translate }}
+
{{"timewindow.preferred-agg-interval" | translate }}
+
- - - {{ interval.name | translate:interval.translateParams }} - - + + + + + + +
+
+ + {{ interval.get('name').value }} + +
+ +
+
+ + +
+
+
+
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 88e8303480..818138afe0 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 @@ -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; + allowedIntervals: Array; + + @Input() + allowedAggIntervals: TimewindowAllowedAggIntervalsConfig; @Input() intervalType: RealtimeWindowType | HistoryWindowType; @@ -57,27 +64,72 @@ export class IntervalOptionsConfigPanelComponent implements OnInit { intervalOptionsConfigForm: FormGroup; allIntervals: Array; + allIntervalValues: Array 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.allIntervals = quickIntervals.map(interval => ({ - name: this.timeIntervalTranslationMap.get(interval), + this.allIntervalValues = this.getQuickIntervals(); + this.allIntervals = this.allIntervalValues.map(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 = []; + 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() { 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 3b556c8ba9..65121f9486 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/ui-ngx/src/app/shared/models/time/time.models.ts @@ -90,6 +90,17 @@ export interface TimewindowAdvancedParams { allowedQuickIntervals? : Array; } +export type TimewindowInterval = Interval | QuickTimeInterval; + +export interface TimewindowAllowedAggIntervalsConfig { + [key: string]: TimewindowAllowedAggIntervalOption; +} + +export interface TimewindowAllowedAggIntervalOption { + aggIntervals: Array; + 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 { 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 c59622a245..20b67af14b 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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." },