add function works

2013-12-22 15:39:25 +01:00
parent 2032ff66ac
commit 76fa88cfd4
3 changed files with 104 additions and 101 deletions
@@ -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 = getFuncText(func.def, func.params);
+    };
+
+    $scope.addFunction = function(funcDef) {
+      $scope.functions.push({
+        def: funcDef,
+        params: funcDef.defaultParams,
+        text: getFuncText(funcDef, funcDef.defaultParams)
      });
-      func.text = func.text.substring(0, func.text.length - 2);
-      func.text += ')';
-    };
-
-    $scope.addFunction = function() {
-      console.log($scope.functions);
-    };
-
-    $scope.editFunction = function() {
-      //func.edit = true;
    };

  });
@@ -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();
@@ -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>
@@ -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 === 'function'"
-              class="input-small"
-              ng-model="func.params[param.name]"
-              ng-options="f for f in ['sumSeries', 'avgSeries']">
-     </select>
+         <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'"
+                  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>