Grafana文档 开发人员 插件开发人员指南 创建一个插件 扩展插件 添加查询编辑器帮助

添加查询编辑器帮助

查询编辑器支持的帮助组件来显示潜在的查询的例子。当用户单击其中一个例子,查询编辑器自动更新。这可以帮助用户更快的查询。

1. 在src你的插件的目录,创建一个文件QueryEditorHelp.tsx用下面的内容:

   从“反应”进口的反应;从‘@grafana /数据导入{QueryEditorHelpProps};出口违约(道具:QueryEditorHelpProps) = > {< h2 >返回我的备忘单< / h2 >;};

2. 配置插件使用QueryEditorHelp:

   从“进口QueryEditorHelp。/ QueryEditorHelp ';

   出口const插件= new DataSourcePlugin <数据源、MyQuery MyDataSourceOptions >(数据源).setConfigEditor (ConfigEditor) .setQueryEditor (QueryEditor) .setQueryEditorHelp (QueryEditorHelp);

3. 创建一个潜在的一些例子查询:

   从“反应”进口的反应;进口{QueryEditorHelpProps, DataQuery}“@grafana /数据”;const例子=[{标题:“加法”,表情:“1 + 2”,标签:添加两个整数,},{标题:“减法”,表情:“2 - 1”标签:减去一个整数从另一个,},);出口违约(道具:QueryEditorHelpProps) = >{返回(< div > < h2 >小抄< / h2 >{例子。地图((项目、索引)= > (< div className =“cheat-sheet-item”键={指数}> < div className = " cheat-sheet-item__title " >{项目。标题}< / div >{项目。表达吗?(< div className = " cheat-sheet-item__example " onClick = {(e) = >道具。onClickExample ({queryText refId: A:项目。表达}DataQuery)} > <代码>{项目。表达}< /代码> < / div >):零}< div className = " cheat-sheet-item__label " >{项目。div标签}< / > < / div >)} < / div >);};