From c2b20d2823f76b67fb37be55fe16f0965b1b95d8 Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Mon, 13 Jan 2025 15:41:29 +0100 Subject: [PATCH 1/2] fix: refresh interval settings for widgets in dashboard --- .../refresh-interval-settings.component.ts | 2 +- .../time-range-selector.component.html | 10 +- .../time-range-selector.component.ts | 20 +-- ...custom-time-range-selection.component.html | 6 +- .../custom-time-range-selection.component.ts | 8 +- .../time-selector-menu.component.html | 8 +- .../time-selector-menu.component.scss | 4 + .../time-selector-menu.component.ts | 2 +- .../lib/services/time-selection.service.ts | 12 +- .../shared-ui/src/lib/shared-ui.module.ts | 1 + .../streampipes/shared-ui/src/public-api.ts | 1 + ...a-explorer-dashboard-widget.component.html | 5 + ...ata-explorer-dashboard-widget.component.ts | 121 +++++++++++++++--- 13 files changed, 158 insertions(+), 42 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts index b60e4e1c78..90491b8f40 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts @@ -33,7 +33,7 @@ export class DataExplorerRefreshIntervalSettingsComponent implements OnInit { @Input() availableOptions: DashboardLiveSettings[]; - liveRefreshEnabled: boolean; + liveRefreshEnabled: boolean = true; ngOnInit() { if (!this.liveSettings?.label) { 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 97aa766d30..2cee965d7f 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 @@ -39,15 +39,15 @@ class="formatted-datetime" > {{ timeString.startDate }} - +  {{ timeString.startTime }} -
+
 -  {{ timeString.endDate }} - +  {{ timeString.endTime }} @@ -69,7 +69,7 @@ [labels]="labels" (timeSettingsEmitter)="applyCurrentDateRange($event)" [quickSelections]="quickSelections" - [enableTimeChange]="enableTimeChange" + [enableTimePicker]="enableTimePicker" [maxDayRange]="maxDayRange" class="w-100" > @@ -89,7 +89,7 @@
+
-
+
{{ dateRangeString }}
Apply 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 5843f03a68..6dea9a8ef6 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 @@ -40,7 +40,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit { @Input() labels: TimeSelectorLabel; @Input() - enableTimeChange: boolean; + enableTimePicker: boolean; @Input() maxDayRange: number; @@ -96,7 +96,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit { } formatDate(date: Date): string { - if (this.enableTimeChange === true) { + if (this.enableTimePicker === true) { return date?.toLocaleDateString() || '-'; } else { return date?.toLocaleDateString() || ' '; @@ -119,7 +119,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit { if (this.selectionModel.isComplete()) { if (this.maxDayRange === 0 || daysDiff + 1 <= this.maxDayRange) { this.dateSelectionComplete = true; - if (!this.enableTimeChange) { + if (!this.enableTimePicker) { this.saveSelection(); } } else { @@ -130,7 +130,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit { } saveSelection(): void { - if (this.enableTimeChange === true) { + if (this.enableTimePicker === true) { this.updateDateTime( this.currentDateRange.start, this.currentStartTime, diff --git a/ui/projects/streampipes/shared-ui/src/lib/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 index 1dfc7f7119..ae4d68ad55 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/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 @@ -27,6 +27,12 @@
diff --git a/ui/projects/streampipes/shared-ui/src/lib/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 index b9c614c4d3..893860db05 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/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 @@ -42,3 +42,7 @@ .quick-link:hover { font-weight: bold; } + +.quick-link.selected { + font-weight: bold; +} diff --git a/ui/projects/streampipes/shared-ui/src/lib/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 index 318ce9ff79..3b2f0a7070 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/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 @@ -46,7 +46,7 @@ export class TimeRangeSelectorMenuComponent implements OnInit { labels: TimeSelectorLabel; @Input() - enableTimeChange: boolean; + enableTimePicker: boolean; @Input() maxDayRange: number; 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 cca6465323..162a6979fc 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 @@ -39,7 +39,7 @@ import { subWeeks, subYears, } from 'date-fns'; -import { TimeSelectorLabel } from '../components/time-selector/time-selector.model'; +import { TimeSelectorLabel } from '@streampipes/shared-ui'; @Injectable({ providedIn: 'root' }) export class TimeSelectionService { @@ -280,4 +280,14 @@ export class TimeSelectionService { const widgetTimeSettings = { timeSettings, widgetIndex }; this.timeSelectionChangeSubject.next(widgetTimeSettings); } + + public formatDate( + date: Date, + enableTimePicker: boolean, + dateFormat: Intl.DateTimeFormatOptions, + ): string { + return enableTimePicker + ? date.toLocaleDateString() + : date.toLocaleDateString(navigator.language, dateFormat); + } } 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 cdda6df485..ee9a72ba55 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 @@ -146,6 +146,7 @@ import { MatTreeModule } from '@angular/material/tree'; CustomTimeRangeSelectionComponent, TimeRangeSelectorComponent, TimeRangeSelectorMenuComponent, + DataExplorerRefreshIntervalSettingsComponent, ], }) 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 ab70e0b106..fc63ee4a92 100644 --- a/ui/projects/streampipes/shared-ui/src/public-api.ts +++ b/ui/projects/streampipes/shared-ui/src/public-api.ts @@ -43,6 +43,7 @@ export * from './lib/components/time-selector/time-selector.model'; 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/components/time-selector/refresh-interval-settings/refresh-interval-settings.component'; export * from './lib/models/sp-navigation.model'; 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 index 5bdfed7df1..41ff1319f9 100644 --- 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 @@ -104,6 +104,8 @@ aria-label="Options" data-cy="options-data-explorer" #menuTrigger="matMenuTrigger" + [matTooltip]="tooltipText" + matTooltipClass="no-wrap-tooltip" > { this.hasDataExplorerWritePrivileges = this.authService.hasRole( @@ -164,14 +182,39 @@ export class DataExplorerDashboardWidgetComponent }, ); this.chooseWidget(this.configuredWidget.widgetType); - this.clonedTimeSettings = { - startTime: this.timeSettings.startTime, - endTime: this.timeSettings.endTime, - timeSelectionId: this.timeSettings.timeSelectionId, - }; - if (this.dashboardItem?.timeSettings !== undefined) { + this.timeSelectionService.updateTimeSettings( + this.quickSelections, + this.getTimeSettings(), + new Date(), + ); + if ( + this.dashboardItem?.timeSettings !== undefined && + this.dashboardItem?.timeSettings !== null + ) { + this.clonedTimeSettings = { + startTime: this.dashboardItem?.timeSettings.startTime, + endTime: this.dashboardItem?.timeSettings.endTime, + timeSelectionId: + this.dashboardItem?.timeSettings.timeSelectionId, + }; + } else { + this.clonedTimeSettings = { + startTime: this.configuredWidget.timeSettings.startTime, + endTime: this.configuredWidget.timeSettings.endTime, + timeSelectionId: + this.configuredWidget.timeSettings.timeSelectionId, + }; + } + + if ( + this.dashboardItem?.timeSettings !== undefined && + this.dashboardItem?.timeSettings !== null && + this.dashboardItem?.timeSettings?.timeSelectionId !== + this.configuredWidget.timeSettings.timeSelectionId + ) { this.timeSettingsModified = true; } + this.createDateStringToolTip(this.getTimeSettings()); } ngOnDestroy() { @@ -201,6 +244,11 @@ export class DataExplorerDashboardWidgetComponent ); this.componentRef.instance.dataExplorerWidget = this.configuredWidget; this.componentRef.instance.timeSettings = this.getTimeSettings(); + this.timeSelectionService.updateTimeSettings( + this.quickSelections, + this.getTimeSettings(), + new Date(), + ); this.componentRef.instance.gridsterItem = this.dashboardItem; this.componentRef.instance.gridsterItemComponent = this.gridsterItemComponent; @@ -275,19 +323,28 @@ export class DataExplorerDashboardWidgetComponent ); } - modifyWidgetTimeSettings(timeSettings: TimeSettings): void { - this.dashboardItem.timeSettings = timeSettings; - this.timeSelectionService.notify(timeSettings, this.widgetIndex); + modifyWidgetTimeSettings(extendedTimeSettings: ExtendedTimeSettings): void { + this.dashboardItem.timeSettings = extendedTimeSettings.timeSettings; + this.timeSelectionService.notify( + extendedTimeSettings.timeSettings, + this.widgetIndex, + ); this.menu.closeMenu(); this.timeSettingsModified = true; + this.createDateStringToolTip(this.getTimeSettings()); } resetWidgetTimeSettings(): void { this.dashboardItem.timeSettings = undefined; + this.timeSelectionService.updateTimeSettings( + this.quickSelections, + this.getTimeSettings(), + new Date(), + ); this.clonedTimeSettings = { - startTime: this.timeSettings.startTime, - endTime: this.timeSettings.endTime, - timeSelectionId: this.timeSettings.timeSelectionId, + startTime: this.configuredWidget.timeSettings.startTime, + endTime: this.configuredWidget.timeSettings.endTime, + timeSelectionId: this.configuredWidget.timeSettings.timeSelectionId, }; this.timeSelectionService.notify( this.getTimeSettings(), @@ -295,5 +352,35 @@ export class DataExplorerDashboardWidgetComponent ); this.menu.closeMenu(); this.timeSettingsModified = false; + this.createDateStringToolTip(this.getTimeSettings()); + setTimeout(() => this.timeSelectorMenu.triggerDisplayUpdate()); + } + + createDateStringToolTip(timeSettings: TimeSettings): void { + if (timeSettings.timeSelectionId !== TimeSelectionConstants.CUSTOM) { + this.tooltipText = this.timeSelectionService.getTimeSelection( + this.quickSelections, + timeSettings.timeSelectionId, + ).label; + } else { + const startDate = new Date(timeSettings.startTime); + const endDate = new Date(timeSettings.endTime); + const timeString = { + startDate: this.timeSelectionService.formatDate( + startDate, + this.enableTimePicker, + this.dateFormat, + ), + endDate: this.timeSelectionService.formatDate( + endDate, + this.enableTimePicker, + this.dateFormat, + ), + startTime: startDate.toLocaleTimeString(), + endTime: endDate.toLocaleTimeString(), + }; + + this.tooltipText = `${timeString.startDate} ${timeString.startTime} - ${timeString.endDate} ${timeString.endTime}`; + } } } From ee720a2c9ddca0988f0b3cc26d0af84d123b523d Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Mon, 13 Jan 2025 19:38:03 +0100 Subject: [PATCH 2/2] fix: imports --- .../shared-ui/src/lib/services/time-selection.service.ts | 2 +- .../widget/data-explorer-dashboard-widget.component.ts | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) 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 162a6979fc..e132bfb83e 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 @@ -39,7 +39,7 @@ import { subWeeks, subYears, } from 'date-fns'; -import { TimeSelectorLabel } from '@streampipes/shared-ui'; +import { TimeSelectorLabel } from '../components/time-selector/time-selector.model'; @Injectable({ providedIn: 'root' }) export class TimeSelectionService { 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 95614e0ab1..9627b5e9e5 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 @@ -50,14 +50,12 @@ import { UserPrivilege } from '../../../_enums/user-privilege.enum'; import { CurrentUserService, TimeRangeSelectorMenuComponent, + TimeSelectionService, + TimeSelectorLabel, } from '@streampipes/shared-ui'; import { BaseWidgetData } from '../../models/dataview-dashboard.model'; import { DataExplorerDashboardService } from '../../services/data-explorer-dashboard.service'; import { MatMenuTrigger } from '@angular/material/menu'; -import { - TimeSelectionService, - TimeSelectorLabel, -} from '@streampipes/shared-ui'; @Component({ selector: 'sp-data-explorer-dashboard-widget',