Timewindow: apply list of allowed grouping interval options
This commit is contained in:
Ekaterina Chantsova
parent
4fa5c9dbd5
commit
7277a0939c
@ -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
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
TimewindowAllowedAggIntervalsConfig,
|
||||
TimewindowAggIntervalOptions,
|
||||
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],
|
||||
aggIntervals: [intervalConfig ? intervalConfig.aggIntervals : []],
|
||||
preferredAggInterval: [intervalConfig ? intervalConfig.preferredAggInterval : null]
|
||||
}));
|
||||
enabled: [intervalEnabled],
|
||||
aggIntervals: [{value: intervalConfig ? intervalConfig.aggIntervals : [], disabled: !(intervalEnabled && this.aggregation)}],
|
||||
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;
|
||||
// if full list selected returns empty for optimization
|
||||
this.onClose(allowedIntervals?.length < this.allIntervals.length ? allowedIntervals : []);
|
||||
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
|
||||
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();
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 = [];
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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,
|
||||
quickTimeIntervalPeriod,
|
||||
realtimeAllowedAggIntervals,
|
||||
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 {
|
||||
const timeWindowFormValue = 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;
|
||||
}
|
||||
private currentRealtimeTimewindow(): number {
|
||||
return currentRealtimeTimewindow(this.timewindowForm.getRawValue());
|
||||
}
|
||||
|
||||
minHistoryAggInterval() {
|
||||
get minHistoryAggInterval() {
|
||||
return this.timeService.minIntervalLimit(this.currentHistoryTimewindow());
|
||||
}
|
||||
|
||||
maxHistoryAggInterval() {
|
||||
get maxHistoryAggInterval() {
|
||||
return this.timeService.maxIntervalLimit(this.currentHistoryTimewindow());
|
||||
}
|
||||
|
||||
currentHistoryTimewindow() {
|
||||
private currentHistoryTimewindow(): number {
|
||||
return currentHistoryTimewindow(this.timewindowForm.getRawValue());
|
||||
}
|
||||
|
||||
get realtimeAllowedAggIntervals(): Array<Interval> {
|
||||
const timewindowFormValue = 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;
|
||||
}
|
||||
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.timewindowForm.get('realtime.advancedParams.allowedLastIntervals').patchValue(res);
|
||||
};
|
||||
this.openIntervalOptionsConfig($event, this.timewindowForm.get('realtime.advancedParams.allowedLastIntervals').value,
|
||||
resFn, RealtimeWindowType.LAST_INTERVAL);
|
||||
this.openIntervalOptionsConfig($event,
|
||||
'realtime.advancedParams.allowedLastIntervals', 'realtime.advancedParams.lastAggIntervalsConfig',
|
||||
RealtimeWindowType.LAST_INTERVAL);
|
||||
}
|
||||
|
||||
configureRealtimeQuickIntervalOptions($event: Event) {
|
||||
const resFn = (res) => {
|
||||
this.timewindowForm.get('realtime.advancedParams.allowedQuickIntervals').patchValue(res);
|
||||
};
|
||||
this.openIntervalOptionsConfig($event, this.timewindowForm.get('realtime.advancedParams.allowedQuickIntervals').value,
|
||||
resFn, RealtimeWindowType.INTERVAL, TimewindowType.REALTIME);
|
||||
this.openIntervalOptionsConfig($event,
|
||||
'realtime.advancedParams.allowedQuickIntervals', 'realtime.advancedParams.quickAggIntervalsConfig',
|
||||
RealtimeWindowType.INTERVAL, TimewindowType.REALTIME);
|
||||
}
|
||||
|
||||
configureHistoryLastIntervalOptions($event: Event) {
|
||||
const resFn = (res) => {
|
||||
this.timewindowForm.get('history.advancedParams.allowedLastIntervals').patchValue(res);
|
||||
};
|
||||
this.openIntervalOptionsConfig($event, this.timewindowForm.get('history.advancedParams.allowedLastIntervals').value,
|
||||
resFn, HistoryWindowType.LAST_INTERVAL);
|
||||
this.openIntervalOptionsConfig($event,
|
||||
'history.advancedParams.allowedLastIntervals', 'history.advancedParams.lastAggIntervalsConfig',
|
||||
HistoryWindowType.LAST_INTERVAL);
|
||||
}
|
||||
|
||||
configureHistoryQuickIntervalOptions($event: Event) {
|
||||
const resFn = (res) => {
|
||||
this.timewindowForm.get('history.advancedParams.allowedQuickIntervals').patchValue(res);
|
||||
};
|
||||
this.openIntervalOptionsConfig($event, this.timewindowForm.get('history.advancedParams.allowedQuickIntervals').value,
|
||||
resFn, HistoryWindowType.INTERVAL, TimewindowType.HISTORY);
|
||||
this.openIntervalOptionsConfig($event,
|
||||
'history.advancedParams.allowedQuickIntervals', 'history.advancedParams.quickAggIntervalsConfig',
|
||||
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%'},
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -17,15 +17,16 @@
|
||||
import { Component, Inject, InjectionToken, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
|
||||
import {
|
||||
AggregationType,
|
||||
DAY,
|
||||
currentHistoryTimewindow,
|
||||
currentRealtimeTimewindow, historyAllowedAggIntervals,
|
||||
HistoryWindowType,
|
||||
historyWindowTypeTranslations,
|
||||
Interval,
|
||||
QuickTimeInterval,
|
||||
quickTimeIntervalPeriod,
|
||||
QuickTimeInterval, realtimeAllowedAggIntervals,
|
||||
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 {
|
||||
const timeWindowFormValue = 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;
|
||||
}
|
||||
private currentRealtimeTimewindow(): number {
|
||||
return currentRealtimeTimewindow(this.timewindowForm.getRawValue());
|
||||
}
|
||||
|
||||
minHistoryAggInterval() {
|
||||
get minHistoryAggInterval() {
|
||||
return this.timeService.minIntervalLimit(this.currentHistoryTimewindow());
|
||||
}
|
||||
|
||||
maxHistoryAggInterval() {
|
||||
get maxHistoryAggInterval() {
|
||||
return this.timeService.maxIntervalLimit(this.currentHistoryTimewindow());
|
||||
}
|
||||
|
||||
currentHistoryTimewindow() {
|
||||
const timewindowFormValue = 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;
|
||||
}
|
||||
private currentHistoryTimewindow(): number {
|
||||
return currentHistoryTimewindow(this.timewindowForm.getRawValue());
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
[key: string]: TimewindowAllowedAggIntervalOption;
|
||||
export interface TimewindowAggIntervalsConfig {
|
||||
[key: string]: TimewindowAggIntervalOptions;
|
||||
}
|
||||
|
||||
export interface TimewindowAllowedAggIntervalOption {
|
||||
aggIntervals: Array<TimewindowInterval>;
|
||||
preferredAggInterval: TimewindowInterval;
|
||||
export interface TimewindowAggIntervalOptions {
|
||||
aggIntervals?: Array<Interval>;
|
||||
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 => {
|
||||
|
||||
@ -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."
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user