Change the scale factor when upgrading panels with margins (#20684) (#20726)

* Change the scale factor when upgrading panels with margins

* Add test for dashboard_grid_container with and without margins

src/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js

@@ -146,7 +146,7 @@ export class DashboardGrid extends React.Component {
       }
 
       if (panelVersion.major < 6 || (panelVersion.major === 6 && panelVersion.minor < 3)) {
-        PanelUtils.convertPanelDataPre_6_3(panel);
+        PanelUtils.convertPanelDataPre_6_3(panel, this.props.useMargins);
       }
 
       return panel.gridData;

src/core_plugins/kibana/public/dashboard/grid/dashboard_grid_container.test.js

@@ -26,7 +26,7 @@ import sizeMe from 'react-sizeme';
 import { getEmbeddableFactoryMock } from '../__tests__';
 import { store } from '../../store';
 import { DashboardGridContainer } from './dashboard_grid_container';
-import { updatePanels, updateTimeRange } from '../actions';
+import { updatePanels, updateTimeRange, updateUseMargins } from '../actions';
 
 jest.mock('ui/chrome', () => ({ getKibanaVersion: () => '6.3.0' }), { virtual: true });
 
@@ -92,6 +92,7 @@ test('loads old panel data in the right order', () => {
   ];
 
   store.dispatch(updatePanels(panelData));
+  store.dispatch(updateUseMargins(false));
 
   const grid = mount(<Provider store={store}><DashboardGridContainer {...getProps()} /></Provider>);
 
@@ -105,3 +106,39 @@ test('loads old panel data in the right order', () => {
 
   grid.unmount();
 });
+
+test('loads old panel data in the right order with margins', () => {
+  const panelData = [
+    createOldPanelData(3, 'foo1', 1, 2, 2, 1),
+    createOldPanelData(5, 'foo2', 1, 2, 2, 2),
+    createOldPanelData(9, 'foo3', 1, 2, 2, 3),
+    createOldPanelData(11, 'foo4', 1, 2, 2, 4),
+    createOldPanelData(1, 'foo5', 1, 2, 2, 5),
+    createOldPanelData(7, 'foo6', 1, 2, 2, 6),
+    createOldPanelData(4, 'foo7', 6, 3, 2, 7),
+    createOldPanelData(1, 'foo8', 8, 3, 2, 8),
+    createOldPanelData(10, 'foo9', 8, 3, 2, 9),
+    createOldPanelData(10, 'foo10', 6, 3, 2, 10),
+    createOldPanelData(4, 'foo11', 8, 3, 2, 11),
+    createOldPanelData(7, 'foo12', 8, 3, 2, 12),
+    createOldPanelData(1, 'foo13', 6, 3, 2, 13),
+    createOldPanelData(7, 'foo14', 6, 3, 2, 14),
+    createOldPanelData(5, 'foo15', 3, 6, 3, 15),
+    createOldPanelData(1, 'foo17', 3, 4, 3, 16)
+  ];
+
+  store.dispatch(updatePanels(panelData));
+  store.dispatch(updateUseMargins(true));
+
+  const grid = mount(<Provider store={store}><DashboardGridContainer {...getProps()} /></Provider>);
+
+  const panels = store.getState().dashboard.panels;
+  expect(Object.keys(panels).length).toBe(16);
+
+  const foo8Panel = _.find(panels, panel => panel.id === 'foo8');
+  expect(foo8Panel.row).toBe(undefined);
+  expect(foo8Panel.gridData.y).toBe(28);
+  expect(foo8Panel.gridData.x).toBe(0);
+
+  grid.unmount();
+});

src/core_plugins/kibana/public/dashboard/panel/panel_utils.js

@@ -22,6 +22,7 @@ import { DEFAULT_PANEL_WIDTH, DEFAULT_PANEL_HEIGHT } from '../dashboard_constant
 import chrome from 'ui/chrome';
 
 const PANEL_HEIGHT_SCALE_FACTOR = 5;
+const PANEL_HEIGHT_SCALE_FACTOR_WITH_MARGINS = 4;
 const PANEL_WIDTH_SCALE_FACTOR = 4;
 
 export class PanelUtils {
@@ -55,17 +56,20 @@ export class PanelUtils {
   // 1) decrease column height from 100 to 20.
   // 2) increase rows from 12 to 48
   // Need to scale pre 6.3 panels so they maintain the same layout
-  static convertPanelDataPre_6_3(panel) { // eslint-disable-line camelcase
+  static convertPanelDataPre_6_3(panel, useMargins) { // eslint-disable-line camelcase
     ['w', 'x', 'h', 'y'].forEach(key => {
       if (!_.has(panel.gridData, key)) {
         throw new Error(`Unable to migrate panel data for "6.3.0" backwards compatibility, panel does not contain expected field: ${key}`);
       }
     });
 
+    // see https://github.com/elastic/kibana/issues/20635 on why the scale factor changes when margins are being used
+    const heightScaleFactor = useMargins ? PANEL_HEIGHT_SCALE_FACTOR_WITH_MARGINS : PANEL_HEIGHT_SCALE_FACTOR;
+
     panel.gridData.w = panel.gridData.w * PANEL_WIDTH_SCALE_FACTOR;
     panel.gridData.x = panel.gridData.x * PANEL_WIDTH_SCALE_FACTOR;
-    panel.gridData.h = panel.gridData.h * PANEL_HEIGHT_SCALE_FACTOR;
-    panel.gridData.y = panel.gridData.y * PANEL_HEIGHT_SCALE_FACTOR;
+    panel.gridData.h = panel.gridData.h * heightScaleFactor;
+    panel.gridData.y = panel.gridData.y * heightScaleFactor;
     panel.version = chrome.getKibanaVersion();
 
     return panel;

src/core_plugins/kibana/public/dashboard/panel/panel_utils.test.js

@@ -63,3 +63,21 @@ test('convertPanelDataPre_6_3 scales panel dimensions', () => {
   expect(updatedPanel.gridData.y).toBe(25);
   expect(updatedPanel.version).toBe('6.3.0');
 });
+
+test('convertPanelDataPre_6_3 with margins scales panel dimensions', () => {
+  const oldPanel = {
+    gridData: {
+      h: 3,
+      w: 7,
+      x: 2,
+      y: 5,
+    },
+    version: '6.2.0'
+  };
+  const updatedPanel = PanelUtils.convertPanelDataPre_6_3(oldPanel, true);
+  expect(updatedPanel.gridData.w).toBe(28);
+  expect(updatedPanel.gridData.h).toBe(12);
+  expect(updatedPanel.gridData.x).toBe(8);
+  expect(updatedPanel.gridData.y).toBe(20);
+  expect(updatedPanel.version).toBe('6.3.0');
+});