Alertmanager Web UI 过滤机制实战指南Alerts 与 Silences 页面查询参数与标签匹配器全解析【免费下载链接】alertmanagerPrometheus Alertmanager项目地址: https://gitcode.com/GitHub_Trending/al/alertmanagerAlertmanager 的 Web UI 提供了对告警与静默silence的实时可视化与过滤能力。当前仓库中这套 UI 使用 Elm 语言重写ui/app/README.md它既支持在页面顶部的过滤栏中直接输入标签匹配器label matcher也支持通过 URL 查询参数Query String深度链接到特定视图。本文将完整讲解 alerts 页面与 silences 页面的全部过滤参数、标签匹配器语法与语义、URL 编码规则并结合仓库源码揭示过滤从地址栏到 API 请求的完整链路帮助你掌握可复制、可脚本化、可嵌入监控大盘的过滤用法。Alertmanager UI 概览Elm 重写版这套 UI 位于仓库的 ui/app 目录是 Alertmanager 官方 Web 界面的 Elm 语言重写版本。它的构建产物会被 Go 侧通过embed打包进二进制在 ui/web.go 中//go:embed app/dist将构建产物嵌入并分别以app/dist/elm与app/dist/mantine两个子目录对外提供。前端构建流程由 ui/app/Makefile 定义其中src/Data目标会根据api/v2/openapi.yaml用 openapi-generator 生成 Elm 的 API 数据类型代码再执行elm-format、elm-review、elm-test与npm run build完成整体构建。UI 的核心价值在于查询驱动页面状态完全由 URL 中的 hash 与查询字符串表达因此你可以把某个过滤后的视图直接作为书签、链接或嵌入到其他监控页面中。Alerts 页面过滤从默认视图到完整过滤默认只显示 active 告警在默认情况下alerts 页面只展示 active未静默的告警即那些正在触发的告警。这是 UI 的默认行为对应源码中showSilenced、showInhibited、showMuted默认取值为False而showActive默认取值为True见 ui/app/src/Utils/Filter.elm 与toUrl中boolToMaybeString的默认处理逻辑。额外显示已静默silenced的告警若需要在默认视图基础上同时显示已被静默的告警在 URL 后追加silencedtruehttp://alertmanager/#/alerts?silencedtrue只显示已静默的告警如果只想看被静默的告警隐藏 active 告警则同时将active置为falsehttp://alertmanager/#/alerts?silencedtrueactivefalse按接收者receiver过滤告警还可以按**接收者receiver**过滤。接收者定义在 Alertmanager 的 YAML 配置文件的receivers段中例如配置里定义了一个名为backend的路由接收者即可用http://alertmanager/#/alerts?receiverbackend该参数在 UI 中对应右上角的 ReceiverBar 下拉选择器其数据来自GET /api/v2/receivers见 ui/app/src/Alerts/Api.elm 的fetchReceivers。按标签匹配器label matchers过滤alerts 页面支持基于标签匹配器的过滤且可以直接在 UI 的过滤栏中输入、实时增删修改http://alertmanager/#/alerts?filter%7Bseverity%3D%22warning%22%2C%20owner%3D%22backend%22%7D上面 URL 中的%7B、%3D、%22、%2C、%20分别是{、、、,、空格 的 URL 编码解码后等价于{severitywarning, ownerbackend}多个过滤条件组合使用以上各类过滤参数可以任意组合例如同时查看 receiver 为 backend、已静默且标签匹配 ownerbackend 的告警http://alertmanager/#/alerts?silencedtruereceiverbackendfilter%7Bowner%3D%22backend%22%7DSilences 页面过滤silences静默页面同样支持基于标签匹配器的过滤且同样可以在 UI 中直接增删修改http://alertmanager/#/silences?filter%7Bseverity%3D%22warning%22%2C%20owner%3D%22backend%22%7D解码后等价于{severitywarning, ownerbackend}在源码层silences 页面的列表请求由 ui/app/src/Silences/Api.elm 的getSilences发起它会把Filter转成查询字符串拼接到apiUrl /silences上单个静默详情则通过GET /api/v2/silence/{uuid}获取。标签匹配器语法与语义与 Prometheus 查询语法保持一致UI 中的标签匹配器过滤遵循与 Prometheus 完全相同的语法和语义即 Prometheus 即时向量选择器instant vector selector中标签匹配的规则。一个格式正确的过滤器是由可接受的匹配操作符连接的若干标签匹配器组成集合并用花括号包裹{foobar, baz~quu.*}支持的四种操作符操作符含义典型用法精确相等匹配{envproduction}!不相等匹配{env!staging}~正则表达式匹配{app~web-.*}!~正则表达式不匹配{app!~web-.*}这四种操作符在源码中对应Utils.Filter.MatchOperator的四个构造子Eq / NotEq / RegexMatch / NotRegexMatch其字符串表示与顺序定义在 ui/app/src/Utils/Filter.elm 的matchers列表中~、!~、、!。正则匹配的注意事项使用~与!~时值部分为正则表达式会进行完整的正则匹配RE2 风格例如{baz~quu.*}匹配baz标签以quu开头的告警。需要转义正则元字符时请使用反斜杠例如匹配字面量点号{name~app\\.v1}。语法边界与保留字符从解析器实现看ui/app/src/Utils/Filter.elm过滤器解析使用严格语法匹配器之间以逗号,分隔整个集合必须包裹在花括号{ }中且不允许尾随逗号trailing Forbidden键名不能包含空白字符与语法保留字符{ } ! ~ , \ \见syntaxChars与isReservedChar字符串值必须使用双引号包裹内部支持反斜杠转义空集合{}会被解析为空匹配器列表代表不过滤。这些规则保证了 UI 输入的过滤器与后端Alertmanager 的 matcher 解析逻辑能够无损互通。源码级剖析过滤条件如何从 URL 变成 API 请求Filter 数据类型与 URL 序列化UI 中所有过滤状态统一封装在Utils.Filter.Filter类型中ui/app/src/Utils/Filter.elmtype alias Filter { text : Maybe String -- filter 参数标签匹配器文本 , group : Maybe String -- 分组字段 , customGrouping : Bool -- 是否自定义分组 , receiver : Maybe String -- receiver 参数 , showSilenced : Maybe Bool -- silenced 复选框 , showInhibited : Maybe Bool -- inhibited 复选框 , showMuted : Maybe Bool -- muted 复选框 , showActive : Maybe Bool -- active 复选框 }toUrl负责把Filter序列化为页面 URLsilenced、inhibited、muted默认输出false除非显式设置active默认输出truefilter、receiver、group仅在非空时输出且所有值都会经过percentEncode做 URL 编码ui/app/src/Utils/Filter.elm。转发给后端 API 的查询参数页面 URL 与 API 请求参数略有不同generateAPIQueryString会把filter文本解析成匹配器列表再逐条序列化为重复的filter参数每条一个filter...拼接到/api/v2/alerts、/api/v2/alerts/groups、/api/v2/silences等端点上见 ui/app/src/Utils/Filter.elm 与 ui/app/src/Alerts/Api.elm。UI 与 API 的地址拼接前端通过 ui/app/src/Utils/Api.elm 的makeApiUrl生成 API 基地址去掉外部 URL 末尾的/后追加/api/v2即所有列表接口都走 Alertmanager v2 API。这意味着你在 UI 上看到的过滤结果本质上是 v2 API 查询参数silenced、inhibited、muted、active、filter、receiver、group的可视化封装同样的参数也可以直接用于调用 HTTP API。状态切换的完整链路以 alerts 页面的复选框为例ui/app/src/Views/AlertList/Views.elm 渲染 Silenced / Inhibited / Muted 三个复选框点击后触发ToggleSilenced等消息ui/app/src/Views/AlertList/Updates.elm通过Navigation.pushUrl更新 URL 查询参数随后FetchAlerts依据最新的Filter选择调用fetchAlerts或fetchAlertGroups重新拉取数据——实现了地址栏即状态的单向数据流。UI 过滤栏操作技巧除了手写 URL你还可以在页面顶部的过滤栏FilterBar中直接操作输入框支持实时输入匹配器例如示例提示的envproduction定义于 ui/app/src/Views/FilterBar/Views.elm输入合法匹配器后回车或点击即可添加输入非法时会显示错误样式has-danger合法时显示成功样式has-success已添加的匹配器显示为按钮标签点击标签本体可回填到输入框继续编辑点击×可删除ui/app/src/Views/FilterBar/Views.elm支持退格键快捷删除输入框为空时按退格会依次删除前一个匹配器且按键抬起后需再次按下才能继续删除防止长按误删ui/app/src/Views/FilterBar/Types.elm 与 ui/app/src/Views/FilterBar/Updates.elm在 alerts 页面过滤栏还提供 Silence 快捷按钮可将当前匹配器一键带入新建静默表单ui/app/src/Views/FilterBar/Views.elm。常见问题与排查建议过滤无结果先确认 URL 编码是否正确。手写 URL 时务必对{、}、、,、空格、~等字符做百分号编码否则浏览器可能截断或篡改查询参数正则不生效检查是否使用了~/!~且值部分为正则表达式如果只是想精确匹配优先用忘记转义正则中若需匹配字面特殊字符用\转义键名不要包含空格或 { } ! ~ , \ 等保留字符与 API 参数互通同一套silenced、active、receiver、filter参数同样适用于 v2 HTTP API可以先用curl对/api/v2/alerts调试过滤逻辑再回填到 UI 链接中。通过组合以上参数与标签匹配器语法你可以把 Alertmanager UI 深度集成到日常值班、告警复盘与自动化巡检流程中——无论是把#/alerts?silencedtruereceiverbackendfilter{ownerbackend}这样的链接放入书签还是在脚本中直接构造 v2 API 查询本文介绍的规则都能保证你得到与 UI 完全一致的结果。【免费下载链接】alertmanagerPrometheus Alertmanager项目地址: https://gitcode.com/GitHub_Trending/al/alertmanager创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考