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

UI: remove mat-tab-group from timewindow

Browse Source
This commit is contained in:
Chantsova Ekaterina 2024-09-05 18:30:43 +03:00
parent 1e63ca3d6a
commit 460c80a252
9 changed files with 320 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,125 +25,118 @@
<mat-icon class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
<form [formGroup]="timewindowForm" mat-dialog-content class="timewindow-settings-form">
<mat-tab-group (selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
<mat-tab label="{{ 'timewindow.realtime' | translate }}">
<div class="tb-flex column">
<section formGroupName="realtime" 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 }}
<form [formGroup]="timewindowForm" mat-dialog-content class="tb-timewindow-form">
<div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom">
<tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
[options]="timewindowTypeOptions" formControlName="selectedTab">
</tb-toggle-select>
</div>
<div class="tb-timewindow-form-content tb-form-panel no-border">
<ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
<section formGroupName="realtime" class="tb-form-panel stroked">
<div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
{{ 'timewindow.hide-timewindow-section' | translate }}
</mat-slide-toggle>
<tb-toggle-select *ngIf="realtimeTypeSelectionAvailable"
appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
</tb-toggle-select>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<mat-slide-toggle *ngIf="!quickIntervalOnly"
class="mat-slide fixed-title-width" formControlName="hideLastInterval">
{{ 'timewindow.hide-last-interval' | translate }}
</mat-slide-toggle>
<tb-toggle-select *ngIf="realtimeTypeSelectionAvailable"
appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
</tb-toggle-select>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<mat-slide-toggle *ngIf="!quickIntervalOnly"
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="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 &&
<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>
</ng-container>
</tb-timeinterval>
</ng-container>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<mat-slide-toggle *ngIf="!quickIntervalOnly"
class="mat-slide fixed-title-width" formControlName="hideQuickInterval">
{{ 'timewindow.hide-relative-interval' | translate }}
</mat-slide-toggle>
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
onlyCurrentInterval="true"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</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 formGroupName="history" 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 }}
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<mat-slide-toggle *ngIf="!quickIntervalOnly"
class="mat-slide fixed-title-width" formControlName="hideQuickInterval">
{{ 'timewindow.hide-relative-interval' | translate }}
</mat-slide-toggle>
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
onlyCurrentInterval="true"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</section>
</ng-container>
<tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
</tb-toggle-select>
<ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
<section formGroupName="history" class="tb-form-panel stroked">
<div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideInterval">
{{ 'timewindow.hide-timewindow-section' | translate }}
</mat-slide-toggle>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
<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="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 &&
<tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
</tb-toggle-select>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
<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="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>
</ng-container>
</tb-timeinterval>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideFixedInterval">
{{ 'timewindow.hide-fixed-interval' | translate }}
</mat-slide-toggle>
<tb-datetime-period
formControlName="fixedTimewindow"
subscriptSizing="dynamic"
appearance="outline"
class="history-time-input"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideFixedInterval">
{{ 'timewindow.hide-fixed-interval' | translate }}
</mat-slide-toggle>
<tb-datetime-period
formControlName="fixedTimewindow"
subscriptSizing="dynamic"
appearance="outline"
class="history-time-input"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED">
</tb-datetime-period>
</ng-container>
</tb-datetime-period>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval">
{{ 'timewindow.hide-relative-interval' | translate }}
</mat-slide-toggle>
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="hideQuickInterval">
{{ 'timewindow.hide-relative-interval' | translate }}
</mat-slide-toggle>
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</section>
<ng-container *ngTemplateOutlet="aggregationConfig">
</tb-quick-time-interval>
</ng-container>
<ng-container *ngTemplateOutlet="timezoneSelectionPanel">
</ng-container>
</div>
</mat-tab>
</mat-tab-group>
<ng-template #aggregationConfig>
<div *ngIf="aggregation" class="tb-flex column">
</section>
</ng-container>
<ng-container *ngIf="aggregation">
<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">
@ -216,9 +209,8 @@
</tb-timeinterval>
</ng-container>
</section>
</div>
</ng-template>
<ng-template #timezoneSelectionPanel>
</ng-container>
<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">
@ -231,7 +223,7 @@
displayLabel="false">
</tb-timezone-select>
</section>
</ng-template>
</div>
</form>
<mat-divider></mat-divider>
<div mat-dialog-actions class="tb-dialog-actions tb-flex flex-end no-gap">

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

@ -22,7 +22,7 @@
max-width: 100%;
background-color: #fff;
.timewindow-settings-form {
.tb-timewindow-form {
width: 600px;
.tb-flex {
@ -33,6 +33,10 @@
overflow: hidden;
padding: 0;
}
&-content {
overflow: auto;
}
}
.limit-slider-container {
@ -57,15 +61,3 @@
}
}
:host ::ng-deep {
.mat-mdc-tab-group {
min-height: 100%;
height: 100%;
}
.mat-mdc-tab-body-content {
padding: 12px 16px;
}
}

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

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import {
aggregationTranslations,
AggregationType,
@ -36,6 +36,8 @@ 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';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
export interface TimewindowConfigDialogData {
quickIntervalOnly: boolean;
@ -48,7 +50,7 @@ export interface TimewindowConfigDialogData {
templateUrl: './timewindow-config-dialog.component.html',
styleUrls: ['./timewindow-config-dialog.component.scss']
})
export class TimewindowConfigDialogComponent extends PageComponent implements OnInit {
export class TimewindowConfigDialogComponent extends PageComponent implements OnInit, OnDestroy {
quickIntervalOnly = false;
@ -72,6 +74,17 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
result: Timewindow;
timewindowTypeOptions: ToggleHeaderOption[] = [
{
name: this.translate.instant('timewindow.realtime'),
value: this.timewindowTypes.REALTIME
},
{
name: this.translate.instant('timewindow.history'),
value: this.timewindowTypes.HISTORY
}
];
realtimeTimewindowOptions: ToggleHeaderOption[] = [
{
name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.INTERVAL)),
@ -96,6 +109,8 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
realtimeTypeSelectionAvailable: boolean;
private destroy$ = new Subject<void>();
constructor(@Inject(MAT_DIALOG_DATA) public data: TimewindowConfigDialogData,
public dialogRef: MatDialogRef<TimewindowConfigDialogComponent, Timewindow>,
protected store: Store<AppState>,
@ -123,6 +138,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
const aggregation = this.timewindow.aggregation;
this.timewindowForm = this.fb.group({
selectedTab: [isDefined(this.timewindow.selectedTab) ? this.timewindow.selectedTab : TimewindowType.REALTIME],
realtime: this.fb.group({
realtimeType: [ isDefined(realtime?.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL ],
timewindowMs: [ isDefined(realtime?.timewindowMs) ? this.timewindow.realtime.timewindowMs : null ],
@ -187,10 +203,19 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
});
this.updateValidators(this.timewindowForm.get('aggregation.type').value);
this.timewindowForm.get('aggregation.type').valueChanges.subscribe((aggregationType: AggregationType) => {
this.timewindowForm.get('aggregation.type').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((aggregationType: AggregationType) => {
this.updateValidators(aggregationType);
});
this.timewindowForm.get('realtime.hideInterval').valueChanges.subscribe((value: boolean) => {
this.timewindowForm.get('selectedTab').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((selectedTab: TimewindowType) => {
this.onTimewindowTypeChange(selectedTab);
});
this.timewindowForm.get('realtime.hideInterval').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((value: boolean) => {
if (value) {
this.timewindowForm.get('realtime.hideLastInterval').disable();
this.timewindowForm.get('realtime.hideQuickInterval').disable();
@ -199,18 +224,24 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
this.timewindowForm.get('realtime.hideQuickInterval').enable();
}
});
this.timewindowForm.get('realtime.hideLastInterval').valueChanges.subscribe((hideLastInterval: boolean) => {
this.timewindowForm.get('realtime.hideLastInterval').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((hideLastInterval: boolean) => {
if (hideLastInterval && !this.timewindowForm.get('realtime.hideQuickInterval').value) {
this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.INTERVAL);
}
});
this.timewindowForm.get('realtime.hideQuickInterval').valueChanges.subscribe((hideQuickInterval: boolean) => {
this.timewindowForm.get('realtime.hideQuickInterval').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((hideQuickInterval: boolean) => {
if (hideQuickInterval && !this.timewindowForm.get('realtime.hideLastInterval').value) {
this.timewindowForm.get('realtime.realtimeType').setValue(RealtimeWindowType.LAST_INTERVAL);
}
});
this.timewindowForm.get('history.hideInterval').valueChanges.subscribe((value: boolean) => {
this.timewindowForm.get('history.hideInterval').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((value: boolean) => {
if (value) {
this.timewindowForm.get('history.hideLastInterval').disable();
this.timewindowForm.get('history.hideQuickInterval').disable();
@ -221,7 +252,9 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
this.timewindowForm.get('history.hideFixedInterval').enable();
}
});
this.timewindowForm.get('history.hideLastInterval').valueChanges.subscribe((hideLastInterval: boolean) => {
this.timewindowForm.get('history.hideLastInterval').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((hideLastInterval: boolean) => {
if (hideLastInterval) {
if (!this.timewindowForm.get('history.hideFixedInterval').value) {
this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.FIXED);
@ -230,7 +263,9 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
}
}
});
this.timewindowForm.get('history.hideFixedInterval').valueChanges.subscribe((hideFixedInterval: boolean) => {
this.timewindowForm.get('history.hideFixedInterval').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((hideFixedInterval: boolean) => {
if (hideFixedInterval) {
if (!this.timewindowForm.get('history.hideLastInterval').value) {
this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.LAST_INTERVAL);
@ -239,7 +274,9 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
}
}
});
this.timewindowForm.get('history.hideQuickInterval').valueChanges.subscribe((hideQuickInterval: boolean) => {
this.timewindowForm.get('history.hideQuickInterval').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((hideQuickInterval: boolean) => {
if (hideQuickInterval) {
if (!this.timewindowForm.get('history.hideLastInterval').value) {
this.timewindowForm.get('history.historyType').setValue(HistoryWindowType.LAST_INTERVAL);
@ -250,6 +287,11 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
private checkLimit(limit?: number): number {
if (!limit || limit < this.minDatapointsLimit()) {
return this.minDatapointsLimit();
@ -269,10 +311,9 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
this.timewindowForm.get('aggregation.limit').updateValueAndValidity({emitEvent: false});
}
onTimewindowTypeChange() {
this.timewindowForm.markAsDirty();
private onTimewindowTypeChange(selectedTab: TimewindowType) {
const timewindowFormValue = this.timewindowForm.getRawValue();
if (this.timewindow.selectedTab === TimewindowType.REALTIME) {
if (selectedTab === TimewindowType.REALTIME) {
if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED) {
this.timewindowForm.get('realtime').patchValue({
realtimeType: Object.keys(RealtimeWindowType).includes(HistoryWindowType[timewindowFormValue.history.historyType]) ?

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

@ -15,122 +15,117 @@
limitations under the License.
-->
<form [formGroup]="timewindowForm" class="tb-timewindow-panel-form">
<mat-tab-group [class.tb-headless]="historyOnly"
(selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
<mat-tab label="{{ 'timewindow.realtime' | translate }}">
<div class="tb-flex column">
<section class="tb-form-panel stroked" *ngIf="realtimeIntervalSelectionAvailable; else timezoneSelectionPanel">
<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>
<form [formGroup]="timewindowForm" class="tb-timewindow-form">
<div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom no-gap" *ngIf="!historyOnly">
<tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
[options]="timewindowTypeOptions" formControlName="selectedTab">
</tb-toggle-select>
<button mat-icon-button type="button" class="tb-box-button"
*ngIf="isEdit"
(click)="openTimewindowConfig()">
<mat-icon>settings</mat-icon>
</button>
</div>
<ng-container *ngTemplateOutlet="timezoneSelection">
<div class="tb-timewindow-form-content tb-form-panel no-border">
<ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
<section class="tb-form-panel stroked" *ngIf="realtimeIntervalSelectionAvailable; else timezoneSelectionPanel">
<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.timewindow' | translate }}</div>
<ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
<tb-toggle-select appearance="stroked" [options]="realtimeTimewindowOptions" formControlName="realtimeType">
</tb-toggle-select>
</ng-container>
</div>
<ng-container formGroupName="realtime">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<tb-timeinterval
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[disabledAdvanced]="timewindow.realtime.disableCustomInterval"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
<ng-container *ngTemplateOutlet="timezoneSelection">
</ng-container>
</div>
<ng-container formGroupName="realtime">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<tb-timeinterval
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>
</ng-container>
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
onlyCurrentInterval="true"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</tb-timeinterval>
</ng-container>
</section>
<ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container>
</div>
</mat-tab>
<mat-tab label="{{ 'timewindow.history' | translate }}">
<div class="tb-flex column">
<section class="tb-form-panel stroked" *ngIf="historyIntervalSelectionAvailable; else timezoneSelectionPanel">
<div class="tb-flex space-between"
[ngClass]="{'align-end': historyTypeSelectionAvailable, 'align-center': !historyTypeSelectionAvailable }">
<div class="tb-flex column no-flex flex-xs">
<div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
<ng-container formGroupName="history" *ngIf="historyTypeSelectionAvailable">
<tb-toggle-select appearance="fill" [options]="historyTimewindowOptions" formControlName="historyType">
</tb-toggle-select>
</ng-container>
</div>
<ng-container *ngTemplateOutlet="timezoneSelection">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
onlyCurrentInterval="true"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</ng-container>
</section>
</ng-container>
<ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
<section class="tb-form-panel stroked" *ngIf="historyIntervalSelectionAvailable; else timezoneSelectionPanel">
<div class="tb-flex space-between"
[ngClass]="{'align-end': historyTypeSelectionAvailable, 'align-center': !historyTypeSelectionAvailable }">
<div class="tb-flex column no-flex flex-xs">
<div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
<ng-container formGroupName="history" *ngIf="historyTypeSelectionAvailable">
<tb-toggle-select appearance="stroked" [options]="historyTimewindowOptions" formControlName="historyType">
</tb-toggle-select>
</ng-container>
</div>
<ng-container formGroupName="history" *ngIf="historyIntervalSelectionAvailable &&
timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME">
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
<tb-timeinterval
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>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
<tb-datetime-period
formControlName="fixedTimewindow"
subscriptSizing="dynamic"
appearance="outline"
class="history-time-input"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED">
</tb-datetime-period>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
<ng-container *ngTemplateOutlet="timezoneSelection">
</ng-container>
</div>
<ng-container formGroupName="history" *ngIf="historyIntervalSelectionAvailable &&
timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME">
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
<tb-timeinterval
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>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
<tb-datetime-period
formControlName="fixedTimewindow"
subscriptSizing="dynamic"
appearance="outline"
class="history-time-input"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED">
</tb-datetime-period>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</section>
<ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container>
</div>
</mat-tab>
<mat-tab *ngIf="isEdit" disabled labelClass="timewindow-config-btn">
<ng-template mat-tab-label>
<button mat-icon-button (click)="openTimewindowConfig()">
<mat-icon>settings</mat-icon>
</button>
</ng-template>
</mat-tab>
</mat-tab-group>
<ng-template #aggregationConfig>
<div *ngIf="aggregationOptionsAvailable" class="tb-flex column">
</section>
</ng-container>
<ng-container *ngIf="aggregationOptionsAvailable">
<ng-container formGroupName="aggregation">
<section class="tb-form-panel stroked" *ngIf="isEdit || !timewindow.hideAggregation">
<div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
@ -189,8 +184,9 @@
</tb-timeinterval>
</ng-container>
</section>
</div>
</ng-template>
</ng-container>
</div>
<ng-template #timezoneSelectionPanel>
<section class="tb-form-panel stroked tb-flex row align-center space-between">
<div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>

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

@ -23,17 +23,27 @@
max-width: 100%;
background-color: #fff;
.tb-form-panel {
padding: 12px;
gap: 12px;
}
.tb-timewindow-panel-form {
.tb-timewindow-form {
display: flex;
flex-direction: column;
overflow: hidden;
.tb-flex {
gap: 16px;
}
&-header {
flex-direction: row;
align-items: center;
}
&-type-options {
flex: 1;
}
&-content {
overflow: auto;
}
}
.limit-slider-container {
@ -58,21 +68,3 @@
}
}
:host ::ng-deep {
.mat-mdc-tab-group:not(.tb-headless) {
height: 100%;
}
.mat-mdc-tab-body-content {
padding: 12px 16px;
}
.mat-mdc-tab-group>.mat-mdc-tab-header .mat-mdc-tab.timewindow-config-btn {
flex-grow: unset;
min-width: 0;
padding: 0 8px;
color: unset;
opacity: unset;
}
}

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

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { Component, Inject, InjectionToken, OnInit, ViewContainerRef } from '@angular/core';
import { Component, Inject, InjectionToken, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
import {
aggregationTranslations,
AggregationType,
@ -41,6 +41,8 @@ import {
TimewindowConfigDialogComponent,
TimewindowConfigDialogData
} from '@shared/components/time/timewindow-config-dialog.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
export interface TimewindowPanelData {
historyOnly: boolean;
@ -59,7 +61,7 @@ export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelDat
templateUrl: './timewindow-panel.component.html',
styleUrls: ['./timewindow-panel.component.scss']
})
export class TimewindowPanelComponent extends PageComponent implements OnInit {
export class TimewindowPanelComponent extends PageComponent implements OnInit, OnDestroy {
historyOnly = false;
@ -91,6 +93,11 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
result: Timewindow;
timewindowTypeOptions: ToggleHeaderOption[] = [{
name: this.translate.instant('timewindow.history'),
value: this.timewindowTypes.HISTORY
}];
realtimeTimewindowOptions: ToggleHeaderOption[] = [];
historyTimewindowOptions: ToggleHeaderOption[] = [];
@ -101,6 +108,8 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
historyIntervalSelectionAvailable: boolean;
aggregationOptionsAvailable: boolean;
private destroy$ = new Subject<void>();
constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
public overlayRef: OverlayRef,
protected store: Store<AppState>,
@ -118,6 +127,13 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.timezone = data.timezone;
this.isEdit = data.isEdit;
if (!this.historyOnly) {
this.timewindowTypeOptions.unshift({
name: this.translate.instant('timewindow.realtime'),
value: this.timewindowTypes.REALTIME
});
}
if ((this.isEdit || !this.timewindow.realtime.hideLastInterval) && !this.quickIntervalOnly) {
this.realtimeTimewindowOptions.push({
name: this.translate.instant(realtimeWindowTypeTranslations.get(RealtimeWindowType.LAST_INTERVAL)),
@ -212,6 +228,7 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
}
this.timewindowForm = this.fb.group({
selectedTab: [isDefined(this.timewindow.selectedTab) ? this.timewindow.selectedTab : TimewindowType.REALTIME],
realtime: this.fb.group({
realtimeType: [{
value: isDefined(realtime?.realtimeType) ? realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL,
@ -268,9 +285,22 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
}]
});
this.updateValidators(this.timewindowForm.get('aggregation.type').value);
this.timewindowForm.get('aggregation.type').valueChanges.subscribe((aggregationType: AggregationType) => {
this.timewindowForm.get('aggregation.type').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((aggregationType: AggregationType) => {
this.updateValidators(aggregationType);
});
this.timewindowForm.get('selectedTab').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe((selectedTab: TimewindowType) => {
this.onTimewindowTypeChange(selectedTab);
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
private checkLimit(limit?: number): number {
@ -292,10 +322,9 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.timewindowForm.get('aggregation.limit').updateValueAndValidity({emitEvent: false});
}
onTimewindowTypeChange() {
this.timewindowForm.markAsDirty();
private onTimewindowTypeChange(selectedTab: TimewindowType) {
const timewindowFormValue = this.timewindowForm.getRawValue();
if (this.timewindow.selectedTab === TimewindowType.REALTIME) {
if (selectedTab === TimewindowType.REALTIME) {
if (timewindowFormValue.history.historyType !== HistoryWindowType.FIXED) {
this.timewindowForm.get('realtime').patchValue({
realtimeType: Object.keys(RealtimeWindowType).includes(HistoryWindowType[timewindowFormValue.history.historyType]) ?
@ -332,6 +361,7 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
private prepareTimewindowConfig() {
const timewindowFormValue = this.timewindowForm.getRawValue();
this.timewindow.selectedTab = timewindowFormValue.selectedTab;
this.timewindow.realtime = {...this.timewindow.realtime, ...{
realtimeType: timewindowFormValue.realtime.realtimeType,
timewindowMs: timewindowFormValue.realtime.timewindowMs,

2
ui-ngx/src/app/shared/models/overlay.models.ts
View File

@ -41,4 +41,4 @@ export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = {
};
export const DEFAULT_OVERLAY_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft,
POSITION_MAP.topRight, POSITION_MAP.left, POSITION_MAP.right];
POSITION_MAP.topRight, POSITION_MAP.left, POSITION_MAP.right, POSITION_MAP.bottom];

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

@ -59,7 +59,7 @@ export const realtimeWindowTypeTranslations = new Map<RealtimeWindowType, string
]);
export const historyWindowTypeTranslations = new Map<HistoryWindowType, string>([
[HistoryWindowType.LAST_INTERVAL, 'timewindow.last'],
[HistoryWindowType.FIXED, 'timewindow.fixed'],
[HistoryWindowType.FIXED, 'timewindow.range'],
[HistoryWindowType.INTERVAL, 'timewindow.relative'],
[HistoryWindowType.FOR_ALL_TIME, 'timewindow.for-all-time']
]);

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

@ -5153,10 +5153,9 @@
"color": "Color",
"displayTypePrefix": "Display Realtime/History prefix",
"preview": "Preview",
"time-range": "Time range",
"relative": "Relative",
"fixed": "Fixed",
"hide-time-range": "Hide time range from end-users",
"range": "Range",
"hide-timewindow-section": "Hide timewindow section from end-users",
"hide-last-interval": "Hide last interval from end-users",
"hide-relative-interval": "Hide relative interval from end-users",
"hide-fixed-interval": "Hide fixed interval from end-users",