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

UI: new hide options implementation

pull/11633/head
Chantsova Ekaterina 2 years ago
parent
1284ad0aad
commit
d06d31c09a
6 changed files with 239 additions and 190 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts
  2. 2
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
  3. 297
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
  4. 1
      ui-ngx/src/app/shared/components/time/timewindow.component.html
  5. 12
      ui-ngx/src/app/shared/components/time/timewindow.component.ts
  6. 93
      ui-ngx/src/app/shared/models/time/time.models.ts

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

@ -20,8 +20,10 @@ import {
AggregationType, AggregationType,
DAY, DAY,
HistoryWindowType, HistoryWindowType,
historyWindowTypeTranslations,
quickTimeIntervalPeriod, quickTimeIntervalPeriod,
RealtimeWindowType, RealtimeWindowType,
realtimeWindowTypeTranslations,
Timewindow, Timewindow,
TimewindowType TimewindowType
} from '@shared/models/time/time.models'; } from '@shared/models/time/time.models';
@ -72,22 +74,22 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
realtimeTimewindowOptions: ToggleHeaderOption[] = [ realtimeTimewindowOptions: ToggleHeaderOption[] = [
{ {
name: this.translate.instant('timewindow.relative'), name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.INTERVAL)),
value: this.realtimeTypes.INTERVAL value: this.realtimeTypes.INTERVAL
} }
]; ];
historyTimewindowOptions: ToggleHeaderOption[] = [ historyTimewindowOptions: ToggleHeaderOption[] = [
{ {
name: this.translate.instant('timewindow.last'), name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.LAST_INTERVAL)),
value: this.historyTypes.LAST_INTERVAL value: this.historyTypes.LAST_INTERVAL
}, },
{ {
name: this.translate.instant('timewindow.fixed'), name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.FIXED)),
value: this.historyTypes.FIXED value: this.historyTypes.FIXED
}, },
{ {
name: this.translate.instant('timewindow.relative'), name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.INTERVAL)),
value: this.historyTypes.INTERVAL value: this.historyTypes.INTERVAL
} }
]; ];
@ -107,7 +109,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
if (!this.quickIntervalOnly) { if (!this.quickIntervalOnly) {
this.realtimeTimewindowOptions.unshift({ this.realtimeTimewindowOptions.unshift({
name: this.translate.instant('timewindow.last'), name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.LAST_INTERVAL)),
value: this.realtimeTypes.LAST_INTERVAL value: this.realtimeTypes.LAST_INTERVAL
}); });
} }
@ -176,18 +178,6 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
limit: [ isDefined(aggregation?.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null ] limit: [ isDefined(aggregation?.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null ]
}), }),
timezone: [ isDefined(this.timewindow.timezone) ? this.timewindow.timezone : null ], timezone: [ isDefined(this.timewindow.timezone) ? this.timewindow.timezone : null ],
hideInterval: [ isDefinedAndNotNull(this.timewindow.hideInterval)
? this.timewindow.hideInterval : false ],
hideLastInterval: [{
value: isDefinedAndNotNull(this.timewindow.hideLastInterval)
? this.timewindow.hideLastInterval : false,
disabled: this.timewindow.hideInterval
}],
hideQuickInterval: [{
value: isDefinedAndNotNull(this.timewindow.hideQuickInterval)
? this.timewindow.hideQuickInterval : false,
disabled: this.timewindow.hideInterval
}],
hideAggregation: [ isDefinedAndNotNull(this.timewindow.hideAggregation) hideAggregation: [ isDefinedAndNotNull(this.timewindow.hideAggregation)
? this.timewindow.hideAggregation : false ], ? this.timewindow.hideAggregation : false ],
hideAggInterval: [ isDefinedAndNotNull(this.timewindow.hideAggInterval) hideAggInterval: [ isDefinedAndNotNull(this.timewindow.hideAggInterval)

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

@ -131,7 +131,7 @@
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
<ng-template #aggregationConfig> <ng-template #aggregationConfig>
<div *ngIf="aggregation" class="tb-flex column"> <div *ngIf="aggregationOptionsAvailable" class="tb-flex column">
<ng-container formGroupName="aggregation"> <ng-container formGroupName="aggregation">
<section class="tb-form-panel stroked" *ngIf="isEdit || !timewindow.hideAggregation"> <section class="tb-form-panel stroked" *ngIf="isEdit || !timewindow.hideAggregation">
<div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div> <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>

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

@ -20,8 +20,10 @@ import {
AggregationType, AggregationType,
DAY, DAY,
HistoryWindowType, HistoryWindowType,
historyWindowTypeTranslations,
quickTimeIntervalPeriod, quickTimeIntervalPeriod,
RealtimeWindowType, RealtimeWindowType,
realtimeWindowTypeTranslations,
Timewindow, Timewindow,
TimewindowType TimewindowType
} from '@shared/models/time/time.models'; } from '@shared/models/time/time.models';
@ -30,7 +32,7 @@ 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 { UntypedFormBuilder, UntypedFormGroup, 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 } from '@core/utils';
import { OverlayRef } from '@angular/cdk/overlay'; import { OverlayRef } from '@angular/cdk/overlay';
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';
@ -91,25 +93,13 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
realtimeTimewindowOptions: ToggleHeaderOption[] = []; realtimeTimewindowOptions: ToggleHeaderOption[] = [];
historyTimewindowOptions: ToggleHeaderOption[] = [ historyTimewindowOptions: ToggleHeaderOption[] = [];
{
name: this.translate.instant('timewindow.last'),
value: this.historyTypes.LAST_INTERVAL
},
{
name: this.translate.instant('timewindow.fixed'),
value: this.historyTypes.FIXED
},
{
name: this.translate.instant('timewindow.relative'),
value: this.historyTypes.INTERVAL
}
];
realtimeTypeSelectionAvailable: boolean; realtimeTypeSelectionAvailable: boolean;
realtimeIntervalSelectionAvailable: boolean; realtimeIntervalSelectionAvailable: boolean;
historyTypeSelectionAvailable: boolean; historyTypeSelectionAvailable: boolean;
historyIntervalSelectionAvailable: boolean; historyIntervalSelectionAvailable: boolean;
aggregationOptionsAvailable: boolean;
constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData, constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
public overlayRef: OverlayRef, public overlayRef: OverlayRef,
@ -128,39 +118,45 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.timezone = data.timezone; this.timezone = data.timezone;
this.isEdit = data.isEdit; this.isEdit = data.isEdit;
// for backward compatibility if ((this.isEdit || !this.timewindow.realtime.hideLastInterval) && !this.quickIntervalOnly) {
if (isDefinedAndNotNull(this.timewindow.hideInterval)) { this.realtimeTimewindowOptions.push({
this.timewindow.realtime.hideInterval = this.timewindow.hideInterval; name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.LAST_INTERVAL)),
this.timewindow.history.hideInterval = this.timewindow.hideInterval; value: this.realtimeTypes.LAST_INTERVAL
// delete this.timewindow.hideInterval; });
}
if (isDefinedAndNotNull(this.timewindow.hideLastInterval)) {
this.timewindow.realtime.hideLastInterval = this.timewindow.hideLastInterval;
// delete this.timewindow.hideLastInterval;
} }
if (isDefinedAndNotNull(this.timewindow.hideQuickInterval)) {
this.timewindow.realtime.hideQuickInterval = this.timewindow.hideQuickInterval; if (this.isEdit || !this.timewindow.realtime.hideQuickInterval || this.quickIntervalOnly) {
// delete this.timewindow.hideQuickInterval; this.realtimeTimewindowOptions.push({
name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.INTERVAL)),
value: this.realtimeTypes.INTERVAL
});
} }
if (this.forAllTimeEnabled) { if (this.forAllTimeEnabled) {
this.historyTimewindowOptions.unshift({ this.historyTimewindowOptions.push({
name: this.translate.instant('timewindow.for-all-time'), name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.FOR_ALL_TIME)),
value: this.historyTypes.FOR_ALL_TIME value: this.historyTypes.FOR_ALL_TIME
}); });
} }
if ((this.isEdit || !this.timewindow.realtime.hideLastInterval) && !this.quickIntervalOnly) { if (this.isEdit || !this.timewindow.history.hideLastInterval) {
this.realtimeTimewindowOptions.push({ this.historyTimewindowOptions.push({
name: this.translate.instant('timewindow.last'), name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.LAST_INTERVAL)),
value: this.realtimeTypes.LAST_INTERVAL value: this.historyTypes.LAST_INTERVAL
}); });
} }
if (this.isEdit || !this.timewindow.realtime.hideQuickInterval || this.quickIntervalOnly) { if (this.isEdit || !this.timewindow.history.hideFixedInterval) {
this.realtimeTimewindowOptions.push({ this.historyTimewindowOptions.push({
name: this.translate.instant('timewindow.relative'), name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.FIXED)),
value: this.realtimeTypes.INTERVAL value: this.historyTypes.FIXED
});
}
if (this.isEdit || !this.timewindow.history.hideQuickInterval) {
this.historyTimewindowOptions.push({
name: this.translate.instant(historyWindowTypeTranslations.get(HistoryWindowType.INTERVAL)),
value: this.historyTypes.INTERVAL
}); });
} }
@ -168,13 +164,14 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.historyTypeSelectionAvailable = this.historyTimewindowOptions.length > 1; this.historyTypeSelectionAvailable = this.historyTimewindowOptions.length > 1;
this.realtimeIntervalSelectionAvailable = this.isEdit || !(this.timewindow.realtime.hideInterval || this.realtimeIntervalSelectionAvailable = this.isEdit || !(this.timewindow.realtime.hideInterval ||
(this.timewindow.realtime.hideLastInterval && this.timewindow.realtime.hideQuickInterval)); (this.timewindow.realtime.hideLastInterval && this.timewindow.realtime.hideQuickInterval));
this.historyIntervalSelectionAvailable = this.isEdit || !this.timewindow.hideInterval; this.historyIntervalSelectionAvailable = this.isEdit || !(this.timewindow.history.hideInterval ||
(this.timewindow.history.hideLastInterval && this.timewindow.history.hideQuickInterval && this.timewindow.history.hideFixedInterval));
this.aggregationOptionsAvailable = this.aggregation && (this.isEdit ||
!(this.timewindow.hideAggregation && this.timewindow.hideAggInterval));
} }
ngOnInit(): void { ngOnInit(): void {
const hideInterval = this.timewindow.hideInterval || false;
const hideLastInterval = this.timewindow.realtime.hideLastInterval || false;
const hideQuickInterval = this.timewindow.realtime.hideQuickInterval || false;
const hideAggregation = this.timewindow.hideAggregation || false; const hideAggregation = this.timewindow.hideAggregation || false;
const hideAggInterval = this.timewindow.hideAggInterval || false; const hideAggInterval = this.timewindow.hideAggInterval || false;
const hideTimezone = this.timewindow.hideTimezone || false; const hideTimezone = this.timewindow.hideTimezone || false;
@ -186,51 +183,51 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.timewindowForm = this.fb.group({ this.timewindowForm = this.fb.group({
realtime: this.fb.group({ realtime: this.fb.group({
realtimeType: [{ realtimeType: [{
value: isDefined(realtime?.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL, value: isDefined(realtime?.realtimeType) ? realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL,
disabled: hideInterval disabled: realtime.hideInterval
}], }],
timewindowMs: [{ timewindowMs: [{
value: isDefined(realtime?.timewindowMs) ? this.timewindow.realtime.timewindowMs : null, value: isDefined(realtime?.timewindowMs) ? realtime.timewindowMs : null,
disabled: hideInterval || hideLastInterval disabled: realtime.hideInterval || realtime.hideLastInterval
}], }],
interval: [{ interval: [{
value:isDefined(realtime?.interval) ? this.timewindow.realtime.interval : null, value:isDefined(realtime?.interval) ? realtime.interval : null,
disabled: hideAggInterval disabled: hideAggInterval
}], }],
quickInterval: [{ quickInterval: [{
value: isDefined(realtime?.quickInterval) ? this.timewindow.realtime.quickInterval : null, value: isDefined(realtime?.quickInterval) ? realtime.quickInterval : null,
disabled: hideInterval || hideQuickInterval disabled: realtime.hideInterval || realtime.hideQuickInterval
}] }]
}), }),
history: this.fb.group({ history: this.fb.group({
historyType: [{ historyType: [{
value: isDefined(history?.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL, value: isDefined(history?.historyType) ? history.historyType : HistoryWindowType.LAST_INTERVAL,
disabled: hideInterval disabled: history.hideInterval
}], }],
timewindowMs: [{ timewindowMs: [{
value: isDefined(history?.timewindowMs) ? this.timewindow.history.timewindowMs : null, value: isDefined(history?.timewindowMs) ? history.timewindowMs : null,
disabled: hideInterval disabled: history.hideInterval || history.hideLastInterval
}], }],
interval: [{ interval: [{
value:isDefined(history?.interval) ? this.timewindow.history.interval : null, value:isDefined(history?.interval) ? history.interval : null,
disabled: hideAggInterval disabled: hideAggInterval
}], }],
fixedTimewindow: [{ fixedTimewindow: [{
value: isDefined(history?.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : null, value: isDefined(history?.fixedTimewindow) ? history.fixedTimewindow : null,
disabled: hideInterval disabled: history.hideInterval || history.hideFixedInterval
}], }],
quickInterval: [{ quickInterval: [{
value: isDefined(history?.quickInterval) ? this.timewindow.history.quickInterval : null, value: isDefined(history?.quickInterval) ? history.quickInterval : null,
disabled: hideInterval disabled: history.hideInterval || history.hideQuickInterval
}] }]
}), }),
aggregation: this.fb.group({ aggregation: this.fb.group({
type: [{ type: [{
value: isDefined(aggregation?.type) ? this.timewindow.aggregation.type : null, value: isDefined(aggregation?.type) ? aggregation.type : null,
disabled: hideAggregation disabled: hideAggregation
}], }],
limit: [{ limit: [{
value: isDefined(aggregation?.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null, value: isDefined(aggregation?.limit) ? this.checkLimit(aggregation.limit) : null,
disabled: hideAggInterval disabled: hideAggInterval
}, []] }, []]
}), }),
@ -330,12 +327,71 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
private updateTimewindowForm() { private updateTimewindowForm() {
this.timewindowForm.patchValue(this.timewindow); this.timewindowForm.patchValue(this.timewindow);
this.onHideIntervalChanged();
this.onHideLastIntervalChanged(); if (this.timewindow.realtime.hideInterval) {
this.onHideQuickIntervalChanged(); this.timewindowForm.get('realtime.realtimeType').disable({emitEvent: false});
this.onHideAggregationChanged(); this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false});
this.onHideAggIntervalChanged(); this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false});
this.onHideTimezoneChanged(); } else {
this.timewindowForm.get('realtime.realtimeType').enable({emitEvent: false});
if (this.timewindow.realtime.hideLastInterval) {
this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false});
} else {
this.timewindowForm.get('realtime.timewindowMs').enable({emitEvent: false});
}
if (this.timewindow.realtime.hideQuickInterval) {
this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false});
} else {
this.timewindowForm.get('realtime.quickInterval').enable({emitEvent: false});
}
}
if (this.timewindow.history.hideInterval) {
this.timewindowForm.get('history.historyType').disable({emitEvent: false});
this.timewindowForm.get('history.timewindowMs').disable({emitEvent: false});
this.timewindowForm.get('history.fixedTimewindow').disable({emitEvent: false});
this.timewindowForm.get('history.quickInterval').disable({emitEvent: false});
} else {
this.timewindowForm.get('history.historyType').enable({emitEvent: false});
if (this.timewindow.history.hideLastInterval) {
this.timewindowForm.get('history.timewindowMs').disable({emitEvent: false});
} else {
this.timewindowForm.get('history.timewindowMs').enable({emitEvent: false});
}
if (this.timewindow.history.hideFixedInterval) {
this.timewindowForm.get('history.fixedTimewindow').disable({emitEvent: false});
} else {
this.timewindowForm.get('history.fixedTimewindow').enable({emitEvent: false});
}
if (this.timewindow.history.hideQuickInterval) {
this.timewindowForm.get('history.quickInterval').disable({emitEvent: false});
} else {
this.timewindowForm.get('history.quickInterval').enable({emitEvent: false});
}
}
if (this.timewindow.hideAggregation) {
this.timewindowForm.get('aggregation.type').disable({emitEvent: false});
} else {
this.timewindowForm.get('aggregation.type').enable({emitEvent: false});
}
if (this.timewindow.hideAggInterval) {
this.timewindowForm.get('aggregation.limit').disable({emitEvent: false});
this.timewindowForm.get('realtime.interval').disable({emitEvent: false});
this.timewindowForm.get('history.interval').disable({emitEvent: false});
} else {
this.timewindowForm.get('aggregation.limit').enable({emitEvent: false});
this.timewindowForm.get('realtime.interval').enable({emitEvent: false});
this.timewindowForm.get('history.interval').enable({emitEvent: false});
}
if (this.timewindow.hideTimezone) {
this.timewindowForm.get('timezone').disable({emitEvent: false});
} else {
this.timewindowForm.get('timezone').enable({emitEvent: false});
}
this.timewindowForm.markAsDirty();
} }
cancel() { cancel() {
@ -392,89 +448,34 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
} }
} }
onHideIntervalChanged() { // TODO: pay attention to selecting another option on hiding interval in config
if (this.timewindow.hideInterval) { // onHideLastIntervalChanged() {
this.timewindowForm.get('history.historyType').disable({emitEvent: false}); // if (this.timewindow.realtime.hideLastInterval) {
this.timewindowForm.get('history.timewindowMs').disable({emitEvent: false}); // this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false});
this.timewindowForm.get('history.fixedTimewindow').disable({emitEvent: false}); // if (!this.timewindow.realtime.hideQuickInterval) {
this.timewindowForm.get('history.quickInterval').disable({emitEvent: false}); // this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.INTERVAL);
this.timewindowForm.get('realtime.realtimeType').disable({emitEvent: false}); // }
this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false}); // } else {
this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false}); // if (!this.timewindow.hideInterval) {
} else { // this.timewindowForm.get('realtime.timewindowMs').enable({emitEvent: false});
this.timewindowForm.get('history.historyType').enable({emitEvent: false}); // }
this.timewindowForm.get('history.timewindowMs').enable({emitEvent: false}); // }
this.timewindowForm.get('history.fixedTimewindow').enable({emitEvent: false}); // this.timewindowForm.markAsDirty();
this.timewindowForm.get('history.quickInterval').enable({emitEvent: false}); // }
this.timewindowForm.get('realtime.realtimeType').enable({emitEvent: false});
if (!this.timewindow.realtime.hideLastInterval) { // onHideQuickIntervalChanged() {
this.timewindowForm.get('realtime.timewindowMs').enable({emitEvent: false}); // if (this.timewindow.realtime.hideQuickInterval) {
} // this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false});
if (!this.timewindow.realtime.hideQuickInterval) { // if (!this.timewindow.realtime.hideLastInterval) {
this.timewindowForm.get('realtime.quickInterval').enable({emitEvent: false}); // this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.LAST_INTERVAL);
} // }
} // } else {
this.timewindowForm.markAsDirty(); // if (!this.timewindow.hideInterval) {
} // this.timewindowForm.get('realtime.quickInterval').enable({emitEvent: false});
// }
onHideLastIntervalChanged() { // }
if (this.timewindow.realtime.hideLastInterval) { // this.timewindowForm.markAsDirty();
this.timewindowForm.get('realtime.timewindowMs').disable({emitEvent: false}); // }
if (!this.timewindow.realtime.hideQuickInterval) {
this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.INTERVAL);
}
} else {
if (!this.timewindow.hideInterval) {
this.timewindowForm.get('realtime.timewindowMs').enable({emitEvent: false});
}
}
this.timewindowForm.markAsDirty();
}
onHideQuickIntervalChanged() {
if (this.timewindow.realtime.hideQuickInterval) {
this.timewindowForm.get('realtime.quickInterval').disable({emitEvent: false});
if (!this.timewindow.realtime.hideLastInterval) {
this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.LAST_INTERVAL);
}
} else {
if (!this.timewindow.hideInterval) {
this.timewindowForm.get('realtime.quickInterval').enable({emitEvent: false});
}
}
this.timewindowForm.markAsDirty();
}
onHideAggregationChanged() {
if (this.timewindow.hideAggregation) {
this.timewindowForm.get('aggregation.type').disable({emitEvent: false});
} else {
this.timewindowForm.get('aggregation.type').enable({emitEvent: false});
}
this.timewindowForm.markAsDirty();
}
onHideAggIntervalChanged() {
if (this.timewindow.hideAggInterval) {
this.timewindowForm.get('aggregation.limit').disable({emitEvent: false});
this.timewindowForm.get('realtime.interval').disable({emitEvent: false});
this.timewindowForm.get('history.interval').disable({emitEvent: false});
} else {
this.timewindowForm.get('aggregation.limit').enable({emitEvent: false});
this.timewindowForm.get('realtime.interval').enable({emitEvent: false});
this.timewindowForm.get('history.interval').enable({emitEvent: false});
}
this.timewindowForm.markAsDirty();
}
onHideTimezoneChanged() {
if (this.timewindow.hideTimezone) {
this.timewindowForm.get('timezone').disable({emitEvent: false});
} else {
this.timewindowForm.get('timezone').enable({emitEvent: false});
}
this.timewindowForm.markAsDirty();
}
openTimewindowConfig() { openTimewindowConfig() {
this.prepareTimewindowConfig(); this.prepareTimewindowConfig();

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

@ -44,6 +44,7 @@
[class]="{'no-padding': noPadding}" [class]="{'no-padding': noPadding}"
matTooltip="{{ 'timewindow.edit' | translate }}" matTooltip="{{ 'timewindow.edit' | translate }}"
[matTooltipPosition]="tooltipPosition" [matTooltipPosition]="tooltipPosition"
[matTooltipDisabled]="timewindowDisabled"
[style]="timewindowComponentStyle" [style]="timewindowComponentStyle"
(click)="toggleTimewindow($event)"> (click)="toggleTimewindow($event)">
<tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'left'" <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'left'"

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

@ -220,7 +220,7 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
if (this.disablePanel) { if (this.disablePanel || this.timewindowDisabled) {
return; return;
} }
const config = new OverlayConfig({ const config = new OverlayConfig({
@ -363,8 +363,14 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan
private isTimewindowDisabled(): boolean { private isTimewindowDisabled(): boolean {
return this.disabled || return this.disabled ||
(!this.isEdit && (!this.innerValue || this.innerValue.hideInterval && (!this.isEdit && (!this.innerValue || (
(!this.aggregation || this.innerValue.hideAggregation && this.innerValue.hideAggInterval))); ((this.innerValue.realtime?.hideInterval && this.innerValue.history?.hideInterval) ||
(this.innerValue.realtime?.hideLastInterval && this.innerValue.realtime?.hideQuickInterval &&
this.innerValue.history?.hideLastInterval && this.innerValue.history?.hideFixedInterval &&
this.innerValue.history?.hideQuickInterval)) &&
(!this.aggregation || this.innerValue.hideAggregation && this.innerValue.hideAggInterval) &&
(!this.timezone || this.innerValue.hideTimezone)
)));
} }
} }

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

@ -15,7 +15,7 @@
/// ///
import { TimeService } from '@core/services/time.service'; import { TimeService } from '@core/services/time.service';
import { deepClone, isDefined, isNumeric, isUndefined } from '@app/core/utils'; import { deepClone, isDefined, isDefinedAndNotNull, isNumeric, isUndefined } from '@app/core/utils';
import * as moment_ from 'moment'; import * as moment_ from 'moment';
import * as momentTz from 'moment-timezone'; import * as momentTz from 'moment-timezone';
import { IntervalType } from '@shared/models/telemetry/telemetry.models'; import { IntervalType } from '@shared/models/telemetry/telemetry.models';
@ -53,6 +53,17 @@ export enum HistoryWindowType {
FOR_ALL_TIME FOR_ALL_TIME
} }
export const realtimeWindowTypeTranslations = new Map<RealtimeWindowType, string>([
[RealtimeWindowType.LAST_INTERVAL, 'timewindow.last'],
[RealtimeWindowType.INTERVAL, 'timewindow.relative']
]);
export const historyWindowTypeTranslations = new Map<HistoryWindowType, string>([
[HistoryWindowType.LAST_INTERVAL, 'timewindow.last'],
[HistoryWindowType.FIXED, 'timewindow.fixed'],
[HistoryWindowType.INTERVAL, 'timewindow.relative'],
[HistoryWindowType.FOR_ALL_TIME, 'timewindow.for-all-time']
]);
export type Interval = number | IntervalType; export type Interval = number | IntervalType;
export class IntervalMath { export class IntervalMath {
@ -128,8 +139,17 @@ export interface Aggregation {
export interface Timewindow { export interface Timewindow {
displayValue?: string; displayValue?: string;
displayTimezoneAbbr?: string; displayTimezoneAbbr?: string;
/**
* @deprecated
*/
hideInterval?: boolean; hideInterval?: boolean;
/**
* @deprecated
*/
hideQuickInterval?: boolean; hideQuickInterval?: boolean;
/**
* @deprecated
*/
hideLastInterval?: boolean; hideLastInterval?: boolean;
hideAggregation?: boolean; hideAggregation?: boolean;
hideAggInterval?: boolean; hideAggInterval?: boolean;
@ -247,9 +267,6 @@ export const defaultTimewindow = (timeService: TimeService): Timewindow => {
const currentTime = moment().valueOf(); const currentTime = moment().valueOf();
return { return {
displayValue: '', displayValue: '',
hideInterval: false,
hideLastInterval: false,
hideQuickInterval: false,
hideAggregation: false, hideAggregation: false,
hideAggInterval: false, hideAggInterval: false,
hideTimezone: false, hideTimezone: false,
@ -258,7 +275,10 @@ export const defaultTimewindow = (timeService: TimeService): Timewindow => {
realtimeType: RealtimeWindowType.LAST_INTERVAL, realtimeType: RealtimeWindowType.LAST_INTERVAL,
interval: SECOND, interval: SECOND,
timewindowMs: MINUTE, timewindowMs: MINUTE,
quickInterval: QuickTimeInterval.CURRENT_DAY quickInterval: QuickTimeInterval.CURRENT_DAY,
hideInterval: false,
hideLastInterval: false,
hideQuickInterval: false
}, },
history: { history: {
historyType: HistoryWindowType.LAST_INTERVAL, historyType: HistoryWindowType.LAST_INTERVAL,
@ -268,7 +288,11 @@ export const defaultTimewindow = (timeService: TimeService): Timewindow => {
startTimeMs: currentTime - DAY, startTimeMs: currentTime - DAY,
endTimeMs: currentTime endTimeMs: currentTime
}, },
quickInterval: QuickTimeInterval.CURRENT_DAY quickInterval: QuickTimeInterval.CURRENT_DAY,
hideInterval: false,
hideLastInterval: false,
hideFixedInterval: false,
hideQuickInterval: false
}, },
aggregation: { aggregation: {
type: AggregationType.AVG, type: AggregationType.AVG,
@ -289,14 +313,34 @@ export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalO
historyOnly: boolean, timeService: TimeService): Timewindow => { historyOnly: boolean, timeService: TimeService): Timewindow => {
const model = defaultTimewindow(timeService); const model = defaultTimewindow(timeService);
if (value) { if (value) {
model.hideInterval = value.hideInterval;
model.hideLastInterval = value.hideLastInterval;
model.hideQuickInterval = value.hideQuickInterval;
model.hideAggregation = value.hideAggregation; model.hideAggregation = value.hideAggregation;
model.hideAggInterval = value.hideAggInterval; model.hideAggInterval = value.hideAggInterval;
model.hideTimezone = value.hideTimezone; model.hideTimezone = value.hideTimezone;
model.selectedTab = getTimewindowType(value); model.selectedTab = getTimewindowType(value);
// for backward compatibility
if (isDefinedAndNotNull(value.hideInterval)) {
model.realtime.hideInterval = value.hideInterval;
model.history.hideInterval = value.hideInterval;
}
if (isDefinedAndNotNull(value.hideLastInterval)) {
model.realtime.hideLastInterval = value.hideLastInterval;
}
if (isDefinedAndNotNull(value.hideQuickInterval)) {
model.realtime.hideQuickInterval = value.hideQuickInterval;
}
if (isDefined(value.realtime)) { if (isDefined(value.realtime)) {
if (isDefinedAndNotNull(value.realtime.hideInterval)) {
model.realtime.hideInterval = value.realtime.hideInterval;
}
if (isDefinedAndNotNull(value.realtime.hideLastInterval)) {
model.realtime.hideLastInterval = value.realtime.hideLastInterval;
}
if (isDefinedAndNotNull(value.realtime.hideQuickInterval)) {
model.realtime.hideQuickInterval = value.realtime.hideQuickInterval;
}
if (isDefined(value.realtime.interval)) { if (isDefined(value.realtime.interval)) {
model.realtime.interval = value.realtime.interval; model.realtime.interval = value.realtime.interval;
} }
@ -317,6 +361,19 @@ export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalO
} }
} }
if (isDefined(value.history)) { if (isDefined(value.history)) {
if (isDefinedAndNotNull(value.history.hideInterval)) {
model.history.hideInterval = value.history.hideInterval;
}
if (isDefinedAndNotNull(value.history.hideLastInterval)) {
model.history.hideLastInterval = value.history.hideLastInterval;
}
if (isDefinedAndNotNull(value.history.hideFixedInterval)) {
model.history.hideFixedInterval = value.history.hideFixedInterval;
}
if (isDefinedAndNotNull(value.history.hideQuickInterval)) {
model.history.hideQuickInterval = value.history.hideQuickInterval;
}
if (isDefined(value.history.interval)) { if (isDefined(value.history.interval)) {
model.history.interval = value.history.interval; model.history.interval = value.history.interval;
} }
@ -382,9 +439,6 @@ export const toHistoryTimewindow = (timewindow: Timewindow, startTimeMs: number,
limit = timeService.getMaxDatapointsLimit(); limit = timeService.getMaxDatapointsLimit();
} }
return { return {
hideInterval: timewindow.hideInterval || false,
hideLastInterval: timewindow.hideLastInterval || false,
hideQuickInterval: timewindow.hideQuickInterval || false,
hideAggregation: timewindow.hideAggregation || false, hideAggregation: timewindow.hideAggregation || false,
hideAggInterval: timewindow.hideAggInterval || false, hideAggInterval: timewindow.hideAggInterval || false,
hideTimezone: timewindow.hideTimezone || false, hideTimezone: timewindow.hideTimezone || false,
@ -395,7 +449,10 @@ export const toHistoryTimewindow = (timewindow: Timewindow, startTimeMs: number,
startTimeMs, startTimeMs,
endTimeMs endTimeMs
}, },
interval: timeService.boundIntervalToTimewindow(endTimeMs - startTimeMs, interval, AggregationType.AVG) interval: timeService.boundIntervalToTimewindow(endTimeMs - startTimeMs, interval, AggregationType.AVG),
hideInterval: timewindow.history?.hideInterval || false,
hideLastInterval: timewindow.history?.hideLastInterval || false,
hideQuickInterval: timewindow.history?.hideQuickInterval || false,
}, },
aggregation: { aggregation: {
type: aggType, type: aggType,
@ -850,20 +907,14 @@ export const createTimewindowForComparison = (subscriptionTimewindow: Subscripti
export const cloneSelectedTimewindow = (timewindow: Timewindow): Timewindow => { export const cloneSelectedTimewindow = (timewindow: Timewindow): Timewindow => {
const cloned: Timewindow = {}; const cloned: Timewindow = {};
cloned.hideInterval = timewindow.hideInterval || false;
cloned.hideLastInterval = timewindow.hideLastInterval || false;
cloned.hideQuickInterval = timewindow.hideQuickInterval || false;
cloned.hideAggregation = timewindow.hideAggregation || false; cloned.hideAggregation = timewindow.hideAggregation || false;
cloned.hideAggInterval = timewindow.hideAggInterval || false; cloned.hideAggInterval = timewindow.hideAggInterval || false;
cloned.hideTimezone = timewindow.hideTimezone || false; cloned.hideTimezone = timewindow.hideTimezone || false;
if (isDefined(timewindow.selectedTab)) { if (isDefined(timewindow.selectedTab)) {
cloned.selectedTab = timewindow.selectedTab; cloned.selectedTab = timewindow.selectedTab;
if (timewindow.selectedTab === TimewindowType.REALTIME) {
cloned.realtime = deepClone(timewindow.realtime);
} else if (timewindow.selectedTab === TimewindowType.HISTORY) {
cloned.history = deepClone(timewindow.history);
}
} }
cloned.realtime = deepClone(timewindow.realtime);
cloned.history = deepClone(timewindow.history);
cloned.aggregation = deepClone(timewindow.aggregation); cloned.aggregation = deepClone(timewindow.aggregation);
cloned.timezone = timewindow.timezone; cloned.timezone = timewindow.timezone;
return cloned; return cloned;

Write Preview
Loading…
Cancel
Save