opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-28 10:22:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Dashboards: Adds cheat sheet toggle to supported query editors (#28857)

Browse Source 
* Dashboards: Adds cheat sheet toggle to supported query editors
This commit is contained in:
kay delaney
2021-01-19 22:52:09 +00:00
committed by GitHub
parent 5d0a577f07
commit b9b6af9491
19 changed files with 189 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/sources/developers/plugins/_index.md
View File

@ -46,6 +46,7 @@ Improve an existing plugin with one of our guides:
- [Add support for annotations]({{< relref "add-support-for-annotations.md" >}})
- [Add support for Explore queries]({{< relref "add-support-for-explore-queries.md" >}})
- [Add support for variables]({{< relref "add-support-for-variables.md" >}})
- [Add a query editor help component]({{< relref "add-query-editor-help.md" >}})
- [Build a logs data source plugin]({{< relref "build-a-logs-data-source-plugin.md" >}})
- [Build a streaming data source plugin]({{< relref "build-a-streaming-data-source-plugin.md" >}})
- [Error handling]({{< relref "error-handling.md" >}})

72
docs/sources/developers/plugins/add-query-editor-help.md Normal file
View File

@ -0,0 +1,72 @@
## Add a query editor help component
By adding a help component to your plugin, you can for example create "cheat sheets" with commonly used queries. When the user clicks on one of the examples, it automatically updates the query editor. It's a great way to increase productivity for your users.
1. Create a file `QueryEditorHelp.tsx` in the `src` directory of your plugin, with the following content:
```ts
import React from 'react';
import { QueryEditorHelpProps } from '@grafana/data';
export default (props: QueryEditorHelpProps) => {
return (
<h2>My cheat sheet</h2>
);
};
```
1. Configure the plugin to use the `QueryEditorHelp`.
```ts
import QueryEditorHelp from './QueryEditorHelp';
```
```ts
export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
.setConfigEditor(ConfigEditor)
.setQueryEditor(QueryEditor)
.setExploreQueryField(ExploreQueryEditor)
.setQueryEditorHelp(QueryEditorHelp);
```
1. Create a few examples.
```ts
import React from 'react';
import { QueryEditorHelpProps, DataQuery } from '@grafana/data';
const examples = [
{
title: 'Addition',
expression: '1 + 2',
label: 'Add two integers',
},
{
title: 'Subtraction',
expression: '2 - 1',
label: 'Subtract an integer from another',
},
];
export default (props: QueryEditorHelpProps) => {
return (
<div>
<h2>Cheat Sheet</h2>
{examples.map((item, index) => (
<div className="cheat-sheet-item" key={index}>
<div className="cheat-sheet-item__title">{item.title}</div>
{item.expression ? (
<div
className="cheat-sheet-item__example"
onClick={e => props.onClickExample({ refId: 'A', queryText: item.expression } as DataQuery)}
>
<code>{item.expression}</code>
</div>
) : null}
<div className="cheat-sheet-item__label">{item.label}</div>
</div>
))}
</div>
);
};
```

75
docs/sources/developers/plugins/add-support-for-explore-queries.md
View File

@ -10,7 +10,7 @@ This guide assumes that you're already familiar with how to [Build a data source
With Explore, users can make ad-hoc queries without the use of a dashboard. This is useful when users want to troubleshoot or to learn more about the data.
Your data source already supports Explore by default, and will use the existing query editor for the data source. If you want to offer extended Explore functionality for your data source however, you can define a Explore-specific query editor. Optionally, your plugin can also define a _start page_ for Explore.
Your data source already supports Explore by default, and will use the existing query editor for the data source. If you want to offer extended Explore functionality for your data source however, you can define a Explore-specific query editor.
## Add a query editor for Explore
@ -85,79 +85,6 @@ The query editor for Explore is similar to the query editor for the data source
};
```
## Add a start page for Explore
By adding an Explore start page for your plugin, you can for example create "cheat sheets" with commonly used queries. When the user clicks on one of the examples, it automatically updates the query editor, and runs the query. It's a great way to increase productivity for your users.
1. Create a file `ExploreStartPage.tsx` in the `src` directory of your plugin, with the following content:
```ts
import React from 'react';
import { ExploreStartPageProps } from '@grafana/data';
export default (props: ExploreStartPageProps) => {
return (
<h2>My start page</h2>
);
};
```
1. Configure the plugin to use the `ExploreStartPage`.
```ts
import ExploreStartPage from './ExploreStartPage';
```
```ts
export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
.setConfigEditor(ConfigEditor)
.setQueryEditor(QueryEditor)
.setExploreQueryField(ExploreQueryEditor)
.setExploreStartPage(ExploreStartPage);
```
1. Create a few examples.
```ts
import React from 'react';
import { ExploreStartPageProps, DataQuery } from '@grafana/data';
const examples = [
{
title: 'Addition',
expression: '1 + 2',
label: 'Add two integers',
},
{
title: 'Subtraction',
expression: '2 - 1',
label: 'Subtract an integer from another',
},
];
export default (props: ExploreStartPageProps) => {
return (
<div>
<h2>Cheat Sheet</h2>
{examples.map((item, index) => (
<div className="cheat-sheet-item" key={index}>
<div className="cheat-sheet-item__title">{item.title}</div>
{item.expression ? (
<div
className="cheat-sheet-item__example"
onClick={e => props.onClickExample({ refId: 'A', queryText: item.expression } as DataQuery)}
>
<code>{item.expression}</code>
</div>
) : null}
<div className="cheat-sheet-item__label">{item.label}</div>
</div>
))}
</div>
);
};
```
## Support multiple Explore modes
Explore lets you query any data source, regardless of whether it returns metrics or logs. You can change which type of query you want to make, by setting the _Explore mode_.