跳至主要内容

订阅 Grafana 事件

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

提示

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

访问事件总线​

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

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

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

订阅 Grafana 应用程序事件​

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

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

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

以下是一些您可以订阅的其他事件

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

您可以访问从面板属性中获得的事件总线，并使用 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';
}

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