diff --git a/public/app/features/panel/panelDirective.js b/public/app/features/panel/panelDirective.js index 041980f9d44..a697aab4722 100644 --- a/public/app/features/panel/panelDirective.js +++ b/public/app/features/panel/panelDirective.js @@ -44,10 +44,48 @@ function (angular, $, config) { 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); + var editorScope; + + scope.$watch("panel.datasource", function() { + var datasource = scope.target.datasource || scope.panel.datasource; + + datasourceSrv.get(datasource).then(function(ds) { + if (editorScope) { + editorScope.$destroy(); + elem.empty(); + } + + editorScope = scope.$new(); + editorScope.datasource = ds; + + var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.type)); + elem.append(panelEl); + $compile(panelEl)(editorScope); + }); + }); + } + }; + }); + + module.directive('queryOptionsLoader', function($compile, $parse, datasourceSrv) { + return { + restrict: 'E', + link: function(scope, elem) { + var editorScope; + + scope.$watch("panel.datasource", function() { + + datasourceSrv.get(scope.panel.datasource).then(function(ds) { + if (editorScope) { + editorScope.$destroy(); + elem.empty(); + } + + editorScope = scope.$new(); + var panelEl = angular.element(document.createElement('metric-query-options-' + ds.meta.type)); + elem.append(panelEl); + $compile(panelEl)(editorScope); + }); }); } }; diff --git a/public/app/features/panel/panelSrv.js b/public/app/features/panel/panelSrv.js index 037125b4aad..881cab29dc0 100644 --- a/public/app/features/panel/panelSrv.js +++ b/public/app/features/panel/panelSrv.js @@ -43,8 +43,8 @@ function (angular, _, config) { }); }; - $scope.addDataQuery = function() { - $scope.panel.targets.push({target: ''}); + $scope.addDataQuery = function(datasource) { + $scope.panel.targets.push({target: '', datasource: datasource}); }; $scope.removeDataQuery = function (query) { diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index 56571bfa203..eca15e905d9 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -1,31 +1,49 @@
- +
+ + +
- - +
+ + + + + + + + +
+ + -
- -
+
- -
+ +
diff --git a/public/app/plugins/datasource/grafana/datasource.js b/public/app/plugins/datasource/grafana/datasource.js index b0beea99e53..2a88969a55c 100644 --- a/public/app/plugins/datasource/grafana/datasource.js +++ b/public/app/plugins/datasource/grafana/datasource.js @@ -8,7 +8,7 @@ function (angular, _, kbn) { var module = angular.module('grafana.services'); - module.factory('GrafanaDatasource', function($q, backendSrv) { + module.factory('GrafanaDatasource', function($q, backendSrv, datasourceSrv) { function GrafanaDatasource() { } @@ -24,11 +24,16 @@ function (angular, _, kbn) { }; GrafanaDatasource.prototype.query = function(options) { - // get from & to in seconds - var from = kbn.parseDate(options.range.from).getTime(); - var to = kbn.parseDate(options.range.to).getTime(); - - return backendSrv.get('/api/metrics/test', { from: from, to: to, maxDataPoints: options.maxDataPoints }); + return datasourceSrv.get(options.targets[0].datasource).then(function(ds) { + options.targets = [options.targets[0]]; + return ds.query(options); + }); + // console.log(options.targets); + // // get from & to in seconds + // var from = kbn.parseDate(options.range.from).getTime(); + // var to = kbn.parseDate(options.range.to).getTime(); + // + // return backendSrv.get('/api/metrics/test', { from: from, to: to, maxDataPoints: options.maxDataPoints }); }; GrafanaDatasource.prototype.metricFindQuery = function() { diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index ceb282cbb58..6361f05f584 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -80,136 +80,3 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/app/plugins/datasource/graphite/partials/query.options.html b/public/app/plugins/datasource/graphite/partials/query.options.html new file mode 100644 index 00000000000..f42a9b59ea7 --- /dev/null +++ b/public/app/plugins/datasource/graphite/partials/query.options.html @@ -0,0 +1,132 @@ +
+ +
+ +
+
+
+ +
+
+
+ +
+
+ +
+
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 1e5d34a816f..2ecc4ad5e4e 100644 --- a/public/app/plugins/datasource/graphite/queryCtrl.js +++ b/public/app/plugins/datasource/graphite/queryCtrl.js @@ -18,6 +18,12 @@ function (angular, _, config, gfunc, Parser) { }; }); + module.directive('metricQueryOptionsGraphite', function() { + return { + templateUrl: 'app/plugins/datasource/graphite/partials/query.options.html', + }; + }); + module.controller('GraphiteQueryCtrl', function($scope, $sce, templateSrv) { $scope.init = function() { diff --git a/public/app/plugins/datasource/influxdb/partials/query.editor.html b/public/app/plugins/datasource/influxdb/partials/query.editor.html index 824ba36ab20..afd4a18ac6e 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/query.editor.html @@ -1,65 +1,63 @@ -
+
+
+ -
-
- + - - - + -
+ + +
+
+
- -
-
- -
-
-
    -
  • - -
    • -
  • - Group by time interval -
    • -
  • - -
    • -
  • - -
    • -
-
-
- -
-
-
- -
-
- -
-
Alias patterns
-
    -
  • $m = replaced with measurement name
    • -
  • $measurement = replaced with measurement name
    • -
  • $col = replaced with column name
    • -
  • $tag_hostname = replaced with the value of the hostname tag
    • -
  • You can also use [[tag_hostname]] pattern replacement syntax
    • -
-
- -
-
Stacking and fill
-
    -
  • When stacking is enabled it important that points align
    • -
  • If there are missing points for one series it can cause gaps or missing bars
    • -
  • You must use fill(0), and select a group by time low limit
    • -
  • Use the group by time option below your queries and specify for example >10s if your metrics are written every 10 seconds
    • -
  • This will insert zeros for series that are missing measurements and will make stacking work properly
    • -
-
- -
-
Group by time
-
    -
  • Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana
    • -
  • Leave the group by time field empty for each query and it will be calculated based on time range and pixel width of the graph
    • -
  • If you use fill(0) or fill(null) set a low limit for the auto group by time interval
    • -
  • The low limit can only be set in the group by time option below your queries
    • -
  • You set a low limit by adding a greater sign before the interval
    • -
  • Example: >60s if you write metrics to InfluxDB every 60 seconds
    • -
-
- - -
-
- diff --git a/public/app/plugins/datasource/influxdb/partials/query.options.html b/public/app/plugins/datasource/influxdb/partials/query.options.html new file mode 100644 index 00000000000..c794e0b5323 --- /dev/null +++ b/public/app/plugins/datasource/influxdb/partials/query.options.html @@ -0,0 +1,87 @@ +
+
+
    +
  • + +
    • +
  • + Group by time interval +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ +
+ +
+
+
+ +
+
+ +
+
Alias patterns
+
    +
  • $m = replaced with measurement name
    • +
  • $measurement = replaced with measurement name
    • +
  • $col = replaced with column name
    • +
  • $tag_hostname = replaced with the value of the hostname tag
    • +
  • You can also use [[tag_hostname]] pattern replacement syntax
    • +
+
+ +
+
Stacking and fill
+
    +
  • When stacking is enabled it important that points align
    • +
  • If there are missing points for one series it can cause gaps or missing bars
    • +
  • You must use fill(0), and select a group by time low limit
    • +
  • Use the group by time option below your queries and specify for example >10s if your metrics are written every 10 seconds
    • +
  • This will insert zeros for series that are missing measurements and will make stacking work properly
    • +
+
+ +
+
Group by time
+
    +
  • Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana
    • +
  • Leave the group by time field empty for each query and it will be calculated based on time range and pixel width of the graph
    • +
  • If you use fill(0) or fill(null) set a low limit for the auto group by time interval
    • +
  • The low limit can only be set in the group by time option below your queries
    • +
  • You set a low limit by adding a greater sign before the interval
    • +
  • Example: >60s if you write metrics to InfluxDB every 60 seconds
    • +
+
+ + +
+
+ + diff --git a/public/app/plugins/datasource/influxdb/queryCtrl.js b/public/app/plugins/datasource/influxdb/queryCtrl.js index 2772587ddf8..40306cfab38 100644 --- a/public/app/plugins/datasource/influxdb/queryCtrl.js +++ b/public/app/plugins/datasource/influxdb/queryCtrl.js @@ -8,6 +8,19 @@ function (angular, _, InfluxQueryBuilder) { var module = angular.module('grafana.controllers'); + module.directive('metricQueryEditorInfluxdb', function() { + return { + controller: 'InfluxQueryCtrl', + templateUrl: 'app/plugins/datasource/influxdb/partials/query.editor.html', + }; + }); + + module.directive('metricQueryOptionsInfluxdb', function() { + return { + templateUrl: 'app/plugins/datasource/influxdb/partials/query.options.html', + }; + }); + module.controller('InfluxQueryCtrl', function($scope, $timeout, $sce, templateSrv, $q) { $scope.init = function() { @@ -337,6 +350,8 @@ function (angular, _, InfluxQueryBuilder) { return new MetricSegment({value: 'select tag value', fake: true}); }; + $scope.init(); + }); }); diff --git a/public/css/less/tightform.less b/public/css/less/tightform.less index a85e852bcbc..ff43316263d 100644 --- a/public/css/less/tightform.less +++ b/public/css/less/tightform.less @@ -42,12 +42,11 @@ } .tight-form-container { + border-bottom: 1px solid @grafanaTargetBorder; + .tight-form:last-child { border-bottom: none; } - &:last-child { - border-bottom: 1px solid @grafanaTargetBorder; - } } .tight-form-btn { @@ -63,7 +62,7 @@ } .grafana-metric-options { - margin-top: 35px; + margin-top: 25px; } .tight-form-item {