How can I make a QueryEditor field optional when developing a Data Source Plugin?

Grafana Plugin Development
1

Hi All,

Firstly, I do (obviously) apologise if this is asked and answered, I’ve not found a single solution (or even question) that covers this- this is very possibly down to my search terms and lack of Grafana Plugin Development vocabulary or terminology, so if this is a solved problem, I’m happy to be told the right combo of words.

(That reads as sarcasm, it’s genuinely not).

I’ve written a dirt simple little data source plugin. The backend talks to my API perfectly well, and I can draw all the charts I want from it.

The problem I have is that my plugin returns a lot of fields by default, and I want to just return a specific one for some alerts I want to setup.

To do this I’ve added an optional value in both the backend:

type Query struct {
	Dimension *string `json:"dimension"`
}

and the frontend

export interface MyQuery extends DataQuery {
    dimension?: string;
}

and updated my QueryEditor thusly

import React, { ChangeEvent } from 'react';
import { InlineField, Input, Stack } from '@grafana/ui';
import { QueryEditorProps } from '@grafana/data';
import { DataSource } from '../datasource';
import { MyDataSourceOptions, MyQuery } from '../types';

type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;

export function QueryEditor({ query, onChange, onRunQuery }: Props) {
    const { dimension } = query;

    const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
        onChange({ ...query, dimension: event.target.value });
    };

    return (
        <Stack gap={0}>
            <InlineField label="Dimension" labelWidth={16} tooltip="Dimension">
                <Input
                    id="query-editor-query-text"
                    onChange={onQueryTextChange}
                    value={dimension || ''}
                    placeholder="Specific dimension to return, empty for all"
                    type="text"
                />
            </InlineField>
        </Stack>
    );
}

Problem is that if I go to test these changes via the explore tab, the run query button doesn’t seem to fire. The API that returns data certainly doesn’t fire like if I set dimension to something.

Now, the obvious work around here is to use some kind of placeholder that the backend can ignore, like maybe dimension: all but that feels both fragile, and like I just don’t really know what I’m doing. So I’d like to avoid it.

Can anybody point me in the right direction?

2

Hi @jspc welcome to the community forums and to Grafana plugin development.

For data source plugins, you are in total control of the QueryEditor. In theory a data source plugin could even have an empty form as a QueryEditor! so yes, you can have all fields optional. There are plenty of plugins around which query editor is only a text area and you can submit your query even if empty (will probably return an error though :grinning:)

What could be happening is that Grafana is “caching” the query because the dimension field is empty, what you can do for example, is force Grafana to run the query, for example you can call onRunQuery from onQueryTextChange just after you call onChange, see if this helps your case.

If your error persist, perhaps you can share your plugin source code (a github repository would be the best) so we can take a look? maybe there’s something else getting in your way.

Have fun writing your plugin and wish you all the best!