Use factors for max repeated panels per row

public/app/core/specs/factors.test.ts

@@ -0,0 +1,8 @@
+import getFactors from 'app/core/utils/factors';
+
+describe('factors', () => {
+  it('should return factors for 12', () => {
+    const factors = getFactors(12);
+    expect(factors).toEqual([1, 2, 3, 4, 6, 12]);
+  });
+});

public/app/core/utils/factors.ts

@@ -0,0 +1,5 @@
+// Returns the factors of a number
+// Example getFactors(12) -> [1, 2, 3, 4, 6, 12]
+export default function getFactors(num: number): number[] {
+  return Array.from(new Array(num + 1), (_, i) => i).filter(i => num % i === 0);
+}

public/app/features/dashboard/dashboard_migration.ts

@@ -9,6 +9,7 @@ import {
 } from 'app/core/constants';
 import { PanelModel } from './panel_model';
 import { DashboardModel } from './dashboard_model';
+import getFactors from 'app/core/utils/factors';
 
 export class DashboardMigrator {
   dashboard: DashboardModel;
@@ -371,7 +372,16 @@ export class DashboardMigrator {
     if (oldVersion < 17) {
       panelUpgrades.push(panel => {
         if (panel.minSpan) {
-          panel.maxPerRow = GRID_COLUMN_COUNT / panel.minSpan;
+          const max = GRID_COLUMN_COUNT / panel.minSpan;
+          const factors = getFactors(GRID_COLUMN_COUNT);
+          // find the best match compared to factors
+          // (ie. [1,2,3,4,6,12,24] for 24 columns)
+          panel.maxPerRow =
+            factors[
+              _.findIndex(factors, o => {
+                return o > max;
+              }) - 1
+            ];
         }
         delete panel.minSpan;
       });

public/app/features/panel/panel_ctrl.ts

@@ -5,6 +5,7 @@ import Remarkable from 'remarkable';
 import config from 'app/core/config';
 import { profiler } from 'app/core/core';
 import { Emitter } from 'app/core/core';
+import getFactors from 'app/core/utils/factors';
 import {
   duplicatePanel,
   copyPanel as copyPanelUtil,
@@ -12,7 +13,7 @@ import {
   sharePanel as sharePanelUtil,
 } from 'app/features/dashboard/utils/panel';
 
-import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
 
 export class PanelCtrl {
   panel: any;
@@ -32,6 +33,7 @@ export class PanelCtrl {
   events: Emitter;
   timing: any;
   loading: boolean;
+  maxPanelsPerRowOptions: number[];
 
   constructor($scope, $injector) {
     this.$injector = $injector;
@@ -92,6 +94,7 @@ export class PanelCtrl {
     if (!this.editModeInitiated) {
       this.editModeInitiated = true;
       this.events.emit('init-edit-mode', null);
+      this.maxPanelsPerRowOptions = getFactors(GRID_COLUMN_COUNT);
     }
   }