可观测性后端运维前端云原生微服务AI Agent【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址https://gitcode.com/GitHub_Trending/on/oneuptime点击查看免费下载导读OneUptime 状态页的核心构成单元是资源Resource与分组Group资源是状态页上的一行——一个监视器或监视器组配以访客能看懂的名称、当前状态以及可选的正常运行时间数字与历史图表分组则是装载资源的区块让一张挂着四十个监视器的页面读起来是APIWeb 应用数据管道而不是一份没完没了的清单。本文以官方文档《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步骤在单条添加表单与批量对话框中完全一致且所有选项都按资源生效——同一分组内的两行可以配置得完全不同。字段用途工具提示displayTooltip在状态页上显示于资源旁的补充文字适合交代适用范围例如美国和欧洲客户。显示当前资源状态showCurrentStatus默认开启。在行旁显示实时状态——运行正常operational、性能下降degraded、离线offline。显示正常运行时间百分比showUptimePercent默认关闭。在资源旁显示正常运行时间百分比。选择正常运行时间精度uptimePercentPrecision仅在显示正常运行时间百分比开启后出现。必填默认一位小数。显示状态历史记录图表showStatusHistoryChart默认开启。显示该资源逐日的正常运行时间历史条形图。第一步中的显示名称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 GroupparentStatusPageGroupId——可选。保持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并改变分组对外渲染的形态。如果你想要……就选展示一份朴素的竖排服务清单一行一个List默认把同一服务在多个区域或多个租户上的状态排成一张矩阵Grid选择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.ListrowAxisValues与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字段承载资源和分组模型均定义了orderOrder / 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是必填列。支持的列如下列它设定什么name分组名称。必填。parentName该分组所嵌套进入的分组名称。description分组描述。isExpandedByDefault区块对访客是否默认展开。showCurrentStatus分组标题旁是否显示状态。showUptimePercent分组旁是否显示正常运行时间百分比。uptimePercentPrecision该百分比保留的小数位数。viewModeList或Grid。rowAxisLabel网格分组的行维度名称。rowAxisValues网格分组的行取值。columnAxisLabel网格分组的列维度名称。columnAxisValues网格分组的列取值。注意导入只创建分组不创建资源——监视器需要之后通过添加监视器或Add Multiple加入。总结OneUptime 状态页的资源与分组体系将监控数据与对外展示解耦displayName、displayDescription、displayTooltip等展示字段与监视器自身配置完全分离你可以在不改动任何监控逻辑的前提下自由重组页面的信息架构分组既支持扁平分区也支持业务单元 › 区域 › 市场式的嵌套层级并可通过 List/Grid 两种布局适配服务清单与区域×服务矩阵两类典型场景。所有开关与字段都对应着 StatusPageResource.ts 与 StatusPageGroup.ts 中的真实数据列理解这些底层结构有助于你更精确地把控状态页的呈现效果。延伸阅读状态页概览——状态页是什么各部分如何拼合。状态页品牌与域名——徽标、网站图标、图表颜色以及把页面放到自有域名。订阅者与公告——这些资源发生变化时谁会收到通知。公共 API——以编程方式读取状态页数据。事件状态与严重级别——什么会让事件出现在页面上又是什么让它消失。赞分享可观测性后端运维前端云原生微服务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 状态页资源与分组Resources Groups完全指南从单行监控到多级分组与网格布局OneUptime 状态页资源与分组Resources Groups完全指南从单行监控到多级分组与网格布局 本指南以 OneUptime 官方文档《R可观测性后端运维前端云原生微服务AI AgentOneUptime 状态页资源与分组配置指南从监控器行到嵌套分组与网格布局OneUptime 状态页资源与分组配置指南从监控器行到嵌套分组与网格布局 状态页是 OneUptime 监控体系中面向访客的公开门户而 资源Resour可观测性后端运维前端云原生微服务AI Agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考