Improve dashboard grid layout migration WIP (#9943)

* grid: fix small panels migration and make panel height closer to row height

* grid: migrate rows

* grid: increase min panel height

* grid: fix panel placement for complex layouts

* dashboard migration: refactor

* dashboard migration: add tests for grid layout

* dashboard: fix complex layout migration

* dashboard migration fix: fill current row if it possible

* test: fix karma tests by setting default panel span

* dashboard: fix migration when panel height more than row height

* dashboard: fix migration for collapsed rows

* grid: add all rows if even one collapsed or titled row is present

public/app/core/constants.ts

@@ -4,4 +4,6 @@ export const GRID_CELL_VMARGIN = 10;
 export const GRID_COLUMN_COUNT = 24;
 export const GRID_COLUMN_COUNT = 24;
 export const REPEAT_DIR_VERTICAL = 'v';
 export const REPEAT_DIR_VERTICAL = 'v';
 
 
-
+export const DEFAULT_PANEL_SPAN = 4;
+export const DEFAULT_ROW_HEIGHT = 250;
+export const MIN_PANEL_HEIGHT = GRID_CELL_HEIGHT * 3;

public/app/features/dashboard/specs/dashboard_model.jest.ts

@@ -84,137 +84,6 @@ describe('DashboardModel', function() {
     });
     });
   });
   });
 
 
-  describe('when creating dashboard with old schema', function() {
-    var model;
-    var graph;
-    var singlestat;
-    var table;
-
-    beforeEach(function() {
-      model = new DashboardModel({
-        services: { filter: { time: { from: 'now-1d', to: 'now' }, list: [{}] } },
-        pulldowns: [
-          { type: 'filtering', enable: true },
-          { type: 'annotations', enable: true, annotations: [{ name: 'old' }] },
-        ],
-        panels: [
-          {
-            type: 'graph',
-            legend: true,
-            aliasYAxis: { test: 2 },
-            y_formats: ['kbyte', 'ms'],
-            grid: {
-              min: 1,
-              max: 10,
-              rightMin: 5,
-              rightMax: 15,
-              leftLogBase: 1,
-              rightLogBase: 2,
-              threshold1: 200,
-              threshold2: 400,
-              threshold1Color: 'yellow',
-              threshold2Color: 'red',
-            },
-            leftYAxisLabel: 'left label',
-            targets: [{ refId: 'A' }, {}],
-          },
-          {
-            type: 'singlestat',
-            legend: true,
-            thresholds: '10,20,30',
-            aliasYAxis: { test: 2 },
-            grid: { min: 1, max: 10 },
-            targets: [{ refId: 'A' }, {}],
-          },
-          {
-            type: 'table',
-            legend: true,
-            styles: [{ thresholds: ['10', '20', '30'] }, { thresholds: ['100', '200', '300'] }],
-            targets: [{ refId: 'A' }, {}],
-          },
-        ],
-      });
-
-      graph = model.panels[0];
-      singlestat = model.panels[1];
-      table = model.panels[2];
-    });
-
-    it('should have title', function() {
-      expect(model.title).toBe('No Title');
-    });
-
-    it('should have panel id', function() {
-      expect(graph.id).toBe(1);
-    });
-
-    it('should move time and filtering list', function() {
-      expect(model.time.from).toBe('now-1d');
-      expect(model.templating.list[0].allFormat).toBe('glob');
-    });
-
-    it('graphite panel should change name too graph', function() {
-      expect(graph.type).toBe('graph');
-    });
-
-    it('single stat panel should have two thresholds', function() {
-      expect(singlestat.thresholds).toBe('20,30');
-    });
-
-    it('queries without refId should get it', function() {
-      expect(graph.targets[1].refId).toBe('B');
-    });
-
-    it('update legend setting', function() {
-      expect(graph.legend.show).toBe(true);
-    });
-
-    it('move aliasYAxis to series override', function() {
-      expect(graph.seriesOverrides[0].alias).toBe('test');
-      expect(graph.seriesOverrides[0].yaxis).toBe(2);
-    });
-
-    it('should move pulldowns to new schema', function() {
-      expect(model.annotations.list[1].name).toBe('old');
-    });
-
-    it('table panel should only have two thresholds values', function() {
-      expect(table.styles[0].thresholds[0]).toBe('20');
-      expect(table.styles[0].thresholds[1]).toBe('30');
-      expect(table.styles[1].thresholds[0]).toBe('200');
-      expect(table.styles[1].thresholds[1]).toBe('300');
-    });
-
-    it('graph grid to yaxes options', function() {
-      expect(graph.yaxes[0].min).toBe(1);
-      expect(graph.yaxes[0].max).toBe(10);
-      expect(graph.yaxes[0].format).toBe('kbyte');
-      expect(graph.yaxes[0].label).toBe('left label');
-      expect(graph.yaxes[0].logBase).toBe(1);
-      expect(graph.yaxes[1].min).toBe(5);
-      expect(graph.yaxes[1].max).toBe(15);
-      expect(graph.yaxes[1].format).toBe('ms');
-      expect(graph.yaxes[1].logBase).toBe(2);
-
-      expect(graph.grid.rightMax).toBe(undefined);
-      expect(graph.grid.rightLogBase).toBe(undefined);
-      expect(graph.y_formats).toBe(undefined);
-    });
-
-    it('dashboard schema version should be set to latest', function() {
-      expect(model.schemaVersion).toBe(16);
-    });
-
-    it('graph thresholds should be migrated', function() {
-      expect(graph.thresholds.length).toBe(2);
-      expect(graph.thresholds[0].op).toBe('gt');
-      expect(graph.thresholds[0].value).toBe(200);
-      expect(graph.thresholds[0].fillColor).toBe('yellow');
-      expect(graph.thresholds[1].value).toBe(400);
-      expect(graph.thresholds[1].fillColor).toBe('red');
-    });
-  });
-
   describe('Given editable false dashboard', function() {
   describe('Given editable false dashboard', function() {
     var model;
     var model;