跳到主内容

订阅 Grafana 事件

如果您正在构建面板插件，在某些情况下，您可能希望您的插件对插件外部发生的更改做出反应。例如，您可能希望您的插件在用户放大或缩小另一个面板时做出反应。本指南将教您如何使您的插件对 Grafana 中的事件做出反应。

提示

有关制作您自己的面板插件的分步指南，请参阅我们的面板插件教程。

访问事件总线​

用于订阅 Grafana 事件的事件总线位于 PanelProps 接口中。此接口公开有关面板的运行时信息，例如面板的尺寸和时间测量。有关属性定义，请参阅代码注释。

您可以通过插件的 `props` 参数访问事件总线和其他面板属性。例如

src/components/SimplePanel.tsx
export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {

订阅 Grafana 应用事件​

Grafana 使用事件总线发布应用事件，以便在用户执行某个操作时通知 Grafana 的不同部分。您的插件可以通过订阅一个或多个事件来对这些操作做出反应。

事件通过唯一的字符串标识；此外，它们还可以有一个可选的有效载荷（payload）。在以下示例中，`ZoomOutEvent` 由 `zoom-out` 字符串标识，并带有一个数字作为有效载荷。

class ZoomOutEvent extends BusEventWithPayload<number> {
  static type = 'zoom-out';
}

您还可以订阅以下一些事件

  • `RefreshEvent` 来自 `@grafana/runtime`
  • `DataHoverEvent` 来自 `@grafana/data`

您可以访问面板属性中提供的事件总线，并使用 `getStream()` 方法订阅特定类型的事件。传递给 `subscribe` 方法的回调函数将在每个新事件发生时被调用，如下例所示

import React, { useEffect } from 'react';
import { RefreshEvent } from '@grafana/runtime';

// ...

interface Props extends PanelProps<MyOptions> {}

export const MyPanel: React.FC<Props> = ({ eventBus }) => {
  useEffect(() => {
    const subscriber = eventBus.getStream(RefreshEvent).subscribe((event) => {
      console.log(`Received event: ${event.type}`);
    });

    return () => {
      subscriber.unsubscribe();
    };
  }, [eventBus]);

  return <div>Event bus example</div>;
};
重要

请记住在您的订阅者上调用 `unsubscribe()` 方法，以避免内存泄漏。

支持哪些事件？​

虽然目前没有支持事件的官方文档，但您可以根据它们在其他插件中的使用情况以及它们提供的功能来推断事件。

请注意，虽然有许多事件类型可用但尚未导出，例如 `PanelEditEnteredEvent`，您仍然可以通过自己重新实现事件类型来订阅它们

class MyPanelEditEnteredEvent extends BusEventWithPayload<number> {
  static type = 'panel-edit-started';
}

我们将来会改进事件总线并添加更多事件。请在我们的社区论坛上告诉我们您如何使用事件总线，以及您认为对您的插件有用的任何事件！