From 3782da7bbc8b8cf94b65a49792594195a962c2ea Mon Sep 17 00:00:00 2001
From: Julien <roidelapluie@o11y.eu>
Date: Tue, 10 Sep 2024 15:52:40 +0200
Subject: [PATCH] Explain: Use param scalars in aggregations description

Signed-off-by: Julien <roidelapluie@o11y.eu>
---
 .../pages/query/ExplainViews/Aggregation.tsx  | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 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 3db2d4c0f..1a2c1554f 100644
--- a/web/ui/mantine-ui/src/pages/query/ExplainViews/Aggregation.tsx
+++ b/web/ui/mantine-ui/src/pages/query/ExplainViews/Aggregation.tsx
@@ -45,9 +45,23 @@ const describeAggregationType = (
         </>
       );
     case "bottomk":
-      return "returns the bottom K series by value";
+      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">{param.val}</span> series by value
+        </>
+      );
     case "topk":
-      return "returns the top K series by value";
+      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">{param.val}</span> series by value
+        </>
+      );
     case "quantile":
       if (param === null) {
         throw new Error(
@@ -62,9 +76,21 @@ const describeAggregationType = (
       return "calculates a quantile over the sample values of the input series";
 
     case "limitk":
-      return "limits the output to K series";
+      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">{param.val}</span> series
+        </>
+      );
     case "limit_ratio":
-      return "limits the output to a ratio of the input series";
+      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`;
     default:
       throw new Error(`invalid aggregation type ${aggrType}`);
   }