starting to get something working with the graphite target editor

src/app/controllers/graphiteTarget.js

@@ -11,15 +11,11 @@ function (angular, _, config) {
   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};
+      $scope.segments = _.map($scope.target.target.split('.'), function (segmentStr) {
+        return {
+          val: segmentStr,
+          html: segmentStr === '*' ? '<i class="icon-asterisk"><i>' : segmentStr
+        };
       });
     };
 
@@ -31,31 +27,99 @@ function (angular, _, config) {
       }, null);
     }
 
-    $scope.getItems = function (index) {
-      $scope.altSegments = [];
-      var metricPath = getSegmentPathUpTo(index) + '.*';
-      var url = config.graphiteUrl + '/metrics/find/?query=' + metricPath;
-      return $http.get(url)
+    function graphiteMetricQuery(query) {
+      var url = config.graphiteUrl + '/metrics/find/?query=' + query;
+      return $http.get(url);
+    }
+
+    function checkOtherSegments(fromIndex) {
+      var path = getSegmentPathUpTo(fromIndex + 1);
+      return graphiteMetricQuery(path)
         .then(function(result) {
-          $scope.altSegments = result.data;
+          if (result.data.length === 0) {
+            $scope.segments = $scope.segments.splice(0, fromIndex);
+            $scope.segments.push({html: 'select metric'});
+            return;
+          }
+          if (result.data[0].expandable) {
+            if ($scope.segments.length === fromIndex) {
+              $scope.segments.push({html: 'select metric'});
+            }
+            else {
+              return checkOtherSegments(fromIndex + 1);
+            }
+          }
+        });
+    }
+
+    function setSegmentFocus(segmentIndex) {
+      _.each($scope.segments, function(segment, index) {
+        segment.focus = segmentIndex == index;
+      });
+    }
+
+    $scope.getAltSegments = function (index) {
+      $scope.altSegments = [];
+
+      return graphiteMetricQuery(getSegmentPathUpTo(index) + '.*')
+        .then(function(result) {
+          var altSegments = _.map(result.data, function(altSegment) {
+            return {
+              val: altSegment.text,
+              html: altSegment.text,
+              expandable: altSegment.expandable
+            }
+          });
+
+          altSegments.unshift({val: '*', html: '<i class="icon-asterisk"></i>' })
+          $scope.altSegments = altSegments;
         });
     };
 
     $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.segments[segmentIndex].val = $scope.altSegments[altIndex].val;
+      $scope.segments[segmentIndex].html = $scope.altSegments[altIndex].html;
+
+      if ($scope.altSegments[altIndex].expandable) {
+        return checkOtherSegments(segmentIndex + 1)
+          .then(function () {
+            setSegmentFocus(segmentIndex + 1);
+            $scope.targetChanged();
+          });
+      }
+
+      setSegmentFocus(segmentIndex + 1);
       $scope.targetChanged();
     };
 
     $scope.targetChanged = function() {
+      $scope.target.target = getSegmentPathUpTo($scope.segments.length);
       $scope.$parent.get_data();
-      $scope.editMode = false;
-    };
-
-    $scope.edit = function() {
-      $scope.editMode = true;
     };
 
   });
+
+  module.directive('focusMe', function($timeout, $parse) {
+    return {
+      //scope: true,   // optionally create a child scope
+      link: function(scope, element, attrs) {
+        var model = $parse(attrs.focusMe);
+        scope.$watch(model, function(value) {
+          console.log('value=',value);
+          if(value === true) {
+            $timeout(function() {
+              element[0].focus();
+            });
+          }
+        });
+        // to address @blesh's comment, set attribute value to 'false'
+        // on blur event:
+        element.bind('blur', function() {
+           console.log('blur');
+           scope.$apply(model.assign(scope, false));
+        });
+      }
+    };
+  });
+
 });

src/app/panels/graphite/editor.html

@@ -16,7 +16,7 @@
       list-style: none;
       margin: 0;
     }
-    .grafana-segment-list li {
+    .grafana-segment-list > li {
       float: left;
     }
     .grafana-target-segment {
@@ -41,21 +41,20 @@
 
     <table style="margin: 0; padding: 0;width:100%;">
       <tr class="grafana-target-top">
-        <td style="padding-left: 10px;"><i class="icon-eye-open"></i></td>
+        <td style="padding-left: 10px;width: 25px;"><i class="icon-eye-open"></i></td>
         <td>
-          <ul class="grafana-segment-list">
-          <li class="dropdown" ng-repeat="segment in segments">
-            <a  class="grafana-target-segment dropdown-toggle"
-                data-toggle="dropdown" ng-click="getItems($index)"
-                data-placement="bottom" ng-bind-html-unsafe="segment.html"></a>
-            <ul class="dropdown-menu">
-              <li ng-repeat="altSegment in altSegments">
-                <a ng-click="setSegment($index, $parent.$index)">{{altSegment.text}}</a>
-              </li>
-            </ul>
-          </li>
+          <ul class="grafana-segment-list" role="menu">
+            <li class="dropdown" ng-repeat="segment in segments" role="menuitem">
+              <a tabindex="1" class="grafana-target-segment dropdown-toggle"
+                  data-toggle="dropdown" ng-click="getAltSegments($index)" focus-me="segment.focus"
+                  data-placement="bottom" ng-bind-html-unsafe="segment.html"></a>
+              <ul class="dropdown-menu" role="menu">
+                <li ng-repeat="altSegment in altSegments" role="menuitem">
+                  <a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
+                </li>
+              </ul>
+            </li>
           <ul>
-
         </td>
         <td>
             <i class="icon-remove"></i>

src/app/panels/graphite/module.html

@@ -40,6 +40,7 @@
       </a> |&nbsp
     </span>
   </div>
+
   <form class="form-inline bordered histogram-options" ng-show="options">
     <span>
       <div class="checkbox">

src/vendor/bootstrap/less/grafana.less

@@ -76,13 +76,11 @@
   left: 20px;
   right: 20px;
   top: 25px;
+  bottom: 25px;
   outline: 1px solid #101214;
   border-top: 1px solid #3e444c;
   padding: 0 10px 10px 10px;
   background: #202328;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 600px;
 }
 
 .grafana-legend-container {