From 8e090f9951b52286e67076a7055b1861e0931ece Mon Sep 17 00:00:00 2001 From: Ivan Babrou Date: Tue, 25 Jul 2023 05:45:18 -0700 Subject: [PATCH] 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 | 5 +++-- public/app/core/components/help/HelpModal.tsx | 1 + public/app/core/services/keybindingSrv.ts | 7 ++++++- .../features/dashboard/state/DashboardModel.ts | 16 ++++++++++++++++ .../dashboard/utils/getPanelMenu.test.ts | 4 ++-- .../app/features/dashboard/utils/getPanelMenu.ts | 2 +- 6 files changed, 29 insertions(+), 6 deletions(-) diff --git a/.betterer.results b/.betterer.results index b64c3848efe..7e0ee1091bd 100644 --- a/.betterer.results +++ b/.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"], diff --git a/public/app/core/components/help/HelpModal.tsx b/public/app/core/components/help/HelpModal.tsx index 7761c3e4d6e..9b970ae58cb 100644 --- a/public/app/core/components/help/HelpModal.tsx +++ b/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' }, diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 8a836dc2d90..9553f37d0de 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/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(); diff --git a/public/app/features/dashboard/state/DashboardModel.ts b/public/app/features/dashboard/state/DashboardModel.ts index 4af55f70582..f6477298505 100644 --- a/public/app/features/dashboard/state/DashboardModel.ts +++ b/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); } diff --git a/public/app/features/dashboard/utils/getPanelMenu.test.ts b/public/app/features/dashboard/utils/getPanelMenu.test.ts index 88bbb6cf1ff..afffadcd47f 100644 --- a/public/app/features/dashboard/utils/getPanelMenu.test.ts +++ b/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", }, { diff --git a/public/app/features/dashboard/utils/getPanelMenu.ts b/public/app/features/dashboard/utils/getPanelMenu.ts index 960b4f49943..c3bc4dca6a8 100644 --- a/public/app/features/dashboard/utils/getPanelMenu.ts +++ b/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', }); }