working on graphite target editor

src/app/controllers/graphiteTarget.js

 define([
 define([
   'angular',
   'angular',
+  'underscore'
 ],
 ],
-function (angular) {
+function (angular, _) {
   'use strict';
   'use strict';
 
 
   var module = angular.module('kibana.controllers');
   var module = angular.module('kibana.controllers');
@@ -9,7 +10,19 @@ function (angular) {
   module.controller('GraphiteTargetCtrl', function($scope) {
   module.controller('GraphiteTargetCtrl', function($scope) {
 
 
       $scope.init = function() {
       $scope.init = function() {
-        console.log('target:', $scope.target);
+        $scope.segments = [];
+        var strSegments = $scope.target.target.split('.');
+        _.each(strSegments, function (segment, index) {
+          if (segment === '*') {
+            segment = '<i class="icon-asterisk"><i>';
+          }
+
+          $scope.segments[index] = { val: segment };
+        });
+      };
+
+      $scope.setSegmentStar = function (index) {
+        $scope.segments[index] = {val: '<i class="icon-asterisk"><i>' };
       };
       };
 
 
       $scope.targetChanged = function() {
       $scope.targetChanged = function() {

src/app/panels/graphite/editor.html

 <div class="editor-row">
 <div class="editor-row">
+  <style>
 
 
-	<div ng-repeat="target in panel.targets" ng-controller="GraphiteTargetCtrl">
-  	<div class="row-fluid">
+    .grafana-target {
+      border-top: 1px solid #444444;
+      border-bottom: 1px solid #444444;
+    }
+    .grafana-target-top td {
+      border-top: 1px solid black;
+      border-bottom: 1px solid black;
+      background: #202020;
+      padding: 0;
+      margin: 0;
+    }
+    .grafana-segment-list {
+      list-style: none;
+      margin: 0;
+      margin-left: 5px;
+    }
+    .grafana-segment-list li {
+      float: left;
+    }
+    .grafana-target-segment {
+      padding: 5px 7px;
+      display: inline-block;
+      font-weight: normal;
+      border-left: 1px solid #050505;
+      color: #c8c8c8;
+    }
+    .grafana-target .dropdown {
+      padding: 0; margin: 0;
+    }
+    .grafana-target-segment:hover {
+      text-decoration: none;
+    }
+    a.grafana-target-segment:focus {
+      outline: 0;
+    }
+  </style>
+
+	<div class="grafana-target" ng-repeat="target in panel.targets" ng-controller="GraphiteTargetCtrl" ng-init="init()">
+
+    <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>
+          <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>
+            <ul class="dropdown-menu">
+              <li>
+                <a ng-click="setSegmentStar($index)">All <i class="icon-star" /></a>
+              </li>
+            </ul>
+          </li>
+          <ul>
+        </td>
+        <td>
+            <i class="icon-remove"></i>
+        </td>
+      </tr>
+    </table>
+    <!-- <div class="row-fluid">
   		<div class="span12">
   		<div class="span12">
         <span ng-if="!editMode">
         <span ng-if="!editMode">
           {{target.target}}
           {{target.target}}
@@ -15,9 +76,10 @@
     	 </span>
     	 </span>
 
 
       </div>
       </div>
-    </div>
+    </div> -->
   </div>
   </div>
 
 
-  <a ng-click="add_target(panel.target)"  ng-show="editor.index == 1">Add target</a>
-
+  <div class="row-fluid" style="margin-top: 20px">
+    <a class="pull-right" ng-click="add_target(panel.target)"  ng-show="editor.index == 1">Add target</a>
+  </div>
 </div>
 </div>
\ No newline at end of file

src/app/panels/graphite/module.js

@@ -211,6 +211,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
     $scope.init = function() {
     $scope.init = function() {
       // Hide view options by default
       // Hide view options by default
       $scope.options = false;
       $scope.options = false;
+      $scope.editor = {index: 1};
 
 
       // Always show the query if an alias isn't set. Users can set an alias if the query is too
       // Always show the query if an alias isn't set. Users can set an alias if the query is too
       // long
       // long
@@ -422,7 +423,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
       $scope.$emit('render');
       $scope.$emit('render');
     };
     };
 
 
-
     $scope.setEditorTabs = function(panelMeta) {
     $scope.setEditorTabs = function(panelMeta) {
       $scope.editorTabs = ['General'];
       $scope.editorTabs = ['General'];
       if(!_.isUndefined(panelMeta.editorTabs)) {
       if(!_.isUndefined(panelMeta.editorTabs)) {

src/app/partials/dashboard.html

@@ -14,6 +14,7 @@
   <div class="row-fluid">
   <div class="row-fluid">
     <div class="row-fluid container" style="margin-top:10px; width:98%">
     <div class="row-fluid container" style="margin-top:10px; width:98%">
       <div ng-show="fullEditMode" class="modal-backdrop fade in"></div>
       <div ng-show="fullEditMode" class="modal-backdrop fade in"></div>
+
       <!-- Rows -->
       <!-- Rows -->
       <div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
       <div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
         <div class="row-control">
         <div class="row-control">