OneUptime 仪表盘编排完全指南：画布、组件、时间范围与自动刷新

OneUptime 仪表盘编排完全指南画布、组件、时间范围与自动刷新【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime本指南以 OneUptime 开源可观测平台Open-source monitoring and observability platform的 Dashboard 编排功能为核心讲解从创建仪表盘、操作网格画布、添加与配置组件到时间范围、自动刷新、拖拽缩放与自动保存的完整工作流。读完本文你将掌握 OneUptime 仪表盘的编辑/查看双模式、组件数据源体系指标、日志、追踪、实时列表、静态内容、阈值与格式化配置以及让仪表盘长期可维护的设计技巧并能结合仓库源码理解其底层实现原理。创建仪表盘进入画布的起点在 OneUptime 左侧导航打开Dashboards点击Create Dashboard新建仪表盘为其命名后即可进入画布。画布默认处于Edit编辑模式随时可以开始添加组件。从源码结构看仪表盘的页面级入口位于 App/FeatureSet/Dashboard/src/Pages/Dashboards/View/其中Index.tsx、Layout.tsx承载画布外壳Overview.tsx展示描述、属主与标签而画布的核心交互逻辑集中在 App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/ 目录下。画布机制一个网格系统OneUptime 的仪表盘本质上是一个网格grid组件会吸附snap到网格上位置与大小由你决定随着添加更多行页面可以向下无限增长每个组件在更大或更小的屏幕上都会保持自身比例不会因为容器尺寸变化而变形。网格的源码实现在 App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/Index.tsx 中可以看到网格的具体实现细节编辑模式下画布在最底部组件之下额外保留 4 行缓冲区域EDIT_MODE_BUFFER_ROWS 4同时画布至少显示 12 行EDIT_MODE_MIN_ROWS 12保证空画布也有足够的摆放空间列数由DefaultDashboardSize.widthInDashboardUnits决定组件之间保留固定像素间距SpaceBetweenUnitsInPx画布通过ResizeObserver实时测量容器实际宽度再据此反推每个网格单位的像素尺寸unitSizeInPx从而保证组件在所有屏幕宽度下都能获得精确的像素宽高拖拽与缩放能力由useDashboardGridDnd位于Common/UI/Utils/UseDashboardGridDnd.ts提供拖动组件移动move、拖拽角落调整大小resize并通过GridLayoutUtil.applyRectsToComponents将网格坐标写回组件配置。拖拽过程中会显示占位矩形renderPlaceholder调整大小时显示“宽 × 高”如4 × 3移动时显示网格坐标如2, 1让你精确定位。Edit 与 View两种模式的切换仪表盘顶部的切换开关控制两种模式Edit编辑——组件面板widget palette打开可以拖拽组件、调整大小点击任意组件打开设置View查看——仪表盘变为只读与访客和团队成员看到的完全一致适合在分享前检查效果。两种模式操作的是同一个仪表盘没有独立的“发布publish”步骤——每一次修改保存后立即生效团队看到的始终是最新版本。从 App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/Index.tsx 可以看到拖拽交互dnd仅在isEditMode为真时启用这也是 View 模式下画布不可编辑的源码依据。添加一个组件在画布上添加组件遵循以下步骤点击按钮打开组件面板widget palette选择组件类型完整目录见 组件目录组件出现在画布上点击组件上的齿轮图标打开其设置选择数据源一个指标、一个列表过滤器、一段文本等及显示选项拖动组件移动位置拖动角落调整大小。设置面板的源码构成Canvas 目录下的编辑器文件印证了设置面板的能力边界ComponentSettingsModal.tsx——组件的设置弹窗负责汇总渲染所有表单字段DataSourceQueryEditor.tsx——指标/数据源查询构建器LogChartQueryEditor.tsx、TraceChartQueryEditor.tsx——日志图与追踪图的专用查询编辑TelemetryAttributeVariableDropdown.tsx、ProjectLabelVariableDropdown.tsx——遥测属性变量与项目标签变量的下拉绑定TableColumnsEditor.tsx——表格列选择编辑器。组件类型的完整定义可以在 Common/Types/Dashboard/DashboardComponents/ 中找到包括DashboardChartComponent、DashboardValueComponent、DashboardGaugeComponent、DashboardTableComponent、DashboardTextComponent、DashboardHtmlComponent、DashboardLogChartComponent、DashboardLogStreamComponent、DashboardTraceListComponent、DashboardIncidentListComponent、DashboardAlertListComponent、DashboardMonitorListComponent、DashboardSloComponent、DashboardNetworkMapComponent以及各类 Kubernetes / Docker / Podman / Proxmox / VMware 资源列表组件。数据从哪来四种数据源大多数组件从以下四个来源读取数据数据源说明Metrics指标选择一个指标与聚合方式average、max、count、percentile添加过滤器选择分组方式。这与 OneUptime 其他位置使用的是同一个查询构建器。Logs and traces日志与追踪按时间绘制日志量或追踪性能曲线或以列表展示匹配的最近遥测数据。遥测组件可按服务、严重级别、正文文本与属性进行收窄。Live lists实时列表事件incidents、告警alerts、监控器monitors、Kubernetes Pod、Docker 容器、主机等。每个列表组件接受一个过滤器展示匹配项并实时更新。Static content静态内容Text组件接受一段 Markdown。适合做标题、上下文说明、指向 runbook 的链接或在事件处理期间放临时备注。说明以上组件分类覆盖完整目录。详细的每个组件的用途、设置项与适用场景参见 组件目录含 Chart、Value、Gauge、Table、Text、HTML、Log Chart、Log Stream、Trace List、Incident List、Alert List、Monitor List、SLO、Kubernetes/Docker 资源列表、Host List、Network Map 等。阈值与格式化Value数值与Gauge仪表盘这类单值组件支持设置两个阈值warning threshold警告阈值——数值超过后颜色变黄色critical threshold严重阈值——数值超过后颜色变红色。图表Chart可以设置Y 轴单位、图例位置以及序列是堆叠stack还是叠加overlay。表格Table可以选择要展示的列与行数上限。时间范围与刷新仪表盘顶部有两个控件作用于每一个基于时间的遥测组件时间范围Time range预设——过去 1 小时、24 小时、7 天、30 天以及取决于数据保留期的 90 天自定义——手动选择起止时间。每一个指标、日志、追踪图表都使用这一时间窗口。时间范围会编码在仪表盘的URL中——分享 URL 即分享了时间窗口非常适合事件处理期间固定窗口后把链接贴到事件频道。刷新Refresh组件重新查询数据的频率Off——页面加载时查询一次5s / 10s / 30s / 1m / 5m / 15m——按间隔自动刷新。实时列表Live lists不受此设置约束始终自行更新。不使用时间范围的组件如 Text 组件会忽略这两个控件。刷新间隔的源码实现刷新间隔的枚举与毫秒换算定义在 Common/Types/Dashboard/DashboardViewConfig.tsexport enum AutoRefreshInterval { OFF off, FIVE_SECONDS 5s, TEN_SECONDS 10s, THIRTY_SECONDS 30s, ONE_MINUTE 1m, FIVE_MINUTES 5m, FIFTEEN_MINUTES 15m, }对应的毫秒值依次为 5000 / 10000 / 30000 / 60000 / 300000 / 900000。保存仪表盘时DashboardView会把当前刷新间隔连同组件布局一起序列化JSONFunctions.serializeValue写入后端Dashboard模型的dashboardViewConfig字段见 App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardView.tsx。放大到峰值整板拖拽缩放不需要为了观察一个峰值而手动去调整时间范围选择器在任意折线图或面积图上拖动选中感兴趣的时间段整个仪表盘都会移动到该窗口——所有其他面板会随之重新查询让你在同一时刻横跨整个面板读数而不是逐张图表、各用不同比例地看双击任意图表即可撤销缩放无论你钻取了多少次仪表盘都会回到缩放前的时间范围缩放激活时时间范围选择器旁会出现一个Reset zoom按钮双击一个未缩放的仪表盘不会有任何效果。缩放的有意设计缩放后的窗口是固定的因此在自动刷新开启时它不会继续向前滚动——这是刻意为之调查途中窗口若悄然滑走反而更糟。重置缩放后即恢复滚动缩放仅在工作于 View 模式在 Edit 模式下拖动是移动/调整组件柱状图bar chart不能发起缩放没有可拖拽的区域但双击柱状图仍然可以重置整个仪表盘。缩放的源码实现整板缩放的逻辑由 Common/UI/Utils/UseDashboardTimeRangeZoom.ts 提供它同时被认证版仪表盘DashboardView与公开仪表盘复用保证两种入口的交互语义一致zoomToTimeRange(startTime, endTime)——由时间序列面板的拖选触发把整板窗口收窄到选中区间resetZoom()——双击面板或点击工具栏的重置按钮撤销缩放三个回调均保持 identity-stable以便安全下传到被React.memo包裹的组件中而不产生过期闭包。在 DashboardView.tsx 中缩放回调被传入画布onDashboardTimeRangeSelect/onDashboardTimeRangeReset/isDashboardTimeRangeZoomed在 Canvas/Index.tsx 的接口注释中可以看到这是“由仪表盘外壳持有的、整板级别的拖拽缩放”。相关交互还配有测试覆盖见 App/Tests/Dashboard/DashboardTimeRangeZoomWiring.test.ts 与 App/Tests/Dashboard/DashboardCanvasLayering.test.ts。保存边工作边自动落盘画布随工作自动保存。头部有一个小的指示器显示最新更改是否已保存。从 App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardView.tsx 的实现可以看出几个细节保存通过ModelAPI.updateById将序列化后的dashboardViewConfig写入Dashboard模型保存前会做编辑权限校验canEditDashboard权限不足时停留在编辑模式并提示缺失权限信息保存失败不会丢失已放置的组件错误信息单独展示saveError画布保持在编辑模式用户的工作仍然留在屏幕上而不是被整个页面错误提示覆盖。如果要做一个大的改动建议先复制duplicate仪表盘再动手这样始终有一个安全的备份副本。让仪表盘经得起时间考验的技巧官方文档在 authoring.md 中给出的四条长期维护建议一个仪表盘一个主题——拒绝把“我们监控的一切”塞进一页。几个聚焦的仪表盘胜过一张巨型页面最重要的组件放在最顶部——人们从上往下扫视让第一眼看到的内容直接回答“系统健康吗”用 Text 组件给分区加标题——每隔几行放一个短标题“Latency”“Errors”“Capacity”让整页可以一眼扫读用变量代替复制——如果正准备为第二个服务复制同一张仪表盘请改为构建一张带service变量的仪表盘。详见 变量与过滤器支持 Custom List、Text Input、Telemetry Attribute、Project Labels 等变量类型与多选、默认值机制。延伸阅读组件目录Widgets——所有可添加的组件、每个组件的设置与适用场景变量与过滤器Variables Filters——变量、过滤器与时间范围让一张仪表盘服务多个服务或客户分享与公开仪表盘Sharing Public Dashboards——向团队之外分享配置与权限Configuration Permissions——属主与访问控制仪表盘总览Dashboards Overview——概念、术语表与一个完整的“结算服务值班页”实战示例含 service 变量、P95 延迟图、错误率 Value 阈值 1%/5%、Incident List、Log Chart 与 Log Stream 的组合方案。【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考