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 in creating/editing 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 in creating/editing variables, defines how to get variables from datasource

  

  The area around with red line is defined in our VaribleEditor

• queryEditor: use in panel editor, defines how to query panel data from datasource

  

  The area around with red line is defined in QueryEditor

• runQuery: this function executes the query and get data from datasource

   const res: any = await requestApi.get(`/proxy/${ds.id}/api/v1/query_range?query=${q.metrics}&start=${alignedStart}&end=${end}&step=${q.interval}`)

• testDatasource: test datasource connect status, used in creating/editing datasource

  

• replaceQueryWithVariables: defines how to replace query with variables before executing runQuery

  

  As shown in above image, the ${job} variable will be replaced in our replaceQueryWithVariables function

• queryVariableValues: assuming you have a variable named test, its values are get from datasource victoriaMetrics1, then the query logic is defined in queryVariableValues

• queryAlerts: query alerts from datasource and render the result in Alert panel or Graph panel which correlate with alerts