fix: Resolve minor bugs in time selection component

ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts

@@ -21,7 +21,50 @@ export interface TimeSettings {
     endTime: number;
     // deprecated
     dynamicSelection?: 15 | 60 | 1440 | 10080 | 43800 | 525600 | -1;
-    timeSelectionId?: TimeSelectionId;
+    timeSelectionId?: string;
+}
+
+export class TimeSelectionConstants {
+    static CUSTOM = 'custom';
+    static LAST_15_MINUTES = 'last-15-minutes';
+    static LAST_HOUR = 'last-hour';
+    static CURRENT_HOUR = 'current-hour';
+    static LAST_DAY = 'last-day';
+    static CURRENT_DAY = 'current-day';
+    static LAST_WEEK = 'last-week';
+    static CURRENT_WEEK = 'current-week';
+    static LAST_MONTH = 'last-month';
+    static CURRENT_MONTH = 'current-month';
+    static LAST_YEAR = 'last-year';
+    static CURRENT_YEAR = 'current-year';
+
+    static getLegacyTimeSelectionID(legacyID: number) {
+        if (legacyID === 0) {
+            return TimeSelectionConstants.CUSTOM;
+        } else if (legacyID === 1) {
+            return TimeSelectionConstants.LAST_15_MINUTES;
+        } else if (legacyID === 2) {
+            return TimeSelectionConstants.LAST_HOUR;
+        } else if (legacyID === 3) {
+            return TimeSelectionConstants.CURRENT_HOUR;
+        } else if (legacyID === 4) {
+            return TimeSelectionConstants.LAST_DAY;
+        } else if (legacyID === 5) {
+            return TimeSelectionConstants.CURRENT_DAY;
+        } else if (legacyID === 6) {
+            return TimeSelectionConstants.LAST_WEEK;
+        } else if (legacyID === 7) {
+            return TimeSelectionConstants.CURRENT_WEEK;
+        } else if (legacyID === 8) {
+            return TimeSelectionConstants.LAST_MONTH;
+        } else if (legacyID === 9) {
+            return TimeSelectionConstants.CURRENT_MONTH;
+        } else if (legacyID === 10) {
+            return TimeSelectionConstants.LAST_YEAR;
+        } else if (legacyID === 11) {
+            return TimeSelectionConstants.CURRENT_YEAR;
+        }
+    }
 }
 
 export interface WidgetTimeSettings {
@@ -34,6 +77,7 @@ export interface TimeString {
     startTime: string;
     endDate: string;
     endTime: string;
+    sameDay: boolean;
 }
 
 export enum TimeSelectionId {
@@ -53,7 +97,7 @@ export enum TimeSelectionId {
 
 export interface QuickTimeSelection {
     label: string;
-    timeSelectionId: TimeSelectionId;
+    timeSelectionId: string;
     startTime: (now: Date) => Date;
     endTime: (now: Date) => Date;
     addDividerAfter?: boolean;

ui/projects/streampipes/shared-ui/package.json

@@ -10,7 +10,8 @@
     "@angular/material": "^17.3.3",
     "@angular/router": "^17.3.3",
     "@streampipes/platform-services": "0.0.1",
-    "rxjs": "^7.5.7"
+    "rxjs": "^7.5.7",
+    "date-fns": "^3.6.0"
   },
   "dependencies": {
     "tslib": "^2.6.2"

ui/src/app/data-explorer/components/time-selector/time-range-selector.component.html → ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html

@@ -30,25 +30,28 @@
             color="accent"
             [matMenuTriggerFor]="menu"
             #menuTrigger="matMenuTrigger"
-            matTooltip="Modify time"
+            [matTooltip]="labels.timeRangeSelectorTooltip"
             data-cy="time-selector-menu"
             (menuClosed)="menuTrigger.closeMenu()"
         >
-            <div *ngIf="timeStringMode === 'advanced'">
-                <div class="formatted-datetime">
-                    <span class="formatted-date">{{
-                        timeString.startDate
-                    }}</span
-                    >&nbsp;
-                    <span class="formatted-time">{{
+            <div
+                *ngIf="timeStringMode === 'advanced'"
+                class="formatted-datetime"
+            >
+                <span class="formatted-date">{{ timeString.startDate }}</span>
+                <span *ngIf="enableTimeChange">
+                    &nbsp;<span class="formatted-time">{{
                         timeString.startTime
                     }}</span>
-                </div>
-                -
-                <div class="formatted-datetime">
-                    <span class="formatted-date">{{ timeString.endDate }}</span
-                    >&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'">
@@ -63,20 +66,24 @@
             <sp-time-selector-menu
                 #timeSelectorMenu
                 [timeSettings]="timeSettings"
+                [labels]="labels"
                 (timeSettingsEmitter)="applyCurrentDateRange($event)"
+                [quickSelections]="quickSelections"
+                [enableTimeChange]="enableTimeChange"
+                [maxDayRange]="maxDayRange"
                 class="w-100"
             >
             </sp-time-selector-menu>
         </mat-menu>
     </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>

ui/src/app/data-explorer/components/time-selector/time-range-selector.component.scss → ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss

@@ -16,8 +16,6 @@
  *
  */
 
-@import '../../../../scss/variables';
-
 .start-date-margin {
     margin-right: 5px;
 }
@@ -65,8 +63,9 @@
 }
 
 .formatted-datetime {
-    display: inline;
+    display: inline-flex;
     background: var(--color-bg-2);
     border-radius: 5px;
     padding: 5px;
+    white-space: nowrap;
 }

ui/src/app/data-explorer/components/time-selector/time-range-selector.component.ts → ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts

@@ -28,13 +28,16 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import {
-    TimeSelectionId,
+    QuickTimeSelection,
+    TimeSelectionConstants,
     TimeSettings,
     TimeString,
 } from '@streampipes/platform-services';
 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',
@@ -55,13 +58,41 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     @Input()
     showTimeSelector = true;
 
+    @Input()
+    enableTimeChange = true;
+
+    @Input()
+    maxDayRange = 0;
+
+    @Input()
+    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',
+    };
+
     simpleTimeString: string = '';
     timeString: TimeString;
     timeStringMode: 'simple' | 'advanced' = 'simple';
+    dateFormat: Intl.DateTimeFormatOptions = {
+        weekday: 'short',
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+    };
 
     constructor(private timeSelectionService: TimeSelectionService) {}
 
     ngOnInit() {
+        if (!this.quickSelections) {
+            this.quickSelections =
+                this.timeSelectionService.defaultQuickTimeSelections;
+        }
         this.createDateString();
     }
 
@@ -95,6 +126,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
 
     updateTimeSettingsAndReload() {
         this.timeSelectionService.updateTimeSettings(
+            this.quickSelections,
             this.timeSettings,
             new Date(),
         );
@@ -105,14 +137,19 @@ 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;
-        this.timeSettings.timeSelectionId = TimeSelectionId.CUSTOM;
+        this.timeSettings.timeSelectionId = TimeSelectionConstants.CUSTOM;
         this.timeSelectorMenu.triggerDisplayUpdate();
         this.createDateString();
         this.reloadData();
@@ -126,21 +163,32 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     }
 
     createDateString(): void {
-        if (this.timeSettings.timeSelectionId !== TimeSelectionId.CUSTOM) {
+        if (
+            this.timeSettings.timeSelectionId !== TimeSelectionConstants.CUSTOM
+        ) {
             this.simpleTimeString = this.timeSelectionService.getTimeSelection(
+                this.quickSelections,
                 this.timeSettings.timeSelectionId,
             ).label;
             this.timeStringMode = 'simple';
         } else {
             const startDate = new Date(this.timeSettings.startTime);
             const endDate = new Date(this.timeSettings.endTime);
             this.timeString = {
-                startDate: startDate.toLocaleDateString(),
-                endDate: endDate.toLocaleDateString(),
+                startDate: this.formatDate(startDate),
+                endDate: this.formatDate(endDate),
                 startTime: startDate.toLocaleTimeString(),
                 endTime: endDate.toLocaleTimeString(),
+                sameDay: isSameDay(startDate, endDate),
             };
+
             this.timeStringMode = 'advanced';
         }
     }
+
+    private formatDate(date: Date): string {
+        return this.enableTimeChange
+            ? date.toLocaleDateString()
+            : date.toLocaleDateString(navigator.language, this.dateFormat);
+    }
 }

ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html → ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html

@@ -26,7 +26,7 @@
             </mat-calendar>
         </mat-card>
 
-        <div fxLayout="column" class="mt-10 mr-5">
+        <div *ngIf="enableTimeChange" fxLayout="column" class="mt-10 mr-5">
             <div fxLayout="row" fxLayoutGap="10px">
                 <div fxFlex="30">
                     <span
@@ -73,6 +73,21 @@
             </div>
         </div>
     </div>
+    <div *ngIf="!enableTimeChange" fxLayout="row" class="mt-10 date-preview">
+        {{ dateRangeString }}
+    </div>
+    <div
+        fxLayout="row"
+        class="mt-5 max-date-range-error"
+        *ngIf="maxDateRangeError"
+    >
+        {{
+            labels.maxDayRangeErrorLabel.replace(
+                '${this.maxDayRange}',
+                maxDayRange.toString()
+            )
+        }}
+    </div>
     <div fxLayout="row" fxLayoutAlign="end center" class="mt-10">
         <ng-content> </ng-content>
         <button
@@ -81,6 +96,7 @@
             data-cy="apply-custom-time"
             (click)="saveSelection()"
             [disabled]="!dateSelectionComplete"
+            *ngIf="enableTimeChange"
         >
             Apply
         </button>

ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss → ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss

@@ -20,3 +20,8 @@
     font-family: inherit;
     font-size: 11pt;
 }
+
+.max-date-range-error {
+    font-size: 9pt;
+    color: var(--color-warn);
+}