跳到主要内容

简介

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

Grafana 中的上下文​

对于 Grafana 插件开发而言，“上下文”一词指的是用户从一个根 URL 到另一个根 URL 的路径上的位置。请注意，在 Grafana 中，此术语也可能与其他 Grafana 功能（如 Explore 或 Dashboards）关联使用。

使用面包屑导航来留意用户上下文的变化。例如

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

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

正如您所见，关键在于 URL 从根级别的变化。由于 Explore 和 Dashboards 都处于根级别，因此用户的上下文发生了变化。但这对于用户通往报告设置的路径而言并非如此。

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

  1. 选择一个交互元素，例如链接或按钮，以触发 ReturnToPrevious 功能。这个元素是将用户引导到 Grafana 中另一个上下文的元素。例如，告警规则的 前往仪表盘 按钮。

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

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

例如

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. 验证其是否按预期工作。当您通过该交互元素从您的 app 插件转到 Grafana 的另一个区域时，“返回上一个”按钮应该会出现。

使用指南​

这样做​

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

不要这样做​

  • 请勿通过链接或按钮以外的元素触发“ReturnToPrevious”功能。
  • 请勿在同一上下文中的页面之间跳转时使用此功能。
  • 请勿使用“返回上一页”等文本。请具体说明。