Scenes: Enable live now feature (#84399)

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts

@@ -143,9 +143,17 @@ describe('transformSaveModelToScene', () => {
 
       const scene = createDashboardSceneFromDashboardModel(oldModel);
 
-      expect(scene.state.$behaviors).toHaveLength(6);
-      expect(scene.state.$behaviors![0]).toBeInstanceOf(behaviors.CursorSync);
-      expect((scene.state.$behaviors![0] as behaviors.CursorSync).state.sync).toEqual(DashboardCursorSync.Crosshair);
+      const cursorSync = scene.state.$behaviors?.find((b) => b instanceof behaviors.CursorSync);
+      expect(cursorSync).toBeInstanceOf(behaviors.CursorSync);
+      expect((cursorSync as behaviors.CursorSync).state.sync).toEqual(DashboardCursorSync.Crosshair);
+    });
+
+    it('should apply live now timer behavior', () => {
+      const oldModel = new DashboardModel(defaultDashboard);
+      const scene = createDashboardSceneFromDashboardModel(oldModel);
+
+      const liveNowTimer = scene.state.$behaviors?.find((b) => b instanceof behaviors.LiveNowTimer);
+      expect(liveNowTimer).toBeInstanceOf(behaviors.LiveNowTimer);
     });
 
     it('should initialize the Dashboard Scene with empty template variables', () => {

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts

@@ -305,6 +305,7 @@ export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel)
       registerDashboardSceneTracking(oldModel),
       registerPanelInteractionsReporter,
       trackIfIsEmpty,
+      new behaviors.LiveNowTimer(oldModel.liveNow),
     ],
     $data:
       layers.length > 0

public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.ts

@@ -53,7 +53,6 @@ export function transformSceneToSaveModel(scene: DashboardScene, isSnapshot = fa
   const body = state.body;
 
   let panels: Panel[] = [];
-  let graphTooltip = defaultDashboard.graphTooltip;
   let variables: VariableModel[] = [];
 
   if (body instanceof SceneGridLayout) {
@@ -90,14 +89,6 @@ export function transformSceneToSaveModel(scene: DashboardScene, isSnapshot = fa
 
   const controlsState = state.controls?.state;
 
-  if (state.$behaviors) {
-    for (const behavior of state.$behaviors!) {
-      if (behavior instanceof behaviors.CursorSync) {
-        graphTooltip = behavior.state.sync;
-      }
-    }
-  }
-
   const timePickerWithoutDefaults = removeDefaults<TimePickerConfig>(
     {
       refresh_intervals: controlsState?.refreshPicker.state.intervals,
@@ -107,6 +98,13 @@ export function transformSceneToSaveModel(scene: DashboardScene, isSnapshot = fa
     defaultTimePickerConfig
   );
 
+  const graphTooltip =
+    state.$behaviors?.find((b): b is behaviors.CursorSync => b instanceof behaviors.CursorSync)?.state.sync ??
+    defaultDashboard.graphTooltip;
+  const liveNow =
+    state.$behaviors?.find((b): b is behaviors.LiveNowTimer => b instanceof behaviors.LiveNowTimer)?.isEnabled ||
+    undefined;
+
   const dashboard: Dashboard = {
     ...defaultDashboard,
     title: state.title,
@@ -133,6 +131,7 @@ export function transformSceneToSaveModel(scene: DashboardScene, isSnapshot = fa
     tags: state.tags,
     links: state.links,
     graphTooltip,
+    liveNow,
     schemaVersion: DASHBOARD_SCHEMA_VERSION,
   };
 

public/app/features/dashboard-scene/settings/GeneralSettingsEditView.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 
 import { PageLayoutType } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { SceneComponentProps, SceneObjectBase, sceneGraph } from '@grafana/scenes';
+import { SceneComponentProps, SceneObjectBase, behaviors, sceneGraph } from '@grafana/scenes';
 import { TimeZone } from '@grafana/schema';
 import {
   Box,
@@ -71,6 +71,15 @@ export class GeneralSettingsEditView
     return dashboardSceneGraph.getCursorSync(this._dashboard);
   }
 
+  public getLiveNowTimer(): behaviors.LiveNowTimer {
+    const liveNowTimer = sceneGraph.findObject(this._dashboard, (s) => s instanceof behaviors.LiveNowTimer);
+    if (liveNowTimer instanceof behaviors.LiveNowTimer) {
+      return liveNowTimer;
+    } else {
+      throw new Error('LiveNowTimer could not be found');
+    }
+  }
+
   public getDashboardControls() {
     return this._dashboard.state.controls!;
   }
@@ -135,8 +144,13 @@ export class GeneralSettingsEditView
     });
   };
 
-  public onLiveNowChange = (value: boolean) => {
-    // TODO: Figure out how to store liveNow in Dashboard Scene
+  public onLiveNowChange = (enable: boolean) => {
+    try {
+      const liveNow = this.getLiveNowTimer();
+      enable ? liveNow.enable() : liveNow.disable();
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   public onTooltipChange = (value: number) => {
@@ -150,6 +164,7 @@ export class GeneralSettingsEditView
     const { timeZone, weekStart, UNSAFE_nowDelay: nowDelay } = model.getTimeRange().useState();
     const { intervals } = model.getRefreshPicker().useState();
     const { hideTimeControls } = model.getDashboardControls().useState();
+    const { enabled: liveNow } = model.getLiveNowTimer().useState();
 
     return (
       <Page navModel={navModel} pageNav={pageNav} layout={PageLayoutType.Standard}>
@@ -230,9 +245,7 @@ export class GeneralSettingsEditView
             refreshIntervals={intervals}
             timePickerHidden={hideTimeControls}
             nowDelay={nowDelay || ''}
-            // TODO: Implement this in dashboard scene
-            // liveNow={liveNow}
-            liveNow={false}
+            liveNow={liveNow}
             timezone={timeZone || ''}
             weekStart={weekStart || ''}
           />