backedported upstream changes from histogram to graphite panel

src/app/panels/graphite/editor.html

@@ -7,11 +7,11 @@
   	<div class="row-fluid">
   		<div class="span12">
     		<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" />
-    		<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" ng-change="get_data()" style="position: relative; top: -5px; left: 5px;"></i>
+    		<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
     	</div>
     </div>
   </div>
 
-  <button ng-click="add_target(panel.target);" class="btn btn-success" ng-show="editor.index == 1">Add target</button>
+  <button ng-click="add_target(panel.target)" class="btn btn-success" ng-show="editor.index == 1">Add target</button>
 
 </div>

src/app/panels/graphite/module.html

@@ -106,11 +106,11 @@
 
   <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
 
-  <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
-      <i class='icon-circle' ng-style="{color: series.info.color}"></i>
+  <span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend">
+      <i class='icon-circle' ng-style="{color: series.color}"></i>
       <span class='small histogram-legend-item'>
-        <span ng-if="panel.show_query">{{series.info.alias || series.info.query}}</span>
-        <span ng-if="!panel.show_query">{{series.info.alias}}</span>
+        <span ng-if="panel.show_query">{{series.alias || series.query}}</span>
+        <span ng-if="!panel.show_query">{{series.alias}}</span>
       </span>
   </span>
 

src/app/panels/graphite/module.js

@@ -204,9 +204,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
     $scope.init = function() {
       // Hide view options by default
       $scope.options = false;
-      $scope.$on('refresh',function(){
-        $scope.get_data();
-      });
 
       // Always show the query if an alias isn't set. Users can set an alias if the query is too
       // long
@@ -294,8 +291,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
       var range = $scope.get_time_range();
       var interval = $scope.get_interval(range);
 
-      console.log('Interval: ' + interval);
-
       var graphiteLoadOptions = {
         range: range,
         targets: $scope.panel.targets,
@@ -307,7 +302,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
         $scope.receiveGraphiteData(range, interval)
       ]);
 
-      result(function (success, failure) {
+      result(function (data, failure) {
         if (failure) {
           $scope.panel.error = 'Failed to do fetch graphite data: ' + failure;
           return;
@@ -317,7 +312,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
         $scope.$apply();
 
         // Tell the histogram directive to render.
-        $scope.$emit('render');
+        $scope.$emit('render', data);
       });
 
     };
@@ -325,14 +320,15 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
     $scope.receiveGraphiteData = function(range, interval) {
 
       return function receive_graphite_data_requestor(requestion, results) {
+        $scope.legend = [];
+        var data = [];
 
-        $scope.data = [];
         if(results.length == 0 ) {
           requestion('no data in response from graphite');
         }
 
-        console.log('Data from graphite:', results);
-        console.log('nr datapoints from graphite: %d', results[0].datapoints.length);
+        //console.log('Data from graphite:', results);
+        //console.log('nr datapoints from graphite: %d', results[0].datapoints.length);
 
         var tsOpts = {
           interval: interval,
@@ -350,18 +346,22 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
             }
           });
 
-          $scope.data.push({
-            info: {
-              alias: targetData.target,
-              color: $scope.colors[$scope.data.length],
-              enable: true
-            },
-            time_series: time_series,
-            hits: 0
+          var seriesInfo = {
+            alias: targetData.target,
+            color: $scope.colors[data.length],
+            enable: true
+          };
+
+          $scope.legend.push(seriesInfo);
+
+          data.push({
+            info: seriesInfo,
+            time_series: time_series
           });
+
         });
 
-        requestion('ok');
+        requestion(data);
       };
     };
 
@@ -443,15 +443,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
       restrict: 'A',
       template: '<div></div>',
       link: function(scope, elem) {
+        var data = [];
+
+        scope.$on('refresh',function() {
+          scope.get_data();
+        });
 
         // Receive render events
-        scope.$on('render',function(){
-          render_panel();
+        scope.$on('render',function(event, d) {
+          data = d || data;
+          render_panel(data);
         });
 
         // Re-render if the window is resized
-        angular.element(window).bind('resize', function(){
-          render_panel();
+        angular.element(window).bind('resize', function() {
+          render_panel(data);
         });
 
         var scale = function(series,factor) {
@@ -479,13 +485,13 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
         };
 
         // Function for rendering panel
-        function render_panel() {
+        function render_panel(data) {
           // IE doesn't work without this
           elem.css({height:scope.panel.height || scope.row.height});
 
           // Populate from the query service
           try {
-            _.each(scope.data, function(series) {
+            _.each(data, function(series) {
               series.label = series.info.alias;
               series.color = series.info.color;
             });
@@ -584,8 +590,8 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
             // 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 (scope.data.length > 1) {
-              required_times = Array.prototype.concat.apply([], _.map(scope.data, function (query) {
+            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) {
@@ -594,17 +600,16 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
               }), true);
             }
 
-            for (var i = 0; i < scope.data.length; i++) {
-              var _d = scope.data[i].time_series.getFlotPairs(required_times);
-              scope.data[i].data = _d;
+            for (var i = 0; i < data.length; i++) {
+              var _d = data[i].time_series.getFlotPairs(required_times);
+              data[i].data = _d;
             }
 
-            var totalDataPoints = _.reduce(scope.data, function(num, series) { return series.data.length + num; }, 0);
-            console.log('Datapoints[0] count:', scope.data[0].data.length);
-            console.log('Datapoints.Total count:', totalDataPoints);
-
+           /* 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);*/
 
-            scope.plot = $.plot(elem, scope.data, options);
+            scope.plot = $.plot(elem, data, options);
 
           } catch(e) {
             console.log(e);