IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-01 04:59:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactoring of panel manipulation, moved to dashboard model

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-08-13 16:35:34 +02:00
parent 436f6bda3e
commit 56269758c4
7 changed files with 133 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/controllers/row.js
View File

@ -32,36 +32,13 @@ function (angular, app, _) {
}
};
$scope.rowSpan = function(row) {
return _.reduce(row.panels, function(p,v) {
return p + v.span;
},0);
};
// This can be overridden by individual panels
// This can be overridden by individual panels
$scope.close_edit = function() {
$scope.$broadcast('render');
};
$scope.add_panel = function(panel) {
var rowSpan = $scope.rowSpan($scope.row);
var panelCount = $scope.row.panels.length;
var space = (12 - rowSpan) - panel.span;
// try to make room of there is no space left
if (space <= 0) {
if (panelCount === 1) {
$scope.row.panels[0].span = 6;
panel.span = 6;
}
else if (panelCount === 2) {
$scope.row.panels[0].span = 4;
$scope.row.panels[1].span = 4;
panel.span = 4;
}
}
$scope.row.panels.push(panel);
$scope.dashboard.add_panel(panel, $scope.row);
};
$scope.delete_row = function() {
@ -100,45 +77,17 @@ function (angular, app, _) {
};
$scope.duplicatePanel = function(panel, row) {
row = row || $scope.row;
var currentRowSpan = $scope.rowSpan(row);
if (currentRowSpan <= 9) {
row.panels.push(angular.copy(panel));
}
else {
var rowsList = $scope.dashboard.rows;
var rowIndex = _.indexOf(rowsList, row);
if (rowIndex === rowsList.length - 1) {
var newRow = angular.copy($scope.row);
newRow.panels = [];
$scope.dashboard.rows.push(newRow);
$scope.duplicatePanel(panel, newRow);
}
else {
$scope.duplicatePanel(panel, rowsList[rowIndex+1]);
}
}
$scope.dashboard.duplicatePanel(panel, row || $scope.row);
};
$scope.reset_panel = function(type) {
var
defaultSpan = 12,
_as = 12-$scope.rowSpan($scope.row);
var defaultSpan = 12;
var _as = 12 - $scope.dashboard.rowSpan($scope.row);
$scope.panel = {
error : false,
/** @scratch /panels/1
* span:: A number, 1-12, that describes the width of the panel.
*/
span : _as < defaultSpan && _as > 0 ? _as : defaultSpan,
/** @scratch /panels/1
* editable:: Enable or disable the edit button the the panel
*/
editable: true,
/** @scratch /panels/1
* type:: The type of panel this object contains. Each panel type will require additional
* properties. See the panel types list to the right.
*/
type : type
};
@ -155,10 +104,6 @@ function (angular, app, _) {
$scope.row.height = fixRowHeight($scope.row.height);
};
/** @scratch /panels/2
* --
*/
$scope.init();
});

2
src/app/partials/dashboard.html
View File

@ -105,7 +105,7 @@
</div>
</div>
<div ng-show="rowSpan(row) < 10 && dashboard.$$panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
<div ng-show="dashboard.rowSpan(row) < 10 && dashboard.$$panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
</div>
<div class="clearfix"></div>

4
src/app/partials/roweditor.html
View File

@ -27,7 +27,7 @@
<thead>
<th>Title</th>
<th>Type</th>
<th>Span <span class="small">({{rowSpan(row)}}/12)</span></th>
<th>Span <span class="small">({{dashboard.rowSpan(row)}}/12)</span></th>
<th>Delete</th>
<th>Move</th>
<th></th>
@ -49,7 +49,7 @@
<h4>Select Panel Type</h4>
<form class="form-inline">
<select class="input-medium" ng-model="panel.type" ng-options="panelType for panelType in availablePanels|stringSort"></select>
<small ng-show="rowSpan(row) > 11">
<small ng-show="dashboard.rowSpan(row) > 11">
Note: This row is full, new panels will wrap to a new line. You should add another row.
</small>
</form>

67
src/app/services/dashboard/dashboardSrv.js
View File

@ -49,6 +49,65 @@ function (angular, $, kbn, _) {
var p = DashboardModel.prototype;
p.getNextPanelId = function() {
var i, j, row, panel, max = 0;
for (i = 0; i < this.rows.length; i++) {
row = this.rows[i];
for (j = 0; j < row.panels.length; j++) {
panel = row.panels[j];
if (panel.id > max) { max = panel.id; }
}
}
return max + 1;
};
p.rowSpan = function(row) {
return _.reduce(row.panels, function(p,v) {
return p + v.span;
},0);
};
p.add_panel = function(panel, row) {
var rowSpan = this.rowSpan(row);
var panelCount = row.panels.length;
var space = (12 - rowSpan) - panel.span;
panel.id = this.getNextPanelId();
// try to make room of there is no space left
if (space <= 0) {
if (panelCount === 1) {
row.panels[0].span = 6;
panel.span = 6;
}
else if (panelCount === 2) {
row.panels[0].span = 4;
row.panels[1].span = 4;
panel.span = 4;
}
}
row.panels.push(panel);
};
p.duplicatePanel = function(panel, row) {
var rowIndex = _.indexOf(this.rows, row);
var newPanel = angular.copy(panel);
newPanel.id = this.getNextPanelId();
while(rowIndex < this.rows.length) {
var currentRow = this.rows[rowIndex];
if (this.rowSpan(currentRow) <= 9) {
currentRow.panels.push(newPanel);
return;
}
rowIndex++;
}
var newRow = angular.copy(row);
newRow.panels = [newPanel];
this.rows.push(newRow);
};
p.emit_refresh = function() {
$rootScope.$broadcast('refresh');
};
@ -86,13 +145,15 @@ function (angular, $, kbn, _) {
// Version 3 schema changes
// ensure panel ids
var panelId = 1;
var maxId = this.getNextPanelId();
for (i = 0; i < this.rows.length; i++) {
row = this.rows[i];
for (j = 0; j < row.panels.length; j++) {
panel = row.panels[j];
panel.id = panelId;
panelId += 1;
if (!panel.id) {
panel.id = maxId;
maxId += 1;
}
}
}

62
src/test/specs/dashboardSrv-specs.js
View File

@ -7,7 +7,6 @@ define([
var model;
beforeEach(module('grafana.services'));
beforeEach(inject(function(dashboardSrv) {
model = dashboardSrv.create({});
}));
@ -24,12 +23,71 @@ define([
});
describe('when getting next panel id', function() {
var model;
beforeEach(module('grafana.services'));
beforeEach(inject(function(dashboardSrv) {
model = dashboardSrv.create({
rows: [{ panels: [{ id: 5 }]}]
});
}));
it('should return max id + 1', function() {
expect(model.getNextPanelId()).to.be(6);
});
});
describe('row and panel manipulation', function() {
var dashboard;
beforeEach(module('grafana.services'));
beforeEach(inject(function(dashboardSrv) {
dashboard = dashboardSrv.create({});
}));
it('row span should sum spans', function() {
var spanLeft = dashboard.rowSpan({ panels: [{ span: 2 }, { span: 3 }] });
expect(spanLeft).to.be(5);
});
it('adding default should split span in half', function() {
dashboard.rows = [{ panels: [{ span: 12, id: 7 }] }];
dashboard.add_panel({span: 4}, dashboard.rows[0]);
expect(dashboard.rows[0].panels[0].span).to.be(6);
expect(dashboard.rows[0].panels[1].span).to.be(6);
expect(dashboard.rows[0].panels[1].id).to.be(8);
});
it('duplicate panel should try to add it to same row', function() {
var panel = { span: 4, attr: '123', id: 10 };
dashboard.rows = [{ panels: [panel] }];
dashboard.duplicatePanel(panel, dashboard.rows[0]);
expect(dashboard.rows[0].panels[0].span).to.be(4);
expect(dashboard.rows[0].panels[1].span).to.be(4);
expect(dashboard.rows[0].panels[1].attr).to.be('123');
expect(dashboard.rows[0].panels[1].id).to.be(11);
});
it('duplicate should add row if there is no space left', function() {
var panel = { span: 12, attr: '123' };
dashboard.rows = [{ panels: [panel] }];
dashboard.duplicatePanel(panel, dashboard.rows[0]);
expect(dashboard.rows[0].panels[0].span).to.be(12);
expect(dashboard.rows[0].panels.length).to.be(1);
expect(dashboard.rows[1].panels[0].attr).to.be('123');
});
});
describe('when creating dashboard with old schema', function() {
var model;
var graph;
beforeEach(module('grafana.services'));
beforeEach(inject(function(dashboardSrv) {
model = dashboardSrv.create({
services: { filter: { time: { from: 'now-1d', to: 'now'}, list: [1] }},

1
src/test/specs/helpers.js
View File

@ -26,6 +26,7 @@ define([
self.scope.panel = {};
self.scope.row = { panels:[] };
self.scope.filter = new FilterSrvStub();
self.scope.dashboard = {};
self.scope.dashboardViewState = new DashboardViewStateStub();
$rootScope.colors = [];

44
src/test/specs/row-ctrl-specs.js
View File

@ -12,50 +12,6 @@ define([
beforeEach(ctx.providePhase());
beforeEach(ctx.createControllerPhase('RowCtrl'));
describe('when getting rowSpan', function() {
it('should return sum of panels spans', function() {
var spanLeft = ctx.scope.rowSpan({ panels: [{ span: 2 }, { span: 3 }] });
expect(spanLeft).to.be(5);
});
});
describe('when adding panel to row with 12 span panel', function() {
it('should split span in half and add panel with defaults', function() {
ctx.scope.row = { panels: [{ span: 12 }] };
ctx.scope.add_panel_default('graph');
expect(ctx.scope.row.panels[0].span).to.be(6);
expect(ctx.scope.row.panels[1].span).to.be(6);
expect(ctx.scope.row.panels[1].type).to.be('graph');
});
});
describe('when duplicating panel', function() {
it('should try to add it to same row', function() {
var panel = { span: 4, attr: '123' };
ctx.scope.row = { panels: [panel] };
ctx.scope.duplicatePanel(panel, ctx.scope.row);
expect(ctx.scope.row.panels[0].span).to.be(4);
expect(ctx.scope.row.panels[1].span).to.be(4);
expect(ctx.scope.row.panels[1].attr).to.be('123');
});
});
describe('when duplicating panel', function() {
it('should add row if there is no space left', function() {
var panel = { span: 12, attr: '123' };
ctx.scope.row = { panels: [panel] };
ctx.scope.dashboard = { rows: [ctx.scope.row] };
ctx.scope.duplicatePanel(panel, ctx.scope.row);
expect(ctx.scope.row.panels[0].span).to.be(12);
expect(ctx.scope.row.panels.length).to.be(1);
expect(ctx.scope.dashboard.rows[1].panels[0].attr).to.be('123');
});
});
});
});