got subsegment selection working

src/app/controllers/graphiteTarget.js

 define([
 define([
   'angular',
   'angular',
-  'underscore'
+  'underscore',
+  'config'
 ],
 ],
-function (angular, _) {
+function (angular, _, config) {
   'use strict';
   'use strict';
 
 
   var module = angular.module('kibana.controllers');
   var module = angular.module('kibana.controllers');
 
 
-  module.controller('GraphiteTargetCtrl', function($scope) {
+  module.controller('GraphiteTargetCtrl', function($scope, $http) {
 
 
     $scope.init = function() {
     $scope.init = function() {
       $scope.segments = [];
       $scope.segments = [];
@@ -22,12 +23,28 @@ function (angular, _) {
       });
       });
     };
     };
 
 
-      $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) {
+    function getSegmentPathUpTo(index) {
+      var arr = $scope.segments.slice(0, index);
+
+      return _.reduce(arr, function(result, segment) {
         return result ? (result + "." + segment.val) : segment.val;
         return result ? (result + "." + segment.val) : segment.val;
       }, null);
       }, 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.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.targetChanged();
     };
     };
 
 
@@ -39,6 +56,6 @@ function (angular, _) {
     $scope.edit = function() {
     $scope.edit = function() {
       $scope.editMode = true;
       $scope.editMode = true;
     };
     };
-  });
 
 
+  });
 });
 });
\ No newline at end of file

src/app/panels/graphite/editor.html

@@ -46,15 +46,16 @@
           <ul class="grafana-segment-list">
           <ul class="grafana-segment-list">
           <li class="dropdown" ng-repeat="segment in segments">
           <li class="dropdown" ng-repeat="segment in segments">
             <a  class="grafana-target-segment dropdown-toggle"
             <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>
                 data-placement="bottom" ng-bind-html-unsafe="segment.html"></a>
             <ul class="dropdown-menu">
             <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>
               </li>
             </ul>
             </ul>
           </li>
           </li>
           <ul>
           <ul>
+
         </td>
         </td>
         <td>
         <td>
             <i class="icon-remove"></i>
             <i class="icon-remove"></i>

src/vendor/bootstrap/less/grafana.less

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