企业官网建设流程全解析

• 可观测性
• 后端
• 运维
• 前端
• 云原生
• 微服务
• AI Agent

导读

OneUptime 状态页的核心构成单元是"资源（Resource）"与"分组（Group）"：资源是状态页上的一行——一个监视器（或监视器组），配以访客能看懂的名称、当前状态，以及可选的正常运行时间数字与历史图表；分组则是装载资源的区块，让一张挂着四十个监视器的页面读起来是"API""Web 应用""数据管道"，而不是一份没完没了的清单。本文以官方文档《Ressourcen & Gruppen》为主线，结合 OneUptime 开源仓库中的实体模型与前端实现，完整讲解资源与分组的创建、显示选项、嵌套、网格布局、排序与 CSV 批量导入，帮助你搭建一张结构清晰、对访客友好的生产级状态页。

资源与分组：状态页的骨架

在 OneUptime 中，资源（Resource）是状态页上的一行，通常对应一个监视器（Monitor）或监视器组（Monitor Group），包含访客可以理解的名字、实时状态，以及可选的可正常运行时间百分比和历史图表；分组（Group）则是承载资源的区块。二者都在同一个屏幕上搭建：打开一个状态页，在侧边菜单选择Resources（在没有启用监视器组的项目上，该入口写作Monitors）。分组过去有自己独立的页面，现在已合并至此，旧的/groupsURL 会直接重定向到当前页面。

命名即体验：把这一部分做对，状态页其余部分只是装饰。访客正是根据这些行来判断"是我的问题还是他们的问题"，因此资源名称应当按客户谈论产品的方式命名——例如Checkout API，而不是prod-checkout-lb-healthcheck-us-east-1。

从数据模型看，资源的核心字段由 StatusPageResource.ts 定义：它通过statusPageId归属到状态页，通过monitorId或monitorGroupId关联具体的监视对象，通过statusPageGroupId挂载到某个分组；而分组本身的层级关系则由 StatusPageGroup.ts 中的parentStatusPageGroupId自引用字段实现，顶层分组的该字段为空。

Resources 界面布局

Resources 界面一分为二：

• 分组导航栏（左侧）：一棵分组树，顶部有搜索框（Search groups...），下方有实时计数（如3 groups · 12 resources）。当页面上的分组超出可视区域时，会出现Show N more of M按钮展开其余部分。
• Top of page：导航栏的第一行，存放不属于任何分组的资源。其工具提示明确说明：访客最先看到这些内容，位置在所有分组之上。如果页面完全没有分组，右侧面板标题会改为All resources。
• 资源面板（右侧）：标题为当前选中的分组，头部包含Edit Group、主按钮Monitor hinzufügen（添加监视器），以及More actions溢出菜单。

卡片头部本身还有两个按钮：New Group，以及一个三点溢出菜单，内含Import groups from CSV和Aktualisieren（刷新）。

界面的空状态会直接告诉你下一步该做什么：

• 空分组显示No monitors here yet，附带添加监视器、Add Multiple，并且——仅当状态页一个分组都没有时——显示Create a Group；
• 搜索无结果时显示No resources match your search；
• 空的导航栏会说明分组可以把长状态页切成区块，且可以嵌套。

添加一个监视器资源

选择资源要落入的分组（或Top of page表示不分组的一行），点击添加监视器，弹出对话框标题为Add a monitor to {group}，包含两个步骤：监视器详情与高级。

在监视器详情步骤中：

• 监视器（Monitor）——项目内监视器的下拉框，占位符选择监视器。必填。
• 显示名称（Display Name）——必填。这是访客读到的文字，且与监视器自身名称分开存储，因此可以在此改名而完全不影响监控配置本身。
• 描述（Description）——可选的 Markdown，显示在该行下方，适合用一句话说明这个服务到底是干什么的。

如果项目启用了监视器组，下拉框下方会出现链接Add a Monitor Group instead.——点击后监视器下拉框会替换为监视器组下拉框（选择监视器组），链接随之变为Add a Monitor instead.以便切回。当你想让页面上的一行代表若干合并起来的检查时，就使用监视器组。

批量添加多个监视器

Add Multiple（在More actions菜单中亦写作Add multiple monitors）打开Add Multiple Monitors对话框。它同样是两步，但第一步是监视器多选而非单个下拉框；在高级步骤选择的显示选项会应用到每一个选中的监视器。这是给新页面铺底最快的方式。

多选框中还带有一个Labels（标签）选项卡：点击某个标签，所有携带该标签的监视器会被一次性选中。

幂等添加：同一个监视器只出现一次

状态页上每个监视器只列出一行，添加操作是幂等的：给新监视器打上标签后再按同一标签添加，只会新增那些尚未上页的监视器，已在页面上的监视器（连同你设置的显示名称与选项）保持原样。批量添加结束时的摘要会将新增的列在Added下，早已存在的列在Already Added下——不会报错，也不会为它们写入任何内容。

这一规则同样适用于其他创建资源的入口：从单条添加表单添加已在页面上的监视器，或在编辑表单中将已有资源指向它，都会被拒绝并提示"This monitor is already added to this status page"——即使已有资源位于不同分组也同样拒绝，因为访客仍会看到同一个监视器两次。若要在不同分组展示某个监视器，请先删除其已有资源，再在目标位置重新添加。

资源上的显示选项（高级步骤）

高级（Advanced）步骤在单条添加表单与批量对话框中完全一致，且所有选项都按资源生效——同一分组内的两行可以配置得完全不同。

第一步中的显示名称（displayName）与描述（displayDescription）同样是纯展示字段，永远不会改动监视器自身。这些字段与默认值在 StatusPageResource.ts 中均有对应定义：showCurrentStatus默认true、showUptimePercent默认false、showStatusHistoryChart默认true、displayTooltip为可空的LongText类型。

正常运行时间百分比与历史图表

显示正常运行时间百分比与显示状态历史记录图表都依赖一个位于别处的设置——两者覆盖的时间窗口由显示正常运行时间历史记录（天数）决定，位置在状态页面 → 你的页面 → 高级 → 高级设置的正常运行时间历史设置卡片中，取值 1 到 90 天，默认 90 天。操作顺序是：先按资源逐个打开开关，再为整个页面统一设置一次时间窗口。

精度是一个判断问题。选择正常运行时间精度下拉框提供99% (No Decimal)、99.9% (One Decimal)、99.99% (Two Decimal)和99.999% (Three Decimal)四个档位。小数位越多看起来越精确，也越容易在第三位小数上引发争论；如果 SLA 承诺的是三个九，就对齐到三个九，不要更多。这四个档位在代码中由 UptimePrecision.ts 枚举精确定义，与文档描述完全一致。

分组拥有自己的一套同名开关（见下文），因此可以让分组显示汇总百分比，而组内单个监视器保持安静，或者反过来。历史图表条形的颜色，以及哪些监视器状态计为"故障"，则在概览页面（Overview Page）品牌界面上配置，详见状态页品牌与域名。

分组：创建与配置

点击New Group打开Create New Status Page Group对话框，表单包含三步：分组详情、布局与高级。

分组详情：

• 分组名称（name）——必填，这是访客看到的区块标题。
• 分组描述（description）——可选 Markdown，显示在标题下方。
• Parent Group（parentStatusPageGroupId）——可选。保持No parent group (top level)即可让分组留在顶层。
• 默认在状态页上展开（isExpandedByDefault）——访客打开页面时该区块默认展开还是收起。

高级是资源级开关在分组层面的镜像：

• 显示当前分组状态（showCurrentStatus）——默认开启，在分组标题旁显示状态。
• 显示正常运行时间百分比（showUptimePercent）——默认关闭，开启后出现选择正常运行时间精度。

在 StatusPageGroup.ts 中可以看到，这些字段的默认值（showCurrentStatus默认true、showUptimePercent默认false、isExpandedByDefault默认true）与上述一致；同时name字段通过@UniqueColumnBy("statusPageId")保证同一状态页内分组名称唯一。

编辑分组走同一套路：面板头部的Edit Group，或导航栏行菜单里的Edit group，都会打开带保存更改按钮的Edit Status Page Group。面板头部会用小标签（chips）显示当前开启的设置——Grid、Collapsed by default、Uptime %——无需打开表单即可了解分组配置。

管理分组

导航栏行菜单包含Edit group、Move up、Move down、显示 ID和Delete group；面板More actions溢出菜单则是对应长版本——Edit this group、Add a sub group、Move group up、Move group down、Show group ID、刷新和Delete this group。未填名称就保存的分组会渲染为Untitled group，这通常说明本打算输入点什么。

嵌套分组

分组支持嵌套：在子分组上设置Parent Group，或使用导航栏的Add a sub group inside this group操作。表单自带帮助文字描述了其面向的结构——类似"业务单元 › 区域 › 市场"——并说明每一层都会显示其下所有内容汇总后的状态与正常运行时间。

当分组包含子分组时，资源面板会显示一行Sub groups小标签，直接链接到每个子分组，让你不必回到导航栏即可在层级间穿梭。嵌套在大页面上才值得：托管服务商把区域嵌在产品内，零售商把市场嵌在业务单元内；而在只有十二个监视器的页面上，一层扁平结构对访客更友好。

嵌套层级相关的布局与可见性逻辑在仓库中有对应实现，例如 GroupNestingLayout.ts 及其测试 GroupNestingLayout.test.ts，可用于理解嵌套分组在页面上如何渲染与折叠。

列表布局与网格布局

布局（Layout）步骤为分组设置查看模式（viewMode），并改变分组对外渲染的形态。

选择Grid后会多出四个字段：

• 行轴标签（Row Axis Label）——行维度的名称，占位符Service。
• 行轴值（Row Axis Values）——行本身，用Add Row一次添加一个（占位符e.g. Auth）。
• 列轴标签（Column Axis Label）——列维度，占位符Region。
• 列轴值（Column Axis Values）——用Add Column添加（占位符e.g. US-East）。

网格分组中的每个监视器随后被放入某个单元格，因此批量对话框会在选择监视器的同时询问行与列，并使用你自定义的轴标签。在 StatusPageGroup.ts 中，viewMode默认值为StatusPageGroupViewMode.List，rowAxisValues与columnAxisValues以逗号分隔的长文本存储，分别决定网格的行顺序与列顺序。

务必先把轴建好，再加监视器。一个没有行也没有列的网格分组会显示一条琥珀色提示，说明在轴存在之前监视器无处安放，并提供Set up the grid按钮；在你完成轴配置之前，添加监视器按钮会一直隐藏。

排列访客看到的顺序

顺序是显式指定的，而非字母序，并且在三处设置：

• 分组内部的资源——拖动某一行即可。面板会提示：Drag a row to change the order visitors see。
• 分组彼此之间——使用导航栏行菜单的Move up / Move down，或面板溢出菜单的Move group up / Move group down。
• 未分组的资源——它们位于Top of page，永远渲染在所有分组之上，因此把大家最先查看的项放在这里。

两种情况下拖动被禁用：用Search in {group}...过滤面板时，重新排序会被禁用——面板提示N of M shown · drag to reorder is off while filtering，需先清空搜索；网格分组从不支持拖动排序，因为位置由行轴与列轴决定。

排序在数据层面由order字段承载：资源和分组模型均定义了order（"Order / Priority"）数值列，拖拽与上下移动操作最终写入该字段。

实战建议：把最多人问起的服务放在最顶部。故障期间访问状态页的访客，通常看完第一屏就不再往下读了。

从 CSV 导入分组

手工搭建深层级树十分繁琐。卡片头部的三点溢出菜单中的Import groups from CSV会打开Import Groups from CSV对话框。

流程为：Download CSV Template下载status-page-groups-template.csv→ 填写文件 →Choose CSV File选择文件 →Preview Import在实际写入前预览将要创建的内容。随后Import results表格会将每一行标记为Created、Failed或Skipped并附上原因，坏行不会悄无声息地消失。

只有name是必填列。支持的列如下：

注意：导入只创建分组，不创建资源——监视器需要之后通过添加监视器或Add Multiple加入。

总结

OneUptime 状态页的资源与分组体系将"监控数据"与"对外展示"解耦：displayName、displayDescription、displayTooltip等展示字段与监视器自身配置完全分离，你可以在不改动任何监控逻辑的前提下自由重组页面的信息架构；分组既支持扁平分区，也支持"业务单元 › 区域 › 市场"式的嵌套层级，并可通过 List/Grid 两种布局适配"服务清单"与"区域×服务矩阵"两类典型场景。所有开关与字段都对应着 StatusPageResource.ts 与 StatusPageGroup.ts 中的真实数据列，理解这些底层结构有助于你更精确地把控状态页的呈现效果。

延伸阅读

• 状态页概览——状态页是什么，各部分如何拼合。
• 状态页品牌与域名——徽标、网站图标、图表颜色，以及把页面放到自有域名。
• 订阅者与公告——这些资源发生变化时谁会收到通知。
• 公共 API——以编程方式读取状态页数据。
• 事件状态与严重级别——什么会让事件出现在页面上，又是什么让它消失。

• 可观测性
• 后端
• 运维
• 前端
• 云原生
• 微服务
• AI Agent