Explore Metrics: Open queries that have utf8 labels in explore properly (#99117)

* open queries that have utf8 labels in explore properly

* remove unnecessary line

* Revert "open queries that have utf8 labels in explore properly"

This reverts commit 85b81c96

* remove quoting

* support open in explore

packages/grafana-prometheus/src/datasource.ts

@@ -706,7 +706,11 @@ export class PrometheusDatasource
     let expandedQueries = queries;
     if (queries && queries.length) {
       expandedQueries = queries.map((query) => {
-        const interpolatedQuery = this.templateSrv.replace(query.expr, scopedVars, this.interpolateQueryExpr);
+        const interpolatedQuery = this.templateSrv.replace(
+          query.expr,
+          scopedVars,
+          this.interpolateExploreMetrics(query.fromExploreMetrics)
+        );
         const replacedInterpolatedQuery = config.featureToggles.promQLScope
           ? interpolatedQuery
           : this.templateSrv.replace(
@@ -929,17 +933,7 @@ export class PrometheusDatasource
     const expr = this.templateSrv.replace(
       target.expr,
       variables,
-      (value: string | string[] = [], variable: QueryVariableModel | CustomVariableModel) => {
-        if (typeof value === 'string' && target.fromExploreMetrics) {
-          if (variable.name === 'filters') {
-            return wrapUtf8Filters(value);
-          }
-          if (variable.name === 'groupby') {
-            return utf8Support(value);
-          }
-        }
-        return this.interpolateQueryExpr(value, variable);
-      }
+      this.interpolateExploreMetrics(target.fromExploreMetrics)
     );
 
     // Apply ad-hoc filters
@@ -965,6 +959,20 @@ export class PrometheusDatasource
     return this.templateSrv.replace(string, scopedVars, this.interpolateQueryExpr);
   }
 
+  interpolateExploreMetrics(fromExploreMetrics?: boolean) {
+    return (value: string | string[] = [], variable: QueryVariableModel | CustomVariableModel) => {
+      if (typeof value === 'string' && fromExploreMetrics) {
+        if (variable.name === 'filters') {
+          return wrapUtf8Filters(value);
+        }
+        if (variable.name === 'groupby') {
+          return utf8Support(value);
+        }
+      }
+      return this.interpolateQueryExpr(value, variable);
+    };
+  }
+
   getDebounceTimeInMilliseconds(): number {
     switch (this.cacheLevel) {
       case PrometheusCacheLevel.Medium:

public/app/features/trails/helpers/MetricDatasourceHelper.ts

@@ -74,6 +74,7 @@ export class MetricDatasourceHelper {
   public listNativeHistograms() {
     return this._nativeHistograms;
   }
+
   /**
    * Identify native histograms by querying classic histograms and all metrics,
    * then comparing the results and build the collection of native histograms.