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.
-
Create a file
QueryEditorHelp.tsx
in thesrc
directory of your plugin, with the following content:import React from 'react'; import { QueryEditorHelpProps } from '@grafana/data'; export default (props: QueryEditorHelpProps) => { return <h2>My cheat sheet</h2>; };
-
Configure the plugin to use the
QueryEditorHelp
.import QueryEditorHelp from './QueryEditorHelp';
export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource) .setConfigEditor(ConfigEditor) .setQueryEditor(QueryEditor) .setQueryEditorHelp(QueryEditorHelp);
-
Create a few examples.
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> ); };
Related Grafana resources
Opening keynote: What's new in Grafana 9?
Raj Dutt, Myrle Krantz, and Torkel Ödegaard unveil what's new in Grafana 9. Watch the opening keynote presentation from GrafanaCONline 2022. On-demand.
Unify your data with Grafana plugins: Splunk, MongoDB, Datadog, and more
Show how Grafana can be used to take data from multiple different sources and unify it, without disrupting the investments that are working today.
Getting started with Grafana Enterprise and observability
Join the Grafana Labs team for a 30-minute demo of how to get started with the Grafana Stack, so you can go from zero to observability in just a few minutes.