-
Notifications
You must be signed in to change notification settings - Fork 484
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.
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
:
![image](https://private-user-images.githubusercontent.com/7036754/270615703-19854ea5-8055-4324-b29d-7ed739e7697e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzOTczNDYsIm5iZiI6MTcyMTM5NzA0NiwicGF0aCI6Ii83MDM2NzU0LzI3MDYxNTcwMy0xOTg1NGVhNS04MDU1LTQzMjQtYjI5ZC03ZWQ3MzllNzY5N2UucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTlUMTM1MDQ2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmI5NzA5Mzk2MTQzMjkyNWVmMWE4M2MyYjVkOGE5OWY0MjNiMGUxNWUwZTViZDU3OTg3Y2VlY2U0NDgyMzNkMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.L-yWSelQhXenOh1wk-FkIFiLgbeiN0vDvfBUWjVYHPQ)
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.
![image](https://private-user-images.githubusercontent.com/7036754/270618308-f867c8a5-c7c5-4b46-9e38-7a4608e76529.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzOTczNDYsIm5iZiI6MTcyMTM5NzA0NiwicGF0aCI6Ii83MDM2NzU0LzI3MDYxODMwOC1mODY3YzhhNS1jN2M1LTRiNDYtOWUzOC03YTQ2MDhlNzY1MjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTlUMTM1MDQ2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NWU2MzIxNzliOThhOTQ3ZDAxMjI4ZjI2MzI2NWJkZmU2OWYyY2EwODIzYTcwMTQ5NDkyZDFiNTg5NzQxMTY2NiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.IxaFde8hb96uNE0IvdiJ_uOcc-elXAwRj4O9mjdGxB4)
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
.
![image](https://private-user-images.githubusercontent.com/7036754/270618930-316251b9-f64a-4314-8249-44a703e253e1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzOTczNDYsIm5iZiI6MTcyMTM5NzA0NiwicGF0aCI6Ii83MDM2NzU0LzI3MDYxODkzMC0zMTYyNTFiOS1mNjRhLTQzMTQtODI0OS00NGE3MDNlMjUzZTEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTlUMTM1MDQ2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmMxYTM2MTc2NzYxYzNkNTNlNGU0NjQwZmRmZjczNDZjNjcxMTI3Yzk4ZjllOWU1ZTVhM2EyZmE5ZGQ4ZDVlYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.bZBU_chziWeHeI6xb1Ct95mJ35JcodEbb6OC8ol5C18)
Let's look at 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 inDatasourceEdtitor
, other fields are common fields which defined inui/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 ourreplaceQueryWithVariables
function -
queryVariableValues: assuming you have a variable named
test
, its values are get from datasourcevictoriaMetrics1
, then the query logic is defined inqueryVariableValues
-
queryAlerts: query alerts from datasource and render the result in
Alert
panel orGraph
panel which correlate with alerts