Files
Jack Baldry 7eb17bccca Explicitly set all front matter labels in the source files (#71548)
* 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>
2023-07-18 09:10:12 +01:00

2.3 KiB

aliases description keywords labels title weight
../../../plugins/add-query-editor-help/
How to add a help component to query editors in Grafana.
grafana
plugins
plugin
queries
query editor
query editor help
products
enterprise
oss
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.

  1. In the src directory of your plugin, create a file QueryEditorHelp.tsx with the following content:

    import React from 'react';
    import { QueryEditorHelpProps } from '@grafana/data';
    
    export default (props: QueryEditorHelpProps) => {
      return <h2>My cheat sheet</h2>;
    };
    
  2. 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);
    
  3. 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>
      );
    };