sudhanshu-acl/AIOPS-FRONTEND

# AIOps 前端应用 这是 AIOps 平台的前端应用。基于 React (TypeScript)、Vite、Tailwind CSS、Recharts 和 React Router 构建。 ## 概述 AIOps 平台旨在提供高密度、以行动为导向的可观测性，允许运维人员监控系统、处理告警、调查根本原因 (RCA) 以及分析日志。 ## 模块与页面详情 应用程序包含以下可通过主导航栏访问的核心模块： - **Dashboard (`/`)**：系统健康状况、活跃告警和近期异常的高层级概览。 - **Alerts (`/alerts`)**：用于管理、过滤和确认系统告警的集中视图。 - **Analytics (`/analytics`)**：使用 `recharts` 展示的详细指标和性能图表。 - **Anomalies (`/anomalies`)**：AI 驱动的异常检测流，显示预期系统行为中的偏差。 - **RCA Investigations (`/rca`)**：用于根本原因分析的工作流，以诊断底层基础设施问题。 - **Topology (`/topology`)**：网络和微服务架构的可视化表示。 - **Projects & Servers (`/projects`)**：用于管理不同组织项目及其关联服务器资源的管理页面。 - **Users (`/users`)**：用户管理、注册和目录。 - **Roles & Permissions (`/roles`)**：用于管理访问级别的 RBAC (Role-Based Access Control，基于角色的访问控制) 设置。 - **Log Explorer (`/log-explorer`)**：用于实时查询和过滤系统日志的高级界面。 - **Audit Logs (`/logs`)**：用户操作和平台修改的历史追踪记录。 - **Settings (`/settings`)**：AIOps 平台的全局配置。 ## 如何从后端系统获取数据 目前，应用程序依赖于位于 `src/services/dummyData.ts` 的模拟数据，以进行快速原型设计和 UI 开发。要将前端连接到实时的后端系统（例如 FastAPI、Node.js），请按照以下步骤操作： ### 1. 设置环境变量 在项目根目录下创建一个 `.env` 文件，用于存储后端 API URL。Vite 要求自定义环境变量以 `VITE_` 为前缀。 ``` # .env VITE_API_BASE_URL=http://localhost:8000/api/v1 ``` ### 2. 安装 HTTP 客户端（可选但推荐） 虽然您可以使用原生的 `fetch` API，但推荐使用 `axios`，以获得更好的请求拦截、拦截器和错误处理能力。 ``` npm install axios ``` ### 3. 创建 API 客户端配置 创建一个新文件 `src/services/apiClient.ts` 来配置您的 HTTP 客户端并自动包含身份验证令牌。 ``` // src/services/apiClient.ts import axios from 'axios'; const apiClient = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, headers: { 'Content-Type': 'application/json', }, }); // Add an interceptor to inject the auth token (e.g., from localStorage) apiClient.interceptors.request.use((config) => { const token = localStorage.getItem('auth_token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); export default apiClient; ``` ### 4. 创建服务模块 与其从 `dummyData.ts` 中拉取数据，不如为每个领域创建特定的服务文件（例如 `src/services/alertService.ts`）。 ``` // src/services/alertService.ts import apiClient from './apiClient'; export interface Alert { id: string; severity: 'Critical' | 'High' | 'Medium' | 'Low'; message: string; timestamp: string; } export const getAlerts = async (): Promise => { const response = await apiClient.get('/alerts'); return response.data; }; ``` ### 5. 在 React 组件中获取数据 使用 React 的 `useEffect` 和 `useState`（或像 `react-query` / `SWR` 这样的数据获取库）在组件内使用这些服务。 ``` import React, { useEffect, useState } from 'react'; import { getAlerts, Alert } from '../services/alertService'; export const AlertsPage: React.FC = () => { const [alerts, setAlerts] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const data = await getAlerts(); setAlerts(data); } catch (error) { console.error("Failed to fetch alerts", error); } finally { setLoading(false); } }; fetchData(); }, []); if (loading) return

Loading alerts...

; return (

{alerts.map(alert => (

{alert.message}

))}

); }; ``` ### 后端集成的后续步骤 1. 将所有 `import ... from '../services/dummyData'` 的用法替换为您实际的 API 服务调用。 2. 在您的 UI 组件中处理加载和错误状态。 3. 实现标准的登录/注销流程，以获取和清除 `auth_token`。 ## 本地开发 要在本地运行项目： ``` # 安装依赖 npm install # 启动 Vite 开发服务器 npm run dev # 为生产环境构建 npm run build ```

标签：AIOps, Apex, AV绕过, FastAPI, GNU通用公共许可证, IT运营, Mutation, Node.js, OISF, React, React Router, Recharts, SaaS平台, Syscalls, Tailwind CSS, TypeScript, UI界面, Vite, Web应用开发, 事件关联, 云安全态势管理, 代码示例, 仪表盘, 前端应用, 可视化, 告警管理, 大屏展示, 大数据分析, 安全插件, 审计日志, 异常检测, 微服务架构, 性能监控, 拓扑图, 插件系统, 数据分析, 无线安全, 日志探索器, 日志管理, 智能运维, 机器学习, 权限管理(RBAC), 根因分析(RCA), 用户管理, 网络安全审计, 自动化攻击, 运维自动化