This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch rel/0.97.0
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/rel/0.97.0 by this push:
new 3cf319a01a fix: refresh interval settings for widgets in dashboard
(#3421)
3cf319a01a is described below
commit 3cf319a01ab3159bfeab193d9a8a3eaf74882073
Author: Marcel Früholz <[email protected]>
AuthorDate: Tue Jan 14 13:55:29 2025 +0100
fix: refresh interval settings for widgets in dashboard (#3421)
* fix: refresh interval settings for widgets in dashboard
* fix: imports
---
.../refresh-interval-settings.component.ts | 2 +-
.../time-range-selector.component.html | 10 +-
.../time-selector/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 +-
.../src/lib/services/time-selection.service.ts | 10 ++
.../shared-ui/src/lib/shared-ui.module.ts | 1 +
.../streampipes/shared-ui/src/public-api.ts | 1 +
.../data-explorer-dashboard-widget.component.html | 5 +
.../data-explorer-dashboard-widget.component.ts | 119 ++++++++++++++++++---
13 files changed, 155 insertions(+), 41 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"
>
<span class="formatted-date">{{ timeString.startDate }}</span>
- <span *ngIf="enableTimeChange">
+ <span *ngIf="enableTimePicker">
<span class="formatted-time">{{
timeString.startTime
}}</span>
</span>
- <div *ngIf="enableTimeChange || !timeString.sameDay">
+ <div *ngIf="enableTimePicker || !timeString.sameDay">
<span class="formatted-date"> - </span>
<span class="formatted-date">{{ timeString.endDate
}}</span>
- <span *ngIf="enableTimeChange">
+ <span *ngIf="enableTimePicker">
<span class="formatted-time">{{
timeString.endTime
}}</span>
@@ -69,7 +69,7 @@
[labels]="labels"
(timeSettingsEmitter)="applyCurrentDateRange($event)"
[quickSelections]="quickSelections"
- [enableTimeChange]="enableTimeChange"
+ [enableTimePicker]="enableTimePicker"
[maxDayRange]="maxDayRange"
class="w-100"
>
@@ -89,7 +89,7 @@
<div fxLayoutAlign="end center">
<sp-data-explorer-refresh-interval-settings-component
#refreshIntervalSettings
- *ngIf="liveSettings && showTimeSelector && showIntervalSettings"
+ *ngIf="liveSettings && showIntervalSettings"
[liveSettings]="liveSettings"
(intervalSettingsChangedEmitter)="
intervalSettingsChangedEmitter.emit($event)
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 d07fff080e..154dffc3cf 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
@@ -73,7 +73,7 @@ export class TimeRangeSelectorComponent
showTimeSelector = true;
@Input()
- enableTimeChange = true;
+ enableTimePicker = true;
@Input()
showIntervalSettings = true;
@@ -225,8 +225,16 @@ export class TimeRangeSelectorComponent
const startDate = new Date(this.timeSettings.startTime);
const endDate = new Date(this.timeSettings.endTime);
this.timeString = {
- startDate: this.formatDate(startDate),
- endDate: this.formatDate(endDate),
+ startDate: this.timeSelectionService.formatDate(
+ startDate,
+ this.enableTimePicker,
+ this.dateFormat,
+ ),
+ endDate: this.timeSelectionService.formatDate(
+ endDate,
+ this.enableTimePicker,
+ this.dateFormat,
+ ),
startTime: startDate.toLocaleTimeString(),
endTime: endDate.toLocaleTimeString(),
sameDay: isSameDay(startDate, endDate),
@@ -235,10 +243,4 @@ export class TimeRangeSelectorComponent
this.timeStringMode = 'advanced';
}
}
-
- private formatDate(date: Date): string {
- return this.enableTimeChange
- ? date.toLocaleDateString()
- : date.toLocaleDateString(navigator.language, this.dateFormat);
- }
}
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.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
index 38fba4f86d..3bf948975e 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/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 @@
</mat-calendar>
</mat-card>
- <div *ngIf="enableTimeChange" fxLayout="column" class="mt-10 mr-5">
+ <div *ngIf="enableTimePicker" fxLayout="column" class="mt-10 mr-5">
<div fxLayout="row" fxLayoutGap="10px">
<div fxFlex="30">
<span
@@ -73,7 +73,7 @@
</div>
</div>
</div>
- <div *ngIf="!enableTimeChange" fxLayout="row" class="mt-10 date-preview">
+ <div *ngIf="!enableTimePicker" fxLayout="row" class="mt-10 date-preview">
{{ dateRangeString }}
</div>
<div
@@ -96,7 +96,7 @@
data-cy="apply-custom-time"
(click)="saveSelection()"
[disabled]="!dateSelectionComplete"
- *ngIf="enableTimeChange"
+ *ngIf="enableTimePicker"
>
Apply
</button>
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 @@
<div *ngFor="let quickSelection of quickSelections">
<span
class="quick-link"
+ [ngClass]="{
+ selected:
+ quickSelection.timeSelectionId ===
+ timeSettings?.timeSelectionId &&
+ timeSettings?.timeSelectionId !== 'custom'
+ }"
[attr.data-cy]="
'time-selector-quick-' +
quickSelection.timeSelectionId
@@ -52,7 +58,7 @@
timeSettings: $event
})
"
- [enableTimeChange]="enableTimeChange"
+ [enableTimePicker]="enableTimePicker"
[maxDayRange]="maxDayRange"
class="w-100"
>
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..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
@@ -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"
>
<mat-icon
[color]="timeSettingsModified ? 'primary' : 'default'"
@@ -112,9 +114,12 @@
</button>
<mat-menu #optMenu="matMenu" class="large-menu">
<sp-time-selector-menu
+ #timeSelectorMenu
*ngIf="quickSelections"
[timeSettings]="clonedTimeSettings"
[quickSelections]="quickSelections"
+ [enableTimePicker]="enableTimePicker"
+ [maxDayRange]="maxDayRange"
[labels]="labels"
(timeSettingsEmitter)="modifyWidgetTimeSettings($event)"
class="w-100"
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 f9e4ea6ec1..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
@@ -34,8 +34,10 @@ import {
DashboardItem,
DataExplorerWidgetModel,
DataLakeMeasure,
+ ExtendedTimeSettings,
QuickTimeSelection,
SpLogMessage,
+ TimeSelectionConstants,
TimeSettings,
} from '@streampipes/platform-services';
import { interval, Subscription } from 'rxjs';
@@ -45,12 +47,15 @@ import { WidgetDirective } from './widget.directive';
import { WidgetTypeService } from '../../services/widget-type.service';
import { AuthService } from '../../../services/auth.service';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
-import { CurrentUserService } from '@streampipes/shared-ui';
+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 } from '@streampipes/shared-ui';
-import { TimeSelectorLabel } from
'projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model';
@Component({
selector: 'sp-data-explorer-dashboard-widget',
@@ -61,6 +66,8 @@ export class DataExplorerDashboardWidgetComponent
implements OnInit, OnDestroy, OnChanges
{
@ViewChild('menuTrigger') menu: MatMenuTrigger;
+ @ViewChild('timeSelectorMenu')
+ timeSelectorMenu: TimeRangeSelectorMenuComponent;
@Input()
dashboardItem: DashboardItem;
@@ -110,6 +117,15 @@ export class DataExplorerDashboardWidgetComponent
labels: TimeSelectorLabel;
clonedTimeSettings: TimeSettings;
timeSettingsModified: boolean = false;
+ enableTimePicker: boolean = true;
+ maxDayRange: number = 0;
+ tooltipText: string;
+ dateFormat: Intl.DateTimeFormatOptions = {
+ weekday: 'short',
+ year: 'numeric',
+ month: 'numeric',
+ day: 'numeric',
+ };
hasDataExplorerWritePrivileges = false;
@@ -141,9 +157,9 @@ export class DataExplorerDashboardWidgetComponent
}
ngOnInit(): void {
- this.quickSelections =
+ this.quickSelections ??=
this.timeSelectionService.defaultQuickTimeSelections;
- this.labels = this.timeSelectionService.defaultLabels;
+ this.labels ??= this.timeSelectionService.defaultLabels;
this.authSubscription = this.currentUserService.user$.subscribe(
user => {
this.hasDataExplorerWritePrivileges = this.authService.hasRole(
@@ -164,14 +180,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 +242,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 +321,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 +350,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}`;
+ }
}
}
