← 文章 / 未分类
signoz 1小时前 · 2026-09-17 14:18:48 · 1 阅读

文本面板类型 - 在仪表板中添加 Markdown 注释

Text 面板会在仪表盘上直接渲染你编写的 Markdown 内容。它不执行任何查询,因此没有查询构建器,没有数据信号选择,不依赖仪表盘的时间范围,也不需要加载数据。它只显示你撰写的正文内容。

请将其用于仪表盘中解释图表而非绘制图表的部分:

  • 章节标题,说明下方面板的含义。
  • 放置在适用面板旁的 Runbook 或值班处理步骤(例如“如果 p99 > 2s,则执行此操作”)。
  • 指向服务代码仓库、RCA 文档、Slack 频道或其他仪表盘的链接。
  • 事故期间值班工程师勾选的清单。勾选状态会保存在仪表盘中,详见 任务清单
  • 所有权和“最后审查”备注,或关于数据的注意事项。
一个使用三个 Text 面板的仪表盘:一个隐藏标题的透明章节标题、一个带背景色的 Runbook、以及一个勾选了两个框的事故清单
同一个仪表盘上的三个 Text 面板:一个透明章节标题、一个带背景色的 Runbook、以及一个事故清单。
Info

Text 面板仅在新的仪表盘体验中可用。旧版架构的仪表盘没有对应的面板类型。

添加 Text 面板

  1. 在仪表盘上,点击 新建面板 并选择 Text
  2. 在编辑器中编写 Markdown。上方的预览会随着输入实时更新,因此无需 运行 步骤。
  3. 在右侧配置窗格中设置标题、对齐方式、背景色和标题选项。
  4. 点击 保存更改
新建面板对话框中高亮显示的 Text 面板类型
在新建面板对话框中选择 Text。

你也可以在配置窗格的 可视化 → 面板类型 中,将现有面板切换为 Text(也可以切回),操作方式与其他面板类型相同。

Markdown 编辑器

文本面板编辑器,上方为渲染预览,下方为 Markdown 源代码,右侧为配置面板
预览位于 Markdown 源代码上方。拖动两者之间的分隔条,可为任意一侧腾出更多空间。

工具栏包含 标题粗体斜体无序列表有序列表链接代码表格 按钮。每个按钮会对当前选中的文本进行包裹或插入相应元素。

状态栏显示光标位置和字符计数。由于 Markdown 以内联形式存储在仪表盘 JSON 中,编辑器会对正文执行 16,000 字符的限制计数。

Tab 键会将焦点移出编辑器,而不是执行缩进,从而确保键盘用户可以顺利导航面板编辑器。

Markdown 语法帮助

点击 插入变量 旁边的 ? 按钮,可打开支持语法的速查表。

速查表的第一项是作者最容易出错的点:连续两行会被合并为一个段落。若需开始新段落,请留空一行;若要强制换行,需在行末添加两个空格。

支持的 Markdown 功能

该面板支持 CommonMark 以及 GitHub 风格 Markdown(GFM)。

功能备注
标题,从 #######
粗体、斜体、删除线
无序列表和有序列表
任务列表 - [ ]- [x]在仪表盘上可点击,参见 任务列表
链接 [label](url)通过 noopener noreferrer nofollow 在新标签页中打开
图片使用标准的 ! + [alt] + (url) 图片语法
行内代码和围栏代码块支持语法高亮,并提供复制按钮
引用块
表格宽表格会在自身边框内滚动,而不会撑宽面板
水平分割线

围栏代码块支持对 bashshshell)、cssdiffdockerdockerfile)、gojavajavascriptjs)、jsonmarkuphtmlxml)、pythonpy)、rustsqltypescriptts)和 yamlyml) 进行语法高亮。如果围栏未指定语言,或面板无法识别该语言,则按普通等宽文本渲染,不会报错。

每个围栏代码块都带有一个复制按钮,悬停在代码块上时会出现。

A fenced bash code block inside a Text panel with the copy button visible at its right edge
悬停在代码块上即可显示复制按钮。
原始 HTML 不会被渲染

面板会将原始 HTML 按字面文本显示。写入 <br><img src="..."> 只会原样输出这些标签,而不会生效。这是有意为之:Text 面板的内容可能会在公开分享的仪表盘上被匿名阅读,因此不存在注入 HTML 的途径。请改用 Markdown 语法,图片可以使用标准图片语法。

仪表盘变量

变量会在渲染前替换到正文中,因此 Text 面板可以写"Runbook for $service in $environment",并随仪表盘当前选择动态变化。

The Insert variable menu listing $service and $environment, each tagged with its variable type
Insert variable 菜单会列出仪表盘的变量及其类型,当仪表盘没有变量时该项不可用。

四种变量语法均可使用:$name{{name}}{{.name}}[[name]]。其中 $name 是标准写法,Insert variable 菜单写入的也是这种格式。

一些值得了解的细节:

  • $name 匹配带点号的分层名称,例如 $service.name。如果末尾带点号,会被视为普通文本的一部分,因此 $service. 会先渲染变量值,再跟一个句号。
  • $__ 开头的宏(如 $__step_interval)不会被替换。
  • 多值变量会用 , 拼接各个取值。
  • 未定义的变量保留原样,与查询语句的行为一致。
  • 替换后的值仅作为 Markdown 正文内容,不会解析为格式标记。因此来自遥测数据(telemetry)的值无法注入格式或链接。

Text 面板会纳入仪表盘的“变量使用”视图,删除或重命名变量时,引用该变量的 Text 面板会被标记出来。

仪表盘上的行为

任务列表

任务列表的复选框在仪表盘页面和面板的 View 弹窗中都可以点击。勾选后会重写并保存 Markdown 到仪表盘,立即生效;若保存失败会自动回滚并报错。

Info

勾选状态是共享的,不按查看者区分。两个人看同一个清单,能看到彼此的勾选。只有具备仪表盘编辑权限的用户才能勾选,其他人(包括公开分享链接的查看者)只能只读。

面板操作

The Text panel actions menu showing View, Edit panel, Clone, and Delete panel
The actions available on a Text panel.

不提供 Download(CSV、PNG、SVG)、Create alert、Search、Drilldown 操作,因为这些功能在数据驱动场景下才有意义,而 Text 面板没有底层数据,且正文本身已是可读形式。

其他细节

  • 当正文高度超出面板时,底部会出现“Scroll for more”提示。
  • 正文为空时显示:“Nothing written yet. Add Markdown to this panel to show content.”(尚未输入内容,可添加 Markdown 以显示正文)。
  • Markdown 语法错误不会导致报错,而是按纯文本原样渲染。

面板选项

Text 面板只保留无数据语境下仍有意义的选项,不包含 thresholds(阈值)、legend(图例)、axes(坐标轴)、units(单位)、decimals(小数位数)和 context links(上下文链接)等设置。

Text panel configuration pane showing Title, Description, Hide header, Visualization, and Panel appearance with alignment controls and the background swatch row
Text 面板的配置面板。

面板详情

  • 标题描述,与其他面板相同。
  • 隐藏头部 会移除标题栏。隐藏后,拖动手柄和菜单会在悬停时出现。搭配透明背景,可制作纯标题的分节效果。

可视化

  • 面板类型 可切换此面板为其他类型。

面板外观

  • 水平对齐(默认)、
  • 垂直对齐(默认)、
  • 背景:一排背景色板。
    • 透明 移除卡片、边框和标题栏,让文字直接显示在仪表板上,适合做章节标题。
    • 默认面板 使用标准面板背景。
    • 八种预设色:Robin、Purple、Sakura、Cherry、Amber、Forest、Sienna、Slate。每种预设包含表面色和文字色,分别针对亮色和暗色模式定义,所有配色均满足 4.5:1 对比度标准。在暗色模式下保存的面板,切换到亮色模式时会自动使用对应预设的亮色配色,无需重新保存。
    • 自定义 支持任意十六进制颜色(#rgb#rgba#rrggbb#rrggbbaa)。文字颜色会根据所选背景色自动选取以保证对比度。

JSON 参考

面板插件类型为 signoz/TextPanel

Copy
{
  "kind": "signoz/TextPanel",
  "spec": {
    "mode": "markdown",
    "text": "## Checkout runbook\n\nOwner: @payments\n\n- [ ] Check $service error rate\n- [ ] Page the on-call",
    "presentation": {
      "textAlign": "left",
      "vertical
原始来源: signoz

评论 (0)