From 5aac775487d9751a60f2abbe4ad739c6edf3e3e6 Mon Sep 17 00:00:00 2001 From: Chantsova Ekaterina Date: Mon, 12 Aug 2024 18:18:21 +0300 Subject: [PATCH] UI: hide options and apply configured parameters --- .../time/datetime-period.component.html | 4 +- .../components/time/timeinterval.component.ts | 19 ++- .../timewindow-config-dialog.component.html | 159 +++++++++++------- .../timewindow-config-dialog.component.scss | 17 +- .../timewindow-config-dialog.component.ts | 62 +++---- .../time/timewindow-panel.component.html | 8 +- .../time/timewindow-panel.component.scss | 1 + .../time/timewindow-panel.component.ts | 18 +- .../src/app/shared/models/time/time.models.ts | 4 + .../assets/locale/locale.constant-en_US.json | 1 + 10 files changed, 180 insertions(+), 113 deletions(-) diff --git a/ui-ngx/src/app/shared/components/time/datetime-period.component.html b/ui-ngx/src/app/shared/components/time/datetime-period.component.html index b846e58914..84f6d29d68 100644 --- a/ui-ngx/src/app/shared/components/time/datetime-period.component.html +++ b/ui-ngx/src/app/shared/components/time/datetime-period.component.html @@ -16,13 +16,13 @@ -->
- + datetime.from - + datetime.to diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts index 61c0126267..a10f4c21c9 100644 --- a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts +++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts @@ -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) { diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html index e6bb44a423..fe10fb1a52 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html @@ -25,31 +25,39 @@ close -
+
-
-
-
{{ 'timewindow.time-range' | translate }}
- - - - -
+
{{ 'timewindow.time-range' | translate }}
+ + {{ 'timewindow.hide-time-range' | translate }} + + + + + - - -
+ + {{ 'timewindow.hide-last-interval' | translate }} + + + {{ 'timewindow.hide-relative-interval' | translate }} + + + {{ 'timewindow.disable-custom-interval' | translate }} + @@ -70,30 +78,36 @@
+ +
-
-
-
-
{{ 'timewindow.time-range' | translate }}
- - - - -
- - - -
- +
{{ 'timewindow.time-range' | translate }}
+ + {{ 'timewindow.hide-time-range' | translate }} + + + + + + + + + + + + + {{ 'timewindow.disable-custom-interval' | translate }} + @@ -124,14 +138,19 @@
+ +
-
- -
-
{{ 'aggregation.aggregation' | translate }}
+
+
+
{{ 'aggregation.aggregation' | translate }}
+ + {{ 'timewindow.hide-aggregation' | translate }} + + @@ -139,58 +158,80 @@ -
+ +
-
-
{{ 'aggregation.limit' | translate }}
-
-
- - - - - - -
+
+
{{ 'aggregation.limit' | translate }}
+ + {{ 'timewindow.hide-max-values' | translate }} + +
+
+ + + + + +
-
- +
+
{{ 'aggregation.group-interval' | translate }}
+ + {{ 'timewindow.hide-group-interval' | translate }} + + + {{ 'timewindow.disable-custom-interval' | translate }} + + appearance="outline" + [disabledAdvanced]="timewindowForm.get('realtime.disableCustomGroupInterval').value"> + + {{ 'timewindow.disable-custom-interval' | translate }} + + appearance="outline" + [disabledAdvanced]="timewindowForm.get('history.disableCustomGroupInterval').value">
- - - + +
+
{{ 'timezone.timezone' | translate }}
+ + {{ 'timewindow.hide-timezone' | translate }} + + + +
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss index 0c5ad7b927..9245856bb3 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss +++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.scss @@ -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%; } diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts index e1cabedda0..41efc05ea6 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts @@ -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, protected store: Store, - 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() { diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html index b56d46ee65..9c6ed91d05 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html @@ -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"> @@ -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"> @@ -173,7 +175,8 @@ [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()" useCalendarIntervals subscriptSizing="dynamic" - appearance="outline"> + appearance="outline" + [disabledAdvanced]="timewindow.realtime.disableCustomGroupInterval"> @@ -182,7 +185,8 @@ [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()" useCalendarIntervals subscriptSizing="dynamic" - appearance="outline"> + appearance="outline" + [disabledAdvanced]="timewindow.history.disableCustomGroupInterval">
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss index ec1dc89ee9..ab080667c3 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss @@ -18,6 +18,7 @@ :host { display: flex; flex-direction: column; + width: 500px; max-height: 100%; max-width: 100%; background-color: #fff; diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts index 903ab78495..841f0b2eb4 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts @@ -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, { 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(); } }); } diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts index 9336f47d90..e5888fbf52 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/ui-ngx/src/app/shared/models/time/time.models.ts @@ -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 { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 8fd3c59f11..31a64f960a 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -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" },