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

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>

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>