Final polish on repeat panel variable selection, #1888

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

View File

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

View File

@ -190,7 +190,7 @@
<div class="section">
<div class="tight-form">
<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>
</li>
<li class="tight-form-item">

View File

@ -1,22 +1,49 @@
<div class="editor-row">
<div class="section">
<h5>General options</h5>
<div class="editor-option">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
Title
</li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model='panel.title'></input>
</li>
<li class="tight-form-item">
Span
</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 class="editor-option">
<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>
</div>
<div class="editor-option">
<label class="small">Height</label><input type="text" class="input-small" ng-model='panel.height'></select>
</div>
<editor-opt-bool text="Transparent" model="panel.transparent"></editor-opt-bool>
</div>
<div class="section">
<h5>Templating options</h5>
<div class="editor-option">
<label class="small">Repeat Panel</label>
<input type="text" class="input-medium" ng-model='panel.repeat'></input>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
Repeat Panel
</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>

View File

@ -36,7 +36,7 @@ define([
dynamicDashScenario('given dashboard with panel repeat', function(ctx) {
ctx.setup(function(dash) {
dash.rows.push({
panels: [{id: 2, repeat: '$apps'}]
panels: [{id: 2, repeat: 'apps'}]
});
dash.templating.list.push({
name: 'apps',
@ -56,7 +56,7 @@ define([
});
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);
});
@ -103,7 +103,7 @@ define([
dynamicDashScenario('given dashboard with row repeat', function(ctx) {
ctx.setup(function(dash) {
dash.rows.push({
repeat: '$servers',
repeat: 'servers',
panels: [{id: 2}]
});
dash.templating.list.push({
@ -128,7 +128,7 @@ define([
});
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() {