UI: Add ability to save time window configuration as default

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 {

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -198,6 +198,7 @@
           <ng-container *ngIf="isEdit; else timewindowTemplate">
             <tb-timewindow class="lt-xl:!hidden" asButton
                            flatButton
+                           showSaveAsDefault
                            [displayTimewindowValue]="false"
                            [isEdit]="true"
                            tooltipPosition="below"
@@ -207,6 +208,7 @@
             </tb-timewindow>
             <tb-timewindow class="gt-lg:!hidden"
                            hideLabel
+                           showSaveAsDefault
                            [isEdit]="true"
                            tooltipPosition="below"
                            aggregation="true"
@@ -222,14 +224,18 @@
                              tooltipPosition="below"
                              aggregation="true"
                              timezone="true"
-                             [(ngModel)]="dashboardCtx.dashboardTimewindow">
+                             [showSaveAsDefault]="!readonly"
+                             [(ngModel)]="dashboardCtx.dashboardTimewindow"
+                             (saveAsDefault)="saveDashboard()">>
               </tb-timewindow>
               <tb-timewindow class="lt-lg:!hidden"
                              [isEdit]="false"
                              tooltipPosition="below"
                              aggregation="true"
                              timezone="true"
-                             [(ngModel)]="dashboardCtx.dashboardTimewindow">
+                             [showSaveAsDefault]="!readonly"
+                             [(ngModel)]="dashboardCtx.dashboardTimewindow"
+                             (saveAsDefault)="saveDashboard()">>
               </tb-timewindow>
             </ng-container>
           </ng-template>

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);

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;
 }

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

@@ -301,6 +301,16 @@
         </tb-timezone-select>
       </div>
     </section>
+    @if (showSaveAsDefault) {
+      <section class="tb-form-panel">
+        <div class="tb-form-panel-title" translate>timewindow.save-current-settings-as-default</div>
+        <div class="tb-form-row">
+          <mat-slide-toggle class="mat-slide" formControlName="hideSaveAsDefault">
+            {{ 'timewindow.hide-option-from-end-users' | translate }}
+          </mat-slide-toggle>
+        </div>
+      </section>
+    }
   </div>
   <mat-divider></mat-divider>
   <div mat-dialog-actions class="tb-dialog-actions tb-flex flex-end no-gap">

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() {

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

@@ -173,6 +173,11 @@
         </ng-container>
       </section>
     </ng-container>
+    @if (saveAsDefaultAvailable) {
+      <mat-checkbox class="tb-timewindow-form-checkbox" [formControl]="saveTimewindowControl">
+        {{ 'timewindow.save-current-settings-as-default' | translate }}
+      </mat-checkbox>
+    }
   </div>
 
   <ng-template #timezoneSelectionPanel>

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;
+    }
   }
 }

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<any>('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) => {

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<Timewindow>();
+
   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);
     })
   }
 }

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;
   }

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",