repeat panel: process repeats when row is expanding (#10712)

public/app/features/dashboard/dashboard_model.ts

@@ -279,6 +279,40 @@ export class DashboardModel {
     this.events.emit('repeats-processed');
     this.events.emit('repeats-processed');
   }
   }
 
 
+  cleanUpRowRepeats(rowPanels) {
+    let panelsToRemove = [];
+    for (let i = 0; i < rowPanels.length; i++) {
+      let panel = rowPanels[i];
+      if (!panel.repeat && panel.repeatPanelId) {
+        panelsToRemove.push(panel);
+      }
+    }
+    _.pull(rowPanels, ...panelsToRemove);
+    _.pull(this.panels, ...panelsToRemove);
+  }
+
+  processRowRepeats(row: PanelModel) {
+    if (this.snapshot || this.templating.list.length === 0) {
+      return;
+    }
+
+    let rowPanels = row.panels;
+    if (!row.collapsed) {
+      let rowPanelIndex = _.findIndex(this.panels, p => p.id === row.id);
+      rowPanels = this.getRowPanels(rowPanelIndex);
+    }
+
+    this.cleanUpRowRepeats(rowPanels);
+
+    for (let i = 0; i < rowPanels.length; i++) {
+      let panel = rowPanels[i];
+      if (panel.repeat) {
+        let panelIndex = _.findIndex(this.panels, p => p.id === panel.id);
+        this.repeatPanel(panel, panelIndex);
+      }
+    }
+  }
+
   getPanelRepeatClone(sourcePanel, valueIndex, sourcePanelIndex) {
   getPanelRepeatClone(sourcePanel, valueIndex, sourcePanelIndex) {
     // if first clone return source
     // if first clone return source
     if (valueIndex === 0) {
     if (valueIndex === 0) {
@@ -569,7 +603,7 @@ export class DashboardModel {
 
 
     if (row.collapsed) {
     if (row.collapsed) {
       row.collapsed = false;
       row.collapsed = false;
-      let hasRepeat = false;
+      let hasRepeat = _.some(row.panels, p => p.repeat);
 
 
       if (row.panels.length > 0) {
       if (row.panels.length > 0) {
         // Use first panel to figure out if it was moved or pushed
         // Use first panel to figure out if it was moved or pushed
@@ -590,10 +624,6 @@ export class DashboardModel {
           // update insert post and y max
           // update insert post and y max
           insertPos += 1;
           insertPos += 1;
           yMax = Math.max(yMax, panel.gridPos.y + panel.gridPos.h);
           yMax = Math.max(yMax, panel.gridPos.y + panel.gridPos.h);
-
-          if (panel.repeat) {
-            hasRepeat = true;
-          }
         }
         }
 
 
         const pushDownAmount = yMax - row.gridPos.y;
         const pushDownAmount = yMax - row.gridPos.y;
@@ -606,7 +636,7 @@ export class DashboardModel {
         row.panels = [];
         row.panels = [];
 
 
         if (hasRepeat) {
         if (hasRepeat) {
-          this.processRepeats();
+          this.processRowRepeats(row);
         }
         }
       }
       }
 
 

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

@@ -629,4 +629,23 @@ describe('given dashboard with row and panel repeat', () => {
       region: { text: 'reg2', value: 'reg2' },
       region: { text: 'reg2', value: 'reg2' },
     });
     });
   });
   });
+
+  it('should repeat panels when row is expanding', function() {
+    dashboard = new DashboardModel(dashboardJSON);
+    dashboard.processRepeats();
+
+    expect(dashboard.panels.length).toBe(6);
+
+    // toggle row
+    dashboard.toggleRow(dashboard.panels[0]);
+    dashboard.toggleRow(dashboard.panels[1]);
+    expect(dashboard.panels.length).toBe(2);
+
+    // change variable
+    dashboard.templating.list[1].current.value = ['se1', 'se2', 'se3'];
+
+    // toggle row back
+    dashboard.toggleRow(dashboard.panels[1]);
+    expect(dashboard.panels.length).toBe(4);
+  });
 });
 });