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 index b3b417bb54..f061e5daff 100644 --- 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/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html index 4254f77e19..a959404dca 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html @@ -44,13 +44,15 @@ timeString.startTime }} -  -  - {{ timeString.endDate }} - -  {{ - timeString.endTime - }} - +
+  -  + {{ timeString.endDate }} + +  {{ + timeString.endTime + }} + +
{{ simpleTimeString }} @@ -76,12 +78,12 @@
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts index 7641185dc1..ad8ef22523 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts +++ b/ui/projects/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/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts index ae1422e066..5843f03a68 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/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 index d44d641a88..a635ab1c54 100644 --- 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 index 5a64071cb0..ab3715cefc 100644 --- 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 index 6ede8d66cb..f78329f924 100644 --- 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 index b28d5ac40a..3d5c8b5d17 100644 --- 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(), );