diff --git a/public/app/features/panel/panelDirective.js b/public/app/features/panel/panelDirective.js index 7330bb627de..041980f9d44 100644 --- a/public/app/features/panel/panelDirective.js +++ b/public/app/features/panel/panelDirective.js @@ -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); - }); - } - }; - }); }); diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index db304d1c232..56571bfa203 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -1,5 +1,12 @@ -
+
+ + + + + +
+
- -
-
-
-
- -
-
-
- -
-
- -
-
Shorter legend names
-
    -
  • alias() function to specify a custom series name
  • -
  • aliasByNode(2) to alias by a specific part of your metric path
  • -
  • aliasByNode(2, -1) you can add multiple segment paths, and use negative index
  • -
  • groupByNode(2, 'sum') is useful if you have 2 wildcards in your metric path and want to sumSeries and group by
  • -
-
- -
-
Series as parameter
-
    -
  • Some graphite functions allow you to have many series arguments
  • -
  • Use #[A-Z] to use a graphite query as parameter to a function
  • -
  • - Examples: -
      -
    • asPercent(#A, #B)
    • -
    • prod.srv-01.counters.count - asPercent(#A) : percentage of count in comparison with A query
    • -
    • prod.srv-01.counters.count - sumSeries(#A) : sum count and series A
    • -
    • divideSeries(#A, #B)
    • -
    -
  • -
  • If a query is added only to be used as a parameter, hide it from the graph with the eye icon
  • -
-
- -
-
Stacking
-
    -
  • You find the stacking option under Display Styles tab
  • -
  • When stacking is enabled make sure null point mode is set to 'null as zero'
  • -
-
- -
-
Templating
-
    -
  • You can use a template variable in place of metric names
  • -
  • You can use a template variable in place of function parameters
  • -
  • You enable the templating feature in Dashboard settings / Feature toggles
  • -
-
- -
-
Max data points
-
    -
  • Every graphite request is issued with a maxDataPoints parameter
  • -
  • Graphite uses this parameter to consolidate the real number of values down to this number
  • -
  • If there are more real values, then by default they will be consolidated using averages
  • -
  • This could hide real peaks and max values in your series
  • -
  • You can change how point consolidation is made using the consolidateBy graphite function
  • -
  • Point consolidation will effect series legend values (min,max,total,current)
  • -
  • If you override maxDataPoint and set a high value performance can be severely effected
  • -
-
- -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/plugins/datasource/graphite/queryCtrl.js b/public/app/plugins/datasource/graphite/queryCtrl.js index 040386e03d6..1e5d34a816f 100644 --- a/public/app/plugins/datasource/graphite/queryCtrl.js +++ b/public/app/plugins/datasource/graphite/queryCtrl.js @@ -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(); - }); - } - }); - } - }; }); }); diff --git a/public/app/plugins/datasource/influxdb/partials/query.editor.html b/public/app/plugins/datasource/influxdb/partials/query.editor.html index cbcfcb9f4c3..824ba36ab20 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/query.editor.html @@ -59,7 +59,7 @@ - +