为探索查询添加功能

探索允许用户在不使用仪表板的情况下进行即兴查询。这在他们想要调试或了解更多数据时非常有用。

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

添加特定的探索查询编辑器

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

在您的插件的 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 以渲染特定的探索查询编辑器。例如

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

选择首选的可视化类型

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

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

构建包含特定元数据的数据帧，如下所示

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

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

添加特定的探索查询编辑器​

选择首选的可视化类型​

添加特定的探索查询编辑器

选择首选的可视化类型