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

new template system is starting to work 100%, not all features are in, like regex selection, influxdb support, and other stuff

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-08-29 12:34:04 +02:00
parent 61a618e473
commit 3185db9609
6 changed files with 137 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/controllers/templateEditorCtrl.js
View File

@ -15,6 +15,8 @@ function (angular, _) {
refresh_on_load: false,
name: '',
options: [],
includeAll: false,
allFormat: 'Glob',
};
$scope.init = function() {
@ -23,13 +25,6 @@ function (angular, _) {
$scope.variables = templateSrv.variables;
$scope.reset();
_.each($scope.variables, function(variable) {
if (variable.datasource === void 0) {
variable.datasource = null;
variable.type = 'query';
}
});
$scope.$watch('editor.index', function(index) {
if ($scope.currentIsNew === false && index === 1) {
$scope.reset();
@ -50,6 +45,12 @@ function (angular, _) {
$scope.current = variable;
$scope.currentIsNew = false;
$scope.editor.index = 2;
if ($scope.current.datasource === void 0) {
$scope.current.datasource = null;
$scope.current.type = 'query';
$scope.current.allFormat = 'Glob';
}
};
$scope.update = function() {

112
src/app/partials/templating_editor.html
View File

@ -49,57 +49,77 @@
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row">
<div class="row">
<div class="editor-option">
<label class="small">Variable name</label>
<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'time period']" ng-change="typeChanged()"></select>
</div>
<div class="editor-option" ng-show="current.type === 'query'">
<label class="small">Datasource</label>
<select ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
<div class="editor-option text-center" ng-show="current.type === 'query'">
<label class="small">Refresh on load <tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time.</tip></label>
<input type="checkbox" ng-model="current.refresh" ng-checked="refresh">
</div>
</div>
<div class="editor-row">
<div class="editor-option">
<label class="small">Variable name</label>
<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'time period']" ng-change="typeChanged()"></select>
</div>
<div class="editor-option" ng-show="current.type === 'query'">
<label class="small">Datasource</label>
<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
<div class="editor-option text-center" ng-show="current.type === 'query'">
<label class="small">Refresh on load <tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time.</tip></label>
<input type="checkbox" ng-model="current.refresh" ng-checked="current.refresh">
</div>
</div>
<div ng-show="current.type === 'time period'">
<div class="editor-option">
<label class="small">Values</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="name"></input>
</div>
</div>
<div ng-show="current.type === 'time period'">
<div class="editor-option">
<label class="small">Values</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="name"></input>
</div>
</div>
<div ng-show="current.type === 'query'">
<div class="editor-row">
<div class="editor-option form-inline">
<label class="small">Variable values query</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
<div ng-show="current.type === 'query'">
<div class="editor-row">
<div class="editor-option form-inline">
<label class="small">Variable values query</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin: 15px 0">
<div class="editor-option form-inline">
<label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label>
<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="icon-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin: 15px 0">
<div class="editor-option text-center">
<label class="small">All option</label>
<input type="checkbox" ng-model="current.includeAll" ng-checked="current.includeAll" ng-change="runQuery()">
</div>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All format</label>
<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['Glob', 'wildcard', 'regex wildcard', 'regex all values', 'comma list', 'custom']" ng-change="typeChanged()"></select>
</div>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All value</label>
<input type="text" class="input-xlarge" ng-disabled="true" ng-model='current.options[0].value'></input>
</div>
</div>
</div>
</div>
<div class="editor-row" style="margin-top: 10px;">
<div class="editor-option form-inline">
<label class="small">Regex (optional, if you want to extract part of a series name or metric node segment)</label>
<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin-top: 10px;">
<div class="editor-option form-inline">
<label class="small">Variable values</label>
<ul>
<li ng-repeat="option in current.options">
{{option.text}}
</li>
</ul>
<div class="editor-option">
<div class="editor-row">
<div class="editor-option" >
<label class="small">Variable values (first 20)</label>
<ul class="grafana-options-list">
<li ng-repeat="option in current.options | limitTo: 20">
{{option.text}}
</li>
</ul>
</div>
</div>
</div>
</div>

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

@ -116,11 +116,12 @@ function (angular, $, kbn, _, moment) {
};
p.updateSchema = function(old) {
var i, j, k;
var oldVersion = this.version;
var panelUpgrades = [];
this.version = 5;
this.version = 6;
if (oldVersion === 5) {
if (oldVersion === 6) {
return;
}
@ -195,7 +196,7 @@ function (angular, $, kbn, _, moment) {
});
}
if (oldVersion < 5) {
if (oldVersion < 6) {
// move pulldowns to new schema
var filtering = _.findWhere(old.pulldowns, { type: 'filtering' });
var annotations = _.findWhere(old.pulldowns, { type: 'annotations' });
@ -208,16 +209,24 @@ function (angular, $, kbn, _, moment) {
enable: annotations.enable
};
}
// update template variables
for (i = 0 ; i < this.templating.list.length; i++) {
var variable = this.templating.list[i];
if (variable.datasource === void 0) { variable.datasource = null; }
if (variable.type === void 0) { variable.type = 'query'; }
if (variable.allFormat === void 0) { variable.allFormat = 'Glob'; }
}
}
if (panelUpgrades.length === 0) {
return;
}
for (var i = 0; i < this.rows.length; i++) {
for (i = 0; i < this.rows.length; i++) {
var row = this.rows[i];
for (var j = 0; j < row.panels.length; j++) {
for (var k = 0; k < panelUpgrades.length; k++) {
for (j = 0; j < row.panels.length; j++) {
for (k = 0; k < panelUpgrades.length; k++) {
panelUpgrades[k](row.panels[j]);
}
}

27
src/app/services/templateValuesSrv.js
View File

@ -68,12 +68,7 @@ function (angular, _) {
});
if (variable.includeAll) {
var allExpr = '{';
_.each(variable.options, function(option) {
allExpr += option.text + ',';
});
allExpr = allExpr.substring(0, allExpr.length - 1) + '}';
variable.options.unshift({text: 'All', value: allExpr});
self.addAllOption(variable);
}
// if parameter has current value
@ -89,6 +84,26 @@ function (angular, _) {
});
};
this.addAllOption = function(variable) {
var allValue = '';
switch(variable.allFormat) {
case 'wildcard':
allValue = '*';
break;
case 'regex wildcard':
allValue = '.*';
break;
default:
allValue = '{';
_.each(variable.options, function(option) {
allValue += option.text + ',';
});
allValue = allValue.substring(0, allValue.length - 1) + '}';
}
variable.options.unshift({text: 'All', value: allValue});
};
});
});

31
src/css/less/tables_lists.less
View File

@ -24,11 +24,32 @@
td:last-child {
border-right: 1px solid @grafanaListBorderBottom;
}
}
.max-width {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
.max-width {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.grafana-options-list {
list-style: none;
margin: 0;
max-width: 450px;
li:nth-child(odd) {
background-color: lighten(@grayDarker, 2%);
}
li {
float: left;
margin: 2px;
padding: 5px 10px;
border: 1px solid @grafanaListBorderBottom;
border: 1px solid @grafanaListBorderBottom;
}
li:first-child {
border: 1px solid @grafanaListBorderBottom;
}
}

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

@ -156,9 +156,8 @@ define([
expect(model.annotations.list[0].name).to.be('old');
});
it('dashboard schema version should be set to latest', function() {
expect(model.version).to.be(5);
expect(model.version).to.be(6);
});
});