This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 21d5610b7c Move default refresh interval settings to time selection
service (#3352)
21d5610b7c is described below
commit 21d5610b7c4f2fc45683c75ca5741ed20a06effb
Author: Marcel Früholz <[email protected]>
AuthorDate: Sun Dec 1 22:58:43 2024 +0100
Move default refresh interval settings to time selection service (#3352)
* Move default refresh interval settings to time selection service
* Integrate option to enable/disable live refresh interval
---
.../src/lib/model/datalake/DateRange.ts | 6 +++
.../refresh-interval-settings.component.html | 1 +
.../refresh-interval-settings.component.ts | 57 ++++-----------------
.../time-range-selector.component.html | 4 +-
.../time-selector/time-range-selector.component.ts | 56 ++++++++++++++++++--
.../time-selector-menu.component.html | 7 ++-
.../time-selector-menu.component.ts | 10 ++--
.../src/lib/services/time-selection.service.ts | 59 ++++++++++++++++++++++
.../streampipes/shared-ui/src/public-api.ts | 1 +
.../data-explorer-dashboard-widget.component.html | 16 +-----
10 files changed, 148 insertions(+), 69 deletions(-)
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 f061e5daff..c6e6a589c7 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
@@ -24,6 +24,11 @@ export interface TimeSettings {
timeSelectionId?: string;
}
+export interface ExtendedTimeSettings {
+ timeSettings: TimeSettings;
+ supportsLiveRefresh: boolean;
+}
+
export class TimeSelectionConstants {
static CUSTOM = 'custom';
static LAST_15_MINUTES = 'last-15-minutes';
@@ -101,6 +106,7 @@ export interface QuickTimeSelection {
startTime: (now: Date) => Date;
endTime: (now: Date) => Date;
addDividerAfter?: boolean;
+ supportsLiveRefresh?: boolean;
}
export class DateRange {
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html
index 36b2b76cfe..84f316bcda 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html
@@ -23,6 +23,7 @@
[matMenuTriggerFor]="menu"
aria-label="Refresh interval"
matTooltip="Refresh interval"
+ [disabled]="!liveRefreshEnabled"
>
<mat-icon>autorenew</mat-icon>
{{ liveSettings.label }}
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 38327d1cb5..b60e4e1c78 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
@@ -30,52 +30,10 @@ export class DataExplorerRefreshIntervalSettingsComponent
implements OnInit {
intervalSettingsChangedEmitter: EventEmitter<DashboardLiveSettings> =
new EventEmitter<DashboardLiveSettings>();
- availableOptions: DashboardLiveSettings[] = [
- {
- label: 'Off',
- refreshModeActive: false,
- },
- {
- label: '1 sec',
- refreshModeActive: true,
- refreshIntervalInSeconds: 1,
- },
- {
- label: '2 sec',
- refreshModeActive: true,
- refreshIntervalInSeconds: 2,
- },
- {
- label: '5 sec',
- refreshModeActive: true,
- refreshIntervalInSeconds: 5,
- },
- {
- label: '10 sec',
- refreshModeActive: true,
- refreshIntervalInSeconds: 10,
- },
- {
- label: '30 sec',
- refreshModeActive: true,
- refreshIntervalInSeconds: 30,
- },
- {
- label: '1 min',
- refreshModeActive: true,
- refreshIntervalInSeconds: 60,
- },
- {
- label: '5 min',
- refreshModeActive: true,
- refreshIntervalInSeconds: 300,
- },
- {
- label: '30 min',
- refreshModeActive: true,
- refreshIntervalInSeconds: 60 * 30,
- },
- ];
+ @Input()
+ availableOptions: DashboardLiveSettings[];
+
+ liveRefreshEnabled: boolean;
ngOnInit() {
if (!this.liveSettings?.label) {
@@ -87,4 +45,11 @@ export class DataExplorerRefreshIntervalSettingsComponent
implements OnInit {
this.liveSettings = option;
this.intervalSettingsChangedEmitter.emit(option);
}
+
+ handleEnableLiveRefresh(liveRefreshEnabled: boolean) {
+ if (this.liveRefreshEnabled === true && liveRefreshEnabled === false) {
+ this.intervalSettingsChangedEmitter.emit(this.availableOptions[0]);
+ }
+ this.liveRefreshEnabled = liveRefreshEnabled;
+ }
}
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 74d0a04ec4..97aa766d30 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
@@ -88,11 +88,13 @@
</div>
<div fxLayoutAlign="end center">
<sp-data-explorer-refresh-interval-settings-component
- *ngIf="liveSettings"
+ #refreshIntervalSettings
+ *ngIf="liveSettings && showTimeSelector && showIntervalSettings"
[liveSettings]="liveSettings"
(intervalSettingsChangedEmitter)="
intervalSettingsChangedEmitter.emit($event)
"
+ [availableOptions]="availableOptions"
>
</sp-data-explorer-refresh-interval-settings-component>
</div>
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 465ae91373..d07fff080e 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
@@ -17,6 +17,7 @@
*/
import {
+ AfterViewInit,
Component,
EventEmitter,
Input,
@@ -33,12 +34,14 @@ import {
TimeSelectionConstants,
TimeSettings,
TimeString,
+ ExtendedTimeSettings,
} 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';
+import { DataExplorerRefreshIntervalSettingsComponent } from
'./refresh-interval-settings/refresh-interval-settings.component';
@Component({
selector: 'sp-time-range-selector',
@@ -46,10 +49,14 @@ import { differenceInMilliseconds, isSameDay } from
'date-fns';
styleUrls: ['./time-range-selector.component.scss'],
encapsulation: ViewEncapsulation.None,
})
-export class TimeRangeSelectorComponent implements OnInit, OnChanges {
+export class TimeRangeSelectorComponent
+ implements OnInit, OnChanges, AfterViewInit
+{
@ViewChild('menuTrigger') menu: MatMenuTrigger;
@ViewChild('timeSelectorMenu')
timeSelectorMenu: TimeRangeSelectorMenuComponent;
+ @ViewChild('refreshIntervalSettings')
+ refreshIntervalSettingsComponent:
DataExplorerRefreshIntervalSettingsComponent;
@Output() dateRangeEmitter = new EventEmitter<TimeSettings>();
@@ -68,12 +75,18 @@ export class TimeRangeSelectorComponent implements OnInit,
OnChanges {
@Input()
enableTimeChange = true;
+ @Input()
+ showIntervalSettings = true;
+
@Input()
maxDayRange = 0;
@Input()
quickSelections: QuickTimeSelection[];
+ @Input()
+ availableOptions: DashboardLiveSettings[];
+
@Input()
labels: TimeSelectorLabel;
@@ -93,6 +106,8 @@ export class TimeRangeSelectorComponent implements OnInit,
OnChanges {
this.quickSelections ??=
this.timeSelectionService.defaultQuickTimeSelections;
this.labels ??= this.timeSelectionService.defaultLabels;
+ this.availableOptions ??=
+ this.timeSelectionService.defaultAvailableLiveSettingsOptions;
this.createDateString();
}
@@ -102,12 +117,44 @@ export class TimeRangeSelectorComponent implements
OnInit, OnChanges {
}
}
+ ngAfterViewInit(): void {
+ this.changeLiveRefreshEnabled();
+ }
+
+ changeLiveRefreshEnabled(): void {
+ if (
+ this.timeSettings.timeSelectionId ===
+ TimeSelectionConstants.CUSTOM ||
+ this.hasLiveRefreshEnabled(this.timeSettings.timeSelectionId) ===
+ false
+ ) {
+ this.refreshIntervalSettingsComponent?.handleEnableLiveRefresh(
+ false,
+ );
+ } else {
+ this.refreshIntervalSettingsComponent?.handleEnableLiveRefresh(
+ true,
+ );
+ }
+ }
+
+ hasLiveRefreshEnabled(timeSelectionId: string) {
+ const selectedQuickTimeSelection = this.quickSelections.find(
+ qs => timeSelectionId === qs.timeSelectionId,
+ );
+ return selectedQuickTimeSelection.supportsLiveRefresh;
+ }
+
applyPreviousInterval(): void {
+ this.timeSettings.timeSelectionId = TimeSelectionConstants.CUSTOM;
this.changeTimeByInterval((a, b) => a - b);
+ this.changeLiveRefreshEnabled();
}
applyNextInterval(): void {
+ this.timeSettings.timeSelectionId = TimeSelectionConstants.CUSTOM;
this.changeTimeByInterval((a, b) => a + b);
+ this.changeLiveRefreshEnabled();
}
compare(newDateRange: TimeSettings, oldDateRange: TimeSettings): boolean {
@@ -155,8 +202,11 @@ export class TimeRangeSelectorComponent implements OnInit,
OnChanges {
this.reloadData();
}
- applyCurrentDateRange(timeSettings: TimeSettings) {
- this.timeSettings = timeSettings;
+ applyCurrentDateRange(extendedTimeSettings: ExtendedTimeSettings) {
+ this.timeSettings = extendedTimeSettings.timeSettings;
+ this.refreshIntervalSettingsComponent?.handleEnableLiveRefresh(
+ extendedTimeSettings.supportsLiveRefresh,
+ );
this.createDateString();
this.menu.closeMenu();
this.reloadData();
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 2bfda05f10..1dfc7f7119 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
@@ -46,7 +46,12 @@
#timeRangeSelection
[timeSettings]="timeSettings"
[labels]="labels"
- (timeSettingsEmitter)="timeSettingsEmitter.emit($event)"
+ (timeSettingsEmitter)="
+ timeSettingsEmitter.emit({
+ supportsLiveRefresh: false,
+ timeSettings: $event
+ })
+ "
[enableTimeChange]="enableTimeChange"
[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.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts
index a2748d9a47..318ce9ff79 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
@@ -27,6 +27,7 @@ import {
import {
QuickTimeSelection,
TimeSettings,
+ ExtendedTimeSettings,
} from '@streampipes/platform-services';
import { TimeSelectionService } from
'../../../services/time-selection.service';
import { CustomTimeRangeSelectionComponent } from
'./custom-time-range-selection/custom-time-range-selection.component';
@@ -51,8 +52,8 @@ export class TimeRangeSelectorMenuComponent implements OnInit
{
maxDayRange: number;
@Output()
- timeSettingsEmitter: EventEmitter<TimeSettings> =
- new EventEmitter<TimeSettings>();
+ timeSettingsEmitter: EventEmitter<ExtendedTimeSettings> =
+ new EventEmitter<ExtendedTimeSettings>();
@Input()
quickSelections: QuickTimeSelection[];
@@ -72,7 +73,10 @@ export class TimeRangeSelectorMenuComponent implements
OnInit {
this.timeSettings.endTime = selectedDateRange.endDate.getTime();
this.timeRangeSelection.initializeDateRange();
this.triggerDisplayUpdate();
- this.timeSettingsEmitter.emit(this.timeSettings);
+ this.timeSettingsEmitter.emit({
+ supportsLiveRefresh: quickSelection.supportsLiveRefresh,
+ timeSettings: this.timeSettings,
+ });
}
triggerDisplayUpdate(): void {
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 bc23977e7f..cca6465323 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
@@ -19,6 +19,7 @@
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import {
+ DashboardLiveSettings,
DateRange,
QuickTimeSelection,
TimeSelectionConstants,
@@ -65,66 +66,124 @@ export class TimeSelectionService {
timeSelectionId: TimeSelectionConstants.LAST_15_MINUTES,
startTime: now => subMinutes(now, 15),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Last 1 hour',
timeSelectionId: TimeSelectionConstants.LAST_HOUR,
startTime: now => subHours(now, 1),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Last 1 day',
timeSelectionId: TimeSelectionConstants.LAST_DAY,
startTime: now => subDays(now, 1),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Last 1 week',
timeSelectionId: TimeSelectionConstants.LAST_WEEK,
startTime: now => subWeeks(now, 1),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Last 1 month',
timeSelectionId: TimeSelectionConstants.LAST_MONTH,
startTime: now => subMonths(now, 1),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Last 1 year',
timeSelectionId: TimeSelectionConstants.LAST_YEAR,
startTime: now => subYears(now, 1),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Current day',
timeSelectionId: TimeSelectionConstants.CURRENT_DAY,
startTime: now => startOfDay(now),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Current hour',
timeSelectionId: TimeSelectionConstants.CURRENT_HOUR,
startTime: now => startOfHour(now),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Current week',
timeSelectionId: TimeSelectionConstants.CURRENT_WEEK,
startTime: now => startOfWeek(now),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Current month',
timeSelectionId: TimeSelectionConstants.CURRENT_MONTH,
startTime: now => startOfMonth(now),
endTime: now => now,
+ supportsLiveRefresh: true,
},
{
label: 'Current year',
timeSelectionId: TimeSelectionConstants.CURRENT_YEAR,
startTime: now => startOfYear(now),
endTime: now => now,
+ supportsLiveRefresh: true,
+ },
+ ];
+
+ defaultAvailableLiveSettingsOptions: DashboardLiveSettings[] = [
+ {
+ label: 'Off',
+ refreshModeActive: false,
+ },
+ {
+ label: '1 sec',
+ refreshModeActive: true,
+ refreshIntervalInSeconds: 1,
+ },
+ {
+ label: '2 sec',
+ refreshModeActive: true,
+ refreshIntervalInSeconds: 2,
+ },
+ {
+ label: '5 sec',
+ refreshModeActive: true,
+ refreshIntervalInSeconds: 5,
+ },
+ {
+ label: '10 sec',
+ refreshModeActive: true,
+ refreshIntervalInSeconds: 10,
+ },
+ {
+ label: '30 sec',
+ refreshModeActive: true,
+ refreshIntervalInSeconds: 30,
+ },
+ {
+ label: '1 min',
+ refreshModeActive: true,
+ refreshIntervalInSeconds: 60,
+ },
+ {
+ label: '5 min',
+ refreshModeActive: true,
+ refreshIntervalInSeconds: 300,
+ },
+ {
+ label: '30 min',
+ refreshModeActive: true,
+ refreshIntervalInSeconds: 60 * 30,
},
];
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts
b/ui/projects/streampipes/shared-ui/src/public-api.ts
index 40fe20fa0a..ab70e0b106 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -39,6 +39,7 @@ 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-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';
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 54e23fe4f9..5bdfed7df1 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
@@ -65,7 +65,7 @@
[matMenuTriggerFor]="menu"
aria-label="More options"
matTooltip="More options"
- *ngIf="!editMode && !dataViewMode"
+ *ngIf="!dataViewMode"
[attr.data-cy]="
'more-options-' +
configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll(
@@ -97,20 +97,6 @@
<span>Edit Widget</span>
</button>
</mat-menu>
- <button
- mat-icon-button
- *ngIf="editMode"
- (click)="downloadDataAsFile()"
- [attr.data-cy]="
- 'download-' +
-
configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll(
- ' ',
- ''
- )
- "
- >
- <mat-icon>get_app</mat-icon>
- </button>
<button
mat-icon-button
[matMenuTriggerFor]="optMenu"
