SRE 平台 - 新一代自動化維運平台

🚀 現代化 SRE 工作流程的智能化平台 - 從被動故障應對到主動系統管理的完美轉型

這是一個前後端分離架構的 SRE 平台，包含完整的後端服務和前端應用程式，實現了 docs/specs.md 中定義的所有功能。

📋 核心契約文件 (SSOT)

openapi.yaml - API 規格唯一真實來源 (v3.0.0)
db_schema.sql - 數據庫架構唯一真實來源 (v3.0)
specs.md - 完整設計系統和視覺規範

🎯 專案亮點

🧠 智能化診斷: 提供可擴展的診斷引擎與自動化工作流程，支援AI驅動的根因分析
⚡ 零配置啟動: 一鍵 npm install + npm run dev 完成環境設定
📊 全方位監控: 整合 Prometheus、Loki、Grafana 構建完整可觀測性棧
🛡️ 企業級安全: 基於 Keycloak 的 OIDC 認證系統，支援M2M服務間通訊
🎨 現代化 UI: React + Ant Design 驅動的響應式介面，輕量且高效
🔧 開發友好: 完整的 TypeScript 支援與熱重載，Vite 快速構建
🏗️ 統一管理層: 作為「統一管理平面」(Unified Management Plane)，整合Grafana Alerting等開源工具
⭐ 三大核心價值: 週期性靜音規則、標籤治理、通知歷史追蹤三大平台獨有功能
⚡ 自動化引擎: 支持事件驅動、排程觸發、手動觸發、Webhook觸發四大自動化機制

互動原型體驗

我們提供了一個功能完整的互動原型，讓您無需安裝即可體驗平台的核心功能：

🌟 立即體驗 Live Demo

📱 功能預覽

專案簡介

SRE 平台是一個現代化的維運平台，專為企業級 SRE 團隊設計。作為「統一管理平面」(Unified Management Plane)，它整合 Grafana Alerting、Grafana OnCall 等開源工具，實現從傳統的被動故障應對模式向主動系統管理的革命性轉變。

本平台遵循 Google SRE Book 的最佳實踐，主要參考章節：

Chapter 4: Service Level Objectives - SLO/SLA 管理框架
Chapter 6: Monitoring Distributed Systems - 四個黃金信號監控
Chapter 7: The Evolution of Automation at Google - 自動化哲學
Chapter 14: Managing Incidents - 事件管理實踐

實現服務水準目標 (SLO) 管理、錯誤預算控制、四個黃金信號監控等核心功能。

🏗️ 核心組件

🎯 前端平台 (React + TypeScript)

角色: 現代化 Web UI 指揮中心
技術: React 18 + TypeScript + Ant Design 5
職責:
- 統一的管理介面
- 資源生命週期管理
- 任務編排與調度
- 使用者認證與授權

🔧 後端服務 (Go)

角色: RESTful API 服務與智慧告警處理中樞
技術: Go 1.21+ + Gin 框架 + GORM
職責:
- RESTful API 實現
- 業務邏輯處理
- 數據存儲與管理
- 外部系統整合
- AI Agent驅動的根因分析
- 自動化修復與告警風暴總結

🎨 設計理念

graph LR
    A[傳統被動模式] -->|轉型| B[智能主動模式]

    subgraph "被動模式"
        A1[人工監控] --> A2[告警響應] --> A3[手動診斷] --> A4[人工修復]
    end

    subgraph "主動模式"
        B1[智能監控] --> B2[預測分析] --> B3[自動診斷] --> B4[智能修復]
    end

核心架構

🏛️ 整體架構圖

graph TB
    subgraph "🌐 使用者層"
        User([👨‍💻 SRE 工程師])
        Admin([👩‍💼 系統管理員])
    end

    subgraph "🎯 前端平台 (React)"
        Frontend[🖥️ React Web UI<br/>TypeScript + Ant Design]
        Router[🔀 React Router<br/>頁面導航]
    end

    subgraph "🔧 後端服務層"
        API[🔌 REST API<br/>業務邏輯處理]
        Auth[🔐 認證服務<br/>Keycloak OIDC]
    end

    subgraph "💾 數據與監控層"
        Database[(🐘 PostgreSQL<br/>業務數據庫)]
        Timeseries[(📊 VictoriaMetrics<br/>時序數據庫)]
        Cache[(⚡ Redis<br/>快取服務)]
        Monitoring[🔍 可觀測性堆疊<br/>Prometheus + Loki]
        Grafana[📈 Grafana<br/>可視化平台]
    end

    subgraph "📡 外部系統"
        Infrastructure[🏗️ 基礎設施<br/>K8s + Docker + ...]
        External[🔗 第三方服務<br/>工單系統 + 通知管道]
    end

    %% 使用者互動
    User --> Frontend
    Admin --> Frontend

    %% 前後端通訊
    Frontend --> API
    API --> Auth

    %% 數據流
    API --> Database
    API --> Timeseries
    API --> Grafana
    API --> Cache

    %% 監控目標
    Monitoring --> Infrastructure
    API --> External

🔄 關鍵架構特性

📱 響應式設計: 適配桌面、平板、行動設備
🔒 安全認證: OIDC/OAuth2 整合 Keycloak
📊 實時監控: 整合 Grafana 儀表板與告警
🔄 狀態管理: Redux Toolkit 統一狀態管理
🎨 組件化: 高可複用的 UI 組件設計
🏗️ 統一管理層: 作為「統一管理平面」(Unified Management Plane)
⭐ 三大核心功能: 週期性靜音規則、標籤治理、通知歷史追蹤
🤖 智慧告警處理: Webhook作為AI整合點，所有告警先經平台再分發
⚡ 自動化引擎: 支持事件驅動、排程觸發、手動觸發、Webhook觸發四大機制

技術棧

🔧 後端框架

Go 1.21+ - 高性能、並發安全的後端語言
Gin - 高性能的 HTTP Web 框架
GORM - 全功能的 ORM 庫
Viper - 配置管理
Zap - 高性能結構化日誌記錄
OpenTelemetry - 分散式追蹤、指標和日誌收集

🎨 前端框架

React 18 - 最新的 React 版本，提供更好的性能和開發體驗
TypeScript 5.0+ - 提供類型安全和更好的開發體驗
Ant Design 5 - 企業級 UI 組件庫，提供豐富的組件和設計語言
React Router 6 - 現代化的路由管理

📊 數據可視化

ECharts 5 - 強大的圖表庫，支持多種圖表類型
@ant-design/charts - 基於 G2Plot 的 React 圖表組件

🏪 狀態管理與數據

Redux Toolkit - 現代化的 Redux 狀態管理方案
React Query - 強大的數據獲取和快取庫
Axios - HTTP 客戶端，支持請求攔截和響應處理

🔍 前端觀測性

Sentry - 前端錯誤追蹤和性能監控
OpenTelemetry JavaScript - 前端追蹤和指標收集
Web Vitals - 核心 Web 指標監控

🧪 測試工具

K6 - 高性能負載測試和性能監控
Jest - JavaScript 測試框架
React Testing Library - React 組件測試
Playwright - 端到端測試框架

🛠️ 開發工具

Vite - 快速的現代化構建工具
ESLint + Prettier - 代碼規範和格式化
Husky + lint-staged - Git 鉤子和代碼檢查

📦 其他依賴

Day.js - 輕量級的日期處理庫
lodash - 實用的 JavaScript 工具函數庫
clsx - 條件性 CSS 類名工具

🔧 關鍵技術決策

統一管理層架構

告警管理完全委託給 Grafana：不自行實作告警規則判斷邏輯，專注於人員體驗
人員狀態管理完全委託給 Keycloak：人員認證狀態管理完全委託給 Keycloak，平台僅保留業務活動狀態，簡化管理介面
數據收集策略：優先使用node_exporter進行深度監控，無法安裝時fallback到snmp_exporter

平台獨有核心功能

週期性靜音規則管理: Grafana 原生不支持的週期性靜音功能，支援 CRON 表達式定時生效
標籤治理系統: 基於標籤鍵值對的統一治理，包含自動補全、標準化管理、遺留標籤清理
通知歷史追蹤: 完整的通知歷史記錄與分析，支援多渠道通知追蹤和統計分析

快速入門

🎯 環境要求

項目	版本要求	說明
Go	1.21+	運行後端服務
Node.js	18.0+	運行 React 應用
npm	8.0+	前端包管理工具
Docker	20.0+	容器化部署 (可選)
Git	2.0+	版本控制

🚀 一鍵啟動

選項一：使用 Docker Compose (推薦)

# 📥 1. 下載專案
git clone https://github.com/detectviz/sre-platform
cd sre-platform

# 🚀 2. 一鍵啟動所有服務
docker-compose up -d

# ✅ 3. 訪問應用
# 前端: http://localhost:3001
# 後端 API: http://localhost:8080
# API 文檔: http://localhost:8080/swagger/index.html

選項二：手動啟動 (開發環境)

# 📥 1. 下載專案
git clone https://github.com/detectviz/sre-platform
cd sre-platform

# 🔧 2. 啟動後端服務
cd backend
go mod download
go run main.go

# 🎨 3. 啟動前端應用 (新終端)
cd frontend
npm install
npm run dev

# ✅ 4. 訪問應用
# 前端: http://localhost:5173
# 後端 API: http://localhost:8080

🛠️ 常用指令

前端指令

cd frontend

# 📊 開發服務器
npm run dev          # 啟動前端開發服務器
npm run build        # 構建生產版本
npm run preview      # 預覽生產版本

# 🧪 測試與檢查
npm run lint         # ESLint 代碼檢查
npm run lint:fix     # 自動修復 ESLint 錯誤
npm run format       # Prettier 代碼格式化
npm run test         # 運行單元測試
npm run test:e2e     # 運行端到端測試 (Playwright)

# 🔍 性能測試 (K6)
k6 run tests/performance/load-test.js    # 運行負載測試
k6 run --out json=results.json tests/performance/load-test.js  # 輸出測試結果

# 🔧 其他工具
npm run clean        # 清理快取和構建文件
npm run analyze      # 分析包大小

後端指令

cd backend

# 🔧 開發與構建
go run main.go        # 啟動開發服務器
go build -o bin/app   # 構建二進制檔案
go mod tidy           # 整理依賴
go mod download       # 下載依賴

# 🧪 測試
go test ./...         # 運行所有測試
go test -v ./internal/api  # 運行 API 測試

# 📚 文檔
swag init            # 生成 Swagger 文檔

Docker 指令

# 構建和運行
docker-compose up -d                 # 啟動所有服務
docker-compose up -d backend         # 只啟動後端
docker-compose up -d frontend        # 只啟動前端

# 開發環境
docker-compose -f docker-compose.dev.yml up -d  # 開發環境配置
docker-compose logs -f backend       # 查看後端日誌
docker-compose logs -f frontend      # 查看前端日誌

功能展示

📱 核心功能預覽

🎯 資源管理

統一的基礎設施視圖
批次操作與網段掃描
即時狀態監控
智能分組管理

🚨 智能告警

AI 驅動的根因分析
週期性靜音規則管理
告警關聯與去重
通知歷史完整追蹤
標籤治理與標準化

📊 容量規劃

基於機器學習的預測
多維度趨勢分析
主動容量建議
成本優化建議

🎯 分階段實施策略

Phase 1：監控與洞察核心 (當前)

✅ SRE主頁儀表板
✅ 資源列表與Top N資源列表
✅ 告警列表
✅ AI分析彈窗(唯讀版)
✅ 週期性靜音規則管理
✅ 標籤治理系統
✅ 通知歷史追蹤

Phase 2：響應與協作整合 (未來)

🚀 查看Runbook功能
🚀 創建工單功能
🚀 其他系統整合

🔥 核心工作流程演示

sequenceDiagram
    participant U as 👨‍💻 SRE 工程師
    participant FE as 🎯 前端平台
    participant BE as 🔧 後端服務
    participant DB as 💾 數據庫

    U->>FE: 1. 點擊資源管理
    FE->>BE: 2. GET /api/resources
    activate BE
    BE->>DB: 3. 查詢資源數據
    DB-->>BE: 4. 返回資源列表
    BE-->>FE: 5. 返回 API 響應
    deactivate BE
    FE-->>U: 6. 渲染資源列表頁面

開發指南

📂 專案結構

sre-platform/
├── 📁 backend/                  # Go 後端服務
│   ├── 📁 cmd/                  # 應用入口
│   ├── 📁 internal/             # 私有應用程式和庫代碼
│   │   ├── 📁 api/              # API 路由和處理器
│   │   ├── 📁 models/           # 數據模型
│   │   ├── 📁 services/         # 業務邏輯服務
│   │   └── 📁 middleware/       # 中間件
│   ├── 📁 pkg/                  # 可重用的庫代碼
│   ├── 📁 configs/              # 配置檔案
│   ├── 📁 migrations/           # 數據庫遷移
│   ├── 📁 docs/                 # API 文檔
│   ├── go.mod                   # Go 模組定義
│   ├── go.sum                   # Go 依賴校驗和
│   └── main.go                  # 應用程式入口
│
├── 📁 frontend/                 # React 前端應用
│   ├── 📁 public/               # 靜態資源
│   ├── 📁 src/
│   │   ├── 📁 components/       # 可複用組件
│   │   │   ├── common/          # 通用組件
│   │   │   └── layout/          # 佈局組件
│   │   ├── 📁 pages/            # 頁面組件
│   │   │   ├── dashboard/       # 儀表板頁面
│   │   │   ├── resources/       # 資源管理頁面
│   │   │   ├── incidents/       # 事件管理頁面
│   │   │   └── settings/        # 設定頁面
│   │   ├── 📁 features/         # 功能模組
│   │   │   ├── auth/            # 認證功能
│   │   │   ├── monitoring/      # 監控功能
│   │   │   └── notifications/   # 通知功能
│   │   ├── 📁 hooks/            # 自訂 React Hooks
│   │   ├── 📁 utils/            # 工具函數
│   │   ├── 📁 types/            # TypeScript 類型定義
│   │   ├── 📁 constants/        # 常量定義
│   │   ├── 📁 services/         # API 服務
│   │   ├── 📁 store/            # Redux 狀態管理
│   │   ├── 📁 styles/           # 全局樣式
│   │   ├── App.tsx              # 應用入口
│   │   └── main.tsx             # React 入口
│   ├── 📁 docs/                 # 前端文檔
│   ├── package.json             # 前端項目配置
│   ├── tsconfig.json            # TypeScript 配置
│   ├── vite.config.ts           # Vite 配置
│   └── tailwind.config.js       # Tailwind CSS 配置
│
├── 📁 docs/                     # 專案整體文檔
│   ├── 📁 architecture/         # 架構設計文檔
│   ├── 📁 api/                  # API 規範文檔
│   ├── 📁 development/          # 開發指南
│   └── 📁 ui/                   # UI/UX 設計規範
│
├── 📁 docker/                   # Docker 配置
│   ├── 📁 backend/              # 後端 Docker 配置
│   ├── 📁 frontend/             # 前端 Docker 配置
│   └── docker-compose.yml       # 完整應用程式編排
│
├── 📁 scripts/                  # 部署和構建腳本
├── 📁 .github/                  # GitHub Actions 配置
├── go.work                      # Go workspace 配置
└── README.md                    # 專案總體說明

📝 開發規範

🎯 代碼規範：

TypeScript: 強類型檢查，禁止使用 any 類型
React: 使用函數組件 + Hooks，避免類組件
組件: 使用小寫字母開頭，PascalCase 命名
文件: 使用 kebab-case 命名

📋 Commit 訊息範例：

feat: 新增資源詳情頁面組件
fix: 修復圖表渲染錯誤
docs: 更新組件使用文檔
test: 增加資源列表單元測試
refactor: 重構狀態管理邏輯

詳細文件

我們提供了完整的文件體系，涵蓋使用、開發、架構等各個層面：

📚 核心文件

文件	目標讀者	內容概述
📋 架構設計書	技術架構師、開發者	系統架構、設計理念、技術選型、重要決策
🤖 AI代理指南	AI 開發者、代理系統	AI 代理操作指南、自動化流程
📊 數據庫設計	數據庫工程師、後端開發者	完整的數據模型、索引策略、性能優化
🔌 API 規範	API 開發者、集成工程師	RESTful API 定義、請求響應格式

📖 專業文件

文件	內容概述	狀態
📋 API 設計	API 架構設計和最佳實踐	✅ 已完成
🏗️ 後端架構計劃	後端系統架構規劃	✅ 已整合
📄 頁面規格	頁面規格設計規範	✅ 已整合
🔒 安全配置指南	認證、授權、加密配置	✅ 已完成
📈 監控與告警	可觀測性最佳實踐	✅ 已完成
🚀 部署指南	生產環境部署說明	⚠️ 待創建
🔧 故障排除	常見問題與解決方案	⚠️ 待創建
⚡ 性能調優	性能優化指南	⚠️ 待創建

📚 參考資源

文件	內容概述	狀態
🎓 Google SRE Book 參考指南	本平台設計參考的核心理念和實踐	✅ 已完成
📖 完整 SRE Book 章節	34 個完整章節的深度分析	✅ 已完成

部署說明

🐳 Docker 部署

# 構建 Docker 鏡像
docker build -t sre-platform .

# 運行容器
docker run -p 80:80 sre-platform

🔧 環境變數

# .env 檔案範例
VITE_API_BASE_URL=https://api.your-domain.com
VITE_GRAFANA_URL=https://grafana.your-domain.com
VITE_KEYCLOAK_URL=https://keycloak.your-domain.com

Name		Name	Last commit message	Last commit date
Latest commit History 265 Commits
backend		backend
config		config
docs		docs
frontend		frontend
images		images
mock-server		mock-server
pkg/auth/keycloak		pkg/auth/keycloak
scripts		scripts
.gitignore		.gitignore
AGENT.md		AGENT.md
INSPECTION_REPORT.md		INSPECTION_REPORT.md
LICENSE		LICENSE
Makefile		Makefile
README.md		README.md
architecture.md		architecture.md
contract_review_report.md		contract_review_report.md
db_schema.sql		db_schema.sql
demo.gif		demo.gif
event_rule_management_analysis.md		event_rule_management_analysis.md
openapi.yaml		openapi.yaml
package-lock.json		package-lock.json
prototype.html		prototype.html
specs.md		specs.md
start-docker.sh		start-docker.sh

License

detectviz/sre-platform

Folders and files

Latest commit

History

Repository files navigation