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

Timewindow: display full interval options list for customization

Browse Source
This commit is contained in:
Chantsova Ekaterina 2024-10-28 17:43:35 +02:00
parent aff0adbfa7
commit 7e8ea0775e
7 changed files with 105 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html
View File

@ -17,7 +17,7 @@
-->
<mat-form-field [formGroup]="aggregationTypeFormGroup"
[subscriptSizing]="subscriptSizing" [appearance]="appearance"
class="mat-block">
class="flex flex-1">
<mat-label *ngIf="displayLabel">{{ label }}</mat-label>
<mat-select [required]="required" formControlName="aggregationType">
<mat-option *ngFor="let type of aggregationTypes" [value]="type">

18
ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
View File

@ -15,22 +15,32 @@
limitations under the License.
-->
<form [formGroup]="intervalOptionsConfigForm" class="tb-interval-options-form tb-form-panel no-border">
<form [formGroup]="intervalOptionsConfigForm" class="tb-interval-options-form tb-form-panel no-border"
[style]="aggregation ? {maxWidth: '600px'} : {maxWidth: '350px'}">
<div class="tb-form-panel-title">{{ 'timewindow.edit-intervals-list' | translate }}</div>
<div class="tb-form-hint tb-primary-fill">{{ 'timewindow.edit-intervals-list-hint' | translate }}</div>
<div class="tb-form-hint tb-primary-fill">
{{ 'timewindow.edit-intervals-list-hint' | translate }} {{ aggregation ? ('timewindow.edit-grouping-intervals-list-hint' | translate) : '' }}
</div>
<div class="tb-form-table no-gap no-padding">
<div class="tb-form-table-header">
<div class="tb-form-table-header-cell">{{"timewindow.interval" | translate }}</div>
</div>
<div class="tb-form-table-body">
<mat-selection-list formControlName="allowedIntervals">
<mat-list-option *ngFor="let interval of intervals" [value]="interval.value" togglePosition="before">
<mat-list-option *ngFor="let interval of allIntervals" [value]="interval.value" togglePosition="before">
{{ interval.name | translate:interval.translateParams }}
</mat-list-option>
</mat-selection-list>
</div>
</div>
<div class="tb-flex flex-end no-gap">
<div class="flex flex-row gap-2 items-center">
<button type="button"
mat-button
color="primary"
(click)="reset()">
{{ 'action.reset' | translate }}
</button>
<span class="flex-1"></span>
<button type="button"
mat-button
(click)="cancel()">

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

@ -16,7 +16,6 @@
:host {
.tb-interval-options-form {
height: 100%;
max-width: 600px;
.tb-form-table {
overflow: hidden;

50
ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts
View File

@ -15,9 +15,18 @@
///
import { Component, Input, OnInit } from '@angular/core';
import { HistoryWindowType, RealtimeWindowType, TimewindowType } from '@shared/models/time/time.models';
import {
HistoryWindowType,
QuickTimeInterval,
QuickTimeIntervalTranslationMap,
RealtimeWindowType,
TimewindowIntervalOption,
TimewindowType
} from '@shared/models/time/time.models';
import { FormBuilder, FormGroup } from '@angular/forms';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { TimeService } from '@core/services/time.service';
import { coerceBoolean } from '@shared/decorators/coercion';
@Component({
selector: 'tb-interval-options-config-panel',
@ -26,6 +35,10 @@ import { TbPopoverComponent } from '@shared/components/popover.component';
})
export class IntervalOptionsConfigPanelComponent implements OnInit {
@Input()
@coerceBoolean()
aggregation = false;
@Input()
allowedIntervals: Array<any>;
@ -43,11 +56,25 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
intervalOptionsConfigForm: FormGroup;
intervals = [];
allIntervals: Array<TimewindowIntervalOption>;
constructor(private fb: FormBuilder) {}
private timeIntervalTranslationMap = QuickTimeIntervalTranslationMap;
constructor(private fb: FormBuilder,
private timeService: TimeService) {}
ngOnInit(): void {
if (this.intervalType === RealtimeWindowType.LAST_INTERVAL ||
this.intervalType === HistoryWindowType.LAST_INTERVAL) {
this.allIntervals = this.timeService.getIntervals(undefined, undefined, false);
} else {
const quickIntervals = this.getQuickIntervals();
this.allIntervals = quickIntervals.map(interval => ({
name: this.timeIntervalTranslationMap.get(interval),
value: interval
}));
}
this.intervalOptionsConfigForm = this.fb.group({
allowedIntervals: [this.allowedIntervals]
});
@ -55,7 +82,9 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
update() {
if (this.onClose) {
this.onClose([]);
const allowedIntervals = this.intervalOptionsConfigForm.get('allowedIntervals').value;
// if full list selected returns empty for optimization
this.onClose(allowedIntervals?.length < this.allIntervals.length ? allowedIntervals : []);
}
}
@ -65,4 +94,17 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
}
}
reset() {
this.intervalOptionsConfigForm.reset();
this.intervalOptionsConfigForm.markAsDirty();
}
private getQuickIntervals() {
const allQuickIntervals = Object.values(QuickTimeInterval);
if (this.timewindowType === TimewindowType.REALTIME) {
return allQuickIntervals.filter(interval => interval.startsWith('CURRENT_'));
}
return allQuickIntervals;
}
}

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

@ -20,6 +20,8 @@ import {
DAY,
HistoryWindowType,
historyWindowTypeTranslations,
Interval,
QuickTimeInterval,
quickTimeIntervalPeriod,
RealtimeWindowType,
realtimeWindowTypeTranslations,
@ -148,6 +150,10 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
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 ],
allowedLastIntervals: [ isDefinedAndNotNull(this.timewindow.realtime?.allowedLastIntervals)
? this.timewindow.realtime?.allowedLastIntervals : null ],
allowedQuickIntervals: [ isDefinedAndNotNull(this.timewindow.realtime?.allowedQuickIntervals)
? this.timewindow.realtime?.allowedQuickIntervals : null ],
disableCustomInterval: [ isDefinedAndNotNull(this.timewindow.realtime?.disableCustomInterval)
? this.timewindow.realtime?.disableCustomInterval : false ],
disableCustomGroupInterval: [ isDefinedAndNotNull(this.timewindow.realtime?.disableCustomGroupInterval)
@ -171,6 +177,10 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
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 ],
allowedLastIntervals: [ isDefinedAndNotNull(this.timewindow.history?.allowedLastIntervals)
? this.timewindow.history?.allowedLastIntervals : null ],
allowedQuickIntervals: [ isDefinedAndNotNull(this.timewindow.realtime?.allowedQuickIntervals)
? this.timewindow.realtime?.allowedQuickIntervals : null ],
disableCustomInterval: [ isDefinedAndNotNull(this.timewindow.history?.disableCustomInterval)
? this.timewindow.history?.disableCustomInterval : false ],
disableCustomGroupInterval: [ isDefinedAndNotNull(this.timewindow.history?.disableCustomGroupInterval)
@ -450,7 +460,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
}
}
},
{maxHeight: '90vh', height: '100%'},
{maxHeight: '500px', height: '100%'},
{}, {}, true, () => {}, {padding: 0});
aggregationConfigPopover.tbComponentRef.instance.popoverComponent = aggregationConfigPopover;
}
@ -458,26 +468,38 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
}
configureRealtimeLastIntervalOptions($event: Event) {
const resFn = (res) => {};
this.openIntervalOptionsConfig($event, [], resFn, RealtimeWindowType.LAST_INTERVAL);
const resFn = (res) => {
this.timewindowForm.get('realtime.allowedLastIntervals').patchValue(res);
};
this.openIntervalOptionsConfig($event, this.timewindowForm.get('realtime.allowedLastIntervals').value,
resFn, RealtimeWindowType.LAST_INTERVAL);
}
configureRealtimeQuickIntervalOptions($event: Event) {
const resFn = (res) => {};
this.openIntervalOptionsConfig($event, [], resFn, RealtimeWindowType.INTERVAL, TimewindowType.REALTIME);
const resFn = (res) => {
this.timewindowForm.get('realtime.allowedQuickIntervals').patchValue(res);
};
this.openIntervalOptionsConfig($event, this.timewindowForm.get('realtime.allowedQuickIntervals').value,
resFn, RealtimeWindowType.INTERVAL, TimewindowType.REALTIME);
}
configureHistoryLastIntervalOptions($event: Event) {
const resFn = (res) => {};
this.openIntervalOptionsConfig($event, [], resFn, HistoryWindowType.LAST_INTERVAL);
const resFn = (res) => {
this.timewindowForm.get('history.allowedLastIntervals').patchValue(res);
};
this.openIntervalOptionsConfig($event, this.timewindowForm.get('history.allowedLastIntervals').value,
resFn, HistoryWindowType.LAST_INTERVAL);
}
configureHistoryQuickIntervalOptions($event: Event) {
const resFn = (res) => {};
this.openIntervalOptionsConfig($event, [], resFn, HistoryWindowType.INTERVAL, TimewindowType.HISTORY);
const resFn = (res) => {
this.timewindowForm.get('history.allowedQuickIntervals').patchValue(res);
};
this.openIntervalOptionsConfig($event, this.timewindowForm.get('history.allowedQuickIntervals').value,
resFn, HistoryWindowType.INTERVAL, TimewindowType.HISTORY);
}
private openIntervalOptionsConfig($event: Event, allowedIntervals: Array<any>, resFn: (res) => void,
private openIntervalOptionsConfig($event: Event, allowedIntervals: Array<Interval | QuickTimeInterval>, resFn: (res) => void,
intervalType: RealtimeWindowType | HistoryWindowType, timewindowType?: TimewindowType) {
if ($event) {
$event.stopPropagation();
@ -489,6 +511,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
const intervalsConfigPopover = this.popoverService.displayPopover(trigger, this.renderer,
this.viewContainerRef, IntervalOptionsConfigPanelComponent, ['left', 'leftTop', 'leftBottom'], true, null,
{
aggregation: this.aggregation,
allowedIntervals: deepClone(allowedIntervals),
intervalType: intervalType,
timewindowType: timewindowType,
@ -497,7 +520,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
resFn(result);
}
},
{maxHeight: '90vh', height: '100%'},
{maxHeight: '500px', height: '100%'},
{}, {}, true, () => {}, {padding: 0});
intervalsConfigPopover.tbComponentRef.instance.popoverComponent = intervalsConfigPopover;
}

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

@ -88,6 +88,8 @@ export interface IntervalWindow {
interval?: Interval;
timewindowMs?: number;
quickInterval?: QuickTimeInterval;
allowedLastIntervals? : Array<Interval>;
allowedQuickIntervals? : Array<QuickTimeInterval>;
disableCustomInterval?: boolean;
disableCustomGroupInterval?: boolean;
hideInterval?: boolean;
@ -176,6 +178,12 @@ export interface WidgetTimewindow {
stDiff?: number;
}
export interface TimewindowIntervalOption {
name: string;
translateParams?: {[key: string]: any};
value: Interval | QuickTimeInterval;
}
export enum QuickTimeInterval {
YESTERDAY = 'YESTERDAY',
DAY_BEFORE_YESTERDAY = 'DAY_BEFORE_YESTERDAY',

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

@ -4547,7 +4547,8 @@
"edit-aggregation-functions-list-hint": "List of available options can be specified.",
"allowed-aggregation-functions": "Allowed aggregation functions",
"edit-intervals-list": "Edit intervals list",
"edit-intervals-list-hint": "List of available interval options can be specified. It is possible to configure the grouping intervals list and default grouping interval."
"edit-intervals-list-hint": "List of available interval options can be specified.",
"edit-grouping-intervals-list-hint": "It is possible to configure the grouping intervals list and default grouping interval."
},
"tooltip": {
"trigger": "Trigger",