added more functions, and function categories

src/app/controllers/graphiteTarget.js

@@ -13,7 +13,7 @@ function (angular, _, config, graphiteFuncs, Parser) {
   module.controller('GraphiteTargetCtrl', function($scope, $http) {
 
     $scope.init = function() {
-      $scope.funcDefs = graphiteFuncs.getDefList();
+      $scope.funcCategories = graphiteFuncs.getCategories();
       parseTarget();
     };
 

src/app/panels/graphite/editor.html

@@ -89,7 +89,7 @@
               {{func.text}}
             </a>
           </li>
-          <li class="dropdown">
+          <li class="dropdown dropup">
             <a  class="grafana-target-segment grafana-target-function dropdown-toggle"
                 data-toggle="dropdown"
                 tabindex="1"
@@ -97,12 +97,18 @@
                 <i class="icon-plus"></i>
             </a>
             <ul class="dropdown-menu" role="menu">
-              <li ng-repeat="funcDef in funcDefs" role="menuitem">
+              <li ng-repeat="(category, funcList) in funcCategories" class="dropdown-submenu" role="menuitem">
                 <a href="javascript:void(0)"
-                   tabindex="1"
-                   ng-click="addFunction(funcDef)">
-                   {{funcDef.name}}
+                   tabindex="1">
+                   {{category}}
                 </a>
+                <ul class="dropdown-menu" role="menu">
+                  <li ng-repeat="func in funcList" role="menuitem">
+                    <a ng-click="addFunction(func)" tabindex="1">
+                      {{func.name}}
+                    </a>
+                  </li>
+                </ul>
               </li>
             </ul>
           </li>

src/app/panels/graphite/funcEditor.html

 <div class="grafana-func-editor">
 
   <div class="grafana-func-editor-header">
-    <a ng-click="removeFunction(func)">
+   <a ng-click="removeFunction(func)">
       Remove
     </a>
-    |
-    <a ng-click="disableFunction(func)">
-      Disable
-    </a>
-    |
+    |&nbsp;
     <a ng-click="helpFunction(func)">
       Help
     </a>
-    |
+    |&nbsp;
     <a ng-click="dismiss()">
       Close
     </a>
   </div>
 
-  <div class="editor-row">
+  <div class="editor-row" ng-if="func.def.params.length">
     <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="number"
-              placeholder="seconds"
-              focus-me="true"
-              class="input-mini"
-              ng-change="functionParamsChanged(func)" ng-model-onblur
-              ng-model="func.params[$index]" />
-
-        <input ng-if="param.type === 'string'"
-              type="text"
-              focus-me="true"
-              class="input-small"
-              ng-change="functionParamsChanged(func)" ng-model-onblur
-              ng-model="func.params[$index]" />
-
-         <select  ng-if="param.type === 'node'"
+        <div ng-switch on="param.type">
+          <div ng-switch-when="int">
+             <input
+                type="number"
+                placeholder="seconds"
+                focus-me="true"
+                class="input-mini"
+                ng-change="functionParamsChanged(func)" ng-model-onblur
+                ng-model="func.params[$index]" />
+          </div>
+          <div ng-switch-when="string">
+             <input
+                type="text"
+                focus-me="true"
+                class="input-small"
+                ng-change="functionParamsChanged(func)" ng-model-onblur
+                ng-model="func.params[$index]" />
+          </div>
+          <div ng-switch-when="select">
+              <select
                   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>
+                  ng-options="f for f in param.options">
+              </select>
+          </div>
+        </div>
 
-         <select  ng-if="param.type === 'function'"
-                  style="width: 110px"
-                  ng-change="functionParamsChanged(func)"
-                  ng-model="func.params[$index]"
-                  ng-options="f for f in ['sum', 'avg']">
-         </select>
       </div>
     </div>
   </div>

src/app/panels/graphite/module.html

 <div  ng-controller='graphite'
       ng-init="init()"
       style="min-height:{{panel.height || row.height}}"
-      ng-class='{"panel-fullscreen": showFullscreen}'
-      ng-dblclick="toggleFullscreen($event);"
-      >
+      ng-class='{"panel-fullscreen": showFullscreen}'>
 
   <style>
     .histogram-legend {

src/app/services/graphite/graphiteFuncs.js

@@ -4,38 +4,77 @@ define([
 function (_) {
   'use strict';
 
-  var funcDefList = [];
   var index = [];
+  var categories = {
+    Combine: [],
+    Transform: [],
+    Calculate: [],
+    Filter: [],
+    Special: []
+  };
 
   function addFuncDef(funcDef) {
-    funcDefList.push(funcDef);
+    if (funcDef.category) {
+      funcDef.category.push(funcDef);
+    }
     index[funcDef.name] = funcDef;
     index[funcDef.shortName || funcDef.name] = funcDef;
   }
 
   addFuncDef({
     name: 'scaleToSeconds',
+    category: categories.Transform,
     params: [ { name: 'seconds', type: 'int' } ],
     defaultParams: [1],
   });
 
   addFuncDef({
     name: "alias",
-    params: [
-      { name: "alias", type: 'string' }
-    ],
+    category: categories.Special,
+    params: [ { name: "alias", type: 'string' } ],
     defaultParams: ['alias']
   });
 
   addFuncDef({
+    name: "holtWintersForecast",
+    category: categories.Calculate,
+    params: [],
+    defaultParams: []
+  });
+
+  addFuncDef({
+    name: "holtWintersConfidenceBands",
+    category: categories.Calculate,
+    params: [ { name: "delta", type: 'int' } ],
+    defaultParams: [3]
+  });
+
+  addFuncDef({
+    name: "holtWintersAberration",
+    category: categories.Calculate,
+    params: [ { name: "delta", type: 'int' } ],
+    defaultParams: [3]
+  });
+
+  addFuncDef({
     name: 'sumSeries',
     shortName: 'sum',
+    category: categories.Combine,
+    params: [],
+    defaultParams: []
+  });
+
+  addFuncDef({
+    name: 'averageSeries',
+    shortName: 'avg',
+    category: categories.Combine,
     params: [],
     defaultParams: []
   });
 
   addFuncDef({
     name: "groupByNode",
+    category: categories.Special,
     params: [
       {
         name: "node",
@@ -43,7 +82,8 @@ function (_) {
       },
       {
         name: "function",
-        type: "function",
+        type: "select",
+        options: ['sumSeries', 'averageSeries']
       }
     ],
     defaultParams: [3, "sum"]
@@ -51,10 +91,39 @@ function (_) {
 
   addFuncDef({
     name: 'aliasByNode',
+    category: categories.Special,
     params: [ { name: "node", type: "node", } ],
     defaultParams: [3]
   });
 
+  addFuncDef({
+    name: 'scale',
+    category: categories.Transform,
+    params: [ { name: "factor", type: "int", } ],
+    defaultParams: [1]
+  });
+
+  addFuncDef({
+    name: 'integral',
+    category: categories.Transform,
+    params: [],
+    defaultParams: []
+  });
+
+  addFuncDef({
+    name: 'derivate',
+    category: categories.Transform,
+    params: [],
+    defaultParams: []
+  });
+
+  addFuncDef({
+    name: 'timeShift',
+    category: categories.Transform,
+    params: [ { name: "amount", type: "select", options: ['1h', '6h', '12h', '1d', '2d', '7d', '14d', '30d'] }],
+    defaultParams: ['1d']
+  });
+
   function FuncInstance(funcDef) {
     this.def = funcDef;
     this.params = funcDef.defaultParams.slice(0);
@@ -88,8 +157,8 @@ function (_) {
       return new FuncInstance(name);
     },
 
-    getDefList: function() {
-      return funcDefList.slice(0);
+    getCategories: function() {
+      return categories;
     }
   };
 

src/vendor/bootstrap/less/grafana.less

@@ -229,11 +229,12 @@ input[type=text].func-param {
 }
 
 .grafana-func-editor {
+  min-width: 90px;
   .grafana-func-editor-header {
     background: #41474c;
     text-align: center;
     border-bottom: 1px solid #353a3e;
-    padding: 2px 5px;
+    padding: 3px 7px;
     white-space: nowrap;
   }
   .editor-row {