diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx index 3598166fac6..53040b267d6 100644 --- a/packages/grafana-ui/src/components/Modal/Modal.tsx +++ b/packages/grafana-ui/src/components/Modal/Modal.tsx @@ -6,6 +6,7 @@ import React, { PropsWithChildren, useRef } from 'react'; import { useTheme2 } from '../../themes'; import { IconName } from '../../types'; +import { t } from '../../utils/i18n'; import { IconButton } from '../IconButton/IconButton'; import { HorizontalGroup } from '../Layout/Layout'; @@ -84,7 +85,12 @@ export function Modal(props: PropsWithChildren) { typeof title !== 'string' && title }
- +
{children}
diff --git a/public/app/core/components/help/HelpModal.tsx b/public/app/core/components/help/HelpModal.tsx index 9b970ae58cb..f13cf217004 100644 --- a/public/app/core/components/help/HelpModal.tsx +++ b/public/app/core/components/help/HelpModal.tsx @@ -3,57 +3,127 @@ import React, { useMemo } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { Modal, useStyles2 } from '@grafana/ui'; +import { t } from 'app/core/internationalization'; import { getModKey } from 'app/core/utils/browser'; const getShortcuts = (modKey: string) => { - return { - Global: [ - { keys: ['g', 'h'], description: 'Go to Home Dashboard' }, - { keys: ['g', 'd'], description: 'Go to Dashboards' }, - { keys: ['g', 'e'], description: 'Go to Explore' }, - { keys: ['g', 'p'], description: 'Go to Profile' }, - { keys: [`${modKey} + k`], description: 'Open search' }, - { 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' }, - { keys: ['d', 'x'], description: 'Toggle exemplars in all panel' }, - ], - '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', - }, - ], - }; + return [ + { + category: t('help-modal.shortcuts-category.global', 'Global'), + shortcuts: [ + { + keys: ['g', 'h'], + description: t('help-modal.shortcuts-description.go-to-home-dashboard', 'Go to Home Dashboard'), + }, + { + keys: ['g', 'd'], + description: t('help-modal.shortcuts-description.go-to-dashboards', 'Go to Dashboards'), + }, + { keys: ['g', 'e'], description: t('help-modal.shortcuts-description.go-to-explore', 'Go to Explore') }, + { keys: ['g', 'p'], description: t('help-modal.shortcuts-description.go-to-profile', 'Go to Profile') }, + { keys: [`${modKey} + k`], description: t('help-modal.shortcuts-description.open-search', 'Open search') }, + { + keys: ['esc'], + description: t('help-modal.shortcuts-description.exit-edit/setting-views', 'Exit edit/setting views'), + }, + { + keys: ['h'], + description: t('help-modal.shortcuts-description.show-all-shortcuts', 'Show all keyboard shortcuts'), + }, + { keys: ['c', 't'], description: t('help-modal.shortcuts-description.change-theme', 'Change theme') }, + ], + }, + { + category: t('help-modal.shortcuts-category.dashboard', 'Dashboard'), + shortcuts: [ + { keys: [`${modKey}+s`], description: t('help-modal.shortcuts-description.save-dashboard', 'Save dashboard') }, + { + keys: ['d', 'r'], + description: t('help-modal.shortcuts-description.refresh-all-panels', 'Refresh all panels'), + }, + { + keys: ['d', 's'], + description: t('help-modal.shortcuts-description.dashboard-settings', 'Dashboard settings'), + }, + { + keys: ['d', 'v'], + description: t('help-modal.shortcuts-description.toggle-active-mode', 'Toggle in-active / view mode'), + }, + { + keys: ['d', 'k'], + description: t('help-modal.shortcuts-description.toggle-kiosk', 'Toggle kiosk mode (hides top nav)'), + }, + { keys: ['d', 'E'], description: t('help-modal.shortcuts-description.expand-all-rows', 'Expand all rows') }, + { keys: ['d', 'C'], description: t('help-modal.shortcuts-description.collapse-all-rows', 'Collapse all rows') }, + { + keys: ['d', 'a'], + description: t( + 'help-modal.shortcuts-description.toggle-auto-fit', + 'Toggle auto fit panels (experimental feature)' + ), + }, + { + keys: [`${modKey} + o`], + description: t('help-modal.shortcuts-description.toggle-graph-crosshair', 'Toggle shared graph crosshair'), + }, + { + keys: ['d', 'l'], + description: t('help-modal.shortcuts-description.toggle-all-panel-legends', 'Toggle all panel legends'), + }, + { + keys: ['d', 'x'], + description: t('help-modal.shortcuts-description.toggle-exemplars', 'Toggle exemplars in all panel'), + }, + ], + }, + { + category: t('help-modal.shortcuts-category.focused-panel', 'Focused Panel'), + shortcuts: [ + { + keys: ['e'], + description: t('help-modal.shortcuts-description.toggle-panel-edit', 'Toggle panel edit view'), + }, + { + keys: ['v'], + description: t('help-modal.shortcuts-description.toggle-panel-fullscreen', 'Toggle panel fullscreen view'), + }, + { + keys: ['p', 's'], + description: t('help-modal.shortcuts-description.open-shared-modal', 'Open Panel Share Modal'), + }, + { keys: ['p', 'd'], description: t('help-modal.shortcuts-description.duplicate-panel', 'Duplicate Panel') }, + { keys: ['p', 'r'], description: t('help-modal.shortcuts-description.remove-panel', 'Remove Panel') }, + { + keys: ['p', 'l'], + description: t('help-modal.shortcuts-description.toggle-panel-legend', 'Toggle panel legend'), + }, + ], + }, + { + category: t('help-modal.shortcuts-category.time-range', 'Time Range'), + shortcuts: [ + { + keys: ['t', 'z'], + description: t('help-modal.shortcuts-description.zoom-out-time-range', 'Zoom out time range'), + }, + { + keys: ['t', '←'], + description: t('help-modal.shortcuts-description.move-time-range-back', 'Move time range back'), + }, + { + keys: ['t', '→'], + description: t('help-modal.shortcuts-description.move-time-range-forward', 'Move time range forward'), + }, + { + keys: ['t', 'a'], + description: t( + 'help-modal.shortcuts-description.make-time-range-permanent', + 'Make time range absolute/permanent' + ), + }, + ], + }, + ]; }; export interface HelpModalProps { @@ -65,9 +135,9 @@ export const HelpModal = ({ onDismiss }: HelpModalProps): JSX.Element => { const modKey = useMemo(() => getModKey(), []); const shortcuts = useMemo(() => getShortcuts(modKey), [modKey]); return ( - +
- {Object.entries(shortcuts).map(([category, shortcuts], i) => ( + {Object.values(shortcuts).map(({ category, shortcuts }, i) => (
diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json index 4bbc232a20e..5393838c870 100644 --- a/public/locales/de-DE/grafana.json +++ b/public/locales/de-DE/grafana.json @@ -221,6 +221,9 @@ "loading": "Ordner werden geladen …" }, "grafana-ui": { + "modal": { + "close-tooltip": "" + }, "segment-async": { "error": "Fehler beim Laden der Optionen", "loading": "Optionen werden geladen ...", @@ -231,6 +234,46 @@ "placeholder": "" } }, + "help-modal": { + "shortcuts-category": { + "dashboard": "", + "focused-panel": "", + "global": "", + "time-range": "" + }, + "shortcuts-description": { + "change-theme": "", + "collapse-all-rows": "", + "dashboard-settings": "", + "duplicate-panel": "", + "exit-edit/setting-views": "", + "expand-all-rows": "", + "go-to-dashboards": "", + "go-to-explore": "", + "go-to-home-dashboard": "", + "go-to-profile": "", + "make-time-range-permanent": "", + "move-time-range-back": "", + "move-time-range-forward": "", + "open-search": "", + "open-shared-modal": "", + "refresh-all-panels": "", + "remove-panel": "", + "save-dashboard": "", + "show-all-shortcuts": "", + "toggle-active-mode": "", + "toggle-all-panel-legends": "", + "toggle-auto-fit": "", + "toggle-exemplars": "", + "toggle-graph-crosshair": "", + "toggle-kiosk": "", + "toggle-panel-edit": "", + "toggle-panel-fullscreen": "", + "toggle-panel-legend": "", + "zoom-out-time-range": "" + }, + "title": "" + }, "library-panel": { "add-modal": { "cancel": "Abbrechen", diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 1930a73fc3d..531c212a893 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -221,6 +221,9 @@ "loading": "Loading folders..." }, "grafana-ui": { + "modal": { + "close-tooltip": "Close" + }, "segment-async": { "error": "Failed to load options", "loading": "Loading options...", @@ -231,6 +234,46 @@ "placeholder": "Choose" } }, + "help-modal": { + "shortcuts-category": { + "dashboard": "Dashboard", + "focused-panel": "Focused Panel", + "global": "Global", + "time-range": "Time Range" + }, + "shortcuts-description": { + "change-theme": "Change theme", + "collapse-all-rows": "Collapse all rows", + "dashboard-settings": "Dashboard settings", + "duplicate-panel": "Duplicate Panel", + "exit-edit/setting-views": "Exit edit/setting views", + "expand-all-rows": "Expand all rows", + "go-to-dashboards": "Go to Dashboards", + "go-to-explore": "Go to Explore", + "go-to-home-dashboard": "Go to Home Dashboard", + "go-to-profile": "Go to Profile", + "make-time-range-permanent": "Make time range absolute/permanent", + "move-time-range-back": "Move time range back", + "move-time-range-forward": "Move time range forward", + "open-search": "Open search", + "open-shared-modal": "Open Panel Share Modal", + "refresh-all-panels": "Refresh all panels", + "remove-panel": "Remove Panel", + "save-dashboard": "Save dashboard", + "show-all-shortcuts": "Show all keyboard shortcuts", + "toggle-active-mode": "Toggle in-active / view mode", + "toggle-all-panel-legends": "Toggle all panel legends", + "toggle-auto-fit": "Toggle auto fit panels (experimental feature)", + "toggle-exemplars": "Toggle exemplars in all panel", + "toggle-graph-crosshair": "Toggle shared graph crosshair", + "toggle-kiosk": "Toggle kiosk mode (hides top nav)", + "toggle-panel-edit": "Toggle panel edit view", + "toggle-panel-fullscreen": "Toggle panel fullscreen view", + "toggle-panel-legend": "Toggle panel legend", + "zoom-out-time-range": "Zoom out time range" + }, + "title": "Shortcuts" + }, "library-panel": { "add-modal": { "cancel": "Cancel", diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json index 78f29b1bbcd..c23c82bd237 100644 --- a/public/locales/es-ES/grafana.json +++ b/public/locales/es-ES/grafana.json @@ -226,6 +226,9 @@ "loading": "Cargando carpetas..." }, "grafana-ui": { + "modal": { + "close-tooltip": "" + }, "segment-async": { "error": "No se han podido cargar las opciones", "loading": "Cargando las opciones...", @@ -236,6 +239,46 @@ "placeholder": "" } }, + "help-modal": { + "shortcuts-category": { + "dashboard": "", + "focused-panel": "", + "global": "", + "time-range": "" + }, + "shortcuts-description": { + "change-theme": "", + "collapse-all-rows": "", + "dashboard-settings": "", + "duplicate-panel": "", + "exit-edit/setting-views": "", + "expand-all-rows": "", + "go-to-dashboards": "", + "go-to-explore": "", + "go-to-home-dashboard": "", + "go-to-profile": "", + "make-time-range-permanent": "", + "move-time-range-back": "", + "move-time-range-forward": "", + "open-search": "", + "open-shared-modal": "", + "refresh-all-panels": "", + "remove-panel": "", + "save-dashboard": "", + "show-all-shortcuts": "", + "toggle-active-mode": "", + "toggle-all-panel-legends": "", + "toggle-auto-fit": "", + "toggle-exemplars": "", + "toggle-graph-crosshair": "", + "toggle-kiosk": "", + "toggle-panel-edit": "", + "toggle-panel-fullscreen": "", + "toggle-panel-legend": "", + "zoom-out-time-range": "" + }, + "title": "" + }, "library-panel": { "add-modal": { "cancel": "Cancelar", diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json index bf54e45a408..66effb16767 100644 --- a/public/locales/fr-FR/grafana.json +++ b/public/locales/fr-FR/grafana.json @@ -226,6 +226,9 @@ "loading": "Chargement des dossiers..." }, "grafana-ui": { + "modal": { + "close-tooltip": "" + }, "segment-async": { "error": "Échec du chargement des options", "loading": "Chargement des options...", @@ -236,6 +239,46 @@ "placeholder": "" } }, + "help-modal": { + "shortcuts-category": { + "dashboard": "", + "focused-panel": "", + "global": "", + "time-range": "" + }, + "shortcuts-description": { + "change-theme": "", + "collapse-all-rows": "", + "dashboard-settings": "", + "duplicate-panel": "", + "exit-edit/setting-views": "", + "expand-all-rows": "", + "go-to-dashboards": "", + "go-to-explore": "", + "go-to-home-dashboard": "", + "go-to-profile": "", + "make-time-range-permanent": "", + "move-time-range-back": "", + "move-time-range-forward": "", + "open-search": "", + "open-shared-modal": "", + "refresh-all-panels": "", + "remove-panel": "", + "save-dashboard": "", + "show-all-shortcuts": "", + "toggle-active-mode": "", + "toggle-all-panel-legends": "", + "toggle-auto-fit": "", + "toggle-exemplars": "", + "toggle-graph-crosshair": "", + "toggle-kiosk": "", + "toggle-panel-edit": "", + "toggle-panel-fullscreen": "", + "toggle-panel-legend": "", + "zoom-out-time-range": "" + }, + "title": "" + }, "library-panel": { "add-modal": { "cancel": "Annuler", diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index abacecfc830..1d95c43cfcd 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -221,6 +221,9 @@ "loading": "Ŀőäđįʼnģ ƒőľđęřş..." }, "grafana-ui": { + "modal": { + "close-tooltip": "Cľőşę" + }, "segment-async": { "error": "Fäįľęđ ŧő ľőäđ őpŧįőʼnş", "loading": "Ŀőäđįʼnģ őpŧįőʼnş...", @@ -231,6 +234,46 @@ "placeholder": "Cĥőőşę" } }, + "help-modal": { + "shortcuts-category": { + "dashboard": "Đäşĥþőäřđ", + "focused-panel": "Főčūşęđ Päʼnęľ", + "global": "Ğľőþäľ", + "time-range": "Ŧįmę Ŗäʼnģę" + }, + "shortcuts-description": { + "change-theme": "Cĥäʼnģę ŧĥęmę", + "collapse-all-rows": "Cőľľäpşę äľľ řőŵş", + "dashboard-settings": "Đäşĥþőäřđ şęŧŧįʼnģş", + "duplicate-panel": "Đūpľįčäŧę Päʼnęľ", + "exit-edit/setting-views": "Ēχįŧ ęđįŧ/şęŧŧįʼnģ vįęŵş", + "expand-all-rows": "Ēχpäʼnđ äľľ řőŵş", + "go-to-dashboards": "Ğő ŧő Đäşĥþőäřđş", + "go-to-explore": "Ğő ŧő Ēχpľőřę", + "go-to-home-dashboard": "Ğő ŧő Ħőmę Đäşĥþőäřđ", + "go-to-profile": "Ğő ŧő Přőƒįľę", + "make-time-range-permanent": "Mäĸę ŧįmę řäʼnģę äþşőľūŧę/pęřmäʼnęʼnŧ", + "move-time-range-back": "Mővę ŧįmę řäʼnģę þäčĸ", + "move-time-range-forward": "Mővę ŧįmę řäʼnģę ƒőřŵäřđ", + "open-search": "Øpęʼn şęäřčĥ", + "open-shared-modal": "Øpęʼn Päʼnęľ Ŝĥäřę Mőđäľ", + "refresh-all-panels": "Ŗęƒřęşĥ äľľ päʼnęľş", + "remove-panel": "Ŗęmővę Päʼnęľ", + "save-dashboard": "Ŝävę đäşĥþőäřđ", + "show-all-shortcuts": "Ŝĥőŵ äľľ ĸęyþőäřđ şĥőřŧčūŧş", + "toggle-active-mode": "Ŧőģģľę įʼn-äčŧįvę / vįęŵ mőđę", + "toggle-all-panel-legends": "Ŧőģģľę äľľ päʼnęľ ľęģęʼnđş", + "toggle-auto-fit": "Ŧőģģľę äūŧő ƒįŧ päʼnęľş (ęχpęřįmęʼnŧäľ ƒęäŧūřę)", + "toggle-exemplars": "Ŧőģģľę ęχęmpľäřş įʼn äľľ päʼnęľ", + "toggle-graph-crosshair": "Ŧőģģľę şĥäřęđ ģřäpĥ čřőşşĥäįř", + "toggle-kiosk": "Ŧőģģľę ĸįőşĸ mőđę (ĥįđęş ŧőp ʼnäv)", + "toggle-panel-edit": "Ŧőģģľę päʼnęľ ęđįŧ vįęŵ", + "toggle-panel-fullscreen": "Ŧőģģľę päʼnęľ ƒūľľşčřęęʼn vįęŵ", + "toggle-panel-legend": "Ŧőģģľę päʼnęľ ľęģęʼnđ", + "zoom-out-time-range": "Żőőm őūŧ ŧįmę řäʼnģę" + }, + "title": "Ŝĥőřŧčūŧş" + }, "library-panel": { "add-modal": { "cancel": "Cäʼnčęľ", diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json index fe69d8f1f38..68dad58c0a2 100644 --- a/public/locales/zh-Hans/grafana.json +++ b/public/locales/zh-Hans/grafana.json @@ -216,6 +216,9 @@ "loading": "正在加载文件夹..." }, "grafana-ui": { + "modal": { + "close-tooltip": "" + }, "segment-async": { "error": "加载选项失败", "loading": "正在加载选项...", @@ -226,6 +229,46 @@ "placeholder": "" } }, + "help-modal": { + "shortcuts-category": { + "dashboard": "", + "focused-panel": "", + "global": "", + "time-range": "" + }, + "shortcuts-description": { + "change-theme": "", + "collapse-all-rows": "", + "dashboard-settings": "", + "duplicate-panel": "", + "exit-edit/setting-views": "", + "expand-all-rows": "", + "go-to-dashboards": "", + "go-to-explore": "", + "go-to-home-dashboard": "", + "go-to-profile": "", + "make-time-range-permanent": "", + "move-time-range-back": "", + "move-time-range-forward": "", + "open-search": "", + "open-shared-modal": "", + "refresh-all-panels": "", + "remove-panel": "", + "save-dashboard": "", + "show-all-shortcuts": "", + "toggle-active-mode": "", + "toggle-all-panel-legends": "", + "toggle-auto-fit": "", + "toggle-exemplars": "", + "toggle-graph-crosshair": "", + "toggle-kiosk": "", + "toggle-panel-edit": "", + "toggle-panel-fullscreen": "", + "toggle-panel-legend": "", + "zoom-out-time-range": "" + }, + "title": "" + }, "library-panel": { "add-modal": { "cancel": "取消",