From ee808cda8b9b5d0ea6c3702f09cc136effa66807 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Tue, 10 Sep 2024 17:09:34 +0200
Subject: [PATCH] Fix HTML rendering for aggregator Explain view

Follow-up to https://github.com/prometheus/prometheus/pull/14893

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../pages/query/ExplainViews/Aggregation.tsx  | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/web/ui/mantine-ui/src/pages/query/ExplainViews/Aggregation.tsx b/web/ui/mantine-ui/src/pages/query/ExplainViews/Aggregation.tsx
index 1a2c1554f..3facd692c 100644
--- a/web/ui/mantine-ui/src/pages/query/ExplainViews/Aggregation.tsx
+++ b/web/ui/mantine-ui/src/pages/query/ExplainViews/Aggregation.tsx
@@ -46,20 +46,34 @@ const describeAggregationType = (
       );
     case "bottomk":
       if (param === null || param.type !== "numberLiteral") {
-        return <>returns the bottom <span className="promql-code promql-number">K</span> series by value</>;
+        return (
+          <>
+            returns the bottom{" "}
+            <span className="promql-code promql-number">K</span> series by value
+          </>
+        );
       }
       return (
         <>
-          returns the bottom <span className="promql-code promql-number">{param.val}</span> series by value
+          returns the bottom{" "}
+          <span className="promql-code promql-number">{param.val}</span> series
+          by value
         </>
       );
     case "topk":
       if (param === null || param.type !== "numberLiteral") {
-        return <>returns the top <span className="promql-code promql-number">K</span> series by value</>;
+        return (
+          <>
+            returns the top <span className="promql-code promql-number">K</span>{" "}
+            series by value
+          </>
+        );
       }
       return (
         <>
-          returns the top <span className="promql-code promql-number">{param.val}</span> series by value
+          returns the top{" "}
+          <span className="promql-code promql-number">{param.val}</span> series
+          by value
         </>
       );
     case "quantile":
@@ -77,20 +91,30 @@ const describeAggregationType = (
 
     case "limitk":
       if (param === null || param.type !== "numberLiteral") {
-        return <>limits the output to <span className="promql-code promql-number">K</span> series</>;
+        return (
+          <>
+            limits the output to{" "}
+            <span className="promql-code promql-number">K</span> series
+          </>
+        );
       }
       return (
         <>
-          limits the output to <span className="promql-code promql-number">{param.val}</span> series
+          limits the output to{" "}
+          <span className="promql-code promql-number">{param.val}</span> series
         </>
       );
     case "limit_ratio":
       if (param === null || param.type !== "numberLiteral") {
         return "limits the output to a ratio of the input series";
       }
-      return `limits the output to a ratio of <span className="promql-code promql-number">${param.val}</span> (${
-        parsePrometheusFloat(param.val) * 100
-      }%) of the input series`;
+      return (
+        <>
+          limits the output to a ratio of{" "}
+          <span className="promql-code promql-number">{param.val}</span> (
+          {parsePrometheusFloat(param.val) * 100}%) of the input series
+        </>
+      );
     default:
       throw new Error(`invalid aggregation type ${aggrType}`);
   }