got subsegment selection working

src/app/controllers/graphiteTarget.js

@@ -1,44 +1,61 @@
 define([
   'angular',
-  'underscore'
+  'underscore',
+  'config'
 ],
-function (angular, _) {
+function (angular, _, config) {
   'use strict';
 
   var module = angular.module('kibana.controllers');
 
-  module.controller('GraphiteTargetCtrl', function($scope) {
+  module.controller('GraphiteTargetCtrl', function($scope, $http) {
+
+    $scope.init = function() {
+      $scope.segments = [];
+      var strSegments = $scope.target.target.split('.');
+      _.each(strSegments, function (segment, index) {
+        if (segment === '*') {
+          $scope.segments[index] = { val: segment, html: '<i class="icon-asterisk"><i>' };
+          return;
+        }
+
+        $scope.segments[index] = { val: segment, html: segment};
+      });
+    };
+
+    function getSegmentPathUpTo(index) {
+      var arr = $scope.segments.slice(0, index);
+
+      return _.reduce(arr, function(result, segment) {
+        return result ? (result + "." + segment.val) : segment.val;
+      }, null);
+    }
+
+    $scope.getItems = function (index) {
+      $scope.altSegments = [];
+      var metricPath = getSegmentPathUpTo(index) + '.*';
+      var url = config.graphiteUrl + '/metrics/find/?query=' + metricPath;
+      return $http.get(url)
+        .then(function(result) {
+          $scope.altSegments = result.data;
+        });
+    };
 
-      $scope.init = function() {
-        $scope.segments = [];
-        var strSegments = $scope.target.target.split('.');
-        _.each(strSegments, function (segment, index) {
-          if (segment === '*') {
-            $scope.segments[index] = { val: segment, html: '<i class="icon-asterisk"><i>' };
-            return;
-          }
+    $scope.setSegment = function (altIndex, segmentIndex) {
+      $scope.segments[segmentIndex].val = $scope.altSegments[altIndex].text;
+      $scope.segments[segmentIndex].html = $scope.altSegments[altIndex].text;
+      $scope.target.target = getSegmentPathUpTo($scope.segments.length);
+      $scope.targetChanged();
+    };
 
-          $scope.segments[index] = { val: segment, html: segment};
-        });
-      };
-
-      $scope.setSegmentStar = function (index) {
-        $scope.segments[index].val = '*';
-        $scope.segments[index].html = '<i class="icon-asterisk"><i>';
-        $scope.target.target = _.reduce($scope.segments, function(result, segment) {
-            return result ? (result + "." + segment.val) : segment.val;
-          }, null);
-        $scope.targetChanged();
-      };
-
-      $scope.targetChanged = function() {
-        $scope.$parent.get_data();
-        $scope.editMode = false;
-      };
-
-      $scope.edit = function() {
-        $scope.editMode = true;
-      };
-  });
+    $scope.targetChanged = function() {
+      $scope.$parent.get_data();
+      $scope.editMode = false;
+    };
 
+    $scope.edit = function() {
+      $scope.editMode = true;
+    };
+
+  });
 });

src/app/panels/graphite/editor.html

@@ -46,15 +46,16 @@
           <ul class="grafana-segment-list">
           <li class="dropdown" ng-repeat="segment in segments">
             <a  class="grafana-target-segment dropdown-toggle"
-                data-toggle="dropdown"
+                data-toggle="dropdown" ng-click="getItems($index)"
                 data-placement="bottom" ng-bind-html-unsafe="segment.html"></a>
             <ul class="dropdown-menu">
-              <li>
-                <a ng-click="setSegmentStar($index)">All <i class="icon-star" /></a>
+              <li ng-repeat="altSegment in altSegments">
+                <a ng-click="setSegment($index, $parent.$index)">{{altSegment.text}}</a>
               </li>
             </ul>
           </li>
           <ul>
+
         </td>
         <td>
             <i class="icon-remove"></i>

src/vendor/bootstrap/less/grafana.less

@@ -81,6 +81,7 @@
   padding: 0 10px 10px 10px;
   background: #202328;
   overflow-y: auto;
+  overflow-x: hidden;
   height: 600px;
 }