From 5a57ff130712b7fa97d0b7369102ee9e0273cf40 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Tue, 19 Mar 2024 18:38:04 +0100
Subject: [PATCH] Alerting: Preserve newlines and whitespace for Prometheus and
 Loki queries (#84755)

---
 .../components/rule-viewer/tabs/Query/LokiQueryPreview.tsx  | 6 +++++-
 .../rule-viewer/tabs/Query/PrometheusQueryPreview.tsx       | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/LokiQueryPreview.tsx b/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/LokiQueryPreview.tsx
index 7bffee7b3d1..123f15c5582 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/LokiQueryPreview.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/LokiQueryPreview.tsx
@@ -8,7 +8,11 @@ interface Props {
 }
 
 const LokiQueryPreview = ({ query }: Props) => {
-  return <RawQuery query={query} language={{ grammar: lokiGrammar, name: 'promql' }} />;
+  return (
+    <pre>
+      <RawQuery query={query} language={{ grammar: lokiGrammar, name: 'promql' }} />
+    </pre>
+  );
 };
 
 export default LokiQueryPreview;
diff --git a/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/PrometheusQueryPreview.tsx b/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/PrometheusQueryPreview.tsx
index 2d9323ef564..6db93b7e358 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/PrometheusQueryPreview.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/PrometheusQueryPreview.tsx
@@ -8,7 +8,11 @@ interface Props {
 }
 
 const PrometheusQueryPreview = ({ query }: Props) => {
-  return <RawQuery query={query} language={{ grammar: promqlGrammar, name: 'promql' }} />;
+  return (
+    <pre>
+      <RawQuery query={query} language={{ grammar: promqlGrammar, name: 'promql' }} />
+    </pre>
+  );
 };
 
 export default PrometheusQueryPreview;