跳至主要内容

简介

用户在浏览 Grafana 时，其上下文可能会发生巨大变化，有时它们的导航路径与历史记录不匹配。在这些情况下，用户无法轻松返回，并可能对他们的体验感到沮丧。本指南定义了上下文，并展示了如何将ReturnToPrevious功能添加到你的插件中，以通过最少的代码解决此问题。

Grafana 中的上下文​

在 Grafana 插件开发中，上下文指的是用户从一个根 URL 到另一个根 URL 的路径上的位置。请注意，在 Grafana 中，此术语也可能用于连接其他 Grafana 功能，例如探索或仪表板。

使用导航路径来注意到用户上下文的变化。例如

  • 你是否从主页 > 仪表板转到了主页 > 探索？那么你改变了所在的上下文。

  • 你是否从主页 > 仪表板 > 播放列表 > 编辑播放列表转到了主页 > 仪表板 > 报告 > 设置？那么你仍然处于与之前相同的上下文。

如你所见，关键是 URL 从根级别开始的更改。由于探索和仪表板都处于根级别，因此用户的上下文发生了变化。但是，用户到报告设置的路径并非如此。

添加功能以允许用户返回其之前的上下文​

  1. 选择一个交互式项目，例如链接或按钮，以触发ReturnToPrevious功能。此元素将引导用户进入 Grafana 中的另一个上下文。例如，警报规则的“转到仪表板”按钮。

  2. 要设置所需的值，可以使用@grafana/runtime 中的useReturnToPrevious 钩子

  • 指定要在按钮中显示的title。
  • （可选）传递第二个参数以设置href（如果它与当前 URL 不同）。

例如

import { config, useReturnToPrevious } from '@grafana/runtime';

const setReturnToPrevious = useReturnToPrevious();

[...]

<LinkButton
size="sm"
       key="dashboard"
       variant="primary"
       icon="apps"
       href={`d/${encodeURIComponent(dashboardUID)}`}
       onClick={() => {
       	setReturnToPrevious(rule.name);
       }}
>
      	Go to dashboard
</LinkButton>
  1. 验证它是否按预期工作。当你在通过该交互式元素从你的应用程序插件转到 Grafana 的另一个区域时，应出现“返回上一步”按钮。

使用指南​

这样做​

  • 通过具有onClick 事件的链接或交互式元素来触发“ReturnToPrevious”功能。
  • 仅在用户被发送到另一个上下文时才使用“ReturnToPrevious”功能，例如从警报到仪表板。
  • 指定一个按钮标题，该标题以最容易理解的方式标识要返回的页面。

不要这样做​

  • 不要通过链接或按钮以外的元素触发“ReturnToPrevious”功能。
  • 在同一个上下文中从一个页面转到另一个页面时，不要使用此功能。
  • 不要使用诸如“返回上一页”之类的文本。请具体说明。