working on graphite target editor

src/app/controllers/graphiteTarget.js

@@ -14,15 +14,21 @@ function (angular, _) {
         var strSegments = $scope.target.target.split('.');
         _.each(strSegments, function (segment, index) {
           if (segment === '*') {
-            segment = '<i class="icon-asterisk"><i>';
+            $scope.segments[index] = { val: segment, html: '<i class="icon-asterisk"><i>' };
+            return;
           }
 
-          $scope.segments[index] = { val: segment };
+          $scope.segments[index] = { val: segment, html: segment};
         });
       };
 
       $scope.setSegmentStar = function (index) {
-        $scope.segments[index] = {val: '<i class="icon-asterisk"><i>' };
+        $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() {

src/app/panels/graphite/editor.html

@@ -15,7 +15,6 @@
     .grafana-segment-list {
       list-style: none;
       margin: 0;
-      margin-left: 5px;
     }
     .grafana-segment-list li {
       float: left;
@@ -42,13 +41,13 @@
 
     <table style="margin: 0; padding: 0;width:100%;">
       <tr class="grafana-target-top">
-        <td style="padding-left: 5px;"><i class="icon-eye-open"></i></td>
+        <td style="padding-left: 10px;"><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"
-                data-placement="bottom" ng-bind-html-unsafe="segment.val"></a>
+                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>

src/vendor/bootstrap/less/grafana.less

@@ -80,6 +80,8 @@
   border-top: 1px solid #3e444c;
   padding: 0 10px 10px 10px;
   background: #202328;
+  overflow-y: auto;
+  height: 600px;
 }
 
 .grafana-legend-container {