OneUptime 面板Dashboard创建与编排实战指南画布布局、Widget 配置、阈值与刷新机制全解析【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptimeOneUptime 的 Dashboard面板模块把平台已经采集的指标、日志、追踪、事件、监控器与基础设施数据汇聚到单一页面供值班、复盘或对外展示时一眼掌握系统状态。本文以官方文档《Crear un Panel》创建面板为骨架结合仓库源码展开带你完整掌握从创建面板、理解网格画布、添加与配置 Widget、设置数据源与阈值到时间范围、自动刷新与长期维护设计的一整套实战方法。快速上手创建你的第一个面板在左侧导航中打开Paneles → Crear PanelDashboards → Create Dashboard为面板起一个名字并打开它。画布会默认进入Edición编辑模式随时可以开始往里面添加 Widget。在数据模型层面面板在仓库中对应Dashboard模型Common/Models/DatabaseModels/Dashboard.ts它承载了面板的名称、描述、所属项目projectId、标签labels、视图配置DashboardView以及 Logo、Favicon 等展示资源。前端列表页通过 DashboardElement.tsx 渲染每个面板的入口链接点击后跳转到对应面板视图路由。可以说面板是整个监控展示体系的“容器”后续所有 Widget、变量、时间范围都挂载在它之上。理解画布Canvas网格布局机制一个面板本质上是一张网格gridWidget 会吸附到网格上你决定每个 Widget 的位置与大小它们会整齐地对齐不会随意重叠或漂移。页面可以向下生长随着添加更多行画布会持续向下扩展没有固定的行数上限。比例保持每个 Widget 在大屏或小屏上都会保持自身宽高比例因此同样一份面板在壁挂大屏、桌面浏览器和移动端都能保持可读。从源码看画布核心逻辑位于 App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/Index.tsx它负责 Widget 的摆放、尺寸调整与配置弹窗ComponentSettingsModal.tsx的渲染。拖拽移动与拖角缩放是画布的两个基础交互在编辑模式下始终可用。编辑模式与查看模式面板头部有一个开关用于在两种模式之间切换Edición编辑— Widget 调色板打开可以拖拽 Widget、调整大小点击任意 Widget 即可修改其配置。Vista查看— 面板变为只读与访问者和其他团队成员看到的效果完全一致。分享之前先用它预览成品。两个模式操作的是同一个面板不存在独立的“发布”步骤——每次编辑在保存的瞬间即生效是一种“所见即所得、改了即上线”的实时工作流。添加与配置 Widget向面板添加 Widget 的标准流程点击按钮打开 Widget 调色板Palette。选择 Widget 类型。完整目录参见 Widgets 文档。Widget 随即出现在画布上。点击 Widget 上的齿轮图标打开它的配置面板。选择数据源一条指标、一个列表过滤器、一段文本等以及展示选项。拖拽 Widget 移动位置拖拽角落调整大小。从源码看所有 Widget 类型统一由枚举DashboardComponentType定义Common/Types/Dashboard/DashboardComponentType.ts覆盖图表Chart、数值Value、文本Text、时钟Clock、表格Table、仪表盘Gauge、日志流/日志图LogStream/LogChart、追踪列表TraceList、事件与告警列表IncidentList/AlertList、监控器列表MonitorList、SLO、Kubernetes 与 Docker 各类资源列表、宿主机列表、网络地图NetworkMap、HTML 自定义组件等几十种类型。配置面板中的表单ArgumentsForm.tsx会根据所选组件类型动态渲染对应的参数输入项。数据从哪来Widget 的三大数据源大多数 Widget 从以下三种来源读取数据指标Métricas— 选择一条指标并指定聚合方式平均值 average、最大值 max、计数 count、百分位 percentile可添加过滤器并选择结果如何分组。这套查询构建器与 OneUptime 其他位置使用的是同一个学习一次即可到处使用。实时列表Listas en vivo— 事件incidentes、告警alertas、监控器monitores、Kubernetes Pod、Docker 容器、宿主机等。每个列表 Widget 接收一个过滤器并实时展示匹配的元素。静态内容Contenido estático—Texto文本Widget 接收一段 Markdown适合用作标题、上下文说明、指向 Runbook 的链接或事件处置期间的临时备注。此外源码中的DataSourceComponentTypesDashboardComponentType.ts还揭示了第四类特殊来源外部数据源组件DataSourceChart、DataSourceValue、DataSourceGauge、DataSourceTable它们直接读取 Prometheus、SQL、ClickHouse、Loki、Elasticsearch、REST 等外部数据源而非 OneUptime 自身的遥测数据这些组件类型被独立设计、各自携带专属查询编辑器且在公开面板public dashboards上不可用以免向匿名访客暴露项目数据聚合。阈值与格式化单值类 WidgetValor 数值、Indicador 仪表盘支持两类阈值警告阈值Umbral de advertencia— 当数值越过阈值时颜色变为黄色。严重阈值Umbral crítico— 当数值越过阈值时颜色变为红色。颜色变化是单向跨越触发的“超过即变色”因此你可以把“1% 错误率黄色、5% 错误率红色”这类规则直接编码进面板。图表类 Widget允许配置 Y 轴单位、图例legend的位置并决定多条序列是**堆叠stack还是叠加overlay**展示。表格类 Widget则允许选择要显示的列以及行数上限。时间范围与自动刷新面板顶部有两个全局控件影响每一个基于时间的遥测 WidgetRango de tiempo时间范围— 使用预设最近 1 小时、24 小时、7 天、30 天或自定义范围。每个图表和数字都使用这个窗口。Actualización刷新— Widget 重新查询数据的频率可选关闭、5s、10s、30s、1m、5m、15m。实时列表Live lists不受此设置影响它们按自身机制持续更新。不使用时间范围的 Widget如Texto 文本Widget会同时忽略这两个控件。需要特别注意的是时间范围会编码在面板 URL 中——分享链接即分享时间窗口事件处置时把“今天 10:00–10:30 UTC”固定下来再粘贴到事件频道是非常实用的做法。在查看模式下你还可以框选缩放zoom into a spike在任意折线图或面积图上拖拽选中一段感兴趣的区域整个面板都会移动到该时间窗口——所有其他图表会一起重新查询保证你在同一时刻横跨多个面板阅读数据而不是看一张张尺度各异的图。双击任意图表即可撤销缩放恢复到缩放前的范围缩放激活期间时间选择器旁会出现Reset zoom按钮。需要留意缩放后的窗口是固定的自动刷新开启时它不会继续向前滚动这是刻意设计避免调查中途窗口溜走重置缩放后滚动恢复。缩放只在查看模式下生效——编辑模式下拖拽是移动/缩放 Widget。柱状图bar chart不能发起缩放没有可拖拽的区域但双击它仍然可以重置面板。自动保存与安全备份画布在工作过程中自动保存。面板头部有一个小指示器告诉你最近一次变更何时已落盘。如果要进行大规模改动先复制duplicate一份面板作为安全副本再动手这是官方文档明确建议的防失误做法。让面板历久弥新的四条设计建议官方文档给出了一组经过实践检验的编排原则一个面板一个主题。抵制把“我们监控的一切”塞进同一页的冲动。几个聚焦的面板远胜一个巨型页面。把最重要的 Widget 放在顶部。人们习惯自上而下浏览——让第一眼看到的就是“这个系统健康吗”的答案。用 Text Widget 标注区块。每隔几行放一个简短标题“Latency 延迟”“Errors 错误”“Capacity 容量”让整页在房间另一端也能一眼扫清。用变量代替复制。如果你正准备为第二个服务构建同样的面板改为构建一个带service变量的面板。详细机制参见 Variables y Filtros变量与过滤器——一个带service下拉框的面板就能同时服务checkout、payments、search等所有服务而无需复制三份近乎相同的面板。从源码看 Widget 全景一份可对照的类型清单为了让面板编排时对可用 Widget 胸有成竹这里把 DashboardComponentType 枚举中的主要类型按数据源归类整理与 Widgets 目录文档一一对应类别Widget 类型枚举值典型用途图表与数字Chart、Value、Text、Clock、Table、Gauge趋势、单值、文本标注、时钟、分组表格、区间仪表盘外部数据源DataSourceChart/Value/Gauge/Table直连 Prometheus、SQL、ClickHouse、Loki、Elasticsearch、REST不可用于公开面板日志与追踪LogStream、LogChart、TraceList、TraceChart、TraceTable日志实时流、日志量/严重级图表、追踪列表与图表事件与告警IncidentList、AlertList、MonitorList“现在坏了什么”“服务告警情况”“站点全览”可靠性Slo、SloListSLI、错误预算剩余、燃尽率KubernetesKubernetesPodList、KubernetesNodeList、KubernetesNamespaceList、KubernetesDeploymentList、KubernetesStatefulSetList、KubernetesDaemonSetList、KubernetesJobList、KubernetesCronJobList集群资源状态与工作负载容器与基础设施DockerHostList、DockerContainerList、DockerImageList、DockerNetworkList、DockerVolumeList、Podman*、HostList、Proxmox*、VMware*、DockerSwarm*、CephOsdList、CephPoolList容器、镜像、宿主机、虚拟化与分布式存储资源网络NetworkMap全球站点地图按监控状态着色自定义Html自包含 HTML/CSS/JS运行在沙箱化 iframe 中绝大多数生产面板都是混合编排顶部一个趋势图旁边一两个单值中间一条文本分隔线下方一到两个列表。延伸阅读面板编排只是整个 Dashboard 体系的入口官方文档对应西班牙语版本提供了完整的后续学习路径Widgets 目录 — 每个 Widget 展示什么、何时使用。Variables y Filtros变量与过滤器 — 让一个面板复用于多个服务或客户。Compartir y Paneles Públicos分享与公开面板 — 在团队之外分享面板。Configuración y Permisos配置与权限 — 属主与访问控制。若需深入源码可继续阅读 DashboardComponentType.tsWidget 类型全集、Dashboard.ts面板数据模型以及 Canvas 组件目录画布与配置表单实现。【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考