OpsGuard - 模拟仪表盘 🖥️

这是 OpsGuard 的前端界面。它充当可视化“大脑”，用于演示自主 SRE 代理的实际运行情况。

由于 OpsGuard 是一个后端优先的代理，此仪表盘旨在模拟生产环境，并将代理不可见的工作流程（摄取 → 分析 → 修复）可视化，用于演示和监控。

🌟 功能特性

• 赛博朋克/SRE 美学：深色模式、扫描线和电影级辉光效果，营造“任务控制中心”的沉浸感。
• 实时模拟控制：
  • CRASH：通过 API 手动触发严重事件（例如内存泄漏）。
  • RESET：将系统恢复至干净状态。
• 实时日志：类终端的日志流，展示代理的“思考过程”（AI 分析、查找根因、执行命令）。
• 流水线可视化器：进度步骤条，准确显示事件当前所处的生命周期阶段（摄取 → 诊断 → 等待 → 执行 → 已解决）。
• 指标模拟：当系统进入“严重”状态时，可视化展示 CPU/内存的突增。

🛠️ 安装设置

前提条件

• 确保 OpsGuard 后端正在 http://localhost:3000 上运行。

1. 安装依赖

npm install

2. 配置环境变量

创建一个 .env 文件（或使用默认值）：

VITE_BACKEND_URL=http://localhost:3000

3. 运行开发服务器

npm run dev

在浏览器中打开 http://localhost:5173。

🎮 如何运行演示

1. 启动后端和此前端。
2. 打开仪表盘。系统状态应显示为 OPERATIONAL（绿色）。
3. 单击右上角的 CRASH 按钮。
4. 观察：
   • 状态变为 CRITICAL（红色）。
   • 终端中出现 AI 日志。
   • “诊断”步骤被激活。
5. 操作：
   • 等待 AUTHORIZE AUTO-FIX 按钮出现。
   • 单击该按钮。
6. 解决：
   • 观察进度条显示“正在执行修复”。
   • 系统恢复为 OPERATIONAL。

🎨 自定义

• 样式：使用 TailwindCSS v4 构建。
• 图标：使用 lucide-react。
• 特效：“呼吸”辉光和扫描线的 CSS 动画位于 App.tsx 和 index.css 中。

📄 许可证

MIT