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 9f3cff7d29..b3b417bb54 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 @@ -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 { @@ -53,7 +96,7 @@ export enum TimeSelectionId { export interface QuickTimeSelection { label: string; - timeSelectionId: TimeSelectionId; + timeSelectionId: string; startTime: (now: Date) => Date; endTime: (now: Date) => Date; addDividerAfter?: boolean; diff --git a/ui/projects/streampipes/shared-ui/package.json b/ui/projects/streampipes/shared-ui/package.json index f2f8f4d9b5..6f8f27f9ef 100644 --- a/ui/projects/streampipes/shared-ui/package.json +++ b/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" diff --git a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html similarity index 72% rename from ui/src/app/data-explorer/components/time-selector/time-range-selector.component.html rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html index eb51825326..4254f77e19 100644 --- a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html @@ -30,26 +30,27 @@ color="accent" [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" - matTooltip="Modify time" + [matTooltip]="labels.timeRangeSelectorTooltip" data-cy="time-selector-menu" (menuClosed)="menuTrigger.closeMenu()" > -
-
- {{ - timeString.startDate - }}  - {{ +
+ {{ timeString.startDate }} + +  {{ timeString.startTime }} -
- - -
- {{ timeString.endDate }}  - {{ timeString.endTime }} -
+ +  -  + {{ timeString.endDate }} + +  {{ + timeString.endTime + }} +
{{ simpleTimeString }} @@ -63,7 +64,11 @@ diff --git a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss similarity index 96% rename from ui/src/app/data-explorer/components/time-selector/time-range-selector.component.scss rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss index aef8593a37..19107dc1c1 100644 --- a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.scss +++ b/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; } diff --git a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts similarity index 76% rename from ui/src/app/data-explorer/components/time-selector/time-range-selector.component.ts rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts index a2b663d5b3..7641185dc1 100644 --- a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts @@ -28,13 +28,15 @@ 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'; @Component({ selector: 'sp-time-range-selector', @@ -55,13 +57,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() { + this.timeSelectionService.initializeQuickTimeSelection( + this.quickSelections, + ); + this.quickSelections = this.timeSelectionService.quickTimeSelections; this.createDateString(); } @@ -112,7 +142,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { 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,7 +156,9 @@ 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.timeSettings.timeSelectionId, ).label; @@ -135,12 +167,19 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { 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(), }; + this.timeStringMode = 'advanced'; } } + + private formatDate(date: Date): string { + return this.enableTimeChange + ? date.toLocaleDateString() + : date.toLocaleDateString(navigator.language, this.dateFormat); + } } diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html similarity index 86% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html index 1564d9b5dc..38fba4f86d 100644 --- a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html +++ b/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 @@ -
+
+
+ {{ dateRangeString }} +
+
+ {{ + labels.maxDayRangeErrorLabel.replace( + '${this.maxDayRange}', + maxDayRange.toString() + ) + }} +
diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss similarity index 91% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss index ce53cf59ea..d181ae05dd 100644 --- a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss +++ b/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); +} diff --git a/ui/src/app/data-explorer/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 similarity index 67% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts index 2129a521c9..ae1422e066 100644 --- a/ui/src/app/data-explorer/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 @@ -17,12 +17,17 @@ */ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { TimeSelectionId, TimeSettings } from '@streampipes/platform-services'; +import { + TimeSelectionConstants, + TimeSettings, +} from '@streampipes/platform-services'; import { DateRange, DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel, } from '@angular/material/datepicker'; +import { differenceInDays } from 'date-fns'; +import { TimeSelectorLabel } from '../../time-selector.model'; @Component({ selector: 'sp-custom-time-range-selection', @@ -31,6 +36,15 @@ import { }) export class CustomTimeRangeSelectionComponent implements OnInit { @Input() timeSettings: TimeSettings; + + @Input() labels: TimeSelectorLabel; + + @Input() + enableTimeChange: boolean; + + @Input() + maxDayRange: number; + @Output() timeSettingsEmitter = new EventEmitter(); currentStartDate: string; @@ -39,6 +53,9 @@ export class CustomTimeRangeSelectionComponent implements OnInit { currentEndTime: string; currentDateRange: DateRange; dateSelectionComplete = false; + dateRangeString: string; + + maxDateRangeError = false; constructor( private readonly selectionModel: MatRangeDateSelectionModel, @@ -75,13 +92,19 @@ export class CustomTimeRangeSelectionComponent implements OnInit { updateDateStrings(): void { this.currentStartDate = this.formatDate(this.currentDateRange.start); this.currentEndDate = this.formatDate(this.currentDateRange.end); + this.dateRangeString = `${this.currentStartDate} - ${this.currentEndDate}`; } formatDate(date: Date): string { - return date?.toLocaleDateString() || '-'; + if (this.enableTimeChange === true) { + return date?.toLocaleDateString() || '-'; + } else { + return date?.toLocaleDateString() || ' '; + } } onDateChange(selectedDate: Date): void { + this.maxDateRangeError = false; const newSelection = this.selectionStrategy.selectionFinished( selectedDate, this.selectionModel.selection, @@ -91,16 +114,36 @@ export class CustomTimeRangeSelectionComponent implements OnInit { newSelection.start, newSelection.end, ); - this.dateSelectionComplete = this.selectionModel.isComplete(); this.updateDateStrings(); + const daysDiff = differenceInDays(newSelection.end, newSelection.start); + if (this.selectionModel.isComplete()) { + if (this.maxDayRange === 0 || daysDiff + 1 <= this.maxDayRange) { + this.dateSelectionComplete = true; + if (!this.enableTimeChange) { + this.saveSelection(); + } + } else { + this.maxDateRangeError = true; + this.dateSelectionComplete = false; + } + } } saveSelection(): void { - this.updateDateTime(this.currentDateRange.start, this.currentStartTime); - this.updateDateTime(this.currentDateRange.end, this.currentEndTime); + if (this.enableTimeChange === true) { + this.updateDateTime( + this.currentDateRange.start, + this.currentStartTime, + ); + this.updateDateTime(this.currentDateRange.end, this.currentEndTime); + } else { + this.updateDateTime(this.currentDateRange.start, '00:00:00'); + this.updateDateTime(this.currentDateRange.end, '23:59:59'); + } + this.timeSettings.startTime = this.currentDateRange.start.getTime(); this.timeSettings.endTime = this.currentDateRange.end.getTime(); - this.timeSettings.timeSelectionId = TimeSelectionId.CUSTOM; + this.timeSettings.timeSelectionId = TimeSelectionConstants.CUSTOM; this.timeSettingsEmitter.emit(this.timeSettings); } diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html similarity index 84% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.html rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html index e53550aa43..2bfda05f10 100644 --- a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html @@ -16,11 +16,13 @@ ~ --> -
+
-
Quick selection
+
+ {{ labels.quickSelectionLabel }} +
-
Custom
+
{{ labels.customLabel }}
diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.scss rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.scss diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts similarity index 90% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.ts rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts index a24958bb31..a2748d9a47 100644 --- a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts @@ -30,6 +30,7 @@ import { } from '@streampipes/platform-services'; import { TimeSelectionService } from '../../../services/time-selection.service'; import { CustomTimeRangeSelectionComponent } from './custom-time-range-selection/custom-time-range-selection.component'; +import { TimeSelectorLabel } from '../time-selector.model'; @Component({ selector: 'sp-time-selector-menu', @@ -40,20 +41,28 @@ export class TimeRangeSelectorMenuComponent implements OnInit { @Input() timeSettings: TimeSettings; + @Input() + labels: TimeSelectorLabel; + + @Input() + enableTimeChange: boolean; + + @Input() + maxDayRange: number; + @Output() timeSettingsEmitter: EventEmitter = new EventEmitter(); - quickSelections: QuickTimeSelection[] = []; + @Input() + quickSelections: QuickTimeSelection[]; @ViewChild('timeRangeSelection') timeRangeSelection: CustomTimeRangeSelectionComponent; constructor(private timeSelectionService: TimeSelectionService) {} - ngOnInit(): void { - this.quickSelections = this.timeSelectionService.quickTimeSelections; - } + ngOnInit(): void {} applyQuickSelection(quickSelection: QuickTimeSelection): void { const selectedDateRange = diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts new file mode 100644 index 0000000000..7905f9ff09 --- /dev/null +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts @@ -0,0 +1,24 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +export interface TimeSelectorLabel { + quickSelectionLabel: string; + customLabel: string; + maxDayRangeErrorLabel: string; + timeRangeSelectorTooltip: string; +} diff --git a/ui/src/app/data-explorer/services/time-selection.service.ts b/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts similarity index 53% rename from ui/src/app/data-explorer/services/time-selection.service.ts rename to ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts index 5c55e7756a..d44d641a88 100644 --- a/ui/src/app/data-explorer/services/time-selection.service.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts @@ -21,12 +21,13 @@ import { Subject } from 'rxjs'; import { DateRange, QuickTimeSelection, - TimeSelectionId, + TimeSelectionConstants, TimeSettings, WidgetTimeSettings, } from '@streampipes/platform-services'; import { startOfDay, + endOfDay, startOfHour, startOfMonth, startOfWeek, @@ -41,84 +42,132 @@ import { @Injectable({ providedIn: 'root' }) export class TimeSelectionService { - legacyMappings: Record = { - 15: TimeSelectionId.LAST_15_MINUTES, - 60: TimeSelectionId.LAST_HOUR, - 1440: TimeSelectionId.LAST_DAY, - 10080: TimeSelectionId.LAST_WEEK, - 43200: TimeSelectionId.LAST_MONTH, - 525600: TimeSelectionId.LAST_YEAR, + legacyMappings: Record = { + 15: TimeSelectionConstants.LAST_15_MINUTES, + 60: TimeSelectionConstants.LAST_HOUR, + 1440: TimeSelectionConstants.LAST_DAY, + 10080: TimeSelectionConstants.LAST_WEEK, + 43200: TimeSelectionConstants.LAST_MONTH, + 525600: TimeSelectionConstants.LAST_YEAR, }; - quickTimeSelections: QuickTimeSelection[] = [ + defaultQuickTimeSelections: QuickTimeSelection[] = [ { label: 'Last 15 min', - timeSelectionId: TimeSelectionId.LAST_15_MINUTES, + timeSelectionId: TimeSelectionConstants.LAST_15_MINUTES, startTime: now => subMinutes(now, 15), endTime: now => now, }, { label: 'Last 1 hour', - timeSelectionId: TimeSelectionId.LAST_HOUR, + timeSelectionId: TimeSelectionConstants.LAST_HOUR, startTime: now => subHours(now, 1), endTime: now => now, }, { label: 'Last 1 day', - timeSelectionId: TimeSelectionId.LAST_DAY, + timeSelectionId: TimeSelectionConstants.LAST_DAY, startTime: now => subDays(now, 1), endTime: now => now, }, { label: 'Last 1 week', - timeSelectionId: TimeSelectionId.LAST_WEEK, + timeSelectionId: TimeSelectionConstants.LAST_WEEK, startTime: now => subWeeks(now, 1), endTime: now => now, }, { label: 'Last 1 month', - timeSelectionId: TimeSelectionId.LAST_MONTH, + timeSelectionId: TimeSelectionConstants.LAST_MONTH, startTime: now => subMonths(now, 1), endTime: now => now, }, { label: 'Last 1 year', - timeSelectionId: TimeSelectionId.LAST_YEAR, + timeSelectionId: TimeSelectionConstants.LAST_YEAR, startTime: now => subYears(now, 1), endTime: now => now, }, { label: 'Current day', - timeSelectionId: TimeSelectionId.CURRENT_DAY, + timeSelectionId: TimeSelectionConstants.CURRENT_DAY, startTime: now => startOfDay(now), endTime: now => now, }, { label: 'Current hour', - timeSelectionId: TimeSelectionId.CURRENT_HOUR, + timeSelectionId: TimeSelectionConstants.CURRENT_HOUR, startTime: now => startOfHour(now), endTime: now => now, }, { label: 'Current week', - timeSelectionId: TimeSelectionId.CURRENT_WEEK, + timeSelectionId: TimeSelectionConstants.CURRENT_WEEK, startTime: now => startOfWeek(now), endTime: now => now, }, { label: 'Current month', - timeSelectionId: TimeSelectionId.CURRENT_MONTH, + timeSelectionId: TimeSelectionConstants.CURRENT_MONTH, startTime: now => startOfMonth(now), endTime: now => now, }, { label: 'Current year', - timeSelectionId: TimeSelectionId.CURRENT_YEAR, + timeSelectionId: TimeSelectionConstants.CURRENT_YEAR, startTime: now => startOfYear(now), endTime: now => now, }, ]; + 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 { @@ -129,21 +178,18 @@ export class TimeSelectionService { public getDefaultTimeSettings(): TimeSettings { return this.getTimeSettings( - TimeSelectionId.LAST_15_MINUTES, + this.quickTimeSelections[0].timeSelectionId, new Date(), ); } - public getTimeSettings( - timeSelectionId: TimeSelectionId, - now: Date, - ): TimeSettings { + public getTimeSettings(timeSelectionId: string, now: Date): TimeSettings { const selection = this.getTimeSelection(timeSelectionId); return { startTime: selection.startTime(now).getTime(), endTime: selection.endTime(now).getTime(), dynamicSelection: -1, - timeSelectionId: timeSelectionId, + timeSelectionId: selection.timeSelectionId, }; } @@ -152,8 +198,21 @@ export class TimeSelectionService { if (timeSettings.timeSelectionId === undefined) { timeSettings.timeSelectionId = this.findLegacyTimeSelectionId(timeSettings); + } else if (typeof timeSettings.timeSelectionId === 'number') { + timeSettings.timeSelectionId = + TimeSelectionConstants.getLegacyTimeSelectionID( + timeSettings.timeSelectionId, + ); } - if (timeSettings.timeSelectionId !== TimeSelectionId.CUSTOM) { + if (timeSettings.timeSelectionId !== TimeSelectionConstants.CUSTOM) { + if ( + this.quickTimeSelections.find( + s => s.timeSelectionId === timeSettings.timeSelectionId, + ) === undefined + ) { + timeSettings.timeSelectionId = + this.quickTimeSelections[0].timeSelectionId; + } const updatedTimeSettings = this.getTimeSettings( timeSettings.timeSelectionId, now, @@ -163,19 +222,19 @@ export class TimeSelectionService { } } - public getTimeSelection(timeSelectionId: TimeSelectionId) { - return this.quickTimeSelections.find( - s => s.timeSelectionId === timeSelectionId, + public getTimeSelection(timeSelectionId: string): QuickTimeSelection { + return ( + this.quickTimeSelections.find( + s => s.timeSelectionId === timeSelectionId, + ) || this.quickTimeSelections[0] ); } - private findLegacyTimeSelectionId( - timeSettings: TimeSettings, - ): TimeSelectionId { + private findLegacyTimeSelectionId(timeSettings: TimeSettings): string { if (timeSettings.dynamicSelection in this.legacyMappings) { return this.legacyMappings[timeSettings.dynamicSelection]; } else { - return TimeSelectionId.CUSTOM; + return TimeSelectionConstants.CUSTOM; } } 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 index d5b90cf68d..5a1b150843 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts @@ -17,7 +17,13 @@ */ import { NgModule } from '@angular/core'; +import { + DefaultMatCalendarRangeStrategy, + MatDatepickerModule, + MatRangeDateSelectionModel, +} from '@angular/material/datepicker'; import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component'; +import { MatCardModule } from '@angular/material/card'; import { PanelDialogComponent } from './dialog/panel-dialog/panel-dialog.component'; import { StandardDialogComponent } from './dialog/standard-dialog/standard-dialog.component'; import { CommonModule } from '@angular/common'; @@ -55,6 +61,9 @@ import { AssetBrowserFilterTypeComponent } from './components/asset-browser/asse import { AssetBrowserHierarchyComponent } from './components/asset-browser/asset-browser-hierarchy/asset-browser-hierarchy.component'; import { AssetBrowserNodeComponent } from './components/asset-browser/asset-browser-hierarchy/asset-browser-node/asset-browser-node.component'; import { AssetBrowserNodeInfoComponent } from './components/asset-browser/asset-browser-hierarchy/asset-browser-node/asset-browser-node-info/asset-browser-node-info.component'; +import { TimeRangeSelectorComponent } from './components/time-selector/time-range-selector.component'; +import { TimeRangeSelectorMenuComponent } from './components/time-selector/time-selector-menu/time-selector-menu.component'; +import { CustomTimeRangeSelectionComponent } from './components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component'; import { MatSelectModule } from '@angular/material/select'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatMenuModule } from '@angular/material/menu'; @@ -74,6 +83,7 @@ import { MatTreeModule } from '@angular/material/tree'; AssetBrowserNodeInfoComponent, AssetBrowserToolbarComponent, ConfirmDialogComponent, + CustomTimeRangeSelectionComponent, PanelDialogComponent, StandardDialogComponent, SpBasicFieldDescriptionComponent, @@ -88,6 +98,8 @@ import { MatTreeModule } from '@angular/material/tree'; SpTableComponent, SplitSectionComponent, SpWarningBoxComponent, + TimeRangeSelectorComponent, + TimeRangeSelectorMenuComponent, ], imports: [ CommonModule, @@ -102,6 +114,8 @@ import { MatTreeModule } from '@angular/material/tree'; MatTabsModule, MatTooltipModule, MatTreeModule, + MatDatepickerModule, + MatCardModule, PortalModule, OverlayModule, MatDialogModule, @@ -109,6 +123,7 @@ import { MatTreeModule } from '@angular/material/tree'; MatPaginator, MatSort, ], + providers: [DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], exports: [ AssetBrowserComponent, ConfirmDialogComponent, @@ -126,6 +141,9 @@ import { MatTreeModule } from '@angular/material/tree'; SpTableComponent, SplitSectionComponent, SpWarningBoxComponent, + CustomTimeRangeSelectionComponent, + TimeRangeSelectorComponent, + TimeRangeSelectorMenuComponent, ], }) 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 index a923f5abbc..40fe20fa0a 100644 --- a/ui/projects/streampipes/shared-ui/src/public-api.ts +++ b/ui/projects/streampipes/shared-ui/src/public-api.ts @@ -39,6 +39,9 @@ export * from './lib/components/sp-exception-message/exception-details/exception export * from './lib/components/sp-label/sp-label.component'; export * from './lib/components/sp-table/sp-table.component'; export * from './lib/components/warning-box/warning-box.component'; +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/models/sp-navigation.model'; @@ -47,4 +50,5 @@ export * from './lib/services/jwt-token-storage.service'; export * from './lib/services/current-user.service'; export * from './lib/services/echarts-toolbox.service'; export * from './lib/services/colorization.service'; +export * from './lib/services/time-selection.service'; export * from './lib/components/asset-browser/asset-browser.service'; diff --git a/ui/projects/streampipes/shared-ui/tsconfig.lib.json b/ui/projects/streampipes/shared-ui/tsconfig.lib.json index e2c590dbbf..0b34959311 100644 --- a/ui/projects/streampipes/shared-ui/tsconfig.lib.json +++ b/ui/projects/streampipes/shared-ui/tsconfig.lib.json @@ -8,7 +8,7 @@ "declarationMap": true, "inlineSources": true, "types": [], - "lib": ["dom", "es2018"] + "lib": ["dom", "es2020"] }, "exclude": ["src/test.ts", "**/*.spec.ts"] } 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 7a28ff025d..5a64071cb0 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 @@ -25,10 +25,9 @@ import { DataExplorerWidgetModel, DataLakeMeasure, DataViewDataExplorerService, - TimeSelectionId, + TimeSelectionConstants, TimeSettings, } from '@streampipes/platform-services'; -import { TimeSelectionService } from '../../services/time-selection.service'; import { AuthService } from '../../../services/auth.service'; import { UserPrivilege } from '../../../_enums/user-privilege.enum'; import { @@ -48,6 +47,7 @@ import { SpDataExplorerRoutes } from '../../data-explorer.routes'; import { DataExplorerRoutingService } from '../../services/data-explorer-routing.service'; import { DataExplorerDetectChangesService } from '../../services/data-explorer-detect-changes.service'; import { SupportsUnsavedChangeDialog } from '../../models/dataview-dashboard.model'; +import { TimeSelectionService } from '@streampipes/shared-ui'; @Component({ selector: 'sp-data-explorer-dashboard-panel', @@ -242,7 +242,7 @@ export class DataExplorerDashboardPanelComponent startTime, endTime, dynamicSelection: -1, - timeSelectionId: TimeSelectionId.CUSTOM, + timeSelectionId: TimeSelectionConstants.CUSTOM, }; } 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 202946c582..6ede8d66cb 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 @@ -30,7 +30,6 @@ import { RouterStateSnapshot, } from '@angular/router'; import { ConfirmDialogComponent } from '@streampipes/shared-ui'; -import { TimeSelectionService } from '../../services/time-selection.service'; import { DataExplorerRoutingService } from '../../services/data-explorer-routing.service'; import { DataExplorerDashboardService } from '../../services/data-explorer-dashboard.service'; import { DataExplorerDetectChangesService } from '../../services/data-explorer-detect-changes.service'; @@ -38,6 +37,7 @@ import { SupportsUnsavedChangeDialog } from '../../models/dataview-dashboard.mod import { Observable, of } from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; import { map } from 'rxjs/operators'; +import { TimeSelectionService } from '@streampipes/shared-ui'; @Component({ selector: 'sp-data-explorer-data-view', 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 index 21e5170c0e..32c1d53801 100644 --- 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 @@ -47,8 +47,8 @@ import { UserPrivilege } from '../../../_enums/user-privilege.enum'; import { CurrentUserService } from '@streampipes/shared-ui'; import { BaseWidgetData } from '../../models/dataview-dashboard.model'; import { DataExplorerDashboardService } from '../../services/data-explorer-dashboard.service'; -import { TimeSelectionService } from '../../services/time-selection.service'; import { MatMenuTrigger } from '@angular/material/menu'; +import { TimeSelectionService } from '@streampipes/shared-ui'; @Component({ selector: 'sp-data-explorer-dashboard-widget', @@ -162,7 +162,7 @@ export class DataExplorerDashboardWidgetComponent endTime: this.timeSettings.endTime, timeSelectionId: this.timeSettings.timeSelectionId, }; - if (this.dashboardItem.timeSettings !== undefined) { + if (this.dashboardItem?.timeSettings !== undefined) { this.timeSettingsModified = true; } } 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 5df627e9e7..b28d5ac40a 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 @@ -45,10 +45,10 @@ import { } from '../../../models/dataview-dashboard.model'; import { Observable, Subject, Subscription, zip } from 'rxjs'; import { DataExplorerFieldProviderService } from '../../../services/data-explorer-field-provider-service'; -import { TimeSelectionService } from '../../../services/time-selection.service'; import { catchError, switchMap } from 'rxjs/operators'; import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widget-registry'; import { SpFieldUpdateService } from '../../../services/field-update.service'; +import { TimeSelectionService } from '@streampipes/shared-ui'; @Directive() export abstract class BaseDataExplorerWidgetDirective< diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts index c3070b45b5..5c5e6790b3 100644 --- a/ui/src/app/data-explorer/data-explorer.module.ts +++ b/ui/src/app/data-explorer/data-explorer.module.ts @@ -23,11 +23,6 @@ import { FlexLayoutModule } from '@ngbracket/ngx-layout'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatChipsModule } from '@angular/material/chips'; import { MatNativeDateModule } from '@angular/material/core'; -import { - DefaultMatCalendarRangeStrategy, - MatDatepickerModule, - MatRangeDateSelectionModel, -} from '@angular/material/datepicker'; import { MatGridListModule } from '@angular/material/grid-list'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSliderModule } from '@angular/material/slider'; @@ -43,7 +38,6 @@ import { CoreUiModule } from '../core-ui/core-ui.module'; import { DataExplorerDashboardGridComponent } from './components/widget-view/grid-view/data-explorer-dashboard-grid.component'; import { DataExplorerOverviewComponent } from './components/overview/data-explorer-overview.component'; import { DataExplorerDashboardPanelComponent } from './components/dashboard/data-explorer-dashboard-panel.component'; -import { TimeRangeSelectorComponent } from './components/time-selector/time-range-selector.component'; import { DataExplorerDashboardWidgetComponent } from './components/widget/data-explorer-dashboard-widget.component'; import { ImageWidgetComponent } from './components/widgets/image/image-widget.component'; import { TrafficLightWidgetComponent } from './components/widgets/traffic-light/traffic-light-widget.component'; @@ -129,8 +123,6 @@ import { DataExplorerDataViewSelectionComponent } from './components/dashboard/d import { DataExplorerDashboardWidgetSelectionPanelComponent } from './components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component'; import { DataExplorerDataViewPreviewComponent } from './components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component'; import { DataExplorerDashboardToolbarComponent } from './components/dashboard/dashboard-toolbar/dashboard-toolbar.component'; -import { TimeRangeSelectorMenuComponent } from './components/time-selector/time-selector-menu/time-selector-menu.component'; -import { CustomTimeRangeSelectionComponent } from './components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component'; import { DataExplorerRefreshIntervalSettingsComponent } from './components/dashboard/dashboard-toolbar/refresh-interval-settings/refresh-interval-settings.component'; import { OrderSelectionPanelComponent } from './components/data-view/data-view-designer-panel/data-settings/order-selection-panel/order-selection-panel.component'; import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/gauge-widget-config.component'; @@ -174,7 +166,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga MatProgressSpinnerModule, ReactiveFormsModule, CoreUiModule, - MatDatepickerModule, MatNativeDateModule, MatSliderModule, MatSlideToggleModule, @@ -215,7 +206,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga ], declarations: [ AggregateConfigurationComponent, - CustomTimeRangeSelectionComponent, DataExplorerDashboardGridComponent, DataExplorerOverviewComponent, DataExplorerDashboardPanelComponent, @@ -259,8 +249,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga MapWidgetComponent, HeatmapWidgetConfigComponent, ImageViewerComponent, - TimeRangeSelectorComponent, - TimeRangeSelectorMenuComponent, DataExplorerVisualisationSettingsComponent, GroupSelectionPanelComponent, DataExplorerVisualisationSettingsComponent, @@ -283,7 +271,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga SpTimeSeriesAppearanceConfigComponent, SpDataZoomConfigComponent, ], - providers: [DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], exports: [], }) export class DataExplorerModule { diff --git a/ui/src/app/data-explorer/services/data-explorer-detect-changes.service.ts b/ui/src/app/data-explorer/services/data-explorer-detect-changes.service.ts index 241d3315c9..bf3631205d 100644 --- a/ui/src/app/data-explorer/services/data-explorer-detect-changes.service.ts +++ b/ui/src/app/data-explorer/services/data-explorer-detect-changes.service.ts @@ -51,7 +51,7 @@ export class DataExplorerDetectChangesService { originalTimeSettings: TimeSettings, currentTimeSettings: TimeSettings, ): boolean { - if (originalTimeSettings.timeSelectionId == 0) { + if (originalTimeSettings.timeSelectionId === 'custom') { return this.hasCustomTimeSettingsChanged( originalTimeSettings, currentTimeSettings,