mirror of https://github.com/grafana/grafana
RowsLayout: Rethinking row repeats (#104312)
* Something is working * Update * Update * working * clear repeated rows * Update * Update * Outline via function * Update * Update * Update * Progress * Update * Udpate sum * Update * Update public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> * Update public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> * Update public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> * Update public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManager.tsx Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> * Update public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> * Update public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManagerRenderer.tsx Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> * Update * more tests * Update * Update * Removed old behavior * Update * Update * Update * fix outline for default grid * Update --------- Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>pull/107375/head
Torkel Ödegaard
4 weeks ago
committed by
GitHub
parent
249be02010
commit
c63a52958d
@ -0,0 +1,165 @@ |
||||
import { act, screen, waitFor } from '@testing-library/react'; |
||||
import { render } from 'test/test-utils'; |
||||
|
||||
import { VariableRefresh } from '@grafana/data'; |
||||
import { getPanelPlugin } from '@grafana/data/test'; |
||||
import { setPluginImportUtils } from '@grafana/runtime'; |
||||
import { SceneTimeRange, SceneVariableSet, TestVariable, VariableValueOption, PanelBuilders } from '@grafana/scenes'; |
||||
import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from 'app/features/variables/constants'; |
||||
import { TextMode } from 'app/plugins/panel/text/panelcfg.gen'; |
||||
|
||||
import { DashboardScene } from '../DashboardScene'; |
||||
import { AutoGridItem } from '../layout-auto-grid/AutoGridItem'; |
||||
import { AutoGridLayout } from '../layout-auto-grid/AutoGridLayout'; |
||||
import { AutoGridLayoutManager } from '../layout-auto-grid/AutoGridLayoutManager'; |
||||
|
||||
import { RowItem } from './RowItem'; |
||||
import { RowsLayoutManager } from './RowsLayoutManager'; |
||||
|
||||
jest.mock('@grafana/runtime', () => ({ |
||||
...jest.requireActual('@grafana/runtime'), |
||||
setPluginExtensionGetter: jest.fn(), |
||||
getPluginLinkExtensions: jest.fn().mockReturnValue({ extensions: [] }), |
||||
})); |
||||
|
||||
setPluginImportUtils({ |
||||
importPanelPlugin: () => Promise.resolve(getPanelPlugin({})), |
||||
getPanelPluginFromCache: () => undefined, |
||||
}); |
||||
|
||||
describe('RowItemRepeater', () => { |
||||
describe('Given scene with variable with 3 values', () => { |
||||
it('Should repeat row', async () => { |
||||
const { rowToRepeat } = renderScene({ variableQueryTime: 0 }); |
||||
|
||||
await waitFor(() => { |
||||
expect(screen.queryByText('Row A')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Row B')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Row C')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
expect(rowToRepeat.state.key).toBe('row-1-clone-0'); |
||||
expect(rowToRepeat.state.repeatedRows!.length).toBe(2); |
||||
expect(rowToRepeat.state.repeatedRows![0].state.key).toBe('row-1-clone-1'); |
||||
}); |
||||
|
||||
it('Should update repeats when variable value changes', async () => { |
||||
const { repeatByVariable, rowToRepeat } = renderScene({ variableQueryTime: 0 }); |
||||
|
||||
await waitFor(() => { |
||||
expect(screen.queryByText('Row C')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
act(() => { |
||||
repeatByVariable.changeValueTo(['C', 'D']); |
||||
}); |
||||
|
||||
await waitFor(() => { |
||||
expect(screen.queryByText('Row A')).not.toBeInTheDocument(); |
||||
expect(screen.queryByText('Row D')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
expect(rowToRepeat.state.repeatedRows!.length).toBe(1); |
||||
}); |
||||
|
||||
it('Should skip update repeats when variable values the same', async () => { |
||||
const { repeatByVariable, rowToRepeat } = renderScene({ variableQueryTime: 0 }); |
||||
let stateUpdates = 0; |
||||
|
||||
rowToRepeat.subscribeToState((s) => stateUpdates++); |
||||
|
||||
await waitFor(() => { |
||||
expect(screen.queryByText('Row C')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
act(() => { |
||||
repeatByVariable.changeValueTo(['A1', 'B1', 'C1']); |
||||
}); |
||||
|
||||
expect(stateUpdates).toBe(1); |
||||
}); |
||||
|
||||
it('Should handle removing repeats', async () => { |
||||
const { rowToRepeat } = renderScene({ variableQueryTime: 0 }); |
||||
|
||||
await waitFor(() => { |
||||
expect(screen.queryByText('Row C')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
act(() => { |
||||
rowToRepeat.onChangeRepeat(undefined); |
||||
}); |
||||
|
||||
expect(screen.queryByText('Row C')).not.toBeInTheDocument(); |
||||
expect(rowToRepeat.state.$variables).toBe(undefined); |
||||
expect(rowToRepeat.state.repeatedRows).toBe(undefined); |
||||
expect(rowToRepeat.state.repeatByVariable).toBe(undefined); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
interface SceneOptions { |
||||
variableQueryTime: number; |
||||
variableRefresh?: VariableRefresh; |
||||
} |
||||
|
||||
function buildTextPanel(key: string, content: string) { |
||||
const panel = PanelBuilders.text().setOption('content', content).setOption('mode', TextMode.Markdown).build(); |
||||
panel.setState({ key }); |
||||
return panel; |
||||
} |
||||
|
||||
function renderScene( |
||||
options: SceneOptions, |
||||
variableOptions?: VariableValueOption[], |
||||
variableStateOverrides?: { isMulti: boolean } |
||||
) { |
||||
const rows = [ |
||||
new RowItem({ |
||||
key: 'row-1', |
||||
title: 'Row $server', |
||||
repeatByVariable: 'server', |
||||
layout: new AutoGridLayoutManager({ |
||||
layout: new AutoGridLayout({ |
||||
children: [ |
||||
new AutoGridItem({ |
||||
body: buildTextPanel('text-1', 'Panel inside repeated row, server = $server'), |
||||
}), |
||||
], |
||||
}), |
||||
}), |
||||
}), |
||||
]; |
||||
|
||||
const layout = new RowsLayoutManager({ rows }); |
||||
const repeatByVariable = new TestVariable({ |
||||
name: 'server', |
||||
query: 'A.*', |
||||
value: ALL_VARIABLE_VALUE, |
||||
text: ALL_VARIABLE_TEXT, |
||||
isMulti: true, |
||||
includeAll: true, |
||||
delayMs: options.variableQueryTime, |
||||
refresh: options.variableRefresh, |
||||
optionsToReturn: variableOptions ?? [ |
||||
{ label: 'A', value: 'A1' }, |
||||
{ label: 'B', value: 'B1' }, |
||||
{ label: 'C', value: 'C1' }, |
||||
], |
||||
...variableStateOverrides, |
||||
}); |
||||
|
||||
const scene = new DashboardScene({ |
||||
$timeRange: new SceneTimeRange({ from: 'now-6h', to: 'now' }), |
||||
$variables: new SceneVariableSet({ |
||||
variables: [repeatByVariable], |
||||
}), |
||||
body: layout, |
||||
}); |
||||
|
||||
const rowToRepeat = rows[0]; |
||||
|
||||
render(<scene.Component model={scene} />); |
||||
|
||||
return { scene, layout, rows, rowToRepeat, repeatByVariable }; |
||||
} |
||||
@ -0,0 +1,160 @@ |
||||
import { isEqual } from 'lodash'; |
||||
import { useEffect } from 'react'; |
||||
|
||||
import { |
||||
MultiValueVariable, |
||||
SceneVariableSet, |
||||
LocalValueVariable, |
||||
sceneGraph, |
||||
VariableValueSingle, |
||||
} from '@grafana/scenes'; |
||||
import { Spinner } from '@grafana/ui'; |
||||
|
||||
import { DashboardStateChangedEvent } from '../../edit-pane/shared'; |
||||
import { getCloneKey } from '../../utils/clone'; |
||||
import { dashboardLog, getMultiVariableValues } from '../../utils/utils'; |
||||
import { DashboardRepeatsProcessedEvent } from '../types/DashboardRepeatsProcessedEvent'; |
||||
|
||||
import { RowItem } from './RowItem'; |
||||
import { RowsLayoutManager } from './RowsLayoutManager'; |
||||
|
||||
export interface Props { |
||||
row: RowItem; |
||||
manager: RowsLayoutManager; |
||||
variable: MultiValueVariable; |
||||
} |
||||
|
||||
export function RowItemRepeater({ |
||||
row, |
||||
variable, |
||||
}: { |
||||
row: RowItem; |
||||
manager: RowsLayoutManager; |
||||
variable: MultiValueVariable; |
||||
}) { |
||||
const { repeatedRows } = row.useState(); |
||||
|
||||
// Subscribe to variable state changes and perform repeats when the variable changes
|
||||
useEffect(() => { |
||||
performRowRepeats(variable, row, false); |
||||
|
||||
const variableChangeSub = variable.subscribeToState((state) => performRowRepeats(variable, row, false)); |
||||
const editEventSub = row.subscribeToEvent(DashboardStateChangedEvent, (e) => |
||||
performRowRepeats(variable, row, true) |
||||
); |
||||
|
||||
return () => { |
||||
editEventSub.unsubscribe(); |
||||
variableChangeSub.unsubscribe(); |
||||
}; |
||||
}, [variable, row]); |
||||
|
||||
if ( |
||||
repeatedRows === undefined || |
||||
sceneGraph.hasVariableDependencyInLoadingState(variable) || |
||||
variable.state.loading |
||||
) { |
||||
dashboardLog.logger('RowItemRepeater', false, 'Variable is loading, showing spinner'); |
||||
return <Spinner />; |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<row.Component model={row} key={row.state.key!} /> |
||||
{repeatedRows?.map((rowClone) => <rowClone.Component model={rowClone} key={rowClone.state.key!} />)} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export function performRowRepeats(variable: MultiValueVariable, row: RowItem, contentChanged: boolean) { |
||||
if (sceneGraph.hasVariableDependencyInLoadingState(variable)) { |
||||
dashboardLog.logger('RowItemRepeater', false, 'Skipped dependency in loading state'); |
||||
return; |
||||
} |
||||
|
||||
if (variable.state.loading) { |
||||
dashboardLog.logger('RowItemRepeater', false, 'Skipped, variable is loading'); |
||||
return; |
||||
} |
||||
|
||||
const { values, texts } = getMultiVariableValues(variable); |
||||
const prevValues = getPrevRepeatValues(row, variable.state.name); |
||||
|
||||
if (!contentChanged && isEqual(prevValues, values)) { |
||||
dashboardLog.logger('RowItemRepeater', false, 'Skipped, values the same'); |
||||
return; |
||||
} |
||||
|
||||
if (contentChanged) { |
||||
dashboardLog.logger('RowItemRepeater', false, 'Performing repeats, contentChanged'); |
||||
} else { |
||||
dashboardLog.logger('RowItemRepeater', false, 'Performing repeats, variable values changed', values); |
||||
} |
||||
|
||||
const variableValues = values.length ? values : ['']; |
||||
const variableTexts = texts.length ? texts : variable.hasAllValue() ? ['All'] : ['None']; |
||||
const clonedRows: RowItem[] = []; |
||||
|
||||
// Loop through variable values and create repeats
|
||||
for (let rowIndex = 0; rowIndex < variableValues.length; rowIndex++) { |
||||
const isSourceRow = rowIndex === 0; |
||||
const rowCloneKey = getCloneKey(row.state.key!, rowIndex); |
||||
const rowClone = isSourceRow |
||||
? row |
||||
: row.clone({ repeatByVariable: undefined, repeatedRows: undefined, layout: undefined }); |
||||
|
||||
const layout = isSourceRow ? row.getLayout() : row.getLayout().cloneLayout(rowCloneKey, false); |
||||
|
||||
rowClone.setState({ |
||||
key: rowCloneKey, |
||||
$variables: new SceneVariableSet({ |
||||
variables: [ |
||||
new LocalValueVariable({ |
||||
name: variable.state.name, |
||||
value: variableValues[rowIndex], |
||||
text: String(variableTexts[rowIndex]), |
||||
isMulti: variable.state.isMulti, |
||||
includeAll: variable.state.includeAll, |
||||
}), |
||||
], |
||||
}), |
||||
layout, |
||||
}); |
||||
|
||||
if (!isSourceRow) { |
||||
clonedRows.push(rowClone); |
||||
} |
||||
} |
||||
|
||||
row.setState({ repeatedRows: clonedRows }); |
||||
row.publishEvent(new DashboardRepeatsProcessedEvent({ source: row }), true); |
||||
} |
||||
|
||||
/** |
||||
* Get previous variable values given the current repeated state |
||||
*/ |
||||
function getPrevRepeatValues(mainRow: RowItem, varName: string): VariableValueSingle[] { |
||||
const values: VariableValueSingle[] = []; |
||||
|
||||
if (!mainRow.state.repeatedRows) { |
||||
return []; |
||||
} |
||||
|
||||
function collectVariableValue(row: RowItem) { |
||||
const variable = sceneGraph.lookupVariable(varName, row); |
||||
if (variable) { |
||||
const value = variable.getValue(); |
||||
if (value != null && !Array.isArray(value)) { |
||||
values.push(value); |
||||
} |
||||
} |
||||
} |
||||
|
||||
collectVariableValue(mainRow); |
||||
|
||||
for (const row of mainRow.state.repeatedRows) { |
||||
collectVariableValue(row); |
||||
} |
||||
|
||||
return values; |
||||
} |
||||
@ -1,272 +0,0 @@ |
||||
import { VariableRefresh } from '@grafana/data'; |
||||
import { getPanelPlugin } from '@grafana/data/test'; |
||||
import { setPluginImportUtils } from '@grafana/runtime'; |
||||
import { |
||||
SceneGridRow, |
||||
SceneTimeRange, |
||||
SceneVariableSet, |
||||
TestVariable, |
||||
VariableValueOption, |
||||
PanelBuilders, |
||||
} from '@grafana/scenes'; |
||||
import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from 'app/features/variables/constants'; |
||||
import { TextMode } from 'app/plugins/panel/text/panelcfg.gen'; |
||||
|
||||
import { getCloneKey, isInCloneChain, joinCloneKeys } from '../../utils/clone'; |
||||
import { activateFullSceneTree } from '../../utils/test-utils'; |
||||
import { DashboardScene } from '../DashboardScene'; |
||||
import { DashboardGridItem } from '../layout-default/DashboardGridItem'; |
||||
import { DefaultGridLayoutManager } from '../layout-default/DefaultGridLayoutManager'; |
||||
|
||||
import { RowItem } from './RowItem'; |
||||
import { RowItemRepeaterBehavior } from './RowItemRepeaterBehavior'; |
||||
import { RowsLayoutManager } from './RowsLayoutManager'; |
||||
|
||||
jest.mock('@grafana/runtime', () => ({ |
||||
...jest.requireActual('@grafana/runtime'), |
||||
setPluginExtensionGetter: jest.fn(), |
||||
getPluginLinkExtensions: jest.fn().mockReturnValue({ extensions: [] }), |
||||
})); |
||||
|
||||
setPluginImportUtils({ |
||||
importPanelPlugin: () => Promise.resolve(getPanelPlugin({})), |
||||
getPanelPluginFromCache: () => undefined, |
||||
}); |
||||
|
||||
describe('RowItemRepeaterBehavior', () => { |
||||
describe('Given scene with variable with 5 values', () => { |
||||
let scene: DashboardScene, layout: RowsLayoutManager, repeatBehavior: RowItemRepeaterBehavior; |
||||
let layoutStateUpdates: unknown[]; |
||||
|
||||
beforeEach(async () => { |
||||
({ scene, layout, repeatBehavior } = buildScene({ variableQueryTime: 0 })); |
||||
|
||||
layoutStateUpdates = []; |
||||
layout.subscribeToState((state) => layoutStateUpdates.push(state)); |
||||
|
||||
activateFullSceneTree(scene); |
||||
await new Promise((r) => setTimeout(r, 1)); |
||||
}); |
||||
|
||||
it('Should repeat row', () => { |
||||
// Verify that first row still has repeat behavior
|
||||
const row1 = layout.state.rows[0]; |
||||
expect(row1.state.key).toBe(getCloneKey('row-1', 0)); |
||||
expect(row1.state.$behaviors?.[0]).toBeInstanceOf(RowItemRepeaterBehavior); |
||||
expect(row1.state.$variables!.state.variables[0].getValue()).toBe('A1'); |
||||
|
||||
const row1Children = getRowChildren(row1); |
||||
expect(row1Children[0].state.key!).toBe(joinCloneKeys(row1.state.key!, 'grid-item-0')); |
||||
expect(row1Children[0].state.body?.state.key).toBe(joinCloneKeys(row1Children[0].state.key!, 'panel-0')); |
||||
|
||||
const row2 = layout.state.rows[1]; |
||||
expect(row2.state.key).toBe(getCloneKey('row-1', 1)); |
||||
expect(row2.state.$behaviors).toEqual([]); |
||||
expect(row2.state.$variables!.state.variables[0].getValueText?.()).toBe('B'); |
||||
|
||||
const row2Children = getRowChildren(row2); |
||||
expect(row2Children[0].state.key!).toBe(joinCloneKeys(row2.state.key!, 'grid-item-0')); |
||||
expect(row2Children[0].state.body?.state.key).toBe(joinCloneKeys(row2Children[0].state.key!, 'panel-0')); |
||||
}); |
||||
|
||||
it('Repeated rows should be read only', () => { |
||||
const row1 = layout.state.rows[0]; |
||||
expect(isInCloneChain(row1.state.key!)).toBe(false); |
||||
|
||||
const row2 = layout.state.rows[1]; |
||||
expect(isInCloneChain(row2.state.key!)).toBe(true); |
||||
}); |
||||
|
||||
it('Should push row at the bottom down', () => { |
||||
// Should push row at the bottom down
|
||||
const rowAtTheBottom = layout.state.rows[5]; |
||||
expect(rowAtTheBottom.state.title).toBe('Row at the bottom'); |
||||
}); |
||||
|
||||
it('Should handle second repeat cycle and update remove old repeats', async () => { |
||||
// trigger another repeat cycle by changing the variable
|
||||
const variable = scene.state.$variables!.state.variables[0] as TestVariable; |
||||
variable.changeValueTo(['B1', 'C1']); |
||||
|
||||
await new Promise((r) => setTimeout(r, 1)); |
||||
|
||||
// should now only have 2 repeated rows (and the panel above + the row at the bottom)
|
||||
expect(layout.state.rows.length).toBe(3); |
||||
}); |
||||
|
||||
it('Should ignore repeat process if variable values are the same', async () => { |
||||
// trigger another repeat cycle by changing the variable
|
||||
repeatBehavior.performRepeat(); |
||||
|
||||
await new Promise((r) => setTimeout(r, 1)); |
||||
|
||||
expect(layoutStateUpdates.length).toBe(1); |
||||
}); |
||||
}); |
||||
|
||||
describe('Given scene with variable with 15 values', () => { |
||||
let scene: DashboardScene, layout: RowsLayoutManager; |
||||
let layoutStateUpdates: unknown[]; |
||||
|
||||
beforeEach(async () => { |
||||
({ scene, layout } = buildScene({ variableQueryTime: 0 }, [ |
||||
{ label: 'A', value: 'A1' }, |
||||
{ label: 'B', value: 'B1' }, |
||||
{ label: 'C', value: 'C1' }, |
||||
{ label: 'D', value: 'D1' }, |
||||
{ label: 'E', value: 'E1' }, |
||||
{ label: 'F', value: 'F1' }, |
||||
{ label: 'G', value: 'G1' }, |
||||
{ label: 'H', value: 'H1' }, |
||||
{ label: 'I', value: 'I1' }, |
||||
{ label: 'J', value: 'J1' }, |
||||
{ label: 'K', value: 'K1' }, |
||||
{ label: 'L', value: 'L1' }, |
||||
{ label: 'M', value: 'M1' }, |
||||
{ label: 'N', value: 'N1' }, |
||||
{ label: 'O', value: 'O1' }, |
||||
])); |
||||
|
||||
layoutStateUpdates = []; |
||||
layout.subscribeToState((state) => layoutStateUpdates.push(state)); |
||||
|
||||
activateFullSceneTree(scene); |
||||
await new Promise((r) => setTimeout(r, 1)); |
||||
}); |
||||
|
||||
it('Should handle second repeat cycle and update remove old repeats', async () => { |
||||
// should have 15 repeated rows (and the panel above)
|
||||
expect(layout.state.rows.length).toBe(16); |
||||
|
||||
// trigger another repeat cycle by changing the variable
|
||||
const variable = scene.state.$variables!.state.variables[0] as TestVariable; |
||||
variable.changeValueTo(['B1', 'C1']); |
||||
|
||||
await new Promise((r) => setTimeout(r, 1)); |
||||
|
||||
// should now only have 2 repeated rows (and the panel above)
|
||||
expect(layout.state.rows.length).toBe(3); |
||||
}); |
||||
}); |
||||
|
||||
describe('Given a scene with empty variable', () => { |
||||
it('Should preserve repeat row', async () => { |
||||
const { scene, layout } = buildScene({ variableQueryTime: 0 }, []); |
||||
activateFullSceneTree(scene); |
||||
await new Promise((r) => setTimeout(r, 1)); |
||||
|
||||
// Should have 2 rows, one without repeat and one with the dummy row
|
||||
expect(layout.state.rows.length).toBe(2); |
||||
expect(layout.state.rows[0].state.$behaviors?.[0]).toBeInstanceOf(RowItemRepeaterBehavior); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
interface SceneOptions { |
||||
variableQueryTime: number; |
||||
variableRefresh?: VariableRefresh; |
||||
} |
||||
|
||||
function buildTextPanel(key: string, content: string) { |
||||
const panel = PanelBuilders.text().setOption('content', content).setOption('mode', TextMode.Markdown).build(); |
||||
panel.setState({ key }); |
||||
return panel; |
||||
} |
||||
|
||||
function buildScene( |
||||
options: SceneOptions, |
||||
variableOptions?: VariableValueOption[], |
||||
variableStateOverrides?: { isMulti: boolean } |
||||
) { |
||||
const repeatBehavior = new RowItemRepeaterBehavior({ variableName: 'server' }); |
||||
|
||||
const rows = [ |
||||
new RowItem({ |
||||
key: 'row-1', |
||||
$behaviors: [repeatBehavior], |
||||
layout: DefaultGridLayoutManager.fromGridItems([ |
||||
new DashboardGridItem({ |
||||
key: 'grid-item-1', |
||||
x: 0, |
||||
y: 11, |
||||
width: 24, |
||||
height: 5, |
||||
body: buildTextPanel('text-1', 'Panel inside repeated row, server = $server'), |
||||
}), |
||||
]), |
||||
}), |
||||
new RowItem({ |
||||
key: 'row-2', |
||||
title: 'Row at the bottom', |
||||
layout: DefaultGridLayoutManager.fromGridItems([ |
||||
new DashboardGridItem({ |
||||
key: 'grid-item-2', |
||||
x: 0, |
||||
y: 17, |
||||
body: buildTextPanel('text-2', 'Panel inside row, server = $server'), |
||||
}), |
||||
new DashboardGridItem({ |
||||
key: 'grid-item-3', |
||||
x: 0, |
||||
y: 25, |
||||
body: buildTextPanel('text-3', 'Panel inside row, server = $server'), |
||||
}), |
||||
]), |
||||
}), |
||||
]; |
||||
|
||||
const layout = new RowsLayoutManager({ rows }); |
||||
|
||||
const scene = new DashboardScene({ |
||||
$timeRange: new SceneTimeRange({ from: 'now-6h', to: 'now' }), |
||||
$variables: new SceneVariableSet({ |
||||
variables: [ |
||||
new TestVariable({ |
||||
name: 'server', |
||||
query: 'A.*', |
||||
value: ALL_VARIABLE_VALUE, |
||||
text: ALL_VARIABLE_TEXT, |
||||
isMulti: true, |
||||
includeAll: true, |
||||
delayMs: options.variableQueryTime, |
||||
refresh: options.variableRefresh, |
||||
optionsToReturn: variableOptions ?? [ |
||||
{ label: 'A', value: 'A1' }, |
||||
{ label: 'B', value: 'B1' }, |
||||
{ label: 'C', value: 'C1' }, |
||||
{ label: 'D', value: 'D1' }, |
||||
{ label: 'E', value: 'E1' }, |
||||
], |
||||
...variableStateOverrides, |
||||
}), |
||||
], |
||||
}), |
||||
body: layout, |
||||
}); |
||||
|
||||
const rowToRepeat = repeatBehavior.parent as SceneGridRow; |
||||
|
||||
return { scene, layout, rows, repeatBehavior, rowToRepeat }; |
||||
} |
||||
|
||||
function getRowLayout(row: RowItem): DefaultGridLayoutManager { |
||||
const layout = row.getLayout(); |
||||
|
||||
if (!(layout instanceof DefaultGridLayoutManager)) { |
||||
throw new Error('Invalid layout'); |
||||
} |
||||
|
||||
return layout; |
||||
} |
||||
|
||||
function getRowChildren(row: RowItem): DashboardGridItem[] { |
||||
const layout = getRowLayout(row); |
||||
|
||||
const filteredChildren = layout.state.grid.state.children.filter((child) => child instanceof DashboardGridItem); |
||||
|
||||
if (filteredChildren.length !== layout.state.grid.state.children.length) { |
||||
throw new Error('Invalid layout'); |
||||
} |
||||
|
||||
return filteredChildren; |
||||
} |
||||
@ -1,161 +0,0 @@ |
||||
import { isEqual } from 'lodash'; |
||||
|
||||
import { |
||||
LocalValueVariable, |
||||
MultiValueVariable, |
||||
sceneGraph, |
||||
SceneObjectBase, |
||||
SceneObjectState, |
||||
SceneVariableSet, |
||||
VariableDependencyConfig, |
||||
VariableValueSingle, |
||||
} from '@grafana/scenes'; |
||||
|
||||
import { isClonedKeyOf, getCloneKey } from '../../utils/clone'; |
||||
import { getMultiVariableValues } from '../../utils/utils'; |
||||
import { DashboardRepeatsProcessedEvent } from '../types/DashboardRepeatsProcessedEvent'; |
||||
|
||||
import { RowItem } from './RowItem'; |
||||
import { RowsLayoutManager } from './RowsLayoutManager'; |
||||
|
||||
interface RowItemRepeaterBehaviorState extends SceneObjectState { |
||||
variableName: string; |
||||
} |
||||
|
||||
export class RowItemRepeaterBehavior extends SceneObjectBase<RowItemRepeaterBehaviorState> { |
||||
protected _variableDependency = new VariableDependencyConfig(this, { |
||||
variableNames: [this.state.variableName], |
||||
onVariableUpdateCompleted: () => this.performRepeat(), |
||||
}); |
||||
|
||||
private _prevRepeatValues?: VariableValueSingle[]; |
||||
private _clonedRows?: RowItem[]; |
||||
|
||||
public constructor(state: RowItemRepeaterBehaviorState) { |
||||
super(state); |
||||
|
||||
this.addActivationHandler(() => this._activationHandler()); |
||||
} |
||||
|
||||
private _activationHandler() { |
||||
this.performRepeat(); |
||||
} |
||||
|
||||
private _getRow(): RowItem { |
||||
if (!(this.parent instanceof RowItem)) { |
||||
throw new Error('RepeatedRowItemBehavior: Parent is not a RowItem'); |
||||
} |
||||
|
||||
return this.parent; |
||||
} |
||||
|
||||
private _getLayout(): RowsLayoutManager { |
||||
const layout = this._getRow().parent; |
||||
|
||||
if (!(layout instanceof RowsLayoutManager)) { |
||||
throw new Error('RepeatedRowItemBehavior: Layout is not a RowsLayoutManager'); |
||||
} |
||||
|
||||
return layout; |
||||
} |
||||
|
||||
public performRepeat(force = false) { |
||||
if (this._variableDependency.hasDependencyInLoadingState()) { |
||||
return; |
||||
} |
||||
|
||||
const variable = sceneGraph.lookupVariable(this.state.variableName, this.parent?.parent!); |
||||
|
||||
if (!variable) { |
||||
console.error('RepeatedRowItemBehavior: Variable not found'); |
||||
return; |
||||
} |
||||
|
||||
if (!(variable instanceof MultiValueVariable)) { |
||||
console.error('RepeatedRowItemBehavior: Variable is not a MultiValueVariable'); |
||||
return; |
||||
} |
||||
|
||||
const rowToRepeat = this._getRow(); |
||||
const layout = this._getLayout(); |
||||
const { values, texts } = getMultiVariableValues(variable); |
||||
|
||||
// Do nothing if values are the same
|
||||
if (isEqual(this._prevRepeatValues, values) && !force) { |
||||
return; |
||||
} |
||||
|
||||
this._prevRepeatValues = values; |
||||
|
||||
this._clonedRows = []; |
||||
|
||||
const rowContent = rowToRepeat.getLayout(); |
||||
|
||||
// when variable has no options (due to error or similar) it will not render any panels at all
|
||||
// adding a placeholder in this case so that there is at least empty panel that can display error
|
||||
const emptyVariablePlaceholderOption = { |
||||
values: [''], |
||||
texts: variable.hasAllValue() ? ['All'] : ['None'], |
||||
}; |
||||
|
||||
const variableValues = values.length ? values : emptyVariablePlaceholderOption.values; |
||||
const variableTexts = texts.length ? texts : emptyVariablePlaceholderOption.texts; |
||||
|
||||
// Loop through variable values and create repeats
|
||||
for (let rowIndex = 0; rowIndex < variableValues.length; rowIndex++) { |
||||
const isSourceRow = rowIndex === 0; |
||||
const rowClone = isSourceRow ? rowToRepeat : rowToRepeat.clone({ $behaviors: [] }); |
||||
|
||||
const rowCloneKey = getCloneKey(rowToRepeat.state.key!, rowIndex); |
||||
|
||||
rowClone.setState({ |
||||
key: rowCloneKey, |
||||
$variables: new SceneVariableSet({ |
||||
variables: [ |
||||
new LocalValueVariable({ |
||||
name: this.state.variableName, |
||||
value: variableValues[rowIndex], |
||||
text: String(variableTexts[rowIndex]), |
||||
isMulti: variable.state.isMulti, |
||||
includeAll: variable.state.includeAll, |
||||
}), |
||||
], |
||||
}), |
||||
layout: rowContent.cloneLayout?.(rowCloneKey, isSourceRow), |
||||
}); |
||||
|
||||
this._clonedRows.push(rowClone); |
||||
} |
||||
|
||||
updateLayout(layout, this._clonedRows, rowToRepeat.state.key!); |
||||
|
||||
// Used from dashboard url sync
|
||||
this.publishEvent(new DashboardRepeatsProcessedEvent({ source: this }), true); |
||||
} |
||||
|
||||
public removeBehavior() { |
||||
const row = this._getRow(); |
||||
const layout = this._getLayout(); |
||||
const rows = getRowsFilterOutRepeatClones(layout, row.state.key!); |
||||
|
||||
layout.setState({ rows }); |
||||
|
||||
// Remove behavior and the scoped local variable
|
||||
row.setState({ $behaviors: row.state.$behaviors!.filter((b) => b !== this), $variables: undefined }); |
||||
} |
||||
} |
||||
|
||||
function updateLayout(layout: RowsLayoutManager, rows: RowItem[], rowKey: string) { |
||||
const allRows = getRowsFilterOutRepeatClones(layout, rowKey); |
||||
const index = allRows.findIndex((row) => row.state.key!.includes(rowKey)); |
||||
|
||||
if (index === -1) { |
||||
throw new Error('RowItemRepeaterBehavior: Row not found in layout'); |
||||
} |
||||
|
||||
layout.setState({ rows: [...allRows.slice(0, index), ...rows, ...allRows.slice(index + 1)] }); |
||||
} |
||||
|
||||
function getRowsFilterOutRepeatClones(layout: RowsLayoutManager, rowKey: string) { |
||||
return layout.state.rows.filter((rows) => !isClonedKeyOf(rows.state.key!, rowKey)); |
||||
} |
||||
Loading…
Reference in new issue