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

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 {

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 }}

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;
+    }
 }

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>

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,23 +34,29 @@ 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',
     templateUrl: 'time-range-selector.component.html',
     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();

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"

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 {