Filter.tsx

import React, {} from 'react';
import {
    IconButton,
    InlineField,
    InlineFieldRow,
    InlineSwitch,
    QueryField,
    Select,
    TypeaheadInput, TypeaheadOutput
} from "@grafana/ui";

interface FilterProps {
    fields: any,
    onRemove: () => void,
    onDisabled: (disabled: boolean) => void,
    onInvertChange: (invert: boolean) => void,
    onFieldChange: (field: string|undefined) => void,
    onOperatorChange: (operator: string|undefined) => void,
    onValueChange: (value: string|undefined) => void,
    disabled: boolean,
    invert: boolean,
    field: string,
    operator: string,
    value: string,
}

const onSuggest = async (input: TypeaheadInput): Promise<TypeaheadOutput> => {
    console.log('On Typeahead', input)

    if (input.text.endsWith('$')) {
        let result = {
            suggestions: [{
                label: 'Variables',
                items: [
                    { label: '${__from:date:iso}', documentation: 'Start of time range'},
                    { label: '${__to:date:iso}', documentation: 'End of time range'},
                ]
            }]
        }
        console.log('... Typeahead result', result)
        return result
    }

    return { suggestions: []}

}

export default function Filter(
    {
        fields,
        onRemove,
        onDisabled,
        onInvertChange,
        onFieldChange,
        onOperatorChange,
        onValueChange,
        disabled,
        invert,
        field,
        operator,
        value
    }: FilterProps) {

    let fieldOptions = []
     if (fields?.headers !== undefined) {
        fieldOptions = fields.headers.map((h: any) => { return {label: h.column_name, value: h.column_name}})
    }

    let operatorOptions = [
        {label: "= eq", value: "eq"},
        {label: "< lt", value: "lt"},
        {label: "<= lte", value: "lte"},
        {label: "> gt", value: "gt"},
        {label: ">= gte", value: "gte"},
        {label: "/.*/ regex", value: "regex"},
        {label: "^ startswith", value: "startswith"},
        {label: "$ endswith", value: "endswith"},
        {label: "() contains", value: "contains"},
        {label: "X isnull", value: "isnull"},
    ]

    return (
        <div>
            <InlineFieldRow>
                <InlineField label={"Invert"} disabled={disabled}>
                    <InlineSwitch onChange={(v: any) => onInvertChange(v.target.checked)} value={invert} label={"Invert"}/>
                </InlineField>

                <InlineField disabled={disabled}>
                    <Select onChange={v => onFieldChange(v.value)} options={fieldOptions} value={field} placeholder={"Field"} width={40}></Select>
                </InlineField>

                <InlineField disabled={disabled}>
                    <Select onChange={v => onOperatorChange(v.value)} options={operatorOptions} value={operator} placeholder={"Operator"} width={20}></Select>
                </InlineField>

                <span style={{width: 400}}>
                    <InlineField disabled={disabled || operator === "isnull"} grow>
                        <QueryField
                            onChange={(v: any) => onValueChange(v)}
                            onTypeahead={onSuggest}
                            query={value}
                            placeholder={"Value"}
                            portalOrigin={'.'}
                        />
                    </InlineField>
                </span>

                <InlineField>
                    <IconButton onClick={() => { onDisabled(!disabled)}} name={disabled ? "eye-slash" : "eye"} size={"xl"} tooltip={"Disable filter"} />
                </InlineField>

                <InlineField>
                    <IconButton onClick={() => { onRemove() }} name={"trash-alt"} size={"xl"} tooltip={"Remove filter"} />
                </InlineField>
            </InlineFieldRow>
        </div>
    )
}