IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Final polish on repeat panel variable selection, #1888

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-04-30 10:47:51 +02:00
parent 3ee1ea28e1
commit 25ef49494b
4 changed files with 74 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/app/features/dashboard/dynamicDashboardSrv.js
View File

@ -11,29 +11,31 @@ function (angular, _) {
var self = this; var self = this;
this.init = function(dashboard) { this.init = function(dashboard) {
this.dashboard = dashboard;
this.iteration = new Date().getTime(); this.iteration = new Date().getTime();
this.process(dashboard);
this.handlePanelRepeats(dashboard);
this.handleRowRepeats(dashboard);
}; };
this.update = function(dashboard) { this.update = function(dashboard) {
this.dashboard = dashboard;
this.iteration = this.iteration + 1; this.iteration = this.iteration + 1;
this.process(dashboard);
this.handlePanelRepeats(dashboard);
this.handleRowRepeats(dashboard);
}; };
this.handlePanelRepeats = function(dashboard) { this.process = function(dashboard) {
if (dashboard.templating.list.length === 0) { return; }
this.dashboard = dashboard;
this.handlePanelRepeats();
this.handleRowRepeats();
};
this.handlePanelRepeats = function() {
var i, j, row, panel; var i, j, row, panel;
for (i = 0; i < dashboard.rows.length; i++) { for (i = 0; i < this.dashboard.rows.length; i++) {
row = dashboard.rows[i]; row = this.dashboard.rows[i];
for (j = 0; j < row.panels.length; j++) { for (j = 0; j < row.panels.length; j++) {
panel = row.panels[j]; panel = row.panels[j];
if (panel.repeat) { if (panel.repeat) {
this.repeatPanel(panel, row, dashboard); this.repeatPanel(panel, row);
} }
// clean up old left overs // clean up old left overs
else if (panel.repeatPanelId && panel.repeatIteration !== this.iteration) { else if (panel.repeatPanelId && panel.repeatIteration !== this.iteration) {
@ -44,16 +46,16 @@ function (angular, _) {
} }
}; };
this.handleRowRepeats = function(dashboard) { this.handleRowRepeats = function() {
var i, row; var i, row;
for (i = 0; i < dashboard.rows.length; i++) { for (i = 0; i < this.dashboard.rows.length; i++) {
row = dashboard.rows[i]; row = this.dashboard.rows[i];
if (row.repeat) { if (row.repeat) {
this.repeatRow(row, dashboard); this.repeatRow(row);
} }
// clean up old left overs // clean up old left overs
else if (row.repeatRowId && row.repeatIteration !== this.iteration) { else if (row.repeatRowId && row.repeatIteration !== this.iteration) {
dashboard.rows.splice(i, 1); this.dashboard.rows.splice(i, 1);
i = i - 1; i = i - 1;
} }
} }
@ -93,8 +95,8 @@ function (angular, _) {
return copy; return copy;
}; };
this.repeatRow = function(row, dashboard) { this.repeatRow = function(row) {
var variables = dashboard.templating.list; var variables = this.dashboard.templating.list;
var variable = _.findWhere(variables, {name: row.repeat.replace('$', '')}); var variable = _.findWhere(variables, {name: row.repeat.replace('$', '')});
if (!variable) { if (!variable) {
return; return;
@ -152,12 +154,10 @@ function (angular, _) {
return clone; return clone;
}; };
this.repeatPanel = function(panel, row, dashboard) { this.repeatPanel = function(panel, row) {
var variables = dashboard.templating.list; var variables = this.dashboard.templating.list;
var variable = _.findWhere(variables, {name: panel.repeat.replace('$', '')}); var variable = _.findWhere(variables, {name: panel.repeat});
if (!variable) { if (!variable) { return; }
return;
}
var selected; var selected;
if (variable.current.text === 'All') { if (variable.current.text === 'All') {

2
public/app/panels/graph/axisEditor.html
View File

@ -190,7 +190,7 @@
<div class="section"> <div class="section">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px"> <li class="tight-form-item" style="width: 105px">
<strong>Legend values</strong> <strong>Legend values</strong>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">

61
public/app/partials/panelgeneral.html
View File

@ -1,24 +1,51 @@
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<h5>General options</h5> <h5>General options</h5>
<div class="editor-option"> <div class="tight-form">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input> <ul class="tight-form-list">
</div> <li class="tight-form-item">
<div class="editor-option"> Title
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select> </li>
</div> <li>
<div class="editor-option"> <input type="text" class="input-xlarge tight-form-input" ng-model='panel.title'></input>
<label class="small">Height</label><input type="text" class="input-small" ng-model='panel.height'></select> </li>
</div> <li class="tight-form-item">
<editor-opt-bool text="Transparent" model="panel.transparent"></editor-opt-bool> Span
</div> </li>
<li>
<select class="input-mini tight-form-input" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</li>
<li class="tight-form-item">
Height
</li>
<li>
<input type="text" class="input-small tight-form-input" ng-model='panel.height'></input>
</li>
<li class="tight-form-item">
<label class="checkbox-label" for="panel.transparent">Transparent</label>
<input class="cr1" id="panel.transparent" type="checkbox" ng-model="panel.transparent" ng-checked="panel.transparent">
<label for="panel.transparent" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="section"> <div class="section">
<h5>Templating options</h5> <h5>Templating options</h5>
<div class="editor-option"> <div class="tight-form">
<label class="small">Repeat Panel</label> <ul class="tight-form-list">
<input type="text" class="input-medium" ng-model='panel.repeat'></input> <li class="tight-form-item">
</div> Repeat Panel
</div> </li>
<li>
<select class="input-small tight-form-input" ng-model="panel.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div> </div>
<panel-link-editor panel="panel"></panel-link-editor> <panel-link-editor panel="panel"></panel-link-editor>

8
public/test/specs/dynamicDashboardSrv-specs.js
View File

@ -36,7 +36,7 @@ define([
dynamicDashScenario('given dashboard with panel repeat', function(ctx) { dynamicDashScenario('given dashboard with panel repeat', function(ctx) {
ctx.setup(function(dash) { ctx.setup(function(dash) {
dash.rows.push({ dash.rows.push({
panels: [{id: 2, repeat: '$apps'}] panels: [{id: 2, repeat: 'apps'}]
}); });
dash.templating.list.push({ dash.templating.list.push({
name: 'apps', name: 'apps',
@ -56,7 +56,7 @@ define([
}); });
it('should mark panel repeated', function() { it('should mark panel repeated', function() {
expect(ctx.rows[0].panels[0].repeat).to.be('$apps'); expect(ctx.rows[0].panels[0].repeat).to.be('apps');
expect(ctx.rows[0].panels[1].repeatPanelId).to.be(2); expect(ctx.rows[0].panels[1].repeatPanelId).to.be(2);
}); });
@ -103,7 +103,7 @@ define([
dynamicDashScenario('given dashboard with row repeat', function(ctx) { dynamicDashScenario('given dashboard with row repeat', function(ctx) {
ctx.setup(function(dash) { ctx.setup(function(dash) {
dash.rows.push({ dash.rows.push({
repeat: '$servers', repeat: 'servers',
panels: [{id: 2}] panels: [{id: 2}]
}); });
dash.templating.list.push({ dash.templating.list.push({
@ -128,7 +128,7 @@ define([
}); });
it('should mark second row as repeated', function() { it('should mark second row as repeated', function() {
expect(ctx.rows[0].repeat).to.be('$servers'); expect(ctx.rows[0].repeat).to.be('servers');
}); });
it('should clear repeat field on repeated row', function() { it('should clear repeat field on repeated row', function() {