IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

i18n: Mark up HelpModal for translations (#73806)

Browse Source 
* fix: i18n Help Modal

* fix: change translation modal to grafana-ui.modal

* fix: lint

* fix: by run yarn:i18n pseudo
This commit is contained in:
Denny Chang 2023-08-30 21:08:18 +08:00 committed by GitHub
parent 969ef5282c
commit a90f3b58b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 385 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/Modal/Modal.tsx
View File

@ -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<Props>) {
typeof title !== 'string' && title
}
<div className={styles.modalHeaderClose}>
<IconButton name="times" size="xl" onClick={onDismiss} tooltip="Close" />
<IconButton
name="times"
size="xl"
onClick={onDismiss}
tooltip={t('grafana-ui.modal.close-tooltip', 'Close')}
/>
</div>
</div>
<div className={cx(styles.modalContent, contentClassName)}>{children}</div>

170
public/app/core/components/help/HelpModal.tsx
View File

@ -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 (
<Modal title="Shortcuts" isOpen onDismiss={onDismiss} onClickBackdrop={onDismiss}>
<Modal title={t('help-modal.title', 'Shortcuts')} isOpen onDismiss={onDismiss} onClickBackdrop={onDismiss}>
<div className={styles.categories}>
{Object.entries(shortcuts).map(([category, shortcuts], i) => (
{Object.values(shortcuts).map(({ category, shortcuts }, i) => (
<div className={styles.shortcutCategory} key={i}>
<table className={styles.shortcutTable}>
<tbody>

43
public/locales/de-DE/grafana.json
View File

@ -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",

43
public/locales/en-US/grafana.json
View File

@ -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",

43
public/locales/es-ES/grafana.json
View File

@ -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",

43
public/locales/fr-FR/grafana.json
View File

@ -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",

43
public/locales/pseudo-LOCALE/grafana.json
View File

@ -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čęľ",

43
public/locales/zh-Hans/grafana.json
View File

@ -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": "取消",