From 345e81b9b7eeb2b56eab1be0d8a6a0fe899b11c4 Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Wed, 23 Apr 2025 17:27:54 +0100
Subject: [PATCH] Alerting: Render duration in `<code>` block for better
 presentation for translated values (#104409)

---
 public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx | 2 +-
 public/locales/en-US/grafana.json                               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx b/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx
index a594d312c16..781726d1413 100644
--- a/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx
+++ b/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx
@@ -127,7 +127,7 @@ export function QueryPreview({
           i18nKey="alerting.query-preview.relative-time-range"
           values={{ from: rangeUtil.secondsToHms(relativeTimeRange.from) }}
         >
-          {'{{from}}'} to now
+          <code>{'{{from}}'}</code> to now
         </Trans>
       </Text>
     );
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 163e7a4ff60..a975f9585ed 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1728,7 +1728,7 @@
       "min-interval": "Min. Interval = {{minInterval}}"
     },
     "query-preview": {
-      "relative-time-range": "{{from}} to now"
+      "relative-time-range": "<0>{{from}}</0> to now"
     },
     "queryAndExpressionsStep": {
       "disableAdvancedOptions": {