refactor: 移除 Ops 监控模块
移除未完成的运维监控功能，简化系统架构： - 删除 ops_handler, ops_service, ops_repo 等后端代码 - 删除 ops 相关数据库迁移文件 - 删除前端 OpsDashboard 页面和 API
This commit is contained in:
ianshaw
@@ -1,324 +0,0 @@
|
||||
/**
|
||||
* 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
|
||||
@@ -1,417 +0,0 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user