Optimization and unit tests for panel and row repeat feature, #1888

public/app/features/dashboard/dynamicDashboardSrv.js

@@ -8,8 +8,6 @@ function (angular, _) {
   var module = angular.module('grafana.services');
 
   module.service('dynamicDashboardSrv', function()  {
-    var self = this;
-
     this.init = function(dashboard) {
       this.iteration = 0;
 
@@ -57,7 +55,7 @@ function (angular, _) {
       for (i = 0; i < dashboard.rows.length; i++) {
         row = dashboard.rows[i];
         if (row.linked) {
-          dashboard.rows = _.without(dashboard.rows, row);
+          dashboard.rows.splice(i, 1);
           i = i - 1;
         }
       }
@@ -75,7 +73,6 @@ function (angular, _) {
     };
 
     this.repeatRow = function(row, dashboard) {
-      console.log('repeat row');
       var variables = dashboard.templating.list;
       var variable = _.findWhere(variables, {name: row.repeat.replace('$', '')});
       if (!variable) {
@@ -95,13 +92,13 @@ function (angular, _) {
           copy.repeat = null;
           copy.linked = true;
 
+          dashboard.rows.push(copy);
+
           // set new panel ids
           for (i = 0; i < copy.panels.length; i++) {
-            panel = row.panels[i];
+            panel = copy.panels[i];
             panel.id = dashboard.getNextPanelId();
           }
-
-          dashboard.rows.push(copy);
         } else {
           copy = row;
         }
@@ -112,7 +109,6 @@ function (angular, _) {
           panel.scopedVars[variable.name] = option;
         }
       });
-
     };
 
     this.getRepeatPanel = function(sourcePanel, row) {
@@ -155,4 +151,3 @@ function (angular, _) {
   });
 
 });
-

public/app/panels/graph/module.js

@@ -24,6 +24,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
   });
 
   module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, panelHelper, $q) {
+    console.log('Graph: init: ' + $scope.panel.id);
 
     $scope.panelMeta = new PanelMeta({
       panelName: 'Graph',

public/app/partials/dashboard.html

@@ -79,7 +79,7 @@
 					</div>
 
 					<!-- Panels, draggable needs to be disabled in fullscreen because Firefox bug -->
-					<div ng-repeat="(name, panel) in row.panels" class="panel"
+					<div ng-repeat="(name, panel) in row.panels track by panel.id" class="panel"
 						ui-draggable="{{!dashboardViewState.fullscreen}}" drag="panel.id"
 						ui-on-Drop="onDrop($data, row, panel)"
 						drag-handle-class="drag-handle" panel-width>

public/test/specs/dynamicDashboardSrv-specs.js

@@ -4,62 +4,114 @@ define([
 ], function() {
   'use strict';
 
-  describe('dynamicDashboardSrv', function() {
+  function dynamicDashScenario(desc, func)  {
-    var _dynamicDashboardSrv;
-    var _dashboardSrv;
 
-    beforeEach(module('grafana.services'));
+    describe(desc, function() {
+      var ctx = {};
 
-    beforeEach(inject(function(dynamicDashboardSrv, dashboardSrv) {
+      ctx.setup = function (setupFunc) {
-      _dynamicDashboardSrv = dynamicDashboardSrv;
-      _dashboardSrv = dashboardSrv;
-    }));
 
-    describe('given dashboard with panel repeat', function() {
+        beforeEach(module('grafana.services'));
-      var model;
 
-      beforeEach(function() {
+        beforeEach(inject(function(dynamicDashboardSrv, dashboardSrv) {
-        model = _dashboardSrv.create({
+          ctx.dynamicDashboardSrv = dynamicDashboardSrv;
-          rows: [
+          ctx.dashboardSrv = dashboardSrv;
-            {
-              panels: [{id: 2, repeat: '$apps'}]
-            }
-          ],
-          templating: {
-            list: [{
-              name: 'apps',
-              current: {
-                text: 'se1, se2',
-                value: ['se1', 'se2']
-              },
-              options: [
-                {text: 'se1', value: 'se1', selected: true},
-                {text: 'se2', value: 'se2', selected: true},
-              ]
-            }]
-          }
-        }, {});
 
-        _dynamicDashboardSrv.init(model);
+          var model = {
+            rows: [],
+            templating: { list: [] }
+          };
+
+          setupFunc(model);
+          ctx.dash = ctx.dashboardSrv.create(model);
+          ctx.dynamicDashboardSrv.init(ctx.dash);
+          ctx.rows = ctx.dash.rows;
+
+        }));
+
+      };
+
+      func(ctx);
+
+    });
+  }
+
+  dynamicDashScenario('given dashboard with panel repeat', function(ctx) {
+    ctx.setup(function(dash) {
+      dash.rows.push({
+        panels: [{id: 2, repeat: '$apps'}]
       });
-
+      dash.templating.list.push({
-      it('should repeat panel one time', function() {
+        name: 'apps',
-        expect(model.rows[0].panels.length).to.be(2);
+        current: {
+          text: 'se1, se2',
+          value: ['se1', 'se2']
+        },
+        options: [
+          {text: 'se1', value: 'se1', selected: true},
+          {text: 'se2', value: 'se2', selected: true},
+        ]
       });
+    });
 
-      it('should mark panel repeated', function() {
+    it('should repeat panel one time', function() {
-        expect(model.rows[0].panels[0].linked).to.be(undefined);
+      expect(ctx.rows[0].panels.length).to.be(2);
-        expect(model.rows[0].panels[0].repeat).to.be('$apps');
+    });
-        expect(model.rows[0].panels[1].linked).to.be(true);
-        expect(model.rows[0].panels[1].repeat).to.be(null);
-      });
 
-      it('should set scopedVars on panels', function() {
+    it('should mark panel repeated', function() {
-        expect(model.rows[0].panels[0].scopedVars.apps.value).to.be('se1');
+      expect(ctx.rows[0].panels[0].linked).to.be(undefined);
-        expect(model.rows[0].panels[1].scopedVars.apps.value).to.be('se2');
+      expect(ctx.rows[0].panels[0].repeat).to.be('$apps');
-      });
+      expect(ctx.rows[0].panels[1].linked).to.be(true);
+      expect(ctx.rows[0].panels[1].repeat).to.be(null);
+    });
 
+    it('should set scopedVars on panels', function() {
+      expect(ctx.rows[0].panels[0].scopedVars.apps.value).to.be('se1');
+      expect(ctx.rows[0].panels[1].scopedVars.apps.value).to.be('se2');
     });
 
   });
+
+  dynamicDashScenario('given dashboard with row repeat', function(ctx) {
+    ctx.setup(function(dash) {
+      dash.rows.push({
+        repeat: '$servers',
+        panels: [{id: 2}]
+      });
+      dash.templating.list.push({
+        name: 'servers',
+        current: {
+          text: 'se1, se2',
+          value: ['se1', 'se2']
+        },
+        options: [
+          {text: 'se1', value: 'se1', selected: true},
+          {text: 'se2', value: 'se2', selected: true},
+        ]
+      });
+    });
+
+    it('should repeat row one time', function() {
+      expect(ctx.rows.length).to.be(2);
+    });
+
+    it('should keep panel ids on first row', function() {
+      expect(ctx.rows[0].panels[0].id).to.be(2);
+    });
+
+    it('should mark second row as repeated', function() {
+      expect(ctx.rows[0].linked).to.be(undefined);
+      expect(ctx.rows[0].repeat).to.be('$servers');
+      expect(ctx.rows[1].linked).to.be(true);
+      expect(ctx.rows[1].repeat).to.be(null);
+    });
+
+    it('should set scopedVars on row panels', function() {
+      expect(ctx.rows[0].panels[0].scopedVars.servers.value).to.be('se1');
+      expect(ctx.rows[1].panels[0].scopedVars.servers.value).to.be('se2');
+    });
+
+  });
+
+
 });