improved error handling for targets and templates

src/app/controllers/graphiteTarget.js

@@ -98,7 +98,7 @@ function (angular, _, config, graphiteFuncs, Parser) {
       }
     }
 
-    function getSegmentPathUpTo(index, interpolateTemplate) {
+    function getSegmentPathUpTo(index) {
       var arr = $scope.segments.slice(0, index);
 
       return _.reduce(arr, function(result, segment) {
@@ -112,7 +112,7 @@ function (angular, _, config, graphiteFuncs, Parser) {
         return;
       }
 
-      var path = getSegmentPathUpTo(fromIndex + 1, true);
+      var path = getSegmentPathUpTo(fromIndex + 1);
       return graphiteSrv.metricFindQuery(path)
         .then(function(segments) {
           if (segments.length === 0) {
@@ -128,6 +128,9 @@ function (angular, _, config, graphiteFuncs, Parser) {
               return checkOtherSegments(fromIndex + 1);
             }
           }
+        })
+        .then(null, function(err) {
+          $scope.parserError = err.message || 'Failed to issue metric query';
         });
     }
 
@@ -157,21 +160,30 @@ function (angular, _, config, graphiteFuncs, Parser) {
         '*' : getSegmentPathUpTo(index) + '.*';
 
       return graphiteSrv.metricFindQuery(query)
-        .then(function(result) {
-          var altSegments = _.map(result.data, function(altSegment) {
-            return {
-              val: altSegment.text,
-              html: altSegment.text,
-              expandable: altSegment.expandable
-            };
+        .then(function(segments) {
+          _.each(segments, function(segment) {
+            segment.html = segment.val = segment.text;
           });
 
-          altSegments.unshift({val: '*', html: '<i class="icon-asterisk"></i>' });
-          $scope.altSegments = altSegments;
+          _.each(filterSrv.list, function(filter) {
+            segments.unshift({
+              type: 'template',
+              html: '[[' + filter.name + ']]',
+              val: '[[' + filter.name + ']]'
+            });
+          });
+
+          segments.unshift({val: '*', html: '<i class="icon-asterisk"></i>' });
+          $scope.altSegments = segments;
+        })
+        .then(null, function(err) {
+          $scope.parserError = err.message || 'Failed to issue metric query';
         });
     };
 
     $scope.setSegment = function (altIndex, segmentIndex) {
+      delete $scope.parserError;
+
       $scope.segments[segmentIndex].val = $scope.altSegments[altIndex].val;
       $scope.segments[segmentIndex].html = $scope.altSegments[altIndex].html;
 

src/app/services/graphite/graphiteSrv.js

@@ -9,25 +9,29 @@ function (angular, _, $, config) {
 
   var module = angular.module('kibana.services');
 
-  module.service('graphiteSrv', function($http, filterSrv) {
+  module.service('graphiteSrv', function($http, $q, filterSrv) {
 
     this.query = function(options) {
-      var graphOptions = {
-        from: $.plot.formatDate(options.range.from, '%H%:%M_%Y%m%d'),
-        until: $.plot.formatDate(options.range.to, '%H%:%M_%Y%m%d'),
-        targets: options.targets,
-        maxDataPoints: options.maxDataPoints
-      };
+      try {
+        var graphOptions = {
+          from: $.plot.formatDate(options.range.from, '%H%:%M_%Y%m%d'),
+          until: $.plot.formatDate(options.range.to, '%H%:%M_%Y%m%d'),
+          targets: options.targets,
+          maxDataPoints: options.maxDataPoints
+        };
 
-      var params = buildGraphitePostParams(graphOptions);
+        var params = buildGraphitePostParams(graphOptions);
 
-      var url = config.graphiteUrl + '/render/';
-      return $http({
-        method: 'POST',
-        url: url,
-        data: params.join('&'),
-        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
-      });
+        return $http({
+          method: 'POST',
+          url: config.graphiteUrl + '/render/',
+          data: params.join('&'),
+          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+        });
+      }
+      catch(err) {
+        return $q.reject(err);
+      }
     };
 
     this.match = function(targets, graphiteTargetStr) {
@@ -47,7 +51,15 @@ function (angular, _, $, config) {
     };
 
     this.metricFindQuery = function(query) {
-      var url = config.graphiteUrl + '/metrics/find/?query=' + query;
+      var interpolated;
+      try {
+        interpolated = filterSrv.applyFilterToTarget(query);
+      }
+      catch(err) {
+        return $q.reject(err);
+      }
+
+      var url = config.graphiteUrl + '/metrics/find/?query=' + interpolated;
       return $http.get(url)
         .then(function(results) {
           return _.map(results.data, function(metric) {