如何将Grafana Dashboard嵌入ReactJS应用

1 无额外依赖的通用嵌入方式 #

最常用且最稳定的方案是直接使用Grafana原生支持的iframe嵌入能力，无需引入额外第三方库：

• 打开你需要嵌入的Grafana dashboard，点击顶部分享按钮，选择「嵌入」tab即可自动生成iframe代码
• 直接将生成的iframe代码复制到React组件的返回模板中即可使用，可自行调整宽高、边框等样式属性
• 嵌入前需要先修改Grafana服务端配置，开启嵌入权限并配置跨域白名单，避免浏览器拦截

2 关于@grafana/ui库的说明 #

你调研的@grafana/ui是Grafana官方面向插件开发场景推出的UI组件库，仅提供Grafana设计体系下的零散基础组件（如图表、按钮、表单控件等），不支持直接渲染完整的Grafana dashboard，这也是你找不到对应使用文档的原因。
如果需要完全自定义dashboard的交互逻辑，不想用iframe嵌入，可以搭配@grafana/data、@grafana/runtime库使用，自行对接Grafana数据源API拉取数据、解析面板配置后，用@grafana/ui的图表组件自行渲染，但该方案开发成本较高，普通嵌入场景不推荐。

3 第三方封装库可选方案 #

如果需要更灵活的嵌入能力，比如免配置自适应高度、动态传参、加载状态处理等，可以选用已封装好的React组件库：

• 轻量封装类库：内部基于iframe实现，额外封装了常用的交互逻辑，无需自行处理兼容问题
• 官方嵌入式SDK：针对Grafana Cloud用户提供的官方SDK，封装了私有看板的免登校验、权限控制能力，适合企业级私有嵌入场景

4 快速实现示例 #

// React 嵌入Grafana看板基础示例
const GrafanaDashboard = () => {
  // 嵌入链接可通过Grafana分享功能生成，支持添加参数默认过滤时间、变量等
  const dashboardUrl = "你的Grafana看板嵌入链接"

  return (
    <iframe
      src={dashboardUrl}
      width="100%"
      height="800px"
      frameBorder="0"
      title="Grafana Dashboard"
    />
  )
}

嵌入前的Grafana服务端配置注意项：

• 开启嵌入权限：security.allow_embedding = true
• 配置跨域白名单：security.allowed_origins = "你的React应用域名"，测试环境可临时设为*
• 如需免登录访问公开看板，可开启匿名访问配置：auth.anonymous.enabled = true，并绑定只读角色

内容的提问来源于stack exchange，提问作者FEDeveloper