Alerting: Render duration in `<code>` block for better presentation for translated values (#104409)

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>
     );

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": {