feat(plugins): upgraded singlestat to new plugin format

public/app/partials/dashboard.html

@@ -10,6 +10,8 @@
 	<div ng-if="submenuEnabled" ng-include="'app/partials/submenu.html'">
   </div>
 
+	<asd-test></asd-test>
+
 	<div class="clearfix"></div>
 
 	<div class="main-view-container">

public/app/plugins/panel/singlestat/controller.js

@@ -0,0 +1,246 @@
+define([
+  'angular',
+  'app/app',
+  'lodash',
+  'app/core/utils/kbn',
+  'app/core/time_series',
+  'app/features/panel/panel_meta',
+],
+function (angular, app, _, kbn, TimeSeries, PanelMeta) {
+  'use strict';
+
+  /** @ngInject */
+  function SingleStatCtrl($scope, panelSrv, panelHelper) {
+    console.log('controller');
+
+    $scope.panelMeta = new PanelMeta({
+      panelName: 'Singlestat',
+      editIcon:  "fa fa-dashboard",
+      fullscreen: true,
+      metricsEditor: true
+    });
+
+    $scope.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%'];
+
+    $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html');
+    $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html');
+
+    // Set and populate defaults
+    var _d = {
+      links: [],
+      datasource: null,
+      maxDataPoints: 100,
+      interval: null,
+      targets: [{}],
+      cacheTimeout: null,
+      format: 'none',
+      prefix: '',
+      postfix: '',
+      nullText: null,
+      valueMaps: [
+        { value: 'null', op: '=', text: 'N/A' }
+      ],
+      nullPointMode: 'connected',
+      valueName: 'avg',
+      prefixFontSize: '50%',
+      valueFontSize: '80%',
+      postfixFontSize: '50%',
+      thresholds: '',
+      colorBackground: false,
+      colorValue: false,
+      colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
+      sparkline: {
+        show: false,
+        full: false,
+        lineColor: 'rgb(31, 120, 193)',
+        fillColor: 'rgba(31, 118, 189, 0.18)',
+      }
+    };
+
+    _.defaults($scope.panel, _d);
+    $scope.unitFormats = kbn.getUnitFormats();
+
+    $scope.setUnitFormat = function(subItem) {
+      $scope.panel.format = subItem.value;
+      $scope.render();
+    };
+
+    $scope.init = function() {
+      panelSrv.init($scope);
+    };
+
+    $scope.refreshData = function(datasource) {
+      panelHelper.updateTimeRange($scope);
+
+      return panelHelper.issueMetricQuery($scope, datasource)
+        .then($scope.dataHandler, function(err) {
+          $scope.series = [];
+          $scope.render();
+          throw err;
+        });
+    };
+
+    $scope.loadSnapshot = function(snapshotData) {
+      panelHelper.updateTimeRange($scope);
+      $scope.dataHandler(snapshotData);
+    };
+
+    $scope.dataHandler = function(results) {
+      $scope.series = _.map(results.data, $scope.seriesHandler);
+      $scope.render();
+    };
+
+    $scope.seriesHandler = function(seriesData) {
+      var series = new TimeSeries({
+        datapoints: seriesData.datapoints,
+        alias: seriesData.target,
+      });
+
+      series.flotpairs = series.getFlotPairs($scope.panel.nullPointMode);
+
+      return series;
+    };
+
+    $scope.setColoring = function(options) {
+      if (options.background) {
+        $scope.panel.colorValue = false;
+        $scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
+      }
+      else {
+        $scope.panel.colorBackground = false;
+        $scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
+      }
+      $scope.render();
+    };
+
+    $scope.invertColorOrder = function() {
+      var tmp = $scope.panel.colors[0];
+      $scope.panel.colors[0] = $scope.panel.colors[2];
+      $scope.panel.colors[2] = tmp;
+      $scope.render();
+    };
+
+    $scope.getDecimalsForValue = function(value) {
+      if (_.isNumber($scope.panel.decimals)) {
+        return { decimals: $scope.panel.decimals, scaledDecimals: null };
+      }
+
+      var delta = value / 2;
+      var dec = -Math.floor(Math.log(delta) / Math.LN10);
+
+      var magn = Math.pow(10, -dec),
+          norm = delta / magn, // norm is between 1.0 and 10.0
+          size;
+
+      if (norm < 1.5) {
+        size = 1;
+      } else if (norm < 3) {
+        size = 2;
+        // special case for 2.5, requires an extra decimal
+        if (norm > 2.25) {
+          size = 2.5;
+          ++dec;
+        }
+      } else if (norm < 7.5) {
+        size = 5;
+      } else {
+        size = 10;
+      }
+
+      size *= magn;
+
+      // reduce starting decimals if not needed
+      if (Math.floor(value) === value) { dec = 0; }
+
+      var result = {};
+      result.decimals = Math.max(0, dec);
+      result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2;
+
+      return result;
+    };
+
+    $scope.render = function() {
+      var data = {};
+
+      $scope.setValues(data);
+
+      data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) {
+        return Number(strVale.trim());
+      });
+
+      data.colorMap = $scope.panel.colors;
+
+      $scope.data = data;
+      $scope.$broadcast('render');
+    };
+
+    $scope.setValues = function(data) {
+      data.flotpairs = [];
+
+      if($scope.series.length > 1) {
+        $scope.inspector.error = new Error();
+        $scope.inspector.error.message = 'Multiple Series Error';
+        $scope.inspector.error.data = 'Metric query returns ' + $scope.series.length +
+        ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify($scope.series);
+        throw $scope.inspector.error;
+      }
+
+      if ($scope.series && $scope.series.length > 0) {
+        var lastPoint = _.last($scope.series[0].datapoints);
+        var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;
+
+        if (_.isString(lastValue)) {
+          data.value = 0;
+          data.valueFormated = lastValue;
+          data.valueRounded = 0;
+        } else {
+          data.value = $scope.series[0].stats[$scope.panel.valueName];
+          data.flotpairs = $scope.series[0].flotpairs;
+
+          var decimalInfo = $scope.getDecimalsForValue(data.value);
+          var formatFunc = kbn.valueFormats[$scope.panel.format];
+          data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);
+          data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
+        }
+      }
+
+      // check value to text mappings
+      for(var i = 0; i < $scope.panel.valueMaps.length; i++) {
+        var map = $scope.panel.valueMaps[i];
+        // special null case
+        if (map.value === 'null') {
+          if (data.value === null || data.value === void 0) {
+            data.valueFormated = map.text;
+            return;
+          }
+          continue;
+        }
+
+        // value/number to text mapping
+        var value = parseFloat(map.value);
+        if (value === data.value) {
+          data.valueFormated = map.text;
+          return;
+        }
+      }
+
+      if (data.value === null || data.value === void 0) {
+        data.valueFormated = "no value";
+      }
+    };
+
+    $scope.removeValueMap = function(map) {
+      var index = _.indexOf($scope.panel.valueMaps, map);
+      $scope.panel.valueMaps.splice(index, 1);
+      $scope.render();
+    };
+
+    $scope.addValueMap = function() {
+      $scope.panel.valueMaps.push({value: '', op: '=', text: '' });
+    };
+
+    $scope.init();
+  }
+
+  return SingleStatCtrl;
+});

public/app/plugins/panel/singlestat/module.html

@@ -1,4 +1,4 @@
 <grafana-panel>
-	<div class="singlestat-panel" singlestat-panel></div>
+	<div class="singlestat-panel"></div>
 	<div class="clearfix"></div>
 </grafana-panel>

public/app/plugins/panel/singlestat/module.js

@@ -1,253 +1,231 @@
 define([
-  'angular',
-  'app/app',
+  './controller',
   'lodash',
-  'app/core/utils/kbn',
-  'app/core/time_series',
-  'app/features/panel/panel_meta',
-  './singleStatPanel',
+  'jquery',
+  'jquery.flot',
 ],
-function (angular, app, _, kbn, TimeSeries, PanelMeta) {
+function (SingleStatCtrl, _, $) {
   'use strict';
 
-  var module = angular.module('grafana.panels.singlestat');
-  app.useModule(module);
-
-  module.directive('grafanaPanelSinglestat', function() {
+  /** @ngInject */
+  function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
     return {
-      controller: 'SingleStatCtrl',
+      controller: SingleStatCtrl,
       templateUrl: 'app/plugins/panel/singlestat/module.html',
-    };
-  });
-
-  module.controller('SingleStatCtrl', function($scope, panelSrv, panelHelper) {
-
-    $scope.panelMeta = new PanelMeta({
-      panelName: 'Singlestat',
-      editIcon:  "fa fa-dashboard",
-      fullscreen: true,
-      metricsEditor: true
-    });
-
-    $scope.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%'];
-
-    $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html');
-    $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html');
-
-    // Set and populate defaults
-    var _d = {
-      links: [],
-      datasource: null,
-      maxDataPoints: 100,
-      interval: null,
-      targets: [{}],
-      cacheTimeout: null,
-      format: 'none',
-      prefix: '',
-      postfix: '',
-      nullText: null,
-      valueMaps: [
-        { value: 'null', op: '=', text: 'N/A' }
-      ],
-      nullPointMode: 'connected',
-      valueName: 'avg',
-      prefixFontSize: '50%',
-      valueFontSize: '80%',
-      postfixFontSize: '50%',
-      thresholds: '',
-      colorBackground: false,
-      colorValue: false,
-      colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
-      sparkline: {
-        show: false,
-        full: false,
-        lineColor: 'rgb(31, 120, 193)',
-        fillColor: 'rgba(31, 118, 189, 0.18)',
-      }
-    };
+      link: function(scope, elem) {
+        var data, panel, linkInfo, $panelContainer;
+        var firstRender = true;
+
+        scope.$on('render', function() {
+          if (firstRender) {
+            var inner = elem.find('.singlestat-panel');
+            if (inner.length) {
+              elem = inner;
+              $panelContainer = elem.parents('.panel-container');
+              firstRender = false;
+            }
+          }
 
-    _.defaults($scope.panel, _d);
-    $scope.unitFormats = kbn.getUnitFormats();
+          render();
+          scope.panelRenderingComplete();
+        });
 
-    $scope.setUnitFormat = function(subItem) {
-      $scope.panel.format = subItem.value;
-      $scope.render();
-    };
+        function setElementHeight() {
+          try {
+            var height = scope.height || panel.height || scope.row.height;
+            if (_.isString(height)) {
+              height = parseInt(height.replace('px', ''), 10);
+            }
 
-    $scope.init = function() {
-      panelSrv.init($scope);
-    };
+            height -= 5; // padding
+            height -= panel.title ? 24 : 9; // subtract panel title bar
 
-    $scope.refreshData = function(datasource) {
-      panelHelper.updateTimeRange($scope);
+            elem.css('height', height + 'px');
 
-      return panelHelper.issueMetricQuery($scope, datasource)
-        .then($scope.dataHandler, function(err) {
-          $scope.series = [];
-          $scope.render();
-          throw err;
-        });
-    };
+            return true;
+          } catch(e) { // IE throws errors sometimes
+            return false;
+          }
+        }
 
-    $scope.loadSnapshot = function(snapshotData) {
-      panelHelper.updateTimeRange($scope);
-      $scope.dataHandler(snapshotData);
-    };
+        function applyColoringThresholds(value, valueString) {
+          if (!panel.colorValue) {
+            return valueString;
+          }
 
-    $scope.dataHandler = function(results) {
-      $scope.series = _.map(results.data, $scope.seriesHandler);
-      $scope.render();
-    };
+          var color = getColorForValue(value);
+          if (color) {
+            return '<span style="color:' + color + '">'+ valueString + '</span>';
+          }
 
-    $scope.seriesHandler = function(seriesData) {
-      var series = new TimeSeries({
-        datapoints: seriesData.datapoints,
-        alias: seriesData.target,
-      });
+          return valueString;
+        }
 
-      series.flotpairs = series.getFlotPairs($scope.panel.nullPointMode);
+        function getColorForValue(value) {
+          for (var i = data.thresholds.length - 1; i >= 0 ; i--) {
+            if (value >= data.thresholds[i]) {
+              return data.colorMap[i];
+            }
+          }
+          return null;
+        }
 
-      return series;
-    };
+        function getSpan(className, fontSize, value)  {
+          value = templateSrv.replace(value);
+          return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
+            value + '</span>';
+        }
 
-    $scope.setColoring = function(options) {
-      if (options.background) {
-        $scope.panel.colorValue = false;
-        $scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
-      }
-      else {
-        $scope.panel.colorBackground = false;
-        $scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
-      }
-      $scope.render();
-    };
+        function getBigValueHtml() {
+          var body = '<div class="singlestat-panel-value-container">';
 
-    $scope.invertColorOrder = function() {
-      var tmp = $scope.panel.colors[0];
-      $scope.panel.colors[0] = $scope.panel.colors[2];
-      $scope.panel.colors[2] = tmp;
-      $scope.render();
-    };
+          if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, scope.panel.prefix); }
 
-    $scope.getDecimalsForValue = function(value) {
-      if (_.isNumber($scope.panel.decimals)) {
-        return { decimals: $scope.panel.decimals, scaledDecimals: null };
-      }
+          var value = applyColoringThresholds(data.valueRounded, data.valueFormated);
+          body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
 
-      var delta = value / 2;
-      var dec = -Math.floor(Math.log(delta) / Math.LN10);
-
-      var magn = Math.pow(10, -dec),
-          norm = delta / magn, // norm is between 1.0 and 10.0
-          size;
-
-      if (norm < 1.5) {
-        size = 1;
-      } else if (norm < 3) {
-        size = 2;
-        // special case for 2.5, requires an extra decimal
-        if (norm > 2.25) {
-          size = 2.5;
-          ++dec;
-        }
-      } else if (norm < 7.5) {
-        size = 5;
-      } else {
-        size = 10;
-      }
+          if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); }
 
-      size *= magn;
+          body += '</div>';
 
-      // reduce starting decimals if not needed
-      if (Math.floor(value) === value) { dec = 0; }
+          return body;
+        }
 
-      var result = {};
-      result.decimals = Math.max(0, dec);
-      result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2;
+        function addSparkline() {
+          var panel = scope.panel;
+          var width = elem.width() + 20;
+          var height = elem.height() || 100;
+
+          var plotCanvas = $('<div></div>');
+          var plotCss = {};
+          plotCss.position = 'absolute';
+
+          if (panel.sparkline.full) {
+            plotCss.bottom = '5px';
+            plotCss.left = '-5px';
+            plotCss.width = (width - 10) + 'px';
+            var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5;
+            plotCss.height = (height - dynamicHeightMargin) + 'px';
+          }
+          else {
+            plotCss.bottom = "0px";
+            plotCss.left = "-5px";
+            plotCss.width = (width - 10) + 'px';
+            plotCss.height = Math.floor(height * 0.25) + "px";
+          }
 
-      return result;
-    };
+          plotCanvas.css(plotCss);
+
+          var options = {
+            legend: { show: false },
+            series: {
+              lines:  {
+                show: true,
+                fill: 1,
+                lineWidth: 1,
+                fillColor: panel.sparkline.fillColor,
+              },
+            },
+            yaxes: { show: false },
+            xaxis: {
+              show: false,
+              mode: "time",
+              min: scope.range.from.valueOf(),
+              max: scope.range.to.valueOf(),
+            },
+            grid: { hoverable: false, show: false },
+          };
+
+          elem.append(plotCanvas);
+
+          var plotSeries = {
+            data: data.flotpairs,
+            color: panel.sparkline.lineColor
+          };
+
+          $.plot(plotCanvas, [plotSeries], options);
+        }
 
-    $scope.render = function() {
-      var data = {};
+        function render() {
+          if (!scope.data) { return; }
+
+          data = scope.data;
+          panel = scope.panel;
+
+          setElementHeight();
+
+          var body = getBigValueHtml();
+
+          if (panel.colorBackground && !isNaN(data.valueRounded)) {
+            var color = getColorForValue(data.valueRounded);
+            if (color) {
+              $panelContainer.css('background-color', color);
+              if (scope.fullscreen) {
+                elem.css('background-color', color);
+              } else {
+                elem.css('background-color', '');
+              }
+            }
+          } else {
+            $panelContainer.css('background-color', '');
+            elem.css('background-color', '');
+          }
 
-      $scope.setValues(data);
+          elem.html(body);
 
-      data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) {
-        return Number(strVale.trim());
-      });
+          if (panel.sparkline.show) {
+            addSparkline();
+          }
 
-      data.colorMap = $scope.panel.colors;
+          elem.toggleClass('pointer', panel.links.length > 0);
 
-      $scope.data = data;
-      $scope.$broadcast('render');
-    };
+          if (panel.links.length > 0) {
+            linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], scope.panel.scopedVars);
+          } else {
+            linkInfo = null;
+          }
+        }
 
-    $scope.setValues = function(data) {
-      data.flotpairs = [];
+        // drilldown link tooltip
+        var drilldownTooltip = $('<div id="tooltip" class="">hello</div>"');
 
-      if($scope.series.length > 1) {
-        $scope.inspector.error = new Error();
-        $scope.inspector.error.message = 'Multiple Series Error';
-        $scope.inspector.error.data = 'Metric query returns ' + $scope.series.length +
-        ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify($scope.series);
-        throw $scope.inspector.error;
-      }
+        elem.mouseleave(function() {
+          if (panel.links.length === 0) { return;}
+          drilldownTooltip.detach();
+        });
 
-      if ($scope.series && $scope.series.length > 0) {
-        var lastPoint = _.last($scope.series[0].datapoints);
-        var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;
-
-        if (_.isString(lastValue)) {
-          data.value = 0;
-          data.valueFormated = lastValue;
-          data.valueRounded = 0;
-        } else {
-          data.value = $scope.series[0].stats[$scope.panel.valueName];
-          data.flotpairs = $scope.series[0].flotpairs;
-
-          var decimalInfo = $scope.getDecimalsForValue(data.value);
-          var formatFunc = kbn.valueFormats[$scope.panel.format];
-          data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);
-          data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
-        }
-      }
+        elem.click(function() {
+          if (!linkInfo) { return; }
 
-      // check value to text mappings
-      for(var i = 0; i < $scope.panel.valueMaps.length; i++) {
-        var map = $scope.panel.valueMaps[i];
-        // special null case
-        if (map.value === 'null') {
-          if (data.value === null || data.value === void 0) {
-            data.valueFormated = map.text;
+          if (linkInfo.target === '_blank') {
+            var redirectWindow = window.open(linkInfo.href, '_blank');
+            redirectWindow.location;
             return;
           }
-          continue;
-        }
 
-        // value/number to text mapping
-        var value = parseFloat(map.value);
-        if (value === data.value) {
-          data.valueFormated = map.text;
-          return;
-        }
-      }
+          if (linkInfo.href.indexOf('http') === 0) {
+            window.location.href = linkInfo.href;
+          } else {
+            $timeout(function() {
+              $location.url(linkInfo.href);
+            });
+          }
 
-      if (data.value === null || data.value === void 0) {
-        data.valueFormated = "no value";
-      }
-    };
+          drilldownTooltip.detach();
+        });
 
-    $scope.removeValueMap = function(map) {
-      var index = _.indexOf($scope.panel.valueMaps, map);
-      $scope.panel.valueMaps.splice(index, 1);
-      $scope.render();
-    };
+        elem.mousemove(function(e) {
+          if (!linkInfo) { return;}
 
-    $scope.addValueMap = function() {
-      $scope.panel.valueMaps.push({value: '', op: '=', text: '' });
+          drilldownTooltip.text('click to go to: ' + linkInfo.title);
+
+          drilldownTooltip.place_tt(e.pageX+20, e.pageY-15);
+        });
+      }
     };
+  }
 
-    $scope.init();
-  });
+  return {
+    panel: singleStatPanel
+  };
 });

public/test/specs/singlestat-specs.js

@@ -1,11 +1,14 @@
 define([
+  'angular',
   './helpers',
+  'app/plugins/panel/singlestat/controller',
   'app/features/panel/panel_srv',
   'app/features/panel/panel_helper',
-  'app/plugins/panel/singlestat/module'
-], function(helpers) {
+], function(angular, helpers, SingleStatCtrl) {
   'use strict';
 
+  angular.module('grafana.controllers').controller('SingleStatCtrl', SingleStatCtrl);
+
   describe('SingleStatCtrl', function() {
     var ctx = new helpers.ControllerTestContext();
 
@@ -16,7 +19,7 @@ define([
         ctx.setup = function (setupFunc) {
 
           beforeEach(module('grafana.services'));
-          beforeEach(module('grafana.panels.singlestat'));
+          beforeEach(module('grafana.controllers'));
 
           beforeEach(ctx.providePhase());
           beforeEach(ctx.createControllerPhase('SingleStatCtrl'));
@@ -24,7 +27,7 @@ define([
           beforeEach(function() {
             setupFunc();
             ctx.datasource.query = sinon.stub().returns(ctx.$q.when({
-              data: [ { target: 'test.cpu1', datapoints: ctx.datapoints } ]
+              data: [{target: 'test.cpu1', datapoints: ctx.datapoints}]
             }));
 
             ctx.scope.refreshData(ctx.datasource);