mirror of
https://github.com/grafana/grafana.git
synced 2025-07-28 02:32:07 +08:00

* Set every page to have defaults of 'Enterprise' and 'Open source' labels Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set administration pages to have of 'Cloud', 'Enterprise', and 'Open source' labels Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set administration/enterprise-licensing pages to have 'Enterprise' labels Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set administration/organization-management pages to have 'Enterprise' and 'Open source' labels Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set administration/provisioning pages to have 'Enterprise' and 'Open source' labels Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set administration/recorded-queries pages to have labels cloud,enterprise * Set administration/roles-and-permissions/access-control pages to have labels cloud,enterprise Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set administration/stats-and-license pages to have labels cloud,enterprise * Set alerting pages to have labels cloud,enterprise,oss * Set breaking-changes pages to have labels cloud,enterprise,oss * Set dashboards pages to have labels cloud,enterprise,oss * Set datasources pages to have labels cloud,enterprise,oss * Set explore pages to have labels cloud,enterprise,oss * Set fundamentals pages to have labels cloud,enterprise,oss * Set introduction/grafana-cloud pages to have labels cloud Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Fix introduction pages products Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set panels-visualizations pages to have labels cloud,enterprise,oss * Set release-notes pages to have labels cloud,enterprise,oss * Set search pages to have labels cloud,enterprise,oss * Set setup-grafana/configure-security/audit-grafana pages to have labels cloud,enterprise Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set setup-grafana/configure-security/configure-authentication pages to have labels cloud,enterprise,oss * Set setup-grafana/configure-security/configure-authentication/enhanced-ldap pages to have labels cloud,enterprise * Set setup-grafana/configure-security/configure-authentication/saml pages to have labels cloud,enterprise * Set setup-grafana/configure-security/configure-database-encryption/encrypt-secrets-using-hashicorp-key-vault pages to have labels cloud,enterprise * Set setup-grafana/configure-security/configure-request-security pages to have labels cloud,enterprise,oss Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set setup-grafana/configure-security/configure-team-sync pages to have labels cloud,enterprise Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set setup-grafana/configure-security/export-logs pages to have labels cloud,enterprise Signed-off-by: Jack Baldry <jack.baldry@grafana.com> * Set troubleshooting pages to have labels cloud,enterprise,oss * Set whatsnew pages to have labels cloud,enterprise,oss * Apply updated labels from review Co-authored-by: brendamuir <100768211+brendamuir@users.noreply.github.com> Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --------- Signed-off-by: Jack Baldry <jack.baldry@grafana.com> Co-authored-by: brendamuir <100768211+brendamuir@users.noreply.github.com> Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>
2.3 KiB
2.3 KiB
aliases | description | keywords | labels | title | weight | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
How to add a help component to query editors in Grafana. |
|
|
Add query editor help | 500 |
Add query editor help
Query editors support the addition of a help component to display examples of potential queries. When the user clicks on one of the examples, the query editor is automatically updated. This helps the user to make faster queries.
-
In the
src
directory of your plugin, create a fileQueryEditorHelp.tsx
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
QueryEditorHelp
:import QueryEditorHelp from './QueryEditorHelp';
export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource) .setConfigEditor(ConfigEditor) .setQueryEditor(QueryEditor) .setQueryEditorHelp(QueryEditorHelp);
-
Create a few examples of potential queries:
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> ); };