为 Explore 查询添加功能

Explore 允许用户无需看板即可进行临时查询。这对于需要排查问题或详细了解数据时非常有用。

您的数据源默认支持 Explore，并使用数据源现有的查询编辑器。本指南解释了如何扩展数据源插件中 Explore 查询的功能。

添加 Explore 特定的查询编辑器

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

在插件的 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>;
};

修改 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 = createDataFrame({
    fields: [...],
    meta: {
        preferredVisualisationType: 'logs',
    },
});

有关可能的选项，请参阅 PreferredVisualisationType。

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

选择首选的可视化类型​

添加 Explore 特定的查询编辑器

选择首选的可视化类型