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

Internationalization: Translate RefreshPicker component (#58530)

Browse Source
This commit is contained in:
Laura Fernández 2022-11-14 17:47:15 +01:00 committed by GitHub
parent 67bd0d5537
commit dd0d034796
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 137 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
View File

@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
import { SelectableValue, parseDuration } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { t } from '../../utils/i18n';
import { ButtonGroup } from '../Button';
import { ButtonSelect } from '../Dropdown/ButtonSelect';
import { ToolbarButtonVariant, ToolbarButton } from '../ToolbarButton';
@ -24,11 +25,6 @@ export interface Props {
width?: string;
primary?: boolean;
isOnCanvas?: boolean;
// These props are used to translate the component
offOptionLabelMsg?: string;
offOptionAriaLabelMsg?: string;
offDescriptionAriaLabelMsg?: string;
onDescriptionAriaLabelMsg?: (durationAriaLabel: string | undefined) => string;
}
export class RefreshPicker extends PureComponent<Props> {
@ -42,6 +38,7 @@ export class RefreshPicker extends PureComponent<Props> {
value: 'LIVE',
ariaLabel: 'Turn on live streaming',
};
static isLive = (refreshInterval?: string): boolean => refreshInterval === RefreshPicker.liveOption.value;
constructor(props: Props) {
@ -72,30 +69,13 @@ export class RefreshPicker extends PureComponent<Props> {
}
render() {
const {
onRefresh,
intervals,
tooltip,
value,
text,
isLoading,
noIntervalPicker,
width,
offOptionLabelMsg,
offOptionAriaLabelMsg,
offDescriptionAriaLabelMsg,
onDescriptionAriaLabelMsg,
} = this.props;
const { onRefresh, intervals, tooltip, value, text, isLoading, noIntervalPicker, width } = this.props;
const currentValue = value || '';
const variant = this.getVariant();
const translatedOffOption = {
value: RefreshPicker.offOption.value,
label: offOptionLabelMsg || RefreshPicker.offOption.label,
ariaLabel: offOptionAriaLabelMsg || RefreshPicker.offOption.ariaLabel,
};
const options = intervalsToOptions({ intervals, offOption: translatedOffOption });
const options = intervalsToOptions({ intervals });
const option = options.find(({ value }) => value === currentValue);
const translatedOffOption = translateOption(RefreshPicker.offOption.value);
let selectedValue = option || translatedOffOption;
if (selectedValue.label === translatedOffOption.label) {
@ -103,11 +83,16 @@ export class RefreshPicker extends PureComponent<Props> {
}
const durationAriaLabel = selectedValue.ariaLabel;
const ariaLabel =
selectedValue.value === ''
? offDescriptionAriaLabelMsg || 'Auto refresh turned off. Choose refresh time interval'
: onDescriptionAriaLabelMsg?.(durationAriaLabel) ||
`Choose refresh time interval with current interval ${durationAriaLabel} selected`;
const ariaLabelDurationSelectedMessage = t(
'refresh-picker.aria-label.duration-selected',
'Choose refresh time interval with current interval {{durationAriaLabel}} selected',
{ durationAriaLabel }
);
const ariaLabelChooseIntervalMessage = t(
'refresh-picker.aria-label.choose-interval',
'Auto refresh turned off. Choose refresh time interval'
);
const ariaLabel = selectedValue.value === '' ? ariaLabelChooseIntervalMessage : ariaLabelDurationSelectedMessage;
return (
<ButtonGroup className="refresh-picker">
@ -128,7 +113,7 @@ export class RefreshPicker extends PureComponent<Props> {
options={options}
onChange={this.onChangeSelect}
variant={variant}
title="Set auto refresh interval"
title={t('refresh-picker.select-button.auto-refresh', 'Set auto refresh interval')}
data-testid={selectors.components.RefreshPicker.intervalButtonV2}
aria-label={ariaLabel}
/>
@ -138,10 +123,24 @@ export class RefreshPicker extends PureComponent<Props> {
}
}
export function intervalsToOptions({
intervals = defaultIntervals,
offOption = RefreshPicker.offOption,
}: { intervals?: string[]; offOption?: SelectableValue<string> } = {}): Array<SelectableValue<string>> {
export function translateOption(option: string) {
if (option === RefreshPicker.liveOption.value) {
return {
label: t('refresh-picker.live-option.label', 'Live'),
value: 'LIVE',
ariaLabel: t('refresh-picker.live-option.aria-label', 'Turn on live streaming'),
};
}
return {
label: t('refresh-picker.off-option.label', 'Off'),
value: '',
ariaLabel: t('refresh-picker.off-option.aria-label', 'Turn off auto refresh'),
};
}
export function intervalsToOptions({ intervals = defaultIntervals }: { intervals?: string[] } = {}): Array<
SelectableValue<string>
> {
const options: Array<SelectableValue<string>> = intervals.map((interval) => {
const duration = parseDuration(interval);
const ariaLabel = formatDuration(duration);
@ -153,6 +152,6 @@ export function intervalsToOptions({
};
});
options.unshift(offOption);
options.unshift(translateOption(RefreshPicker.offOption.value));
return options;
}

12
public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
View File

@ -109,18 +109,6 @@ export class DashNavTimeControls extends Component<Props> {
isOnCanvas={isOnCanvas}
tooltip={t('dashboard.toolbar.refresh', 'Refresh dashboard')}
noIntervalPicker={hideIntervalPicker}
offDescriptionAriaLabelMsg={t(
'dashboard.refresh-picker.off-description',
'Auto refresh turned off. Choose refresh time interval'
)}
onDescriptionAriaLabelMsg={(durationAriaLabel) =>
t(
'dashboard.refresh-picker.on-description',
`Choose refresh time interval with current interval ${durationAriaLabel} selected`
)
}
offOptionLabelMsg={t('dashboard.refresh-picker.off-label', 'Off')}
offOptionAriaLabelMsg={t('dashboard.refresh-picker.off-arialabel', 'Turn off auto refresh')}
/>
</>
);

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

@ -59,12 +59,6 @@
"rows": "Gesamtanzahl an Zeilen",
"table-title": "Statistiken"
},
"refresh-picker": {
"off-arialabel": "Automatische Aktualisierung deaktivieren",
"off-description": "Automatische Aktualisierung deaktiviert. Zeitintervall für Aktualisierungen auswählen",
"off-label": "Aus",
"on-description": ""
},
"toolbar": {
"add-panel": "Panel hinzufügen",
"comments-show": "Dashboard-Kommentare anzeigen",
@ -315,6 +309,23 @@
"view": "Anzeigen"
}
},
"refresh-picker": {
"aria-label": {
"choose-interval": "",
"duration-selected": ""
},
"live-option": {
"aria-label": "",
"label": ""
},
"off-option": {
"aria-label": "",
"label": ""
},
"select-button": {
"auto-refresh": ""
}
},
"share-modal": {
"dashboard": {
"title": "Teilen"

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

@ -59,12 +59,6 @@
"rows": "Total number rows",
"table-title": "Stats"
},
"refresh-picker": {
"off-arialabel": "Turn off auto refresh",
"off-description": "Auto refresh turned off. Choose refresh time interval",
"off-label": "Off",
"on-description": ""
},
"toolbar": {
"add-panel": "Add panel",
"comments-show": "Show dashboard comments",
@ -315,6 +309,23 @@
"view": "View"
}
},
"refresh-picker": {
"aria-label": {
"choose-interval": "Auto refresh turned off. Choose refresh time interval",
"duration-selected": "Choose refresh time interval with current interval {{durationAriaLabel}} selected"
},
"live-option": {
"aria-label": "Turn on live streaming",
"label": "Live"
},
"off-option": {
"aria-label": "Turn off auto refresh",
"label": "Off"
},
"select-button": {
"auto-refresh": "Set auto refresh interval"
}
},
"share-modal": {
"dashboard": {
"title": "Share"

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

@ -59,12 +59,6 @@
"rows": "Número total de filas",
"table-title": "Estadísticas"
},
"refresh-picker": {
"off-arialabel": "Desactivar actualización automática",
"off-description": "Actualización automática desactivada. Elija un intervalo de tiempo de actualización",
"off-label": "Apagado",
"on-description": ""
},
"toolbar": {
"add-panel": "Añadir panel",
"comments-show": "Mostrar comentarios del panel de control",
@ -315,6 +309,23 @@
"view": "Vista"
}
},
"refresh-picker": {
"aria-label": {
"choose-interval": "",
"duration-selected": ""
},
"live-option": {
"aria-label": "",
"label": ""
},
"off-option": {
"aria-label": "",
"label": ""
},
"select-button": {
"auto-refresh": ""
}
},
"share-modal": {
"dashboard": {
"title": "Compartir"

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

@ -59,12 +59,6 @@
"rows": "Nombre total de lignes",
"table-title": "Statistiques"
},
"refresh-picker": {
"off-arialabel": "Désactiver l'actualisation automatique",
"off-description": "Actualisation automatique désactivée. Choisir un intervalle de temps d'actualisation",
"off-label": "Désactivé",
"on-description": ""
},
"toolbar": {
"add-panel": "Ajouter un panneau",
"comments-show": "Afficher les commentaires du tableau de bord",
@ -315,6 +309,23 @@
"view": "Afficher"
}
},
"refresh-picker": {
"aria-label": {
"choose-interval": "",
"duration-selected": ""
},
"live-option": {
"aria-label": "",
"label": ""
},
"off-option": {
"aria-label": "",
"label": ""
},
"select-button": {
"auto-refresh": ""
}
},
"share-modal": {
"dashboard": {
"title": "Partager"

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

@ -59,12 +59,6 @@
"rows": "Ŧőŧäľ ʼnūmþęř řőŵş",
"table-title": "Ŝŧäŧş"
},
"refresh-picker": {
"off-arialabel": "Ŧūřʼn őƒƒ äūŧő řęƒřęşĥ",
"off-description": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",
"off-label": "؃ƒ",
"on-description": ""
},
"toolbar": {
"add-panel": "Åđđ päʼnęľ",
"comments-show": "Ŝĥőŵ đäşĥþőäřđ čőmmęʼnŧş",
@ -315,6 +309,23 @@
"view": "Vįęŵ"
}
},
"refresh-picker": {
"aria-label": {
"choose-interval": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",
"duration-selected": "Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ ŵįŧĥ čūřřęʼnŧ įʼnŧęřväľ {{đūřäŧįőʼnÅřįäĿäþęľ}} şęľęčŧęđ"
},
"live-option": {
"aria-label": "Ŧūřʼn őʼn ľįvę şŧřęämįʼnģ",
"label": "Ŀįvę"
},
"off-option": {
"aria-label": "Ŧūřʼn őƒƒ äūŧő řęƒřęşĥ",
"label": "؃ƒ"
},
"select-button": {
"auto-refresh": "Ŝęŧ äūŧő řęƒřęşĥ įʼnŧęřväľ"
}
},
"share-modal": {
"dashboard": {
"title": "Ŝĥäřę"

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

@ -59,12 +59,6 @@
"rows": "总行数",
"table-title": "统计信息"
},
"refresh-picker": {
"off-arialabel": "关闭自动刷新",
"off-description": "自动刷新已关闭。选择刷新时间间隔",
"off-label": "关",
"on-description": ""
},
"toolbar": {
"add-panel": "添加面板",
"comments-show": "显示仪表板备注",
@ -315,6 +309,23 @@
"view": "查看"
}
},
"refresh-picker": {
"aria-label": {
"choose-interval": "",
"duration-selected": ""
},
"live-option": {
"aria-label": "",
"label": ""
},
"off-option": {
"aria-label": "",
"label": ""
},
"select-button": {
"auto-refresh": ""
}
},
"share-modal": {
"dashboard": {
"title": "分享"