diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx index a30cf16c6c3..e2555222657 100644 --- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx +++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx @@ -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 { @@ -42,6 +38,7 @@ export class RefreshPicker extends PureComponent { 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 { } 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 { } 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 ( @@ -128,7 +113,7 @@ export class RefreshPicker extends PureComponent { 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 { } } -export function intervalsToOptions({ - intervals = defaultIntervals, - offOption = RefreshPicker.offOption, -}: { intervals?: string[]; offOption?: SelectableValue } = {}): Array> { +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 +> { const options: Array> = 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; } diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx index 29edceb7224..66743294ca7 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx @@ -109,18 +109,6 @@ export class DashNavTimeControls extends Component { 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')} /> ); diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json index 81e5b3138ee..cada8dd06d3 100644 --- a/public/locales/de-DE/grafana.json +++ b/public/locales/de-DE/grafana.json @@ -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" diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index c75ec38b75f..afd9de68fa6 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -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" diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json index 87235fc3043..d757a814bc4 100644 --- a/public/locales/es-ES/grafana.json +++ b/public/locales/es-ES/grafana.json @@ -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" diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json index dea096a2e69..797aaeb31c2 100644 --- a/public/locales/fr-FR/grafana.json +++ b/public/locales/fr-FR/grafana.json @@ -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" diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index b4a20777dec..de4478874a4 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -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": "Ŝĥäřę" diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json index 0d11d8a32b2..cc4d4fd3512 100644 --- a/public/locales/zh-Hans/grafana.json +++ b/public/locales/zh-Hans/grafana.json @@ -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": "分享"