feat(monitor): admin channel monitor MVP with SSRF protection and batch aggregation
新增 admin「渠道监控」模块(参考 BingZi-233/check-cx),独立于现有 Channel 体系。
admin 配置 + 后台定时调用上游 LLM chat completions 健康检查 + 所有登录用户只读可见。
后端:
- ent: channel_monitor + channel_monitor_history(AES-256-GCM 加密 api_key)
- service 按职责拆分:service/aggregator/validate/checker/runner/ssrf
- provider strategy map 替代 switch(openai/anthropic/gemini)
- repository batch 聚合(ListLatestForMonitorIDs + ComputeAvailabilityForMonitors)消除 N+1
- runner: ticker(5s) + pond worker pool(5) + inFlight 防并发 + TrySubmit 防雪崩
+ 凌晨 3 点 cron 清理 30 天历史
- SSRF 防护:强制 https + 私网/loopback/云元数据 IP 拒绝(127/8、10/8、172.16/12、
192.168/16、169.254/16、100.64/10、::1、fc00::/7、fe80::/10)+ DialContext
在 socket 层防 DNS rebinding
- API key sanitize:擦除 url.Error 与上游响应 body 中的 sk-/sk-ant-/AIza/JWT 模式
- APIKeyDecryptFailed 标志位 + 单 monitor 路径检测,避免空 key 调用上游
handler:
- admin: CRUD + 手动触发 + 历史接口(api_key 脱敏)
- user: 只读列表 + 状态详情(去除 api_key/endpoint)
- ParseChannelMonitorID 共用 + dto.ChannelMonitorExtraModelStatus 共用
前端:
- 路由 /admin/channels/{pricing,monitor} + /monitor(用户只读)
- AppSidebar 父项 expandOnly 支持
- ChannelMonitorView 拆为 8 个子组件 + ChannelStatusView 拆出 detail dialog
- composables/useChannelMonitorFormat + constants/channelMonitor 共享
- i18n monitorCommon namespace 消除 admin/user 两 view 重复
合规:所有文件符合 CLAUDE.md(Go ≤ 500 行 / Vue ≤ 300 行 / 函数 ≤ 30 行)
CI: go build / gofmt / golangci-lint(0 issues) / make test-unit / pnpm build 全绿
This commit is contained in:
114
frontend/src/components/user/MonitorDetailDialog.vue
Normal file
114
frontend/src/components/user/MonitorDetailDialog.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="title"
|
||||
width="wide"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<div v-if="loading" class="py-8 text-center text-sm text-gray-500">
|
||||
{{ t('common.loading') }}
|
||||
</div>
|
||||
<div v-else-if="!detail" class="py-8 text-center text-sm text-gray-500">
|
||||
{{ t('channelStatus.detailLoadError') }}
|
||||
</div>
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead class="border-b border-gray-200 dark:border-dark-700">
|
||||
<tr class="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
||||
<th class="py-2 pr-3">{{ t('channelStatus.detailColumns.model') }}</th>
|
||||
<th class="py-2 pr-3">{{ t('channelStatus.detailColumns.latestStatus') }}</th>
|
||||
<th class="py-2 pr-3">{{ t('channelStatus.detailColumns.latestLatency') }}</th>
|
||||
<th class="py-2 pr-3">{{ t('channelStatus.detailColumns.availability7d') }}</th>
|
||||
<th class="py-2 pr-3">{{ t('channelStatus.detailColumns.availability15d') }}</th>
|
||||
<th class="py-2 pr-3">{{ t('channelStatus.detailColumns.availability30d') }}</th>
|
||||
<th class="py-2 pr-3">{{ t('channelStatus.detailColumns.avgLatency7d') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="m in detail.models"
|
||||
:key="m.model"
|
||||
class="border-b border-gray-100 dark:border-dark-800"
|
||||
>
|
||||
<td class="py-2 pr-3 font-medium text-gray-900 dark:text-gray-100">{{ m.model }}</td>
|
||||
<td class="py-2 pr-3">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px]"
|
||||
:class="statusBadgeClass(m.latest_status)"
|
||||
>
|
||||
{{ statusLabel(m.latest_status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatLatency(m.latest_latency_ms) }}</td>
|
||||
<td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatPercent(m.availability_7d) }}</td>
|
||||
<td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatPercent(m.availability_15d) }}</td>
|
||||
<td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatPercent(m.availability_30d) }}</td>
|
||||
<td class="py-2 pr-3 text-gray-700 dark:text-gray-300">{{ formatLatency(m.avg_latency_7d_ms) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end">
|
||||
<button @click="$emit('close')" class="btn btn-secondary">
|
||||
{{ t('channelStatus.closeDetail') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { extractApiErrorMessage } from '@/utils/apiError'
|
||||
import {
|
||||
status as fetchChannelMonitorDetail,
|
||||
type UserMonitorDetail,
|
||||
} from '@/api/channelMonitor'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
monitorId: number | null
|
||||
title: string
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
const { statusLabel, statusBadgeClass, formatLatency, formatPercent } = useChannelMonitorFormat()
|
||||
|
||||
const detail = ref<UserMonitorDetail | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
async function load(id: number) {
|
||||
detail.value = null
|
||||
loading.value = true
|
||||
try {
|
||||
detail.value = await fetchChannelMonitorDetail(id)
|
||||
} catch (err: unknown) {
|
||||
appStore.showError(extractApiErrorMessage(err, t('channelStatus.detailLoadError')))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.show, props.monitorId] as const,
|
||||
([show, id]) => {
|
||||
if (!show) {
|
||||
detail.value = null
|
||||
return
|
||||
}
|
||||
if (id != null) void load(id)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
71
frontend/src/components/user/MonitorPrimaryModelCell.vue
Normal file
71
frontend/src/components/user/MonitorPrimaryModelCell.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">{{ row.primary_model }}</span>
|
||||
<HelpTooltip>
|
||||
<template #trigger>
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium"
|
||||
:class="statusBadgeClass(row.primary_status)"
|
||||
>
|
||||
{{ statusLabel(row.primary_status) }}
|
||||
</span>
|
||||
</template>
|
||||
<div class="space-y-2">
|
||||
<div class="text-xs font-semibold text-gray-100">
|
||||
{{ row.primary_model }}
|
||||
<span
|
||||
class="ml-1 inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium"
|
||||
:class="statusBadgeClass(row.primary_status)"
|
||||
>
|
||||
{{ statusLabel(row.primary_status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="(row.extra_models?.length ?? 0) === 0" class="text-[11px] text-gray-300">
|
||||
{{ t('monitorCommon.extraModelsEmpty') }}
|
||||
</div>
|
||||
<div v-else class="space-y-1">
|
||||
<div class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">
|
||||
{{ t('monitorCommon.extraModelsHeader') }}
|
||||
</div>
|
||||
<table class="w-full text-left text-[11px]">
|
||||
<thead>
|
||||
<tr class="text-gray-400">
|
||||
<th class="py-0.5 pr-2 font-medium">{{ t('channelStatus.detailColumns.model') }}</th>
|
||||
<th class="py-0.5 pr-2 font-medium">{{ t('channelStatus.detailColumns.latestStatus') }}</th>
|
||||
<th class="py-0.5 font-medium">{{ t('channelStatus.detailColumns.latestLatency') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="m in row.extra_models" :key="m.model">
|
||||
<td class="py-0.5 pr-2 text-gray-100">{{ m.model }}</td>
|
||||
<td class="py-0.5 pr-2">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px]"
|
||||
:class="statusBadgeClass(m.status)"
|
||||
>
|
||||
{{ statusLabel(m.status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-0.5 text-gray-100">{{ formatLatency(m.latency_ms) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</HelpTooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { UserMonitorView } from '@/api/channelMonitor'
|
||||
import HelpTooltip from '@/components/common/HelpTooltip.vue'
|
||||
import { useChannelMonitorFormat } from '@/composables/useChannelMonitorFormat'
|
||||
|
||||
defineProps<{
|
||||
row: UserMonitorView
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { statusLabel, statusBadgeClass, formatLatency } = useChannelMonitorFormat()
|
||||
</script>
|
||||
Reference in New Issue
Block a user