AMBARI-14985. Templated Dashboard for Ambari-Metrics-Grafana. (Prajwal Rao via yusaku)

ambari-metrics/ambari-metrics-grafana/README.md

@@ -240,4 +240,24 @@ http://GRAFANA_HOST:3000
 
 ---
 
+<a name="templating"></a>
+### Templating
 
+**Templating allows you to dynamically change graphs by selecting your host from dropdown. To created a templated dashboard, you can follow these steps.**
+
+> 1. Click on the "cog" on the top, select "Templating"
+> 2. Click on "+ New"
+> 3. Enter a name for your variable. Ex: "hosts".
+> 4. Type: query
+> 5. Datasource: This should be set to the name you had chosen for your Datasource. Default is "AMBARI_METRICS"
+> 6. Query: This needs to be "hosts". It is case sensitive as well.
+> 7. Once you've entered the query and you focus your cursor anywhere else, you should see the "Preview of values" updated with the hostnames in your cluster.
+> 8. You can close the Templating Variables section.
+> 9. You should now have a dropdown on your dashboard with hosts from your cluster.
+> 10. When you now add a graph, and select your component and metric, the plotted graph will show you metrics for the selected hostname from the dropdown.
+> 11. The legend on the graph will also now update with the selected host.
+
+**Templalted dashboards do support multiple metrics in a single graph.** 
+
+
+![Templating](screenshots/20-templating.png)

ambari-metrics/ambari-metrics-grafana/ambari-metrics/datasource.js

@@ -27,7 +27,7 @@ define([
 
       var module = angular.module('grafana.services');
 
-      module.factory('AmbariMetricsDatasource', function ($q, backendSrv) {
+      module.factory('AmbariMetricsDatasource', function ($q, backendSrv, templateSrv) {
         /**
          * AMS Datasource Constructor
          */
@@ -43,7 +43,9 @@ define([
             .then(function (items) {
               allMetrics = [];
               appIds = [];
-              var fake = "timeline_metric_store_watcher"; delete items[fake];
+              //We remove a couple of components from the list that do not contain any
+              //pertinent metrics.
+              delete items.timeline_metric_store_watcher; delete items.amssmoketestfake;
               for (var key in items) {
                 if (items.hasOwnProperty(key)) {
                   items[key].forEach(function (_item) {
@@ -97,10 +99,11 @@ define([
               }
               var series = [];
               var metricData = res.metrics[0].metrics;
+              var hostLegend = res.metrics[0].hostname ? ' on ' + res.metrics[0].hostname : '';
               var timeSeries = {};
               if (target.hosts === undefined || target.hosts.trim() === "") {
                 timeSeries = {
-                  target: target.metric,
+                  target: target.metric + hostLegend,
                   datapoints: []
                 };
               } else {
@@ -119,81 +122,42 @@ define([
             };
 
           };
-          var precisionSetting = '';
+
           var getHostAppIdData = function(target) {
-            if (target.shouldAddPrecision) {
-              precisionSetting = '&precision=' + target.precision;
-            } else {
-              precisionSetting = '';
-            }
-            if (target.shouldAddPrecision && target.shouldComputeRate) {
-              return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + "._rate._"
-                + target.aggregator + "&hostname=" + target.hosts + '&appId=' + target.app + '&startTime=' + from
-                + '&endTime=' + to + precisionSetting).then(
-                  getMetricsData(target)
-                );
-            } else if (target.shouldComputeRate) {
-              return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + "._rate._"
-                + target.aggregator + "&hostname=" + target.hosts + '&appId=' + target.app + '&startTime=' + from
-                + '&endTime=' + to).then(
-                  getMetricsData(target)
-                );
-            } else if (target.shouldAddPrecision){
-              return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + "._"
-                + target.aggregator + "&hostname=" + target.hosts + '&appId=' + target.app + '&startTime=' + from
-                + '&endTime=' + to + precisionSetting).then(
-                  getMetricsData(target)
-                );
-            } else {
-              return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + "._"
-                + target.aggregator + "&hostname=" + target.hosts + '&appId=' + target.app + '&startTime=' + from
-                + '&endTime=' + to).then(
+            var precision = target.shouldAddPrecision ? '&precision=' + target.precision : '';
+            var rate = target.shouldComputeRate ? '._rate._' : '._';
+            return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + rate +
+                target.aggregator + "&hostname=" + target.hosts + '&appId=' + target.app + '&startTime=' + from +
+                '&endTime=' + to + precision).then(
                 getMetricsData(target)
-              );
-            }
+            );
           };
 
           var getServiceAppIdData = function(target) {
-            if (target.shouldAddPrecision) { precisionSetting = '&precision=' + target.precision;
-            } else { precisionSetting = ''; }
-            if (target.shouldAddPrecision && target.shouldComputeRate) {
-              return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + "._rate._"
-                + target.aggregator + '&appId=' + target.app + '&startTime=' + from + '&endTime=' + to + precisionSetting)
-              .then(
-                getMetricsData(target)
-              );
-            } else if (target.shouldAddPrecision) {
-              return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + "._"
-                + target.aggregator + '&appId=' + target.app + '&startTime=' + from + '&endTime=' + to + precisionSetting)
-              .then(
-                getMetricsData(target)
-              );
-            } else if (target.shouldComputeRate) {
-              return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + "._rate._"
-                + target.aggregator + '&appId=' + target.app + '&startTime=' + from + '&endTime=' + to).then(
-                getMetricsData(target)
-              );
-            } else {
-              return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + "._"
-                + target.aggregator + '&appId=' + target.app + '&startTime=' + from + '&endTime=' + to).then(
-                getMetricsData(target)
-              );
-            }
+            var templatedHost = (_.isEmpty(templateSrv.variables)) ? "" : templateSrv.variables[0].options.filter(function(host)
+              { return host.selected; }).map(function(hostName) { return hostName.value; });
+            var precision = target.shouldAddPrecision ? '&precision=' + target.precision : '';
+            var rate = target.shouldComputeRate ? '._rate._' : '._';
+            return backendSrv.get(self.url + '/ws/v1/timeline/metrics?metricNames=' + target.metric + rate
+              + target.aggregator + '&hostname=' + templatedHost + '&appId=' + target.app + '&startTime=' + from +
+              '&endTime=' + to + precision).then(
+              getMetricsData(target)
+            );
           };
 
           // Time Ranges
           var from = Math.floor(options.range.from.valueOf() / 1000);
           var to = Math.floor(options.range.to.valueOf() / 1000);
-
           var metricsPromises = _.map(options.targets, function(target) {
-            console.debug('target app=' + target.app + ',' +
-              'target metric=' + target.metric + ' on host=' + target.hosts);
-            if (!!target.hosts) {
-              return getHostAppIdData(target);
-            } else {
-              return getServiceAppIdData(target);
-            }
-          });
+              console.debug('target app=' + target.app + ',' +
+                'target metric=' + target.metric + ' on host=' + target.hosts);
+              if (!!target.hosts) {
+                return getHostAppIdData(target);
+              } else {
+                return getServiceAppIdData(target);
+              }
+            });
+
           return $q.all(metricsPromises).then(function(metricsDataArray) {
             var data = _.map(metricsDataArray, function(metricsData) {
               return metricsData.data;
@@ -214,6 +178,32 @@ define([
           return $q.when([]);
         };
 
+        /**
+         * AMS Datasource Templating Variables.
+         */
+        AmbariMetricsDatasource.prototype.metricFindQuery = function (query) {
+          var interpolated;
+          try {
+            interpolated = templateSrv.replace(query);
+          } catch (err) {
+            return $q.reject(err);
+          }
+          return this.doAmbariRequest({
+                method: 'GET',
+                url: '/ws/v1/timeline/metrics/' + interpolated
+              })
+              .then(function (results) {
+                //Remove fakehostname from the list of hosts on the cluster.
+                var fake = "fakehostname"; delete results.data[fake];
+                return _.map(_.keys(results.data), function (hostName) {
+                  return {
+                        text: hostName,
+                        expandable: hostName.expandable ? true : false
+                      };
+                });
+              });
+        };
+
         /**
          * AMS Datasource  - Test Data Source Connection.
          *
@@ -277,6 +267,7 @@ define([
           console.log(query);
           return this.doAmbariRequest({method: 'GET', url: '/ws/v1/timeline/metrics/hosts'})
             .then(function (results) {
+              //Remove fakehostname from the list of hosts on the cluster.
               var fake = "fakehostname"; delete results.data[fake];
               return _.map(Object.keys(results.data), function (hostName) {
                 return {text: hostName};
@@ -301,4 +292,4 @@ define([
         return AmbariMetricsDatasource;
       });
     }
-);
+);

ambari-metrics/ambari-metrics-grafana/ambari-metrics/partials/query.editor.html

@@ -82,10 +82,10 @@
         </li>
 
 
-        <li class="tight-form-item" style="width: 86px">
-            Hosts <a bs-tooltip="'if host is selected, aggregator is ignored.'" data-placement="bottom"><i class="fa fa-info-circle"></i></a>
+        <li class="tight-form-item" style="width: 86px" ng-hide="dashboard.templating.list.length > 0">
+            Hosts
         </li>
-        <li>
+        <li ng-hide="dashboard.templating.list.length > 0">
             <input type="text" class="input-large tight-form-input" ng-model="target.hosts"
                    spellcheck='false' bs-typeahead="suggestHosts" placeholder="host name" data-min-length=0 data-items=100
                    ng-blur="targetBlur()">