add support metrics with special symbols #131

Author: Loori-R

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## tip
 
+* FEATURE: add support metrics with special characters in query builder. See [this issue](https://github.com/VictoriaMetrics/grafana-datasource/issues/131)
+
 * BUGFIX: fix the default link to vmui. See [this issue](https://github.com/VictoriaMetrics/grafana-datasource/issues/132)
 * BUGFIX: fix the parsing logic in `renderLegendFormat` to correctly replace legend label names. See [this issue](https://github.com/VictoriaMetrics/grafana-datasource/issues/133)
 * BUGFIX: fix query editor which produce a lot of requests for alerting rule evaluation. See [this issue](https://github.com/VictoriaMetrics/grafana-datasource/issues/134)

package.json

@@ -15,7 +15,7 @@
     "server": "docker-compose up --build",
     "tar": "tar -czf $npm_package_name-v$npm_package_version.tar.gz $npm_package_name && sha1sum ./$npm_package_name-v$npm_package_version.tar.gz >$npm_package_name-v$npm_package_version.tar.gz.sha1",
     "zip": "zip $npm_package_name-v$npm_package_version.zip $npm_package_name -r && sha1sum ./$npm_package_name-v$npm_package_version.zip >$npm_package_name-v$npm_package_version.zip.sha1",
-    "preinstall": "cd packages/lezer-metricsql && yarn install"
+    "preinstall": "cd packages/lezer-metricsql && yarn install && cd ../.. && yarn upgrade lezer-metricsql"
   },
   "author": "VictoriaMetrics",
   "license": "AGPL-3.0-only",

packages/lezer-metricsql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lezer-metricsql",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "index.cjs",
   "type": "module",
   "exports": {

packages/lezer-metricsql/src/metricsql.grammar

@@ -395,7 +395,9 @@ NumberLiteral  {
     ( ( std.digit+ "y" )? ( std.digit+ "w" )? ( std.digit+ "d" )? ( std.digit+ "h" )? ( std.digit+ "m" )? ( std.digit+ "s" ) ( std.digit+ "ms" )? ) |
     ( ( std.digit+ "y" )? ( std.digit+ "w" )? ( std.digit+ "d" )? ( std.digit+ "h" )? ( std.digit+ "m" )? ( std.digit+ "s" )? ( std.digit+ "ms" ) )
   }
-  Identifier { (std.asciiLetter | "_" | ":" | ".") (std.asciiLetter | std.digit | "_" | ":" | ".")*}
+  EscapedChar {("\\" AnyEscapesChar) ("\\" AnyEscapesChar)*}
+  AnyEscapesChar { "-" | "+" | "*" | "/" | "%" | "^" | "=" }
+  Identifier {(std.asciiLetter | "_" | ":" | "." | EscapedChar) (std.asciiLetter | std.digit | "_" | ":" | "." | "-" | EscapedChar)*}
   LabelName { (std.asciiLetter | "_") (std.asciiLetter | std.digit | "_")* }
 
   // Operator

src/components/monaco-query-field/monaco-completion-provider/index.ts

@@ -20,6 +20,8 @@ import { IMarkdownString } from "monaco-editor";
 
 import type { Monaco, monacoTypes } from '@grafana/ui';
 
+import { escapeMetricNameSpecialCharacters } from "../../../language_utils";
+
 import { getCompletions, DataProvider, CompletionType } from './completions';
 import { getSituation } from './situation';
 import { NeverCaseError } from './util';
@@ -100,7 +102,7 @@ export function getCompletionProvider(
       const suggestions: monacoTypes.languages.CompletionItem[] = items.map((item, index) => ({
         kind: getMonacoCompletionItemKind(item.type, monaco),
         label: item.label,
-        insertText: item.insertText,
+        insertText: item.type === "METRIC_NAME" ? escapeMetricNameSpecialCharacters(item.insertText) : item.insertText,
         detail: item.detail,
         documentation: { value: item.documentation } as IMarkdownString,
         sortText: index.toString().padStart(maxIndexDigits, '0'), // to force the order we have

src/language_utils.ts

@@ -282,6 +282,11 @@ export function escapeLabelValueInRegexSelector(labelValue: string): string {
   return escapeLabelValueInExactSelector(escapePrometheusRegexp(labelValue));
 }
 
+export function escapeMetricNameSpecialCharacters(metricName: string) {
+  const specialChars = /[-+*\/%^=]/g;
+  return metricName.replace(specialChars, (match) => '\\' + match);
+}
+
 export enum AbstractLabelOperator {
   Equal = "Equal",
   NotEqual = "NotEqual",

src/querybuilder/components/MetricSelect.tsx

@@ -24,6 +24,7 @@ import { SelectableValue, toOption, GrafanaTheme2 } from '@grafana/data';
 import { Select, FormatOptionLabelMeta, useStyles2 } from '@grafana/ui';
 
 import { EditorField, EditorFieldGroup } from '../../components/QueryEditor';
+import { escapeMetricNameSpecialCharacters } from "../../language_utils";
 import { PromVisualQuery } from '../types';
 
 // We are matching words split with space
@@ -95,7 +96,7 @@ export function MetricSelect({ query, onChange, onGetMetrics }: Props) {
           options={state.metrics}
           onChange={({ value }) => {
             if (value) {
-              onChange({ ...query, metric: value });
+              onChange({ ...query, metric: escapeMetricNameSpecialCharacters(value) });
             }
           }}
         />

yarn.lock

@@ -6831,7 +6831,7 @@ levn@^0.4.1:
     type-check "~0.4.0"
 
 "lezer-metricsql@file:packages/lezer-metricsql":
-  version "0.1.0"
+  version "0.1.2"
 
 lines-and-columns@^1.1.6:
   version "1.2.4"