添加查询编辑器帮助

查询编辑器支持添加帮助组件以显示潜在查询的示例。当用户点击其中一个示例时，查询编辑器会自动更新。这有助于用户更快地进行查询。

1. 在插件的 src 目录中，创建一个名为 QueryEditorHelp.tsx 的文件，内容如下

   import React from 'react';
   import { QueryEditorHelpProps } from '@grafana/data';
   
   export default (props: QueryEditorHelpProps) => {
     return <h2>My cheat sheet</h2>;
   };

2. 配置插件以使用 QueryEditorHelp

   import QueryEditorHelp from './QueryEditorHelp';

   export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
     .setConfigEditor(ConfigEditor)
     .setQueryEditor(QueryEditor)
     .setQueryEditorHelp(QueryEditorHelp);

3. 创建一些潜在查询的示例

   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>
     );
   };