Merge branch 'master' of github.com:torkelo/grafana-private into pro

CHANGELOG.md

@@ -9,6 +9,7 @@
 # 1.8.1 (unreleased)
 
 **Fixes**
+- [Issue #855](https://github.com/grafana/grafana/issues/855). Graph: Fix for scroll issue in graph edit mode when dropdown goes below screen
 - [Issue #847](https://github.com/grafana/grafana/issues/847). Graph: Fix for series draw order not being the same after hiding/unhiding series
 - [Issue #851](https://github.com/grafana/grafana/issues/851). Annotations: Fix for annotations not reloaded when switching between 2 dashboards with annotations
 - [Issue #846](https://github.com/grafana/grafana/issues/846). Edit panes: Issue when open row or json editor when scrolled down the page, unable to scroll and you did not see editor

package.json

@@ -4,7 +4,7 @@
     "company": "Coding Instinct AB"
   },
   "name": "grafana",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "repository": {
     "type": "git",
     "url": "http://github.com/torkelo/grafana.git"

src/app/directives/grafanaGraph.js

@@ -19,8 +19,30 @@ function (angular, $, kbn, moment, _, graphTooltip) {
         var dashboard = scope.dashboard;
         var data, annotations;
         var legendSideLastValue = null;
+        scope.crosshairEmiter = false;
 
-        scope.$on('refresh',function() {
+        scope.onAppEvent('setCrosshair', function(event, info) {
+          // do not need to to this if event is from this panel
+          if (info.scope === scope) {
+            return;
+          }
+
+          if(dashboard.sharedCrosshair) {
+            var plot = elem.data().plot;
+            if (plot) {
+              plot.setCrosshair({ x: info.pos.x, y: info.pos.y });
+            }
+          }
+        });
+
+        scope.onAppEvent('clearCrosshair', function() {
+          var plot = elem.data().plot;
+          if (plot) {
+            plot.clearCrosshair();
+          }
+        });
+
+        scope.$on('refresh', function() {
           scope.get_data();
         });
 
@@ -147,7 +169,7 @@ function (angular, $, kbn, moment, _, graphTooltip) {
               color: '#666'
             },
             crosshair: {
-              mode: panel.tooltip.shared ? "x" : null
+              mode: panel.tooltip.shared || dashboard.sharedCrosshair ? "x" : null
             }
           };
 
@@ -394,7 +416,7 @@ function (angular, $, kbn, moment, _, graphTooltip) {
           elem.html('<img src="' + url + '"></img>');
         }
 
-        graphTooltip.register(elem, dashboard, scope);
+        graphTooltip.register(elem, dashboard, scope, $rootScope);
 
         elem.bind("plotselected", function (event, ranges) {
           scope.$apply(function() {

src/app/directives/grafanaGraph.tooltip.js

@@ -10,11 +10,13 @@ function ($, kbn) {
     var $tooltip = $('<div id="tooltip">');
 
     elem.mouseleave(function () {
-      if(scope.panel.tooltip.shared) {
+      if (scope.panel.tooltip.shared || dashboard.sharedCrosshair) {
         var plot = elem.data().plot;
-        $tooltip.detach();
-        plot.clearCrosshair();
-        plot.unhighlight();
+        if (plot) {
+          $tooltip.detach();
+          plot.unhighlight();
+          scope.appEvent('clearCrosshair');
+        }
       }
     });
 
@@ -32,6 +34,10 @@ function ($, kbn) {
       var data = plot.getData();
       var group, value, timestamp, seriesInfo, format, i, series, hoverIndex, seriesHtml;
 
+      if(dashboard.sharedCrosshair){
+        scope.appEvent('setCrosshair',  { pos: pos, scope: scope });
+      }
+
       if (scope.panel.tooltip.shared) {
         plot.unhighlight();
 
@@ -60,11 +66,15 @@ function ($, kbn) {
           seriesInfo = series.info;
           format = scope.panel.y_formats[seriesInfo.yaxis - 1];
 
-          if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
-            value = series.data[hoverIndex][1];
+          if (scope.panel.stack) {
+            if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
+              value = series.data[hoverIndex][1];
+            } else {
+              last_value += series.data[hoverIndex][1];
+              value = last_value;
+            }
           } else {
-            last_value += series.data[hoverIndex][1];
-            value = last_value;
+            value = series.data[hoverIndex][1];
           }
 
           value = kbn.valueFormats[format](value, series.yaxis.tickDecimals);

src/app/panels/graph/styleEditor.html

@@ -33,11 +33,7 @@
 		<editor-opt-bool text="Stack" model="panel.stack" change="render()"></editor-opt-bool>
 		<editor-opt-bool text="Percent" model="panel.percentage" change="render()" tip="Stack as a percentage of total"></editor-opt-bool>
 
-    <div class="editor-option" ng-show="panel.stack">
-      <label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?</tip></label>
-      <select class="input-small" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="render()"></select>
-    </div>
-  </div>
+	</div>
 
 
   <div class="section">
@@ -55,7 +51,12 @@
   <div class="section">
     <h5>Tooltip</h5>
     <div class="editor-option">
-      <label class="small">shared <tip> Show all series values on the same time in the same tooltip and a x croshair to help follow all series</tip> </label><input type="checkbox" ng-model="panel.tooltip.shared" ng-checked="panel.tooltip.shared" ng-change="render()">
+			<label class="small">shared <tip> Show all series values on the same time in the same tooltip and a x croshair to help follow all series</tip></label>
+			<input type="checkbox" ng-model="panel.tooltip.shared" ng-checked="panel.tooltip.shared" ng-change="render()">
+    </div>
+		<div class="editor-option" ng-show="panel.stack">
+      <label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?</tip></label>
+      <select class="input-small" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="render()"></select>
     </div>
   </div>
 </div>
@@ -88,7 +89,7 @@
 							{{option.name}}: {{option.value}}
 						</li>
 						<li class="dropdown">
-							<a class="dropdown-toggle grafana-target-segment" data-toggle="dropdown" gf-dropdown="overrideMenu" bs-tooltip="'set option to override'" data-placement="right">
+							<a class="dropdown-toggle grafana-target-segment" data-toggle="dropdown" gf-dropdown="overrideMenu" bs-tooltip="'set option to override'" data-placement="top">
 								<i class="icon-plus"></i>
 							</a>
 						</li>

src/app/partials/dasheditor.html

@@ -74,6 +74,7 @@
 						<input class="cr1" id="pulldown{{pulldown.type}}" type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
 						<label for="pulldown{{pulldown.type}}" class="cr1"></label>
 					</div>
+          <editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
 				</div>
 			</div>
 		</div>

src/app/services/dashboard/dashboardKeyBindings.js

@@ -18,6 +18,7 @@ function(angular, $) {
         keyboardManager.unbind('ctrl+s');
         keyboardManager.unbind('ctrl+r');
         keyboardManager.unbind('ctrl+z');
+        keyboardManager.unbind('ctrl+o');
         keyboardManager.unbind('esc');
       });
 
@@ -25,6 +26,12 @@ function(angular, $) {
         scope.appEvent('show-dash-editor', { src: 'app/partials/search.html' });
       }, { inputDisabled: true });
 
+      keyboardManager.bind('ctrl+o', function() {
+        var current = scope.dashboard.sharedCrosshair;
+        scope.dashboard.sharedCrosshair = !current;
+        scope.dashboard.emit_refresh('refresh');
+      }, { inputDisabled: true });
+
       keyboardManager.bind('ctrl+h', function() {
         var current = scope.dashboard.hideControls;
         scope.dashboard.hideControls = !current;

src/app/services/dashboard/dashboardSrv.js

@@ -27,6 +27,7 @@ function (angular, $, kbn, _, moment) {
       this.timezone = data.timezone || 'browser';
       this.editable = data.editable === false ? false : true;
       this.hideControls = data.hideControls || false;
+      this.sharedCrosshair = data.sharedCrosshair || false;
       this.rows = data.rows || [];
       this.nav = data.nav || [];
       this.time = data.time || { from: 'now-6h', to: 'now' };

src/css/less/grafana.less

@@ -120,6 +120,10 @@
   .panel-content {
     padding-bottom: 130px;
   }
+
+  .dropdown-menu {
+    margin-bottom: 70px;
+  }
 }
 
 .dashboard-fullscreen {

src/test/specs/grafanaGraph-specs.js

@@ -14,10 +14,13 @@ define([
     function graphScenario(desc, func)  {
       describe(desc, function() {
         var ctx = {};
+
         ctx.setup = function (setupFunc) {
+
           beforeEach(module(function($provide) {
             $provide.value("timeSrv", new helpers.TimeSrvStub());
           }));
+
           beforeEach(inject(function($rootScope, $compile) {
             var scope = $rootScope.$new();
             var element = angular.element("<div style='width:500px' grafana-graph><div>");
@@ -28,10 +31,13 @@ define([
               grid: {},
               y_formats: [],
               seriesOverrides: [],
-	      tooltip: {
+              tooltip: {
                 shared: true
               }
             };
+
+            scope.appEvent = sinon.spy();
+            scope.onAppEvent = sinon.spy();
             scope.hiddenSeries = {};
             scope.dashboard = { timezone: 'browser' };
             scope.range = {

src/test/specs/graph-tooltip-specs.js

@@ -10,11 +10,14 @@ define([
       formatDate: sinon.stub().returns('date'),
     };
     var scope =  {
+      appEvent: sinon.spy(),
+      onAppEvent: sinon.spy(),
       panel: {
         tooltip:  {
           shared: true
         },
         y_formats: ['ms', 'none'],
+        stack: true
       }
     };
 

src/test/specs/sharePanelCtrl-specs.js

@@ -26,16 +26,16 @@ define([
       it('should generate share url absolute time', function() {
         ctx.$location.path('/test');
         ctx.scope.panel = { id: 22 };
-        ctx.timeSrv.time = { from: new Date(2012,1,1), to: new Date(2014,3,5) };
+        ctx.timeSrv.time = { from: new Date(1362178800000), to: new Date(1396648800000) };
 
         ctx.scope.buildUrl();
-        expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=1328050800000&to=1396648800000&panelId=22&fullscreen');
+        expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=1362178800000&to=1396648800000&panelId=22&fullscreen');
       });
 
       it('should generate share url with time as JSON strings', function() {
         ctx.$location.path('/test');
         ctx.scope.panel = { id: 22 };
-        ctx.timeSrv.time = { from: new Date(2012,1,1).toJSON(), to: new Date(2014,3,5).toJSON() };
+        ctx.timeSrv.time = { from: "2012-01-31T23:00:00.000Z", to: "2014-04-04T22:00:00.000Z" };
 
         ctx.scope.buildUrl();
         expect(ctx.scope.shareUrl).to.be('http://server/#/test?from=1328050800000&to=1396648800000&panelId=22&fullscreen');