Develop datasource plugin

Our goal in this doc is to develop a panel plugin named victoriaMetrics1, we named with 1 because there already exists a victoriaMetrics panel.

As we already know how to develop a panel plugin, so let's have a quick tutorial of how to develop a datasource plugin.

Create plugin & install

Enter DATAV_ROOT/ui/external-plugins/datasource directory, copy the victoriaMetrics plugin directory and rename it to victoriaMetrics1, then rename victoriaMetrics.svg to victoriaMetrics1.svg:

Then enter DATAV_ROOT/ui/external-plugins and run buildPlugins.go to install external plugins:

go run buildPlugins.go
2023/09/26 09:49:08 Generate panel plugins file successfully!

Now the new plugin is already created, you can try to use it to create a new datasource.

Develop plugin

It's time to develop our new datasource plugin, enter the source code directory of the new plugin : ui/src/views/dashboard/plugins/external/datasource/victoriaMetrics.

Let's look at index.ts.

index.ts

const vmComponents: DatasourcePluginComponents = {
    datasourceEditor: DatasourceEditor,
    variableEditor:VariableEditor,
    queryEditor: QueryEditor,
    
    // defined in query_runner.ts
    runQuery: runQuery,
    testDatasource: testDatasource,
    replaceQueryWithVariables: replaceQueryWithVariables,
    queryVariableValues: queryVariableValues,
    queryAlerts: queryAlerts,
}

export default  vmComponents

This file export all the api of victoriaMetrics1 plugin that Datav requires, including:

• datasourceEditor: used when create/edit datasource

The URL field in above image is defined in DatasourceEdtitor, other fields are common fields which defined in ui/src/views/datasource/Editor.tsx.

• variableEditor: used when create/edit variables, for querying variables from datasource

The area around with red line is defined in our VaribleEditor

• queryEditor: use in panel editor, for query panel data from datasource

The area around with red line is defined in QueryEditor