Move refresh interval option to time selector menu component

ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/refresh-interval-settings/refresh-interval-settings.component.html → ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html

@@ -25,7 +25,7 @@
         matTooltip="Refresh interval"
     >
         <mat-icon>autorenew</mat-icon>
-        {{ dashboard.dashboardLiveSettings.label }}
+        {{ liveSettings.label }}
     </button>
     <mat-menu #menu="matMenu">
         <button

ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/refresh-interval-settings/refresh-interval-settings.component.ts → ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.ts

@@ -17,22 +17,18 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import {
-    Dashboard,
-    DashboardLiveSettings,
-} from '@streampipes/platform-services';
+import { DashboardLiveSettings } from '@streampipes/platform-services';
 
 @Component({
     selector: 'sp-data-explorer-refresh-interval-settings-component',
     templateUrl: './refresh-interval-settings.component.html',
 })
 export class DataExplorerRefreshIntervalSettingsComponent implements OnInit {
-    @Input()
-    dashboard: Dashboard;
+    @Input() liveSettings: DashboardLiveSettings;
 
     @Output()
-    intervalSettingsChangedEmitter: EventEmitter<void> =
-        new EventEmitter<void>();
+    intervalSettingsChangedEmitter: EventEmitter<DashboardLiveSettings> =
+        new EventEmitter<DashboardLiveSettings>();
 
     availableOptions: DashboardLiveSettings[] = [
         {
@@ -82,13 +78,13 @@ export class DataExplorerRefreshIntervalSettingsComponent implements OnInit {
     ];
 
     ngOnInit() {
-        if (!this.dashboard.dashboardLiveSettings?.label) {
-            this.dashboard.dashboardLiveSettings = this.availableOptions[0];
+        if (!this.liveSettings?.label) {
+            this.liveSettings = this.availableOptions[0];
         }
     }
 
     modifyRefreshInterval(option: DashboardLiveSettings): void {
-        this.dashboard.dashboardLiveSettings = option;
-        this.intervalSettingsChangedEmitter.emit();
+        this.liveSettings = option;
+        this.intervalSettingsChangedEmitter.emit(option);
     }
 }

ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html

@@ -86,4 +86,14 @@
             <mat-icon>refresh</mat-icon>
         </button>
     </div>
+    <div fxLayoutAlign="end center">
+        <sp-data-explorer-refresh-interval-settings-component
+            *ngIf="liveSettings"
+            [liveSettings]="liveSettings"
+            (intervalSettingsChangedEmitter)="
+                intervalSettingsChangedEmitter.emit($event)
+            "
+        >
+        </sp-data-explorer-refresh-interval-settings-component>
+    </div>
 </div>

ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts

@@ -28,6 +28,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import {
+    DashboardLiveSettings,
     QuickTimeSelection,
     TimeSelectionConstants,
     TimeSettings,
@@ -52,9 +53,15 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
 
     @Output() dateRangeEmitter = new EventEmitter<TimeSettings>();
 
+    @Output()
+    intervalSettingsChangedEmitter = new EventEmitter<DashboardLiveSettings>();
+
     @Input()
     timeSettings: TimeSettings;
 
+    @Input()
+    liveSettings: DashboardLiveSettings;
+
     @Input()
     showTimeSelector = true;
 

ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts

@@ -64,6 +64,7 @@ import { AssetBrowserNodeInfoComponent } from './components/asset-browser/asset-
 import { TimeRangeSelectorComponent } from './components/time-selector/time-range-selector.component';
 import { TimeRangeSelectorMenuComponent } from './components/time-selector/time-selector-menu/time-selector-menu.component';
 import { CustomTimeRangeSelectionComponent } from './components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component';
+import { DataExplorerRefreshIntervalSettingsComponent } from './components/time-selector/refresh-interval-settings/refresh-interval-settings.component';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatMenuModule } from '@angular/material/menu';
@@ -100,6 +101,7 @@ import { MatTreeModule } from '@angular/material/tree';
         SpWarningBoxComponent,
         TimeRangeSelectorComponent,
         TimeRangeSelectorMenuComponent,
+        DataExplorerRefreshIntervalSettingsComponent,
     ],
     imports: [
         CommonModule,

ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.html

@@ -84,15 +84,12 @@
         "
         (dateRangeEmitter)="updateDateRangeEmitter.emit($event)"
         [timeSettings]="timeSettings"
+        [liveSettings]="dashboard.dashboardLiveSettings"
+        (intervalSettingsChangedEmitter)="
+            intervalSettingsChangedEmitter.emit($event)
+        "
     >
     </sp-time-range-selector>
-
-    <sp-data-explorer-refresh-interval-settings-component
-        [dashboard]="dashboard"
-        (intervalSettingsChangedEmitter)="intervalSettingsChangedEmitter.emit()"
-    >
-    </sp-data-explorer-refresh-interval-settings-component>
-
     <button
         mat-icon-button
         [matMenuTriggerFor]="optMenu"

ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.ts

@@ -17,7 +17,11 @@
  */
 
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Dashboard, TimeSettings } from '@streampipes/platform-services';
+import {
+    Dashboard,
+    DashboardLiveSettings,
+    TimeSettings,
+} from '@streampipes/platform-services';
 
 @Component({
     selector: 'sp-data-explorer-dashboard-toolbar',
@@ -62,6 +66,5 @@ export class DataExplorerDashboardToolbarComponent {
     updateDateRangeEmitter: EventEmitter<TimeSettings> = new EventEmitter();
 
     @Output()
-    intervalSettingsChangedEmitter: EventEmitter<void> =
-        new EventEmitter<void>();
+    intervalSettingsChangedEmitter = new EventEmitter<DashboardLiveSettings>();
 }

ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.html

@@ -34,7 +34,7 @@
             (deleteDashboardEmitter)="deleteDashboard()"
             (triggerEditModeEmitter)="triggerEditMode()"
             (updateDateRangeEmitter)="updateDateRange($event)"
-            (intervalSettingsChangedEmitter)="modifyRefreshInterval()"
+            (intervalSettingsChangedEmitter)="modifyRefreshInterval($event)"
         >
         </sp-data-explorer-dashboard-toolbar>
     </div>

ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts

@@ -22,6 +22,7 @@ import { DataExplorerDashboardGridComponent } from '../widget-view/grid-view/dat
 import {
     ClientDashboardItem,
     Dashboard,
+    DashboardLiveSettings,
     DataExplorerWidgetModel,
     DataLakeMeasure,
     DataViewDataExplorerService,
@@ -234,7 +235,7 @@ export class DataExplorerDashboardPanelComponent
                     ? this.overrideTime(+startTime, +endTime)
                     : this.dashboard.dashboardTimeSettings;
             this.dashboardLoaded = true;
-            this.modifyRefreshInterval();
+            this.modifyRefreshInterval(this.dashboard.dashboardLiveSettings);
         });
     }
 
@@ -286,7 +287,8 @@ export class DataExplorerDashboardPanelComponent
         }
     }
 
-    modifyRefreshInterval(): void {
+    modifyRefreshInterval(liveSettings: DashboardLiveSettings): void {
+        this.dashboard.dashboardLiveSettings = liveSettings;
         this.refreshSubscription?.unsubscribe();
         if (this.dashboard.dashboardLiveSettings.refreshModeActive) {
             this.createQuerySubscription();

ui/src/app/data-explorer/data-explorer.module.ts

@@ -123,7 +123,6 @@ import { DataExplorerDataViewSelectionComponent } from './components/dashboard/d
 import { DataExplorerDashboardWidgetSelectionPanelComponent } from './components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component';
 import { DataExplorerDataViewPreviewComponent } from './components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component';
 import { DataExplorerDashboardToolbarComponent } from './components/dashboard/dashboard-toolbar/dashboard-toolbar.component';
-import { DataExplorerRefreshIntervalSettingsComponent } from './components/dashboard/dashboard-toolbar/refresh-interval-settings/refresh-interval-settings.component';
 import { OrderSelectionPanelComponent } from './components/data-view/data-view-designer-panel/data-settings/order-selection-panel/order-selection-panel.component';
 import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/gauge-widget-config.component';
 
@@ -217,7 +216,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga
         DataExplorerDataViewSelectionComponent,
         DataExplorerDesignerPanelComponent,
         DataExplorerEditDashboardDialogComponent,
-        DataExplorerRefreshIntervalSettingsComponent,
         DataExplorerWidgetAppearanceSettingsComponent,
         DataExplorerWidgetDataSettingsComponent,
         DataExplorerDataViewComponent,