DashboardScene: Skip panel repeats when values are the same (#87788)

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx

@@ -4,7 +4,7 @@ import { SceneGridLayout, VizPanel } from '@grafana/scenes';
 
 import { activateFullSceneTree, buildPanelRepeaterScene } from '../utils/test-utils';
 
-import { DashboardGridItem } from './DashboardGridItem';
+import { DashboardGridItem, DashboardGridItemState } from './DashboardGridItem';
 
 setPluginImportUtils({
   importPanelPlugin: (id: string) => Promise.resolve(getPanelPlugin({})),
@@ -63,6 +63,18 @@ describe('PanelRepeaterGridItem', () => {
     expect(repeater.state.height).toBe(50);
   });
 
+  it('Should skip repeat when variable values are the same ', async () => {
+    const { scene, repeater, variable } = buildPanelRepeaterScene({ variableQueryTime: 0, itemHeight: 10 });
+    const stateUpdates: DashboardGridItemState[] = [];
+    repeater.subscribeToState((state) => stateUpdates.push(state));
+
+    activateFullSceneTree(scene);
+
+    expect(stateUpdates.length).toBe(1);
+    repeater.variableDependency?.variableUpdateCompleted(variable, true);
+    expect(stateUpdates.length).toBe(1);
+  });
+
   it('Should adjust itemHeight when container is resized, direction horizontal', async () => {
     const { scene, repeater } = buildPanelRepeaterScene({
       variableQueryTime: 0,

public/app/features/dashboard-scene/scene/DashboardGridItem.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { isEqual } from 'lodash';
 import React, { useMemo } from 'react';
 import { Unsubscribable } from 'rxjs';
 
@@ -18,6 +19,7 @@ import {
   CustomVariable,
   VizPanelMenu,
   VizPanelState,
+  VariableValueSingle,
 } from '@grafana/scenes';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
 
@@ -28,7 +30,7 @@ import { LibraryVizPanel } from './LibraryVizPanel';
 import { repeatPanelMenuBehavior } from './PanelMenuBehavior';
 import { DashboardRepeatsProcessedEvent } from './types';
 
-interface DashboardGridItemState extends SceneGridItemStateLike {
+export interface DashboardGridItemState extends SceneGridItemStateLike {
   body: VizPanel | LibraryVizPanel | AddLibraryPanelDrawer;
   repeatedPanels?: VizPanel[];
   variableName?: string;
@@ -41,6 +43,8 @@ export type RepeatDirection = 'v' | 'h';
 
 export class DashboardGridItem extends SceneObjectBase<DashboardGridItemState> implements SceneGridItemLike {
   private _libPanelSubscription: Unsubscribable | undefined;
+  private _prevRepeatValues?: VariableValueSingle[];
+
   protected _variableDependency = new VariableDependencyConfig(this, {
     variableNames: this.state.variableName ? [this.state.variableName] : [],
     onVariableUpdateCompleted: this._onVariableUpdateCompleted.bind(this),
@@ -153,8 +157,14 @@ export class DashboardGridItem extends SceneObjectBase<DashboardGridItemState> i
       return;
     }
 
-    let panelToRepeat = this.state.body instanceof LibraryVizPanel ? this.state.body.state.panel! : this.state.body;
     const { values, texts } = getMultiVariableValues(variable);
+
+    if (isEqual(this._prevRepeatValues, values)) {
+      return;
+    }
+
+    this._prevRepeatValues = values;
+    const panelToRepeat = this.state.body instanceof LibraryVizPanel ? this.state.body.state.panel! : this.state.body;
     const repeatedPanels: VizPanel[] = [];
 
     // Loop through variable values and create repeats