Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Rename/move 'introduction' to 'key concepts' and fix broken links #926

Merged
merged 26 commits into from
Jun 12, 2024
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
192ed86
Rename 'introduction' to 'key concepts' and fix broken links
josmperez May 24, 2024
a2275dd
Merge remote-tracking branch 'origin' into josmperez/key
josmperez May 24, 2024
701a63e
Fix broken links in packages
josmperez May 24, 2024
e5798fb
Fix from testing
josmperez May 24, 2024
d2acd45
fix of fix
josmperez May 24, 2024
9a15bbd
Fix of fix of fix
josmperez May 24, 2024
5f413ce
Fix typo
josmperez May 24, 2024
348d50c
Redirect fix
josmperez Jun 7, 2024
7f89507
Fix broken link
academo Jun 10, 2024
d36020b
fix(website): redirect config should be individual objects for each r…
jackw Jun 10, 2024
e91b7b3
Fix build not working correctly
academo Jun 10, 2024
335230d
trying out without nx
tolzhabayev Jun 10, 2024
4a9fc6d
revert
tolzhabayev Jun 10, 2024
b99f545
Merge remote-tracking branch 'origin/main' into josmperez/key
tolzhabayev Jun 10, 2024
d84e0e3
trying with rebased
tolzhabayev Jun 10, 2024
ab1d0b7
resolving issues
tolzhabayev Jun 10, 2024
4809994
typo fix
josmperez Jun 10, 2024
b82ac35
Fix error on UI extensions
josmperez Jun 10, 2024
2cada7e
Small fix
josmperez Jun 10, 2024
049ec25
Delete unnecessary redirect
josmperez Jun 10, 2024
f4036fb
Merge branch 'main' into josmperez/key
josmperez Jun 11, 2024
035b32a
Fix from review
josmperez Jun 12, 2024
abfba50
Update docusaurus/docs/key-concepts/ui-extensions.md
josmperez Jun 12, 2024
4aa03d6
Update docusaurus/docs/key-concepts/backend-plugins/index.md
josmperez Jun 12, 2024
34fcaf1
Update docusaurus/docs/migration-guides/angular-react/angular-react-c…
josmperez Jun 12, 2024
ee9d77a
Update packages/create-plugin/templates/_partials/backend-getting-sta…
josmperez Jun 12, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Is something missing from this list? [Let us know](https://github.com/grafana/pl
## General

- **Verify that your data source or app plugin can be provisioned** - Refer to [Provisioning](https://grafana.com/docs/grafana/latest/administration/provisioning/#data-sources) for more information.
- **Include default dashboards in your data source or app plugin** - Refer to [Bundling of dashboards](https://grafana.com/developers/plugin-tools/introduction/plugin-types-usage#bundling-of-dashboards) for more information.
- **Include default dashboards in your data source or app plugin** - Refer to [Bundling of dashboards](../../key-concepts/plugin-types-usage#bundling-of-dashboards) for more information.
- **Ensure that the minimum version of Grafana is correct** - Make sure that the `grafanaDependency` in your `plugin.json` points to the earliest version of Grafana that your plugin fully supports.
- **Don't expose sensitive information** - For security reasons, avoid exposing sensitive information such as secrets. Make sure to utilize log levels properly, avoid excessive logging, and never log credentials or other sensitive information.
- **Avoid using `console.log` in your plugin** - Console messages are usually for debugging purposes and therefore not suitable to ship to the client.
Expand All @@ -39,7 +39,7 @@ Is something missing from this list? [Let us know](https://github.com/grafana/pl

- **If your plugin needs to store credentials, use `secureJsonData` instead of `jsonData`** - The former is encrypted at rest while the latter isn't. Refer to [Secure JSON data](/create-a-plugin/extend-a-plugin/add-authentication-for-data-source-plugins#store-configuration-in-securejsondata) for more information.
- **Implement a query builder** - This is highly useful for users who are not familiar with the query language of the data source. Refer, for example, to the [Query Builder for Microsoft SQL Server](https://grafana.com/docs/grafana/latest/datasources/mssql/query-editor/#builder-mode) which helps write SQL queries for that service.
- **Add a health check for your plugin** - [Health checks](/introduction/backend-plugins#health-checks) are used to verify that the data source is working properly. How this is implemented depends on whether the plugin has a backend. Refer to our examples for health checks in the [frontend](https://github.com/grafana/grafana-plugin-examples/blob/5441fe2f818e28cdeb06eb7066ff198dd34bb0ab/examples/datasource-http/src/DataSource.ts#L81-L115) and [backend](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/datasource-basic/pkg/plugin/datasource.go#L77). For the `backend` case, it's not necessary to modify its frontend code as long as it extends the [`DataSourceWithBackend`](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/datasource-basic/src/datasource.ts#L5) class from `@grafana/runtime`.
- **Add a health check for your plugin** - [Health checks](../../key-concepts/backend-plugins/#health-checks) are used to verify that the data source is working properly. How this is implemented depends on whether the plugin has a backend. Refer to our examples for health checks in the [frontend](https://github.com/grafana/grafana-plugin-examples/blob/5441fe2f818e28cdeb06eb7066ff198dd34bb0ab/examples/datasource-http/src/DataSource.ts#L81-L115) and [backend](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/datasource-basic/pkg/plugin/datasource.go#L77). For the `backend` case, it's not necessary to modify its frontend code as long as it extends the [`DataSourceWithBackend`](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/datasource-basic/src/datasource.ts#L5) class from `@grafana/runtime`.
- **Add [dashboard variables](https://grafana.com/docs/grafana/latest/dashboards/variables/) support** - Dashboard (or template) variables allow users to create dynamic dashboards. There are two aspects of adding support for variables in your plugin. The first is allowing queries for your data source and return values to be used as variables. The second is replacing existing variables in other queries. For more information, refer to our [documentation](/create-a-plugin/extend-a-plugin/add-support-for-variables#add-support-for-query-variables-to-your-data-source). Pay special attention when selecting "All values" since it may require specific logic to join variable values.
- **Add annotations support** - Annotations allow users to add contextual information to their dashboards and it's possible to use queries to define them. For more information, refer to [Enable annotations](/create-a-plugin/extend-a-plugin/enable-for-annotations).
- **Practice good front-end design** - When building frontend components, make sure to use [Grafana components](https://developers.grafana.com/ui/latest/index.html?path=/docs/docs-overview-intro--page) as the base and follow the [Saga Design System](https://grafana.com/developers/saga/about/overview).
Expand All @@ -49,14 +49,17 @@ Is something missing from this list? [Let us know](https://github.com/grafana/pl

### Frontend (only) plugins

- **Data sources running only on the frontend typically use the [Grafana proxy](/create-a-plugin/extend-a-plugin/add-authentication-for-data-source-plugins#add-a-proxy-route-to-your-plugin) to access an external service** - This is a simple way of adding support for queries in your plugin, and it doesn't require Golang knowledge. However, there are use cases for which writing a backend plugin is necessary. Refer to [Backend plugins](/introduction/backend-plugins#use-cases-for-implementing-a-backend-plugin) for more information about those.
- **Data sources running only on the frontend typically use the [Grafana proxy](/create-a-plugin/extend-a-plugin/add-authentication-for-data-source-plugins#add-a-proxy-route-to-your-plugin) to access an external service** - This is a simple way of adding support for queries in your plugin, and it doesn't require Golang knowledge. However, there are use cases for which writing a backend plugin is necessary. Refer to [Backend plugins](../../key-concepts/backend-plugins/#use-cases-for-implementing-a-backend-plugin) for more information about those.

### Backend plugins

- **Add support for alerting** - Backend plugins have inherent support for [Grafana Alerting](https://grafana.com/docs/grafana/latest/alerting/) but this support needs to be enabled. Simply add `"alerting": true` to your `plugin.json` file.
- **Use the `CallResourceHandler` interface to serve custom HTTP requests** - For more information, refer to [Resource handlers](/introduction/backend-plugins#resources). This is useful, for example, when providing query builders, as shown in this [example](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/app-with-backend/pkg/plugin/app.go#L35).
- **Use the `CallResourceHandler` interface to serve custom HTTP requests** - For more,
information, refer to [Resource handlers](../../key-concepts/backend-plugins/#resources)

```). This is useful, for example, when providing query builders, as shown in this [example](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/app-with-backend/pkg/plugin/app.go#L35).
josmperez marked this conversation as resolved.
Show resolved Hide resolved
- **Add logs, metrics and traces to your data source.** Make it easier to diagnose and resolve issues for both plugin developers and Grafana operators. Find more information in our [documentation](/create-a-plugin/extend-a-plugin/add-logs-metrics-traces-for-backend-plugins).
- **Keep cached connections** - This is an important optimization. To learn more, refer to our [documentation](/introduction/backend-plugins#caching-and-connection-pooling) and an [example](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/datasource-http-backend/pkg/plugin/datasource.go#L40-L66).
- **Keep cached connections** - This is an important optimization. To learn more, refer to our [documentation](/docusaurus/docs/key-concepts/backend-plugins/#caching-and-connection-pooling) and an [example](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/datasource-http-backend/pkg/plugin/datasource.go#L40-L66).
- **Add macro support** - Macros are similar to variables, but they are typically evaluated in the backend and can return values based on environment data like the current time selection. It can be useful, for example, to evaluate alerts during a dynamic period. These are usually defined using the syntax `$__macroName` (for example, `$__timeFilter`). Refer to this [example](https://github.com/grafana/grafana-plugin-examples/blob/0532f8b23645251997088ac7a1707a72d3fd9248/examples/datasource-basic/pkg/query/macro.go) to discover how you can implement support. Some pre-defined macros are available in the [plugin SDK `macros` package](https://github.com/grafana/grafana-plugin-sdk-go/tree/main/experimental/macros).
- **For SQL data sources, refer to the [`sqlutil` package in the SDK](https://pkg.go.dev/github.com/grafana/grafana-plugin-sdk-go/data/sqlutil)** - It includes multiple helpers to work with SQL data sources for things like data frame conversion, default macros, and so on. Also, consider using the [`sqlds` package](https://pkg.go.dev/github.com/grafana/sqlds) which highly simplifies the implementation of SQL data sources.
- **Don't use the local file system** - Different plugins share the same environment. For security reasons, plugins shouldn't rely on local files.
Expand All @@ -76,3 +79,4 @@ Is something missing from this list? [Let us know](https://github.com/grafana/pl

- **Add a GitHub badge** - Follow [these steps](https://grafana.com/blog/2021/01/21/6-tips-for-improving-your-grafana-plugin-before-you-publish/#tip-4-add-dynamic-badges-to-your-readme) to help users find your plugin using GitHub badges.
- **Add workflow automation** - If your plugin is available on GitHub, consider [adding the GitHub workflows](https://grafana.com/blog/2021/01/21/6-tips-for-improving-your-grafana-plugin-before-you-publish/#tip-5-automate-your-releases-using-github-actions) for plugin development to your repository.
```
josmperez marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ sidebar_position: 5

# Subscribe to Grafana events

If you’re building a [panel plugin](../../introduction/plugin-types-usage.md#panel-visualization-plugins), in some cases you may want your plugin to react to changes that occur outside of your plugin. For example, you may want your plugin to react when the user zooms in or out of another panel. In this guide, you’ll learn how to make your plugin react to events in Grafana.
If you’re building a [panel plugin](../../key-concepts/plugin-types-usage.md#panel-visualization-plugins), in some cases you may want your plugin to react to changes that occur outside of your plugin. For example, you may want your plugin to react when the user zooms in or out of another panel. In this guide, you’ll learn how to make your plugin react to events in Grafana.

:::tip

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ Develop backend components for a Grafana plugin in [Go](https://go.dev/). The fo

## Update the Go SDK

To keep the [Grafana plugin SDK for Go](../../introduction/grafana-plugin-sdk-for-go) up to date:
To keep the [Grafana plugin SDK for Go](../../key-concepts/backend-plugins/grafana-plugin-sdk-for-go) up to date:
To keep the [Grafana plugin SDK for Go](../../key-concepts/backend-plugins/grafana-plugin-sdk-for-go) up to date:
josmperez marked this conversation as resolved.
Show resolved Hide resolved

```bash
go get -u github.com/grafana/grafana-plugin-sdk-go
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ sidebar_position: 3

# Work with data frames

The [data frame](../../introduction/data-frames.md) is a columnar data structure that allows for efficient querying of large amounts of data. Since data frames are a central concept when developing plugins for Grafana, in this guide we'll look at some ways you can use them.
The [data frame](../../key-concepts/data-frames) is a columnar data structure that allows for efficient querying of large amounts of data. Since data frames are a central concept when developing plugins for Grafana, in this guide we'll look at some ways you can use them.

The `DataFrame` interface contains a `name` and an array of `fields` where each field contains the name, type, and the values for the field.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ While the data source proxy supports the most common authentication methods for
- Proxy routes only support HTTP or HTTPS.
- Proxy routes don't support custom token authentication.

If any of these limitations apply to your plugin, you need to add a [backend plugin](../../introduction/backend-plugins). Because backend plugins run on the server, they can access decrypted secrets, which makes it easier to implement custom authentication methods.
If any of these limitations apply to your plugin, you need to add a [backend plugin](../../key-concepts/backend-plugins/#caching-and-connection-pooling). Because backend plugins run on the server, they can access decrypted secrets, which makes it easier to implement custom authentication methods.

The decrypted secrets are available from the `DecryptedSecureJSONData` field in the instance settings.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ You can log multiple messages and include certain key-value pairs without repeat

**Example:**

The following example illustrates how you can instantiate a logger per [datasource instance](../../introduction/plugin-types-usage.md#usage-of-data-source-plugins), and use the `With` method to include certain key-value pairs over the life-time of this datasource instance.
The following example illustrates how you can instantiate a logger per [datasource instance](../../key-concepts/plugin-types-usage#usage-of-data-source-plugins), and use the `With` method to include certain key-value pairs over the life-time of this datasource instance.

```go
package plugin
Expand Down Expand Up @@ -298,7 +298,7 @@ For further details and an up-to-date list of what metrics are automatically gat

### Implement metrics in your plugin

The [Grafana plugin SDK for Go](../../introduction/grafana-plugin-sdk-for-go.md) uses the [Prometheus instrumentation library for Go applications](https://github.com/prometheus/client_golang). Any custom metric registered with the [default registry](https://pkg.go.dev/github.com/prometheus/client_golang/prometheus#pkg-variables) will be picked up by the SDK and exposed through the [Collect metrics capability](../../introduction/backend.md#collect-metrics).
The [Grafana plugin SDK for Go](../../key-concepts/backend-plugins/grafana-plugin-sdk-for-go) uses the [Prometheus instrumentation library for Go applications](https://github.com/prometheus/client_golang). Any custom metric registered with the [default registry](https://pkg.go.dev/github.com/prometheus/client_golang/prometheus#pkg-variables) will be picked up by the SDK and exposed through the [Collect metrics capability](../../key-concepts/backend-plugins/#collect-metrics).

For convenience, it's recommended to use the [promauto package](https://pkg.go.dev/github.com/prometheus/client_golang/prometheus/promauto) when creating custom metrics since it automatically registers the metric in the [default registry](https://pkg.go.dev/github.com/prometheus/client_golang/prometheus#pkg-variables) and exposes them to Grafana.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Most data source plugins need authentication to communicate with third-party ser

### Testing the configuration in a backend data source plugin

Backend data sources implement a [health check](../../introduction/backend.md#health-checks) endpoint that is used to test whether the configuration is valid or not. In the following example, the configuration editor form is populated with valid values then the `Save & test` button is clicked. Clicking `Save & test` calls the Grafana backend to save the configuration, then passes configuration to the plugin's backend health check endpoint. The test will be successful only if both calls yields a successful status code.
Backend data sources implement a [health check](../../key-concepts/backend-plugins/#health-checks) endpoint that is used to test whether the configuration is valid or not. In the following example, the configuration editor form is populated with valid values then the `Save & test` button is clicked. Clicking `Save & test` calls the Grafana backend to save the configuration, then passes configuration to the plugin's backend health check endpoint. The test will be successful only if both calls yields a successful status code.

```ts title="configurationEditor.spec.ts"
import { test, expect } from '@grafana/plugin-e2e';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@ keywords:
sidebar_position: 10
---

The following articles will give some tips and tricks on how to test data source plugins, including example tests to cover common scenarios. To write end-to-end tests similar to the ones in this guide, you'll need your data source to be configured using provisioning. If you haven't already checked out our guide on how to [setup the resources](../setup-resources.md) you'll need, do that first.
The following articles give some tips and tricks on how to test data source plugins, including example tests to cover common scenarios. To write end-to-end tests similar to the ones in this guide, you'll need your data source to be configured using provisioning. If you haven't already checked out our guide on how to [set up the required resources](../setup-resources.md), do that first.

<DocLinkList />
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ The query editor is a central piece of a data source plugin as this is where use

In the following example, the query editor loads regions via a request to `/regions` and filters out the ones containing `gov` before populating them in a dropdown menu.

The [`<page>.mockResourceResponse`](https://github.com/grafana/plugin-tools/blob/main/packages/plugin-e2e/src/models/pages/GrafanaPage.ts#L53) method allows you to mock the response of a request to the data source [resource API](https://grafana.com/developers/plugin-tools/introduction/backend-plugins#resources). To test that the filtering is working as expected, we use this method to mock the `/regions` response and assert that only the regions without `-gov-` in their name are shown when the regions dropdown is clicked.
The [`<page>.mockResourceResponse`](https://github.com/grafana/plugin-tools/blob/main/packages/plugin-e2e/src/models/pages/GrafanaPage.ts#L53) method allows you to mock the response of a request to the data source [resource API](../../key-concepts/backend-plugins/#resources). To test that the filtering is working as expected, we use this method to mock the `/regions` response and assert that only the regions without `-gov-` in their name are shown when the regions dropdown is clicked.

```ts title="queryEditor.spec.ts"
test('should filter out govcloud regions', async ({ panelEditPage, selectors, readProvisionedDataSource }) => {
Expand Down
2 changes: 1 addition & 1 deletion docusaurus/docs/e2e-test-a-plugin/test-a-panel-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Panel plugins allow you to visualize data in different ways. This guide shows yo

## Test data

To be able to test your panel plugin, you'll need to feed it with test data. Grafana ships with the [TestData](https://grafana.com/docs/grafana/latest/datasources/testdata/) data source, which can be used to simulate [data frames](../introduction/data-frames.md) formatted as time series, logs, traces, annotations, and more.
To be able to test your panel plugin, you'll need to feed it with test data. Grafana ships with the [TestData](https://grafana.com/docs/grafana/latest/datasources/testdata/) data source, which can be used to simulate [data frames](../key-concepts/data-frames) formatted as time series, logs, traces, annotations, and more.

## Before you begin

Expand Down
Loading
Loading