190 lines
11 KiB
Markdown
190 lines
11 KiB
Markdown
# OPS 首期 UI 状态覆盖
|
||
|
||
## 1. 文档目标
|
||
|
||
本文定义第 1 阶段前端页面必须覆盖的状态，避免只实现“有数据时的页面”。所有页面至少需要考虑加载、空态、错误、成功、部分成功、无权限、操作中、操作失败和数据过期状态。
|
||
|
||
本文用于指导 `web/src/views/`、`web/src/components/`、`web/src/api/` 和验收矩阵编写。
|
||
|
||
## 2. 通用状态定义
|
||
|
||
| 状态 | 含义 | 页面要求 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 首次进入或刷新数据时接口未返回 | 使用骨架屏、表格加载或局部加载，不阻塞整个系统导航。 |
|
||
| 空态 | 接口成功但无数据 | 给出下一步动作，如新增、导入、配置采集或调整筛选。 |
|
||
| 错误 | 接口失败或后端返回错误码 | 显示失败原因、traceId 和重试入口。 |
|
||
| 成功 | 数据完整返回 | 显示主要数据、关键操作和更新时间。 |
|
||
| 部分成功 | 页面部分组件或部分接口失败 | 成功部分正常显示，失败组件显示局部错误，不整页崩溃。 |
|
||
| 无权限 | 用户无功能权限或数据权限 | 隐藏敏感数据，操作按钮禁用或不展示，保留必要说明。 |
|
||
| 操作中 | 用户提交确认、派单、关闭、导出等动作 | 按钮进入 loading，防止重复提交。 |
|
||
| 操作失败 | 用户动作失败 | 保留当前页面状态，显示失败原因和可恢复动作。 |
|
||
| 数据过期 | 数据不是最新或采集延迟 | 显示最近更新时间、最近成功采集时间和刷新入口。 |
|
||
|
||
通用交互要求：
|
||
|
||
- 所有错误提示必须带 `traceId`，便于后端排查。
|
||
- 删除、关闭、忽略、屏蔽、策略变更等动作必须二次确认。
|
||
- 表格页必须支持筛选条件保留、分页、刷新和空结果提示。
|
||
- 无权限不是错误；应区分“没有权限”和“接口失败”。
|
||
- 部分成功不能伪装成成功，必须提示哪些数据不可用。
|
||
|
||
## 3. 首页总览
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 顶部指标、告警趋势、资源健康、网络状态分别显示骨架屏 | 首屏无明显闪烁，组件独立加载。 |
|
||
| 空态 | 未接入资源时显示接入资源、配置采集、导入样例数据入口 | 不显示假数据。 |
|
||
| 错误 | 总览接口失败时显示错误摘要和重试按钮 | 可复制 traceId。 |
|
||
| 成功 | 显示待处理告警、资源总数、健康度、告警趋势、网络状态 | 数据来自真实接口。 |
|
||
| 部分成功 | 某一组件失败时仅该组件显示失败，其余组件正常 | 例如告警趋势失败不影响资源健康。 |
|
||
| 无权限 | 隐藏无权限模块，显示可访问模块 | 数据权限生效。 |
|
||
| 数据过期 | 显示最近刷新时间和采集延迟提示 | 采集失败不被隐藏。 |
|
||
|
||
## 4. 综合监控
|
||
|
||
### 4.1 资源列表
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 表格加载，筛选区可见但禁用提交 | 避免重复请求。 |
|
||
| 空态 | 显示新增资源、导入资源、自动发现入口 | 空态能引导首批资源接入。 |
|
||
| 错误 | 查询失败时保留筛选条件并允许重试 | 不清空用户筛选。 |
|
||
| 成功 | 显示资源名称、类型、IP、业务系统、采集状态、最高告警级别 | H3C/华三设备可识别厂商和型号。 |
|
||
| 部分成功 | 资源信息可见但实时指标缺失时标注“指标暂不可用” | 不把指标缺失当资源不存在。 |
|
||
| 无权限 | 只展示数据权限内资源 | 越权资源不可见。 |
|
||
| 数据过期 | 显示最近成功采集时间和失败原因 | 采集失败可追踪。 |
|
||
|
||
### 4.2 资源详情
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 基本信息、指标趋势、告警、采集任务分区加载 | 局部加载不阻塞页面。 |
|
||
| 空态 | 无指标时提示绑定模板或配置采集任务 | 有明确下一步。 |
|
||
| 错误 | 某类指标查询失败时显示局部错误 | 基本信息仍可查看。 |
|
||
| 成功 | 展示指标趋势、采集任务、关联告警、业务系统、资产位置 | 时序指标来自时序数据库。 |
|
||
| 部分成功 | 部分指标或接口流量缺失时标记缺失项 | 不影响其他指标。 |
|
||
| 无权限 | 无权查看敏感指标时隐藏具体值 | 权限提示清楚。 |
|
||
| 数据过期 | 显示最近采集成功时间、当前采集状态 | 支持手动刷新。 |
|
||
|
||
## 5. 告警中心
|
||
|
||
### 5.1 实时告警
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 告警列表 loading，筛选条件可见 | 不阻塞导航。 |
|
||
| 空态 | 显示“暂无待处理告警”，提供查看历史告警入口 | 不用假告警填充。 |
|
||
| 错误 | 查询失败时显示错误、traceId、重试 | 可定位后端问题。 |
|
||
| 成功 | 显示级别、资源、业务系统、摘要、首次触发、最近触发、状态、处理动作 | 告警与资源、业务系统连通。 |
|
||
| 部分成功 | 告警可见但资源详情缺失时标注“资源上下文不可用” | 告警不因上下文失败而消失。 |
|
||
| 无权限 | 无权确认、忽略、派单时禁用按钮 | 权限边界清楚。 |
|
||
| 操作中 | 确认、忽略、派单按钮 loading | 防止重复提交。 |
|
||
| 操作失败 | 保留告警原状态，显示失败原因 | 不乐观修改为成功。 |
|
||
|
||
### 5.2 告警详情
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 成功 | 展示原始事件、规则命中、降噪命中、通知记录、关联事件、工单、审计 | 能证明告警链路。 |
|
||
| 部分成功 | 通知记录或工单记录加载失败时局部提示 | 主告警仍可处理。 |
|
||
| 数据过期 | 提示告警最近更新时间和恢复判断时间 | 避免误判当前状态。 |
|
||
|
||
### 5.3 策略与模板
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 空态 | 无策略时提供创建阈值规则、Trap 规则、通知策略入口 | 能从空系统开始配置。 |
|
||
| 错误 | 规则校验失败时定位到字段 | 不允许保存无效规则。 |
|
||
| 成功 | 策略列表显示作用范围、状态、最近命中次数 | 规则可管理。 |
|
||
| 无权限 | 无权编辑策略时只读展示 | 变更权限受控。 |
|
||
|
||
## 6. 通知中心
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 通知记录列表加载 | 保留筛选条件。 |
|
||
| 空态 | 无通知记录时提示先配置告警通知策略 | 引导明确。 |
|
||
| 错误 | 查询发送记录失败时显示重试 | 可查看 traceId。 |
|
||
| 成功 | 显示站内消息、短信、邮件的发送状态、接收人、失败原因 | 三类优先渠道可验证。 |
|
||
| 部分成功 | 某渠道失败时显示局部失败，不影响其他渠道 | 通知失败不阻塞告警处理。 |
|
||
| 操作失败 | 手动重发失败时显示渠道返回原因 | 可再次重试。 |
|
||
|
||
## 7. 工单管理
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 工单列表 loading | 可保留筛选条件。 |
|
||
| 空态 | 无工单时提供手动创建工单入口 | 不影响告警列表。 |
|
||
| 错误 | 查询失败或流转失败显示原因 | 工单状态不被错误更新。 |
|
||
| 成功 | 展示工单编号、来源、资源、处理人、状态、优先级、更新时间 | 告警工单能回链告警。 |
|
||
| 部分成功 | 关联告警或资源加载失败时局部提示 | 工单主体仍可处理。 |
|
||
| 无权限 | 无权接单、转交、关闭时按钮禁用 | 数据权限和功能权限生效。 |
|
||
| 操作中 | 接单、转交、挂起、关闭按钮 loading | 防重复提交。 |
|
||
| 操作失败 | 并发关闭、无权限、状态非法时提示具体原因 | 状态机约束可见。 |
|
||
|
||
## 8. 报表管理
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 报表生成进度或图表加载 | 大范围查询不阻塞页面。 |
|
||
| 空态 | 时间范围无数据时提示调整条件 | 不显示 0 值假图。 |
|
||
| 错误 | 生成失败时显示原因和重试 | 支持 traceId。 |
|
||
| 成功 | 可查看并导出 TopN、故障、服务器、网络设备报表 | 数据来自指标、告警、工单真实记录。 |
|
||
| 部分成功 | 部分图表无数据或失败时局部提示 | 报表整体可读。 |
|
||
| 无权限 | 不展示无权限资源和敏感字段 | 导出也受权限控制。 |
|
||
| 数据过期 | 显示报表生成时间和数据截止时间 | 避免误解为实时数据。 |
|
||
|
||
## 9. 可视化大屏
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 加载中 | 大屏组件分区加载 | 不整屏空白。 |
|
||
| 空态 | 未配置大屏时提供创建或选择模板入口 | 首次使用可继续。 |
|
||
| 错误 | 某组件失败显示局部错误 | 不影响其他组件轮播。 |
|
||
| 成功 | 展示资源健康、实时告警、接口流量、业务状态、拓扑入口 | 数据来自后端。 |
|
||
| 部分成功 | 某数据源失败时显示降级提示 | 不用静态图冒充。 |
|
||
| 无权限 | 隐藏无权限业务或资源 | 大屏权限生效。 |
|
||
| 数据过期 | 显示最后刷新时间 | 可手动刷新。 |
|
||
|
||
## 10. 业务系统视图
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 空态 | 无业务系统时提供创建业务系统入口 | 支持 HIS/LIS/PACS/EMR 建模。 |
|
||
| 成功 | 展示业务健康、关联资源、告警、影响范围、时间轴、文档 | 业务视图与资源/告警连通。 |
|
||
| 部分成功 | 拓扑或时间轴失败时局部提示 | 业务基础信息可见。 |
|
||
| 无权限 | 无权业务系统不可见 | 数据权限隔离。 |
|
||
|
||
## 11. 3D 机房后端接口页面
|
||
|
||
第 1 阶段 OPS 不交付 3D 前端，但需要提供后端接口和接口验证页面或接口文档。
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 空态 | 未导入真实机柜数据时返回样例数据或空层级提示 | 不阻塞接口联调。 |
|
||
| 成功 | 返回数据中心、机房、机柜、U 位、设备、告警状态 | 外包前端可消费。 |
|
||
| 部分成功 | 设备资产未绑定监控资源时标注未绑定 | 不影响机柜结构展示。 |
|
||
| 无权限 | 无权机房或机柜不返回 | 权限生效。 |
|
||
| 数据过期 | 返回数据更新时间 | 外包前端可展示刷新状态。 |
|
||
|
||
## 12. 用户权限与系统管理
|
||
|
||
| 状态 | 页面表现 | 验收点 |
|
||
| --- | --- | --- |
|
||
| 空态 | 无角色、无用户组时提供创建入口 | 可从空系统初始化。 |
|
||
| 错误 | 保存权限失败时显示字段级错误 | 不保存半成品。 |
|
||
| 成功 | 用户、角色、数据权限、字典、参数可维护 | 权限变更写审计。 |
|
||
| 无权限 | 非管理员不可访问或只读 | 管理入口受控。 |
|
||
| 操作失败 | 删除被引用角色、停用当前用户等操作被拦截 | 规则清晰。 |
|
||
|
||
## 13. 全局验收清单
|
||
|
||
- [ ] 每个页面都有加载、空态、错误、成功、部分成功、无权限状态。
|
||
- [ ] 告警、工单、策略等关键操作有操作中、操作成功、操作失败反馈。
|
||
- [ ] 所有错误反馈包含 `traceId`。
|
||
- [ ] 部分成功不会导致整页不可用。
|
||
- [ ] 无权限状态不泄露敏感资源名称、IP、业务系统信息。
|
||
- [ ] 数据过期时显示最近更新时间或最近成功采集时间。
|
||
- [ ] 报表和大屏不使用静态展示数据作为验收依据。
|
||
- [ ] 移动端适配至少保证核心列表、详情、确认/派单动作可用；不要求独立移动端应用。
|