From 77a935f8a778e1cc9dcee9806fae6c5c7c4da43e Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 3 Dec 2025 18:34:03 +0200 Subject: [PATCH] UI: Add ability to save time window configuration as default --- ui-ngx/src/app/core/api/widget-api.models.ts | 1 + .../dashboard-page.component.html | 10 ++++++++-- .../dashboard-page.component.ts | 4 ++++ .../states/state-controller.models.ts | 2 -- .../timewindow-config-dialog.component.html | 10 ++++++++++ .../timewindow-config-dialog.component.ts | 13 ++++++------ .../time/timewindow-panel.component.html | 5 +++++ .../time/timewindow-panel.component.scss | 4 ++++ .../time/timewindow-panel.component.ts | 16 +++++++++++++-- .../components/time/timewindow.component.ts | 20 ++++++++++++++++--- .../src/app/shared/models/time/time.models.ts | 7 +++++++ .../assets/locale/locale.constant-en_US.json | 4 +++- 12 files changed, 80 insertions(+), 16 deletions(-) diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts index 8c4120739e..f27a86c2ac 100644 --- a/ui-ngx/src/app/core/api/widget-api.models.ts +++ b/ui-ngx/src/app/core/api/widget-api.models.ts @@ -192,6 +192,7 @@ export interface IStateController { getStateIdAtIndex(index: number): string; getEntityId(entityParamName: string): EntityId; getCurrentStateName(): string; + reInit(): void; } export interface SubscriptionInfo { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index b61f6e10fa..d4696d519d 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -198,6 +198,7 @@ + [showSaveAsDefault]="!readonly" + [(ngModel)]="dashboardCtx.dashboardTimewindow" + (saveAsDefault)="saveDashboard()">> + [showSaveAsDefault]="!readonly" + [(ngModel)]="dashboardCtx.dashboardTimewindow" + (saveAsDefault)="saveDashboard()">> diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index a28236bec6..d0c3325c72 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -1244,7 +1244,11 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC widgetEditMode: this.widgetEditMode, singlePageMode: this.singlePageMode }; + const needReInitState = !this.isEdit; this.init(dashboardPageInitData); + if (needReInitState) { + this.dashboardCtx.stateController.reInit(); + } } else { this.dashboard.version = dashboard.version; this.setEditMode(false, false); diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/state-controller.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/state-controller.models.ts index cb733f3227..33a1551b5b 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/state-controller.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/state-controller.models.ts @@ -15,7 +15,6 @@ /// import { IStateController, StateObject } from '@core/api/widget-api.models'; -import { IDashboardController } from '@home/components/dashboard-page/dashboard-page.models'; import { DashboardState } from '@shared/models/dashboard.models'; export declare type StateControllerState = StateObject[]; @@ -29,6 +28,5 @@ export interface IStateControllerComponent extends IStateController { states: {[id: string]: DashboardState }; dashboardId: string; preservedState: any; - reInit(): void; init(): void; } 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 09bc049d32..29622f7aeb 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 @@ -301,6 +301,16 @@ + @if (showSaveAsDefault) { +
+
timewindow.save-current-settings-as-default
+
+ + {{ 'timewindow.hide-option-from-end-users' | translate }} + +
+
+ }
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 af3d51de69..1ac80c8ba3 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 @@ -62,6 +62,7 @@ import { export interface TimewindowConfigDialogData { quickIntervalOnly: boolean; aggregation: boolean; + showSaveAsDefault: boolean; timewindow: Timewindow; } @@ -76,6 +77,8 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On aggregation = false; + showSaveAsDefault = false; + timewindowForm: FormGroup; historyTypes = HistoryWindowType; @@ -140,6 +143,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On super(store); this.quickIntervalOnly = data.quickIntervalOnly; this.aggregation = data.aggregation; + this.showSaveAsDefault = data.showSaveAsDefault; this.timewindow = data.timewindow; if (!this.quickIntervalOnly) { @@ -241,7 +245,9 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On hideAggInterval: [ isDefinedAndNotNull(this.timewindow.hideAggInterval) ? this.timewindow.hideAggInterval : false ], hideTimezone: [ isDefinedAndNotNull(this.timewindow.hideTimezone) - ? this.timewindow.hideTimezone : false ] + ? this.timewindow.hideTimezone : false ], + hideSaveAsDefault: [ isDefinedAndNotNull(this.timewindow.hideSaveAsDefault) + ? this.timewindow.hideSaveAsDefault : false ], }); this.updateValidators(this.timewindowForm.get('aggregation.type').value); @@ -423,11 +429,6 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On realtimeDisableCustomInterval, historyDisableCustomInterval, timewindowFormValue.realtime.advancedParams, timewindowFormValue.history.advancedParams, this.realtimeTimewindowOptions, this.historyTimewindowOptions); - this.timewindowForm.patchValue({ - hideAggregation: timewindowFormValue.hideAggregation, - hideAggInterval: timewindowFormValue.hideAggInterval, - hideTimezone: timewindowFormValue.hideTimezone - }); } update() { 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 fbb3c1d2f6..7cc4362ce6 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 @@ -173,6 +173,11 @@ + @if (saveAsDefaultAvailable) { + + {{ 'timewindow.save-current-settings-as-default' | translate }} + + }
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 325be68584..ad3acb71e3 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 @@ -39,5 +39,9 @@ &-settings-btn { color: rgba(0, 0, 0, 0.54); } + + &-checkbox { + --mdc-checkbox-state-layer-size: 24px; + } } } 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 c306ce4a49..d5b952b338 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 @@ -47,7 +47,7 @@ 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 { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { TimeService } from '@core/services/time.service'; import { deepClone, isDefined } from '@core/utils'; import { OverlayRef } from '@angular/cdk/overlay'; @@ -70,6 +70,7 @@ export interface TimewindowPanelData { timezone: boolean; isEdit: boolean; panelMode: boolean; + showSaveAsDefault?: boolean; } export const TIMEWINDOW_PANEL_DATA = new InjectionToken('TimewindowPanelData'); @@ -111,6 +112,8 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O aggregationTypes = AggregationType; result: Timewindow; + saveTimewindow: boolean; + saveTimewindowControl: FormControl; timewindowTypeOptions: ToggleHeaderOption[] = [{ name: this.translate.instant('timewindow.history'), @@ -126,6 +129,7 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O historyTypeSelectionAvailable: boolean; historyIntervalSelectionAvailable: boolean; aggregationOptionsAvailable: boolean; + saveAsDefaultAvailable: boolean; realtimeDisableCustomInterval: boolean; realtimeDisableCustomGroupInterval: boolean; @@ -220,6 +224,8 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O this.aggregationOptionsAvailable = this.aggregation && (this.isEdit || !(this.timewindow.hideAggregation && this.timewindow.hideAggInterval)); + + this.saveAsDefaultAvailable = this.data.showSaveAsDefault && (!this.timewindow.hideSaveAsDefault || this.isEdit); } ngOnInit(): void { @@ -262,6 +268,10 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O } } + if (this.saveAsDefaultAvailable) { + this.saveTimewindowControl = this.fb.control({value: this.isEdit, disabled: this.isEdit}); + } + this.timewindowForm = this.fb.group({ selectedTab: [isDefined(this.timewindow.selectedTab) ? this.timewindow.selectedTab : TimewindowType.REALTIME], realtime: this.fb.group({ @@ -409,6 +419,7 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O update() { this.result = this.prepareTimewindowConfig(); + this.saveTimewindow = this.saveAsDefaultAvailable && this.saveTimewindowControl.enabled && this.saveTimewindowControl.value; this.overlayRef?.dispose(); } @@ -564,7 +575,8 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O data: { quickIntervalOnly: this.quickIntervalOnly, aggregation: this.aggregation, - timewindow: this.prepareTimewindowConfig(false) + timewindow: this.prepareTimewindowConfig(false), + showSaveAsDefault: this.data.showSaveAsDefault } }).afterClosed() .subscribe((res) => { diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts index 07f90db66e..bc49e84574 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts @@ -19,12 +19,14 @@ import { Component, DestroyRef, ElementRef, + EventEmitter, forwardRef, HostBinding, Injector, Input, OnChanges, OnInit, + Output, SimpleChanges, StaticProvider, ViewChild, @@ -189,6 +191,13 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan @coerceBoolean() panelMode = true; + @Input() + @coerceBoolean() + showSaveAsDefault = false; + + @Output() + saveAsDefault = new EventEmitter(); + innerValue: Timewindow; timewindowDisabled: boolean; @@ -261,6 +270,7 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan timezone: this.timezone, isEdit: this.isEdit, panelMode: this.panelMode, + showSaveAsDefault: this.showSaveAsDefault, } as TimewindowPanelData }, { @@ -280,7 +290,7 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan this.innerValue = componentRef.instance.result; this.timewindowDisabled = this.isTimewindowDisabled(); this.updateDisplayValue(); - this.notifyChanged(); + this.notifyChanged(this.showSaveAsDefault && componentRef.instance.saveTimewindow); } }); this.cd.detectChanges(); @@ -334,8 +344,11 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan } } - notifyChanged() { + notifyChanged(notifySaveAsDefault = false) { this.propagateChange(cloneSelectedTimewindow(this.innerValue)); + if (notifySaveAsDefault) { + this.saveAsDefault.emit(this.innerValue); + } } displayValue(): string { @@ -402,6 +415,7 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan timezone: this.timezone, isEdit: this.isEdit, panelMode: this.panelMode, + showSaveAsDefault: this.showSaveAsDefault, } const injector = Injector.create({ providers: [{ provide: TIMEWINDOW_PANEL_DATA, useValue: panelData }], @@ -413,7 +427,7 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan ).subscribe(value => { this.innerValue = value; this.timewindowDisabled = this.isTimewindowDisabled(); - this.notifyChanged(); + this.notifyChanged(this.showSaveAsDefault && componentRef.instance.saveTimewindow); }) } } 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 d9cc9cb3a4..aed39bfe32 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/ui-ngx/src/app/shared/models/time/time.models.ts @@ -169,6 +169,7 @@ export interface Timewindow { history?: HistoryWindow; aggregation?: Aggregation; timezone?: string; + hideSaveAsDefault?: boolean; } export interface SubscriptionAggregation extends Aggregation { @@ -331,6 +332,9 @@ export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalO if (value.hideTimezone) { model.hideTimezone = value.hideTimezone; } + if (value.hideSaveAsDefault) { + model.hideSaveAsDefault = value.hideSaveAsDefault; + } model.selectedTab = getTimewindowType(value); @@ -1116,6 +1120,9 @@ export const cloneSelectedTimewindow = (timewindow: Timewindow): Timewindow => { if (timewindow.hideTimezone) { cloned.hideTimezone = timewindow.hideTimezone; } + if (timewindow.hideSaveAsDefault) { + cloned.hideSaveAsDefault = timewindow.hideSaveAsDefault; + } if (isDefined(timewindow.selectedTab)) { cloned.selectedTab = timewindow.selectedTab; } 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 0f47ef9fae..477c1fa012 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -6541,7 +6541,9 @@ "default-agg-interval": "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.", - "all": "All" + "all": "All", + "save-current-settings-as-default": "Save current settings as default time window", + "hide-option-from-end-users": "Hide option from end-users" }, "tooltip": { "trigger": "Trigger",