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

Dashboard: Simplify layout categories (#114682)

Browse Source 
* Dashboard: Simplify layout categories

* update

* fixing e2e
This commit is contained in:
Torkel Ödegaard
2025-12-03 16:07:10 +01:00
committed by GitHub
parent 3cb03b888f
commit e89efd7068
5 changed files with 9 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e-playwright/dashboard-new-layouts/dashboard-group-panels.spec.ts
-6
View File
@@ -416,9 +416,6 @@ test.describe(
// Go back to dashboard options
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
// Expand layouts section
await page.getByLabel('Expand Group layout category').click();
// Select tabs layout
await page.getByLabel('layout-selection-option-Tabs').click();
@@ -757,9 +754,6 @@ test.describe(
// Go back to dashboard options
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
// Expand layouts section
await page.getByLabel('Expand Group layout category').click();
// Select rows layout
await page.getByLabel('layout-selection-option-Rows').click();
e2e-playwright/dashboard-new-layouts/dashboards-panel-layouts.spec.ts
-9
View File
@@ -33,7 +33,6 @@ test.describe(
).toHaveCount(3);
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('layout-selection-option-Auto grid').click();
await expect(
@@ -65,8 +64,6 @@ test.describe(
).toHaveCount(3);
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('layout-selection-option-Auto grid').click();
// Get initial positions - standard width should have panels on different rows
@@ -127,8 +124,6 @@ test.describe(
).toHaveCount(3);
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('layout-selection-option-Auto grid').click();
await dashboardPage
@@ -186,7 +181,6 @@ test.describe(
).toHaveCount(3);
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('layout-selection-option-Auto grid').click();
await dashboardPage
@@ -222,7 +216,6 @@ test.describe(
).toHaveCount(3);
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('layout-selection-option-Auto grid').click();
const regularRowHeight = await getPanelHeight(dashboardPage, selectors);
@@ -278,7 +271,6 @@ test.describe(
).toHaveCount(3);
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('layout-selection-option-Auto grid').click();
const regularRowHeight = await getPanelHeight(dashboardPage, selectors);
@@ -336,7 +328,6 @@ test.describe(
).toHaveCount(3);
await dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.Sidebar.optionsButton).click();
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('layout-selection-option-Auto grid').click();
// Set narrow column width first to ensure panels fit horizontally
e2e-playwright/dashboard-new-layouts/dashboards-repeats-auto-grid.spec.ts
-1
View File
@@ -464,6 +464,5 @@ test.describe(
);
async function switchToAutoGrid(page: Page) {
await page.getByLabel('Expand Panel layout category').click();
await page.getByLabel('layout-selection-option-Auto grid').click();
}
public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx
+8 -37
View File
@@ -66,7 +66,7 @@ export function DashboardLayoutSelector({ layoutManager }: Props) {
});
return (
<Box paddingBottom={2} display="flex" grow={1} alignItems="center">
<Box paddingBottom={2} display="flex" grow={1} alignItems="stretch" gap={2} direction={'column'}>
<RadioButtonGroup
fullWidth
value={layoutManager.descriptor}
@@ -79,21 +79,13 @@ export function DashboardLayoutSelector({ layoutManager }: Props) {
}
export function useLayoutCategory(layoutManager: DashboardLayoutManager) {
return useMemo(() => {
const isGridLayout = layoutManager.descriptor.isGridLayout;
const groupLayout = new OptionsPaneCategoryDescriptor({
title: t('dashboard.layout.common.group-layout', 'Group layout'),
id: 'dash-group-layout',
isOpenDefault: false,
const layout = new OptionsPaneCategoryDescriptor({
title: t('dashboard.layout.common.layout', 'Layout'),
id: 'layout',
isOpenDefault: true,
});
const gridLayout = new OptionsPaneCategoryDescriptor({
title: t('dashboard.layout.common.panel-layout', 'Panel layout'),
id: 'dash-grid-layout',
isOpenDefault: false,
});
gridLayout.addItem(
layout.addItem(
new OptionsPaneItemDescriptor({
title: '',
id: 'dash-grid-layout-option',
@@ -102,33 +94,12 @@ export function useLayoutCategory(layoutManager: DashboardLayoutManager) {
})
);
if (isGridLayout) {
groupLayout.props.disabledText = t(
'dashboard.layout.common.group-layout-disabled',
'No groups exists on this level'
);
} else {
groupLayout.addItem(
new OptionsPaneItemDescriptor({
title: '',
id: 'dash-group-layout-option',
skipField: true,
render: () => <DashboardLayoutSelector layoutManager={layoutManager} />,
})
);
gridLayout.props.disabledText = t(
'dashboard.layout.common.panel-layout-disabled',
'Select a row or tab to change panel layout options'
);
}
if (layoutManager.getOptions) {
for (const option of layoutManager.getOptions()) {
gridLayout.addItem(option);
layout.addItem(option);
}
}
return [groupLayout, gridLayout];
return [layout];
}, [layoutManager]);
}
public/locales/en-US/grafana.json
+1 -4
View File
@@ -5085,10 +5085,7 @@
"copy-or-duplicate": "Copy or Duplicate",
"delete": "Delete",
"duplicate": "Duplicate",
"group-layout": "Group layout",
"group-layout-disabled": "No groups exists on this level",
"panel-layout": "Panel layout",
"panel-layout-disabled": "Select a row or tab to change panel layout options"
"layout": "Layout"
},
"continue": "Continue",
"ungroup-nested-text": "This will ungroup all nested groups.",