How to call a selected data source to build panel plugin options

[andriykarpyak]

Hello,

I’m currently working on a small plugin that visualizes data from a database. However, I’ve come to a point where I need to create options that allow users to filter data using several keys. These filtering keys should be obtained from the same data source that is selected for the panel. Unfortunately, I’m facing some difficulties in this area.

Here’s a rough outline of my code:

const fetchSites = async (context: FieldOverrideContext): Promise<Array<SelectableValue<string>>> => {

    try {
        const panelDataSourceID = // **??? how**

        if (panelDataSourceID !== undefined) {
            const dataSource = await getDataSourceSrv().get(panelDataSourceID);
            const qResult = dataSource.query(...);
            const result: = // convert qResult to the correct data type, as covered.

            return result;
        } else {
            return [];
        }
    } catch (error) {
        console.error('Error fetching data:', error);
    }

    return [];
}

export const plugin = new PanelPlugin<MyPanelOptions>(MyPanel)
    .setPanelOptions((builder) => {

        return builder
            .addSelect({
                path: 'optionName',
                name: 'Name of the option',
                settings: {
                    options: [],
                    getOptions: fetchOpts,
                },
            })
    });

Could you please help me understand if achieving the expected outcome is even possible? Your guidance would be greatly appreciated.

[academo]

Hi @andriykarpyak

Panels only get data from the datasource. Filtering is a datasource responsibility.

Panels are responsible of displaying data only. If you are also developing the datasource you can for example, modify the query editor to have the filtering inbuilt. If not, you can modify the query to have transformations where you can filter out parts you don’t need though it is always the best to let the datasource handle that.

Alternatively you can look into template variables. With template variables you can run a query that return some items and let the user directly select it in the dashboard UI and later use this value inside your panel to allow filtering.

Perhaps you can tell us more of the specific kind of filtering and UI you want to create so we can suggest better ways to address it.