func editor work

src/app/controllers/graphiteTarget.js

@@ -7,6 +7,20 @@ function (angular, _, config) {
   'use strict';
 
   var module = angular.module('kibana.controllers');
+  var graphiteFunctions = [
+    {
+      name: "scaleToSeconds",
+      params: [ { name: "seconds", type: "int" } ]
+    },
+    {
+      name: "sumSeries",
+      params: []
+    },
+    {
+      name: "groupByNode",
+      params: [ { name: "node", type: "node" }, { name: "function", type: "function" }]
+    }
+  ];
 
   module.controller('GraphiteTargetCtrl', function($scope, $http) {
 
@@ -17,6 +31,23 @@ function (angular, _, config) {
           html: segmentStr === '*' ? '<i class="icon-asterisk"><i>' : segmentStr
         };
       });
+
+      $scope.functions = [
+        {
+          text: "scaleToSeconds(1)",
+          def: graphiteFunctions[0],
+          params: {
+            seconds: 1
+          }
+        },
+        {
+          text: "groupByNode",
+          def: graphiteFunctions[2],
+          params: {
+
+          }
+        }
+      ];
     };
 
     function getSegmentPathUpTo(index) {
@@ -97,6 +128,25 @@ function (angular, _, config) {
       $scope.$parent.get_data();
     };
 
+    $scope.removeFunction = function(func) {
+      $scope.functions = _.without($scope.functions, func);
+    };
+
+    $scope.functionParmsChanged = function(func) {
+      func.text = func.name + '(';
+      _.each(func.def.params, function(param) {
+        func.text += func.params[param.name];
+      });
+    };
+
+    $scope.addFunction = function() {
+      console.log($scope.functions);
+    };
+
+    $scope.editFunction = function(func) {
+      //func.edit = true;
+    };
+
   });
 
   module.directive('focusMe', function($timeout, $parse) {
@@ -112,12 +162,12 @@ function (angular, _, config) {
             });
           }
         });
-        // to address @blesh's comment, set attribute value to 'false'
+    /*    // 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

@@ -31,31 +31,37 @@
       border-left: 1px solid #050505;
       color: #c8c8c8;
     }
+
     .grafana-target-controls {
       float: right;
+      padding: 5px 7px;
     }
+
     .grafana-target .dropdown {
       padding: 0; margin: 0;
     }
+
     .grafana-target-segment:hover {
       text-decoration: none;
     }
+
     a.grafana-target-segment:focus {
       outline: 0;
       text-decoration: none;
     }
 
-    .grafana-target-fun-panel ul {
+    .grafana-target-func-panel ul {
       list-style: none;
+      margin: 0;
     }
-    .grafana-target-fun-panel ul > li {
+    .grafana-target-func-panel ul > li {
       float: left;
-      padding: 5px 7px;
+      padding: 1px 7px;
     }
 
-    .grafana-target-fun-panel-icon {
+    .grafana-target-func-panel-icon {
       float: left;
-      padding: 5px 7px;
+      padding: 1px 7px;
     }
   </style>
 
@@ -82,28 +88,22 @@
         </span>
         <div class="clearfix"></div>
       </div>
-      <div class="grafana-target-fun-panel">
-        <span class="grafana-target-fun-panel-icon">
-          <i class="icon-share-alt"></i>
-        </span>
-        <ul>
-          <li>
-            <a href="asd">sumSeries</a>
-          </li>
-          <li>
-            <a href="asd">avgSeries</a>
-          </li>
-          <li>
-            <a href="asd">scaleToSeconds</a>
-          </li>
-          <li>
-            <a href="asd">alias</a>
-          </li>
-          <li>
-            <a href="asd">other</a>
-          </li>
-        </ul>
-      </div>
+    </div>
+
+    <div class="grafana-target-func-panel">
+      <span class="grafana-target-func-panel-icon">
+        <i class="icon-long-arrow-right"></i>
+      </span>
+      <ul>
+        <li ng-repeat="func in functions">
+          <a bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="top">{{func.text}}</a>
+          <i class="icon-long-arrow-right"></i>
+        </li>
+        <li>
+          <a ng-click="addFunction">add function</a>
+        </li>
+      </ul>
+      <div class="clearfix"></div>
     </div>
 
     <!-- <div class="row-fluid">