跳至主要内容

从前端数据源和应用插件获取数据

除了 JavaScript Fetch API 之外，Grafana 数据代理还用于从 Grafana 数据源插件或应用插件获取数据。

数据代理尤其有用

  • 用于克服跨站点 (CORS) 限制，或
  • 用于执行经过身份验证的请求，或
  • 用于将其他敏感数据从插件配置发送到 Grafana。

本指南解释了数据代理的工作原理并探讨了其使用中的常见问题。

它是如何工作的？​

您无需直接从浏览器向服务器发出请求，而是通过 Grafana 后端服务器发出请求，该服务器会处理请求并将响应返回给插件。

  • 无数据代理：请求直接从浏览器发送到第三方服务器。
  • 有数据代理：请求从浏览器发送到 Grafana 后端，然后发送到第三方服务器。在这种情况下，CORS 没有限制，并且您可以指示 Grafana 使用存储在插件配置中的敏感数据发送经过身份验证的请求。
注意

您只能在数据源和应用插件中使用数据代理。您不能在面板插件中使用数据代理。

如何在数据源插件中使用数据代理​

在数据源插件中使用数据代理最简单的方法是使用DataSourceHttpSettings组件。

步骤 1：在数据源插件配置页面中使用DataSourceHttpSettings组件​

src/ConfigEditor.tsx
import React from 'react';
import { DataSourceHttpSettings } from '@grafana/ui';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';

export function ConfigEditor(props: DataSourcePluginOptionsEditorProps) {
  const { onOptionsChange, options } = props;

  return (
    <DataSourceHttpSettings
      defaultUrl="https://jsonplaceholder.typicode.com/"
      dataSourceConfig={options}
      onChange={onOptionsChange}
    />
  );
}

DataSourceHttpSettings将显示一个表单，其中包含所有选项供用户配置 HTTP 端点，包括身份验证、TLS、cookie 和超时。

步骤 2：在数据源插件中使用数据代理​

用户在数据源配置页面中输入端点详细信息后，您可以查询数据源实例设置（DataSourceInstanceSettings.url）中传递的数据代理 URL。

src/dataSource.ts
import {
  DataQueryRequest,
  DataQueryResponse,
  DataSourceApi,
  DataSourceInstanceSettings,
  FieldType,
  PartialDataFrame,
} from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
import { lastValueFrom } from 'rxjs';

type TODO = {
  title: string;
  id: number;
};

export class DataSource extends DataSourceApi {
  baseUrl: string;
  constructor(instanceSettings: DataSourceInstanceSettings) {
    super(instanceSettings);
    // notice we are storing the URL from the instanceSettings
    this.baseUrl = instanceSettings.url!;
  }

  async query(options: DataQueryRequest): Promise<DataQueryResponse> {
    const response = getBackendSrv().fetch<TODO[]>({
      // You can see above that `this.baseUrl` is set in the constructor
      // in this example we assume the configured url is
      // https://jsonplaceholder.typicode.com
      /// if you inspect `this.baseUrl` you'll see the Grafana data proxy url
      url: `${this.baseUrl}/todos`,
    });
    // backendSrv fetch returns an observable object
    // we should unwrap with rxjs
    const responseData = await lastValueFrom(response);
    const todos = responseData.data;

    // we'll return the same todos for all queries in this example
    // in a real data source each target should fetch the data
    // as necessary.
    const data: PartialDataFrame[] = options.targets.map((target) => {
      return {
        refId: target.refId,
        fields: [
          { name: 'Id', type: FieldType.number, values: todos.map((todo) => todo.id) },
          { name: 'Title', type: FieldType.string, values: todos.map((todo) => todo.title) },
        ],
      };
    });

    return { data };
  }

  async testDatasource() {
    return {
      status: 'success',
      message: 'Success',
    };
  }
}

:: 注意 用户必须首先在配置页面中配置数据源，然后数据源才能通过数据源查询端点。如果未配置数据源，则数据代理将不知道要向哪个端点发送请求。:

如何在具有自定义配置页面的数据源插件中使用数据代理​

如果您不想使用DataSourceHttpSettings组件，而是创建自己的配置页面，则需要在插件中进行一些额外的设置。

步骤 1：在插件元数据中声明您的路由​

您首先需要在plugin.json元数据中设置路由。

src/plugin.json
"routes": [
	{
	  "path": "myRoutePath",
	  "url": "{{ .JsonData.apiUrl }}"
	}
],

请注意，url值包含jsonData.apiUrl的插值。您的配置页面必须负责根据用户输入在jsonData对象中设置apiUrl。

注意

每次修改plugin.json文件时，您都必须构建插件并重新启动 Grafana 服务器。

步骤 2：创建您的配置页面​

src/ConfigEditor.tsx
import React, { ChangeEvent } from 'react';
import { InlineField, Input } from '@grafana/ui';

export function ConfigEditor(props: Props) {
  const { onOptionsChange, options } = props;
  const { jsonData } = options;

  const onApiUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      jsonData: {
        ...jsonData,
        // notice we set the apiUrl value inside jsonData
        apiUrl: event.target.value,
      },
    });
  };

  return (
    <InlineField label="apiUrl" labelWidth={12}>
      <Input
        onChange={onApiUrlChange}
        value={jsonData.apiUrl || ''}
        placeholder="json field returned to frontend"
        width={40}
      />
    </InlineField>
    {/* The rest of your configuration page form */}
  );
}

步骤 3：从您的前端代码获取数据​

在您的数据源插件中，您现在可以使用代理 URL 获取数据。

请参阅前面的示例，因为代码相同。

在应用插件中使用数据代理​

在plugin.json元数据中设置路由的方式与数据源插件相同。但是，由于应用插件不会将 URL 作为 props 的一部分接收，因此 URL 的构造方式如下

const dataProxyUrl = `api/plugin-proxy/${PLUGIN_ID}/yourRoutePath`;

以下是在应用插件中从数据代理获取数据的函数示例

在src/plugin.json中声明路由。您也可以像在数据源插件中一样使用经过身份验证的请求和jsonData插值。

src/plugin.json
"routes": [
{
        "path": "myRoutePath",
        "url": "https://api.example.com",
        // jsonData interpolation is also possible
        //"url": "{{ .JsonData.apiUrl }}",
}]

在应用插件的代码中，您可以通过以下方式构造数据代理 URL 来使用数据代理获取数据

src/dataproxy-api-example.ts
import { getBackendSrv } from '@grafana/runtime';
import { lastValueFrom } from 'rxjs';

async function getDataFromApi() {
  const dataProxyUrl = `api/plugin-proxy/${PLUGIN_ID}/myRoutePath`;
  const response = getBackendSrv().fetch<TODO[]>({
    url: dataProxyUrl,
  });
  return await lastValueFrom(response);
}

使用其他 HTTP 方法（例如，POST、PUT、DELETE）与数据代理一起使用​

您可以在fetch方法中直接指定方法。您在src/plugin.json中的路由保持不变

const response = getBackendSrv().fetch<TODO[]>({
  url: `${this.baseUrl}`,
  method: 'POST',
  data: dataToSendViaPost,
});

使用数据代理向请求添加身份验证​

要了解如何向数据代理添加身份验证，请参阅我们的文档。

调试来自数据代理的请求​

如果您想调试从 Grafana 后端到您的 API 的请求，请在配置中启用数据代理日志记录。

您还必须在 Grafana 中启用调试日志才能在 Grafana 配置文件中查看数据代理日志。

示例

[log]
level = debug

[dataproxy]
logging = true

通过此配置，Grafana 服务器输出显示了从数据代理发送到您的 API 的请求。

使用数据代理发送特殊标头​

您可以使用数据代理发送特殊标头。要了解如何向数据代理添加标头，请参阅我们的文档。