企业官网建设流程全解析

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

本指南以 OneUptime 官方文档《Resources & Groups》为主体，结合仓库内数据模型与前端实现源码，系统讲解如何在状态页（Status Page）上组织资源与分组：一条资源对应状态页上的一行（一个监控或一个监控组），一个分组则是承载资源的区块，让包含几十个监控的页面读起来像 "API"、"Web app"、"Data pipeline" 这样清晰的分区，而不是一长串无尽列表。读完本文，你将掌握 Resources 界面操作、单条与批量添加监控、资源级显示选项、分组创建/嵌套/排序、列表与网格两种布局，以及 CSV 批量导入分组的完整实战流程。

核心概念：资源是什么，分组解决什么问题

在 OneUptime 中，资源（Resource）是状态页上的一行——它可以是一个监控（Monitor），也可以是一个监控组（Monitor Group），带有一个访客能看懂的显示名称、当前状态，以及可选的正常运行时间百分比和历史图表。分组（Group）是容纳资源的区块，使一个包含 40 个监控的页面呈现为 "API"、"Web app"、"Data pipeline" 等分区，而非一条望不到头的列表。

从数据模型看，二者的关系非常清晰：

• StatusPageResource 通过statusPageGroupId外键挂到某个分组下，同时通过monitorId/monitorGroupId关联实际的监控或监控组；
• StatusPageGroup 则通过parentStatusPageGroupId自关联实现嵌套，通过statusPageId归属到某个状态页。

两者均暴露为独立 CRUD API：/status-page-resource与/status-page-group（见两个模型类上的@CrudApiEndpoint装饰器）。

资源与分组的创建都在同一个界面上完成：打开一个状态页，在侧边菜单选择Resources（在未启用监控组的项目上，该菜单项显示为Monitors）。分组曾经有独立页面，现在已统一合并到此处，旧的/groupsURL 会自动重定向到当前页面。

命名建议：访客正是通过这些行判断"是我这边的问题还是他们的问题"，所以显示名称要按客户谈论产品的方式命名——用Checkout API，而不是prod-checkout-lb-healthcheck-us-east-1。

The Resources 界面拆解

该界面一分为二：

• 左侧：分组导航器（Group Navigator）——分组的树状列表，顶部有搜索框（Search groups...），下方显示计数（如3 groups · 12 resources）。当分组数超出显示区域时，会出现Show N more of M按钮展开剩余部分。
• 顶部（Top of page）——导航器中的第一行，存放不属于任何分组的资源。其提示文案明确说明含义：访客最先看到这些资源，它们显示在所有分组之上。如果页面完全没有分组，右侧面板标题会显示为All resources。
• 右侧：资源面板（Resource Pane）——以你选中的分组命名。头部包含Edit Group、主按钮Add Monitor，以及More actions溢出菜单。

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

卡片描述文字随页面形态变化：有分组时提示"这里是访客看到的一切，在左侧选择分组进行编辑"；还没有分组时则引导你创建分组，把长页面拆成多个区块。

空状态（Empty state）也会指导下一步操作：

• 空分组显示No monitors here yet，并提供Add Monitor、Add Multiple；仅当状态页完全没有分组时，还会额外显示Create a Group；
• 搜索无结果时显示No resources match your search；
• 空导航器会说明：分组能把较长的状态页拆成区块，且分组可以嵌套。

添加一个监控（Add Monitor）

先选择资源要落入的分组（或Top of page表示不分组的一行），再点击Add Monitor。弹窗标题为Add a monitor to {group}，包含两步：Monitor Details与Advanced。

Monitor Details步骤包含：

若项目启用了监控组，下拉框下方会显示链接Add a Monitor Group instead.——点击后Monitor下拉框切换为Monitor Group下拉框（占位符Select Monitor Group），链接随之变为Add a Monitor instead.以便切回。当你希望页面上的一行代表多个检查的聚合结果时，使用监控组。

对应到源码，这些显示相关字段都定义在 StatusPageResource.ts 中：displayName（ShortText，必填）、displayDescription（Markdown，可选），而monitorId与monitorGroupId均为可空外键，二者择一。

批量添加（Add Multiple）

Add Multiple（在More actions菜单中同样叫Add multiple monitors）会打开Add Multiple Monitors。它有相同的两步，但第一步是Monitors多选器而非单个下拉框；你在Advanced步骤选择的显示选项将应用到所有选中的监控。这是为全新页面快速填充内容的最快方式。

多选器还有一个Labels标签页：点击某个标签，所有带该标签的监控会被一次性选中。

按标签重复添加是安全的（幂等）

一个状态页只会列出某个监控一次。添加操作是幂等的：给几个新监控打上标签后，再次选择同一标签只会新增那些新监控——已经在页面上的监控保持原样，包括你之前设置的显示名称和选项。

批量添加末尾的汇总也说明了这一点：新添加的监控列在Added下，已存在的列在Already Added下。不会报告任何失败，也不会为它们做任何写入。

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

资源显示选项（Advanced 步骤）

Advanced步骤在单条添加表单与批量弹窗中完全一致。这里的一切都是每资源级别的——同一分组内的两行可以配置得完全不同。

第一步中的Display Name（displayName）与Description（displayDescription）同样只是显示属性——它们永远不会改动监控本身。

源码佐证：上述字段在 StatusPageResource.ts 中均有对应定义，且默认值与文档一致——showCurrentStatus默认true、showUptimePercent默认false、showStatusHistoryChart默认true；uptimePercentPrecision的类型为 UptimePrecision 枚举，可取值99% (No Decimal)、99.9% (One Decimal)、99.99% (Two Decimal)、99.999% (Three Decimal)。

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

Show Uptime %和Show Status History Chart都依赖一个位于别处的设置。它们覆盖的时间窗口由Show Uptime History (in days)控制，位于Status Pages → your page → Advanced → Advanced Settings下的Uptime History Settings卡片中。该值接受 1 到 90 天，默认 90 天。

因此操作顺序是：先在每条资源上打开开关，然后为整个页面设置一次时间窗口。

源码中，该设置对应 StatusPage.ts 模型上的showUptimeHistoryInDays字段（Number 类型，默认值 90，字段描述明确标注"Maximum is 90 days"）。也正因如此，StatusPageResource上showUptimePercent与showStatusHistoryChart的模型描述均写作"Show uptime percent of this monitor for the last 90 days"。

精度是一个判断问题。Select Uptime Precision下拉框提供99% (No Decimal)、99.9% (One Decimal)、99.99% (Two Decimal)和99.999% (Three Decimal)。小数位数越多看起来越精确，也越容易让人对第三位小数产生争议；如果你对外发布的是三个九的 SLA，就匹配到三个九，不要再多。

分组拥有这些开关的独立副本（见下文），因此可以让分组显示一个汇总百分比，而组内各监控保持安静，或反过来。

关于历史图表的柱子颜色、以及哪些监控状态计为"down"，在Overview Page品牌设置界面配置，详见 Status Page Branding & Domains。

分组（Groups）

点击New Group打开Create New Status Page Group，表单分三步：Group Details、Layout和Advanced。

Group Details：

Advanced步骤在分组级别镜像了资源开关：

• Show Current Group Status（showCurrentStatus）——默认开启，在分组标题旁显示状态；
• Show Uptime %（showUptimePercent）——默认关闭，开启后出现Select Uptime Precision。

编辑方式相同：面板头部的Edit Group，或导航器行菜单中的Edit group，都会打开Edit Status Page Group，并带Save Changes按钮。

面板头部会显示当前已开启设置的标签（chips）——如Grid、Collapsed by default、Uptime %——这样无需打开表单就能看到分组的配置状态。

源码佐证：StatusPageGroup.ts 中name字段为 ShortText 必填且通过@UniqueColumnBy("statusPageId")保证同一状态页内名称唯一（该模型还通过@SlugifyColumn("name", "slug")自动生成 slug）；isExpandedByDefault默认true、showCurrentStatus默认true、showUptimePercent默认false；order字段用于控制排序。从计费角度，该模型通过@TableBillingAccessControl将 create/update 限定在 Growth 计划，read/delete 在 Free 计划即可用。

管理一个分组

导航器的每行菜单包含Edit group、Move up、Move down、Show ID和Delete group。面板的More actions溢出菜单提供更完整的等价项：Edit this group、Add a sub group、Move group up、Move group down、Show group ID、Refresh和Delete this group。一个未填名称就保存的分组会渲染为Untitled group，这通常说明你忘了输入内容。

嵌套分组（Nesting Groups）

分组是可以嵌套的：在子分组上设置Parent Group，或使用导航器中的Add a sub group inside this group操作。表单自身的帮助文案描述了它适合构建的形态——类似 Corporate Units › Region › Market——并说明每一层都会显示其下所有内容的汇总状态与正常运行时间。

当分组有子分组时，资源面板会显示一行Sub groups标签，可直达每个子分组，无需返回导航器即可逐层浏览层级结构。

嵌套在大页面上物有所值：例如托管服务商按"产品内嵌区域"组织，零售商按"业务单元内嵌市场"组织。而一个只有 12 个监控的页面，单层平铺反而更友好。

数据模型上，嵌套由parentStatusPageGroupId自关联外键实现，定义在 StatusPageGroup.ts 中，字段描述为"Empty for top level groups"。

列表布局 vs 网格布局（List / Grid）

Layout步骤设置分组的View Mode（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）。

网格分组中的每个监控随后被放入一个单元格，因此批量弹窗会在选择监控的同时询问行与列，使用你自己的轴标签。

在添加监控之前先设置好坐标轴。一个没有行或列的网格分组会显示琥珀色提示，说明在坐标轴建立之前监控无处安放，并提供Set up the grid按钮——在此期间Add Monitor按钮会被撤下，直到完成设置。

源码佐证：viewMode的类型是 StatusPageGroupViewMode 枚举（List/Grid），默认List；网格相关的rowAxisLabel、rowAxisValues、columnAxisLabel、columnAxisValues均为可空字段，其中 axis values 是逗号分隔的字符串。每个资源侧的落位由 StatusPageResource.ts 中的rowAxisValue与columnAxisValue字段决定，其描述明确要求"Should match one of the row/column axis values defined on the group"。

排序：访客看到的顺序

顺序是显式设定的，而非字母序，共有三处：

• 分组内的资源——拖拽行即可。面板会提示：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数字字段承载（StatusPageResource 与 StatusPageGroup 模型均有该字段，描述为 "Order / Priority of this resource"）。

请把最常被问到的服务放在顶部——在故障期间访问页面的访客，通常只读完第一屏就离开了。

从 CSV 导入分组（Import groups from 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 Monitor或Add Multiple添加监控。

导入实现细节（源码级）：

• 前端弹窗组件位于 ImportGroupsFromCsvModal.tsx，解析与依赖规划逻辑解耦在无 React 依赖的工具模块中；
• CSV 列定义、必填列与示例模板集中在 StatusPageGroupCsv.ts：STATUS_PAGE_GROUP_CSV_COLUMNS恰好对应上表的 12 列，REQUIRED_COLUMNS = ["name"]。解析器会校验未知列、缺失的name、组名与父组名相同、文件内重复名称、以及嵌套深度（超过MAX_GROUP_NESTING_DEPTH的行会以明确原因被标记失败）；父组既可以是文件内稍后创建的行，也可以是状态页上已存在的分组；
• 官方示例模板刻意覆盖了三种必须写对的形态：一个顶层分组、一个引用同文件父组的子分组、一个因坐标轴值含逗号而必须加引号的网格分组。例如：
  • Core Services,,The services everything else runs on,true,true,true,ONE_DECIMAL,List,,,,
  • API,Core Services,,true,true,false,,List,,,,
  • "Regional Availability",,,true,true,false,,Grid,Service,"Auth, API, Database",Region,"US-East, EU-West"

延伸阅读

• Status Pages Overview——状态页是什么，各组件如何组合。
• Status Page Branding & Domains——Logo、favicon、图表颜色，以及把页面放到自有域名上。
• Subscribers & Announcements——这些资源变化时谁会收到通知。
• Public API——以编程方式读取状态页数据。
• Incident States & Severities——什么会让事故出现在页面上，又是什么让它消失。

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