From 5ce884e92a2fcc24e5a10729e098930b41ea4c87 Mon Sep 17 00:00:00 2001 From: Andres Martinez Gotor Date: Tue, 21 Feb 2023 09:26:14 +0100 Subject: [PATCH] Docs: Fix typos for 'Build a data source' tutorial (#63448) --- docs/sources/shared/tutorials/create-plugin.md | 2 +- docs/sources/shared/tutorials/plugin-anatomy.md | 2 +- .../tutorials/build-a-data-source-plugin/index.md | 9 +++++---- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/sources/shared/tutorials/create-plugin.md b/docs/sources/shared/tutorials/create-plugin.md index 656bce3cf9e..f59ca3d675e 100755 --- a/docs/sources/shared/tutorials/create-plugin.md +++ b/docs/sources/shared/tutorials/create-plugin.md @@ -6,7 +6,7 @@ Tooling for modern web development can be tricky to wrap your head around. While Grafana [create-plugin tool](https://www.npmjs.com/package/@grafana/create-plugin) is a CLI application that simplifies Grafana plugin development, so that you can focus on code. The tool scaffolds a starter plugin and all the required configuration for you. -1. In the plugin directory, create a plugin from template using create-plugin: +1. In the plugin directory, create a plugin from template using create-plugin. Select `datasource` when asked the kind of plugin: ``` npx @grafana/create-plugin diff --git a/docs/sources/shared/tutorials/plugin-anatomy.md b/docs/sources/shared/tutorials/plugin-anatomy.md index 4d6e2c4ead0..ba297e20637 100644 --- a/docs/sources/shared/tutorials/plugin-anatomy.md +++ b/docs/sources/shared/tutorials/plugin-anatomy.md @@ -4,7 +4,7 @@ title: Plugin Anatomy Plugins come in different shapes and sizes. Before we dive deeper, let's look at some of the properties that are shared by all of them. -Every plugin you create will require at least two files: `plugin.json` and `module.ts`. +Every plugin you create will require at least two files: `plugin.json` and `src/module.ts`. ### plugin.json diff --git a/docs/sources/tutorials/build-a-data-source-plugin/index.md b/docs/sources/tutorials/build-a-data-source-plugin/index.md index 8cb9af04281..271f019f4b0 100644 --- a/docs/sources/tutorials/build-a-data-source-plugin/index.md +++ b/docs/sources/tutorials/build-a-data-source-plugin/index.md @@ -44,7 +44,7 @@ In this tutorial, you'll: ## Data source plugins -A data source in Grafana must extend the `DataSourceApi` interface, which requires you to defines two methods: `query` and `testDatasource`. +A data source in Grafana must extend the `DataSourceApi` interface, which requires you to define two methods: `query` and `testDatasource`. ### The `query` method @@ -183,11 +183,12 @@ We want to be able to control the frequency of the sine wave, so let's add anoth Now that you've defined the query model you wish to support, the next step is to bind the model to a form. The `FormField` is a text field component from `grafana/ui` that lets you register a listener which will be invoked whenever the form field value changes. -1. Add a new form field to the query editor to control the new frequency property. +1. Define the `frequency` from the `query` object and add a new form field to the query editor to control the new frequency property in the `render` method. **QueryEditor.tsx** ```ts + const query = defaults(this.props.query, defaultQuery); const { queryText, constant, frequency } = query; ``` @@ -296,7 +297,7 @@ Just like query editor, the form field in the config editor calls the registered 1. In the `query` method, use the `resolution` property to calculate the step size. - **src/DataSource.ts** + **src/datasource.ts** ```ts const step = duration / this.resolution; @@ -312,7 +313,7 @@ The main advantage of `getBackendSrv` is that it proxies requests through the Gr 1. Import `getBackendSrv`. - **src/DataSource.ts** + **src/datasource.ts** ```ts import { getBackendSrv } from '@grafana/runtime';