Fix variables values passing when both repeat rows and panels is used (#10488)

* dashboard: repeat rows and panels tests

* fix variable values passing when both repeat rows and panels is used

public/app/features/dashboard/dashboard_model.ts

@@ -230,10 +230,6 @@ export class DashboardModel {
   }
 
   cleanUpRepeats() {
-    this.processRepeats(true);
-  }
-
-  processRepeats(cleanUpOnly?: boolean) {
     if (this.snapshot || this.templating.list.length === 0) {
       return;
     }
@@ -248,11 +244,7 @@ export class DashboardModel {
 
     for (let i = 0; i < this.panels.length; i++) {
       let panel = this.panels[i];
-      if (panel.repeat) {
-        if (!cleanUpOnly) {
-          this.repeatPanel(panel, i);
-        }
-      } else if (panel.repeatPanelId && panel.repeatIteration !== this.iteration) {
+      if ((!panel.repeat || panel.repeatedByRow) && panel.repeatPanelId && panel.repeatIteration !== this.iteration) {
         panelsToRemove.push(panel);
       }
     }
@@ -264,6 +256,26 @@ export class DashboardModel {
     this.events.emit('repeats-processed');
   }
 
+  processRepeats(cleanUpOnly?: boolean) {
+    if (this.snapshot || this.templating.list.length === 0) {
+      return;
+    }
+
+    this.cleanUpRepeats();
+
+    this.iteration = (this.iteration || new Date().getTime()) + 1;
+
+    for (let i = 0; i < this.panels.length; i++) {
+      let panel = this.panels[i];
+      if (panel.repeat) {
+        this.repeatPanel(panel, i);
+      }
+    }
+
+    this.sortPanelsByGridPos();
+    this.events.emit('repeats-processed');
+  }
+
   getPanelRepeatClone(sourcePanel, valueIndex, sourcePanelIndex) {
     // if first clone return source
     if (valueIndex === 0) {
@@ -282,21 +294,21 @@ export class DashboardModel {
     return clone;
   }
 
-  getRowRepeatClone(sourcePanel, valueIndex, sourcePanelIndex) {
+  getRowRepeatClone(sourceRowPanel, valueIndex, sourcePanelIndex) {
     // if first clone return source
     if (valueIndex === 0) {
-      if (!sourcePanel.collapsed) {
+      if (!sourceRowPanel.collapsed) {
         let rowPanels = this.getRowPanels(sourcePanelIndex);
-        sourcePanel.panels = rowPanels;
+        sourceRowPanel.panels = rowPanels;
       }
-      return sourcePanel;
+      return sourceRowPanel;
     }
 
-    let clone = new PanelModel(sourcePanel.getSaveModel());
+    let clone = new PanelModel(sourceRowPanel.getSaveModel());
     // for row clones we need to figure out panels under row to clone and where to insert clone
     let rowPanels, insertPos;
-    if (sourcePanel.collapsed) {
-      rowPanels = _.cloneDeep(sourcePanel.panels);
+    if (sourceRowPanel.collapsed) {
+      rowPanels = _.cloneDeep(sourceRowPanel.panels);
       clone.panels = rowPanels;
       // insert copied row after preceding row
       insertPos = sourcePanelIndex + valueIndex;
@@ -333,7 +345,7 @@ export class DashboardModel {
       let copy;
 
       copy = this.getPanelRepeatClone(panel, index, panelIndex);
-      copy.scopedVars = {};
+      copy.scopedVars = copy.scopedVars || {};
       copy.scopedVars[variable.name] = option;
 
       if (panel.repeatDirection === REPEAT_DIR_VERTICAL) {
@@ -342,7 +354,6 @@ export class DashboardModel {
       } else {
         // set width based on how many are selected
         // assumed the repeated panels should take up full row width
-
         copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selectedOptions.length, minWidth);
         copy.gridPos.x = xPos;
         copy.gridPos.y = yPos;
@@ -363,7 +374,7 @@ export class DashboardModel {
     let yPos = panel.gridPos.y;
 
     function setScopedVars(panel, variableOption) {
-      panel.scopedVars = {};
+      panel.scopedVars = panel.scopedVars || {};
       panel.scopedVars[variable.name] = variableOption;
     }
 
@@ -381,7 +392,7 @@ export class DashboardModel {
         _.each(rowPanels, (rowPanel, i) => {
           setScopedVars(rowPanel, option);
           if (optionIndex > 0) {
-            this.updateRepeatedPanelIds(rowPanel);
+            this.updateRepeatedPanelIds(rowPanel, true);
           }
         });
         rowCopy.gridPos.y += optionIndex;
@@ -394,7 +405,7 @@ export class DashboardModel {
           setScopedVars(rowPanel, option);
           if (optionIndex > 0) {
             let cloneRowPanel = new PanelModel(rowPanel);
-            this.updateRepeatedPanelIds(cloneRowPanel);
+            this.updateRepeatedPanelIds(cloneRowPanel, true);
             // For exposed row additionally set proper Y grid position and add it to dashboard panels
             cloneRowPanel.gridPos.y += rowHeight * optionIndex;
             this.panels.splice(insertPos + i, 0, cloneRowPanel);
@@ -413,11 +424,15 @@ export class DashboardModel {
     }
   }
 
-  updateRepeatedPanelIds(panel: PanelModel) {
+  updateRepeatedPanelIds(panel: PanelModel, repeatedByRow?: boolean) {
     panel.repeatPanelId = panel.id;
     panel.id = this.getNextPanelId();
     panel.repeatIteration = this.iteration;
-    panel.repeat = null;
+    if (repeatedByRow) {
+      panel.repeatedByRow = true;
+    } else {
+      panel.repeat = null;
+    }
     return panel;
   }