Skip to content

GitLab

"backend/internal/handler/vscode:/vscode.git/clone" did not exist on "70e9329e64f3104755a645373d510e87a406fb04"
Commit df1ef3de authored by ianshaw's avatar ianshaw
Browse files

refactor: 移除 Ops 监控模块 

移除未完成的运维监控功能，简化系统架构：
- 删除 ops_handler, ops_service, ops_repo 等后端代码
- 删除 ops 相关数据库迁移文件
- 删除前端 OpsDashboard 页面和 API
parent 45bd9ac7
Hide whitespace changes
Inline Side-by-side
backend/migrations/022_enable_ops_alert_webhook.sql deleted 100644 → 0
View file @ 45bd9ac7
-- Enable webhook notifications for rules with webhook_url configured
UPDATE ops_alert_rules
SET notify_webhook = TRUE
WHERE webhook_url IS NOT NULL
AND webhook_url <> ''
AND notify_webhook IS DISTINCT FROM TRUE;
backend/migrations/023_ops_metrics_request_counts.sql deleted 100644 → 0
View file @ 45bd9ac7
-- Add request counts to ops_system_metrics so the UI/alerts can distinguish "no traffic" from "healthy".
ALTER TABLE ops_system_metrics
ADD COLUMN IF NOT EXISTS request_count BIGINT NOT NULL DEFAULT 0,
ADD COLUMN IF NOT EXISTS success_count BIGINT NOT NULL DEFAULT 0,
ADD COLUMN IF NOT EXISTS error_count BIGINT NOT NULL DEFAULT 0;
backend/migrations/025_enhance_ops_monitoring.sql deleted 100644 → 0
View file @ 45bd9ac7
-- 运维监控中心 2.0 - 数据库 Schema 增强
-- 创建时间: 2026-01-02
-- 说明: 扩展监控指标,支持多维度分析和告警管理
-- ============================================
-- 1. 扩展 ops_system_metrics 表
-- ============================================
-- 添加 RED 指标列
ALTER TABLE ops_system_metrics
ADD COLUMN IF NOT EXISTS qps DECIMAL(10,2) DEFAULT 0,
ADD COLUMN IF NOT EXISTS tps DECIMAL(10,2) DEFAULT 0,
-- 错误分类
ADD COLUMN IF NOT EXISTS error_4xx_count BIGINT DEFAULT 0,
ADD COLUMN IF NOT EXISTS error_5xx_count BIGINT DEFAULT 0,
ADD COLUMN IF NOT EXISTS error_timeout_count BIGINT DEFAULT 0,
-- 延迟指标扩展
ADD COLUMN IF NOT EXISTS latency_p50 DECIMAL(10,2),
ADD COLUMN IF NOT EXISTS latency_p999 DECIMAL(10,2),
ADD COLUMN IF NOT EXISTS latency_avg DECIMAL(10,2),
ADD COLUMN IF NOT EXISTS latency_max DECIMAL(10,2),
-- 上游延迟
ADD COLUMN IF NOT EXISTS upstream_latency_avg DECIMAL(10,2),
-- 资源指标
ADD COLUMN IF NOT EXISTS disk_used BIGINT,
ADD COLUMN IF NOT EXISTS disk_total BIGINT,
ADD COLUMN IF NOT EXISTS disk_iops BIGINT,
ADD COLUMN IF NOT EXISTS network_in_bytes BIGINT,
ADD COLUMN IF NOT EXISTS network_out_bytes BIGINT,
-- 饱和度指标
ADD COLUMN IF NOT EXISTS goroutine_count INT,
ADD COLUMN IF NOT EXISTS db_conn_active INT,
ADD COLUMN IF NOT EXISTS db_conn_idle INT,
ADD COLUMN IF NOT EXISTS db_conn_waiting INT,
-- 业务指标
ADD COLUMN IF NOT EXISTS token_consumed BIGINT DEFAULT 0,
ADD COLUMN IF NOT EXISTS token_rate DECIMAL(10,2) DEFAULT 0,
ADD COLUMN IF NOT EXISTS active_subscriptions INT DEFAULT 0,
-- 维度标签 (支持多维度分析)
ADD COLUMN IF NOT EXISTS tags JSONB;
-- 添加 JSONB 索引以加速标签查询
CREATE INDEX IF NOT EXISTS idx_ops_metrics_tags ON ops_system_metrics USING GIN(tags);
-- 添加注释
COMMENT ON COLUMN ops_system_metrics.qps IS '每秒查询数 (Queries Per Second)';
COMMENT ON COLUMN ops_system_metrics.tps IS '每秒事务数 (Transactions Per Second)';
COMMENT ON COLUMN ops_system_metrics.error_4xx_count IS '客户端错误数量 (4xx)';
COMMENT ON COLUMN ops_system_metrics.error_5xx_count IS '服务端错误数量 (5xx)';
COMMENT ON COLUMN ops_system_metrics.error_timeout_count IS '超时错误数量';
COMMENT ON COLUMN ops_system_metrics.upstream_latency_avg IS '上游 API 平均延迟 (ms)';
COMMENT ON COLUMN ops_system_metrics.goroutine_count IS 'Goroutine 数量 (检测泄露)';
COMMENT ON COLUMN ops_system_metrics.tags IS '维度标签 (JSON), 如: {"account_id": "123", "api_path": "/v1/chat"}';
-- ============================================
-- 2. 创建维度统计表
-- ============================================
CREATE TABLE IF NOT EXISTS ops_dimension_stats (
id BIGSERIAL PRIMARY KEY,
timestamp TIMESTAMPTZ NOT NULL,
-- 维度类型: account, api_path, provider, region
dimension_type VARCHAR(50) NOT NULL,
dimension_value VARCHAR(255) NOT NULL,
-- 统计指标
request_count BIGINT DEFAULT 0,
success_count BIGINT DEFAULT 0,
error_count BIGINT DEFAULT 0,
success_rate DECIMAL(5,2),
error_rate DECIMAL(5,2),
-- 性能指标
latency_p50 DECIMAL(10,2),
latency_p95 DECIMAL(10,2),
latency_p99 DECIMAL(10,2),
-- 业务指标
token_consumed BIGINT DEFAULT 0,
cost_usd DECIMAL(10,4) DEFAULT 0,
created_at TIMESTAMPTZ DEFAULT NOW()
);
-- 创建复合索引以加速维度查询
CREATE INDEX IF NOT EXISTS idx_ops_dim_type_value_time
ON ops_dimension_stats(dimension_type, dimension_value, timestamp DESC);
-- 创建单独的时间索引用于范围查询
CREATE INDEX IF NOT EXISTS idx_ops_dim_timestamp
ON ops_dimension_stats(timestamp DESC);
-- 添加注释
COMMENT ON TABLE ops_dimension_stats IS '多维度统计表,支持按账户/API/Provider等维度下钻分析';
COMMENT ON COLUMN ops_dimension_stats.dimension_type IS '维度类型: account(账户), api_path(接口), provider(上游), region(地域)';
COMMENT ON COLUMN ops_dimension_stats.dimension_value IS '维度值,如: 账户ID, /v1/chat, openai, us-east-1';
-- ============================================
-- 3. 创建告警规则表
-- ============================================
ALTER TABLE ops_alert_rules
ADD COLUMN IF NOT EXISTS dimension_filters JSONB,
ADD COLUMN IF NOT EXISTS notify_channels JSONB,
ADD COLUMN IF NOT EXISTS notify_config JSONB,
ADD COLUMN IF NOT EXISTS created_by VARCHAR(100),
ADD COLUMN IF NOT EXISTS last_triggered_at TIMESTAMPTZ;
-- ============================================
-- 4. 告警历史表 (使用现有的 ops_alert_events)
-- ============================================
-- 注意: 后端代码使用 ops_alert_events 表,不创建新表
-- ============================================
-- 5. 创建数据清理配置表
-- ============================================
CREATE TABLE IF NOT EXISTS ops_data_retention_config (
id SERIAL PRIMARY KEY,
table_name VARCHAR(100) NOT NULL UNIQUE,
retention_days INT NOT NULL, -- 保留天数
enabled BOOLEAN DEFAULT true,
last_cleanup_at TIMESTAMPTZ,
created_at TIMESTAMPTZ DEFAULT NOW(),
updated_at TIMESTAMPTZ DEFAULT NOW()
);
-- 插入默认配置
INSERT INTO ops_data_retention_config (table_name, retention_days) VALUES
('ops_system_metrics', 30), -- 系统指标保留 30 天
('ops_dimension_stats', 30), -- 维度统计保留 30 天
('ops_error_logs', 30), -- 错误日志保留 30 天
('ops_alert_events', 90), -- 告警事件保留 90 天
('usage_logs', 90) -- 使用日志保留 90 天
ON CONFLICT (table_name) DO NOTHING;
COMMENT ON TABLE ops_data_retention_config IS '数据保留策略配置表';
COMMENT ON COLUMN ops_data_retention_config.retention_days IS '数据保留天数,超过此天数的数据将被自动清理';
-- ============================================
-- 6. 创建辅助函数
-- ============================================
-- 函数: 计算健康度评分
-- 权重: SLA(40%) + 错误率(30%) + 延迟(20%) + 资源(10%)
CREATE OR REPLACE FUNCTION calculate_health_score(
p_success_rate DECIMAL,
p_error_rate DECIMAL,
p_latency_p99 DECIMAL,
p_cpu_usage DECIMAL
) RETURNS INT AS $$
DECLARE
sla_score INT;
error_score INT;
latency_score INT;
resource_score INT;
BEGIN
-- SLA 评分 (40分)
sla_score := CASE
WHEN p_success_rate >= 99.9 THEN 40
WHEN p_success_rate >= 99.5 THEN 35
WHEN p_success_rate >= 99.0 THEN 30
WHEN p_success_rate >= 95.0 THEN 20
ELSE 10
END;
-- 错误率评分 (30分)
error_score := CASE
WHEN p_error_rate <= 0.1 THEN 30
WHEN p_error_rate <= 0.5 THEN 25
WHEN p_error_rate <= 1.0 THEN 20
WHEN p_error_rate <= 5.0 THEN 10
ELSE 5
END;
-- 延迟评分 (20分)
latency_score := CASE
WHEN p_latency_p99 <= 500 THEN 20
WHEN p_latency_p99 <= 1000 THEN 15
WHEN p_latency_p99 <= 3000 THEN 10
WHEN p_latency_p99 <= 5000 THEN 5
ELSE 0
END;
-- 资源评分 (10分)
resource_score := CASE
WHEN p_cpu_usage <= 50 THEN 10
WHEN p_cpu_usage <= 70 THEN 7
WHEN p_cpu_usage <= 85 THEN 5
ELSE 2
END;
RETURN sla_score + error_score + latency_score + resource_score;
END;
$$ LANGUAGE plpgsql IMMUTABLE;
COMMENT ON FUNCTION calculate_health_score IS '计算系统健康度评分 (0-100),权重: SLA 40% + 错误率 30% + 延迟 20% + 资源 10%';
-- ============================================
-- 7. 创建视图: 最新指标快照
-- ============================================
CREATE OR REPLACE VIEW ops_latest_metrics AS
SELECT
m.*,
calculate_health_score(
m.success_rate::DECIMAL,
m.error_rate::DECIMAL,
m.p99_latency_ms::DECIMAL,
m.cpu_usage_percent::DECIMAL
) AS health_score
FROM ops_system_metrics m
WHERE m.window_minutes = 1
AND m.created_at = (SELECT MAX(created_at) FROM ops_system_metrics WHERE window_minutes = 1)
LIMIT 1;
COMMENT ON VIEW ops_latest_metrics IS '最新的系统指标快照,包含健康度评分';
-- ============================================
-- 8. 创建视图: 活跃告警列表
-- ============================================
CREATE OR REPLACE VIEW ops_active_alerts AS
SELECT
e.id,
e.rule_id,
r.name AS rule_name,
r.metric_type,
e.fired_at,
e.metric_value,
e.threshold_value,
r.severity,
EXTRACT(EPOCH FROM (NOW() - e.fired_at))::INT AS duration_seconds
FROM ops_alert_events e
JOIN ops_alert_rules r ON e.rule_id = r.id
WHERE e.status = 'firing'
ORDER BY e.fired_at DESC;
COMMENT ON VIEW ops_active_alerts IS '当前活跃的告警列表';
-- ============================================
-- 9. 权限设置 (可选)
-- ============================================
-- 如果有专门的 ops 用户,可以授权
-- GRANT SELECT, INSERT, UPDATE ON ops_system_metrics TO ops_user;
-- GRANT SELECT, INSERT ON ops_dimension_stats TO ops_user;
-- GRANT ALL ON ops_alert_rules TO ops_user;
-- GRANT ALL ON ops_alert_events TO ops_user;
-- ============================================
-- 10. 数据完整性检查
-- ============================================
-- 确保现有数据的兼容性
UPDATE ops_system_metrics
SET
qps = COALESCE(request_count / (window_minutes * 60.0), 0),
error_rate = COALESCE((error_count::DECIMAL / NULLIF(request_count, 0)) * 100, 0)
WHERE qps = 0 AND request_count > 0;
-- ============================================
-- 完成
-- ============================================
frontend/src/api/admin/ops.ts deleted 100644 → 0
View file @ 45bd9ac7
/**
* Admin Ops API endpoints
* Provides stability metrics and error logs for ops dashboard
*/
import { apiClient } from '../client'
export type OpsSeverity = 'P0' | 'P1' | 'P2' | 'P3'
export type OpsPhase =
| 'auth'
| 'concurrency'
| 'billing'
| 'scheduling'
| 'network'
| 'upstream'
| 'response'
| 'internal'
export type OpsPlatform = 'gemini' | 'openai' | 'anthropic' | 'antigravity'
export interface OpsMetrics {
window_minutes: number
request_count: number
success_count: number
error_count: number
success_rate: number
error_rate: number
p95_latency_ms: number
p99_latency_ms: number
http2_errors: number
active_alerts: number
cpu_usage_percent?: number
memory_used_mb?: number
memory_total_mb?: number
memory_usage_percent?: number
heap_alloc_mb?: number
gc_pause_ms?: number
concurrency_queue_depth?: number
updated_at?: string
}
export interface OpsErrorLog {
id: number
created_at: string
phase: OpsPhase
type: string
severity: OpsSeverity
status_code: number
platform: OpsPlatform
model: string
latency_ms: number | null
request_id: string
message: string
user_id?: number | null
api_key_id?: number | null
account_id?: number | null
group_id?: number | null
client_ip?: string
request_path?: string
stream?: boolean
}
export interface OpsErrorListParams {
start_time?: string
end_time?: string
platform?: OpsPlatform
phase?: OpsPhase
severity?: OpsSeverity
q?: string
/**
* Max 500 (legacy endpoint uses a hard cap); use paginated /admin/ops/errors for larger result sets.
*/
limit?: number
}
export interface OpsErrorListResponse {
items: OpsErrorLog[]
total?: number
}
export interface OpsMetricsHistoryParams {
window_minutes?: number
minutes?: number
start_time?: string
end_time?: string
limit?: number
}
export interface OpsMetricsHistoryResponse {
items: OpsMetrics[]
}
/**
* Get latest ops metrics snapshot
*/
export async function getMetrics(): Promise<OpsMetrics> {
const { data } = await apiClient.get<OpsMetrics>('/admin/ops/metrics')
return data
}
/**
* List metrics history for charts
*/
export async function listMetricsHistory(params?: OpsMetricsHistoryParams): Promise<OpsMetricsHistoryResponse> {
const { data } = await apiClient.get<OpsMetricsHistoryResponse>('/admin/ops/metrics/history', { params })
return data
}
/**
* List recent error logs with optional filters
*/
export async function listErrors(params?: OpsErrorListParams): Promise<OpsErrorListResponse> {
const { data } = await apiClient.get<OpsErrorListResponse>('/admin/ops/error-logs', { params })
return data
}
export interface OpsDashboardOverview {
timestamp: string
health_score: number
sla: {
current: number
threshold: number
status: string
trend: string
change_24h: number
}
qps: {
current: number
peak_1h: number
avg_1h: number
change_vs_yesterday: number
}
tps: {
current: number
peak_1h: number
avg_1h: number
}
latency: {
p50: number
p95: number
p99: number
p999: number
avg: number
max: number
threshold_p99: number
status: string
}
errors: {
total_count: number
error_rate: number
'4xx_count': number
'5xx_count': number
timeout_count: number
top_error?: {
code: string
message: string
count: number
}
}
resources: {
cpu_usage: number
memory_usage: number
disk_usage: number
goroutines: number
db_connections: {
active: number
idle: number
waiting: number
max: number
}
}
system_status: {
redis: string
database: string
background_jobs: string
}
}
export interface ProviderHealthData {
name: string
request_count: number
success_rate: number
error_rate: number
latency_avg: number
latency_p99: number
status: string
errors_by_type: {
'4xx': number
'5xx': number
timeout: number
}
}
export interface ProviderHealthResponse {
providers: ProviderHealthData[]
summary: {
total_requests: number
avg_success_rate: number
best_provider: string
worst_provider: string
}
}
export interface LatencyHistogramResponse {
buckets: {
range: string
count: number
percentage: number
}[]
total_requests: number
slow_request_threshold: number
}
export interface ErrorDistributionResponse {
items: {
code: string
message: string
count: number
percentage: number
}[]
}
/**
* Get realtime ops dashboard overview
*/
export async function getDashboardOverview(timeRange = '1h'): Promise<OpsDashboardOverview> {
const { data } = await apiClient.get<OpsDashboardOverview>('/admin/ops/dashboard/overview', {
params: { time_range: timeRange }
})
return data
}
/**
* Get provider health comparison
*/
export async function getProviderHealth(timeRange = '1h'): Promise<ProviderHealthResponse> {
const { data } = await apiClient.get<ProviderHealthResponse>('/admin/ops/dashboard/providers', {
params: { time_range: timeRange }
})
return data
}
/**
* Get latency histogram
*/
export async function getLatencyHistogram(timeRange = '1h'): Promise<LatencyHistogramResponse> {
const { data } = await apiClient.get<LatencyHistogramResponse>('/admin/ops/dashboard/latency-histogram', {
params: { time_range: timeRange }
})
return data
}
/**
* Get error distribution
*/
export async function getErrorDistribution(timeRange = '1h'): Promise<ErrorDistributionResponse> {
const { data } = await apiClient.get<ErrorDistributionResponse>('/admin/ops/dashboard/errors/distribution', {
params: { time_range: timeRange }
})
return data
}
/**
* Subscribe to realtime QPS updates via WebSocket
*/
export function subscribeQPS(onMessage: (data: any) => void): () => void {
let ws: WebSocket | null = null
let reconnectAttempts = 0
const maxReconnectAttempts = 5
let reconnectTimer: ReturnType<typeof setTimeout> | null = null
let shouldReconnect = true
const connect = () => {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
const host = window.location.host
ws = new WebSocket(`${protocol}//${host}/api/v1/admin/ops/ws/qps`)
ws.onopen = () => {
console.log('[OpsWS] Connected')
reconnectAttempts = 0
}
ws.onmessage = (e) => {
const data = JSON.parse(e.data)
onMessage(data)
}
ws.onerror = (error) => {
console.error('[OpsWS] Connection error:', error)
}
ws.onclose = () => {
console.log('[OpsWS] Connection closed')
if (shouldReconnect && reconnectAttempts < maxReconnectAttempts) {
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000)
console.log(`[OpsWS] Reconnecting in ${delay}ms...`)
reconnectTimer = setTimeout(() => {
reconnectAttempts++
connect()
}, delay)
}
}
}
connect()
return () => {
shouldReconnect = false
if (reconnectTimer) clearTimeout(reconnectTimer)
if (ws) ws.close()
}
}
export const opsAPI = {
getMetrics,
listMetricsHistory,
listErrors,
getDashboardOverview,
getProviderHealth,
getLatencyHistogram,
getErrorDistribution,
subscribeQPS
}
export default opsAPI
frontend/src/views/admin/ops/OpsDashboard.vue deleted 100644 → 0
View file @ 45bd9ac7
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { Bar, Doughnut } from 'vue-chartjs'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
PointElement,
CategoryScale,
BarElement,
ArcElement
} from 'chart.js'
import { useIntervalFn } from '@vueuse/core'
import AppLayout from '@/components/layout/AppLayout.vue'
import { opsAPI, type OpsDashboardOverview, type ProviderHealthData, type LatencyHistogramResponse, type ErrorDistributionResponse } from '@/api/admin/ops'
import { useAuthStore } from '@/stores/auth'
ChartJS.register(
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
PointElement,
CategoryScale,
BarElement,
ArcElement
)
const { t } = useI18n()
const authStore = useAuthStore()
const loading = ref(false)
const errorMessage = ref('')
const timeRange = ref('1h')
const lastUpdated = ref(new Date())
const overview = ref<OpsDashboardOverview | null>(null)
const providers = ref<ProviderHealthData[]>([])
const latencyData = ref<LatencyHistogramResponse | null>(null)
const errorDistribution = ref<ErrorDistributionResponse | null>(null)
// WebSocket for real-time QPS
const realTimeQPS = ref(0)
const realTimeTPS = ref(0)
const wsConnected = ref(false)
let ws: WebSocket | null = null
let reconnectTimer: ReturnType<typeof setTimeout> | null = null
const connectWS = () => {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
const wsBaseUrl = import.meta.env.VITE_WS_BASE_URL || window.location.host
const wsURL = new URL(`${protocol}//${wsBaseUrl}/api/v1/admin/ops/ws/qps`)
const token = authStore.token || localStorage.getItem('auth_token')
if (token) {
wsURL.searchParams.set('token', token)
}
ws = new WebSocket(wsURL.toString())
ws.onopen = () => {
wsConnected.value = true
}
ws.onmessage = (event) => {
try {
const payload = JSON.parse(event.data)
if (payload && typeof payload === 'object' && payload.type === 'qps_update' && payload.data) {
realTimeQPS.value = payload.data.qps || 0
realTimeTPS.value = payload.data.tps || 0
}
} catch (e) {
console.error('WS parse error', e)
}
}
ws.onclose = () => {
wsConnected.value = false
if (reconnectTimer) clearTimeout(reconnectTimer)
reconnectTimer = setTimeout(connectWS, 5000)
}
}
const fetchData = async () => {
loading.value = true
errorMessage.value = ''
try {
const [ov, pr, lt, er] = await Promise.all([
opsAPI.getDashboardOverview(timeRange.value),
opsAPI.getProviderHealth(timeRange.value),
opsAPI.getLatencyHistogram(timeRange.value),
opsAPI.getErrorDistribution(timeRange.value)
])
overview.value = ov
providers.value = pr.providers
latencyData.value = lt
errorDistribution.value = er
lastUpdated.value = new Date()
} catch (err) {
console.error('Failed to fetch ops data', err)
errorMessage.value = '数据加载失败，请稍后重试'
} finally {
loading.value = false
}
}
// Refresh data every 30 seconds (fallback for L2/L3)
useIntervalFn(fetchData, 30000)
onMounted(() => {
fetchData()
connectWS()
})
onUnmounted(() => {
if (ws) ws.close()
if (reconnectTimer) clearTimeout(reconnectTimer)
})
watch(timeRange, () => {
fetchData()
})
// Chart Data: Latency Distribution
const latencyChartData = computed(() => {
if (!latencyData.value) return null
return {
labels: latencyData.value.buckets.map(b => b.range),
datasets: [
{
label: t('admin.ops.charts.requestCount'),
data: latencyData.value.buckets.map(b => b.count),
backgroundColor: '#3b82f6',
borderRadius: 4
}
]
}
})
// Chart Data: Error Distribution
const errorChartData = computed(() => {
if (!errorDistribution.value) return null
return {
labels: errorDistribution.value.items.map(i => i.code),
datasets: [
{
data: errorDistribution.value.items.map(i => i.count),
backgroundColor: [
'#ef4444', '#f59e0b', '#3b82f6', '#10b981', '#8b5cf6', '#ec4899'
]
}
]
}
})
// Chart Data: Provider SLA
const providerChartData = computed(() => {
if (!providers.value.length) return null
return {
labels: providers.value.map(p => p.name),
datasets: [
{
label: 'SLA (%)',
data: providers.value.map(p => p.success_rate),
backgroundColor: providers.value.map(p => p.success_rate > 99.5 ? '#10b981' : p.success_rate > 98 ? '#f59e0b' : '#ef4444'),
borderRadius: 4
}
]
}
})
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
display: false
}
},
x: {
grid: {
display: false
}
}
}
}
const healthScoreClass = computed(() => {
const score = overview.value?.health_score || 0
if (score >= 90) return 'text-green-500 border-green-500'
if (score >= 70) return 'text-yellow-500 border-yellow-500'
return 'text-red-500 border-red-500'
})
</script>
<template>
<AppLayout>
<div class="space-y-6 pb-12">
<!-- Error Message -->
<div v-if="errorMessage" class="rounded-2xl bg-red-50 p-4 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400">
{{ errorMessage }}
</div>
<!-- L1: Header & Realtime Stats -->
<div class="flex flex-wrap items-center justify-between gap-4 rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="flex items-center gap-6">
<!-- Health Score Gauge -->
<div class="flex h-20 w-20 flex-col items-center justify-center rounded-full border-4 bg-gray-50 dark:bg-dark-900" :class="healthScoreClass">
<span class="text-2xl font-black">{{ overview?.health_score || '--' }}</span>
<span class="text-[10px] font-bold opacity-60">HEALTH</span>
</div>
<div>
<h1 class="text-xl font-black text-gray-900 dark:text-white">运维监控中心 2.0</h1>
<div class="mt-1 flex items-center gap-3">
<span class="flex items-center gap-1.5">
<span class="h-2 w-2 rounded-full bg-green-500 animate-pulse" v-if="wsConnected"></span>
<span class="h-2 w-2 rounded-full bg-red-500" v-else></span>
<span class="text-xs font-medium text-gray-500">{{ wsConnected ? '实时连接中' : '连接已断开' }}</span>
</span>
<span class="text-xs text-gray-400">最后更新: {{ lastUpdated.toLocaleTimeString() }}</span>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="hidden items-center gap-6 border-r border-gray-100 pr-6 dark:border-dark-700 lg:flex">
<div class="text-center">
<div class="text-sm font-black text-gray-900 dark:text-white">{{ realTimeQPS.toFixed(1) }}</div>
<div class="text-[10px] font-bold text-gray-400 uppercase">实时 QPS</div>
</div>
<div class="text-center">
<div class="text-sm font-black text-gray-900 dark:text-white">{{ (realTimeTPS / 1000).toFixed(1) }}K</div>
<div class="text-[10px] font-bold text-gray-400 uppercase">实时 TPS</div>
</div>
</div>
<select v-model="timeRange" class="rounded-lg border-gray-200 bg-gray-50 py-1.5 pl-3 pr-8 text-sm font-medium text-gray-700 focus:border-blue-500 focus:ring-blue-500 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300">
<option value="5m">5 分钟</option>
<option value="30m">30 分钟</option>
<option value="1h">1 小时</option>
<option value="24h">24 小时</option>
</select>
<button @click="fetchData" :disabled="loading" class="flex h-9 w-9 items-center justify-center rounded-lg bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-dark-700 dark:text-gray-400">
<svg class="h-5 w-5" :class="{ 'animate-spin': loading }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
</div>
</div>
<!-- L1: Core Metrics Grid -->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">服务可用率 (SLA)</span>
<span class="rounded-full bg-green-50 px-2 py-0.5 text-[10px] font-bold text-green-600 dark:bg-green-900/30">{{ overview?.sla.status }}</span>
</div>
<div class="mt-2 flex items-baseline gap-2">
<span class="text-2xl font-black text-gray-900 dark:text-white">{{ overview?.sla.current.toFixed(2) }}%</span>
<span class="text-xs font-bold" :class="overview?.sla.change_24h && overview.sla.change_24h >= 0 ? 'text-green-500' : 'text-red-500'">
{{ overview?.sla.change_24h && overview.sla.change_24h >= 0 ? '+' : '' }}{{ overview?.sla.change_24h }}%
</span>
</div>
<div class="mt-3 h-1 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-dark-700">
<div class="h-full bg-green-500" :style="{ width: `${overview?.sla.current}%` }"></div>
</div>
</div>
<div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">P99 响应延迟</span>
<span class="rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-600 dark:bg-blue-900/30">Target 1s</span>
</div>
<div class="mt-2 flex items-baseline gap-2">
<span class="text-2xl font-black text-gray-900 dark:text-white">{{ overview?.latency.p99 }}ms</span>
<span class="text-xs font-bold text-gray-400">Avg: {{ overview?.latency.avg }}ms</span>
</div>
<div class="mt-3 flex gap-1">
<div v-for="i in 10" :key="i" class="h-1 flex-1 rounded-full" :class="i <= (overview?.latency.p99 || 0) / 200 ? 'bg-blue-500' : 'bg-gray-100 dark:bg-dark-700'"></div>
</div>
</div>
<div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">周期请求总数</span>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
</div>
<div class="mt-2 flex items-baseline gap-2">
<span class="text-2xl font-black text-gray-900 dark:text-white">{{ overview?.qps.avg_1h.toFixed(1) }}</span>
<span class="text-xs font-bold text-gray-400">req/s</span>
</div>
<div class="mt-1 text-[10px] font-bold text-gray-400 uppercase">对比昨日: {{ overview?.qps.change_vs_yesterday }}%</div>
</div>
<div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">周期错误数</span>
<span class="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold text-red-600 dark:bg-red-900/30">{{ overview?.errors.error_rate.toFixed(2) }}%</span>
</div>
<div class="mt-2 flex items-baseline gap-2">
<span class="text-2xl font-black text-gray-900 dark:text-white">{{ overview?.errors.total_count }}</span>
<span class="text-xs font-bold text-red-500">5xx: {{ overview?.errors['5xx_count'] }}</span>
</div>
<div class="mt-1 text-[10px] font-bold text-gray-400 uppercase">主要错误码: {{ overview?.errors.top_error?.code || 'N/A' }}</div>
</div>
</div>
<!-- L2: Visual Analysis -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<!-- Latency Distribution -->
<div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="mb-6 flex items-center justify-between">
<h3 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-wider">请求延迟分布</h3>
</div>
<div class="h-64">
<Bar v-if="latencyChartData" :data="latencyChartData" :options="chartOptions" />
<div v-else class="flex h-full items-center justify-center text-gray-400">加载中...</div>
</div>
</div>
<!-- Provider Health -->
<div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="mb-6 flex items-center justify-between">
<h3 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-wider">上游供应商健康度 (SLA)</h3>
</div>
<div class="h-64">
<Bar v-if="providerChartData" :data="providerChartData" :options="chartOptions" />
<div v-else class="flex h-full items-center justify-center text-gray-400">加载中...</div>
</div>
</div>
<!-- Error Distribution -->
<div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="mb-6 flex items-center justify-between">
<h3 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-wider">错误类型分布</h3>
</div>
<div class="flex h-64 gap-6">
<div class="relative w-1/2">
<Doughnut v-if="errorChartData" :data="errorChartData" :options="{ ...chartOptions, cutout: '70%' }" />
</div>
<div class="flex flex-1 flex-col justify-center space-y-3">
<div v-for="(item, idx) in errorDistribution?.items.slice(0, 5)" :key="item.code" class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full" :style="{ backgroundColor: ['#ef4444', '#f59e0b', '#3b82f6', '#10b981', '#8b5cf6'][idx] }"></div>
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">{{ item.code }}</span>
</div>
<span class="text-xs font-black text-gray-900 dark:text-white">{{ item.percentage }}%</span>
</div>
</div>
</div>
</div>
<!-- System Resources -->
<div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
<div class="mb-6 flex items-center justify-between">
<h3 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-wider">系统运行状态</h3>
</div>
<div class="grid grid-cols-2 gap-6">
<div class="space-y-4">
<div>
<div class="mb-1 flex justify-between text-[10px] font-bold text-gray-400 uppercase">CPU 使用率</div>
<div class="h-2 w-full rounded-full bg-gray-100 dark:bg-dark-700">
<div class="h-full rounded-full bg-purple-500" :style="{ width: `${overview?.resources.cpu_usage}%` }"></div>
</div>
<div class="mt-1 text-right text-xs font-bold text-gray-900 dark:text-white">{{ overview?.resources.cpu_usage }}%</div>
</div>
<div>
<div class="mb-1 flex justify-between text-[10px] font-bold text-gray-400 uppercase">内存使用率</div>
<div class="h-2 w-full rounded-full bg-gray-100 dark:bg-dark-700">
<div class="h-full rounded-full bg-indigo-500" :style="{ width: `${overview?.resources.memory_usage}%` }"></div>
</div>
<div class="mt-1 text-right text-xs font-bold text-gray-900 dark:text-white">{{ overview?.resources.memory_usage }}%</div>
</div>
</div>
<div class="flex flex-col justify-center space-y-4 rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
<div class="flex items-center justify-between">
<span class="text-[10px] font-bold text-gray-400 uppercase">Redis 状态</span>
<span class="text-xs font-bold text-green-500 uppercase">{{ overview?.system_status.redis }}</span>
</div>
<div class="flex items-center justify-between">
<span class="text-[10px] font-bold text-gray-400 uppercase">DB 连接</span>
<span class="text-xs font-bold text-gray-900 dark:text-white">{{ overview?.resources.db_connections.active }} / {{ overview?.resources.db_connections.max }}</span>
</div>
<div class="flex items-center justify-between">
<span class="text-[10px] font-bold text-gray-400 uppercase">Goroutines</span>
<span class="text-xs font-bold text-gray-900 dark:text-white">{{ overview?.resources.goroutines }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</AppLayout>
</template>
<style scoped>
/* Custom select styling */
select {
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1.5em 1.5em;
}
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment