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"> <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-label translate>datetime.from</mat-label>
<mat-datetimepicker-toggle [for]="startDatePicker" matSuffix></mat-datetimepicker-toggle> <mat-datetimepicker-toggle [for]="startDatePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #startDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker> <mat-datetimepicker #startDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startDatePicker" (ngModelChange)="onStartDateChange()"> <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startDatePicker" (ngModelChange)="onStartDateChange()">
</mat-form-field> </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-label translate>datetime.to</mat-label>
<mat-datetimepicker-toggle [for]="endDatePicker" matSuffix></mat-datetimepicker-toggle> <mat-datetimepicker-toggle [for]="endDatePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker> <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; minValue: number;
maxValue: number; maxValue: number;
disabledAdvancedState = false;
@Input() @Input()
set min(min: number) { set min(min: number) {
const minValueData = coerceNumberProperty(min); const minValueData = coerceNumberProperty(min);
@ -71,7 +73,13 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe
@Input() @Input()
@coerceBoolean() @coerceBoolean()
disabledAdvanced = false; set disabledAdvanced(disabledAdvanced: boolean) {
if (this.disabledAdvancedState !== disabledAdvanced) {
this.disabledAdvancedState = disabledAdvanced;
this.updateIntervalValue();
this.boundInterval();
}
}
@Input() @Input()
@coerceBoolean() @coerceBoolean()
@ -170,13 +178,18 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe
writeValue(interval: Interval): void { writeValue(interval: Interval): void {
this.modelValue = interval; this.modelValue = interval;
this.rendered = true; this.rendered = true;
this.updateIntervalValue();
}
private updateIntervalValue() {
if (typeof this.modelValue !== 'undefined') { if (typeof this.modelValue !== 'undefined') {
const min = this.timeService.boundMinInterval(this.minValue); const min = this.timeService.boundMinInterval(this.minValue);
const max = this.timeService.boundMaxInterval(this.maxValue); const max = this.timeService.boundMaxInterval(this.maxValue);
if (IntervalMath.numberValue(this.modelValue) >= min && IntervalMath.numberValue(this.modelValue) <= max) { if (IntervalMath.numberValue(this.modelValue) >= min && IntervalMath.numberValue(this.modelValue) <= max) {
const advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue, const advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue,
this.useCalendarIntervals); this.useCalendarIntervals);
if (advanced && this.disabledAdvanced) { if (advanced && this.disabledAdvancedState) {
this.advanced = false;
this.boundInterval(); this.boundInterval();
} else { } else {
this.advanced = advanced; this.advanced = advanced;
@ -211,7 +224,7 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe
const min = this.timeService.boundMinInterval(this.minValue); const min = this.timeService.boundMinInterval(this.minValue);
const max = this.timeService.boundMaxInterval(this.maxValue); const max = this.timeService.boundMaxInterval(this.maxValue);
this.intervals = this.timeService.getIntervals(this.minValue, this.maxValue, this.useCalendarIntervals); this.intervals = this.timeService.getIntervals(this.minValue, this.maxValue, this.useCalendarIntervals);
if (!this.disabledAdvanced) { if (!this.disabledAdvancedState) {
this.intervals.push(this.customTimeInterval); this.intervals.push(this.customTimeInterval);
} }
if (this.rendered) { 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> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
</mat-toolbar> </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-group (selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
<mat-tab label="{{ 'timewindow.realtime' | translate }}"> <mat-tab label="{{ 'timewindow.realtime' | translate }}">
<div class="tb-flex column"> <div class="tb-flex column">
<section class="tb-form-panel stroked"> <section class="tb-form-panel stroked">
<div class="tb-flex space-between" <div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
[ngClass]="{'align-end': realtimeTypeSelectionAvailable, 'align-center': !realtimeTypeSelectionAvailable }"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
<div class="tb-flex column no-flex flex-xs"> {{ 'timewindow.hide-time-range' | translate }}
<div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div> </mat-slide-toggle>
<ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable"> <ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
<tb-toggle-select appearance="fill" [options]="realtimeTimewindowOptions" formControlName="realtimeType"> <tb-toggle-select appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
</tb-toggle-select> </tb-toggle-select>
</ng-container> </ng-container>
</div>
<ng-container *ngTemplateOutlet="timezoneSelection"> <mat-slide-toggle *ngIf="!quickIntervalOnly && timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
</ng-container> class="mat-slide fixed-title-width" formControlName="hideLastInterval">
</div> {{ '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 formGroupName="realtime">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> <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 <tb-timeinterval
formControlName="timewindowMs" formControlName="timewindowMs"
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline" appearance="outline"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME && [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
</tb-timeinterval> </tb-timeinterval>
@ -70,30 +78,36 @@
</section> </section>
<ng-container *ngTemplateOutlet="aggregationConfig"> <ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container> </ng-container>
<ng-container *ngTemplateOutlet="timezoneSelectionPanel">
</ng-container>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="{{ 'timewindow.history' | translate }}"> <mat-tab label="{{ 'timewindow.history' | translate }}">
<div class="tb-flex column"> <div class="tb-flex column">
<section class="tb-form-panel stroked"> <section class="tb-form-panel stroked"><div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
<div class="tb-flex space-between align-end"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
<div class="tb-flex column no-flex flex-xs"> {{ 'timewindow.hide-time-range' | translate }}
<div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div> </mat-slide-toggle>
<ng-container formGroupName="history"> <ng-container formGroupName="history">
<tb-toggle-select appearance="fill" [options]="historyTimewindowOptions" formControlName="historyType"> <tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
</tb-toggle-select> </tb-toggle-select>
</ng-container> </ng-container>
</div> <!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideLastInterval">-->
<!-- {{ 'timewindow.hide-last-interval' | translate }}-->
<ng-container *ngTemplateOutlet="timezoneSelection"> <!-- </mat-slide-toggle>-->
</ng-container> <!-- <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval">-->
</div> <!-- {{ 'timewindow.hide-relative-interval' | translate }}-->
<!-- </mat-slide-toggle>-->
<ng-container formGroupName="history"> <ng-container formGroupName="history">
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> <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 <tb-timeinterval
formControlName="timewindowMs" formControlName="timewindowMs"
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline" appearance="outline"
[disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"> timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
</tb-timeinterval> </tb-timeinterval>
@ -124,14 +138,19 @@
</section> </section>
<ng-container *ngTemplateOutlet="aggregationConfig"> <ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container> </ng-container>
<ng-container *ngTemplateOutlet="timezoneSelectionPanel">
</ng-container>
</div> </div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
<ng-template #aggregationConfig> <ng-template #aggregationConfig>
<div class="tb-flex column"> <div *ngIf="aggregation" class="tb-flex column">
<ng-container formGroupName="aggregation"> <section class="tb-form-panel stroked">
<section class="tb-form-panel stroked"> <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
<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-form-field subscriptSizing="dynamic" appearance="outline">
<mat-select formControlName="type"> <mat-select formControlName="type">
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
@ -139,58 +158,80 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</section> </ng-container>
</section>
<section class="tb-form-panel stroked" <section class="tb-form-panel stroked"
*ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE"> *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
<div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div> <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
<div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center" <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideAggInterval">
fxLayout.xs="column" fxLayoutAlign.xs="stretch"> {{ 'timewindow.hide-max-values' | translate }}
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> </mat-slide-toggle>
<mat-slider fxFlex <div formGroupName="aggregation" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
min="{{minDatapointsLimit()}}" fxLayout.xs="column" fxLayoutAlign.xs="stretch">
max="{{maxDatapointsLimit()}}"> <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<input matSliderThumb formControlName="limit"/> <mat-slider fxFlex
</mat-slider> min="{{minDatapointsLimit()}}"
<mat-form-field class="limit-slider-value" subscriptSizing="dynamic" appearance="outline"> max="{{maxDatapointsLimit()}}">
<input matInput formControlName="limit" type="number" step="1" <input matSliderThumb formControlName="limit"/>
[value]="timewindowForm.get('aggregation.limit').value" </mat-slider>
min="{{minDatapointsLimit()}}" <mat-form-field class="limit-slider-value" subscriptSizing="dynamic" appearance="outline">
max="{{maxDatapointsLimit()}}"/> <input matInput formControlName="limit" type="number" step="1"
</mat-form-field> [value]="timewindowForm.get('aggregation.limit').value"
</div> min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"/>
</mat-form-field>
</div> </div>
</section> </div>
</ng-container> </section>
<section class="tb-form-panel stroked" [fxShow]="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE"> <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> <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"> <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 <tb-timeinterval
formControlName="interval" formControlName="interval"
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()" [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
useCalendarIntervals useCalendarIntervals
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline"> appearance="outline"
[disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value">
</tb-timeinterval> </tb-timeinterval>
</ng-container> </ng-container>
<ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY"> <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 <tb-timeinterval
formControlName="interval" formControlName="interval"
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()" [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
useCalendarIntervals useCalendarIntervals
subscriptSizing="dynamic" subscriptSizing="dynamic"
appearance="outline"> appearance="outline"
[disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value">
</tb-timeinterval> </tb-timeinterval>
</ng-container> </ng-container>
</section> </section>
</div> </div>
</ng-template> </ng-template>
<ng-template #timezoneSelection> <ng-template #timezoneSelectionPanel>
<tb-timezone asButton strokedButton noMargin <section class="tb-form-panel stroked tb-flex">
localBrowserTimezonePlaceholderOnEmpty="true" <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
formControlName="timezone"> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideTimezone">
</tb-timezone> {{ '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> </ng-template>
</form> </form>
<mat-divider></mat-divider> <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%; max-width: 100%;
background-color: #fff; background-color: #fff;
.tb-form-panel { .timewindow-settings-form {
padding: 12px; width: 600px;
gap: 12px;
}
.mat-content {
overflow: hidden;
.tb-flex { .tb-flex {
gap: 16px; gap: 16px;
} }
&.mat-mdc-dialog-content {
overflow: hidden;
padding: 0;
}
} }
.limit-slider-container { .limit-slider-container {
@ -59,7 +59,8 @@
} }
:host ::ng-deep { :host ::ng-deep {
.mat-mdc-tab-group:not(.tb-headless) { .mat-mdc-tab-group {
min-height: 100%;
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 { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; 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 { 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 { ToggleHeaderOption } from '@shared/components/toggle-header.component';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
export interface TimewindowConfigDialogData { export interface TimewindowConfigDialogData {
quickIntervalOnly: boolean; quickIntervalOnly: boolean;
aggregation: boolean;
timewindow: Timewindow; timewindow: Timewindow;
} }
@ -49,9 +50,11 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
quickIntervalOnly = false; quickIntervalOnly = false;
aggregation = false;
timewindow: Timewindow; timewindow: Timewindow;
timewindowForm: UntypedFormGroup; timewindowForm: FormGroup;
historyTypes = HistoryWindowType; historyTypes = HistoryWindowType;
@ -94,11 +97,12 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
constructor(@Inject(MAT_DIALOG_DATA) public data: TimewindowConfigDialogData, constructor(@Inject(MAT_DIALOG_DATA) public data: TimewindowConfigDialogData,
public dialogRef: MatDialogRef<TimewindowConfigDialogComponent, Timewindow>, public dialogRef: MatDialogRef<TimewindowConfigDialogComponent, Timewindow>,
protected store: Store<AppState>, protected store: Store<AppState>,
public fb: UntypedFormBuilder, public fb: FormBuilder,
private timeService: TimeService, private timeService: TimeService,
private translate: TranslateService) { private translate: TranslateService) {
super(store); super(store);
this.quickIntervalOnly = data.quickIntervalOnly; this.quickIntervalOnly = data.quickIntervalOnly;
this.aggregation = data.aggregation;
this.timewindow = data.timewindow; this.timewindow = data.timewindow;
if (!this.quickIntervalOnly) { if (!this.quickIntervalOnly) {
@ -112,13 +116,6 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
} }
ngOnInit(): void { 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 realtime = this.timewindow.realtime;
const history = this.timewindow.history; const history = this.timewindow.history;
const aggregation = this.timewindow.aggregation; 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 ], realtimeType: [ isDefined(realtime?.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL ],
timewindowMs: [ isDefined(realtime?.timewindowMs) ? this.timewindow.realtime.timewindowMs : null ], timewindowMs: [ isDefined(realtime?.timewindowMs) ? this.timewindow.realtime.timewindowMs : null ],
interval: [ isDefined(realtime?.interval) ? this.timewindow.realtime.interval : 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({ history: this.fb.group({
historyType: [ isDefined(history?.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL ], historyType: [ isDefined(history?.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL ],
timewindowMs: [ isDefined(history?.timewindowMs) ? this.timewindow.history.timewindowMs : null ], timewindowMs: [ isDefined(history?.timewindowMs) ? this.timewindow.history.timewindowMs : null ],
interval: [ isDefined(history?.interval) ? this.timewindow.history.interval : null ], interval: [ isDefined(history?.interval) ? this.timewindow.history.interval : null ],
fixedTimewindow: [ isDefined(history?.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : 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({ aggregation: this.fb.group({
type: [ isDefined(aggregation?.type) ? this.timewindow.aggregation.type : null ], type: [ isDefined(aggregation?.type) ? this.timewindow.aggregation.type : null ],
@ -224,32 +229,21 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
type: timewindowFormValue.aggregation.type, type: timewindowFormValue.aggregation.type,
limit: timewindowFormValue.aggregation.limit limit: timewindowFormValue.aggregation.limit
}, },
timezone: timewindowFormValue.timezone timezone: timewindowFormValue.timezone,
hideInterval: timewindowFormValue.hideInterval,
hideAggregation: timewindowFormValue.hideAggregation,
hideAggInterval: timewindowFormValue.hideAggInterval,
hideTimezone: timewindowFormValue.hideTimezone
}); });
} }
update() { update() {
const timewindowFormValue = this.timewindowForm.getRawValue(); const timewindowFormValue = this.timewindowForm.getRawValue();
this.timewindow.realtime = { this.timewindow = mergeDeep(this.timewindow, timewindowFormValue);
realtimeType: timewindowFormValue.realtime.realtimeType, if (!this.aggregation) {
timewindowMs: timewindowFormValue.realtime.timewindowMs, delete this.timewindow.aggregation;
quickInterval: timewindowFormValue.realtime.quickInterval, }
interval: timewindowFormValue.realtime.interval this.dialogRef.close(this.timewindow);
};
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() { cancel() {

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

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

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

@ -18,6 +18,7 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 500px;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
background-color: #fff; 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() { cancel() {
this.overlayRef.dispose(); this.overlayRef.dispose();
} }
@ -453,23 +463,21 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
openTimewindowConfig() { openTimewindowConfig() {
this.prepareTimewindowConfig(); this.prepareTimewindowConfig();
console.log(this.timewindow);
this.dialog.open<TimewindowConfigDialogComponent, TimewindowConfigDialogData, Timewindow>( this.dialog.open<TimewindowConfigDialogComponent, TimewindowConfigDialogData, Timewindow>(
TimewindowConfigDialogComponent, { TimewindowConfigDialogComponent, {
autoFocus: false, autoFocus: false,
disableClose: false, disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: { data: {
quickIntervalOnly: this.quickIntervalOnly, quickIntervalOnly: this.quickIntervalOnly,
aggregation: this.aggregation,
timewindow: this.timewindow timewindow: this.timewindow
} }
}).afterClosed() }).afterClosed()
.subscribe((res) => { .subscribe((res) => {
if (res) { if (res) {
// update timewindow
console.log(res);
// TODO: propagate changes to form
this.timewindow = res; 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{ export interface RealtimeWindow extends IntervalWindow{
realtimeType?: RealtimeWindowType; realtimeType?: RealtimeWindowType;
disableCustomInterval?: boolean;
disableCustomGroupInterval?: boolean;
} }
export interface FixedWindow { export interface FixedWindow {
@ -91,6 +93,8 @@ export interface FixedWindow {
export interface HistoryWindow extends IntervalWindow { export interface HistoryWindow extends IntervalWindow {
historyType?: HistoryWindowType; historyType?: HistoryWindowType;
fixedTimewindow?: FixedWindow; fixedTimewindow?: FixedWindow;
disableCustomInterval?: boolean;
disableCustomGroupInterval?: boolean;
} }
export enum AggregationType { 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-relative-interval": "Hide relative interval from end-users",
"hide-aggregation": "Hide aggregation from end-users", "hide-aggregation": "Hide aggregation from end-users",
"hide-group-interval": "Hide grouping interval 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", "hide-timezone": "Hide timezone from end-users",
"disable-custom-interval": "Disable custom interval selection" "disable-custom-interval": "Disable custom interval selection"
}, },