From 57708288718cf94071241378ff3f3674b7d62640 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Jan 2024 19:22:04 +0100 Subject: [PATCH] Scenes: Updates to scene v2.0 (#80953) * Scenes: Updates to scene v2.0 * Update --- package.json | 2 +- .../dashboard-scene/scene/DashboardScene.tsx | 4 +-- .../scene/PanelRepeaterGridItem.tsx | 30 +++++-------------- .../scene/RowRepeaterBehavior.ts | 29 +++++------------- .../transformSceneToSaveModel.test.ts | 3 +- .../app/features/trails/MetricSelectScene.tsx | 13 ++++---- yarn.lock | 10 +++---- 7 files changed, 30 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index 8d6b1a75700..514b6a1bde4 100644 --- a/package.json +++ b/package.json @@ -245,7 +245,7 @@ "@grafana/monaco-logql": "^0.0.7", "@grafana/o11y-ds-frontend": "workspace:*", "@grafana/runtime": "workspace:*", - "@grafana/scenes": "1.30.0", + "@grafana/scenes": "^2.0.0", "@grafana/schema": "workspace:*", "@grafana/ui": "workspace:*", "@kusto/monaco-kusto": "^7.4.0", diff --git a/public/app/features/dashboard-scene/scene/DashboardScene.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.tsx index 66f4678399f..1daff7bd757 100644 --- a/public/app/features/dashboard-scene/scene/DashboardScene.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardScene.tsx @@ -396,8 +396,8 @@ export class DashboardVariableDependency implements SceneVariableDependencyConfi return false; } - public variableUpdatesCompleted(changedVars: Set) { - if (changedVars.size > 0) { + public variableUpdateCompleted(variable: SceneVariable, hasChanged: boolean) { + if (hasChanged) { // Temp solution for some core panels (like dashlist) to know that variables have changed appEvents.publish(new VariablesChanged({ refreshAll: true, panelIds: [] })); } diff --git a/public/app/features/dashboard-scene/scene/PanelRepeaterGridItem.tsx b/public/app/features/dashboard-scene/scene/PanelRepeaterGridItem.tsx index fc0140997db..328f16058f0 100644 --- a/public/app/features/dashboard-scene/scene/PanelRepeaterGridItem.tsx +++ b/public/app/features/dashboard-scene/scene/PanelRepeaterGridItem.tsx @@ -6,7 +6,6 @@ import { VizPanel, SceneObjectBase, VariableDependencyConfig, - SceneVariable, SceneGridLayout, SceneVariableSet, SceneComponentProps, @@ -36,11 +35,9 @@ export type RepeatDirection = 'v' | 'h'; export class PanelRepeaterGridItem extends SceneObjectBase implements SceneGridItemLike { protected _variableDependency = new VariableDependencyConfig(this, { variableNames: [this.state.variableName], - onVariableUpdatesCompleted: this._onVariableChanged.bind(this), + onVariableUpdateCompleted: this._onVariableUpdateCompleted.bind(this), }); - private _isWaitingForVariables = false; - public constructor(state: PanelRepeaterGridItemState) { super(state); @@ -49,26 +46,11 @@ export class PanelRepeaterGridItem extends SceneObjectBase this._handleGridResize(newState, prevState))); - - // If we our variable is ready we can process repeats on activation - if (sceneGraph.hasVariableDependencyInLoadingState(this)) { - this._isWaitingForVariables = true; - } else { - this._performRepeat(); - } + this._performRepeat(); } - private _onVariableChanged(changedVariables: Set, dependencyChanged: boolean): void { - if (dependencyChanged) { - this._performRepeat(); - return; - } - - // If we are waiting for variables and the variable is no longer loading then we are ready to repeat as well - if (this._isWaitingForVariables && !sceneGraph.hasVariableDependencyInLoadingState(this)) { - this._isWaitingForVariables = false; - this._performRepeat(); - } + private _onVariableUpdateCompleted(): void { + this._performRepeat(); } /** @@ -97,6 +79,10 @@ export class PanelRepeaterGridItem extends SceneObjectBase { protected _variableDependency = new VariableDependencyConfig(this, { variableNames: [this.state.variableName], - onVariableUpdatesCompleted: this._onVariableChanged.bind(this), + onVariableUpdateCompleted: this._onVariableUpdateCompleted.bind(this), }); - private _isWaitingForVariables = false; - public constructor(state: RowRepeaterBehaviorState) { super(state); @@ -41,28 +38,18 @@ export class RowRepeaterBehavior extends SceneObjectBase, dependencyChanged: boolean): void { - if (dependencyChanged) { - this._performRepeat(); - return; - } - - // If we are waiting for variables and the variable is no longer loading then we are ready to repeat as well - if (this._isWaitingForVariables && !sceneGraph.hasVariableDependencyInLoadingState(this)) { - this._isWaitingForVariables = false; - this._performRepeat(); - } + private _onVariableUpdateCompleted(): void { + this._performRepeat(); } private _performRepeat() { + if (this._variableDependency.hasDependencyInLoadingState()) { + return; + } + const variable = sceneGraph.lookupVariable(this.state.variableName, this.parent?.parent!); if (!variable) { diff --git a/public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts b/public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts index 94134fae230..f64ee741f18 100644 --- a/public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts +++ b/public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts @@ -21,7 +21,6 @@ import { SceneGridItemLike, SceneGridLayout, SceneGridRow, - SceneVariable, VizPanel, } from '@grafana/scenes'; import { Dashboard, LoadingState, Panel, RowPanel, VariableRefresh } from '@grafana/schema'; @@ -226,7 +225,7 @@ describe('transformSceneToSaveModel', () => { const rowRepeater = rowWithRepeat.state.$behaviors![0] as RowRepeaterBehavior; // trigger row repeater - rowRepeater.variableDependency?.variableUpdatesCompleted(new Set([variable])); + rowRepeater.variableDependency?.variableUpdateCompleted(variable, true); // Make sure the repeated rows have been added to runtime scene model expect(grid.state.children.length).toBe(5); diff --git a/public/app/features/trails/MetricSelectScene.tsx b/public/app/features/trails/MetricSelectScene.tsx index d0de55a95e9..65f3169984c 100644 --- a/public/app/features/trails/MetricSelectScene.tsx +++ b/public/app/features/trails/MetricSelectScene.tsx @@ -13,7 +13,6 @@ import { QueryVariable, sceneGraph, VariableDependencyConfig, - SceneVariable, SceneCSSGridLayout, SceneCSSGridItem, SceneObjectRef, @@ -50,6 +49,7 @@ const ROW_CARD_HEIGHT = '64px'; export class MetricSelectScene extends SceneObjectBase { private previewCache: Record = {}; + private ignoreNextUpdate = false; constructor(state: Partial) { super({ @@ -71,17 +71,14 @@ export class MetricSelectScene extends SceneObjectBase { protected _variableDependency = new VariableDependencyConfig(this, { variableNames: [VAR_METRIC_NAMES], - onVariableUpdatesCompleted: this._onVariableChanged.bind(this), + onVariableUpdateCompleted: this.onVariableUpdateCompleted.bind(this), }); - private _onVariableChanged(changedVariables: Set, dependencyChanged: boolean): void { - if (dependencyChanged) { - this.updateMetrics(); - this.buildLayout(); - } + private onVariableUpdateCompleted(): void { + this.updateMetrics(); + this.buildLayout(); } - private ignoreNextUpdate = false; private _onActivate() { if (this.state.body.state.children.length === 0) { this.buildLayout(); diff --git a/yarn.lock b/yarn.lock index 9fe38af796a..aea1b14c61b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3551,9 +3551,9 @@ __metadata: languageName: unknown linkType: soft -"@grafana/scenes@npm:1.30.0": - version: 1.30.0 - resolution: "@grafana/scenes@npm:1.30.0" +"@grafana/scenes@npm:^2.0.0": + version: 2.0.0 + resolution: "@grafana/scenes@npm:2.0.0" dependencies: "@grafana/e2e-selectors": "npm:10.0.2" react-grid-layout: "npm:1.3.4" @@ -3565,7 +3565,7 @@ __metadata: "@grafana/runtime": 10.0.3 "@grafana/schema": 10.0.3 "@grafana/ui": 10.0.3 - checksum: f8871d337ab87f52bce88efa3233b318a3ed043c7b16638acebc506e5e765636dfd908850fbe14d042e2d4d378df8345880fae469f8e43159a83f8f9fcbd63db + checksum: 47ae832a05a72ec0ae539bfdde967f5c69a8c5b7410216539b7a6f82b2ec6f86fcdc6509d15b8cfd399a16db3d3bd079a3e39b08846424693301cf27b867c2d3 languageName: node linkType: hard @@ -16969,7 +16969,7 @@ __metadata: "@grafana/monaco-logql": "npm:^0.0.7" "@grafana/o11y-ds-frontend": "workspace:*" "@grafana/runtime": "workspace:*" - "@grafana/scenes": "npm:1.30.0" + "@grafana/scenes": "npm:^2.0.0" "@grafana/schema": "workspace:*" "@grafana/tsconfig": "npm:^1.3.0-rc1" "@grafana/ui": "workspace:*"