尧图网页设计 
OneUptime 状态页资源与分组完全指南从单条监控到多级分组与 Grid 矩阵布局【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime本篇指南聚焦 OneUptime 开源可观测平台中状态页Status Page的**资源Resources与分组Groups**模块资源是状态页上的一条可见行一个监控器或监控器组分组则是把这些行组织成 API、Web 应用、数据管道 等章节的容器。读完本文你将掌握资源屏幕的完整布局、单条/批量添加监控的两种流程、五项展示选项工具提示、当前状态、可用性百分比、历史图表、精度的配置逻辑、多级嵌套分组的创建与管理以及从 CSV 批量导入整棵分组树的方法并能对照仓库源码理解每个字段在数据模型层的真实定义与默认值。本文依据 法文原版文档另有 英文版编写涉及的字段名、默认值与导入规则均可在仓库源码中交叉验证。核心概念什么是资源与分组**资源Resource**就是状态页上的一行——一个带名称、当前状态以及可选的可用性百分比和历史图表的监控器或监控器组。访问者看到这一行就能判断是我这边的问题还是他们那边的问题。**分组Group**则是容纳资源的章节容器。当一个状态页有四十个监控器时分组能把它组织成 API、Web 应用、数据管道 这样的可读结构而不是一张无穷无尽的清单。两者都在同一个屏幕上配置打开一个状态页在侧边菜单中选择Ressources资源——在未启用监控器组Monitor Groups的项目中该入口名称为Moniteurs监控器。分组原本有独立页面现在已合并到此屏幕旧 URL/groups会直接重定向到这里。命名建议是本文反复强调的第一原则资源名应像客户谈论你的产品那样命名——Checkout API而不是prod-checkout-lb-healthcheck-us-east-1。这是访问者在故障期间回答问题出在我这还是你们那的关键一行。资源屏幕Ressources Screen布局资源屏幕一分为二左侧分组浏览器Group Browser——分组的树状列表。顶部有Search groups...搜索框下方有计数器形如3 groups · 12 resources。当分组数量超过可视区域时Show N more of M按钮会揭示剩余部分。Top of page页面顶部——浏览器中的第一行存放不属于任何分组的资源。它的提示文案准确说明了用途访问者最先看到这些资源它们永远排在所有分组之上。如果页面完全没有分组右侧面板会显示为All resources。右侧资源面板Resources Pane——显示所选分组的内容。面板头部包含Edit Group编辑分组、主按钮Ajouter un moniteur添加监控器以及More actions更多操作溢出菜单。卡片头部还有两个按钮New Group新建分组和一个三点菜单内含Import groups from CSV从 CSV 导入分组和Actualiser刷新。空状态Empty States会明确指引下一步操作空分组显示No monitors here yet附Ajouter un moniteur、Add Multiple按钮且仅在状态页完全没有分组时显示Create a Group。搜索无结果显示No resources match your search。浏览器为空时说明分组用于把过长的状态页切分成章节且支持嵌套。添加监控器Add a Monitor选择资源要落入的分组或选择Top of page作为无分组行点击Ajouter un moniteur。弹出的窗口标题为Add a monitor to {group}包含两个步骤Détails du moniteur监控器详情和Avancé高级。监控器详情Détails du moniteur步骤包含字段说明Moniteur监控器项目内监控器的下拉列表占位文案为 Sélectionner le moniteur选择监控器。必填。Nom daffichage显示名称必填。访问者实际看到的文字它与监控器本身的名称分开存储——因此在这里重命名不会影响底层监控。Description描述可选 Markdown显示在行的下方适合一句话说明该服务实际承担什么职责。如果项目启用了监控器组Monitor Groups下拉列表下方会出现Add a Monitor Group instead.链接——点击后Moniteur下拉框会替换为Moniteur Groupe监控器组下拉框占位文案 Sélectionner le groupe de moniteurs链接则切换为Add a Monitor instead.用于切回。当你想让状态页的一行代表多个检查的聚合结果时就应使用监控器组。批量添加Add MultipleAdd Multiple在More actions菜单中显示为Add multiple monitors打开Add Multiple Monitors窗口。两个步骤与单条添加相同但第一步提供多选的Moniteurs列表而非单个下拉框且Avancé步骤中选择的展示选项会应用到所有选中的监控器。这是快速搭建一个新页面最高效的方式。资源的展示选项Display OptionsAvancé高级步骤在单条添加表单与批量添加窗口中完全一致。这里的所有选项按资源生效——同一分组的两个行可以配置成不同的展示方式字段作用默认值Infobulle工具提示displayTooltip状态页上资源旁显示的补充文本适合标注作用范围如 Clients US et UE美欧客户。关闭Afficher létat actuel de la ressource显示资源当前状态showCurrentStatus在行旁显示实时状态——运行中operational、降级degraded、离线offline。开启Afficher le % de disponibilité显示可用性百分比showUptimePercent在资源旁显示可用性百分比。关闭Sélectionner la précision de disponibilité选择可用性精度uptimePercentPrecision仅当显示可用性百分比开启时出现。必填默认一位小数。一位小数Afficher le graphique de lhistorique des états显示状态历史图表showStatusHistoryChart显示该资源的按日可用性柱状图。开启第一步骤的Nom daffichage显示名称displayName与Description描述displayDescription同样属于纯展示范畴——它们永远不会修改监控器本身。这些字段在数据模型层的定义可以直接在 StatusPageResource 模型 中验证。例如showCurrentStatus的数据库列定义带default: true与isDefaultValueColumn: trueStatusPageResource.ts#L747-L758showUptimePercent默认falseStatusPageResource.ts#L788-L799showStatusHistoryChart默认trueStatusPageResource.ts#L870-L881与文档描述的默认行为完全一致。displayTooltip在模型中是LongText列StatusPageResource.ts#L706-L717displayDescription则是 Markdown 列StatusPageResource.ts#L664-L676这与描述支持 Markdown的界面说明互为印证。可用性百分比与历史图表Uptime Percent History ChartsAfficher le % de disponibilité和Afficher le graphique de lhistorique des états都依赖一个位于别处的页面级设置。该设置位于Pages de statut → votre page → Avancé → Paramètres avancés状态页 → 你的页面 → 高级 → 高级设置中的Paramètres de lhistorique de disponibilité可用性历史设置卡片字段名为Afficher lhistorique de disponibilité (en jours)显示可用性历史天数。它接受 1 到 90 天默认值 90。因此操作顺序是先逐资源开启开关再为整页一次性设置时间窗口。精度是一个编辑决策Precision is an editorial choice。Sélectionner la précision de disponibilité下拉框提供四个选项其枚举定义见 UptimePrecision.ts选项枚举值99% (No Decimal)NO_DECIMAL99.9% (One Decimal)ONE_DECIMAL99.99% (Two Decimal)TWO_DECIMAL99.999% (Three Decimal)THREE_DECIMAL小数位越多看起来越精确——也就越容易为第三位小数争吵。如果发布的是三个九的 SLA就对齐到三位精度不要再往上加。分组拥有自己独立的这些开关副本见下文因此一个分组可以显示聚合百分比而其中包含的监控器保持低调反之亦然。历史图表柱状条的颜色以及哪些监控器状态被视为故障down都在品牌定制屏幕Page de vue densemble概览页中配置详见 状态页品牌定制与域名。分组Groups点击New Group打开Create New Status Page Group表单包含三个步骤Détails du groupe分组详情、Mise en page布局和Avancé高级。分组详情Détails du groupe字段说明Nom du groupe分组名称name必填。访问者看到的章节标题。Description du groupe分组描述description可选 Markdown显示在章节标题下方。Parent Group父分组parentStatusPageGroupId可选。保持No parent group (top level)无父分组 / 顶级即为一层分组。Développer par défaut sur la page de statut状态页上默认展开isExpandedByDefault决定访问者看到时章节是展开还是折叠。Avancé高级复用了资源的开关但作用范围是分组级别Afficher létat actuel du groupe显示分组当前状态showCurrentStatus——默认开启在分组标题旁显示一个状态。Afficher le % de disponibilité显示可用性百分比showUptimePercent——默认关闭开启后会出现Sélectionner la précision de disponibilité选择精度。编辑方式同样统一面板头部的Edit Group或浏览器行菜单中的Edit group都会打开Edit Status Page Group窗口并带Enregistrer les modifications保存修改按钮。面板头部会用小徽章pills标示当前生效的设置——Grid、Collapsed by default、Uptime %——无需打开表单即可一览分组配置。分组模型的字段定义可在 StatusPageGroup.ts 中核对name是必填ShortText且在同一状态页内唯一UniqueColumnBy(statusPageId)StatusPageGroup.ts#L377-L391isExpandedByDefault默认trueStatusPageGroup.ts#L612-L623showCurrentStatus默认trueStatusPageGroup.ts#L700-L711showUptimePercent默认falseStatusPageGroup.ts#L741-L752与界面说明完全一致。此外模型还通过SlugifyColumn(name, slug)从名称自动生成 slugStatusPageGroup.ts#L82并暴露为CrudApiEndpoint(new Route(/status-page-group))StatusPageGroup.ts#L81说明分组管理同样走标准 CRUD API。管理一个分组Manage a Group浏览器中每行的菜单包含Edit group、Move up、Move down、Afficher lID显示 ID和Delete group。面板的More actions菜单提供对应的长文本版本——Edit this group、Add a sub group添加子分组、Move group up、Move group down、Show group ID、Actualiser刷新和Delete this group。一个未填名称就保存的分组会显示为Untitled group——这通常是个提示说明你本来想输入点什么。嵌套分组Nesting Groups分组是可嵌套的在子分组的Parent Group字段中指定父分组或使用浏览器中的Add a sub group inside this group动作。表单的帮助文本描述了这种设计的适用形态——例如Entities › Region › Market实体 › 区域 › 市场——并说明每个层级都会显示其下方所有内容的聚合状态与可用性。当一个分组有子分组时资源面板会显示一行Sub groups子分组徽章直接跳转到每个子分组——无需重新经过浏览器即可遍历整个层级。嵌套在大页面上尤其有意义托管服务商的产品之下套区域分销商的业务单元之下套市场。而对于只有十二个监控器的页面单一扁平层级反而更友好。从数据模型看嵌套通过自引用实现StatusPageGroup通过parentStatusPageGroupId关联到自己StatusPageGroup.ts#L282-L347字段注释明确说明空值表示顶级分组。仓库中还包含专门的服务端测试 StatusPageGroupNesting.test.ts 来校验嵌套行为。列表或网格布局List or Grid LayoutMise en page布局步骤定义分组的Mode daffichageviewMode它会改变公开渲染效果。枚举定义见 StatusPageGroupViewMode.ts如果你想要……选择显示一个简单的垂直服务列表每行一个服务List列表默认选择在矩阵中显示同一服务跨多个区域或租户的情况Grid网格选择Grid后会额外出现四个字段Libellé de laxe des lignes行轴标签——行的维度名称占位文案Service。Valeurs de laxe des lignes行轴值——行本身通过Add Row逐个添加占位文案e.g. Auth。Étiquette de laxe des colonnes列轴标签——列的维度占位文案Region。Valeurs de laxe des colonnes列轴值——通过Add Column添加占位文案e.g. US-East。网格分组中的每个监控器随后被放置进一个单元格因此批量添加窗口在选监控器的同时会要求指定行和列并复用你自己的轴标签。先搭好轴再添加监控器。没有行和列的网格分组会显示一个橙色警告说明在轴存在之前没有地方放置监控器并附Set up the grid按钮——同时Ajouter un moniteur按钮在轴搭好前会消失。网格字段在模型中的存储方式也值得注意rowAxisLabel/columnAxisLabel是短文本列StatusPageGroup.ts#L866-L920而rowAxisValues/columnAxisValues是逗号分隔的标签列表长文本列字段注释StatusPageGroup.ts#L950-L1000明确指出其决定网格布局中的行列顺序——这就是界面上 Add Row / Add Column 逐个添加的底层存储形式。排列访问者看到的内容Ordering顺序是显式指定的而非字母序可以在三个位置调整分组内部的资源——直接拖拽行。面板会提示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此时应清空搜索。网格分组从不支持拖拽排序因为位置由行/列轴决定。数据层同样支持显式排序StatusPageResource和StatusPageGroup模型都定义了order数值列StatusPageResource.ts#L989-L998、StatusPageGroup.ts#L572-L582注释为 Order / Priority of this resource即拖拽与 Move up/down 最终写入的就是这个字段。把用户最常提及的服务放在顶部。故障期间到访的访问者通常读完第一屏就停止滚动。从 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是必填列。支持的列如下与导入解析器 StatusPageGroupCsv.ts 中STATUS_PAGE_GROUP_CSV_COLUMNS常量定义一致StatusPageGroupCsv.ts#L69-L82列定义name分组名称。必填。parentName该分组嵌套在哪个分组的名称。description分组描述。isExpandedByDefault访问者看到时章节是否默认展开。showCurrentStatus分组标题旁是否显示状态。showUptimePercent分组旁是否显示可用性百分比。uptimePercentPrecision该百分比的精度小数位。viewModeList或Grid。rowAxisLabel网格分组的行维度名称。rowAxisValues网格分组的行值。columnAxisLabel网格分组的列维度名称。columnAxisValues网格分组的列值。导入只创建分组不创建资源——之后再用Ajouter un moniteur或Add Multiple添加监控器。源码层面的导入逻辑比界面提示更严格值得展开布尔列宽容解析parseBoolean接受true/false、yes/no、1/0等多种写法StatusPageGroupCsv.ts#L280-L306其他任何值都视为错误而非静默转为false避免off 悄悄变成展开这类意外。枚举列模糊匹配parseEnumCell通过normalizeEnumCell去掉非字母数字字符后匹配StatusPageGroupCsv.ts#L313-L355因此One Decimal、one-decimal、ONE_DECIMAL均等效viewMode同理。精度自动填充当showUptimePercent为 true 而未指定uptimePercentPrecision时解析器默认填入ONE_DECIMAL与表单行为一致StatusPageGroupCsv.ts#L531-L539。嵌套深度上限 10MAX_GROUP_NESTING_DEPTH 10StatusPageGroupCsv.ts#L34超过该深度的行会在预览阶段被标记跳过而不是在写入中途失败。父依赖排序planStatusPageGroupImport按依赖顺序分批创建——先创建顶级分组再创建引用它们的子分组循环引用或父分组缺失的行会被跳过并附明确原因StatusPageGroupCsv.ts#L590-L699。网格列误用即报错在viewMode非Grid的行中填写网格轴列会被判定为矛盾并报错而不是悄悄丢弃StatusPageGroupCsv.ts#L488-L502。仓库为这套导入逻辑提供了完整的测试保障StatusPageGroupCsv.test.ts 钉住解析器行为StatusPageGroupImportRunner.test.ts 与 StatusPageGroupImportPageInvariants.test.ts 验证运行与页面约束。延伸阅读状态页概述——什么是状态页各部件如何组合。状态页品牌定制与域名——logo、favicon、图表颜色以及把页面挂到自有域名。订阅者与公告——这些资源状态变化时谁会收到通知。公共 API——以编程方式读取状态页数据。事件的状态与严重级别——什么让事件出现在页面上又怎样消失。【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OneUptime 状态页资源与分组完全指南：从单条监控到多级分组与 Grid 矩阵布局
OneUptime 状态页资源与分组完全指南从单条监控到多级分组与 Grid 矩阵布局【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime本篇指南聚焦 OneUptime 开源可观测平台中状态页Status Page的**资源Resources与分组Groups**模块资源是状态页上的一条可见行一个监控器或监控器组分组则是把这些行组织成 API、Web 应用、数据管道 等章节的容器。读完本文你将掌握资源屏幕的完整布局、单条/批量添加监控的两种流程、五项展示选项工具提示、当前状态、可用性百分比、历史图表、精度的配置逻辑、多级嵌套分组的创建与管理以及从 CSV 批量导入整棵分组树的方法并能对照仓库源码理解每个字段在数据模型层的真实定义与默认值。本文依据 法文原版文档另有 英文版编写涉及的字段名、默认值与导入规则均可在仓库源码中交叉验证。核心概念什么是资源与分组**资源Resource**就是状态页上的一行——一个带名称、当前状态以及可选的可用性百分比和历史图表的监控器或监控器组。访问者看到这一行就能判断是我这边的问题还是他们那边的问题。**分组Group**则是容纳资源的章节容器。当一个状态页有四十个监控器时分组能把它组织成 API、Web 应用、数据管道 这样的可读结构而不是一张无穷无尽的清单。两者都在同一个屏幕上配置打开一个状态页在侧边菜单中选择Ressources资源——在未启用监控器组Monitor Groups的项目中该入口名称为Moniteurs监控器。分组原本有独立页面现在已合并到此屏幕旧 URL/groups会直接重定向到这里。命名建议是本文反复强调的第一原则资源名应像客户谈论你的产品那样命名——Checkout API而不是prod-checkout-lb-healthcheck-us-east-1。这是访问者在故障期间回答问题出在我这还是你们那的关键一行。资源屏幕Ressources Screen布局资源屏幕一分为二左侧分组浏览器Group Browser——分组的树状列表。顶部有Search groups...搜索框下方有计数器形如3 groups · 12 resources。当分组数量超过可视区域时Show N more of M按钮会揭示剩余部分。Top of page页面顶部——浏览器中的第一行存放不属于任何分组的资源。它的提示文案准确说明了用途访问者最先看到这些资源它们永远排在所有分组之上。如果页面完全没有分组右侧面板会显示为All resources。右侧资源面板Resources Pane——显示所选分组的内容。面板头部包含Edit Group编辑分组、主按钮Ajouter un moniteur添加监控器以及More actions更多操作溢出菜单。卡片头部还有两个按钮New Group新建分组和一个三点菜单内含Import groups from CSV从 CSV 导入分组和Actualiser刷新。空状态Empty States会明确指引下一步操作空分组显示No monitors here yet附Ajouter un moniteur、Add Multiple按钮且仅在状态页完全没有分组时显示Create a Group。搜索无结果显示No resources match your search。浏览器为空时说明分组用于把过长的状态页切分成章节且支持嵌套。添加监控器Add a Monitor选择资源要落入的分组或选择Top of page作为无分组行点击Ajouter un moniteur。弹出的窗口标题为Add a monitor to {group}包含两个步骤Détails du moniteur监控器详情和Avancé高级。监控器详情Détails du moniteur步骤包含字段说明Moniteur监控器项目内监控器的下拉列表占位文案为 Sélectionner le moniteur选择监控器。必填。Nom daffichage显示名称必填。访问者实际看到的文字它与监控器本身的名称分开存储——因此在这里重命名不会影响底层监控。Description描述可选 Markdown显示在行的下方适合一句话说明该服务实际承担什么职责。如果项目启用了监控器组Monitor Groups下拉列表下方会出现Add a Monitor Group instead.链接——点击后Moniteur下拉框会替换为Moniteur Groupe监控器组下拉框占位文案 Sélectionner le groupe de moniteurs链接则切换为Add a Monitor instead.用于切回。当你想让状态页的一行代表多个检查的聚合结果时就应使用监控器组。批量添加Add MultipleAdd Multiple在More actions菜单中显示为Add multiple monitors打开Add Multiple Monitors窗口。两个步骤与单条添加相同但第一步提供多选的Moniteurs列表而非单个下拉框且Avancé步骤中选择的展示选项会应用到所有选中的监控器。这是快速搭建一个新页面最高效的方式。资源的展示选项Display OptionsAvancé高级步骤在单条添加表单与批量添加窗口中完全一致。这里的所有选项按资源生效——同一分组的两个行可以配置成不同的展示方式字段作用默认值Infobulle工具提示displayTooltip状态页上资源旁显示的补充文本适合标注作用范围如 Clients US et UE美欧客户。关闭Afficher létat actuel de la ressource显示资源当前状态showCurrentStatus在行旁显示实时状态——运行中operational、降级degraded、离线offline。开启Afficher le % de disponibilité显示可用性百分比showUptimePercent在资源旁显示可用性百分比。关闭Sélectionner la précision de disponibilité选择可用性精度uptimePercentPrecision仅当显示可用性百分比开启时出现。必填默认一位小数。一位小数Afficher le graphique de lhistorique des états显示状态历史图表showStatusHistoryChart显示该资源的按日可用性柱状图。开启第一步骤的Nom daffichage显示名称displayName与Description描述displayDescription同样属于纯展示范畴——它们永远不会修改监控器本身。这些字段在数据模型层的定义可以直接在 StatusPageResource 模型 中验证。例如showCurrentStatus的数据库列定义带default: true与isDefaultValueColumn: trueStatusPageResource.ts#L747-L758showUptimePercent默认falseStatusPageResource.ts#L788-L799showStatusHistoryChart默认trueStatusPageResource.ts#L870-L881与文档描述的默认行为完全一致。displayTooltip在模型中是LongText列StatusPageResource.ts#L706-L717displayDescription则是 Markdown 列StatusPageResource.ts#L664-L676这与描述支持 Markdown的界面说明互为印证。可用性百分比与历史图表Uptime Percent History ChartsAfficher le % de disponibilité和Afficher le graphique de lhistorique des états都依赖一个位于别处的页面级设置。该设置位于Pages de statut → votre page → Avancé → Paramètres avancés状态页 → 你的页面 → 高级 → 高级设置中的Paramètres de lhistorique de disponibilité可用性历史设置卡片字段名为Afficher lhistorique de disponibilité (en jours)显示可用性历史天数。它接受 1 到 90 天默认值 90。因此操作顺序是先逐资源开启开关再为整页一次性设置时间窗口。精度是一个编辑决策Precision is an editorial choice。Sélectionner la précision de disponibilité下拉框提供四个选项其枚举定义见 UptimePrecision.ts选项枚举值99% (No Decimal)NO_DECIMAL99.9% (One Decimal)ONE_DECIMAL99.99% (Two Decimal)TWO_DECIMAL99.999% (Three Decimal)THREE_DECIMAL小数位越多看起来越精确——也就越容易为第三位小数争吵。如果发布的是三个九的 SLA就对齐到三位精度不要再往上加。分组拥有自己独立的这些开关副本见下文因此一个分组可以显示聚合百分比而其中包含的监控器保持低调反之亦然。历史图表柱状条的颜色以及哪些监控器状态被视为故障down都在品牌定制屏幕Page de vue densemble概览页中配置详见 状态页品牌定制与域名。分组Groups点击New Group打开Create New Status Page Group表单包含三个步骤Détails du groupe分组详情、Mise en page布局和Avancé高级。分组详情Détails du groupe字段说明Nom du groupe分组名称name必填。访问者看到的章节标题。Description du groupe分组描述description可选 Markdown显示在章节标题下方。Parent Group父分组parentStatusPageGroupId可选。保持No parent group (top level)无父分组 / 顶级即为一层分组。Développer par défaut sur la page de statut状态页上默认展开isExpandedByDefault决定访问者看到时章节是展开还是折叠。Avancé高级复用了资源的开关但作用范围是分组级别Afficher létat actuel du groupe显示分组当前状态showCurrentStatus——默认开启在分组标题旁显示一个状态。Afficher le % de disponibilité显示可用性百分比showUptimePercent——默认关闭开启后会出现Sélectionner la précision de disponibilité选择精度。编辑方式同样统一面板头部的Edit Group或浏览器行菜单中的Edit group都会打开Edit Status Page Group窗口并带Enregistrer les modifications保存修改按钮。面板头部会用小徽章pills标示当前生效的设置——Grid、Collapsed by default、Uptime %——无需打开表单即可一览分组配置。分组模型的字段定义可在 StatusPageGroup.ts 中核对name是必填ShortText且在同一状态页内唯一UniqueColumnBy(statusPageId)StatusPageGroup.ts#L377-L391isExpandedByDefault默认trueStatusPageGroup.ts#L612-L623showCurrentStatus默认trueStatusPageGroup.ts#L700-L711showUptimePercent默认falseStatusPageGroup.ts#L741-L752与界面说明完全一致。此外模型还通过SlugifyColumn(name, slug)从名称自动生成 slugStatusPageGroup.ts#L82并暴露为CrudApiEndpoint(new Route(/status-page-group))StatusPageGroup.ts#L81说明分组管理同样走标准 CRUD API。管理一个分组Manage a Group浏览器中每行的菜单包含Edit group、Move up、Move down、Afficher lID显示 ID和Delete group。面板的More actions菜单提供对应的长文本版本——Edit this group、Add a sub group添加子分组、Move group up、Move group down、Show group ID、Actualiser刷新和Delete this group。一个未填名称就保存的分组会显示为Untitled group——这通常是个提示说明你本来想输入点什么。嵌套分组Nesting Groups分组是可嵌套的在子分组的Parent Group字段中指定父分组或使用浏览器中的Add a sub group inside this group动作。表单的帮助文本描述了这种设计的适用形态——例如Entities › Region › Market实体 › 区域 › 市场——并说明每个层级都会显示其下方所有内容的聚合状态与可用性。当一个分组有子分组时资源面板会显示一行Sub groups子分组徽章直接跳转到每个子分组——无需重新经过浏览器即可遍历整个层级。嵌套在大页面上尤其有意义托管服务商的产品之下套区域分销商的业务单元之下套市场。而对于只有十二个监控器的页面单一扁平层级反而更友好。从数据模型看嵌套通过自引用实现StatusPageGroup通过parentStatusPageGroupId关联到自己StatusPageGroup.ts#L282-L347字段注释明确说明空值表示顶级分组。仓库中还包含专门的服务端测试 StatusPageGroupNesting.test.ts 来校验嵌套行为。列表或网格布局List or Grid LayoutMise en page布局步骤定义分组的Mode daffichageviewMode它会改变公开渲染效果。枚举定义见 StatusPageGroupViewMode.ts如果你想要……选择显示一个简单的垂直服务列表每行一个服务List列表默认选择在矩阵中显示同一服务跨多个区域或租户的情况Grid网格选择Grid后会额外出现四个字段Libellé de laxe des lignes行轴标签——行的维度名称占位文案Service。Valeurs de laxe des lignes行轴值——行本身通过Add Row逐个添加占位文案e.g. Auth。Étiquette de laxe des colonnes列轴标签——列的维度占位文案Region。Valeurs de laxe des colonnes列轴值——通过Add Column添加占位文案e.g. US-East。网格分组中的每个监控器随后被放置进一个单元格因此批量添加窗口在选监控器的同时会要求指定行和列并复用你自己的轴标签。先搭好轴再添加监控器。没有行和列的网格分组会显示一个橙色警告说明在轴存在之前没有地方放置监控器并附Set up the grid按钮——同时Ajouter un moniteur按钮在轴搭好前会消失。网格字段在模型中的存储方式也值得注意rowAxisLabel/columnAxisLabel是短文本列StatusPageGroup.ts#L866-L920而rowAxisValues/columnAxisValues是逗号分隔的标签列表长文本列字段注释StatusPageGroup.ts#L950-L1000明确指出其决定网格布局中的行列顺序——这就是界面上 Add Row / Add Column 逐个添加的底层存储形式。排列访问者看到的内容Ordering顺序是显式指定的而非字母序可以在三个位置调整分组内部的资源——直接拖拽行。面板会提示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此时应清空搜索。网格分组从不支持拖拽排序因为位置由行/列轴决定。数据层同样支持显式排序StatusPageResource和StatusPageGroup模型都定义了order数值列StatusPageResource.ts#L989-L998、StatusPageGroup.ts#L572-L582注释为 Order / Priority of this resource即拖拽与 Move up/down 最终写入的就是这个字段。把用户最常提及的服务放在顶部。故障期间到访的访问者通常读完第一屏就停止滚动。从 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是必填列。支持的列如下与导入解析器 StatusPageGroupCsv.ts 中STATUS_PAGE_GROUP_CSV_COLUMNS常量定义一致StatusPageGroupCsv.ts#L69-L82列定义name分组名称。必填。parentName该分组嵌套在哪个分组的名称。description分组描述。isExpandedByDefault访问者看到时章节是否默认展开。showCurrentStatus分组标题旁是否显示状态。showUptimePercent分组旁是否显示可用性百分比。uptimePercentPrecision该百分比的精度小数位。viewModeList或Grid。rowAxisLabel网格分组的行维度名称。rowAxisValues网格分组的行值。columnAxisLabel网格分组的列维度名称。columnAxisValues网格分组的列值。导入只创建分组不创建资源——之后再用Ajouter un moniteur或Add Multiple添加监控器。源码层面的导入逻辑比界面提示更严格值得展开布尔列宽容解析parseBoolean接受true/false、yes/no、1/0等多种写法StatusPageGroupCsv.ts#L280-L306其他任何值都视为错误而非静默转为false避免off 悄悄变成展开这类意外。枚举列模糊匹配parseEnumCell通过normalizeEnumCell去掉非字母数字字符后匹配StatusPageGroupCsv.ts#L313-L355因此One Decimal、one-decimal、ONE_DECIMAL均等效viewMode同理。精度自动填充当showUptimePercent为 true 而未指定uptimePercentPrecision时解析器默认填入ONE_DECIMAL与表单行为一致StatusPageGroupCsv.ts#L531-L539。嵌套深度上限 10MAX_GROUP_NESTING_DEPTH 10StatusPageGroupCsv.ts#L34超过该深度的行会在预览阶段被标记跳过而不是在写入中途失败。父依赖排序planStatusPageGroupImport按依赖顺序分批创建——先创建顶级分组再创建引用它们的子分组循环引用或父分组缺失的行会被跳过并附明确原因StatusPageGroupCsv.ts#L590-L699。网格列误用即报错在viewMode非Grid的行中填写网格轴列会被判定为矛盾并报错而不是悄悄丢弃StatusPageGroupCsv.ts#L488-L502。仓库为这套导入逻辑提供了完整的测试保障StatusPageGroupCsv.test.ts 钉住解析器行为StatusPageGroupImportRunner.test.ts 与 StatusPageGroupImportPageInvariants.test.ts 验证运行与页面约束。延伸阅读状态页概述——什么是状态页各部件如何组合。状态页品牌定制与域名——logo、favicon、图表颜色以及把页面挂到自有域名。订阅者与公告——这些资源状态变化时谁会收到通知。公共 API——以编程方式读取状态页数据。事件的状态与严重级别——什么让事件出现在页面上又怎样消失。【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考