跳转到主要内容

订阅 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';
}

以下是您可以订阅的几个其他事件

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

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

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

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