target editor is starting to work better, now switch between text edit mode and easy gui version

src/app/controllers/graphiteTarget.js

@@ -13,22 +13,32 @@ function (angular, _, config, graphiteFunctions, Parser) {
   module.controller('GraphiteTargetCtrl', function($scope, $http) {
 
     $scope.init = function() {
+      $scope.funcDefs = graphiteFunctions;
+      parseTarget();
+      console.log('init:');
+    };
+
+    function parseTarget() {
       $scope.functions = [];
       $scope.segments = [];
-      $scope.funcDefs = graphiteFunctions;
       $scope.showTextEditor = false;
 
+      delete $scope.parserError;
+
       var parser = new Parser($scope.target.target);
       var astNode = parser.getAst();
 
-      console.log('GraphiteTargetCtrl:init -> target', $scope.target.target);
-      console.log('GraphiteTargetCtrl:init -> ast', astNode);
+      if (parser.error) {
+        $scope.parserError = parser.error.text + " at position: " + parser.error.pos;
+        $scope.showTextEditor = true;
+        return;
+      }
 
-      parseTargetExpression(astNode);
+      parseTargeRecursive(astNode);
       checkOtherSegments($scope.segments.length);
-    };
+    }
 
-    function parseTargetExpression(astNode, func, index) {
+    function parseTargeRecursive(astNode, func, index) {
       if (astNode === null) {
         return null;
       }
@@ -36,10 +46,10 @@ function (angular, _, config, graphiteFunctions, Parser) {
       if (astNode.type === 'function') {
         var innerFunc = {};
         innerFunc.def = _.findWhere($scope.funcDefs, { name: astNode.name });
-        innerFunc.params = innerFunc.def.defaultParams;
+        innerFunc.params = innerFunc.def.defaultParams.slice(0);
 
         _.each(astNode.params, function(param, index) {
-          parseTargetExpression(param, innerFunc, index);
+          parseTargeRecursive(param, innerFunc, index);
         });
 
         innerFunc.text = getFuncText(innerFunc.def, innerFunc.params);
@@ -168,10 +178,18 @@ function (angular, _, config, graphiteFunctions, Parser) {
       $scope.targetChanged();
     };
 
+    $scope.targetTextChanged = function() {
+      parseTarget();
+      $scope.$parent.get_data();
+    };
+
     $scope.targetChanged = function() {
+      if ($scope.parserError) {
+        return;
+      }
+
       var target = getSegmentPathUpTo($scope.segments.length);
       target = _.reduce($scope.functions, wrapFunction, target);
-      console.log('target: ', target);
       $scope.target.target = target;
       $scope.$parent.get_data();
     };
@@ -189,7 +207,7 @@ function (angular, _, config, graphiteFunctions, Parser) {
     $scope.addFunction = function(funcDef) {
       $scope.functions.push({
         def: funcDef,
-        params: funcDef.defaultParams,
+        params: funcDef.defaultParams.slice(0),
         text: getFuncText(funcDef, funcDef.defaultParams)
       });
       $scope.targetChanged();

src/app/directives/kibanaPanel.js

@@ -34,11 +34,6 @@ function (angular) {
             '<span class="row-text">{{panel.type}}</span>'+
           '</span>' +
 
-          '<span class="row-button extra" ng-show="panel.editable != false">' +
-            '<span bs-modal="\'app/partials/paneleditor.html\'" class="pointer" ng-click="openConfigureModal($event)" >'+
-            '<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
-          '</span>' +
-
           '<span ng-repeat="task in panelMeta.modals" class="row-button extra" ng-show="task.show">' +
             '<span bs-modal="task.partial" class="pointer"><i ' +
               'bs-tooltip="task.description" ng-class="task.icon" class="pointer"></i></span>'+

src/app/panels/graphite/editor.html

@@ -5,7 +5,7 @@
       <div class="grafana-target-inner">
         <ul class="grafana-target-controls">
           <li>
-            <a class="pointer" tabindex="1" ng-click="showTextEditor = true">
+            <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
               <i class="icon-pencil"></i>
             </a>
           </li>
@@ -22,19 +22,23 @@
         </ul>
 
         <ul class="grafana-target-controls-left">
-          <li>
+          <li ng-hide="parserError">
             <a class="grafana-target-segment" ng-click="hideit()" role="menuitem">
               <i class="icon-eye-open"></i>
             </a>
           </li>
+          <li ng-show="parserError">
+            <a class="grafana-target-segment" bs-tooltip="parserError" style="color: rgb(229, 189, 28)" ng-click="hideit()" role="menuitem">
+              <i class="icon-warning-sign"></i>
+            </a>
+          </li>
         </ul>
 
         <input  type="text"
                 class="grafana-target-text-input"
                 ng-model="target.target"
                 focus-me="showTextEditor"
-                ng-blur="showTextEditor = false"
-                ng-model-onblur ng-change="targetChanged()"
+                ng-model-onblur ng-change="targetTextChanged()"
                 ng-show="showTextEditor" />
 
         <ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor">

src/app/panels/graphite/module.html

@@ -105,7 +105,7 @@
       <div ng-show="editorTabs[editor.index] == 'General'">
         <div ng-include src="'app/partials/panelgeneral.html'"></div>
       </div>
-      <div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
+      <div ng-repeat="tab in panelMeta.fullEditorTabs" ng-show="editorTabs[editor.index] == tab.title">
         <div ng-include src="tab.src"></div>
       </div>
   </div>

src/app/panels/graphite/module.js

@@ -46,7 +46,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
           show: $scope.panel.spyable
         }
       ],
-      editorTabs : [
+      editorTabs: [],
+
+      fullEditorTabs : [
         {
           title:'Targets',
           src:'app/panels/graphite/editor.html'
@@ -433,10 +435,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
     };
 
     $scope.setEditorTabs = function(panelMeta) {
-      $scope.editorTabs = ['General'];
-      if(!_.isUndefined(panelMeta.editorTabs)) {
-        $scope.editorTabs =  _.union($scope.editorTabs,_.pluck(panelMeta.editorTabs,'title'));
-      }
+      $scope.editorTabs = _.union(['General'],_.pluck(panelMeta.fullEditorTabs,'title'));
       return $scope.editorTabs;
     };
 

src/vendor/bootstrap/less/grafana.less

@@ -182,12 +182,14 @@
 }
 
 input[type=text].grafana-target-text-input {
-  padding: 2px 6px;
-  margin: 2px;
+  padding: 5px 7px;
+  border: 1px solid #050505;
+  margin: 0px;
   background: transparent;
   width: 80%;
   float: left;
-  border: none;
+  color: #c8c8c8;
+  border-radius: 0;
 }
 
 .grafana-target .dropdown {