diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
index 8403577a7d6..fcbdb834914 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
@@ -27,6 +27,6 @@ describe('TimePicker', () => {
/>
);
- expect(container.queryByLabelText(/Time range picker/i)).toBeInTheDocument();
+ expect(container.queryByLabelText(/Time range selected/i)).toBeInTheDocument();
});
});
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
index ac9c8a4c332..131ac5db6a7 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
@@ -17,6 +17,7 @@ import {
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2 } from '../../themes/ThemeContext';
+import { t, Trans } from '../../utils/i18n';
import { ButtonGroup } from '../Button';
import { ToolbarButton } from '../ToolbarButton';
import { Tooltip } from '../Tooltip/Tooltip';
@@ -91,11 +92,13 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
const variant = isSynced ? 'active' : isOnCanvas ? 'canvas' : 'default';
+ const currentTimeRange = formattedRange(value, timeZone);
+
return (
{hasAbsolute && (
} placement="bottom" interactive>
-
+
);
@@ -159,7 +169,9 @@ TimeRangePicker.displayName = 'TimeRangePicker';
const ZoomOutTooltip = () => (
<>
- Time range zoom out
CTRL+Z
+
+ Time range zoom out
CTRL+Z
+
>
);
@@ -169,7 +181,9 @@ const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; time
return (
<>
{dateTimeFormat(timeRange.from, { timeZone })}
-
to
+
+ to
+
{dateTimeFormat(timeRange.to, { timeZone })}
{timeZoneFormatUserFriendly(timeZone)}
diff --git a/packages/grafana-ui/src/utils/i18n.tsx b/packages/grafana-ui/src/utils/i18n.tsx
index 588523e79d4..a721e5066ee 100644
--- a/packages/grafana-ui/src/utils/i18n.tsx
+++ b/packages/grafana-ui/src/utils/i18n.tsx
@@ -28,7 +28,7 @@ export const Trans: typeof I18NextTrans = (props) => {
return ;
};
-export const t = (id: string, defaultMessage: string) => {
+export const t = (id: string, defaultMessage: string, values?: Record) => {
initI18n();
- return i18next.t(id, defaultMessage);
+ return i18next.t(id, defaultMessage, values);
};
diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json
index 27cf2529b5c..81e5b3138ee 100644
--- a/public/locales/de-DE/grafana.json
+++ b/public/locales/de-DE/grafana.json
@@ -436,6 +436,14 @@
"range-error": "",
"to-input": ""
},
+ "range-picker": {
+ "backwards-time-aria-label": "",
+ "current-time-selected": "",
+ "forwards-time-aria-label": "",
+ "to": "",
+ "zoom-out-button": "",
+ "zoom-out-tooltip": ""
+ },
"time-range": {
"aria-role": "",
"default-title": "",
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index f651674b9b8..c75ec38b75f 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -436,6 +436,14 @@
"range-error": "\"From\" can't be after \"To\"",
"to-input": "To"
},
+ "range-picker": {
+ "backwards-time-aria-label": "Move time range backwards",
+ "current-time-selected": "Time range selected: {{currentTimeRange}}",
+ "forwards-time-aria-label": "Move time range forwards",
+ "to": "to",
+ "zoom-out-button": "Zoom out time range",
+ "zoom-out-tooltip": "Time range zoom out <1>1> CTRL+Z"
+ },
"time-range": {
"aria-role": "Time range selection",
"default-title": "Time ranges",
diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json
index d91371180db..87235fc3043 100644
--- a/public/locales/es-ES/grafana.json
+++ b/public/locales/es-ES/grafana.json
@@ -436,6 +436,14 @@
"range-error": "",
"to-input": ""
},
+ "range-picker": {
+ "backwards-time-aria-label": "",
+ "current-time-selected": "",
+ "forwards-time-aria-label": "",
+ "to": "",
+ "zoom-out-button": "",
+ "zoom-out-tooltip": ""
+ },
"time-range": {
"aria-role": "",
"default-title": "",
diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json
index 7b27e4bc8d9..dea096a2e69 100644
--- a/public/locales/fr-FR/grafana.json
+++ b/public/locales/fr-FR/grafana.json
@@ -436,6 +436,14 @@
"range-error": "",
"to-input": ""
},
+ "range-picker": {
+ "backwards-time-aria-label": "",
+ "current-time-selected": "",
+ "forwards-time-aria-label": "",
+ "to": "",
+ "zoom-out-button": "",
+ "zoom-out-tooltip": ""
+ },
"time-range": {
"aria-role": "",
"default-title": "",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index c35edcd0d73..b4a20777dec 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -436,6 +436,14 @@
"range-error": "\"Fřőm\" čäʼn'ŧ þę äƒŧęř \"Ŧő\"",
"to-input": "Ŧő"
},
+ "range-picker": {
+ "backwards-time-aria-label": "Mővę ŧįmę řäʼnģę þäčĸŵäřđş",
+ "current-time-selected": "Ŧįmę řäʼnģę şęľęčŧęđ: {{čūřřęʼnŧŦįmęŖäʼnģę}}",
+ "forwards-time-aria-label": "Mővę ŧįmę řäʼnģę ƒőřŵäřđş",
+ "to": "ŧő",
+ "zoom-out-button": "Żőőm őūŧ ŧįmę řäʼnģę",
+ "zoom-out-tooltip": "Ŧįmę řäʼnģę žőőm őūŧ <1>1> CŦŖĿ+Ż"
+ },
"time-range": {
"aria-role": "Ŧįmę řäʼnģę şęľęčŧįőʼn",
"default-title": "Ŧįmę řäʼnģęş",
diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json
index aef95b3bb87..0d11d8a32b2 100644
--- a/public/locales/zh-Hans/grafana.json
+++ b/public/locales/zh-Hans/grafana.json
@@ -436,6 +436,14 @@
"range-error": "",
"to-input": ""
},
+ "range-picker": {
+ "backwards-time-aria-label": "",
+ "current-time-selected": "",
+ "forwards-time-aria-label": "",
+ "to": "",
+ "zoom-out-button": "",
+ "zoom-out-tooltip": ""
+ },
"time-range": {
"aria-role": "",
"default-title": "",