Coroot 自定义仪表盘实战指南从创建、PromQL 面板到 RBAC 权限管理【免费下载链接】corootCoroot is an open-source observability and APM tool with AI-powered Root Cause Analysis. It combines metrics, logs, traces, continuous profiling, and SLO-based alerting with predefined dashboards and inspections.项目地址: https://gitcode.com/GitHub_Trending/co/corootCoroot 作为开箱即用的可观测性平台内置了大量预定义巡检Inspections与仪表盘帮助你在零配置的情况下快速定位常见问题。但每个生产环境都是独特的当内置视图无法覆盖你的业务 KPI、第三方指标或应用专属性能指标时就需要通过自定义仪表盘把这些数据统一到同一个视图里让 Coroot 真正成为 single pane of glass统一可观测性门户。本文基于 docs/docs/dashboards/overview.md 展开结合仓库中的后端数据模型db/dashboards.go、面板查询实现api/views/dashboards/panel.go与前端表单front/src/views/dashboards/PanelForm.vue完整讲解如何创建仪表盘、添加与组织 PromQL 面板以及如何通过 RBAC 控制访问权限。读完本文你将能够独立搭建一套贴合自己环境的多面板可观测性仪表盘并理解其底层存储与查询机制。为什么要使用自定义仪表盘Coroot 的核心设计理念是 opinionated有主见的、开箱即用它预置了涵盖指标、日志、链路追踪、持续剖析与 SLO 告警的丰富视图绝大多数通用问题无需任何手工配置即可被识别和诊断。然而不同的团队、不同的业务场景总有超出内置范围的需求跟踪业务 KPI如订单量、转化率、支付成功率观察第三方服务指标如外部 API 的可用性监控应用专属性能指标如队列长度、任务积压、特定业务线程池状态。这些场景正是自定义仪表盘的用武之地。借助它你可以用 PromQL 表达任意关心的指标并按自己的组织习惯布局展示。关于如何在 Coroot 中采集自定义指标请参阅仓库中的自定义指标采集指南其中说明了如何把业务指标送入 Coroot 供仪表盘查询。创建仪表盘创建仪表盘的操作非常直观导航到Dashboards仪表盘页面点击Add dashboard添加仪表盘。填写仪表盘的Name名称可选填Description描述。点击Save保存。从后端实现看这个流程背后是一张独立的数据库表。在 db/dashboards.go 中仪表盘的迁移Migration定义如下CREATE TABLE IF NOT EXISTS dashboards ( project_id TEXT NOT NULL REFERENCES project(id), id TEXT NOT NULL, name TEXT NOT NULL, description TEXT NOT NULL DEFAULT , config TEXT NOT NULL DEFAULT {}, PRIMARY KEY (project_id, id) )几个值得注意的实现细节按项目隔离仪表盘以project_id作为外键并参与主键天然支持 Coroot 的多项目/多租户隔离不同项目之间的仪表盘互不可见。配置以 JSON 存储面板布局、分组、查询等全部序列化进config字段默认{}数据库层不做结构化展开schema 演进成本低。ID 自动生成CreateDashboard通过utils.NanoId(8)生成 8 位短 ID见 db/dashboards.go无需用户手动指定。对应的 HTTP API 位于 api/api.goPOST 请求携带DashboardForm其中Action字段区分create、update、delete其他情况则保存面板配置SaveDashboardConfig。表单校验要求Name非空见 api/forms/forms.go。添加与配置面板创建好仪表盘后就可以往里面添加面板了。:::info 面板类型说明 目前 Coroot 仅支持Time series chart时序图这一种面板类型查询语言为 PromQL。 :::添加面板的操作步骤在仪表盘编辑界面点击Add panel添加面板。填写面板的Name名称与可选的Description描述。选择或新建一个面板Group分组详见下文面板分组。在Query #1字段中输入 PromQL 表达式。可选地为该查询填写Legend图例你可以用{{ label_name }}的格式引用返回序列的标签值让图例更具可读性。如有需要点击添加更多 PromQL 查询Query #2、Query #3……同一面板可叠加多条查询曲线。点击Apply应用。拖动面板右下角调整大小拖动右上角移动位置。点击Save保存仪表盘。Legend 插值的底层实现{{ label_name }}的插值并非前端魔法而是由后端面板查询逻辑完成的。在 api/views/dashboards/panel.go 中每条查询返回的序列都会经过如下处理name : q.Legend if name ! { for k, v : range mv.Labels { if r, _ : regexp.Compile(fmt.Sprintf({{\s*%s\s*}}, k)); r ! nil { name r.ReplaceAllString(name, v) } } } if name { name mv.Labels.String() } if name { name q.Query }即图例名称依次按Legend 模板 → 标签集合 → 原始 PromQL的优先级回退。正则{{\s*%s\s*}}容忍模板内多余的空格如{{ pod }}也能匹配并用对应 label 的值替换模板。面板的可视化选项前端面板表单front/src/views/dashboards/PanelForm.vue除查询外还暴露了两个展示选项Stack series堆叠勾选后序列在图上堆叠显示适合展示各组成部分占总量比例的指标如按 namespace 拆分的 CPU 用量。Display显示方式目前支持line折线默认与bar柱状两种展示形态。这些选项在后端对应DashboardPanelWidget.Chart结构db/dashboards.go。在 panel.go 中chart.Stacked会调用res.Chart.Stacked()生成堆叠图chart.Display bar则调用res.Chart.Column()切换为柱状图随后AddSeries把序列写入图表上下文。面板的数据源与时间范围数据源Data Source每个查询可以指定要查询的集群/数据源当 Coroot 只配置了一个数据源且查询未显式指定时后端会自动填充见 panel.go因此单集群环境通常无需手动选择。时间范围面板数据由/projects/{project}/dashboards/panels/{panel}端点提供查询时带上from/to/incident/alert等时间上下文参数见 api/api.go并调用QueryRange对 Prometheus/ClickHouse 数据源执行区间查询。时间步长还会根据区间大小自动放大increaseStepForBigDurations避免大时间窗下返回过多数据点。面板分组Panel Groups面板分组DashboardPanelGroup让你把相关的面板归到同一个标题下例如资源用量数据库指标业务指标等让大仪表盘保持整洁、便于聚焦。分组提供了三个实用能力默认折叠Collapse可以在编辑时设置分组默认折叠减少视觉噪音这对面板数量很多的仪表盘尤其有用。排序Reorder通过↑和↓按钮轻松调整分组顺序。移动面板Move面板可以在不同分组之间自由移动随时调整归属。从源码看折叠状态是双保险的后端持久化DashboardPanelGroup结构体包含Collapsed bool字段db/dashboards.go随configJSON 一起持久化即默认折叠是仪表盘配置的一部分前端会话记忆front/src/components/Dashboard.vue 会把用户本次会话中手动折叠的分组标题存入localStoragekey 为collapsed-groups:dashboard-name点击分组标题即可切换展开/折叠刷新页面后仍能保持用户个人偏好。仪表盘权限Dashboard PermissionsCoroot 的仪表盘遵循基于角色的访问控制RBAC不同版本的能力边界不同社区版Community edition只有Admins管理员和Editors编辑者可以创建或编辑仪表盘Viewers只读用户可以查看所有仪表盘但只能以只读方式访问。企业版Enterprise edition提供更细粒度的权限控制可以精确到谁能查看/编辑某个具体仪表盘便于跨团队、跨环境管理访问范围。这条规则在后端是硬校验而非仅靠前端隐藏按钮在 api/api.go 中任何配置仪表盘的请求都会先执行权限检查——if !api.IsAllowed(u, rbac.Actions.Project(string(project.Id)).Dashboards().Edit()) { http.Error(w, You are not allowed to configure dashboards., http.StatusForbidden) return }未授权用户会收到403 Forbidden。RBAC 动作定义见 rbac/actions.goDashboards()返回项目级编辑动作ScopeDashboards而企业版所需的细粒度能力对应Dashboard(name)动作集——即按具体仪表盘名称授权查看/编辑。这与 docs/docs/configuration/rbac.md 中描述的角色体系一脉相承。底层数据模型一览为了让你对自定义仪表盘有完整的认知这里汇总后端 db/dashboards.go 中定义的配置结构即config字段的 JSON 形态结构字段说明DashboardConfigGroups面板分组列表DashboardPanelGroupName/Panels/Collapsed分组名、面板列表、是否默认折叠DashboardPanelName/Description/Source/Widget/Box面板元信息、数据源、展示方式、位置尺寸DashboardPanelBoxX/Y/W/H面板在画布上的坐标与宽高拖拽调整的落点DashboardPanelSourceMetricsQueriesPromQL 查询列表DashboardPanelSourceMetricsQueryDataSource/Query/Legend/Color数据源、PromQL、图例模板、序列颜色DashboardPanelWidget.ChartDisplay/Stacked展示形态line/bar、是否堆叠面板渲染链路为前端表单PanelForm.vue→ HTTP APIapi.go→ JSON 持久化db/dashboards.go→ 区间查询prom 客户端 QueryRange→ 图例插值与图表构建panel.go→ 前端渲染Dashboard.vue / Widget.vue。理解了这条链路你就能根据实际输出反推每一条 PromQL 的图例命名与展示效果进而设计出信息密度与可读性俱佳的仪表盘。结语自定义仪表盘是 Coroot 从开箱即用的监控工具走向贴合业务的可观测性平台的关键扩展点通过 PromQL 面板、分组布局与 RBAC 权限的组合你可以把业务 KPI、第三方指标与基础设施指标统一到同一视图中。本文介绍的创建流程、面板查询机制、Legend 插值规则、堆叠/柱状展示选项以及权限模型均可在 docs/docs/dashboards/overview.md 与上述源码文件中一一印证动手实践时建议从一个小型业务指标面板开始逐步叠加分组与多查询。【免费下载链接】corootCoroot is an open-source observability and APM tool with AI-powered Root Cause Analysis. It combines metrics, logs, traces, continuous profiling, and SLO-based alerting with predefined dashboards and inspections.项目地址: https://gitcode.com/GitHub_Trending/co/coroot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考