public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard: Add lazy loading for repeated panels (#115047)

Browse Source 
Co-authored-by: Haris Rozajac <haris.rozajac12@gmail.com>
Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com>
This commit is contained in:
Kristina Demeshchik
2026-01-02 08:15:40 +01:00
committed by GitHub
co-authored by Haris Rozajac Ivan Ortega
parent 521670981a
commit 33a1c60433
6 changed files with 62 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard-scene/scene/DashboardScene.tsx
+1 -2
View File
@@ -90,7 +90,6 @@ import { DashboardGridItem } from './layout-default/DashboardGridItem';
import { DefaultGridLayoutManager } from './layout-default/DefaultGridLayoutManager';
import { addNewRowTo } from './layouts-shared/addNew';
import { clearClipboard } from './layouts-shared/paste';
import { getIsLazy } from './layouts-shared/utils';
import { DashboardLayoutManager } from './types/DashboardLayoutManager';
import { LayoutParent } from './types/LayoutParent';
@@ -199,7 +198,7 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> impleme
meta: {},
editable: true,
$timeRange: state.$timeRange ?? new SceneTimeRange({}),
body: state.body ?? DefaultGridLayoutManager.fromVizPanels([], getIsLazy(state.preload)),
body: state.body ?? DefaultGridLayoutManager.fromVizPanels([]),
links: state.links ?? [],
...state,
editPane: new DashboardEditPane(),
public/app/features/dashboard-scene/scene/SoloPanelContext.tsx
+15 -3
View File
@@ -1,7 +1,7 @@
import React, { useContext, useEffect, useState } from 'react';
import { Trans } from '@grafana/i18n';
import { VizPanel } from '@grafana/scenes';
import { LazyLoader, VizPanel } from '@grafana/scenes';
import { Box, Spinner } from '@grafana/ui';
import { DashboardScene } from './DashboardScene';
@@ -51,11 +51,23 @@ export function useSoloPanelContext() {
return useContext(SoloPanelContext);
}
export function renderMatchingSoloPanels(soloPanelContext: SoloPanelContextValue, panels: VizPanel[]) {
export function renderMatchingSoloPanels(
soloPanelContext: SoloPanelContextValue,
panels: VizPanel[],
isLazy?: boolean
) {
const matches: React.ReactNode[] = [];
for (const panel of panels) {
if (soloPanelContext.matches(panel)) {
matches.push(<panel.Component model={panel} key={panel.state.key} />);
if (isLazy) {
matches.push(
<LazyLoader key={panel.state.key!}>
<panel.Component model={panel} />
</LazyLoader>
);
} else {
matches.push(<panel.Component model={panel} key={panel.state.key} />);
}
}
}
public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemRenderer.tsx
+6 -1
View File
@@ -8,6 +8,7 @@ import { useStyles2 } from '@grafana/ui';
import { ConditionalRenderingGroup } from '../../conditional-rendering/group/ConditionalRenderingGroup';
import { useIsConditionallyHidden } from '../../conditional-rendering/hooks/useIsConditionallyHidden';
import { useDashboardState } from '../../utils/utils';
import { SoloPanelContextValueWithSearchStringFilter } from '../PanelSearchLayout';
import { renderMatchingSoloPanels, useSoloPanelContext } from '../SoloPanelContext';
import { getIsLazy } from '../layouts-shared/utils';
@@ -89,7 +90,11 @@ export function AutoGridItemRenderer({ model }: SceneComponentProps<AutoGridItem
);
if (soloPanelContext) {
return renderMatchingSoloPanels(soloPanelContext, [body, ...repeatedPanels]);
// Use lazy loading only for panel search layout (SoloPanelContextValueWithSearchStringFilter)
// as it renders multiple panels in a grid. Skip lazy loading for viewPanel URL param
// (SoloPanelContextWithPathIdFilter) since single panels should render immediately.
const useLazyForSoloPanel = isLazy && soloPanelContext instanceof SoloPanelContextValueWithSearchStringFilter;
return renderMatchingSoloPanels(soloPanelContext, [body, ...repeatedPanels], useLazyForSoloPanel);
}
const isDragging = !!draggingKey;
public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemRenderer.tsx
+36 -14
View File
@@ -1,17 +1,43 @@
import { css } from '@emotion/css';
import { useMemo } from 'react';
import { RefObject, useMemo } from 'react';
import { config } from '@grafana/runtime';
import { SceneComponentProps } from '@grafana/scenes';
import { LazyLoader, SceneComponentProps, VizPanel } from '@grafana/scenes';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
import { useDashboardState } from '../../utils/utils';
import { SoloPanelContextValueWithSearchStringFilter } from '../PanelSearchLayout';
import { renderMatchingSoloPanels, useSoloPanelContext } from '../SoloPanelContext';
import { getIsLazy } from '../layouts-shared/utils';
import { DashboardGridItem, RepeatDirection } from './DashboardGridItem';
interface PanelWrapperProps {
panel: VizPanel;
isLazy: boolean;
containerRef?: RefObject<HTMLDivElement>;
}
function PanelWrapper({ panel, isLazy, containerRef }: PanelWrapperProps) {
if (isLazy) {
return (
<LazyLoader key={panel.state.key!} ref={containerRef} className={panelWrapper}>
<panel.Component model={panel} />
</LazyLoader>
);
}
return (
<div className={panelWrapper} ref={containerRef}>
<panel.Component model={panel} />
</div>
);
}
export function DashboardGridItemRenderer({ model }: SceneComponentProps<DashboardGridItem>) {
const { repeatedPanels = [], itemHeight, variableName, body } = model.useState();
const soloPanelContext = useSoloPanelContext();
const { preload } = useDashboardState(model);
const isLazy = useMemo(() => getIsLazy(preload), [preload]);
const layoutStyle = useLayoutStyle(
model.getRepeatDirection(),
model.getChildCount(),
@@ -20,26 +46,22 @@ export function DashboardGridItemRenderer({ model }: SceneComponentProps<Dashboa
);
if (soloPanelContext) {
return renderMatchingSoloPanels(soloPanelContext, [body, ...repeatedPanels]);
// Use lazy loading only for panel search layout (SoloPanelContextValueWithSearchStringFilter)
// as it renders multiple panels in a grid. Skip lazy loading for viewPanel URL param
// (SoloPanelContextWithPathIdFilter) since single panels should render immediately.
const useLazyForSoloPanel = isLazy && soloPanelContext instanceof SoloPanelContextValueWithSearchStringFilter;
return renderMatchingSoloPanels(soloPanelContext, [body, ...repeatedPanels], useLazyForSoloPanel);
}
if (!variableName) {
return (
<div className={panelWrapper} ref={model.containerRef}>
<body.Component model={body} key={body.state.key} />
</div>
);
return <PanelWrapper panel={body} isLazy={isLazy} containerRef={model.containerRef} />;
}
return (
<div className={layoutStyle} ref={model.containerRef}>
<div className={panelWrapper} key={body.state.key}>
<body.Component model={body} key={body.state.key} />
</div>
<PanelWrapper panel={body} isLazy={isLazy} />
{repeatedPanels.map((panel) => (
<div className={panelWrapper} key={panel.state.key}>
<panel.Component model={panel} key={panel.state.key} />
</div>
<PanelWrapper key={panel.state.key!} panel={panel} isLazy={isLazy} />
))}
</div>
);
public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx
+3 -8
View File
@@ -47,7 +47,6 @@ import { AutoGridItem } from '../layout-auto-grid/AutoGridItem';
import { CanvasGridAddActions } from '../layouts-shared/CanvasGridAddActions';
import { clearClipboard, getDashboardGridItemFromClipboard } from '../layouts-shared/paste';
import { dashboardCanvasAddButtonHoverStyles } from '../layouts-shared/styles';
import { getIsLazy } from '../layouts-shared/utils';
import { DashboardLayoutGrid } from '../types/DashboardLayoutGrid';
import { DashboardLayoutManager } from '../types/DashboardLayoutManager';
import { LayoutRegistryItem } from '../types/LayoutRegistryItem';
@@ -565,11 +564,10 @@ export class DefaultGridLayoutManager
public static createFromLayout(currentLayout: DashboardLayoutManager): DefaultGridLayoutManager {
const panels = currentLayout.getVizPanels();
const isLazy = getIsLazy(getDashboardSceneFor(currentLayout).state.preload)!;
return DefaultGridLayoutManager.fromVizPanels(panels, isLazy);
return DefaultGridLayoutManager.fromVizPanels(panels);
}
public static fromVizPanels(panels: VizPanel[] = [], isLazy?: boolean | undefined): DefaultGridLayoutManager {
public static fromVizPanels(panels: VizPanel[] = []): DefaultGridLayoutManager {
const children: DashboardGridItem[] = [];
const panelHeight = 10;
const panelWidth = GRID_COLUMN_COUNT / 3;
@@ -607,7 +605,6 @@ export class DefaultGridLayoutManager
children: children,
isDraggable: true,
isResizable: true,
isLazy,
}),
});
}
@@ -615,8 +612,7 @@ export class DefaultGridLayoutManager
public static fromGridItems(
gridItems: SceneGridItemLike[],
isDraggable?: boolean,
isResizable?: boolean,
isLazy?: boolean | undefined
isResizable?: boolean
): DefaultGridLayoutManager {
const children = gridItems.reduce<SceneGridItemLike[]>((acc, gridItem) => {
gridItem.clearParent();
@@ -630,7 +626,6 @@ export class DefaultGridLayoutManager
children,
isDraggable,
isResizable,
isLazy,
}),
});
}
public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx
+1 -2
View File
@@ -358,8 +358,7 @@ export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> i
layout: DefaultGridLayoutManager.fromGridItems(
rowConfig.children,
rowConfig.isDraggable ?? layout.state.grid.state.isDraggable,
rowConfig.isResizable ?? layout.state.grid.state.isResizable,
layout.state.grid.state.isLazy
rowConfig.isResizable ?? layout.state.grid.state.isResizable
),
})
);