repeat panel: minor refactor

public/app/features/dashboard/dashboard_model.ts

@@ -342,7 +342,6 @@ export class DashboardModel {
     let minWidth = panel.minSpan || 6;
     let xPos = 0;
     let yPos = panel.gridPos.y;
-    let yOffset = 0;
 
     for (let index = 0; index < selectedOptions.length; index++) {
       let option = selectedOptions[index];
@@ -353,11 +352,10 @@ export class DashboardModel {
       copy.scopedVars[variable.name] = option;
 
       if (panel.repeatDirection === REPEAT_DIR_VERTICAL) {
-        copy.gridPos.y = yPos;
-        yPos += copy.gridPos.h;
         if (index > 0) {
-          yOffset += copy.gridPos.h;
+          yPos += copy.gridPos.h;
         }
+        copy.gridPos.y = yPos;
       } else {
         // set width based on how many are selected
         // assumed the repeated panels should take up full row width
@@ -371,12 +369,12 @@ export class DashboardModel {
         if (xPos + copy.gridPos.w > GRID_COLUMN_COUNT) {
           xPos = 0;
           yPos += copy.gridPos.h;
-          yOffset += copy.gridPos.h;
         }
       }
     }
 
     // Update gridPos for panels below
+    let yOffset = yPos - panel.gridPos.y;
     if (yOffset > 0) {
       let panelBelowIndex = panelIndex + selectedOptions.length;
       for (let i = panelBelowIndex; i < this.panels.length; i++) {

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

@@ -184,18 +184,8 @@ describe('given dashboard with row repeat and panel repeat in horizontal directi
   beforeEach(() => {
     dashboardJSON = {
       panels: [
-        {
-          id: 1,
-          type: 'row',
-          repeat: 'region',
-          gridPos: { x: 0, y: 0, h: 1, w: 24 },
-        },
-        {
-          id: 2,
-          type: 'graph',
-          repeat: 'app',
-          gridPos: { x: 0, y: 1, h: 2, w: 6 },
-        },
+        { id: 1, type: 'row', repeat: 'region', gridPos: { x: 0, y: 0, h: 1, w: 24 } },
+        { id: 2, type: 'graph', repeat: 'app', gridPos: { x: 0, y: 1, h: 2, w: 6 } },
       ],
       templating: {
         list: [
@@ -250,21 +240,21 @@ describe('given dashboard with row repeat and panel repeat in horizontal directi
   });
 
   it('should be placed in their places', function() {
-    expect(dashboard.panels[0].gridPos).toMatchObject({ x: 0, y: 0, h: 1, w: 24 });
+    expect(dashboard.panels[0].gridPos).toMatchObject({ x: 0, y: 0, h: 1, w: 24 }); // 1st row
 
     expect(dashboard.panels[1].gridPos).toMatchObject({ x: 0, y: 1, h: 2, w: 6 });
     expect(dashboard.panels[2].gridPos).toMatchObject({ x: 6, y: 1, h: 2, w: 6 });
     expect(dashboard.panels[3].gridPos).toMatchObject({ x: 12, y: 1, h: 2, w: 6 });
     expect(dashboard.panels[4].gridPos).toMatchObject({ x: 18, y: 1, h: 2, w: 6 });
-    expect(dashboard.panels[5].gridPos).toMatchObject({ x: 0, y: 3, h: 2, w: 6 });
+    expect(dashboard.panels[5].gridPos).toMatchObject({ x: 0, y: 3, h: 2, w: 6 }); // next row
     expect(dashboard.panels[6].gridPos).toMatchObject({ x: 6, y: 3, h: 2, w: 6 });
 
     expect(dashboard.panels[7].gridPos).toMatchObject({ x: 0, y: 5, h: 1, w: 24 });
 
-    expect(dashboard.panels[8].gridPos).toMatchObject({ x: 0, y: 6, h: 2, w: 6 });
+    expect(dashboard.panels[8].gridPos).toMatchObject({ x: 0, y: 6, h: 2, w: 6 }); // 2nd row
     expect(dashboard.panels[9].gridPos).toMatchObject({ x: 6, y: 6, h: 2, w: 6 });
     expect(dashboard.panels[10].gridPos).toMatchObject({ x: 12, y: 6, h: 2, w: 6 });
-    expect(dashboard.panels[11].gridPos).toMatchObject({ x: 18, y: 6, h: 2, w: 6 });
+    expect(dashboard.panels[11].gridPos).toMatchObject({ x: 18, y: 6, h: 2, w: 6 }); // next row
     expect(dashboard.panels[12].gridPos).toMatchObject({ x: 0, y: 8, h: 2, w: 6 });
     expect(dashboard.panels[13].gridPos).toMatchObject({ x: 6, y: 8, h: 2, w: 6 });
   });