Implement Grafana Query Builder

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { QueryBuilderOperationParamEditorProps } from '@grafana/plugin-ui';
+import { Combobox } from '@grafana/ui';
+
+import { getFieldValueOptions } from './utils/editorHelper';
+
+export default function ExactValueEditor(props: QueryBuilderOperationParamEditorProps) {
+  const { onChange, index, value, operation } = props;
+
+  return (
+    <Combobox<string>
+      options={()=> getFieldValueOptions(props, operation.params[0] as string)}
+      value={value as string}
+      onChange={(v) => onChange(index, v.value)}
+      width="auto"
+      maxWidth={30}
+      minWidth={10}
+      createCustomValue
+    />
+  );
+}

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

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+
+import { QueryBuilderOperationParamEditorProps } from '@grafana/plugin-ui';
+import { InlineField, Stack, Combobox } 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(value as string);
+  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) => {
+    let value = "";
+    if (fromField.trim() === "") {
+      value += "\"\"";
+    } else {
+      value += quoteString(fromField.trim());
+    }
+    value += " as ";
+    if (toField.trim() === "") {
+      value += "\"\"";
+    } else {
+      value += quoteString(toField.trim());
+    }
+    onChange(index, value);
+  };
+
+  return (
+    <Stack>
+      <InlineField>
+        <Combobox<string>
+          createCustomValue
+          options={()=>getFieldNameOptions(props)}
+          onChange={(value) => {
+            setFromField(value.value);
+            updateValue(value.value, toField);
+          }}
+          value={fromField}
+          width="auto"
+          maxWidth={30}
+          minWidth={10}
+        />
+      </InlineField>
+      <div style={{ padding: '6px 0 8px 0px' }}>as</div>
+      <InlineField>
+        <Combobox<string>
+          createCustomValue
+          options={()=>getFieldNameOptions(props)}
+          onChange={(value) => {
+            setToField(value.value);
+            updateValue(fromField, value.value);
+          }}
+          value={toField}
+          width="auto"
+          maxWidth={30}
+          minWidth={10}
+        />
+      </InlineField>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { QueryBuilderOperationParamEditorProps } from '@grafana/plugin-ui';
+import { Combobox, InlineField } from '@grafana/ui';
+
+import { getFieldNameOptions } from './utils/editorHelper';
+
+export default function FieldEditor(props: QueryBuilderOperationParamEditorProps) {
+  const { value, onChange, index } = props;
+  return (
+    <InlineField>
+      <Combobox<string>
+        createCustomValue
+        options={()=>getFieldNameOptions(props)}
+        onChange={(value) => {
+          onChange(index, value.value)
+        }}
+        value={value as string}
+        width="auto"
+        maxWidth={30}
+        minWidth={10}
+      />
+    </InlineField>
+  );
+}

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

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { QueryBuilderOperationParamEditorProps } from "@grafana/plugin-ui";
+import { Combobox } from "@grafana/ui";
+
+import { getValueTypeOptions } from "./utils/editorHelper";
+
+export default function FieldValueTypeEditor(props: QueryBuilderOperationParamEditorProps) {
+  const { value, onChange, index } = props;
+
+  return (
+    <Combobox<string>
+      createCustomValue
+      options={()=>getValueTypeOptions(props)}
+      onChange={(value) => {
+        onChange(index, value.value);
+      }}
+      value={value as string}
+      width="auto"
+      maxWidth={30}
+      minWidth={10}
+    />
+  )
+}

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

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { QueryBuilderOperationParamEditorProps } from '@grafana/plugin-ui';
+import { 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>[]) => {
+    const rawValues = values.map((v) => v.value?.trim()).filter((v) => v !== undefined && v !== null);
+    let value = rawValues.map((v)=> quoteString(v)).join(", ");
+    onChange(index, value);
+  }
+
+  const [state, setState] = useState<{
+    options?: SelectableValue[];
+    isLoading?: boolean;
+  }>({});
+
+  const handleOpenMenu = async () => {
+    setState({ isLoading: true });
+    const options = await getFieldNameOptions(props);
+    setState({ options, isLoading: undefined });
+  }
+
+  return (
+    <MultiSelect<string>
+      onChange={setFields}
+      options={state.options}
+      value={getValuesFromBrackets(splitString(value as string))}
+      isLoading={state.isLoading}
+      allowCustomValue
+      noOptionsMessage="No labels found"
+      loadingMessage="Loading labels"
+      width={20}
+      onOpenMenu={handleOpenMenu}
+    />
+  );
+}

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

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { QueryBuilderOperationParamEditorProps } from '@grafana/plugin-ui';
+import { 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(value as string);
+  const parsedValues = parseInputValues(str);
+  const [values, setValues] = useState<FieldWithPrefix[]>(parsedValues);
+
+  const setFields = (values: FieldWithPrefix[]) => {
+    setValues(values);
+    const newValue = values.map((field) => {
+      if (field.isPrefix !== undefined) {
+        return field.isPrefix ? `${quoteString(field.name)}*` : `${quoteString(field.name)}`;
+      } else {
+        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 [state, setState] = useState<{
+    options?: SelectableValue<FieldWithPrefix>[];
+    isLoading?: boolean;
+  }>({});
+
+  return (
+    <MultiSelect<FieldWithPrefix>
+      openMenuOnFocus
+      onOpenMenu={async () => {
+        setState({ isLoading: 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));
+        setState({ options, isLoading: undefined });
+      }}
+      isLoading={state.isLoading}
+      allowCustomValue
+      noOptionsMessage="No labels found"
+      loadingMessage="Loading labels"
+      options={state.options}
+      value={values}
+      onChange={(values) => setFields(values.map((v) => v.value || v as FieldWithPrefix))}
+      formatOptionLabel={(option, { context }) => {
+        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 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") {
+    let isPrefix = false;
+    if (value.length > 1) {
+      isPrefix = (value[1].type === "space" && value[1].value === "*");
+    }
+    return { name: unquoteString(value[0].value), isPrefix };
+  } else {
+    let fieldValue = value[0].value;
+    if (fieldValue.endsWith('*')) {
+      return { name: fieldValue.slice(0, -1), isPrefix: true };
+    }
+    return { name: fieldValue, isPrefix: false };
+  }
+}
+
+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;
+};

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

@@ -0,0 +1,53 @@
+import { css } from "@emotion/css";
+import React, { useMemo, useState } from "react";
+
+import { GrafanaTheme2 } from "@grafana/data";
+import { OperationList, QueryBuilderOperationParamEditorProps } from "@grafana/plugin-ui";
+import { InlineField, useStyles2 } from "@grafana/ui";
+
+import { VisualQuery } from "../../../../types";
+import { parseExprToVisualQuery, createQueryModellerWithDefaultField } from "../QueryModeller";
+import { VictoriaLogsQueryOperationCategory } from "../VictoriaLogsQueryOperationCategory";
+
+export default function LogicalFilterEditor(props: QueryBuilderOperationParamEditorProps) {
+  const styles = useStyles2(getStyles);
+  const { value, onChange, index, datasource, timeRange, onRunQuery, operation } = props;
+  const fieldName = operation.params[0] as string;
+  const [state, setState] = useState<{ expr: string, visQuery: VisualQuery }>({
+    expr: value as string,
+    visQuery: parseExprToVisualQuery(value as string, fieldName).query
+  })
+
+  const onVisQueryChange = (visQuery: VisualQuery) => {
+    const expr = queryModeller.renderQuery(visQuery);
+    setState({ expr, visQuery })
+    onChange(index, expr);
+  };
+  const queryModeller = useMemo(() => createQueryModellerWithDefaultField(fieldName, [VictoriaLogsQueryOperationCategory.Filters, VictoriaLogsQueryOperationCategory.Operators]), [fieldName]);
+  return (
+    <InlineField>
+      <>
+        <OperationList
+          query={state.visQuery}
+          datasource={datasource}
+          onChange={onVisQueryChange}
+          timeRange={timeRange}
+          onRunQuery={onRunQuery}
+          queryModeller={queryModeller}
+        />
+        <hr />
+        <p className={styles.previewText}>
+          {state.expr !== '' && state.expr}
+        </p>
+      </>
+    </InlineField>
+  )
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    previewText: css`
+      font-size: ${theme.typography.bodySmall.fontSize};
+    `
+  };
+};