Files
grafana/docs/sources/developers/plugins/add-query-editor-help.md
Jack Baldry c1c48dd610 Use relative aliases for all non-current Grafana aliases (#60062)
* Use relative aliases for all non-current Grafana aliases

Prevents non-latest documentation "stealing" the page away from latest
and through permanent redirects for latest pages that no longer exist.

The redirected pages are indexed by search engines but our robots.txt
forbids them crawling the non-latest page.

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Remove aliases from shared pages

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Rewrite all current latest aliases to be next

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Fix typo in latest alias

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Remove all current page aliases

find docs/sources -type f -name '*.md' -exec sed -z -i 's#\n *- /docs/grafana/next/[^\n]*\n#\n#' {} \;
find docs/sources -type f -name '*.md' -exec sed -Ez -i 's#\n((aliases:\n *-)|aliases:\n)#\n\2#' {} \;

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

* Prettier

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>

Signed-off-by: Jack Baldry <jack.baldry@grafana.com>
2022-12-09 12:36:04 -04:00

74 lines
2.1 KiB
Markdown

---
title: Add query editor help
---
# 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)
.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>
);
};
```