Skip to content

N
nexpie-grafana-theme
Commit 3185db96 by Torkel Ödegaard
Options

new template system is starting to work 100%, not all features are in, like… 

new template system is starting to work 100%, not all features are in, like regex selection, influxdb support, and other stuff
parent 61a618e4
Showing with 136 additions and 71 deletions
src/app/controllers/templateEditorCtrl.js
...@@ -15,6 +15,8 @@ function (angular, _) { ...@@ -15,6 +15,8 @@ function (angular, _) {
refresh_on_load: false, refresh_on_load: false,
name: '', name: '',
options: [], options: [],
includeAll: false,
allFormat: 'Glob',
}; };
$scope.init = function() { $scope.init = function() {
...@@ -23,13 +25,6 @@ function (angular, _) { ...@@ -23,13 +25,6 @@ function (angular, _) {
$scope.variables = templateSrv.variables; $scope.variables = templateSrv.variables;
$scope.reset(); $scope.reset();
_.each($scope.variables, function(variable) {
if (variable.datasource === void 0) {
variable.datasource = null;
variable.type = 'query';
}
});
$scope.$watch('editor.index', function(index) { $scope.$watch('editor.index', function(index) {
if ($scope.currentIsNew === false && index === 1) { if ($scope.currentIsNew === false && index === 1) {
$scope.reset(); $scope.reset();
...@@ -50,6 +45,12 @@ function (angular, _) { ...@@ -50,6 +45,12 @@ function (angular, _) {
$scope.current = variable; $scope.current = variable;
$scope.currentIsNew = false; $scope.currentIsNew = false;
$scope.editor.index = 2; $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() { $scope.update = function() {
......
src/app/partials/templating_editor.html
...@@ -49,57 +49,77 @@ ...@@ -49,57 +49,77 @@
</div> </div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)"> <div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row"> <div class="row">
<div class="editor-option"> <div class="editor-option">
<label class="small">Variable name</label> <div class="editor-row">
<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input> <div class="editor-option">
</div> <label class="small">Variable name</label>
<div class="editor-option"> <input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
<label class="small">Type</label> </div>
<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'time period']" ng-change="typeChanged()"></select> <div class="editor-option">
</div> <label class="small">Type</label>
<div class="editor-option" ng-show="current.type === 'query'"> <select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'time period']" ng-change="typeChanged()"></select>
<label class="small">Datasource</label> </div>
<select ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select> <div class="editor-option" ng-show="current.type === 'query'">
</div> <label class="small">Datasource</label>
<div class="editor-option text-center" ng-show="current.type === 'query'"> <select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
<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> </div>
<input type="checkbox" ng-model="current.refresh" ng-checked="refresh"> <div class="editor-option text-center" ng-show="current.type === 'query'">
</div> <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>
</div> <input type="checkbox" ng-model="current.refresh" ng-checked="current.refresh">
</div>
<div ng-show="current.type === 'time period'"> </div>
<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 ng-show="current.type === 'time period'">
<div class="editor-row"> <div class="editor-option">
<div class="editor-option form-inline"> <label class="small">Values</label>
<label class="small">Variable values query</label> <input type="text" class="input-xxlarge" ng-model='current.query' placeholder="name"></input>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input> </div>
<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>
<div class="editor-row" style="margin-top: 10px;"> <div ng-show="current.type === 'query'">
<div class="editor-option form-inline"> <div class="editor-row">
<label class="small">Regex (optional, if you want to extract part of a series name or metric node segment)</label> <div class="editor-option form-inline">
<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input> <label class="small">Variable values query</label>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button> <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> </div>
<div class="editor-option">
<div class="editor-row" style="margin-top: 10px;"> <div class="editor-row">
<div class="editor-option form-inline"> <div class="editor-option" >
<label class="small">Variable values</label> <label class="small">Variable values (first 20)</label>
<ul> <ul class="grafana-options-list">
<li ng-repeat="option in current.options"> <li ng-repeat="option in current.options | limitTo: 20">
{{option.text}} {{option.text}}
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/app/services/dashboard/dashboardSrv.js
...@@ -116,11 +116,12 @@ function (angular, $, kbn, _, moment) { ...@@ -116,11 +116,12 @@ function (angular, $, kbn, _, moment) {
}; };
p.updateSchema = function(old) { p.updateSchema = function(old) {
var i, j, k;
var oldVersion = this.version; var oldVersion = this.version;
var panelUpgrades = []; var panelUpgrades = [];
this.version = 5; this.version = 6;
if (oldVersion === 5) { if (oldVersion === 6) {
return; return;
} }
...@@ -195,7 +196,7 @@ function (angular, $, kbn, _, moment) { ...@@ -195,7 +196,7 @@ function (angular, $, kbn, _, moment) {
}); });
} }
if (oldVersion < 5) { if (oldVersion < 6) {
// move pulldowns to new schema // move pulldowns to new schema
var filtering = _.findWhere(old.pulldowns, { type: 'filtering' }); var filtering = _.findWhere(old.pulldowns, { type: 'filtering' });
var annotations = _.findWhere(old.pulldowns, { type: 'annotations' }); var annotations = _.findWhere(old.pulldowns, { type: 'annotations' });
...@@ -208,16 +209,24 @@ function (angular, $, kbn, _, moment) { ...@@ -208,16 +209,24 @@ function (angular, $, kbn, _, moment) {
enable: annotations.enable 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) { if (panelUpgrades.length === 0) {
return; return;
} }
for (var i = 0; i < this.rows.length; i++) { for (i = 0; i < this.rows.length; i++) {
var row = this.rows[i]; var row = this.rows[i];
for (var j = 0; j < row.panels.length; j++) { for (j = 0; j < row.panels.length; j++) {
for (var k = 0; k < panelUpgrades.length; k++) { for (k = 0; k < panelUpgrades.length; k++) {
panelUpgrades[k](row.panels[j]); panelUpgrades[k](row.panels[j]);
} }
} }
......
src/app/services/templateValuesSrv.js
...@@ -68,12 +68,7 @@ function (angular, _) { ...@@ -68,12 +68,7 @@ function (angular, _) {
}); });
if (variable.includeAll) { if (variable.includeAll) {
var allExpr = '{'; self.addAllOption(variable);
_.each(variable.options, function(option) {
allExpr += option.text + ',';
});
allExpr = allExpr.substring(0, allExpr.length - 1) + '}';
variable.options.unshift({text: 'All', value: allExpr});
} }
// if parameter has current value // if parameter has current value
...@@ -89,6 +84,26 @@ function (angular, _) { ...@@ -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});
};
}); });
}); });
src/css/less/tables_lists.less
...@@ -24,11 +24,32 @@ ...@@ -24,11 +24,32 @@
td:last-child { td:last-child {
border-right: 1px solid @grafanaListBorderBottom; border-right: 1px solid @grafanaListBorderBottom;
} }
}
.max-width { .max-width {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
white-space: nowrap; 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;
} }
} }
src/test/specs/dashboardSrv-specs.js
...@@ -156,9 +156,8 @@ define([ ...@@ -156,9 +156,8 @@ define([
expect(model.annotations.list[0].name).to.be('old'); expect(model.annotations.list[0].name).to.be('old');
}); });
it('dashboard schema version should be set to latest', function() { it('dashboard schema version should be set to latest', function() {
expect(model.version).to.be(5); expect(model.version).to.be(6);
}); });
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment