began work on graphite target editor

.jshintrc

@@ -29,6 +29,7 @@
   "globals": {
     "define": true,
     "require": true,
-    "Chromath": false
+    "Chromath": false,
+    "setImmediate": true
   }
 }

src/app/controllers/all.js

@@ -5,5 +5,6 @@ define([
   './pulldown',
   './zoom',
   './search',
-  './metricKeys'
+  './metricKeys',
+  './graphiteTarget'
 ], function () {});

src/app/controllers/graphiteTarget.js

@@ -0,0 +1,25 @@
+define([
+  'angular',
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('kibana.controllers');
+
+  module.controller('GraphiteTargetCtrl', function($scope) {
+
+      $scope.init = function() {
+        console.log('target:', $scope.target);
+      };
+
+      $scope.targetChanged = function() {
+        $scope.$parent.get_data();
+        $scope.editMode = false;
+      };
+
+      $scope.edit = function() {
+        $scope.editMode = true;
+      };
+  });
+
+});

src/app/controllers/search.js

@@ -16,10 +16,10 @@ function (angular, _, config, $) {
       $scope.giveSearchFocus = 0;
       $scope.selectedIndex = null;
 
-      keyboardManager.bind('shift+s', function() {
+      /*keyboardManager.bind('shift+s', function() {
         $element.find('.dropdown').addClass('open');
         $scope.giveSearchFocus += 1;
-      });
+      });*/
 
       keyboardManager.bind('esc', function() {
         $element.find('.dropdown').removeClass('open');

src/app/panels/graphite/editor.html

@@ -1,13 +1,21 @@
 <div class="editor-row">
 
-	<div ng-repeat="target in panel.targets">
+	<div ng-repeat="target in panel.targets" ng-controller="GraphiteTargetCtrl">
+  	<div class="row-fluid">
+  		<div class="span12">
+        <span ng-if="!editMode">
+          {{target.target}}
+        </span>
 
-	<div class="row-fluid">
-		<div class="span12">
-  		<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" bs-typeahead="typeAheadSource" data-min-length=0 />
-  		<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
-  	</div>
-  </div>
+    		<input ng-if="editMode" type="text" ng-model="target.target" class="input-large" style="width:100%" ng-model-onblur ng-change="targetChanged()" bs-typeahead="typeAheadSource" data-min-length=0 />
+
+        <span ng-if="!editMode">
+          <i ng-click="edit()" class="pointer icon-edit" style="padding: 0 7px;"></i>
+          <i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="padding: 0 7px;"></i>
+    	 </span>
+
+      </div>
+    </div>
   </div>
 
   <a ng-click="add_target(panel.target)"  ng-show="editor.index == 1">Add target</a>

src/app/panels/graphite/module.html

@@ -1,4 +1,4 @@
-<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-class='{"panel-full-edit-mode": inEditMode}'>
+<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-class='{"panel-full-edit": inEditMode}'>
   <style>
     .histogram-legend {
       display:inline-block;
@@ -86,15 +86,17 @@
   <div histogram-chart class="pointer histogram-chart" params="{{panel}}">
   </div>
 
-  <span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend">
-      <i class='icon-circle' ng-style="{color: series.color}"></i>
-      <span class='small histogram-legend-item'>
-        <span ng-if="panel.show_query">{{series.alias || series.query}}</span>
-        <span ng-if="!panel.show_query">{{series.alias}}</span>
-      </span>
-  </span>
+  <div class="grafana-legend-container">
+    <span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend">
+        <i class='icon-circle' ng-style="{color: series.color}"></i>
+        <span class='small histogram-legend-item'>
+          <span ng-if="panel.show_query">{{series.alias || series.query}}</span>
+          <span ng-if="!panel.show_query">{{series.alias}}</span>
+        </span>
+    </span>
+  </div>
 
-  <div class="fluid-row panel-full-edit-mode-controls" ng-show="inEditMode" style="margin: 20px;">
+  <div class="fluid-row panel-full-edit-controls" ng-show="inEditMode">
       <div ng-model="editor.index" bs-tabs>
         <div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
         </div>

src/vendor/bootstrap/less/grafana.less

@@ -69,7 +69,7 @@
   //display: none;
 }
 
-.panel-full-edit-mode {
+.panel-full-edit {
   z-index: 1500;
   display: block;
   position: fixed;
@@ -81,3 +81,17 @@
   padding: 0 10px 10px 10px;
   background: #202328;
 }
+
+.grafana-legend-container {
+  text-align: center;
+}
+
+.panel-full-edit-controls {
+  margin: 11px;
+  .nav-tabs > li > a {
+    line-height: 15px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    font-size: 0.8rem;
+  }
+}