IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update build a datasource plugin tutorial (#66381)

Browse Source 
* update tutorial

* add punctuation
This commit is contained in:
Kate Brenner 2023-04-25 12:20:14 -06:00 committed by GitHub
parent 96a191e643
commit 17b8d28cae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/sources/shared/tutorials/create-plugin.md
View File

@ -31,10 +31,10 @@ Grafana [create-plugin tool](https://www.npmjs.com/package/@grafana/create-plugi
```
1. Restart the Grafana server for Grafana to discover your plugin.
1. Open Grafana and go to **Configuration** -> **Plugins**. Make sure that your plugin is there.
1. Open Grafana and go to **Connections** -> **Connect Data**. Make sure that your data source is there.
By default, Grafana logs whenever it discovers a plugin:
```
INFO[01-01|12:00:00] Registering plugin logger=plugins name=my-plugin
INFO[01-01|12:00:00] Plugin registered logger=plugin.loader pluginID=my-plugin
```

32
docs/sources/tutorials/build-a-data-source-plugin/index.md
View File

@ -70,7 +70,7 @@ async testDatasource()
## Data frames
Nowadays there are countless of different databases, each with their own ways of querying data. To be able to support all the different data formats, Grafana consolidates the data into a unified data structure called _data frames_.
Nowadays there are countless different databases, each with their own ways of querying data. To be able to support all the different data formats, Grafana consolidates the data into a unified data structure called _data frames_.
Let's see how to create and return a data frame from the `query` method. In this step, you'll change the code in the starter plugin to return a [sine wave](https://en.wikipedia.org/wiki/Sine_wave).
@ -98,6 +98,14 @@ Let's see how to create and return a data frame from the `query` method. In this
const query = defaults(target, defaultQuery);
```
1. Create a default query at the top of datasource.ts:
```ts
export const defaultQuery: Partial<MyQuery> = {
constant: 6.5,
};
```
1. Create a data frame with a time field and a number field:
```ts
@ -190,19 +198,19 @@ Now that you've defined the query model you wish to support, the next step is to
**QueryEditor.tsx**
```ts
const query = defaults(this.props.query, defaultQuery);
const { queryText, constant, frequency } = query;
```
```ts
<FormField width={4} value={frequency} onChange={this.onFrequencyChange} label="Frequency" type="number" />
<InlineField label="Frequency" labelWidth={16}>
<Input onChange={onFrequencyChange} value={frequency} />
</InlineField>
```
1. Add a event listener for the new property.
```ts
onFrequencyChange = (event: ChangeEvent<HTMLInputElement>) => {
const { onChange, query, onRunQuery } = this.props;
const onFrequencyChange = (event: ChangeEvent<HTMLInputElement>) => {
onChange({ ...query, frequency: parseFloat(event.target.value) });
// executes the query
onRunQuery();
@ -255,21 +263,15 @@ Just like query editor, the form field in the config editor calls the registered
**ConfigEditor.tsx**
```ts
<div className="gf-form">
<FormField
label="Resolution"
onChange={this.onResolutionChange}
value={jsonData.resolution || ''}
placeholder="Enter a number"
/>
</div>
<InlineField label="Resolution" labelWidth={12}>
<Input onChange={onResolutionChange} value={jsonData.resolution || ''} placeholder="Enter a number" width={40} />
</InlineField>
```
1. Add a event listener for the new option.
```ts
onResolutionChange = (event: ChangeEvent<HTMLInputElement>) => {
const { onOptionsChange, options } = this.props;
const onResolutionChange = (event: ChangeEvent<HTMLInputElement>) => {
const jsonData = {
...options.jsonData,
resolution: parseFloat(event.target.value),