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

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

Browse Source
This commit is contained in:
Torkel Ödegaard
2015-08-15 21:49:30 +02:00
parent 16fa5c4df3
commit ed49962120
6 changed files with 267 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
public/app/features/panel/panelDirective.js
View File

@@ -6,35 +6,51 @@ define([
function (angular, $, config) {
'use strict';
angular
.module('grafana.directives')
.directive('panelLoader', function($compile, $parse) {
return {
restrict: 'E',
link: function(scope, elem, attr) {
var getter = $parse(attr.type), panelType = getter(scope);
var panelPath = config.panels[panelType].path;
var module = angular.module('grafana.directives');
scope.require([panelPath + "/module"], function () {
var panelEl = angular.element(document.createElement('grafana-panel-' + panelType));
elem.append(panelEl);
$compile(panelEl)(scope);
});
}
};
}).directive('grafanaPanel', function() {
return {
restrict: 'E',
templateUrl: 'app/features/panel/partials/panel.html',
transclude: true,
link: function(scope, elem) {
var panelContainer = elem.find('.panel-container');
module.directive('panelLoader', function($compile, $parse) {
return {
restrict: 'E',
link: function(scope, elem, attr) {
var getter = $parse(attr.type), panelType = getter(scope);
var panelPath = config.panels[panelType].path;
scope.require([panelPath + "/module"], function () {
var panelEl = angular.element(document.createElement('grafana-panel-' + panelType));
elem.append(panelEl);
$compile(panelEl)(scope);
});
}
};
});
module.directive('grafanaPanel', function() {
return {
restrict: 'E',
templateUrl: 'app/features/panel/partials/panel.html',
transclude: true,
link: function(scope, elem) {
var panelContainer = elem.find('.panel-container');
scope.$watchGroup(['fullscreen', 'height', 'panel.height', 'row.height'], function() {
panelContainer.css({ minHeight: scope.height || scope.panel.height || scope.row.height, display: 'block' });
elem.toggleClass('panel-fullscreen', scope.fullscreen ? true : false);
});
}
};
});
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);
});
}
};
});
scope.$watchGroup(['fullscreen', 'height', 'panel.height', 'row.height'], function() {
panelContainer.css({ minHeight: scope.height || scope.panel.height || scope.row.height, display: 'block' });
elem.toggleClass('panel-fullscreen', scope.fullscreen ? true : false);
});
}
};
});
});

9
public/app/partials/metrics.html
View File

@@ -1,5 +1,12 @@
<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">
<button class="btn btn-inverse pull-right" ng-click="addDataQuery(panel.target)">

414
public/app/plugins/datasource/graphite/partials/query.editor.html
View File

@@ -1,221 +1,215 @@
<div class="editor-row">
<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">
<li ng-show="parserError" class="tight-form-item">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="tight-form-item">
<a class="pointer" tabindex="1" ng-click="toggleEditorMode()">
<i class="fa fa-pencil"></i>
</a>
</li>
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li ng-show="parserError" class="tight-form-item">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="tight-form-item">
<a class="pointer" tabindex="1" ng-click="toggleEditorMode()">
<i class="fa fa-pencil"></i>
</a>
</li>
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index-1)">
Move up
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index+1)">
Move down
</a>
</li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index-1)">
Move up
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index+1)">
Move down
</a>
</li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list">
<li class="tight-form-item" style="min-width: 15px; text-align: center">
{{targetLetters[$index]}}
</li>
<li>
<a class="tight-form-item"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<ul class="tight-form-list">
<li class="tight-form-item" style="min-width: 15px; text-align: center">
{{targetLetters[$index]}}
</li>
<li>
<a class="tight-form-item"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<input type="text" class="tight-form-clear-input span10"
ng-model="target.target"
focus-me="target.textEditor"
spellcheck='false'
ng-model-onblur ng-change="get_data()"
ng-show="target.textEditor" />
<input type="text" class="tight-form-clear-input span10"
ng-model="target.target"
give-focus="target.textEditor"
spellcheck='false'
ng-model-onblur ng-change="get_data()"
ng-show="target.textEditor" />
<ul class="tight-form-list" role="menu" ng-hide="target.textEditor">
<li ng-repeat="segment in segments" role="menuitem">
<metric-segment segment="segment" get-alt-segments="getAltSegments($index)" on-value-changed="segmentValueChanged(segment, $index)"></metric-segment>
</li>
<li ng-repeat="func in functions">
<span graphite-func-editor class="tight-form-item tight-form-func">
</span>
</li>
<li class="dropdown" graphite-add-func>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<section class="grafana-metric-options">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i>
<ul class="tight-form-list" role="menu" ng-hide="target.textEditor">
<li ng-repeat="segment in segments" role="menuitem">
<metric-segment segment="segment" get-alt-segments="getAltSegments($index)" on-value-changed="segmentValueChanged(segment, $index)"></metric-segment>
</li>
<li class="tight-form-item">
Cache timeout
<li ng-repeat="func in functions">
<span graphite-func-editor class="tight-form-item tight-form-func">
</span>
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="panel.cacheTimeout"
bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
data-placement="right"
spellcheck='false'
placeholder="60">
</li>
<li class="tight-form-item">
Max data points
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="panel.maxDataPoints"
bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
data-placement="right"
ng-model-onblur ng-change="get_data()"
spellcheck='false'
placeholder="auto">
<li class="dropdown" graphite-add-func>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
shorter legend names
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
series as parameters
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
templating
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
max data points
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</section>
<div class="editor-row">
<div class="pull-left" style="margin-top: 30px;">
<div class="grafana-info-box span8" ng-if="editorHelpIndex === 1">
<h5>Shorter legend names</h5>
<ul>
<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, -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>
</ul>
</div>
<div class="grafana-info-box span8" ng-if="editorHelpIndex === 2">
<h5>Series as parameter</h5>
<ul>
<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>
Examples:
<ul>
<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-01.counters.count - sumSeries(#A) : sum count and series A </li>
<li>divideSeries(#A, #B)</li>
</ul>
</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>
</div>
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 3">
<h5>Stacking</h5>
<ul>
<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>
</ul>
</div>
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 4">
<h5>Templating</h5>
<ul>
<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 enable the templating feature in Dashboard settings / Feature toggles </li>
</ul>
</div>
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 5">
<h5>Max data points</h5>
<ul>
<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>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>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>If you override maxDataPoint and set a high value performance can be severely effected</li>
</ul>
</div>
</div>
</div>
<!-- <section class="grafana&#45;metric&#45;options"> -->
<!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item tight&#45;form&#45;item&#45;icon"> -->
<!-- <i class="fa fa&#45;wrench"></i> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item"> -->
<!-- Cache timeout -->
<!-- </li> -->
<!-- <li> -->
<!-- <input type="text" -->
<!-- class="input&#45;mini tight&#45;form&#45;input" -->
<!-- ng&#45;model="panel.cacheTimeout" -->
<!-- bs&#45;tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'" -->
<!-- data&#45;placement="right" -->
<!-- spellcheck='false' -->
<!-- placeholder="60"> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item"> -->
<!-- Max data points -->
<!-- </li> -->
<!-- <li> -->
<!-- <input type="text" -->
<!-- class="input&#45;mini tight&#45;form&#45;input" -->
<!-- ng&#45;model="panel.maxDataPoints" -->
<!-- bs&#45;tooltip="'Override max data points, automatically set to graph width in pixels.'" -->
<!-- data&#45;placement="right" -->
<!-- ng&#45;model&#45;onblur ng&#45;change="get_data()" -->
<!-- spellcheck='false' -->
<!-- placeholder="auto"> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item tight&#45;form&#45;item&#45;icon"> -->
<!-- <i class="fa fa&#45;info&#45;circle"></i> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item"> -->
<!-- <a ng&#45;click="toggleEditorHelp(1);" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
<!-- shorter legend names -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item"> -->
<!-- <a ng&#45;click="toggleEditorHelp(2);" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
<!-- series as parameters -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item"> -->
<!-- <a ng&#45;click="toggleEditorHelp(3)" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
<!-- stacking -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item"> -->
<!-- <a ng&#45;click="toggleEditorHelp(4)" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
<!-- templating -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="tight&#45;form&#45;item"> -->
<!-- <a ng&#45;click="toggleEditorHelp(5)" bs&#45;tooltip="'click to show helpful info'" data&#45;placement="bottom"> -->
<!-- max data points -->
<!-- </a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- </section> -->
<!-- -->
<!-- <div class="editor&#45;row"> -->
<!-- <div class="pull&#45;left" style="margin&#45;top: 30px;"> -->
<!-- -->
<!-- <div class="grafana&#45;info&#45;box span8" ng&#45;if="editorHelpIndex === 1"> -->
<!-- <h5>Shorter legend names</h5> -->
<!-- <ul> -->
<!-- <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, &#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> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- <div class="grafana&#45;info&#45;box span8" ng&#45;if="editorHelpIndex === 2"> -->
<!-- <h5>Series as parameter</h5> -->
<!-- <ul> -->
<!-- <li>Some graphite functions allow you to have many series arguments</li> -->
<!-- <li>Use #[A&#45;Z] to use a graphite query as parameter to a function</li> -->
<!-- <li> -->
<!-- Examples: -->
<!-- <ul> -->
<!-- <li>asPercent(#A, #B)</li> -->
<!-- <li>prod.srv&#45;01.counters.count &#45; asPercent(#A) : percentage of count in comparison with A query</li> -->
<!-- <li>prod.srv&#45;01.counters.count &#45; sumSeries(#A) : sum count and series A </li> -->
<!-- <li>divideSeries(#A, #B)</li> -->
<!-- </ul> -->
<!-- </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> -->
<!-- </div> -->
<!-- -->
<!-- <div class="grafana&#45;info&#45;box span6" ng&#45;if="editorHelpIndex === 3"> -->
<!-- <h5>Stacking</h5> -->
<!-- <ul> -->
<!-- <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> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- <div class="grafana&#45;info&#45;box span6" ng&#45;if="editorHelpIndex === 4"> -->
<!-- <h5>Templating</h5> -->
<!-- <ul> -->
<!-- <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 enable the templating feature in Dashboard settings / Feature toggles </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- <div class="grafana&#45;info&#45;box span6" ng&#45;if="editorHelpIndex === 5"> -->
<!-- <h5>Max data points</h5> -->
<!-- <ul> -->
<!-- <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>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>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>If you override maxDataPoint and set a high value performance can be severely effected</li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- </div> -->
<!-- </div> -->

23
public/app/plugins/datasource/graphite/queryCtrl.js
View File

@@ -11,6 +11,13 @@ function (angular, _, config, gfunc, Parser) {
var module = angular.module('grafana.controllers');
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) {
$scope.init = function() {
@@ -313,22 +320,8 @@ function (angular, _, config, gfunc, Parser) {
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();
});
}
});
}
};
});
});

2
public/app/plugins/datasource/influxdb/partials/query.editor.html
View File

@@ -59,7 +59,7 @@
</li>
</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">
<li class="tight-form-item query-keyword" style="width: 75px;">

2
public/app/plugins/datasource/influxdb_08/partials/query.editor.html
View File

@@ -40,7 +40,7 @@
class="tight-form-input span10"
ng-model="target.query"
placeholder="select ..."
focus-me="target.rawQuery"
give-focus="target.rawQuery"
spellcheck='false'
data-min-length=0 data-items=100
ng-model-onblur