feat(graph): shared graph tooltip is not a select option with 3 options, normal,…

feat(graph): shared graph tooltip is not a select option with 3 options, normal, shared crosshair & shared tooltip, CTRL+O or CMD+O cycles option, closes #6894

docs/sources/reference/dashboard.md

@@ -33,7 +33,7 @@ When a user creates a new dashboard, a new dashboard JSON object is initialized
   "timezone": "browser",
   "timezone": "browser",
   "editable": true,
   "editable": true,
   "hideControls": false,
   "hideControls": false,
-  "sharedCrosshair": false,
+  "graphTooltip": 1,
   "rows": [],
   "rows": [],
   "time": {
   "time": {
     "from": "now-6h",
     "from": "now-6h",
@@ -65,7 +65,7 @@ Each field in the dashboard JSON is explained below with its usage:
 | **timezone** | timezone of dashboard, i.e. `utc` or `browser` |
 | **timezone** | timezone of dashboard, i.e. `utc` or `browser` |
 | **editable** | whether a dashboard is editable or not |
 | **editable** | whether a dashboard is editable or not |
 | **hideControls** | whether row controls on the left in green are hidden or not |
 | **hideControls** | whether row controls on the left in green are hidden or not |
-| **sharedCrosshair** | TODO |
+| **graphTooltip** | TODO |
 | **rows** | row metadata, see [rows section](/docs/sources/reference/dashboard.md/#rows) for details |
 | **rows** | row metadata, see [rows section](/docs/sources/reference/dashboard.md/#rows) for details |
 | **time** | time range for dashboard, i.e. last 6 hours, last 7 days, etc |
 | **time** | time range for dashboard, i.e. last 6 hours, last 7 days, etc |
 | **timepicker** | timepicker metadata, see [timepicker section](/docs/sources/reference/dashboard.md/#timepicker) for details |
 | **timepicker** | timepicker metadata, see [timepicker section](/docs/sources/reference/dashboard.md/#timepicker) for details |

public/app/core/services/keybindingSrv.ts

@@ -88,7 +88,7 @@ export class KeybindingSrv {
     // });
     // });
 
 
     this.bind('mod+o', () => {
     this.bind('mod+o', () => {
-      dashboard.sharedCrosshair = !dashboard.sharedCrosshair;
+      dashboard.graphTooltip = (dashboard.graphTooltip + 1) % 3;
       appEvents.emit('graph-hover-clear');
       appEvents.emit('graph-hover-clear');
       scope.broadcastRefresh();
       scope.broadcastRefresh();
     });
     });

public/app/features/dashboard/model.ts

@@ -18,7 +18,7 @@ export class DashboardModel {
   style: any;
   style: any;
   timezone: any;
   timezone: any;
   editable: any;
   editable: any;
-  sharedCrosshair: any;
+  graphTooltip: any;
   rows: DashboardRow[];
   rows: DashboardRow[];
   time: any;
   time: any;
   timepicker: any;
   timepicker: any;
@@ -51,7 +51,7 @@ export class DashboardModel {
     this.style = data.style || "dark";
     this.style = data.style || "dark";
     this.timezone = data.timezone || '';
     this.timezone = data.timezone || '';
     this.editable = data.editable !== false;
     this.editable = data.editable !== false;
-    this.sharedCrosshair = data.sharedCrosshair || false;
+    this.graphTooltip = data.graphTooltip || false;
     this.hideControls = data.hideControls || false;
     this.hideControls = data.hideControls || false;
     this.time = data.time || { from: 'now-6h', to: 'now' };
     this.time = data.time || { from: 'now-6h', to: 'now' };
     this.timepicker = data.timepicker || {};
     this.timepicker = data.timepicker || {};
@@ -267,6 +267,18 @@ export class DashboardModel {
     }
     }
   }
   }
 
 
+  cycleGraphTooltip() {
+    this.graphTooltip = (this.graphTooltip + 1) % 3;
+  }
+
+  sharedTooltipModeEnabled() {
+    return this.graphTooltip !== 0;
+  }
+
+  sharedCrosshairModeOnly() {
+    return this.graphTooltip === 1;
+  }
+
   getRelativeTime(date) {
   getRelativeTime(date) {
     date = moment.isMoment(date) ? date : moment(date);
     date = moment.isMoment(date) ? date : moment(date);
 
 
@@ -297,7 +309,7 @@ export class DashboardModel {
     var i, j, k;
     var i, j, k;
     var oldVersion = this.schemaVersion;
     var oldVersion = this.schemaVersion;
     var panelUpgrades = [];
     var panelUpgrades = [];
-    this.schemaVersion = 13;
+    this.schemaVersion = 14;
 
 
     if (oldVersion === this.schemaVersion) {
     if (oldVersion === this.schemaVersion) {
       return;
       return;
@@ -602,6 +614,10 @@ export class DashboardModel {
         });
         });
       }
       }
 
 
+      if (oldVersion < 14) {
+        this.graphTooltip = old.sharedCrosshair ? 1 : 0;
+      }
+
       if (panelUpgrades.length === 0) {
       if (panelUpgrades.length === 0) {
         return;
         return;
       }
       }

public/app/features/dashboard/partials/settings.html

@@ -61,12 +61,21 @@
                         checked="dashboard.hideControls"
                         checked="dashboard.hideControls"
                         label-class="width-11">
                         label-class="width-11">
         </gf-form-switch>
         </gf-form-switch>
-        <gf-form-switch class="gf-form"
-                        label="Shared Tooltip"
-                        tooltip="Shared Tooltip on all graphs. Shortcut: CTRL+O or CMD+O"
-                        checked="dashboard.sharedCrosshair"
-                        label-class="width-11">
-        </gf-form-switch>
+      </div>
+    </div>
+
+    <div class="section">
+      <h5 class="section-heading">Panel Options</h5>
+      <div class="gf-form">
+        <label class="gf-form-label width-11">
+          Graph Tooltip
+          <info-popover mode="right-normal">
+            Cycle between options using Shortcut: CTRL+O or CMD+O
+          </info-popover>
+        </label>
+        <div class="gf-form-select-wrapper">
+          <select ng-model="dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
+        </div>
       </div>
       </div>
     </div>
     </div>
 
 

public/app/plugins/panel/graph/graph.ts

@@ -61,7 +61,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
       // global events
       // global events
       appEvents.on('graph-hover', function(evt) {
       appEvents.on('graph-hover', function(evt) {
         // ignore other graph hover events if shared tooltip is disabled
         // ignore other graph hover events if shared tooltip is disabled
-        if (!dashboard.sharedCrosshair) {
+        if (!dashboard.sharedTooltipModeEnabled()) {
           return;
           return;
         }
         }
 
 

public/app/plugins/panel/graph/graph_tooltip.js

@@ -179,6 +179,11 @@ function ($, core) {
         pos.pageY = elem.offset().top + elem.height() * pos.panelRelY;
         pos.pageY = elem.offset().top + elem.height() * pos.panelRelY;
         plot.setCrosshair(pos);
         plot.setCrosshair(pos);
         allSeriesMode = true;
         allSeriesMode = true;
+
+        if (dashboard.sharedCrosshairModeOnly()) {
+          // if only crosshair mode we are done
+          return;
+        }
       }
       }
 
 
       if (seriesList.length === 0) {
       if (seriesList.length === 0) {