[v10.0.x] Docs: Plugins doc review chunk 3 (#68921)
Docs: Plugins doc review chunk 3 (#68159)
* Initial commit
Signed-off-by: Joe Perez <joseph.perez@grafana.com>
* Minor fix
Signed-off-by: Joe Perez <joseph.perez@grafana.com>
* Review changes
Signed-off-by: Joe Perez <joseph.perez@grafana.com>
* Doc fixes
Signed-off-by: Joe Perez <joseph.perez@grafana.com>
* Minor fix
Signed-off-by: Joe Perez <joseph.perez@grafana.com>
* Update docs/sources/developers/plugins/cross-plugin-linking.md
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
* Update docs/sources/developers/plugins/development-with-local-grafana.md
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
* Update docs/sources/developers/plugins/cross-plugin-linking.md
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
* Update docs/sources/developers/plugins/cross-plugin-linking.md
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
* Update docs/sources/developers/plugins/development-with-local-grafana.md
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
* Incorporating review feedback
Signed-off-by: Joe Perez <joseph.perez@grafana.com>
* Update docs/sources/developers/plugins/development-with-local-grafana.md
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
* Test commit
Signed-off-by: Joe Perez <joseph.perez@grafana.com>
---------
Signed-off-by: Joe Perez <joseph.perez@grafana.com>
Co-authored-by: Matt Dodson <47385188+MattDodsonEnglish@users.noreply.github.com>
(cherry picked from commit d68079e927)
Co-authored-by: Joseph Perez <45749060+josmperez@users.noreply.github.com>
This commit is contained in:
Grot (@grafanabot)
co-authored by
Joseph Perez
Joseph Perez
parent
dfa3b0912c
commit
9757c337fb
@@ -1,21 +1,25 @@
|
||||
---
|
||||
title: Cross plugin links
|
||||
title: Work with cross-plugin links
|
||||
description: Learn how to add plugin links to a Grafana app plugin
|
||||
---
|
||||
|
||||
# Cross plugin links
|
||||
# Work with cross-plugin links
|
||||
|
||||
Using the Plugin extensions API, App plugins can register extension points of their own to display other plugins links. This cross-plugin linking creates a more immersive user experience for installed plugins.
|
||||
With the Plugins extension API, app plugins can register extension points of their own to display other plugins links. This is called _cross-plugin linking_, and you can use it to create more immersive user experiences with installed plugins.
|
||||
|
||||
## Available extension points within plugins
|
||||
|
||||
An extension point is a location in another plugins UI where your plugin can insert links. All extension point ids within plugins should follow the naming convention `plugins/<plugin-id>/<extension-point-id>`.
|
||||
An extension point is a location in another plugin's UI where your plugin can insert links. All extension point IDs within plugins should follow the naming convention `plugins/<plugin-id>/<extension-point-id>`.
|
||||
|
||||
## How to create an extension point within a plugin
|
||||
|
||||
The `getPluginExtensions` method in `@grafana/runtime` can be used to create an extension point within your plugin. An extension point is a way of specifying where in the plugin UI other plugins links are rendered. `getPluginExtensions` takes an object consisting of the `extensionPointId`, which must begin `plugin/<pluginId>`, and any contextual information you would like to provide. It returns a list of `extensionLinks` that your program can loop over.
|
||||
Use the `getPluginExtensions` method in `@grafana/runtime` to create an extension point within your plugin. An extension point is a way to specify where in the plugin UI other plugins links are rendered.
|
||||
|
||||
_Note: Creating a extension point in a plugin creates a public interface for other plugins to interact with. Changes to the extension point id or the context it passes could break any plugin that attempts to register a link inside your plugin._
|
||||
{{% admonition type="note" %}}
|
||||
Creating an extension point in a plugin creates a public interface for other plugins to interact with. Changes to the extension point ID or its context could break any plugin that attempts to register a link inside your plugin.
|
||||
{{% /admonition %}}
|
||||
|
||||
The `getPluginExtensions` method takes an object consisting of the `extensionPointId`, which must begin `plugin/<pluginId>`, and any contextual information that you want to provide. The `getPluginExtensions` method returns a list of `extensionLinks` that your program can loop over:
|
||||
|
||||
```typescript
|
||||
import { getPluginExtensions } from '@grafana/runtime';
|
||||
@@ -52,13 +56,13 @@ function AppExtensionPointExample() {
|
||||
}
|
||||
```
|
||||
|
||||
In the above example, we created a component that renders `<LinkButton />` components for all link extensions other plugins registered for the `plugin/another-app-plugin/menu` extension point id. We pass the context as the second parameter to `getPluginExtensions`, which will use `Object.freeze` to make the context immutable before passing it to other plugins.
|
||||
The preceding example shows a component that renders `<LinkButton />` components for all link extensions that other plugins registered for the `plugin/another-app-plugin/menu` extension point ID. The context is passed as the second parameter to `getPluginExtensions`, which uses `Object.freeze` to make the context immutable before passing it to other plugins.
|
||||
|
||||
## How to insert links into another plugin
|
||||
## Insert links into another plugin
|
||||
|
||||
Create links for other plugins in the same way you would [extend the Grafana application UI]({{< relref "./extend-the-grafana-ui-with-links" >}}) with a link. Rather than specify a `grafana/...` extension point, specify the plugin extension point `plugin/<pluginId>/<extensionPointId>` instead. Given the example above, use a plugin link such as the following.
|
||||
Create links for other plugins in the same way you [extend the Grafana application UI]({{< relref "./extend-the-grafana-ui-with-links" >}}) with a link. Don't specify a `grafana/...` extension point. Instead, specify the plugin extension point `plugin/<pluginId>/<extensionPointId>`.
|
||||
|
||||
### Link example
|
||||
Given the preceding example, use a plugin link such as the following:
|
||||
|
||||
```typescript
|
||||
new AppPlugin().configureExtensionLink({
|
||||
|
||||
Reference in New Issue
Block a user