跳转到主要内容

简介

用户在浏览 Grafana 时的上下文可能会发生巨大变化，有时他们的面包屑与他们的历史记录不匹配。在这种情况下，用户不能轻易地返回，可能会对他们的体验感到沮丧。本指南定义了“上下文”并展示了您如何通过最小编码将“返回到上一个”功能添加到您的插件中，以解决这个问题。

Grafana 中的上下文​

在 Grafana 插件开发的范围内，术语“上下文”指的是用户从一个根 URL 到另一个根 URL 的路径上的位置。请注意，在 Grafana 中，这个术语还可能与其他 Grafana 功能（如 Explore 或 Dashboards）相关联。

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

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

  • 您是否从 主页 > 仪表板 > 播放列表 > 编辑播放列表 跳转到 主页 > 仪表板 > 报告 > 设置？那么您现在所在的上下文与之前相同。

如您所见，关键在于URL从根级别的变化。因为“探索”和“仪表板”都在根级别，用户的上下文发生了变化。但是，用户路径到“报告设置”并非如此。

添加功能以允许用户返回到他们之前的状态​

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

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

  • 指定要在按钮中显示的标题。
  • （可选）传递第二个参数以设置不同的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. 验证它是否按预期工作。当您通过该交互元素从您的应用程序插件转到Grafana的另一个区域时，应出现“返回上一页”按钮。

使用指南​

这样做​

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

不要这样做​

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