From 029edcb6be07dae27d2ae5d2e188b29b687a2aa5 Mon Sep 17 00:00:00 2001
From: ismail simsek <ismailsimsek09@gmail.com>
Date: Thu, 16 Jan 2025 16:30:29 +0100
Subject: [PATCH] Prometheus: Render metrics and labels in explanation with
 right syntax (#98591)

* utf8 metrics for prometheus devenv

* introduce utf8 support

* completions and suggestions

* don't wrap the utf8 label in quotes

* linting

* support utf8 labels and metrics on visual query builder

* lint

* update raw view for utf8 metric syntax

* betterer

* support utf8 metric names in explore metrics

* utf8 support in grouop by

* utf8 support in label break down

* utf8 metric and label support in metric_find_query for label values

* use the same regex to check label values

* no need to escape

* support series endpoint

* support series endpoint

* support series endpoint

* support series endpoint

* fix tests

* fix extracting labels from labelValuesQuery

* show explanation with right syntax

* betterer
---
 .../src/querybuilder/components/PromQueryBuilder.tsx            | 2 +-
 .../src/querybuilder/components/PromQueryBuilderExplained.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
index a1d450b2452..fd99b883f6d 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
@@ -93,7 +93,7 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
       {showExplain && (
         <OperationExplainedBox
           stepNumber={1}
-          title={<RawQuery query={`${query.metric} ${promQueryModeller.renderLabels(query.labels)}`} lang={lang} />}
+          title={<RawQuery query={`${promQueryModeller.renderQuery(query)}`} lang={lang} />}
         >
           {EXPLAIN_LABEL_FILTER_CONTENT}
         </OperationExplainedBox>
diff --git a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderExplained.tsx b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderExplained.tsx
index 4fa9503c34e..c7efa30900d 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderExplained.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderExplained.tsx
@@ -25,7 +25,7 @@ export const PromQueryBuilderExplained = memo<PromQueryBuilderExplainedProps>(({
     <Stack gap={0.5} direction="column">
       <OperationExplainedBox
         stepNumber={1}
-        title={<RawQuery query={`${visQuery.metric} ${promQueryModeller.renderLabels(visQuery.labels)}`} lang={lang} />}
+        title={<RawQuery query={`${promQueryModeller.renderQuery(visQuery)}`} lang={lang} />}
       >
         {EXPLAIN_LABEL_FILTER_CONTENT}
       </OperationExplainedBox>