Prometheus: Add a keyboard shortcut to toggle all exemplars (#64479)

* Add a keyboard shortcut to toggle all exemplars

Sometimes it's hard to see the quantile line behind all the exemplars.

This commit adds a `d x` keyboard shortcut to toggle exemplar visibility
on all prometheus queries. Unlike with legends, the logic is simpler
and it does a pure toggle as opposed to "majority toggle" as with legends.

Since exemplars might not be loaded, this also requires refreshing the data.
For the same reason, toggling a single panel is not supported, as it will
make the panel data out of sync with the rest of the dashboard.

* Use "p x" to navigate to panel explore rather than just "x"

It's more consistent with other panel level shortcuts.

It also doesn't conflict with the global "x" to toggle exemplars that way.

.betterer.results

@@ -2351,11 +2351,12 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "28"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "29"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "30"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "31"],
+      [0, 0, 0, "Do not use any type assertions.", "31"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "32"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "33"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "34"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "35"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "35"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "36"]
     ],
     "public/app/features/dashboard/state/PanelModel.test.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],

public/app/core/components/help/HelpModal.tsx

@@ -28,6 +28,7 @@ const getShortcuts = (modKey: string) => {
       { keys: ['d', 'a'], description: 'Toggle auto fit panels (experimental feature)' },
       { keys: [`${modKey} + o`], description: 'Toggle shared graph crosshair' },
       { keys: ['d', 'l'], description: 'Toggle all panel legends' },
+      { keys: ['d', 'x'], description: 'Toggle exemplars in all panel' },
     ],
     'Focused Panel': [
       { keys: ['e'], description: 'Toggle panel edit view' },

public/app/core/services/keybindingSrv.ts

@@ -259,7 +259,7 @@ export class KeybindingSrv {
 
     // jump to explore if permissions allow
     if (contextSrv.hasAccessToExplore()) {
-      this.bindWithPanelId('x', async (panelId) => {
+      this.bindWithPanelId('p x', async (panelId) => {
         const panel = dashboard.getPanelById(panelId)!;
         const url = await getExploreUrl({
           panel,
@@ -313,6 +313,11 @@ export class KeybindingSrv {
       dashboard.toggleLegendsForAll();
     });
 
+    // toggle all exemplars
+    this.bind('d x', () => {
+      dashboard.toggleExemplarsForAll();
+    });
+
     // collapse all rows
     this.bind('d shift+c', () => {
       dashboard.collapseRows();

public/app/features/dashboard/state/DashboardModel.ts

@@ -25,6 +25,7 @@ import { sortedDeepCloneWithoutNulls } from 'app/core/utils/object';
 import { variableAdapters } from 'app/features/variables/adapters';
 import { onTimeRangeUpdated } from 'app/features/variables/state/actions';
 import { GetVariables, getVariablesByKey } from 'app/features/variables/state/selectors';
+import { PromQuery } from 'app/plugins/datasource/prometheus/types';
 import { CoreEvents, DashboardMeta, KioskMode } from 'app/types';
 import { DashboardMetaChangedEvent, DashboardPanelsChangedEvent, RenderEvent } from 'app/types/events';
 
@@ -1156,6 +1157,21 @@ export class DashboardModel implements TimeModel {
     }
   }
 
+  toggleExemplarsForAll() {
+    for (const panel of this.panels) {
+      for (const target of panel.targets) {
+        if (!(target.datasource && target.datasource.type === 'prometheus')) {
+          continue;
+        }
+
+        const promTarget = target as PromQuery;
+        promTarget.exemplar = !promTarget.exemplar;
+      }
+    }
+
+    this.startRefresh();
+  }
+
   getVariables() {
     return this.getVariablesFromState(this.uid);
   }

public/app/features/dashboard/utils/getPanelMenu.test.ts

@@ -68,7 +68,7 @@ describe('getPanelMenu()', () => {
         {
           "iconClassName": "compass",
           "onClick": [Function],
-          "shortcut": "x",
+          "shortcut": "p x",
           "text": "Explore",
         },
         {
@@ -448,7 +448,7 @@ describe('getPanelMenu()', () => {
           {
             "iconClassName": "compass",
             "onClick": [Function],
-            "shortcut": "x",
+            "shortcut": "p x",
             "text": "Explore",
           },
           {

public/app/features/dashboard/utils/getPanelMenu.ts

@@ -156,7 +156,7 @@ export function getPanelMenu(
       text: t('panel.header-menu.explore', `Explore`),
       iconClassName: 'compass',
       onClick: onNavigateToExplore,
-      shortcut: 'x',
+      shortcut: 'p x',
     });
   }