为 Explore 查询添加功能

Explore 允许用户进行临时查询，无需使用仪表盘。 当用户想要进行故障排除或了解有关数据的更多信息时，这很有用。

您的数据源默认情况下支持 Explore，并使用数据源的现有查询编辑器。 本指南介绍如何在数据源插件中扩展 Explore 查询的功能。

添加特定于 Explore 的查询编辑器

要扩展数据源的 Explore 功能，请定义一个特定于 Explore 的查询编辑器。

1. 在插件的 src 目录中创建一个名为 ExploreQueryEditor.tsx 的文件，其内容类似于以下内容

   src/ExploreQueryEditor.tsx

   import React from 'react';
   
   import { QueryEditorProps } from '@grafana/data';
   import { QueryField } from '@grafana/ui';
   import { DataSource } from './DataSource';
   import { MyQuery, MyDataSourceOptions } from './types';
   
   type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
   
   export default (props: Props) => {
     return <h2>My Explore-specific query editor</h2>;
   };

2. 修改您在 QueryEditor.tsx 中的基本查询编辑器以呈现特定于 Explore 的查询编辑器。 例如

   src/QueryEditor.tsx

   // [...]
   import { CoreApp } from '@grafana/data';
   import ExploreQueryEditor from './ExploreQueryEditor';
   
   type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
   
   export default (props: Props) => {
     const { app } = props;
   
     switch (app) {
       case CoreApp.Explore:
         return <ExploreQueryEditor {...props} />;
       default:
         return <div>My base query editor</div>;
     }
   };

选择首选的可视化类型

默认情况下，Explore 应该为您的数据选择一个适当且有用的可视化。 它可以找出返回的数据是时间序列数据、日志还是其他内容，并创建正确的可视化类型。

但是，如果您想要自定义可视化，可以通过将 meta 属性设置为 preferredVisualisationType 来向返回的数据帧添加提示。

像这样构建具有特定元数据的数据帧

const firstResult = new MutableDataFrame({
    fields: [...],
    meta: {
        preferredVisualisationType: 'logs',
    },
});

有关可能选项的详细信息，请参阅 PreferredVisualisationType。