dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: hide options and apply configured parameters

Browse Source
This commit is contained in:
Chantsova Ekaterina 2024-08-12 18:18:21 +03:00
parent 9ca85d5cc7
commit 5aac775487
10 changed files with 180 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-ngx/src/app/shared/components/time/datetime-period.component.html
View File

@ -16,13 +16,13 @@
-->
<section class="tb-form-row column-xs no-border no-padding tb-standard-fields">
<mat-form-field class="medium-width flex-xs" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-form-field class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>datetime.from</mat-label>
<mat-datetimepicker-toggle [for]="startDatePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #startDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startDatePicker" (ngModelChange)="onStartDateChange()">
</mat-form-field>
<mat-form-field class="medium-width flex-xs" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-form-field class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>datetime.to</mat-label>
<mat-datetimepicker-toggle [for]="endDatePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>

19
ui-ngx/src/app/shared/components/time/timeinterval.component.ts
View File

@ -43,6 +43,8 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe
minValue: number;
maxValue: number;
disabledAdvancedState = false;
@Input()
set min(min: number) {
const minValueData = coerceNumberProperty(min);
@ -71,7 +73,13 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe
@Input()
@coerceBoolean()
disabledAdvanced = false;
set disabledAdvanced(disabledAdvanced: boolean) {
if (this.disabledAdvancedState !== disabledAdvanced) {
this.disabledAdvancedState = disabledAdvanced;
this.updateIntervalValue();
this.boundInterval();
}
}
@Input()
@coerceBoolean()
@ -170,13 +178,18 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe
writeValue(interval: Interval): void {
this.modelValue = interval;
this.rendered = true;
this.updateIntervalValue();
}
private updateIntervalValue() {
if (typeof this.modelValue !== 'undefined') {
const min = this.timeService.boundMinInterval(this.minValue);
const max = this.timeService.boundMaxInterval(this.maxValue);
if (IntervalMath.numberValue(this.modelValue) >= min && IntervalMath.numberValue(this.modelValue) <= max) {
const advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue,
this.useCalendarIntervals);
if (advanced && this.disabledAdvanced) {
if (advanced && this.disabledAdvancedState) {
this.advanced = false;
this.boundInterval();
} else {
this.advanced = advanced;
@ -211,7 +224,7 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe
const min = this.timeService.boundMinInterval(this.minValue);
const max = this.timeService.boundMaxInterval(this.maxValue);
this.intervals = this.timeService.getIntervals(this.minValue, this.maxValue, this.useCalendarIntervals);
if (!this.disabledAdvanced) {
if (!this.disabledAdvancedState) {
this.intervals.push(this.customTimeInterval);
}
if (this.rendered) {

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

@ -25,31 +25,39 @@
<mat-icon class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
<form [formGroup]="timewindowForm" class="mat-content">
<form [formGroup]="timewindowForm" mat-dialog-content class="timewindow-settings-form 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>
<div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
{{ 'timewindow.hide-time-range' | translate }}
</mat-slide-toggle>
<ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
<tb-toggle-select appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
</tb-toggle-select>
</ng-container>
<ng-container *ngTemplateOutlet="timezoneSelection">
</ng-container>
</div>
<mat-slide-toggle *ngIf="!quickIntervalOnly && timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
class="mat-slide fixed-title-width" formControlName="hideLastInterval">
{{ 'timewindow.hide-last-interval' | translate }}
</mat-slide-toggle>
<mat-slide-toggle *ngIf="!quickIntervalOnly && timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
class="mat-slide fixed-title-width" formControlName="hideQuickInterval">
{{ 'timewindow.hide-relative-interval' | translate }}
</mat-slide-toggle>
<ng-container formGroupName="realtime">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
{{ 'timewindow.disable-custom-interval' | translate }}
</mat-slide-toggle>
<tb-timeinterval
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
</tb-timeinterval>
@ -70,30 +78,36 @@
</section>
<ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container>
<ng-container *ngTemplateOutlet="timezoneSelectionPanel">
</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>
<section class="tb-form-panel stroked"><div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
{{ 'timewindow.hide-time-range' | translate }}
</mat-slide-toggle>
<ng-container formGroupName="history">
<tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
</tb-toggle-select>
</ng-container>
<!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideLastInterval">-->
<!-- {{ 'timewindow.hide-last-interval' | translate }}-->
<!-- </mat-slide-toggle>-->
<!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval">-->
<!-- {{ 'timewindow.hide-relative-interval' | translate }}-->
<!-- </mat-slide-toggle>-->
<ng-container formGroupName="history">
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomInterval">
{{ 'timewindow.disable-custom-interval' | translate }}
</mat-slide-toggle>
<tb-timeinterval
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
</tb-timeinterval>
@ -124,14 +138,19 @@
</section>
<ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container>
<ng-container *ngTemplateOutlet="timezoneSelectionPanel">
</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>
<div *ngIf="aggregation" class="tb-flex column">
<section class="tb-form-panel stroked">
<div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggregation">
{{ 'timewindow.hide-aggregation' | translate }}
</mat-slide-toggle>
<ng-container formGroupName="aggregation">
<mat-form-field subscriptSizing="dynamic" appearance="outline">
<mat-select formControlName="type">
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
@ -139,58 +158,80 @@
</mat-option>
</mat-select>
</mat-form-field>
</section>
</ng-container>
</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>
<section class="tb-form-panel stroked"
*ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
<div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">
{{ 'timewindow.hide-max-values' | translate }}
</mat-slide-toggle>
<div formGroupName="aggregation" 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>
</section>
</ng-container>
</div>
</section>
<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>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">
{{ 'timewindow.hide-group-interval' | translate }}
</mat-slide-toggle>
<ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
{{ 'timewindow.disable-custom-interval' | translate }}
</mat-slide-toggle>
<tb-timeinterval
formControlName="interval"
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline">
appearance="outline"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value">
</tb-timeinterval>
</ng-container>
<ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
{{ 'timewindow.disable-custom-interval' | translate }}
</mat-slide-toggle>
<tb-timeinterval
formControlName="interval"
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline">
appearance="outline"
[disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value">
</tb-timeinterval>
</ng-container>
</section>
</div>
</ng-template>
<ng-template #timezoneSelection>
<tb-timezone asButton strokedButton noMargin
localBrowserTimezonePlaceholderOnEmpty="true"
formControlName="timezone">
</tb-timezone>
<ng-template #timezoneSelectionPanel>
<section class="tb-form-panel stroked tb-flex">
<div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideTimezone">
{{ 'timewindow.hide-timezone' | translate }}
</mat-slide-toggle>
<tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true"
formControlName="timezone"
subscriptSizing="dynamic"
appearance="outline"
displayLabel="false">
</tb-timezone-select>
</section>
</ng-template>
</form>
<mat-divider></mat-divider>

17
ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss
View File

@ -22,17 +22,17 @@
max-width: 100%;
background-color: #fff;
.tb-form-panel {
padding: 12px;
gap: 12px;
}
.mat-content {
overflow: hidden;
.timewindow-settings-form {
width: 600px;
.tb-flex {
gap: 16px;
}
&.mat-mdc-dialog-content {
overflow: hidden;
padding: 0;
}
}
.limit-slider-container {
@ -59,7 +59,8 @@
}
:host ::ng-deep {
.mat-mdc-tab-group:not(.tb-headless) {
.mat-mdc-tab-group {
min-height: 100%;
height: 100%;
}

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

@ -28,15 +28,16 @@ import {
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 { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { TimeService } from '@core/services/time.service';
import { isDefined, isDefinedAndNotNull } from '@core/utils';
import { isDefined, isDefinedAndNotNull, 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';
export interface TimewindowConfigDialogData {
quickIntervalOnly: boolean;
aggregation: boolean;
timewindow: Timewindow;
}
@ -49,9 +50,11 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
quickIntervalOnly = false;
aggregation = false;
timewindow: Timewindow;
timewindowForm: UntypedFormGroup;
timewindowForm: FormGroup;
historyTypes = HistoryWindowType;
@ -94,11 +97,12 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
constructor(@Inject(MAT_DIALOG_DATA) public data: TimewindowConfigDialogData,
public dialogRef: MatDialogRef<TimewindowConfigDialogComponent, Timewindow>,
protected store: Store<AppState>,
public fb: UntypedFormBuilder,
public fb: FormBuilder,
private timeService: TimeService,
private translate: TranslateService) {
super(store);
this.quickIntervalOnly = data.quickIntervalOnly;
this.aggregation = data.aggregation;
this.timewindow = data.timewindow;
if (!this.quickIntervalOnly) {
@ -112,13 +116,6 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
}
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;
@ -128,14 +125,22 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
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 ]
quickInterval: [ isDefined(realtime?.quickInterval) ? this.timewindow.realtime.quickInterval : null ],
disableCustomInterval: [ isDefinedAndNotNull(this.timewindow.realtime?.disableCustomInterval)
? this.timewindow.realtime?.disableCustomInterval : false ],
disableCustomGroupInterval: [ isDefinedAndNotNull(this.timewindow.realtime?.disableCustomGroupInterval)
? this.timewindow.realtime?.disableCustomGroupInterval : false ],
}),
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 ]
quickInterval: [ isDefined(history?.quickInterval) ? this.timewindow.history.quickInterval : null ],
disableCustomInterval: [ isDefinedAndNotNull(this.timewindow.history?.disableCustomInterval)
? this.timewindow.history?.disableCustomInterval : false ],
disableCustomGroupInterval: [ isDefinedAndNotNull(this.timewindow.history?.disableCustomGroupInterval)
? this.timewindow.history?.disableCustomGroupInterval : false ],
}),
aggregation: this.fb.group({
type: [ isDefined(aggregation?.type) ? this.timewindow.aggregation.type : null ],
@ -224,32 +229,21 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
type: timewindowFormValue.aggregation.type,
limit: timewindowFormValue.aggregation.limit
},
timezone: timewindowFormValue.timezone
timezone: timewindowFormValue.timezone,
hideInterval: timewindowFormValue.hideInterval,
hideAggregation: timewindowFormValue.hideAggregation,
hideAggInterval: timewindowFormValue.hideAggInterval,
hideTimezone: timewindowFormValue.hideTimezone
});
}
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);
this.timewindow = mergeDeep(this.timewindow, timewindowFormValue);
if (!this.aggregation) {
delete this.timewindow.aggregation;
}
this.dialogRef.close(this.timewindow);
}
cancel() {

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

@ -41,6 +41,7 @@
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindow.realtime.disableCustomInterval"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
</tb-timeinterval>
@ -87,6 +88,7 @@
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindow.history.disableCustomInterval"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
</tb-timeinterval>
@ -173,7 +175,8 @@
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline">
appearance="outline"
[disabledAdvanced]="timewindow.realtime.disableCustomGroupInterval">
</tb-timeinterval>
</ng-container>
<ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
@ -182,7 +185,8 @@
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline">
appearance="outline"
[disabledAdvanced]="timewindow.history.disableCustomGroupInterval">
</tb-timeinterval>
</ng-container>
</section>

1
ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
View File

@ -18,6 +18,7 @@
:host {
display: flex;
flex-direction: column;
width: 500px;
max-height: 100%;
max-width: 100%;
background-color: #fff;

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

@ -313,6 +313,16 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
}
}
private updateTimewindowForm() {
this.timewindowForm.patchValue(this.timewindow);
this.onHideIntervalChanged();
this.onHideLastIntervalChanged();
this.onHideQuickIntervalChanged();
this.onHideAggregationChanged();
this.onHideAggIntervalChanged();
this.onHideTimezoneChanged();
}
cancel() {
this.overlayRef.dispose();
}
@ -453,23 +463,21 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
openTimewindowConfig() {
this.prepareTimewindowConfig();
console.log(this.timewindow);
this.dialog.open<TimewindowConfigDialogComponent, TimewindowConfigDialogData, Timewindow>(
TimewindowConfigDialogComponent, {
autoFocus: false,
disableClose: false,
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: {
quickIntervalOnly: this.quickIntervalOnly,
aggregation: this.aggregation,
timewindow: this.timewindow
}
}).afterClosed()
.subscribe((res) => {
if (res) {
// update timewindow
console.log(res);
// TODO: propagate changes to form
this.timewindow = res;
this.updateTimewindowForm();
}
});
}

4
ui-ngx/src/app/shared/models/time/time.models.ts
View File

@ -81,6 +81,8 @@ export interface IntervalWindow {
export interface RealtimeWindow extends IntervalWindow{
realtimeType?: RealtimeWindowType;
disableCustomInterval?: boolean;
disableCustomGroupInterval?: boolean;
}
export interface FixedWindow {
@ -91,6 +93,8 @@ export interface FixedWindow {
export interface HistoryWindow extends IntervalWindow {
historyType?: HistoryWindowType;
fixedTimewindow?: FixedWindow;
disableCustomInterval?: boolean;
disableCustomGroupInterval?: boolean;
}
export enum AggregationType {

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -4707,6 +4707,7 @@
"hide-relative-interval": "Hide relative interval from end-users",
"hide-aggregation": "Hide aggregation from end-users",
"hide-group-interval": "Hide grouping interval from end-users",
"hide-max-values": "Hide max values from end-users",
"hide-timezone": "Hide timezone from end-users",
"disable-custom-interval": "Disable custom interval selection"
},