From cffbb6afd59a61032365d5cef1731f25f736a7d3 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Fri, 26 Jan 2018 11:24:56 +0300
Subject: [PATCH] fix vertical panel repeat (#10619)

---
 .../app/features/dashboard/dashboard_model.ts |  8 +++++
 .../features/dashboard/specs/repeat.jest.ts   | 34 ++++++-------------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts
index 072b38fba22..6c291c3b69a 100644
--- a/public/app/features/dashboard/dashboard_model.ts
+++ b/public/app/features/dashboard/dashboard_model.ts
@@ -354,6 +354,14 @@ export class DashboardModel {
       if (panel.repeatDirection === REPEAT_DIR_VERTICAL) {
         copy.gridPos.y = yPos;
         yPos += copy.gridPos.h;
+
+        // Update gridPos for panels below
+        let panelBelowIndex = panelIndex + index + 1;
+        for (let i = panelBelowIndex; i < this.panels.length; i++) {
+          if (this.panels[i].gridPos.y < yPos) {
+            this.panels[i].gridPos.y += copy.gridPos.h;
+          }
+        }
       } else {
         // set width based on how many are selected
         // assumed the repeated panels should take up full row width
diff --git a/public/app/features/dashboard/specs/repeat.jest.ts b/public/app/features/dashboard/specs/repeat.jest.ts
index fbf1f836191..e05162dc69f 100644
--- a/public/app/features/dashboard/specs/repeat.jest.ts
+++ b/public/app/features/dashboard/specs/repeat.jest.ts
@@ -142,12 +142,9 @@ describe('given dashboard with panel repeat in vertical direction', function() {
   beforeEach(function() {
     dashboard = new DashboardModel({
       panels: [
-        {
-          id: 2,
-          repeat: 'apps',
-          repeatDirection: 'v',
-          gridPos: { x: 5, y: 0, h: 2, w: 8 },
-        },
+        { id: 1, type: 'row', gridPos: { x: 0, y: 0, h: 1, w: 24 } },
+        { id: 2, repeat: 'apps', repeatDirection: 'v', gridPos: { x: 5, y: 1, h: 2, w: 8 } },
+        { id: 3, type: 'row', gridPos: { x: 0, y: 3, h: 1, w: 24 } },
       ],
       templating: {
         list: [
@@ -171,24 +168,13 @@ describe('given dashboard with panel repeat in vertical direction', function() {
   });
 
   it('should place on items on top of each other and keep witdh', function() {
-    expect(dashboard.panels[0].gridPos).toMatchObject({
-      x: 5,
-      y: 0,
-      h: 2,
-      w: 8,
-    });
-    expect(dashboard.panels[1].gridPos).toMatchObject({
-      x: 5,
-      y: 2,
-      h: 2,
-      w: 8,
-    });
-    expect(dashboard.panels[2].gridPos).toMatchObject({
-      x: 5,
-      y: 4,
-      h: 2,
-      w: 8,
-    });
+    expect(dashboard.panels[0].gridPos).toMatchObject({ x: 0, y: 0, h: 1, w: 24 }); // first row
+
+    expect(dashboard.panels[1].gridPos).toMatchObject({ x: 5, y: 1, h: 2, w: 8 });
+    expect(dashboard.panels[2].gridPos).toMatchObject({ x: 5, y: 3, h: 2, w: 8 });
+    expect(dashboard.panels[3].gridPos).toMatchObject({ x: 5, y: 5, h: 2, w: 8 });
+
+    expect(dashboard.panels[4].gridPos).toMatchObject({ x: 0, y: 7, h: 1, w: 24 }); // last row
   });
 });