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

This commit is contained in:
Torkel Ödegaard 2015-04-27 18:37:39 +02:00
parent ca7aa294e0
commit 3044a74a52
4 changed files with 103 additions and 55 deletions

View File

@ -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, _) {
});
});

View File

@ -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',

View File

@ -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>

View File

@ -4,62 +4,114 @@ define([
], function() {
'use strict';
describe('dynamicDashboardSrv', function() {
var _dynamicDashboardSrv;
var _dashboardSrv;
function dynamicDashScenario(desc, func) {
beforeEach(module('grafana.services'));
describe(desc, function() {
var ctx = {};
beforeEach(inject(function(dynamicDashboardSrv, dashboardSrv) {
_dynamicDashboardSrv = dynamicDashboardSrv;
_dashboardSrv = dashboardSrv;
}));
ctx.setup = function (setupFunc) {
describe('given dashboard with panel repeat', function() {
var model;
beforeEach(module('grafana.services'));
beforeEach(function() {
model = _dashboardSrv.create({
rows: [
{
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},
]
}]
}
}, {});
beforeEach(inject(function(dynamicDashboardSrv, dashboardSrv) {
ctx.dynamicDashboardSrv = dynamicDashboardSrv;
ctx.dashboardSrv = dashboardSrv;
_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'}]
});
it('should repeat panel one time', function() {
expect(model.rows[0].panels.length).to.be(2);
dash.templating.list.push({
name: 'apps',
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() {
expect(model.rows[0].panels[0].linked).to.be(undefined);
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 repeat panel one time', function() {
expect(ctx.rows[0].panels.length).to.be(2);
});
it('should set scopedVars on panels', function() {
expect(model.rows[0].panels[0].scopedVars.apps.value).to.be('se1');
expect(model.rows[0].panels[1].scopedVars.apps.value).to.be('se2');
});
it('should mark panel repeated', function() {
expect(ctx.rows[0].panels[0].linked).to.be(undefined);
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');
});
});
});