diff --git a/public/app/features/dashboard-scene/serialization/layoutSerializers/ResponsiveGridLayoutSerializer.ts b/public/app/features/dashboard-scene/serialization/layoutSerializers/ResponsiveGridLayoutSerializer.ts index 9159ca0943b..701da770fda 100644 --- a/public/app/features/dashboard-scene/serialization/layoutSerializers/ResponsiveGridLayoutSerializer.ts +++ b/public/app/features/dashboard-scene/serialization/layoutSerializers/ResponsiveGridLayoutSerializer.ts @@ -1,10 +1,13 @@ -import { DashboardV2Spec, ResponsiveGridLayoutItemKind } from '@grafana/schema/dist/esm/schema/dashboard/v2alpha0'; +import { + DashboardV2Spec, + defaultResponsiveGridLayoutSpec, + ResponsiveGridLayoutItemKind, +} from '@grafana/schema/dist/esm/schema/dashboard/v2alpha0'; import { ResponsiveGridItem } from '../../scene/layout-responsive-grid/ResponsiveGridItem'; import { ResponsiveGridLayout } from '../../scene/layout-responsive-grid/ResponsiveGridLayout'; import { AUTO_GRID_DEFAULT_COLUMN_WIDTH, - AUTO_GRID_DEFAULT_MAX_COLUMN_COUNT, AUTO_GRID_DEFAULT_ROW_HEIGHT, AutoGridColumnWidth, AutoGridRowHeight, @@ -20,14 +23,17 @@ import { buildLibraryPanel, buildVizPanel, getConditionalRendering } from './uti export class ResponsiveGridLayoutSerializer implements LayoutManagerSerializer { serialize(layoutManager: ResponsiveGridLayoutManager): DashboardV2Spec['layout'] { + const { maxColumnCount, fillScreen, columnWidth, rowHeight, layout } = layoutManager.state; + const defaults = defaultResponsiveGridLayoutSpec(); + return { kind: 'ResponsiveGridLayout', spec: { - maxColumnCount: layoutManager.state.maxColumnCount, - fillScreen: layoutManager.state.fillScreen, - ...serializeAutoGridColumnWidth(layoutManager.state.columnWidth), - ...serializeAutoGridRowHeight(layoutManager.state.rowHeight), - items: layoutManager.state.layout.state.children.map((child) => { + maxColumnCount, + fillScreen: fillScreen === defaults.fillScreen ? undefined : fillScreen, + ...serializeAutoGridColumnWidth(columnWidth), + ...serializeAutoGridRowHeight(rowHeight), + items: layout.state.children.map((child) => { if (!(child instanceof ResponsiveGridItem)) { throw new Error('Expected ResponsiveGridItem'); } @@ -68,6 +74,9 @@ export class ResponsiveGridLayoutSerializer implements LayoutManagerSerializer { throw new Error('Invalid layout kind'); } + const defaults = defaultResponsiveGridLayoutSpec(); + const { maxColumnCount, columnWidthMode, columnWidth, rowHeightMode, rowHeight, fillScreen } = layout.spec; + const children = layout.spec.items.map((item) => { const panel = elements[item.spec.element.name]; if (!panel) { @@ -81,20 +90,20 @@ export class ResponsiveGridLayoutSerializer implements LayoutManagerSerializer { }); }); + const columnWidthCombined = columnWidthMode === 'custom' ? columnWidth : columnWidthMode; + const rowHeightCombined = rowHeightMode === 'custom' ? rowHeight : rowHeightMode; + return new ResponsiveGridLayoutManager({ - maxColumnCount: layout.spec.maxColumnCount, - columnWidth: layout.spec.columnWidthMode === 'custom' ? layout.spec.columnWidth : layout.spec.columnWidthMode, - rowHeight: layout.spec.rowHeightMode === 'custom' ? layout.spec.rowHeight : layout.spec.rowHeightMode, - fillScreen: layout.spec.fillScreen, + maxColumnCount, + columnWidth: columnWidthCombined, + rowHeight: rowHeightCombined, + fillScreen: fillScreen ?? defaults.fillScreen, layout: new ResponsiveGridLayout({ templateColumns: getTemplateColumnsTemplate( - layout.spec.maxColumnCount ?? AUTO_GRID_DEFAULT_MAX_COLUMN_COUNT, - layout.spec.columnWidth ?? AUTO_GRID_DEFAULT_COLUMN_WIDTH - ), - autoRows: getAutoRowsTemplate( - layout.spec.rowHeight ?? AUTO_GRID_DEFAULT_ROW_HEIGHT, - layout.spec.fillScreen ?? false + maxColumnCount ?? defaults.maxColumnCount!, + columnWidthCombined ?? AUTO_GRID_DEFAULT_COLUMN_WIDTH ), + autoRows: getAutoRowsTemplate(rowHeightCombined ?? AUTO_GRID_DEFAULT_ROW_HEIGHT, fillScreen ?? false), children, }), }); diff --git a/public/app/features/dashboard-scene/serialization/layoutSerializers/RowsLayoutSerializer.test.ts b/public/app/features/dashboard-scene/serialization/layoutSerializers/RowsLayoutSerializer.test.ts index 82d24caefff..426a277a7a2 100644 --- a/public/app/features/dashboard-scene/serialization/layoutSerializers/RowsLayoutSerializer.test.ts +++ b/public/app/features/dashboard-scene/serialization/layoutSerializers/RowsLayoutSerializer.test.ts @@ -272,7 +272,7 @@ describe('serialization', () => { spec: { columnWidth: undefined, rowHeight: undefined, - fillScreen: false, + fillScreen: undefined, rowHeightMode: 'standard', columnWidthMode: 'standard', maxColumnCount: 4,