添加匿名使用情况报告

向您的插件添加匿名使用情况跟踪，以发送 报告事件，这些事件描述了您的插件如何被用于由 Grafana 服务器管理员配置的跟踪系统。

事件报告

在本节中，我们将展示一个从查询编辑器跟踪使用数据并从分析服务接收报告的示例。

示例查询编辑器

假设您有一个与以下示例相似的 QueryEditor。它有一个 CodeEditor 字段，您可以在其中编写查询，以及一个查询类型选择器，以便您可以选择要返回的查询结果类型。

import React, { ReactElement } from 'react';
import { InlineFieldRow, InlineField, Select, CodeEditor } from '@grafana/ui';
import type { EditorProps } from './types';

export function QueryEditor(props: EditorProps): ReactElement {
  const { datasource, query, onChange, onRunQuery } = props;
  const queryType = { value: query.value ?? 'timeseries' };
  const queryTypes = [
    {
      label: 'Timeseries',
      value: 'timeseries',
    },
    {
      label: 'Table',
      value: 'table',
    },
  ];

  const onChangeQueryType = (type: string) => {
    onChange({
      ...query,
      queryType: type,
    });
    runQuery();
  };

  const onChangeRawQuery = (rawQuery: string) => {
    onChange({
      ...query,
      rawQuery: type,
    });
    runQuery();
  };

  return (
    <>
      <div>
        <CodeEditor
          height="200px"
          showLineNumbers={true}
          language="sql"
          onBlur={onChangeRawQuery}
          value={query.rawQuery}
        />
      </div>
      <InlineFieldRow>
        <InlineField label="Query type" grow>
          <Select options={queryTypes} onChange={onChangeQueryType} value={queryType} />
        </InlineField>
      </InlineFieldRow>
    </>
  );
}

使用 usePluginInteractionReporter 跟踪使用情况

假设您想跟踪时间序列查询和表格查询之间的使用情况。

您需要做的是添加 usePluginInteractionReporter 来获取一个报告函数，该函数接收两个参数。

• 必填：一个以 grafana_plugin_ 开头的事件名称。它用于标识正在进行的交互。
• 可选：附加的上下文数据。在我们的示例中，即查询类型。

import React, { ReactElement } from 'react';
import { InlineFieldRow, InlineField, Select, CodeEditor } from '@grafana/ui';
import { usePluginInteractionReporter } from '@grafana/runtime';
import type { EditorProps } from './types';

export function QueryEditor(props: EditorProps): ReactElement {
  const { datasource, query, onChange, onRunQuery } = props;

  const report = usePluginInteractionReporter(); //  get the report function

  const queryType = { value: query.value ?? 'timeseries' };
  const queryTypes = [
    {
      label: 'Timeseries',
      value: 'timeseries',
    },
    {
      label: 'Table',
      value: 'table',
    },
  ];

  const onChangeQueryType = (type: string) => {
    onChange({
      ...query,
      queryType: type,
    });
    runQuery();
  };

  const onChangeRawQuery = (rawQuery: string) => {
    onChange({
      ...query,
      rawQuery: type,
    });

    //  send this report with two arguments
    report('grafana_plugin_executed_query', {
      query_type: queryType.value,
    });

    runQuery();
  };

  return (
    <>
      <div>
        <CodeEditor
          height="200px"
          showLineNumbers={true}
          language="sql"
          onBlur={onChangeRawQuery}
          value={query.rawQuery}
        />
      </div>
      <InlineFieldRow>
        <InlineField label="Query type" grow>
          <Select options={queryTypes} onChange={onChangeQueryType} value={queryType} />
        </InlineField>
      </InlineFieldRow>
    </>
  );
}

从分析服务返回的数据

当您使用 usePluginInteractionReporter 时，传递给您的报告函数会自动将有关您正在跟踪的插件的上下文数据附加到事件中。

在我们的示例中，以下信息将发送到由 Grafana 服务器管理员配置的分析服务。

{
  type: 'interaction',
  payload: {
    interactionName: 'grafana_plugin_executed_query',
    grafana_version: '9.2.1',
    plugin_type: 'datasource',
    plugin_version: '1.0.0',
    plugin_id: 'grafana-example-datasource',
    plugin_name: 'Example',
    datasource_uid: 'qeSI8VV7z', // will only be added for datasources
    query_type: 'timeseries'
  }
}