Fix time selection

apache · Nov 18, 2024 · e5a00b1 · e5a00b1
1 parent 45903cc
commit e5a00b1
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 81 deletions.
diff --git a/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts b/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts
@@ -77,6 +77,7 @@ export interface TimeString {
     startTime: string;
     endDate: string;
     endTime: string;
+    sameDay: boolean;
 }
 
 export enum TimeSelectionId {

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
@@ -44,13 +44,15 @@
                         timeString.startTime
                     }}</span>
                 </span>
-                <span class="formatted-date">&nbsp;-&nbsp;</span>
-                <span class="formatted-date">{{ timeString.endDate }}</span>
-                <span *ngIf="enableTimeChange">
-                    &nbsp;<span class="formatted-time">{{
-                        timeString.endTime
-                    }}</span>
-                </span>
+                <div *ngIf="enableTimeChange || !timeString.sameDay">
+                    <span class="formatted-date">&nbsp;-&nbsp;</span>
+                    <span class="formatted-date">{{ timeString.endDate }}</span>
+                    <span *ngIf="enableTimeChange">
+                        &nbsp;<span class="formatted-time">{{
+                            timeString.endTime
+                        }}</span>
+                    </span>
+                </div>
             </div>
             <div class="formatted-datetime" *ngIf="timeStringMode === 'simple'">
                 {{ simpleTimeString }}
@@ -76,12 +78,12 @@
     </div>
     <div fxLayoutAlign="end center">
         <button
-            mat-button
+            mat-icon-button
+            matTooltip="Refresh"
             color="accent"
             (click)="updateTimeSettingsAndReload()"
         >
             <mat-icon>refresh</mat-icon>
-            Refresh
         </button>
     </div>
 </div>
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
@@ -37,6 +37,7 @@ import { MatMenuTrigger } from '@angular/material/menu';
 import { TimeSelectionService } from '../../services/time-selection.service';
 import { TimeRangeSelectorMenuComponent } from './time-selector-menu/time-selector-menu.component';
 import { TimeSelectorLabel } from './time-selector.model';
+import { differenceInMilliseconds, isSameDay } from 'date-fns';
 
 @Component({
     selector: 'sp-time-range-selector',
@@ -64,7 +65,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     maxDayRange = 0;
 
     @Input()
-    quickSelections: QuickTimeSelection[] = [];
+    quickSelections: QuickTimeSelection[];
 
     @Input()
     labels: TimeSelectorLabel = {
@@ -88,10 +89,10 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     constructor(private timeSelectionService: TimeSelectionService) {}
 
     ngOnInit() {
-        this.timeSelectionService.initializeQuickTimeSelection(
-            this.quickSelections,
-        );
-        this.quickSelections = this.timeSelectionService.quickTimeSelections;
+        if (!this.quickSelections) {
+            this.quickSelections =
+                this.timeSelectionService.defaultQuickTimeSelections;
+        }
         this.createDateString();
     }
 
@@ -125,6 +126,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
 
     updateTimeSettingsAndReload() {
         this.timeSelectionService.updateTimeSettings(
+            this.quickSelections,
             this.timeSettings,
             new Date(),
         );
@@ -135,10 +137,15 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     }
 
     private changeTimeByInterval(func: (a: number, b: number) => number) {
-        const difference =
-            this.timeSettings.endTime - this.timeSettings.startTime;
-        const newStartTime = func(this.timeSettings.startTime, difference);
-        const newEndTime = func(this.timeSettings.endTime, difference);
+        const timeDiff =
+            (differenceInMilliseconds(
+                this.timeSettings.startTime,
+                this.timeSettings.endTime,
+            ) -
+                1) *
+            -1;
+        const newStartTime = func(this.timeSettings.startTime, timeDiff);
+        const newEndTime = func(this.timeSettings.endTime, timeDiff);
 
         this.timeSettings.startTime = newStartTime;
         this.timeSettings.endTime = newEndTime;
@@ -160,6 +167,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
             this.timeSettings.timeSelectionId !== TimeSelectionConstants.CUSTOM
         ) {
             this.simpleTimeString = this.timeSelectionService.getTimeSelection(
+                this.quickSelections,
                 this.timeSettings.timeSelectionId,
             ).label;
             this.timeStringMode = 'simple';
@@ -171,6 +179,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
                 endDate: this.formatDate(endDate),
                 startTime: startDate.toLocaleTimeString(),
                 endTime: endDate.toLocaleTimeString(),
+                sameDay: isSameDay(startDate, endDate),
             };
 
             this.timeStringMode = 'advanced';

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
@@ -26,7 +26,7 @@ import {
     DefaultMatCalendarRangeStrategy,
     MatRangeDateSelectionModel,
 } from '@angular/material/datepicker';
-import { differenceInDays } from 'date-fns';
+import { differenceInDays, endOfDay, startOfDay } from 'date-fns';
 import { TimeSelectorLabel } from '../../time-selector.model';
 
 @Component({
@@ -136,13 +136,17 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
                 this.currentStartTime,
             );
             this.updateDateTime(this.currentDateRange.end, this.currentEndTime);
+            this.timeSettings.startTime = this.currentDateRange.start.getTime();
+            this.timeSettings.endTime = this.currentDateRange.end.getTime();
         } else {
-            this.updateDateTime(this.currentDateRange.start, '00:00:00');
-            this.updateDateTime(this.currentDateRange.end, '23:59:59');
+            this.timeSettings.startTime = startOfDay(
+                this.currentDateRange.start,
+            ).getTime();
+            this.timeSettings.endTime = endOfDay(
+                this.currentDateRange.end,
+            ).getTime();
         }
 
-        this.timeSettings.startTime = this.currentDateRange.start.getTime();
-        this.timeSettings.endTime = this.currentDateRange.end.getTime();
         this.timeSettings.timeSelectionId = TimeSelectionConstants.CUSTOM;
         this.timeSettingsEmitter.emit(this.timeSettings);
     }

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
@@ -27,7 +27,6 @@ import {
 } from '@streampipes/platform-services';
 import {
     startOfDay,
-    endOfDay,
     startOfHour,
     startOfMonth,
     startOfWeek,
@@ -120,54 +119,6 @@ export class TimeSelectionService {
         },
     ];
 
-    quickTimeSelections: QuickTimeSelection[] =
-        this.defaultQuickTimeSelections.map(selection => ({
-            ...selection,
-        }));
-
-    public initializeQuickTimeSelection(
-        quickSelection: QuickTimeSelection[],
-    ): void {
-        const isDifferentFromCurrent = !this.areSelectionsEqual(
-            this.quickTimeSelections,
-            quickSelection,
-        );
-        const isDifferentFromDefault = !this.areSelectionsEqual(
-            this.defaultQuickTimeSelections,
-            quickSelection,
-        );
-
-        if (isDifferentFromCurrent && quickSelection.length !== 0) {
-            this.quickTimeSelections = quickSelection.map(selection => ({
-                ...selection,
-            }));
-        } else if (!isDifferentFromDefault) {
-            this.quickTimeSelections = this.defaultQuickTimeSelections.map(
-                selection => ({
-                    ...selection,
-                }),
-            );
-        }
-    }
-
-    public areSelectionsEqual(
-        defaultQuickTimeSelections: QuickTimeSelection[],
-        newQuickTimeSelections: QuickTimeSelection[],
-    ): boolean {
-        if (defaultQuickTimeSelections.length !== newQuickTimeSelections.length)
-            return false;
-
-        return defaultQuickTimeSelections.every((itemA, index) => {
-            const itemB = newQuickTimeSelections[index];
-            return (
-                itemA.label === itemB.label &&
-                itemA.timeSelectionId === itemB.timeSelectionId &&
-                itemA.startTime.toString() === itemB.startTime.toString() &&
-                itemA.endTime.toString() === itemB.endTime.toString()
-            );
-        });
-    }
-
     public getDateRange(quickSelection: QuickTimeSelection): DateRange {
         const now = new Date();
         return {
@@ -178,13 +129,21 @@ export class TimeSelectionService {
 
     public getDefaultTimeSettings(): TimeSettings {
         return this.getTimeSettings(
-            this.quickTimeSelections[0].timeSelectionId,
+            this.defaultQuickTimeSelections,
+            this.defaultQuickTimeSelections[0].timeSelectionId,
             new Date(),
         );
     }
 
-    public getTimeSettings(timeSelectionId: string, now: Date): TimeSettings {
-        const selection = this.getTimeSelection(timeSelectionId);
+    public getTimeSettings(
+        quickTimeSelections: QuickTimeSelection[],
+        timeSelectionId: string,
+        now: Date,
+    ): TimeSettings {
+        const selection = this.getTimeSelection(
+            quickTimeSelections,
+            timeSelectionId,
+        );
         return {
             startTime: selection.startTime(now).getTime(),
             endTime: selection.endTime(now).getTime(),
@@ -193,7 +152,11 @@ export class TimeSelectionService {
         };
     }
 
-    public updateTimeSettings(timeSettings: TimeSettings, now: Date): void {
+    public updateTimeSettings(
+        quickTimeSelections: QuickTimeSelection[],
+        timeSettings: TimeSettings,
+        now: Date,
+    ): void {
         // for backwards compatibility
         if (timeSettings.timeSelectionId === undefined) {
             timeSettings.timeSelectionId =
@@ -206,14 +169,15 @@ export class TimeSelectionService {
         }
         if (timeSettings.timeSelectionId !== TimeSelectionConstants.CUSTOM) {
             if (
-                this.quickTimeSelections.find(
+                quickTimeSelections.find(
                     s => s.timeSelectionId === timeSettings.timeSelectionId,
                 ) === undefined
             ) {
                 timeSettings.timeSelectionId =
-                    this.quickTimeSelections[0].timeSelectionId;
+                    quickTimeSelections[0].timeSelectionId;
             }
             const updatedTimeSettings = this.getTimeSettings(
+                quickTimeSelections,
                 timeSettings.timeSelectionId,
                 now,
             );
@@ -222,11 +186,14 @@ export class TimeSelectionService {
         }
     }
 
-    public getTimeSelection(timeSelectionId: string): QuickTimeSelection {
+    public getTimeSelection(
+        quickTimeSelections: QuickTimeSelection[],
+        timeSelectionId: string,
+    ): QuickTimeSelection {
         return (
-            this.quickTimeSelections.find(
+            quickTimeSelections.find(
                 s => s.timeSelectionId === timeSelectionId,
-            ) || this.quickTimeSelections[0]
+            ) || quickTimeSelections[0]
         );
     }
 

diff --git a/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts
@@ -224,6 +224,7 @@ export class DataExplorerDashboardPanelComponent
                     this.timeSelectionService.getDefaultTimeSettings();
             } else {
                 this.timeSelectionService.updateTimeSettings(
+                    this.timeSelectionService.defaultQuickTimeSelections,
                     this.dashboard.dashboardTimeSettings,
                     new Date(),
                 );
@@ -301,6 +302,7 @@ export class DataExplorerDashboardPanelComponent
             .pipe(
                 switchMap(() => {
                     this.timeSelectionService.updateTimeSettings(
+                        this.timeSelectionService.defaultQuickTimeSelections,
                         this.timeSettings,
                         new Date(),
                     );

diff --git a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts
@@ -90,6 +90,7 @@ export class DataExplorerDataViewComponent
                 this.timeSettings = this.makeDefaultTimeSettings();
             } else {
                 this.timeSelectionService.updateTimeSettings(
+                    this.timeSelectionService.defaultQuickTimeSelections,
                     this.dataView.timeSettings as TimeSettings,
                     new Date(),
                 );

diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
@@ -205,6 +205,8 @@ export abstract class BaseDataExplorerWidgetDirective<
                             this.timeSettings = widgetTimeSettings.timeSettings;
                         } else {
                             this.timeSelectionService.updateTimeSettings(
+                                this.timeSelectionService
+                                    .defaultQuickTimeSelections,
                                 this.timeSettings,
                                 new Date(),
                             );