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);
       var arr = $scope.segments.slice(0, index);
 
 
       return _.reduce(arr, function(result, segment) {
       return _.reduce(arr, function(result, segment) {
@@ -112,7 +112,7 @@ function (angular, _, config, graphiteFuncs, Parser) {
         return;
         return;
       }
       }
 
 
-      var path = getSegmentPathUpTo(fromIndex + 1, true);
+      var path = getSegmentPathUpTo(fromIndex + 1);
       return graphiteSrv.metricFindQuery(path)
       return graphiteSrv.metricFindQuery(path)
         .then(function(segments) {
         .then(function(segments) {
           if (segments.length === 0) {
           if (segments.length === 0) {
@@ -128,6 +128,9 @@ function (angular, _, config, graphiteFuncs, Parser) {
               return checkOtherSegments(fromIndex + 1);
               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) + '.*';
         '*' : getSegmentPathUpTo(index) + '.*';
 
 
       return graphiteSrv.metricFindQuery(query)
       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;
+          });
+
+          _.each(filterSrv.list, function(filter) {
+            segments.unshift({
+              type: 'template',
+              html: '[[' + filter.name + ']]',
+              val: '[[' + filter.name + ']]'
+            });
           });
           });
 
 
-          altSegments.unshift({val: '*', html: '<i class="icon-asterisk"></i>' });
-          $scope.altSegments = altSegments;
+          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) {
     $scope.setSegment = function (altIndex, segmentIndex) {
+      delete $scope.parserError;
+
       $scope.segments[segmentIndex].val = $scope.altSegments[altIndex].val;
       $scope.segments[segmentIndex].val = $scope.altSegments[altIndex].val;
       $scope.segments[segmentIndex].html = $scope.altSegments[altIndex].html;
       $scope.segments[segmentIndex].html = $scope.altSegments[altIndex].html;
 
 

src/app/services/graphite/graphiteSrv.js

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