add function works

src/app/controllers/graphiteTarget.js

@@ -7,18 +7,29 @@ function (angular, _, config) {
   'use strict';
 
   var module = angular.module('kibana.controllers');
-  var graphiteFunctions = [
+  var funcDefs = [
     {
       name: "scaleToSeconds",
-      params: [ { name: "seconds", type: "int" } ]
+      params: [ { name: "seconds", type: "int" } ],
+      defaultParams: [1]
     },
     {
       name: "sumSeries",
-      params: []
+      params: [],
     },
     {
       name: "groupByNode",
-      params: [ { name: "node", type: "node" }, { name: "function", type: "function" }]
+      params: [
+        {
+          name: "node",
+          type: "node",
+        },
+        {
+          name: "function",
+          type: "function",
+        }
+      ],
+      defaultParams: [3, "sumSeries"]
     }
   ];
 
@@ -32,22 +43,8 @@ function (angular, _, config) {
         };
       });
 
-      $scope.functions = [
-        {
-          text: "scaleToSeconds(1)",
-          def: graphiteFunctions[0],
-          params: {
-            seconds: 1
-          }
-        },
-        {
-          text: "groupByNode",
-          def: graphiteFunctions[2],
-          params: {
-
-          }
-        }
-      ];
+      $scope.funcDefs = funcDefs;
+      $scope.functions = [];
     };
 
     function getSegmentPathUpTo(index) {
@@ -89,6 +86,20 @@ function (angular, _, config) {
       });
     }
 
+    function getFuncText(funcDef, params) {
+      if (params.length === 0) {
+        return funcDef.name + '()';
+      }
+
+      var text = funcDef.name + '(';
+      _.each(funcDef.params, function(param, index) {
+        text += params[index] + ', ';
+      });
+      text = text.substring(0, text.length - 2);
+      text += ')';
+      return text;
+    }
+
     $scope.getAltSegments = function (index) {
       $scope.altSegments = [];
 
@@ -133,20 +144,15 @@ function (angular, _, config) {
     };
 
     $scope.functionParamsChanged = function(func) {
-      func.text = func.def.name + '(';
-      _.each(func.def.params, function(param) {
-        func.text += func.params[param.name] + ', ';
-      });
-      func.text = func.text.substring(0, func.text.length - 2);
-      func.text += ')';
+      func.text = getFuncText(func.def, func.params);
     };
 
-    $scope.addFunction = function() {
-      console.log($scope.functions);
-    };
-
-    $scope.editFunction = function() {
-      //func.edit = true;
+    $scope.addFunction = function(funcDef) {
+      $scope.functions.push({
+        def: funcDef,
+        params: funcDef.defaultParams,
+        text: getFuncText(funcDef, funcDef.defaultParams)
+      });
     };
 
   });
@@ -157,7 +163,6 @@ function (angular, _, config) {
       link: function(scope, element, attrs) {
         var model = $parse(attrs.focusMe);
         scope.$watch(model, function(value) {
-          console.log('value=',value);
           if(value === true) {
             $timeout(function() {
               element[0].focus();

src/app/panels/graphite/editor.html

@@ -8,9 +8,13 @@
         </span>
         <ul class="grafana-segment-list" role="menu">
           <li class="dropdown" ng-repeat="segment in segments" role="menuitem">
-            <a tabindex="1" class="grafana-target-segment dropdown-toggle"
-                data-toggle="dropdown" ng-click="getAltSegments($index)" focus-me="segment.focus"
-                data-placement="bottom" ng-bind-html-unsafe="segment.html"></a>
+            <a  tabindex="1"
+                class="grafana-target-segment dropdown-toggle"
+                data-toggle="dropdown"
+                ng-click="getAltSegments($index)"
+                focus-me="segment.focus"
+                ng-bind-html-unsafe="segment.html">
+            </a>
             <ul class="dropdown-menu" role="menu">
               <li ng-repeat="altSegment in altSegments" role="menuitem">
                 <a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
@@ -34,8 +38,22 @@
           <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 class="dropdown">
+          <a  class="dropdown-toggle"
+              data-toggle="dropdown"
+              tabindex="1"
+              ng-click="addFunction">
+              add function
+          </a>
+          <ul class="dropdown-menu" role="menu">
+            <li ng-repeat="funcDef in funcDefs" role="menuitem">
+              <a href="javascript:void(0)"
+                 tabindex="1"
+                 ng-click="addFunction(funcDef)">
+                 {{funcDef.name}}
+              </a>
+            </li>
+          </ul>
         </li>
       </ul>
       <div class="clearfix"></div>

src/app/panels/graphite/funcEditor.html

@@ -1,70 +1,50 @@
 <div class="grafana-func-editor">
 
-<div class="grafana-func-editor-header">
-  <a ng-click="removeFunction(func)">
-    Remove
-  </a>
-  |
-  <a ng-click="disableFunction(func)">
-    Disable
-  </a>
-  |
-  <a ng-click="helpFunction(func)">
-    Help
-  </a>
-  |
-  <a ng-click="dismiss()">
-    Close
-  </a>
-</div>
-
-<div class="editor-row">
-  <div class="section">
-    <div class="editor-option" ng-repeat="param in func.def.params">
-      <label class="small">{{param.name}}</label>
-      <input ng-if="param.type === 'int'"
-            type="text"
-            placeholder="seconds"
-            focus-me="true"
-            class="input-mini"
-            ng-change="functionParamsChanged(func)" ng-model-onblur
-            ng-model="func.params[param.name]" />
-
-       <select  ng-if="param.type === 'node'"
-                class="input-mini"
-                ng-model="func.params[param.name]"
-                ng-change="functionParamsChanged(func)"
-                ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]">
-       </select>
-
-       <select  ng-if="param.type === 'function'"
-                style="width: 110px"
-                ng-change="functionParamsChanged(func)"
-                ng-model="func.params[param.name]"
-                ng-options="f for f in ['sumSeries', 'avgSeries']">
-       </select>
-    </div>
+  <div class="grafana-func-editor-header">
+    <a ng-click="removeFunction(func)">
+      Remove
+    </a>
+    |
+    <a ng-click="disableFunction(func)">
+      Disable
+    </a>
+    |
+    <a ng-click="helpFunction(func)">
+      Help
+    </a>
+    |
+    <a ng-click="dismiss()">
+      Close
+    </a>
   </div>
-</div>
-<!--   <div class="row-fluid">
-    <div  class="pull-left">
-     <input ng-if="param.type === 'int'"
-            placeholder="seconds"
-            focus-me="true"
-            class="input-mini"
-            ng-model="func.params[param.name]" />
 
-     <select  ng-if="param.type === 'node'"
+  <div class="editor-row">
+    <div class="section">
+      <div class="editor-option" ng-repeat="param in func.def.params">
+        <label class="small">{{param.name}}</label>
+        <input ng-if="param.type === 'int'"
+              type="text"
+              placeholder="seconds"
+              focus-me="true"
               class="input-mini"
-              ng-model="func.params[param.name]"
-              ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]">
-     </select>
+              ng-change="functionParamsChanged(func)" ng-model-onblur
+              ng-model="func.params[$index]" />
+
+         <select  ng-if="param.type === 'node'"
+                  class="input-mini"
+                  ng-model="func.params[$index]"
+                  ng-change="functionParamsChanged(func)"
+                  focus-me="true"
+                  ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]">
+         </select>
 
-     <select  ng-if="param.type === 'function'"
-              class="input-small"
-              ng-model="func.params[param.name]"
-              ng-options="f for f in ['sumSeries', 'avgSeries']">
-     </select>
+         <select  ng-if="param.type === 'function'"
+                  style="width: 110px"
+                  ng-change="functionParamsChanged(func)"
+                  ng-model="func.params[$index]"
+                  ng-options="f for f in ['sumSeries', 'avgSeries']">
+         </select>
+      </div>
     </div>
   </div>
- --></div>
+</div>