Chantsova Ekaterina
2 years ago
9 changed files with 662 additions and 23 deletions
@ -0,0 +1,211 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<mat-toolbar color="primary"> |
||||
|
<h2>{{ 'timewindow.timewindow-settings' | translate }}</h2> |
||||
|
<span fxFlex></span> |
||||
|
<!-- <div tb-help="#"></div>--> |
||||
|
<button mat-icon-button |
||||
|
(click)="cancel()" |
||||
|
type="button"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
</mat-toolbar> |
||||
|
<form [formGroup]="timewindowForm" class="mat-content"> |
||||
|
<mat-tab-group (selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab"> |
||||
|
<mat-tab label="{{ 'timewindow.realtime' | translate }}"> |
||||
|
<div class="tb-flex column"> |
||||
|
<section class="tb-form-panel stroked"> |
||||
|
<div class="tb-flex space-between" |
||||
|
[ngClass]="{'align-end': realtimeTypeSelectionAvailable, 'align-center': !realtimeTypeSelectionAvailable }"> |
||||
|
<div class="tb-flex column no-flex flex-xs"> |
||||
|
<div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div> |
||||
|
<ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable"> |
||||
|
<tb-toggle-select appearance="fill" [options]="realtimeTimewindowOptions" formControlName="realtimeType"> |
||||
|
</tb-toggle-select> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<ng-container *ngTemplateOutlet="timezoneSelection"> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<ng-container formGroupName="realtime"> |
||||
|
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> |
||||
|
<tb-timeinterval |
||||
|
formControlName="timewindowMs" |
||||
|
subscriptSizing="dynamic" |
||||
|
appearance="outline" |
||||
|
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && |
||||
|
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> |
||||
|
</tb-timeinterval> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"> |
||||
|
<tb-quick-time-interval |
||||
|
displayLabel="false" |
||||
|
formControlName="quickInterval" |
||||
|
onlyCurrentInterval="true" |
||||
|
subscriptSizing="dynamic" |
||||
|
appearance="outline" |
||||
|
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && |
||||
|
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"> |
||||
|
</tb-quick-time-interval> |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
</section> |
||||
|
<ng-container *ngTemplateOutlet="aggregationConfig"> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</mat-tab> |
||||
|
<mat-tab label="{{ 'timewindow.history' | translate }}"> |
||||
|
<div class="tb-flex column"> |
||||
|
<section class="tb-form-panel stroked"> |
||||
|
<div class="tb-flex space-between align-end"> |
||||
|
<div class="tb-flex column no-flex flex-xs"> |
||||
|
<div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div> |
||||
|
<ng-container formGroupName="history"> |
||||
|
<tb-toggle-select appearance="fill" [options]="historyTimewindowOptions" formControlName="historyType"> |
||||
|
</tb-toggle-select> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<ng-container *ngTemplateOutlet="timezoneSelection"> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
|
||||
|
<ng-container formGroupName="history"> |
||||
|
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> |
||||
|
<tb-timeinterval |
||||
|
formControlName="timewindowMs" |
||||
|
subscriptSizing="dynamic" |
||||
|
appearance="outline" |
||||
|
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && |
||||
|
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> |
||||
|
</tb-timeinterval> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED"> |
||||
|
<tb-datetime-period |
||||
|
formControlName="fixedTimewindow" |
||||
|
subscriptSizing="dynamic" |
||||
|
appearance="outline" |
||||
|
class="history-time-input" |
||||
|
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && |
||||
|
timewindowForm.get('history.historyType').value === historyTypes.FIXED"> |
||||
|
</tb-datetime-period> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"> |
||||
|
<tb-quick-time-interval |
||||
|
displayLabel="false" |
||||
|
formControlName="quickInterval" |
||||
|
subscriptSizing="dynamic" |
||||
|
appearance="outline" |
||||
|
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && |
||||
|
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"> |
||||
|
</tb-quick-time-interval> |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
</section> |
||||
|
<ng-container *ngTemplateOutlet="aggregationConfig"> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</mat-tab> |
||||
|
</mat-tab-group> |
||||
|
<ng-template #aggregationConfig> |
||||
|
<div class="tb-flex column"> |
||||
|
<ng-container formGroupName="aggregation"> |
||||
|
<section class="tb-form-panel stroked"> |
||||
|
<div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div> |
||||
|
<mat-form-field subscriptSizing="dynamic" appearance="outline"> |
||||
|
<mat-select formControlName="type"> |
||||
|
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> |
||||
|
{{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
|
||||
|
<section class="tb-form-panel stroked" |
||||
|
*ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE"> |
||||
|
<div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div> |
||||
|
<div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center" |
||||
|
fxLayout.xs="column" fxLayoutAlign.xs="stretch"> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> |
||||
|
<mat-slider fxFlex |
||||
|
min="{{minDatapointsLimit()}}" |
||||
|
max="{{maxDatapointsLimit()}}"> |
||||
|
<input matSliderThumb formControlName="limit"/> |
||||
|
</mat-slider> |
||||
|
<mat-form-field class="limit-slider-value" subscriptSizing="dynamic" appearance="outline"> |
||||
|
<input matInput formControlName="limit" type="number" step="1" |
||||
|
[value]="timewindowForm.get('aggregation.limit').value" |
||||
|
min="{{minDatapointsLimit()}}" |
||||
|
max="{{maxDatapointsLimit()}}"/> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</ng-container> |
||||
|
|
||||
|
<section class="tb-form-panel stroked" [fxShow]="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE"> |
||||
|
<div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div> |
||||
|
<ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME"> |
||||
|
<tb-timeinterval |
||||
|
formControlName="interval" |
||||
|
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()" |
||||
|
useCalendarIntervals |
||||
|
subscriptSizing="dynamic" |
||||
|
appearance="outline"> |
||||
|
</tb-timeinterval> |
||||
|
</ng-container> |
||||
|
<ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY"> |
||||
|
<tb-timeinterval |
||||
|
formControlName="interval" |
||||
|
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()" |
||||
|
useCalendarIntervals |
||||
|
subscriptSizing="dynamic" |
||||
|
appearance="outline"> |
||||
|
</tb-timeinterval> |
||||
|
</ng-container> |
||||
|
</section> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
<ng-template #timezoneSelection> |
||||
|
<tb-timezone asButton strokedButton noMargin |
||||
|
localBrowserTimezonePlaceholderOnEmpty="true" |
||||
|
formControlName="timezone"> |
||||
|
</tb-timezone> |
||||
|
</ng-template> |
||||
|
</form> |
||||
|
<mat-divider></mat-divider> |
||||
|
<div mat-dialog-actions class="tb-dialog-actions tb-flex flex-end no-gap"> |
||||
|
<button type="button" |
||||
|
mat-button |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()"> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button type="button" |
||||
|
mat-raised-button |
||||
|
color="primary" |
||||
|
(click)="update()" |
||||
|
[disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty"> |
||||
|
{{ 'action.apply' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
@ -0,0 +1,70 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
@import "../../../../scss/constants"; |
||||
|
|
||||
|
:host { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
max-height: 100%; |
||||
|
max-width: 100%; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
.tb-form-panel { |
||||
|
padding: 12px; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
.mat-content { |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.tb-flex { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.limit-slider-container { |
||||
|
.limit-slider-value { |
||||
|
margin-left: 16px; |
||||
|
min-width: 25px; |
||||
|
max-width: 100px; |
||||
|
} |
||||
|
mat-form-field input[type=number] { |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media #{$mat-gt-sm} { |
||||
|
.limit-slider-container { |
||||
|
> label { |
||||
|
margin-right: 16px; |
||||
|
width: min-content; |
||||
|
max-width: 40%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.mat-mdc-tab-group:not(.tb-headless) { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.mat-mdc-tab-body-content { |
||||
|
padding: 12px 16px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,309 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, Inject, OnInit } from '@angular/core'; |
||||
|
import { |
||||
|
aggregationTranslations, |
||||
|
AggregationType, |
||||
|
DAY, |
||||
|
HistoryWindowType, |
||||
|
quickTimeIntervalPeriod, |
||||
|
RealtimeWindowType, |
||||
|
Timewindow, |
||||
|
TimewindowType |
||||
|
} from '@shared/models/time/time.models'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { TimeService } from '@core/services/time.service'; |
||||
|
import { isDefined, isDefinedAndNotNull } 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'; |
||||
|
|
||||
|
export interface TimewindowConfigDialogData { |
||||
|
quickIntervalOnly: boolean; |
||||
|
timewindow: Timewindow; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-timewindow-config-dialog', |
||||
|
templateUrl: './timewindow-config-dialog.component.html', |
||||
|
styleUrls: ['./timewindow-config-dialog.component.scss'] |
||||
|
}) |
||||
|
export class TimewindowConfigDialogComponent extends PageComponent implements OnInit { |
||||
|
|
||||
|
quickIntervalOnly = false; |
||||
|
|
||||
|
timewindow: Timewindow; |
||||
|
|
||||
|
timewindowForm: UntypedFormGroup; |
||||
|
|
||||
|
historyTypes = HistoryWindowType; |
||||
|
|
||||
|
realtimeTypes = RealtimeWindowType; |
||||
|
|
||||
|
timewindowTypes = TimewindowType; |
||||
|
|
||||
|
aggregationTypes = AggregationType; |
||||
|
|
||||
|
aggregations = Object.keys(AggregationType); |
||||
|
|
||||
|
aggregationTypesTranslations = aggregationTranslations; |
||||
|
|
||||
|
result: Timewindow; |
||||
|
|
||||
|
realtimeTimewindowOptions: ToggleHeaderOption[] = [ |
||||
|
{ |
||||
|
name: this.translate.instant('timewindow.relative'), |
||||
|
value: this.realtimeTypes.INTERVAL |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
historyTimewindowOptions: ToggleHeaderOption[] = [ |
||||
|
{ |
||||
|
name: this.translate.instant('timewindow.last'), |
||||
|
value: this.historyTypes.LAST_INTERVAL |
||||
|
}, |
||||
|
{ |
||||
|
name: this.translate.instant('timewindow.fixed'), |
||||
|
value: this.historyTypes.FIXED |
||||
|
}, |
||||
|
{ |
||||
|
name: this.translate.instant('timewindow.relative'), |
||||
|
value: this.historyTypes.INTERVAL |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
realtimeTypeSelectionAvailable: boolean; |
||||
|
|
||||
|
constructor(@Inject(MAT_DIALOG_DATA) public data: TimewindowConfigDialogData, |
||||
|
public dialogRef: MatDialogRef<TimewindowConfigDialogComponent, Timewindow>, |
||||
|
protected store: Store<AppState>, |
||||
|
public fb: UntypedFormBuilder, |
||||
|
private timeService: TimeService, |
||||
|
private translate: TranslateService) { |
||||
|
super(store); |
||||
|
this.quickIntervalOnly = data.quickIntervalOnly; |
||||
|
this.timewindow = data.timewindow; |
||||
|
|
||||
|
if (!this.quickIntervalOnly) { |
||||
|
this.realtimeTimewindowOptions.unshift({ |
||||
|
name: this.translate.instant('timewindow.last'), |
||||
|
value: this.realtimeTypes.LAST_INTERVAL |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
this.realtimeTypeSelectionAvailable = this.realtimeTimewindowOptions.length > 1; |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
const hideInterval = this.timewindow.hideInterval || false; |
||||
|
const hideLastInterval = this.timewindow.hideLastInterval || false; |
||||
|
const hideQuickInterval = this.timewindow.hideQuickInterval || false; |
||||
|
const hideAggregation = this.timewindow.hideAggregation || false; |
||||
|
const hideAggInterval = this.timewindow.hideAggInterval || false; |
||||
|
const hideTimezone = this.timewindow.hideTimezone || false; |
||||
|
|
||||
|
const realtime = this.timewindow.realtime; |
||||
|
const history = this.timewindow.history; |
||||
|
const aggregation = this.timewindow.aggregation; |
||||
|
|
||||
|
this.timewindowForm = this.fb.group({ |
||||
|
realtime: this.fb.group({ |
||||
|
realtimeType: [ isDefined(realtime?.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL ], |
||||
|
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 ] |
||||
|
}), |
||||
|
history: this.fb.group({ |
||||
|
historyType: [ isDefined(history?.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL ], |
||||
|
timewindowMs: [ isDefined(history?.timewindowMs) ? this.timewindow.history.timewindowMs : null ], |
||||
|
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 ] |
||||
|
}), |
||||
|
aggregation: this.fb.group({ |
||||
|
type: [ isDefined(aggregation?.type) ? this.timewindow.aggregation.type : null ], |
||||
|
limit: [ isDefined(aggregation?.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null ] |
||||
|
}), |
||||
|
timezone: [ isDefined(this.timewindow.timezone) ? this.timewindow.timezone : null ], |
||||
|
hideInterval: [ isDefinedAndNotNull(this.timewindow.hideInterval) |
||||
|
? this.timewindow.hideInterval : false ], |
||||
|
hideLastInterval: [{ |
||||
|
value: isDefinedAndNotNull(this.timewindow.hideLastInterval) |
||||
|
? this.timewindow.hideLastInterval : false, |
||||
|
disabled: this.timewindow.hideInterval |
||||
|
}], |
||||
|
hideQuickInterval: [{ |
||||
|
value: isDefinedAndNotNull(this.timewindow.hideQuickInterval) |
||||
|
? this.timewindow.hideQuickInterval : false, |
||||
|
disabled: this.timewindow.hideInterval |
||||
|
}], |
||||
|
hideAggregation: [ isDefinedAndNotNull(this.timewindow.hideAggregation) |
||||
|
? this.timewindow.hideAggregation : false ], |
||||
|
hideAggInterval: [ isDefinedAndNotNull(this.timewindow.hideAggInterval) |
||||
|
? this.timewindow.hideAggInterval : false ], |
||||
|
hideTimezone: [ isDefinedAndNotNull(this.timewindow.hideTimezone) |
||||
|
? this.timewindow.hideTimezone : false ] |
||||
|
}); |
||||
|
|
||||
|
this.updateValidators(this.timewindowForm.get('aggregation.type').value); |
||||
|
this.timewindowForm.get('aggregation.type').valueChanges.subscribe((aggregationType: AggregationType) => { |
||||
|
this.updateValidators(aggregationType); |
||||
|
}); |
||||
|
this.timewindowForm.get('hideInterval').valueChanges.subscribe((value: boolean) => { |
||||
|
if (value) { |
||||
|
this.timewindowForm.get('hideLastInterval').disable(); |
||||
|
this.timewindowForm.get('hideQuickInterval').disable(); |
||||
|
} else { |
||||
|
this.timewindowForm.get('hideLastInterval').enable(); |
||||
|
this.timewindowForm.get('hideQuickInterval').enable(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private checkLimit(limit?: number): number { |
||||
|
if (!limit || limit < this.minDatapointsLimit()) { |
||||
|
return this.minDatapointsLimit(); |
||||
|
} else if (limit > this.maxDatapointsLimit()) { |
||||
|
return this.maxDatapointsLimit(); |
||||
|
} |
||||
|
return limit; |
||||
|
} |
||||
|
|
||||
|
private updateValidators(aggType: AggregationType) { |
||||
|
if (aggType !== AggregationType.NONE) { |
||||
|
this.timewindowForm.get('aggregation.limit').clearValidators(); |
||||
|
} else { |
||||
|
this.timewindowForm.get('aggregation.limit').setValidators([Validators.min(this.minDatapointsLimit()), |
||||
|
Validators.max(this.maxDatapointsLimit())]); |
||||
|
} |
||||
|
this.timewindowForm.get('aggregation.limit').updateValueAndValidity({emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
onTimewindowTypeChange() { |
||||
|
this.timewindowForm.markAsDirty(); |
||||
|
const timewindowFormValue = this.timewindowForm.getRawValue(); |
||||
|
if (this.timewindow.selectedTab === TimewindowType.REALTIME) { |
||||
|
if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED) { |
||||
|
this.timewindowForm.get('realtime').patchValue({ |
||||
|
realtimeType: Object.keys(RealtimeWindowType).includes(HistoryWindowType[timewindowFormValue.history.historyType]) ? |
||||
|
RealtimeWindowType[HistoryWindowType[timewindowFormValue.history.historyType]] : |
||||
|
timewindowFormValue.realtime.realtimeType, |
||||
|
timewindowMs: timewindowFormValue.history.timewindowMs, |
||||
|
quickInterval: timewindowFormValue.history.quickInterval.startsWith('CURRENT') ? |
||||
|
timewindowFormValue.history.quickInterval : timewindowFormValue.realtime.quickInterval |
||||
|
}); |
||||
|
setTimeout(() => this.timewindowForm.get('realtime.interval').patchValue(timewindowFormValue.history.interval)); |
||||
|
} |
||||
|
} else { |
||||
|
this.timewindowForm.get('history').patchValue({ |
||||
|
historyType: HistoryWindowType[RealtimeWindowType[timewindowFormValue.realtime.realtimeType]], |
||||
|
timewindowMs: timewindowFormValue.realtime.timewindowMs, |
||||
|
quickInterval: timewindowFormValue.realtime.quickInterval |
||||
|
}); |
||||
|
setTimeout(() => this.timewindowForm.get('history.interval').patchValue(timewindowFormValue.realtime.interval)); |
||||
|
} |
||||
|
this.timewindowForm.patchValue({ |
||||
|
aggregation: { |
||||
|
type: timewindowFormValue.aggregation.type, |
||||
|
limit: timewindowFormValue.aggregation.limit |
||||
|
}, |
||||
|
timezone: timewindowFormValue.timezone |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
update() { |
||||
|
const timewindowFormValue = this.timewindowForm.getRawValue(); |
||||
|
this.timewindow.realtime = { |
||||
|
realtimeType: timewindowFormValue.realtime.realtimeType, |
||||
|
timewindowMs: timewindowFormValue.realtime.timewindowMs, |
||||
|
quickInterval: timewindowFormValue.realtime.quickInterval, |
||||
|
interval: timewindowFormValue.realtime.interval |
||||
|
}; |
||||
|
this.timewindow.history = { |
||||
|
historyType: timewindowFormValue.history.historyType, |
||||
|
timewindowMs: timewindowFormValue.history.timewindowMs, |
||||
|
interval: timewindowFormValue.history.interval, |
||||
|
fixedTimewindow: timewindowFormValue.history.fixedTimewindow, |
||||
|
quickInterval: timewindowFormValue.history.quickInterval, |
||||
|
}; |
||||
|
this.timewindow.aggregation = { |
||||
|
type: timewindowFormValue.aggregation.type, |
||||
|
limit: timewindowFormValue.aggregation.limit |
||||
|
}; |
||||
|
this.timewindow.timezone = timewindowFormValue.timezone; |
||||
|
this.result = this.timewindow; |
||||
|
this.dialogRef.close(this.result); |
||||
|
} |
||||
|
|
||||
|
cancel() { |
||||
|
this.dialogRef.close(); |
||||
|
} |
||||
|
|
||||
|
minDatapointsLimit() { |
||||
|
return this.timeService.getMinDatapointsLimit(); |
||||
|
} |
||||
|
|
||||
|
maxDatapointsLimit() { |
||||
|
return this.timeService.getMaxDatapointsLimit(); |
||||
|
} |
||||
|
|
||||
|
minRealtimeAggInterval() { |
||||
|
return this.timeService.minIntervalLimit(this.currentRealtimeTimewindow()); |
||||
|
} |
||||
|
|
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
minHistoryAggInterval() { |
||||
|
return this.timeService.minIntervalLimit(this.currentHistoryTimewindow()); |
||||
|
} |
||||
|
|
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue