tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: hide options and apply configured parameters

pull/11633/head
Chantsova Ekaterina 2 years ago
parent
9ca85d5cc7
commit
5aac775487
10 changed files with 180 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ui-ngx/src/app/shared/components/time/datetime-period.component.html
  2. 19
      ui-ngx/src/app/shared/components/time/timeinterval.component.ts
  3. 159
      ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
  4. 17
      ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss
  5. 62
      ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts
  6. 8
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
  7. 1
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
  8. 18
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
  9. 4
      ui-ngx/src/app/shared/models/time/time.models.ts
  10. 1
      ui-ngx/src/assets/locale/locale.constant-en_US.json

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"
},

Write Preview
Loading…
Cancel
Save