|
|
|
@ -3,55 +3,64 @@ import React, { useMemo } from 'react'; |
|
|
|
|
|
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data'; |
|
|
|
|
import { Modal, useStyles2 } from '@grafana/ui'; |
|
|
|
|
import { config } from 'app/core/config'; |
|
|
|
|
import { getModKey } from 'app/core/utils/browser'; |
|
|
|
|
|
|
|
|
|
const getShortcuts = (modKey: string) => ({ |
|
|
|
|
Global: [ |
|
|
|
|
{ keys: ['g', 'h'], description: 'Go to Home Dashboard' }, |
|
|
|
|
{ keys: ['g', 'e'], description: 'Go to Explore' }, |
|
|
|
|
{ keys: ['g', 'p'], description: 'Go to Profile' }, |
|
|
|
|
{ keys: ['s', 'o'], description: 'Open search' }, |
|
|
|
|
{ keys: ['esc'], description: 'Exit edit/setting views' }, |
|
|
|
|
{ keys: ['h'], description: 'Show all keyboard shortcuts' }, |
|
|
|
|
{ keys: [`${modKey}+k`], description: 'Open command palette' }, |
|
|
|
|
{ keys: ['c', 't'], description: 'Change theme' }, |
|
|
|
|
], |
|
|
|
|
Dashboard: [ |
|
|
|
|
{ keys: [`${modKey}+s`], description: 'Save dashboard' }, |
|
|
|
|
{ keys: ['d', 'r'], description: 'Refresh all panels' }, |
|
|
|
|
{ keys: ['d', 's'], description: 'Dashboard settings' }, |
|
|
|
|
{ keys: ['d', 'v'], description: 'Toggle in-active / view mode' }, |
|
|
|
|
{ keys: ['d', 'k'], description: 'Toggle kiosk mode (hides top nav)' }, |
|
|
|
|
{ keys: ['d', 'E'], description: 'Expand all rows' }, |
|
|
|
|
{ keys: ['d', 'C'], description: 'Collapse all rows' }, |
|
|
|
|
{ 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' }, |
|
|
|
|
], |
|
|
|
|
'Focused Panel': [ |
|
|
|
|
{ keys: ['e'], description: 'Toggle panel edit view' }, |
|
|
|
|
{ keys: ['v'], description: 'Toggle panel fullscreen view' }, |
|
|
|
|
{ keys: ['p', 's'], description: 'Open Panel Share Modal' }, |
|
|
|
|
{ keys: ['p', 'd'], description: 'Duplicate Panel' }, |
|
|
|
|
{ keys: ['p', 'r'], description: 'Remove Panel' }, |
|
|
|
|
{ keys: ['p', 'l'], description: 'Toggle panel legend' }, |
|
|
|
|
], |
|
|
|
|
'Time Range': [ |
|
|
|
|
{ keys: ['t', 'z'], description: 'Zoom out time range' }, |
|
|
|
|
{ |
|
|
|
|
keys: ['t', '←'], |
|
|
|
|
description: 'Move time range back', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
keys: ['t', '→'], |
|
|
|
|
description: 'Move time range forward', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
keys: ['t', 'a'], |
|
|
|
|
description: 'Make time range absolute/permanent', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
const getShortcuts = (modKey: string) => { |
|
|
|
|
return { |
|
|
|
|
Global: [ |
|
|
|
|
{ keys: ['g', 'h'], description: 'Go to Home Dashboard' }, |
|
|
|
|
{ keys: ['g', 'e'], description: 'Go to Explore' }, |
|
|
|
|
{ keys: ['g', 'p'], description: 'Go to Profile' }, |
|
|
|
|
|
|
|
|
|
...(config.featureToggles.topnav |
|
|
|
|
? [{ keys: [`${modKey} + k`], description: 'Open search' }] |
|
|
|
|
: [ |
|
|
|
|
{ keys: ['s', 'o'], description: 'Open search' }, |
|
|
|
|
{ keys: [`${modKey} + k`], description: 'Open command palette' }, |
|
|
|
|
]), |
|
|
|
|
|
|
|
|
|
{ keys: ['esc'], description: 'Exit edit/setting views' }, |
|
|
|
|
{ keys: ['h'], description: 'Show all keyboard shortcuts' }, |
|
|
|
|
{ keys: ['c', 't'], description: 'Change theme' }, |
|
|
|
|
], |
|
|
|
|
Dashboard: [ |
|
|
|
|
{ keys: [`${modKey}+s`], description: 'Save dashboard' }, |
|
|
|
|
{ keys: ['d', 'r'], description: 'Refresh all panels' }, |
|
|
|
|
{ keys: ['d', 's'], description: 'Dashboard settings' }, |
|
|
|
|
{ keys: ['d', 'v'], description: 'Toggle in-active / view mode' }, |
|
|
|
|
{ keys: ['d', 'k'], description: 'Toggle kiosk mode (hides top nav)' }, |
|
|
|
|
{ keys: ['d', 'E'], description: 'Expand all rows' }, |
|
|
|
|
{ keys: ['d', 'C'], description: 'Collapse all rows' }, |
|
|
|
|
{ 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' }, |
|
|
|
|
], |
|
|
|
|
'Focused Panel': [ |
|
|
|
|
{ keys: ['e'], description: 'Toggle panel edit view' }, |
|
|
|
|
{ keys: ['v'], description: 'Toggle panel fullscreen view' }, |
|
|
|
|
{ keys: ['p', 's'], description: 'Open Panel Share Modal' }, |
|
|
|
|
{ keys: ['p', 'd'], description: 'Duplicate Panel' }, |
|
|
|
|
{ keys: ['p', 'r'], description: 'Remove Panel' }, |
|
|
|
|
{ keys: ['p', 'l'], description: 'Toggle panel legend' }, |
|
|
|
|
], |
|
|
|
|
'Time Range': [ |
|
|
|
|
{ keys: ['t', 'z'], description: 'Zoom out time range' }, |
|
|
|
|
{ |
|
|
|
|
keys: ['t', '←'], |
|
|
|
|
description: 'Move time range back', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
keys: ['t', '→'], |
|
|
|
|
description: 'Move time range forward', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
keys: ['t', 'a'], |
|
|
|
|
description: 'Make time range absolute/permanent', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export interface HelpModalProps { |
|
|
|
|
onDismiss: () => void; |
|
|
|
|