完全指南:从单行监控到多级分组与网格布局)
可观测性后端运维前端云原生微服务AI Agent【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址https://gitcode.com/GitHub_Trending/on/oneuptime点击查看免费下载本指南以 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步骤包含字段说明Monitor项目内监控的下拉列表占位符Select Monitor。必填。Display Name必填。访客看到的文字与监控自身的名称分开存储因此可以在此重命名而不影响监控配置。Description可选 Markdown显示在行的下方适合用一句话说明该服务实际做什么。若项目启用了监控组下拉框下方会显示链接Add a Monitor Group instead.——点击后Monitor下拉框切换为Monitor Group下拉框占位符Select Monitor Group链接随之变为Add a Monitor instead.以便切回。当你希望页面上的一行代表多个检查的聚合结果时使用监控组。对应到源码这些显示相关字段都定义在 StatusPageResource.ts 中displayNameShortText必填、displayDescriptionMarkdown可选而monitorId与monitorGroupId均为可空外键二者择一。批量添加Add MultipleAdd 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步骤在单条添加表单与批量弹窗中完全一致。这里的一切都是每资源级别的——同一分组内的两行可以配置得完全不同。字段作用TooltipdisplayTooltip显示在状态页资源旁的额外文字可用于说明范围如 US and EU customers。Show Current Resource StatusshowCurrentStatus默认开启。在行旁显示实时状态——operational、degraded、offline。Show Uptime %showUptimePercent默认关闭。在资源旁显示正常运行时间百分比。Select Uptime PrecisionuptimePercentPrecision仅在Show Uptime %开启后出现。必填默认一位小数。Show Status History ChartshowStatusHistoryChart默认开启。显示该资源的逐日正常运行时间历史柱状图。第一步中的Display NamedisplayName与DescriptiondisplayDescription同样只是显示属性——它们永远不会改动监控本身。源码佐证上述字段在 StatusPageResource.ts 中均有对应定义且默认值与文档一致——showCurrentStatus默认true、showUptimePercent默认false、showStatusHistoryChart默认trueuptimePercentPrecision的类型为 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字段说明Group Namename必填。访客看到的区块标题。Group Descriptiondescription可选 Markdown显示在标题下方。Parent GroupparentStatusPageGroupId可选。保持No parent group (top level)则分组位于顶层。Expand on Status Page by DefaultisExpandedByDefault决定区块对访客默认展开还是折叠。Advanced步骤在分组级别镜像了资源开关Show Current Group StatusshowCurrentStatus——默认开启在分组标题旁显示状态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)自动生成 slugisExpandedByDefault默认true、showCurrentStatus默认true、showUptimePercent默认falseorder字段用于控制排序。从计费角度该模型通过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 / GridLayout步骤设置分组的View ModeviewMode它决定该分组在公开页面的渲染方式如果你想要…请选择展示一列简单的垂直服务列表每行一个List默认将同一服务在多个区域/租户下展示为矩阵Grid选择Grid后会出现四个新字段Row Axis Label——行维度名称占位符ServiceRow Axis Values——行本身通过Add Row逐个添加占位符e.g. AuthColumn Axis Label——列维度名称占位符RegionColumn 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是必填的。可接受的列如下列作用name分组名称。必填。parentName该分组嵌套于其下的分组名称。description分组描述。isExpandedByDefault区块对访客默认展开与否。showCurrentStatus分组标题旁是否显示状态。showUptimePercent分组旁是否显示正常运行时间百分比。uptimePercentPrecision该百分比使用的小数位数。viewModeList或Grid。rowAxisLabel网格分组的行维度名称。rowAxisValues网格分组的行值。columnAxisLabel网格分组的列维度名称。columnAxisValues网格分组的列值。导入创建的是分组而非资源——之后再用Add Monitor或Add Multiple添加监控。导入实现细节源码级前端弹窗组件位于 ImportGroupsFromCsvModal.tsx解析与依赖规划逻辑解耦在无 React 依赖的工具模块中CSV 列定义、必填列与示例模板集中在 StatusPageGroupCsv.tsSTATUS_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【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址https://gitcode.com/GitHub_Trending/on/oneuptime点击查看免费下载相关推荐OneUptime 状态页资源与分组Resources Groups完全指南从监控行到嵌套分组与 CSV 批量导入OneUptime 状态页资源与分组Resources Groups完全指南从监控行到嵌套分组与 CSV 批量导入 状态页的资源Resource可观测性后端运维前端云原生微服务AI AgentOneUptime 状态页资源与分组配置指南从监控器行到嵌套分组与网格布局OneUptime 状态页资源与分组配置指南从监控器行到嵌套分组与网格布局 状态页是 OneUptime 监控体系中面向访客的公开门户而 资源Resour可观测性后端运维前端云原生微服务AI AgentOneUptime CLI 完全指南从终端管理监控、事件与状态页资源OneUptime CLI 完全指南从终端管理监控、事件与状态页资源 OneUptime CLI oneuptime/cli 是 OneUptime 官可观测性后端运维前端云原生微服务AI Agent创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考