@grafana/scenes 4.2.0--canary.658.8522699461.0 → 4.3.0--canary.667.8525833293.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.2.0 (Tue Apr 02 2024)
+
+#### 🚀 Enhancement
+
+- Autofit: Fit widget in the screen depending on the height [#658](https://github.com/grafana/scenes/pull/658) ([@ivanortegaalba](https://github.com/ivanortegaalba))
+
+#### Authors: 1
+
+- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
+
+---
+
 # v4.1.2 (Tue Apr 02 2024)
 
 #### 🐛 Bug Fix

package/dist/esm/components/SceneRefreshPicker.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { rangeUtil } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { RefreshPicker } from '@grafana/ui';
 import { SceneObjectBase } from '../core/SceneObjectBase.js';
 import { sceneGraph } from '../core/sceneGraph/index.js';
@@ -24,14 +25,20 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const AUTO_REFRESH_INTERVAL = "auto";
 const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"];
 class SceneRefreshPicker extends SceneObjectBase {
   constructor(state) {
-    var _a;
+    var _a, _b, _c;
+    const autoEnabled = (_a = state.autoEnabled) != null ? _a : true;
+    let intervals = (_b = state.intervals) != null ? _b : DEFAULT_INTERVALS;
+    intervals = autoEnabled ? [AUTO_REFRESH_INTERVAL, ...intervals] : intervals;
     super(__spreadProps(__spreadValues({
       refresh: ""
     }, state), {
-      intervals: (_a = state.intervals) != null ? _a : DEFAULT_INTERVALS
+      autoEnabled,
+      autoMinInterval: (_c = state.autoMinInterval) != null ? _c : config.minRefreshInterval,
+      intervals
     }));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["refresh"] });
     this.onRefresh = () => {
@@ -51,7 +58,24 @@ class SceneRefreshPicker extends SceneObjectBase {
       this.setState({ refresh: interval });
       this.setupIntervalTimer();
     };
+    this.setupTimeRangeListener = () => {
+      return sceneGraph.getTimeRange(this).subscribeToState((newState, prevState) => {
+        const newDiff = newState.value.to.valueOf() - newState.value.from.valueOf();
+        const prevDiff = prevState.value.to.valueOf() - prevState.value.from.valueOf();
+        if (newDiff !== prevDiff) {
+          this.setupIntervalTimer();
+        }
+      });
+    };
+    this.calculateAutoRefreshInterval = () => {
+      var _a;
+      const timeRange = sceneGraph.getTimeRange(this);
+      const resolution = (_a = window == null ? void 0 : window.innerWidth) != null ? _a : 2e3;
+      const { intervalMs } = rangeUtil.calculateInterval(timeRange.state.value, resolution, this.state.autoMinInterval);
+      return intervalMs;
+    };
     this.setupIntervalTimer = () => {
+      var _a;
       const timeRange = sceneGraph.getTimeRange(this);
       const { refresh, intervals } = this.state;
       if (this._intervalTimer || refresh === "") {
@@ -63,7 +87,15 @@ class SceneRefreshPicker extends SceneObjectBase {
       if (intervals && !intervals.includes(refresh)) {
         return;
       }
-      const intervalMs = rangeUtil.intervalToMs(refresh);
+      let intervalMs;
+      if (refresh === AUTO_REFRESH_INTERVAL) {
+        intervalMs = this.calculateAutoRefreshInterval();
+        this._timeRangeListener = this.setupTimeRangeListener();
+      } else {
+        intervalMs = rangeUtil.intervalToMs(refresh);
+        (_a = this._timeRangeListener) == null ? void 0 : _a.unsubscribe();
+        this._timeRangeListener = void 0;
+      }
       this._intervalTimer = setInterval(() => {
         timeRange.onRefresh();
       }, intervalMs);
@@ -71,9 +103,11 @@ class SceneRefreshPicker extends SceneObjectBase {
     this.addActivationHandler(() => {
       this.setupIntervalTimer();
       return () => {
+        var _a2;
         if (this._intervalTimer) {
           clearInterval(this._intervalTimer);
         }
+        (_a2 = this._timeRangeListener) == null ? void 0 : _a2.unsubscribe();
       };
     });
   }
@@ -123,5 +157,5 @@ function useQueryControllerState(model) {
   return queryController.useState().isRunning;
 }
 
-export { DEFAULT_INTERVALS, SceneRefreshPicker, SceneRefreshPickerRenderer };
+export { AUTO_REFRESH_INTERVAL, DEFAULT_INTERVALS, SceneRefreshPicker, SceneRefreshPickerRenderer };
 //# sourceMappingURL=SceneRefreshPicker.js.map

package/dist/esm/components/SceneRefreshPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneRefreshPicker.js","sources":["../../../src/components/SceneRefreshPicker.tsx"],"sourcesContent":["import React from 'react';\n\nimport { rangeUtil } from '@grafana/data';\nimport { RefreshPicker } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObject, SceneObjectState, SceneObjectUrlValues } from '../core/types';\nimport { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig';\n\nexport const DEFAULT_INTERVALS = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];\n\nexport interface SceneRefreshPickerState extends SceneObjectState {\n  // Refresh interval, e.g. 5s, 1m, 2h\n  refresh: string;\n  // List of allowed refresh intervals, e.g. ['5s', '1m']\n  intervals?: string[];\n  isOnCanvas?: boolean;\n  primary?: boolean;\n  withText?: boolean;\n}\n\nexport class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState> {\n  public static Component = SceneRefreshPickerRenderer;\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['refresh'] });\n  private _intervalTimer: ReturnType<typeof setInterval> | undefined;\n\n  public constructor(state: Partial<SceneRefreshPickerState>) {\n    super({\n      refresh: '',\n      ...state,\n      intervals: state.intervals ?? DEFAULT_INTERVALS,\n    });\n\n    this.addActivationHandler(() => {\n      this.setupIntervalTimer();\n\n      return () => {\n        if (this._intervalTimer) {\n          clearInterval(this._intervalTimer);\n        }\n      };\n    });\n  }\n\n  public onRefresh = () => {\n    const queryController = sceneGraph.getQueryController(this);\n    if (queryController?.state.isRunning) {\n      queryController.cancelAll();\n      return;\n    }\n\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    if (this._intervalTimer) {\n      clearInterval(this._intervalTimer);\n    }\n\n    timeRange.onRefresh();\n    this.setupIntervalTimer();\n  };\n\n  public onIntervalChanged = (interval: string) => {\n    this.setState({ refresh: interval });\n    this.setupIntervalTimer();\n  };\n\n  public getUrlState() {\n    return {\n      refresh: this.state.refresh,\n    };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const refresh = values.refresh;\n\n    if (refresh && typeof refresh === 'string') {\n      this.setState({\n        refresh,\n      });\n    }\n  }\n\n  private setupIntervalTimer = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const { refresh, intervals } = this.state;\n\n    if (this._intervalTimer || refresh === '') {\n      clearInterval(this._intervalTimer);\n    }\n\n    if (refresh === '') {\n      return;\n    }\n\n    // If the provided interval is not allowed\n    if (intervals && !intervals.includes(refresh)) {\n      return;\n    }\n\n    const intervalMs = rangeUtil.intervalToMs(refresh);\n\n    this._intervalTimer = setInterval(() => {\n      timeRange.onRefresh();\n    }, intervalMs);\n  };\n}\n\nexport function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>) {\n  const { refresh, intervals, isOnCanvas, primary, withText } = model.useState();\n  const isRunning = useQueryControllerState(model);\n\n  let text = withText ? 'Refresh' : undefined;\n  let tooltip: string | undefined;\n\n  if (isRunning) {\n    tooltip = 'Cancel all queries';\n\n    if (withText) {\n      text = 'Cancel';\n    }\n  }\n\n  return (\n    <RefreshPicker\n      value={refresh}\n      intervals={intervals}\n      tooltip={tooltip}\n      text={text}\n      onRefresh={model.onRefresh}\n      primary={primary}\n      onIntervalChanged={model.onIntervalChanged}\n      isLoading={isRunning}\n      isOnCanvas={isOnCanvas ?? true}\n    />\n  );\n}\n\nfunction useQueryControllerState(model: SceneObject): boolean {\n  const queryController = sceneGraph.getQueryController(model);\n  if (!queryController) {\n    return false;\n  }\n\n  return queryController.useState().isRunning;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SceneRefreshPicker.js","sources":["../../../src/components/SceneRefreshPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { Unsubscribable } from 'rxjs';\nimport { rangeUtil } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { RefreshPicker } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneComponentProps, SceneObject, SceneObjectState, SceneObjectUrlValues } from '../core/types';\nimport { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig';\n\nexport const AUTO_REFRESH_INTERVAL = 'auto';\nexport const DEFAULT_INTERVALS = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];\n\nexport interface SceneRefreshPickerState extends SceneObjectState {\n  // Refresh interval, e.g. 5s, 1m, 2h\n  refresh: string;\n  autoEnabled?: boolean;\n  autoMinInterval?: string;\n  // List of allowed refresh intervals, e.g. ['5s', '1m']\n  intervals?: string[];\n  isOnCanvas?: boolean;\n  primary?: boolean;\n  withText?: boolean;\n}\n\nexport class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState> {\n  public static Component = SceneRefreshPickerRenderer;\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['refresh'] });\n  private _intervalTimer: ReturnType<typeof setInterval> | undefined;\n  private _timeRangeListener: Unsubscribable | undefined;\n\n  public constructor(state: Partial<SceneRefreshPickerState>) {\n    const autoEnabled = state.autoEnabled ?? true;\n    let intervals = state.intervals ?? DEFAULT_INTERVALS;\n    intervals = autoEnabled ? [AUTO_REFRESH_INTERVAL, ...intervals] : intervals;\n\n    super({\n      refresh: '',\n      ...state,\n      autoEnabled,\n      autoMinInterval: state.autoMinInterval ?? config.minRefreshInterval,\n      intervals,\n    });\n\n    this.addActivationHandler(() => {\n      this.setupIntervalTimer();\n\n      return () => {\n        if (this._intervalTimer) {\n          clearInterval(this._intervalTimer);\n        }\n\n        this._timeRangeListener?.unsubscribe();\n      };\n    });\n  }\n\n  public onRefresh = () => {\n    const queryController = sceneGraph.getQueryController(this);\n    if (queryController?.state.isRunning) {\n      queryController.cancelAll();\n      return;\n    }\n\n    const timeRange = sceneGraph.getTimeRange(this);\n\n    if (this._intervalTimer) {\n      clearInterval(this._intervalTimer);\n    }\n\n    timeRange.onRefresh();\n    this.setupIntervalTimer();\n  };\n\n  public onIntervalChanged = (interval: string) => {\n    this.setState({ refresh: interval });\n    this.setupIntervalTimer();\n  };\n\n  public getUrlState() {\n    return {\n      refresh: this.state.refresh,\n    };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const refresh = values.refresh;\n\n    if (refresh && typeof refresh === 'string') {\n      this.setState({\n        refresh,\n      });\n    }\n  }\n\n  private setupTimeRangeListener = () => {\n    // If the time range has changed, we need to recalculate the auto interval\n    // But we need to prevent unnecessary recalculations\n    // So we just check if what actually matters to the algorithm is indeed changed\n    // Alternatively we could just check if from, to, timeZone, fiscal year start month and now delay are changed\n    return sceneGraph.getTimeRange(this).subscribeToState((newState, prevState) => {\n      const newDiff = newState.value.to.valueOf() - newState.value.from.valueOf();\n      const prevDiff = prevState.value.to.valueOf() - prevState.value.from.valueOf();\n\n      if (newDiff !== prevDiff) {\n        this.setupIntervalTimer();\n      }\n    });\n  };\n\n  private calculateAutoRefreshInterval = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const resolution = window?.innerWidth ?? 2000;\n    const { intervalMs } = rangeUtil.calculateInterval(timeRange.state.value, resolution, this.state.autoMinInterval);\n    return intervalMs;\n  };\n\n  private setupIntervalTimer = () => {\n    const timeRange = sceneGraph.getTimeRange(this);\n    const { refresh, intervals } = this.state;\n\n    if (this._intervalTimer || refresh === '') {\n      clearInterval(this._intervalTimer);\n    }\n\n    if (refresh === '') {\n      return;\n    }\n\n    // If the provided interval is not allowed\n    if (intervals && !intervals.includes(refresh)) {\n      return;\n    }\n\n    let intervalMs: number;\n\n    if (refresh === AUTO_REFRESH_INTERVAL) {\n      intervalMs = this.calculateAutoRefreshInterval();\n      this._timeRangeListener = this.setupTimeRangeListener();\n    } else {\n      intervalMs = rangeUtil.intervalToMs(refresh);\n      this._timeRangeListener?.unsubscribe();\n      this._timeRangeListener = undefined;\n    }\n\n    this._intervalTimer = setInterval(() => {\n      timeRange.onRefresh();\n    }, intervalMs);\n  };\n}\n\nexport function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>) {\n  const { refresh, intervals, isOnCanvas, primary, withText } = model.useState();\n  const isRunning = useQueryControllerState(model);\n\n  let text = withText ? 'Refresh' : undefined;\n  let tooltip: string | undefined;\n\n  if (isRunning) {\n    tooltip = 'Cancel all queries';\n\n    if (withText) {\n      text = 'Cancel';\n    }\n  }\n\n  return (\n    <RefreshPicker\n      value={refresh}\n      intervals={intervals}\n      tooltip={tooltip}\n      text={text}\n      onRefresh={model.onRefresh}\n      primary={primary}\n      onIntervalChanged={model.onIntervalChanged}\n      isLoading={isRunning}\n      isOnCanvas={isOnCanvas ?? true}\n    />\n  );\n}\n\nfunction useQueryControllerState(model: SceneObject): boolean {\n  const queryController = sceneGraph.getQueryController(model);\n  if (!queryController) {\n    return false;\n  }\n\n  return queryController.useState().isRunning;\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/index.d.ts

@@ -1691,6 +1691,8 @@ declare function SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTim
 
 interface SceneRefreshPickerState extends SceneObjectState {
     refresh: string;
+    autoEnabled?: boolean;
+    autoMinInterval?: string;
     intervals?: string[];
     isOnCanvas?: boolean;
     primary?: boolean;
@@ -1700,6 +1702,7 @@ declare class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState
     static Component: typeof SceneRefreshPickerRenderer;
     protected _urlSync: SceneObjectUrlSyncConfig;
     private _intervalTimer;
+    private _timeRangeListener;
     constructor(state: Partial<SceneRefreshPickerState>);
     onRefresh: () => void;
     onIntervalChanged: (interval: string) => void;
@@ -1707,6 +1710,8 @@ declare class SceneRefreshPicker extends SceneObjectBase<SceneRefreshPickerState
         refresh: string;
     };
     updateFromUrl(values: SceneObjectUrlValues): void;
+    private setupTimeRangeListener;
+    private calculateAutoRefreshInterval;
     private setupIntervalTimer;
 }
 declare function SceneRefreshPickerRenderer({ model }: SceneComponentProps<SceneRefreshPicker>): JSX.Element;

package/dist/index.js

@@ -8470,14 +8470,20 @@ var __spreadValues$5 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const AUTO_REFRESH_INTERVAL = "auto";
 const DEFAULT_INTERVALS = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"];
 class SceneRefreshPicker extends SceneObjectBase {
   constructor(state) {
-    var _a;
+    var _a, _b, _c;
+    const autoEnabled = (_a = state.autoEnabled) != null ? _a : true;
+    let intervals = (_b = state.intervals) != null ? _b : DEFAULT_INTERVALS;
+    intervals = autoEnabled ? [AUTO_REFRESH_INTERVAL, ...intervals] : intervals;
     super(__spreadProps$2(__spreadValues$5({
       refresh: ""
     }, state), {
-      intervals: (_a = state.intervals) != null ? _a : DEFAULT_INTERVALS
+      autoEnabled,
+      autoMinInterval: (_c = state.autoMinInterval) != null ? _c : runtime.config.minRefreshInterval,
+      intervals
     }));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["refresh"] });
     this.onRefresh = () => {
@@ -8497,7 +8503,24 @@ class SceneRefreshPicker extends SceneObjectBase {
       this.setState({ refresh: interval });
       this.setupIntervalTimer();
     };
+    this.setupTimeRangeListener = () => {
+      return sceneGraph.getTimeRange(this).subscribeToState((newState, prevState) => {
+        const newDiff = newState.value.to.valueOf() - newState.value.from.valueOf();
+        const prevDiff = prevState.value.to.valueOf() - prevState.value.from.valueOf();
+        if (newDiff !== prevDiff) {
+          this.setupIntervalTimer();
+        }
+      });
+    };
+    this.calculateAutoRefreshInterval = () => {
+      var _a;
+      const timeRange = sceneGraph.getTimeRange(this);
+      const resolution = (_a = window == null ? void 0 : window.innerWidth) != null ? _a : 2e3;
+      const { intervalMs } = data.rangeUtil.calculateInterval(timeRange.state.value, resolution, this.state.autoMinInterval);
+      return intervalMs;
+    };
     this.setupIntervalTimer = () => {
+      var _a;
       const timeRange = sceneGraph.getTimeRange(this);
       const { refresh, intervals } = this.state;
       if (this._intervalTimer || refresh === "") {
@@ -8509,7 +8532,15 @@ class SceneRefreshPicker extends SceneObjectBase {
       if (intervals && !intervals.includes(refresh)) {
         return;
       }
-      const intervalMs = data.rangeUtil.intervalToMs(refresh);
+      let intervalMs;
+      if (refresh === AUTO_REFRESH_INTERVAL) {
+        intervalMs = this.calculateAutoRefreshInterval();
+        this._timeRangeListener = this.setupTimeRangeListener();
+      } else {
+        intervalMs = data.rangeUtil.intervalToMs(refresh);
+        (_a = this._timeRangeListener) == null ? void 0 : _a.unsubscribe();
+        this._timeRangeListener = void 0;
+      }
       this._intervalTimer = setInterval(() => {
         timeRange.onRefresh();
       }, intervalMs);
@@ -8517,9 +8548,11 @@ class SceneRefreshPicker extends SceneObjectBase {
     this.addActivationHandler(() => {
       this.setupIntervalTimer();
       return () => {
+        var _a2;
         if (this._intervalTimer) {
           clearInterval(this._intervalTimer);
         }
+        (_a2 = this._timeRangeListener) == null ? void 0 : _a2.unsubscribe();
       };
     });
   }