refactoring graphite target editor

src/app/controllers/graphiteTarget.js

@@ -1,37 +1,13 @@
 define([
   'angular',
   'underscore',
-  'config'
+  'config',
+  '/app/services/graphite/functions.js'
 ],
-function (angular, _, config) {
+function (angular, _, config, graphiteFunctions) {
   'use strict';
 
   var module = angular.module('kibana.controllers');
-  var funcDefs = [
-    {
-      name: "scaleToSeconds",
-      params: [ { name: "seconds", type: "int" } ],
-      defaultParams: [1]
-    },
-    {
-      name: "sumSeries",
-      params: [],
-    },
-    {
-      name: "groupByNode",
-      params: [
-        {
-          name: "node",
-          type: "node",
-        },
-        {
-          name: "function",
-          type: "function",
-        }
-      ],
-      defaultParams: [3, "sumSeries"]
-    }
-  ];
 
   module.controller('GraphiteTargetCtrl', function($scope, $http) {
 
@@ -43,7 +19,7 @@ function (angular, _, config) {
         };
       });
 
-      $scope.funcDefs = funcDefs;
+      $scope.funcDefs = graphiteFunctions;
       $scope.functions = [];
     };
 
@@ -100,6 +76,19 @@ function (angular, _, config) {
       return text;
     }
 
+    function wrapFunction(target, func) {
+      var targetWrapped = func.def.name + '(' + target;
+      _.each(func.params, function(param) {
+        if (_.isString(param)) {
+          targetWrapped += ",'" + param + "'";
+        }
+        else {
+          targetWrapped += "," + param;
+        }
+      });
+      return targetWrapped + ')';
+    }
+
     $scope.getAltSegments = function (index) {
       $scope.altSegments = [];
 
@@ -135,16 +124,21 @@ function (angular, _, config) {
     };
 
     $scope.targetChanged = function() {
-      $scope.target.target = getSegmentPathUpTo($scope.segments.length);
+      var target = getSegmentPathUpTo($scope.segments.length);
+      target = _.reduce($scope.functions, wrapFunction, target);
+      console.log('target: ', target);
+      $scope.target.target = target;
       $scope.$parent.get_data();
     };
 
     $scope.removeFunction = function(func) {
       $scope.functions = _.without($scope.functions, func);
+      $scope.targetChanged();
     };
 
     $scope.functionParamsChanged = function(func) {
       func.text = getFuncText(func.def, func.params);
+      $scope.targetChanged();
     };
 
     $scope.addFunction = function(funcDef) {
@@ -153,6 +147,7 @@ function (angular, _, config) {
         params: funcDef.defaultParams,
         text: getFuncText(funcDef, funcDef.defaultParams)
       });
+      $scope.targetChanged();
     };
 
   });

src/app/panels/graphite/funcEditor.html

@@ -23,7 +23,7 @@
       <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"
+              type="number"
               placeholder="seconds"
               focus-me="true"
               class="input-mini"

src/app/panels/graphite/module.js

@@ -459,6 +459,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
 
         // Function for rendering panel
         function render_panel(data) {
+          if (!data) {
+            return;
+          }
           // IE doesn't work without this
           elem.css({height:scope.panel.height || scope.row.height});
 
@@ -476,129 +479,124 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
           var stack = scope.panel.stack ? true : null;
 
           // Populate element
-          try {
+          var options = {
-            var options = {
+            legend: { show: false },
-              legend: { show: false },
+            series: {
-              series: {
+              stackpercent: scope.panel.stack ? scope.panel.percentage : false,
-                stackpercent: scope.panel.stack ? scope.panel.percentage : false,
+              stack: scope.panel.percentage ? null : stack,
-                stack: scope.panel.percentage ? null : stack,
+              lines:  {
-                lines:  {
+                show: scope.panel.lines,
-                  show: scope.panel.lines,
+                // Silly, but fixes bug in stacked percentages
-                  // Silly, but fixes bug in stacked percentages
+                fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
-                  fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
+                lineWidth: scope.panel.linewidth,
-                  lineWidth: scope.panel.linewidth,
+                steps: false
-                  steps: false
-                },
-                bars:   {
-                  show: scope.panel.bars,
-                  fill: 1,
-                  barWidth: barwidth/1.5,
-                  zero: false,
-                  lineWidth: 0
-                },
-                points: {
-                  show: scope.panel.points,
-                  fill: 1,
-                  fillColor: false,
-                  radius: scope.panel.pointradius
-                },
-                shadowSize: 1
               },
-              yaxis: {
+              bars:   {
-                show: scope.panel['y-axis'],
+                show: scope.panel.bars,
-                min: scope.panel.grid.min,
+                fill: 1,
-                max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
+                barWidth: barwidth/1.5,
+                zero: false,
+                lineWidth: 0
               },
-              xaxis: {
+              points: {
-                timezone: scope.panel.timezone,
+                show: scope.panel.points,
-                show: scope.panel['x-axis'],
+                fill: 1,
-                mode: "time",
+                fillColor: false,
-                min: _.isUndefined(scope.range.from) ? null : scope.range.from.getTime(),
+                radius: scope.panel.pointradius
-                max: _.isUndefined(scope.range.to) ? null : scope.range.to.getTime(),
-                timeformat: time_format(scope.panel.interval),
-                label: "Datetime",
-                ticks: elem.width()/100
               },
-              grid: {
+              shadowSize: 1
-                backgroundColor: null,
+            },
-                borderWidth: 0,
+            yaxis: {
-                hoverable: true,
+              show: scope.panel['y-axis'],
-                color: '#c8c8c8'
+              min: scope.panel.grid.min,
-              }
+              max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
+            },
+            xaxis: {
+              timezone: scope.panel.timezone,
+              show: scope.panel['x-axis'],
+              mode: "time",
+              min: _.isUndefined(scope.range.from) ? null : scope.range.from.getTime(),
+              max: _.isUndefined(scope.range.to) ? null : scope.range.to.getTime(),
+              timeformat: time_format(scope.panel.interval),
+              label: "Datetime",
+              ticks: elem.width()/100
+            },
+            grid: {
+              backgroundColor: null,
+              borderWidth: 0,
+              hoverable: true,
+              color: '#c8c8c8'
+            }
+          };
+
+          if(scope.panel.y_format === 'bytes') {
+            options.yaxis.mode = "byte";
+          }
+
+          if(scope.panel.y_format === 'short') {
+            options.yaxis.tickFormatter = function(val) {
+              return kbn.shortFormat(val,0);
             };
+          }
 
-            if(scope.panel.y_format === 'bytes') {
+          if(scope.panel.annotate.enable) {
-              options.yaxis.mode = "byte";
+            options.events = {
-            }
+              levels: 1,
-
+              data: scope.annotations,
-            if(scope.panel.y_format === 'short') {
+              types: {
-              options.yaxis.tickFormatter = function(val) {
+                'annotation': {
-                return kbn.shortFormat(val,0);
+                  level: 1,
-              };
+                  icon: {
-            }
+                    icon: "icon-tag icon-flip-vertical",
-
+                    size: 20,
-            if(scope.panel.annotate.enable) {
+                    color: "#222",
-              options.events = {
+                    outline: "#bbb"
-                levels: 1,
-                data: scope.annotations,
-                types: {
-                  'annotation': {
-                    level: 1,
-                    icon: {
-                      icon: "icon-tag icon-flip-vertical",
-                      size: 20,
-                      color: "#222",
-                      outline: "#bbb"
-                    }
                   }
                 }
-                //xaxis: int    // the x axis to attach events to
+              }
-              };
+              //xaxis: int    // the x axis to attach events to
-            }
+            };
-
-            if(scope.panel.interactive) {
-              options.selection = { mode: "x", color: '#666' };
-            }
-
-            // when rendering stacked bars, we need to ensure each point that has data is zero-filled
-            // so that the stacking happens in the proper order
-            var required_times = [];
-            if (data.length > 1) {
-              required_times = Array.prototype.concat.apply([], _.map(data, function (query) {
-                return query.time_series.getOrderedTimes();
-              }));
-              required_times = _.uniq(required_times.sort(function (a, b) {
-                // decending numeric sort
-                return a-b;
-              }), true);
-            }
-
-            for (var i = 0; i < data.length; i++) {
-              var _d = data[i].time_series.getFlotPairs(required_times);
-              data[i].data = _d;
-            }
-
-           /* var totalDataPoints = _.reduce(data, function(num, series) { return series.data.length + num; }, 0);
-            console.log('Datapoints[0] count:', data[0].data.length);
-            console.log('Datapoints.Total count:', totalDataPoints);*/
-
-            plot = $.plot(elem, data, options);
-
-            if (scope.panel.leftYAxisLabel) {
-              elem.css('margin-left', '10px');
-              var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
-                .text(scope.panel.leftYAxisLabel)
-                .appendTo(elem);
-
-              yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);
-            } else if (elem.css('margin-left')) {
-              elem.css('margin-left', '');
-            }
-
-          } catch(e) {
-            console.log(e);
-            // Nothing to do here
           }
+
+          if(scope.panel.interactive) {
+            options.selection = { mode: "x", color: '#666' };
+          }
+
+          // when rendering stacked bars, we need to ensure each point that has data is zero-filled
+          // so that the stacking happens in the proper order
+          var required_times = [];
+          if (data.length > 1) {
+            required_times = Array.prototype.concat.apply([], _.map(data, function (query) {
+              return query.time_series.getOrderedTimes();
+            }));
+            required_times = _.uniq(required_times.sort(function (a, b) {
+              // decending numeric sort
+              return a-b;
+            }), true);
+          }
+
+          for (var i = 0; i < data.length; i++) {
+            var _d = data[i].time_series.getFlotPairs(required_times);
+            data[i].data = _d;
+          }
+
+         /* var totalDataPoints = _.reduce(data, function(num, series) { return series.data.length + num; }, 0);
+          console.log('Datapoints[0] count:', data[0].data.length);
+          console.log('Datapoints.Total count:', totalDataPoints);*/
+
+          plot = $.plot(elem, data, options);
+
+          if (scope.panel.leftYAxisLabel) {
+            elem.css('margin-left', '10px');
+            var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
+              .text(scope.panel.leftYAxisLabel)
+              .appendTo(elem);
+
+            yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);
+          } else if (elem.css('margin-left')) {
+            elem.css('margin-left', '');
+          }
+
         }
 
         function time_format(interval) {

src/app/services/graphite/functions.js

@@ -0,0 +1,44 @@
+define([
+],
+function () {
+  'use strict';
+
+  return [
+    {
+      name: "scaleToSeconds",
+      params: [ { name: "seconds", type: "int" } ],
+      defaultParams: [1]
+    },
+    {
+      name: "sumSeries",
+      params: [],
+    },
+    {
+      name: "groupByNode",
+      params: [
+        {
+          name: "node",
+          type: "node",
+        },
+        {
+          name: "function",
+          type: "function",
+        }
+      ],
+      defaultParams: [3, "sumSeries"]
+    },
+    {
+      name: "alias",
+      params: [
+        { name: "alias", type: 'string' }
+      ],
+      defaultParams: ['alias']
+    },
+    {
+      name: 'aliasByNode',
+      params: [ { name: "node", type: "node", } ],
+      defaultParams: [3]
+    }
+  ];
+
+});

src/app/services/graphite/graphiteSrv.js

@@ -0,0 +1,7 @@
+define([
+],
+function () {
+
+
+
+});