Implement Grafana Query Builder

src/components/QueryEditor/QueryBuilder/Editors/ExactValueEditor.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { QueryBuilderOperationParamEditorProps, toOption } from '@grafana/plugin-ui';
+import { InlineField, Select } from '@grafana/ui';
+
+import { getFieldValueOptions } from './utils/editorHelper';
+
+export default function ExactValueEditor(props: QueryBuilderOperationParamEditorProps) {
+  const { onChange, index, value, operation } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState<SelectableValue<string>[]>([]);
+  const handleOpenMenu = async () => {
+    setIsLoading(true);
+    setOptions(await getFieldValueOptions(props, operation.params[0] as string));
+    setIsLoading(false);
+  };
+  return (
+    <InlineField>
+      <Select<string>
+        allowCustomValue={true}
+        allowCreateWhileLoading={true}
+        isLoading={isLoading}
+        onOpenMenu={handleOpenMenu}
+        options={options}
+        onChange={({ value = "" }) => onChange(index, value)}
+        value={toOption(String(value || ""))}
+        width="auto"
+      />
+    </InlineField>
+  );
+}

src/components/QueryEditor/QueryBuilder/Editors/FieldAsFieldEditor.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { QueryBuilderOperationParamEditorProps, toOption } from '@grafana/plugin-ui';
+import { InlineField, Stack, Select } from '@grafana/ui';
+
+import { isValue, quoteString, getValue } from '../utils/stringHandler';
+import { splitString } from '../utils/stringSplitter';
+
+import { getFieldNameOptions } from './utils/editorHelper';
+
+export default function FieldAsFieldEditor(props: QueryBuilderOperationParamEditorProps) {
+  const { value, onChange, index } = props;
+
+  const str = splitString(String(value || ""));
+  let parsedFromField = "";
+  let parsedToField = "";
+  if (str.length === 3) {
+    if (isValue(str[0])) {
+      parsedFromField = getValue(str[0]);
+    }
+    if (str[1].type === "space" && str[1].value === "as") {
+      if (isValue(str[2])) {
+        parsedToField = getValue(str[2]);
+      }
+    }
+  }
+
+  const [fromField, setFromField] = useState<string>(parsedFromField);
+  const [toField, setToField] = useState<string>(parsedToField);
+
+  const updateValue = (fromField: string, toField: string) => {
+    const parts = [fromField, toField].map(field => {
+      const trimmed = field.trim();
+      return trimmed === "" ? "\"\"" : quoteString(trimmed);
+    });
+    const value = parts.join(" as ");
+    onChange(index, value);
+  };
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState<SelectableValue<string>[]>([]);
+
+  const handleOpenMenu = async () => {
+    setIsLoading(true);
+    setOptions(await getFieldNameOptions(props));
+    setIsLoading(false);
+  };
+
+  return (
+    <Stack>
+      <InlineField>
+        <Select<string>
+          allowCustomValue={true}
+          allowCreateWhileLoading={true}
+          isLoading={isLoading}
+          onOpenMenu={handleOpenMenu}
+          options={options}
+          onChange={({ value = "" }) => {
+            setFromField(value);
+            updateValue(value, toField);
+          }}
+          value={toOption(fromField)}
+          width="auto"
+        />
+      </InlineField>
+      <div style={{ padding: '6px 0 8px 0px' }}>as</div>
+      <InlineField>
+        <Select<string>
+          allowCustomValue={true}
+          allowCreateWhileLoading={true}
+          isLoading={isLoading}
+          onOpenMenu={handleOpenMenu}
+          options={options}
+          onChange={({ value = "" }) => {
+            setToField(value);
+            updateValue(fromField, value);
+          }}
+          value={toOption(toField)}
+          width="auto"
+        />
+      </InlineField>
+    </Stack>
+  );
+}

src/components/QueryEditor/QueryBuilder/Editors/FieldEditor.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { QueryBuilderOperationParamEditorProps, toOption } from '@grafana/plugin-ui';
+import { InlineField, Select } from '@grafana/ui';
+
+import { getFieldNameOptions } from './utils/editorHelper';
+
+export default function FieldEditor(props: QueryBuilderOperationParamEditorProps) {
+  const { value, onChange, index } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState<SelectableValue<string>[]>([]);
+
+  const handleOpenMenu = async () => {
+    setIsLoading(true);
+    setOptions(await getFieldNameOptions(props));
+    setIsLoading(false);
+  }
+
+  return (
+    <InlineField>
+      <Select<string>
+        allowCustomValue={true}
+        allowCreateWhileLoading={true}
+        isLoading={isLoading}
+        onOpenMenu={handleOpenMenu}
+        options={options}
+        onChange={({ value = "" }) => onChange(index, value)}
+        value={toOption(String(value || ""))}
+        width="auto"
+      />
+    </InlineField>
+  );
+}

src/components/QueryEditor/QueryBuilder/Editors/FieldValueTypeEditor.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+
+import { SelectableValue } from "@grafana/data";
+import { QueryBuilderOperationParamEditorProps, toOption } from "@grafana/plugin-ui";
+import { Select } from "@grafana/ui";
+
+import { getValueTypeOptions } from "./utils/editorHelper";
+
+export default function FieldValueTypeEditor(props: QueryBuilderOperationParamEditorProps) {
+  const { value, onChange, index } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState<SelectableValue<string>[]>([]);
+
+  const handleOpenMenu = async () => {
+    setIsLoading(true);
+    setOptions(await getValueTypeOptions(props));
+    setIsLoading(false);
+  }
+
+  return (
+    <Select<string>
+      allowCustomValue={true}
+      allowCreateWhileLoading={true}
+      isLoading={isLoading}
+      onOpenMenu={handleOpenMenu}
+      options={options}
+      onChange={({ value = "" }) => onChange(index, value)}
+      value={toOption(String(value || ""))}
+      width="auto"
+    />
+  )
+}

src/components/QueryEditor/QueryBuilder/Editors/FieldsEditor.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { QueryBuilderOperationParamEditorProps } from '@grafana/plugin-ui';
+import { ActionMeta, MultiSelect } from '@grafana/ui';
+
+import { getValuesFromBrackets } from '../utils/operationParser';
+import { quoteString } from '../utils/stringHandler';
+import { splitString } from '../utils/stringSplitter';
+
+import { getFieldNameOptions } from './utils/editorHelper';
+
+export default function FieldsEditor(props: QueryBuilderOperationParamEditorProps) {
+  const { value, onChange, index } = props;
+
+  const setFields = (values: SelectableValue<string>[], action: ActionMeta) => {
+    let rawValues = values.map(({ value = "" }) => value.trim()).filter(Boolean);
+    if (action) {
+      if (action.action === "remove-value") {
+        const oldValues = getValuesFromBrackets(splitString(String(value || "")));
+        rawValues = oldValues.filter((v) => v !== (action.removedValue as SelectableValue<string>).value);
+      }
+    }
+    const newValue = rawValues.map((v) => quoteString(v)).join(", ");
+    onChange(index, newValue);
+  }
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState<SelectableValue<string>[]>([]);
+
+  const handleOpenMenu = async () => {
+    setIsLoading(true);
+    setOptions(await getFieldNameOptions(props));
+    setIsLoading(false);
+  }
+
+  return (
+    <MultiSelect<string>
+      onChange={setFields}
+      options={options}
+      value={getValuesFromBrackets(splitString(String(value || "")))}
+      isLoading={isLoading}
+      allowCustomValue
+      allowCreateWhileLoading
+      noOptionsMessage="No labels found"
+      loadingMessage="Loading labels"
+      width={20}
+      onOpenMenu={handleOpenMenu}
+    />
+  );
+}

src/components/QueryEditor/QueryBuilder/Editors/FieldsEditorWithPrefix.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { QueryBuilderOperationParamEditorProps } from '@grafana/plugin-ui';
+import { ActionMeta, FormatOptionLabelMeta, MultiSelect } from '@grafana/ui';
+
+import { quoteString, unquoteString } from '../utils/stringHandler';
+import { splitByUnescapedChar, SplitString, splitString } from '../utils/stringSplitter';
+
+import { getFieldNameOptions } from './utils/editorHelper';
+
+interface FieldWithPrefix {
+  name: string;
+  isPrefix: boolean;
+}
+
+export default function FieldsEditorWithPrefix(props: QueryBuilderOperationParamEditorProps) {
+  const { value, onChange, index } = props;
+
+  const str = splitString(String(value || ""));
+  const parsedValues = parseInputValues(str);
+  const [values, setValues] = useState<FieldWithPrefix[]>(parsedValues);
+
+  const setFields = (newValues: FieldWithPrefix[], action?: ActionMeta) => {
+    if (action) {
+      if (action.action === "remove-value") {
+        newValues = values.filter((v) => v.name !== (action.removedValue as any).name);
+      }
+    }
+    setValues(newValues);
+    const newValue = newValues.map((field) => {
+      if (field.isPrefix !== undefined) {
+        return field.isPrefix ? `${quoteString(field.name)}*` : `${quoteString(field.name)}`;
+      }
+      return quoteString(field as unknown as string);
+    }).join(', ');
+    onChange(index, newValue);
+  }
+
+  const togglePrefix = (index: number) => {
+    const field = values[index];
+    field.isPrefix = !field.isPrefix;
+    setFields(values);
+  };
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState<SelectableValue<FieldWithPrefix>[]>([]);
+
+  const formatOptionLabel = (option: SelectableValue<FieldWithPrefix>, { context }: FormatOptionLabelMeta<FieldWithPrefix>) => {
+    if (context === 'value') {
+      const field = option as FieldWithPrefix;
+      const handleToggle = (e: React.SyntheticEvent) => {
+        e.stopPropagation();
+        const idx = values.findIndex((v) => (v).name === field.name);
+        if (idx !== -1) {
+          togglePrefix(idx);
+        }
+      };
+      return (
+        <span
+          tabIndex={0}
+          style={{ cursor: 'pointer' }}
+          onMouseDown={handleToggle}
+        >
+          {formatFieldLabel(field)}
+        </span>
+      );
+    }
+    return <>{option.label}</>;
+  }
+
+  const handleOpenMenu = async () => {
+    setIsLoading(true);
+    let options = await getFieldNameOptions(props);
+    const selectedNames = values.map(v => v.name);
+    options = options.filter((opt: SelectableValue<string>) => opt.value && !selectedNames.includes(opt.value));
+    setOptions(options);
+    setIsLoading(false);
+  }
+
+  const handleChange = (values: SelectableValue<FieldWithPrefix>[], action: ActionMeta) => {
+    setFields(values.map((v) => v.value || v as FieldWithPrefix), action)
+  }
+
+  return (
+    <MultiSelect<FieldWithPrefix>
+      openMenuOnFocus
+      onOpenMenu={handleOpenMenu}
+      isLoading={isLoading}
+      allowCustomValue
+      allowCreateWhileLoading
+      noOptionsMessage="No labels found"
+      loadingMessage="Loading labels"
+      options={options}
+      value={values}
+      onChange={handleChange}
+      formatOptionLabel={formatOptionLabel}
+    />
+  );
+}
+
+const formatFieldLabel = (field: FieldWithPrefix): string => {
+  return field.isPrefix ? `${field.name} *` : field.name;
+};
+
+const parseValue = (value: SplitString[]): FieldWithPrefix => {
+  if (value.length === 0 || value[0].type === "bracket") {
+    return { name: '', isPrefix: false };
+  }
+
+  if (value[0].type === "quote") {
+    const { type, value: secondValue } = value[1] || {};
+    const isPrefix = type === "space" && secondValue === "*";
+    return { name: unquoteString(value[0].value), isPrefix };
+  }
+
+  const fieldValue = value[0].value;
+  const isPrefix = fieldValue.endsWith("*");
+  return {
+    name: isPrefix ? fieldValue.slice(0, -1) : fieldValue,
+    isPrefix,
+  };
+}
+
+const parseInputValues = (str: SplitString[]): FieldWithPrefix[] => {
+  let fields: FieldWithPrefix[] = [];
+  for (const field of splitByUnescapedChar(str, ',')) {
+    if (field.length > 0 && field[0].type !== "bracket") {
+      fields.push(parseValue(field));
+    }
+  }
+  return fields;
+};