Skip to content

N
nexpie-grafana-theme
Commit ed499621 by Torkel Ödegaard
Options

refactor(): began work on big design change for how data source query editors are loaded

parent 16fa5c4d
Showing with 172 additions and 162 deletions
public/app/features/panel/panelDirective.js
...@@ -6,9 +6,9 @@ define([ ...@@ -6,9 +6,9 @@ define([
function (angular, $, config) { function (angular, $, config) {
'use strict'; 'use strict';
angular var module = angular.module('grafana.directives');
.module('grafana.directives')
.directive('panelLoader', function($compile, $parse) { module.directive('panelLoader', function($compile, $parse) {
return { return {
restrict: 'E', restrict: 'E',
link: function(scope, elem, attr) { link: function(scope, elem, attr) {
...@@ -22,7 +22,9 @@ function (angular, $, config) { ...@@ -22,7 +22,9 @@ function (angular, $, config) {
}); });
} }
}; };
}).directive('grafanaPanel', function() { });
module.directive('grafanaPanel', function() {
return { return {
restrict: 'E', restrict: 'E',
templateUrl: 'app/features/panel/partials/panel.html', templateUrl: 'app/features/panel/partials/panel.html',
...@@ -37,4 +39,18 @@ function (angular, $, config) { ...@@ -37,4 +39,18 @@ function (angular, $, config) {
} }
}; };
}); });
module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
return {
restrict: 'E',
link: function(scope, elem) {
datasourceSrv.get(scope.panel.datasource).then(function(ds) {
var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.type));
elem.append(panelEl);
$compile(panelEl)(scope);
});
}
};
});
}); });
public/app/partials/metrics.html
<div ng-include src="datasource.meta.partials.query"></div> <div class="editor-row">
<!-- <div ng&#45;include src="datasource.meta.partials.query"></div> -->
<query-editor-loader ng-repeat="target in panel.targets">
</query-editor-loader>
</div>
</div>
<div class="editor-row" style="margin-top: 30px"> <div class="editor-row" style="margin-top: 30px">
<button class="btn btn-inverse pull-right" ng-click="addDataQuery(panel.target)"> <button class="btn btn-inverse pull-right" ng-click="addDataQuery(panel.target)">
......
public/app/plugins/datasource/graphite/partials/query.editor.html
<div class="editor-row"> <div class="tight-form">
<div ng-repeat="target in panel.targets"
class="tight-form"
ng-class="{'tight-form-disabled': target.hide}"
ng-controller="GraphiteQueryCtrl"
ng-init="init()">
<ul class="tight-form-list pull-right"> <ul class="tight-form-list pull-right">
<li ng-show="parserError" class="tight-form-item"> <li ng-show="parserError" class="tight-form-item">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem"> <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
...@@ -67,7 +61,7 @@ ...@@ -67,7 +61,7 @@
<input type="text" class="tight-form-clear-input span10" <input type="text" class="tight-form-clear-input span10"
ng-model="target.target" ng-model="target.target"
focus-me="target.textEditor" give-focus="target.textEditor"
spellcheck='false' spellcheck='false'
ng-model-onblur ng-change="get_data()" ng-model-onblur ng-change="get_data()"
ng-show="target.textEditor" /> ng-show="target.textEditor" />
...@@ -87,135 +81,135 @@ ...@@ -87,135 +81,135 @@
</div> </div>
</div> </div>
<section class="grafana-metric-options"> <!-- <section class="grafana&#45;metric&#45;options"> -->
<div class="tight-form"> <!-- <div class="tight&#45;form"> -->
<ul class="tight-form-list"> <!-- <ul class="tight&#45;form&#45;list"> -->
<li class="tight-form-item tight-form-item-icon"> <!-- <li class="tight&#45;form&#45;item tight&#45;form&#45;item&#45;icon"> -->
<i class="fa fa-wrench"></i> <!-- <i class="fa fa&#45;wrench"></i> -->
</li> <!-- </li> -->
<li class="tight-form-item"> <!-- <li class="tight&#45;form&#45;item"> -->
Cache timeout <!-- Cache timeout -->
</li> <!-- </li> -->
<li> <!-- <li> -->
<input type="text" <!-- <input type="text" -->
class="input-mini tight-form-input" <!-- class="input&#45;mini tight&#45;form&#45;input" -->
ng-model="panel.cacheTimeout" <!-- ng&#45;model="panel.cacheTimeout" -->
bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'" <!-- bs&#45;tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'" -->
data-placement="right" <!-- data&#45;placement="right" -->
spellcheck='false' <!-- spellcheck='false' -->
placeholder="60"> <!-- placeholder="60"> -->
</li> <!-- </li> -->
<li class="tight-form-item"> <!-- <li class="tight&#45;form&#45;item"> -->
Max data points <!-- Max data points -->
</li> <!-- </li> -->
<li> <!-- <li> -->
<input type="text" <!-- <input type="text" -->
class="input-mini tight-form-input" <!-- class="input&#45;mini tight&#45;form&#45;input" -->
ng-model="panel.maxDataPoints" <!-- ng&#45;model="panel.maxDataPoints" -->
bs-tooltip="'Override max data points, automatically set to graph width in pixels.'" <!-- bs&#45;tooltip="'Override max data points, automatically set to graph width in pixels.'" -->
data-placement="right" <!-- data&#45;placement="right" -->
ng-model-onblur ng-change="get_data()" <!-- ng&#45;model&#45;onblur ng&#45;change="get_data()" -->
spellcheck='false' <!-- spellcheck='false' -->
placeholder="auto"> <!-- placeholder="auto"> -->
</li> <!-- </li> -->
</ul> <!-- </ul> -->
<div class="clearfix"></div> <!-- <div class="clearfix"></div> -->
</div> <!-- </div> -->
<div class="tight-form"> <!-- <div class="tight&#45;form"> -->
<ul class="tight-form-list"> <!-- <ul class="tight&#45;form&#45;list"> -->
<li class="tight-form-item tight-form-item-icon"> <!-- <li class="tight&#45;form&#45;item tight&#45;form&#45;item&#45;icon"> -->
<i class="fa fa-info-circle"></i> <!-- <i class="fa fa&#45;info&#45;circle"></i> -->
</li> <!-- </li> -->
<li class="tight-form-item"> <!-- <li class="tight&#45;form&#45;item"> -->
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <!-- <a ng&#45;click="toggleEditorHelp(1);" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
shorter legend names <!-- shorter legend names -->
</a> <!-- </a> -->
</li> <!-- </li> -->
<li class="tight-form-item"> <!-- <li class="tight&#45;form&#45;item"> -->
<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <!-- <a ng&#45;click="toggleEditorHelp(2);" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
series as parameters <!-- series as parameters -->
</a> <!-- </a> -->
</li> <!-- </li> -->
<li class="tight-form-item"> <!-- <li class="tight&#45;form&#45;item"> -->
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <!-- <a ng&#45;click="toggleEditorHelp(3)" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
stacking <!-- stacking -->
</a> <!-- </a> -->
</li> <!-- </li> -->
<li class="tight-form-item"> <!-- <li class="tight&#45;form&#45;item"> -->
<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <!-- <a ng&#45;click="toggleEditorHelp(4)" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
templating <!-- templating -->
</a> <!-- </a> -->
</li> <!-- </li> -->
<li class="tight-form-item"> <!-- <li class="tight&#45;form&#45;item"> -->
<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <!-- <a ng&#45;click="toggleEditorHelp(5)" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
max data points <!-- max data points -->
</a> <!-- </a> -->
</li> <!-- </li> -->
</ul> <!-- </ul> -->
<div class="clearfix"></div> <!-- <div class="clearfix"></div> -->
</div> <!-- </div> -->
</section> <!-- </section> -->
<!-- -->
<div class="editor-row"> <!-- <div class="editor&#45;row"> -->
<div class="pull-left" style="margin-top: 30px;"> <!-- <div class="pull&#45;left" style="margin&#45;top: 30px;"> -->
<!-- -->
<div class="grafana-info-box span8" ng-if="editorHelpIndex === 1"> <!-- <div class="grafana&#45;info&#45;box span8" ng&#45;if="editorHelpIndex === 1"> -->
<h5>Shorter legend names</h5> <!-- <h5>Shorter legend names</h5> -->
<ul> <!-- <ul> -->
<li>alias() function to specify a custom series name</li> <!-- <li>alias() function to specify a custom series name</li> -->
<li>aliasByNode(2) to alias by a specific part of your metric path</li> <!-- <li>aliasByNode(2) to alias by a specific part of your metric path</li> -->
<li>aliasByNode(2, -1) you can add multiple segment paths, and use negative index</li> <!-- <li>aliasByNode(2, &#45;1) you can add multiple segment paths, and use negative index</li> -->
<li>groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by</li> <!-- <li>groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by</li> -->
</ul> <!-- </ul> -->
</div> <!-- </div> -->
<!-- -->
<div class="grafana-info-box span8" ng-if="editorHelpIndex === 2"> <!-- <div class="grafana&#45;info&#45;box span8" ng&#45;if="editorHelpIndex === 2"> -->
<h5>Series as parameter</h5> <!-- <h5>Series as parameter</h5> -->
<ul> <!-- <ul> -->
<li>Some graphite functions allow you to have many series arguments</li> <!-- <li>Some graphite functions allow you to have many series arguments</li> -->
<li>Use #[A-Z] to use a graphite query as parameter to a function</li> <!-- <li>Use #[A&#45;Z] to use a graphite query as parameter to a function</li> -->
<li> <!-- <li> -->
Examples: <!-- Examples: -->
<ul> <!-- <ul> -->
<li>asPercent(#A, #B)</li> <!-- <li>asPercent(#A, #B)</li> -->
<li>prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query</li> <!-- <li>prod.srv&#45;01.counters.count &#45; asPercent(#A) : percentage of count in comparison with A query</li> -->
<li>prod.srv-01.counters.count - sumSeries(#A) : sum count and series A </li> <!-- <li>prod.srv&#45;01.counters.count &#45; sumSeries(#A) : sum count and series A </li> -->
<li>divideSeries(#A, #B)</li> <!-- <li>divideSeries(#A, #B)</li> -->
</ul> <!-- </ul> -->
</li> <!-- </li> -->
<li>If a query is added only to be used as a parameter, hide it from the graph with the eye icon</li> <!-- <li>If a query is added only to be used as a parameter, hide it from the graph with the eye icon</li> -->
</ul> <!-- </ul> -->
</div> <!-- </div> -->
<!-- -->
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 3"> <!-- <div class="grafana&#45;info&#45;box span6" ng&#45;if="editorHelpIndex === 3"> -->
<h5>Stacking</h5> <!-- <h5>Stacking</h5> -->
<ul> <!-- <ul> -->
<li>You find the stacking option under Display Styles tab</li> <!-- <li>You find the stacking option under Display Styles tab</li> -->
<li>When stacking is enabled make sure null point mode is set to 'null as zero'</li> <!-- <li>When stacking is enabled make sure null point mode is set to 'null as zero'</li> -->
</ul> <!-- </ul> -->
</div> <!-- </div> -->
<!-- -->
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 4"> <!-- <div class="grafana&#45;info&#45;box span6" ng&#45;if="editorHelpIndex === 4"> -->
<h5>Templating</h5> <!-- <h5>Templating</h5> -->
<ul> <!-- <ul> -->
<li>You can use a template variable in place of metric names</li> <!-- <li>You can use a template variable in place of metric names</li> -->
<li>You can use a template variable in place of function parameters</li> <!-- <li>You can use a template variable in place of function parameters</li> -->
<li>You enable the templating feature in Dashboard settings / Feature toggles </li> <!-- <li>You enable the templating feature in Dashboard settings / Feature toggles </li> -->
</ul> <!-- </ul> -->
</div> <!-- </div> -->
<!-- -->
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 5"> <!-- <div class="grafana&#45;info&#45;box span6" ng&#45;if="editorHelpIndex === 5"> -->
<h5>Max data points</h5> <!-- <h5>Max data points</h5> -->
<ul> <!-- <ul> -->
<li>Every graphite request is issued with a maxDataPoints parameter</li> <!-- <li>Every graphite request is issued with a maxDataPoints parameter</li> -->
<li>Graphite uses this parameter to consolidate the real number of values down to this number</li> <!-- <li>Graphite uses this parameter to consolidate the real number of values down to this number</li> -->
<li>If there are more real values, then by default they will be consolidated using averages</li> <!-- <li>If there are more real values, then by default they will be consolidated using averages</li> -->
<li>This could hide real peaks and max values in your series</li> <!-- <li>This could hide real peaks and max values in your series</li> -->
<li>You can change how point consolidation is made using the consolidateBy graphite function</li> <!-- <li>You can change how point consolidation is made using the consolidateBy graphite function</li> -->
<li>Point consolidation will effect series legend values (min,max,total,current)</li> <!-- <li>Point consolidation will effect series legend values (min,max,total,current)</li> -->
<li>If you override maxDataPoint and set a high value performance can be severely effected</li> <!-- <li>If you override maxDataPoint and set a high value performance can be severely effected</li> -->
</ul> <!-- </ul> -->
</div> <!-- </div> -->
<!-- -->
</div> <!-- </div> -->
</div> <!-- </div> -->
public/app/plugins/datasource/graphite/queryCtrl.js
...@@ -11,6 +11,13 @@ function (angular, _, config, gfunc, Parser) { ...@@ -11,6 +11,13 @@ function (angular, _, config, gfunc, Parser) {
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
module.directive('metricQueryEditorGraphite', function() {
return {
controller: 'GraphiteQueryCtrl',
templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html',
};
});
module.controller('GraphiteQueryCtrl', function($scope, $sce, templateSrv) { module.controller('GraphiteQueryCtrl', function($scope, $sce, templateSrv) {
$scope.init = function() { $scope.init = function() {
...@@ -313,22 +320,8 @@ function (angular, _, config, gfunc, Parser) { ...@@ -313,22 +320,8 @@ function (angular, _, config, gfunc, Parser) {
return new MetricSegment({value: 'select metric', fake: true}); return new MetricSegment({value: 'select metric', fake: true});
}; };
}); $scope.init();
module.directive('focusMe', function($timeout, $parse) {
return {
//scope: true, // optionally create a child scope
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
}
};
}); });
}); });
public/app/plugins/datasource/influxdb/partials/query.editor.html
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</li> </li>
</ul> </ul>
<input type="text" class="tight-form-clear-input" style="width: 80%" ng-model="target.query" focus-me="target.rawQuery" spellcheck='false' ng-model-onblur ng-change="get_data()" ng-show="target.rawQuery"/> <input type="text" class="tight-form-clear-input" style="width: 80%" ng-model="target.query" give-focus="target.rawQuery" spellcheck='false' ng-model-onblur ng-change="get_data()" ng-show="target.rawQuery"/>
<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery"> <ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
<li class="tight-form-item query-keyword" style="width: 75px;"> <li class="tight-form-item query-keyword" style="width: 75px;">
......
public/app/plugins/datasource/influxdb_08/partials/query.editor.html
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
class="tight-form-input span10" class="tight-form-input span10"
ng-model="target.query" ng-model="target.query"
placeholder="select ..." placeholder="select ..."
focus-me="target.rawQuery" give-focus="target.rawQuery"
spellcheck='false' spellcheck='false'
data-min-length=0 data-items=100 data-min-length=0 data-items=100
ng-model-onblur ng-model-onblur
......
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