fix: refresh interval settings for widgets in dashboard (#3421)

* fix: refresh interval settings for widgets in dashboard * fix: imports
apache · Jan 14, 2025 · 9561fb5 · 9561fb5
1 parent f8e4c60
commit 9561fb5
Show file tree

Hide file tree

Showing 13 changed files with 155 additions and 41 deletions.
diff --git a/...components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts b/...components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts
@@ -33,7 +33,7 @@ export class DataExplorerRefreshIntervalSettingsComponent implements OnInit {
     @Input()
     availableOptions: DashboardLiveSettings[];
 
-    liveRefreshEnabled: boolean;
+    liveRefreshEnabled: boolean = true;
 
     ngOnInit() {
         if (!this.liveSettings?.label) {

diff --git a/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html
@@ -39,15 +39,15 @@
                 class="formatted-datetime"
             >
                 <span class="formatted-date">{{ timeString.startDate }}</span>
-                <span *ngIf="enableTimeChange">
+                <span *ngIf="enableTimePicker">
                     &nbsp;<span class="formatted-time">{{
                         timeString.startTime
                     }}</span>
                 </span>
-                <div *ngIf="enableTimeChange || !timeString.sameDay">
+                <div *ngIf="enableTimePicker || !timeString.sameDay">
                     <span class="formatted-date">&nbsp;-&nbsp;</span>
                     <span class="formatted-date">{{ timeString.endDate }}</span>
-                    <span *ngIf="enableTimeChange">
+                    <span *ngIf="enableTimePicker">
                         &nbsp;<span class="formatted-time">{{
                             timeString.endTime
                         }}</span>
@@ -69,7 +69,7 @@
                 [labels]="labels"
                 (timeSettingsEmitter)="applyCurrentDateRange($event)"
                 [quickSelections]="quickSelections"
-                [enableTimeChange]="enableTimeChange"
+                [enableTimePicker]="enableTimePicker"
                 [maxDayRange]="maxDayRange"
                 class="w-100"
             >
@@ -89,7 +89,7 @@
     <div fxLayoutAlign="end center">
         <sp-data-explorer-refresh-interval-settings-component
             #refreshIntervalSettings
-            *ngIf="liveSettings && showTimeSelector && showIntervalSettings"
+            *ngIf="liveSettings && showIntervalSettings"
             [liveSettings]="liveSettings"
             (intervalSettingsChangedEmitter)="
                 intervalSettingsChangedEmitter.emit($event)

diff --git a/...s/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts b/...s/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts
@@ -73,7 +73,7 @@ export class TimeRangeSelectorComponent
     showTimeSelector = true;
 
     @Input()
-    enableTimeChange = true;
+    enableTimePicker = true;
 
     @Input()
     showIntervalSettings = true;
@@ -225,8 +225,16 @@ export class TimeRangeSelectorComponent
             const startDate = new Date(this.timeSettings.startTime);
             const endDate = new Date(this.timeSettings.endTime);
             this.timeString = {
-                startDate: this.formatDate(startDate),
-                endDate: this.formatDate(endDate),
+                startDate: this.timeSelectionService.formatDate(
+                    startDate,
+                    this.enableTimePicker,
+                    this.dateFormat,
+                ),
+                endDate: this.timeSelectionService.formatDate(
+                    endDate,
+                    this.enableTimePicker,
+                    this.dateFormat,
+                ),
                 startTime: startDate.toLocaleTimeString(),
                 endTime: endDate.toLocaleTimeString(),
                 sameDay: isSameDay(startDate, endDate),
@@ -235,10 +243,4 @@ export class TimeRangeSelectorComponent
             this.timeStringMode = 'advanced';
         }
     }
-
-    private formatDate(date: Date): string {
-        return this.enableTimeChange
-            ? date.toLocaleDateString()
-            : date.toLocaleDateString(navigator.language, this.dateFormat);
-    }
 }
diff --git a/...time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html b/...time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html
@@ -26,7 +26,7 @@
             </mat-calendar>
         </mat-card>
 
-        <div *ngIf="enableTimeChange" fxLayout="column" class="mt-10 mr-5">
+        <div *ngIf="enableTimePicker" fxLayout="column" class="mt-10 mr-5">
             <div fxLayout="row" fxLayoutGap="10px">
                 <div fxFlex="30">
                     <span
@@ -73,7 +73,7 @@
             </div>
         </div>
     </div>
-    <div *ngIf="!enableTimeChange" fxLayout="row" class="mt-10 date-preview">
+    <div *ngIf="!enableTimePicker" fxLayout="row" class="mt-10 date-preview">
         {{ dateRangeString }}
     </div>
     <div
@@ -96,7 +96,7 @@
             data-cy="apply-custom-time"
             (click)="saveSelection()"
             [disabled]="!dateSelectionComplete"
-            *ngIf="enableTimeChange"
+            *ngIf="enableTimePicker"
         >
             Apply
         </button>

diff --git a/...r/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/...r/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts
@@ -40,7 +40,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
     @Input() labels: TimeSelectorLabel;
 
     @Input()
-    enableTimeChange: boolean;
+    enableTimePicker: boolean;
 
     @Input()
     maxDayRange: number;
@@ -96,7 +96,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
     }
 
     formatDate(date: Date): string {
-        if (this.enableTimeChange === true) {
+        if (this.enableTimePicker === true) {
             return date?.toLocaleDateString() || '-';
         } else {
             return date?.toLocaleDateString() || ' ';
@@ -119,7 +119,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
         if (this.selectionModel.isComplete()) {
             if (this.maxDayRange === 0 || daysDiff + 1 <= this.maxDayRange) {
                 this.dateSelectionComplete = true;
-                if (!this.enableTimeChange) {
+                if (!this.enableTimePicker) {
                     this.saveSelection();
                 }
             } else {
@@ -130,7 +130,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
     }
 
     saveSelection(): void {
-        if (this.enableTimeChange === true) {
+        if (this.enableTimePicker === true) {
             this.updateDateTime(
                 this.currentDateRange.start,
                 this.currentStartTime,

diff --git a/...-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html b/...-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html
@@ -27,6 +27,12 @@
                     <div *ngFor="let quickSelection of quickSelections">
                         <span
                             class="quick-link"
+                            [ngClass]="{
+                                selected:
+                                    quickSelection.timeSelectionId ===
+                                        timeSettings?.timeSelectionId &&
+                                    timeSettings?.timeSelectionId !== 'custom'
+                            }"
                             [attr.data-cy]="
                                 'time-selector-quick-' +
                                 quickSelection.timeSelectionId
@@ -52,7 +58,7 @@
                             timeSettings: $event
                         })
                     "
-                    [enableTimeChange]="enableTimeChange"
+                    [enableTimePicker]="enableTimePicker"
                     [maxDayRange]="maxDayRange"
                     class="w-100"
                 >

diff --git a/...-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.scss b/...-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.scss
@@ -42,3 +42,7 @@
 .quick-link:hover {
     font-weight: bold;
 }
+
+.quick-link.selected {
+    font-weight: bold;
+}
diff --git a/...ed-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/...ed-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts
@@ -46,7 +46,7 @@ export class TimeRangeSelectorMenuComponent implements OnInit {
     labels: TimeSelectorLabel;
 
     @Input()
-    enableTimeChange: boolean;
+    enableTimePicker: boolean;
 
     @Input()
     maxDayRange: number;

diff --git a/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts b/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts
@@ -280,4 +280,14 @@ export class TimeSelectionService {
         const widgetTimeSettings = { timeSettings, widgetIndex };
         this.timeSelectionChangeSubject.next(widgetTimeSettings);
     }
+
+    public formatDate(
+        date: Date,
+        enableTimePicker: boolean,
+        dateFormat: Intl.DateTimeFormatOptions,
+    ): string {
+        return enableTimePicker
+            ? date.toLocaleDateString()
+            : date.toLocaleDateString(navigator.language, dateFormat);
+    }
 }
diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
@@ -146,6 +146,7 @@ import { MatTreeModule } from '@angular/material/tree';
         CustomTimeRangeSelectionComponent,
         TimeRangeSelectorComponent,
         TimeRangeSelectorMenuComponent,
+        DataExplorerRefreshIntervalSettingsComponent,
     ],
 })
 export class SharedUiModule {}
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -43,6 +43,7 @@ export * from './lib/components/time-selector/time-selector.model';
 export * from './lib/components/time-selector/time-range-selector.component';
 export * from './lib/components/time-selector/time-selector-menu/time-selector-menu.component';
 export * from './lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component';
+export * from './lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component';
 
 export * from './lib/models/sp-navigation.model';
 

diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
@@ -104,6 +104,8 @@
                     aria-label="Options"
                     data-cy="options-data-explorer"
                     #menuTrigger="matMenuTrigger"
+                    [matTooltip]="tooltipText"
+                    matTooltipClass="no-wrap-tooltip"
                 >
                     <mat-icon
                         [color]="timeSettingsModified ? 'primary' : 'default'"
@@ -112,9 +114,12 @@
                 </button>
                 <mat-menu #optMenu="matMenu" class="large-menu">
                     <sp-time-selector-menu
+                        #timeSelectorMenu
                         *ngIf="quickSelections"
                         [timeSettings]="clonedTimeSettings"
                         [quickSelections]="quickSelections"
+                        [enableTimePicker]="enableTimePicker"
+                        [maxDayRange]="maxDayRange"
                         [labels]="labels"
                         (timeSettingsEmitter)="modifyWidgetTimeSettings($event)"
                         class="w-100"