为 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 特定的查询编辑器

选择首选的可视化类型