fix: Time selector menu for widgets in dashboard (#3342)

apache · Nov 19, 2024 · 88c01a9 · 88c01a9
1 parent 8375419
commit 88c01a9
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
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
@@ -75,13 +75,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     quickSelections: QuickTimeSelection[];
 
     @Input()
-    labels: TimeSelectorLabel = {
-        quickSelectionLabel: 'Quick Selection',
-        customLabel: 'Custom',
-        maxDayRangeErrorLabel:
-            'Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.',
-        timeRangeSelectorTooltip: 'Modify time range',
-    };
+    labels: TimeSelectorLabel;
 
     simpleTimeString: string = '';
     timeString: TimeString;
@@ -96,15 +90,14 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     constructor(private timeSelectionService: TimeSelectionService) {}
 
     ngOnInit() {
-        if (!this.quickSelections) {
-            this.quickSelections =
-                this.timeSelectionService.defaultQuickTimeSelections;
-        }
+        this.quickSelections ??=
+            this.timeSelectionService.defaultQuickTimeSelections;
+        this.labels ??= this.timeSelectionService.defaultLabels;
         this.createDateString();
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        if (changes.timeSettings) {
+        if (changes.timeSettings && this.quickSelections !== undefined) {
             this.createDateString();
         }
     }

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
@@ -38,6 +38,7 @@ import {
     subWeeks,
     subYears,
 } from 'date-fns';
+import { TimeSelectorLabel } from '../components/time-selector/time-selector.model';
 
 @Injectable({ providedIn: 'root' })
 export class TimeSelectionService {
@@ -50,6 +51,14 @@ export class TimeSelectionService {
         525600: TimeSelectionConstants.LAST_YEAR,
     };
 
+    defaultLabels: TimeSelectorLabel = {
+        quickSelectionLabel: 'Quick Selection',
+        customLabel: 'Custom',
+        maxDayRangeErrorLabel:
+            'Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.',
+        timeRangeSelectorTooltip: 'Modify time range',
+    };
+
     defaultQuickTimeSelections: QuickTimeSelection[] = [
         {
             label: 'Last 15 min',

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
@@ -126,7 +126,10 @@
                 </button>
                 <mat-menu #optMenu="matMenu" class="large-menu">
                     <sp-time-selector-menu
+                        *ngIf="quickSelections"
                         [timeSettings]="clonedTimeSettings"
+                        [quickSelections]="quickSelections"
+                        [labels]="labels"
                         (timeSettingsEmitter)="modifyWidgetTimeSettings($event)"
                         class="w-100"
                     >

diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts
@@ -34,6 +34,7 @@ import {
     DashboardItem,
     DataExplorerWidgetModel,
     DataLakeMeasure,
+    QuickTimeSelection,
     SpLogMessage,
     TimeSettings,
 } from '@streampipes/platform-services';
@@ -49,6 +50,7 @@ import { BaseWidgetData } from '../../models/dataview-dashboard.model';
 import { DataExplorerDashboardService } from '../../services/data-explorer-dashboard.service';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { TimeSelectionService } from '@streampipes/shared-ui';
+import { TimeSelectorLabel } from 'projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model';
 
 @Component({
     selector: 'sp-data-explorer-dashboard-widget',
@@ -104,6 +106,8 @@ export class DataExplorerDashboardWidgetComponent
     timerActive = false;
     loadingTime = 0;
 
+    quickSelections: QuickTimeSelection[];
+    labels: TimeSelectorLabel;
     clonedTimeSettings: TimeSettings;
     timeSettingsModified: boolean = false;
 
@@ -137,6 +141,9 @@ export class DataExplorerDashboardWidgetComponent
     }
 
     ngOnInit(): void {
+        this.quickSelections =
+            this.timeSelectionService.defaultQuickTimeSelections;
+        this.labels = this.timeSelectionService.defaultLabels;
         this.authSubscription = this.currentUserService.user$.subscribe(
             user => {
                 this.hasDataExplorerWritePrivileges = this.authService.hasRole(
@@ -225,7 +232,10 @@ export class DataExplorerDashboardWidgetComponent
     getTimeSettings(): TimeSettings {
         if (this.globalTimeEnabled) {
             return this.timeSettings;
-        } else if (this.dashboardItem.timeSettings !== undefined) {
+        } else if (
+            this.dashboardItem.timeSettings !== undefined &&
+            this.dashboardItem.timeSettings !== null
+        ) {
             return this.dashboardItem.timeSettings as TimeSettings;
         } else {
             return this.configuredWidget.timeSettings as TimeSettings;