feat: Use allow-utf8-labelnames client capability in UI (#4493)

Author: jake-kramer

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "type-check": "tsc -p tsconfig.json --noEmit",
     "build": "NODE_ENV=production webpack --progress --config scripts/webpack/webpack.prod.js",
+    "dev": "webpack serve --config scripts/webpack/webpack.dev.js",
     "backend:dev": "make build run 'PARAMS=--config.file ./cmd/pyroscope/pyroscope.yaml'",
     "lint": "eslint . --ext .js,.tsx,.ts --cache",
     "lint:fix": "yarn lint --fix",
@@ -79,6 +80,7 @@
     "web-streams-polyfill": "^3.2.1",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {

public/README.md

@@ -4,7 +4,8 @@
 
 ```bash
 yarn install
-# Make sure you have the backend running.
+# Make sure you have the backend running after building with EMBEDASSETS="".
+# Note the frontend is accessible via localhost:4041.
 yarn dev
 ```
 

public/app/components/TagsBar.tsx

@@ -230,7 +230,13 @@ function LabelsSubmenu({
 
 // Identifies whether a label is in a query or not
 function isLabelInQuery(query: string, label: string, labelValue: string) {
-  return query.includes(`${label}="${labelValue}"`);
+  // Label names can be either quoted or unquoted:
+  // - Unquoted: service_name="value"
+  // - Quoted: "service.name"="value"
+  const unquotedPattern = `${label}="${labelValue}"`;
+  const quotedPattern = `"${label}"="${labelValue}"`;
+
+  return query.includes(unquotedPattern) || query.includes(quotedPattern);
 }
 
 export default TagsBar;

public/app/services/base.ts

@@ -32,6 +32,8 @@ export async function request(
     headers = {
       ...config?.headers,
       ...(tenantID && { 'X-Scope-OrgID': tenantID }),
+      // Specify client capabilities in `Accept` header
+      Accept: 'application/json;allow-utf8-labelnames=true',
     };
   }
 
@@ -53,6 +55,8 @@ export async function downloadWithOrgID(
     headers = {
       ...config?.headers,
       ...(tenantID && { 'X-Scope-OrgID': tenantID }),
+      // Specify client capabilities in `Accept` header
+      Accept: 'application/json;allow-utf8-labelnames=true',
     };
   }
 

public/app/util/query.ts

@@ -3,6 +3,14 @@ export function appendLabelToQuery(
   label: string,
   labelValue: string
 ) {
+  // Check if label is a "legacy" label name (i.e. only
+  // contains characters in [a-zA-Z0-9_]). If not legacy,
+  // need to wrap the label name in quotes
+  const legacyLabelRegex = /^[a-zA-Z0-9_]+$/;
+  if (!legacyLabelRegex.test(label)) {
+    label = `"${label}"`;
+  }
+
   const case1Regexp = new RegExp(`${label}=.+?(\\}|,)`);
   if (query.match(case1Regexp)) {
     return query.replace(case1Regexp, `${label}="${labelValue}"$1`);

scripts/webpack/webpack.dev.js

@@ -10,15 +10,24 @@ module.exports = merge(common, {
   devServer: {
     port: 4041,
     historyApiFallback: true,
-    proxy: {
-      '/pyroscope': 'http://localhost:4040',
-      '/querier.v1.QuerierService': 'http://localhost:4040',
-      '/assets/grafana/*': {
+    proxy: [
+      {
+        context: ['/pyroscope'],
+        target: 'http://localhost:4040',
+        changeOrigin: true,
+      },
+      {
+        context: ['/querier.v1.QuerierService'],
+        target: 'http://localhost:4040',
+        changeOrigin: true,
+      },
+      {
+        context: ['/assets/grafana'],
         target: 'http://localhost:4041',
         pathRewrite: { '^/assets': '' },
         logLevel: 'debug',
       },
-    },
+    ],
   },
   optimization: {
     runtimeChunk: 'single',