Integrate option to enable/disable live refresh interval

apache · Nov 28, 2024 · 3d5fe41 · 3d5fe41
1 parent cf46c32
commit 3d5fe41
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 23 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
@@ -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/...mponents/time-selector/refresh-interval-settings/refresh-interval-settings.component.html b/...mponents/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/...components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts b/...components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts
@@ -33,6 +33,8 @@ export class DataExplorerRefreshIntervalSettingsComponent implements OnInit {
     @Input()
     availableOptions: DashboardLiveSettings[];
 
+    liveRefreshEnabled: boolean;
+
     ngOnInit() {
         if (!this.liveSettings?.label) {
             this.liveSettings = this.availableOptions[0];
@@ -43,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/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html
@@ -88,7 +88,8 @@
     </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)

diff --git a/...s/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts b/...s/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,6 +75,9 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     @Input()
     enableTimeChange = true;
 
+    @Input()
+    showIntervalSettings = true;
+
     @Input()
     maxDayRange = 0;
 
@@ -107,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 {
@@ -160,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/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html b/...-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/...ed-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/...ed-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
@@ -66,66 +66,77 @@ 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,
         },
     ];
 

diff --git 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
@@ -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"