feat(ui): 优化ops监控面板和组件功能

- 增强告警事件卡片的交互和静默功能
- 完善错误详情弹窗的展示和操作
- 优化错误日志表格的筛选和排序
- 新增重试和解决状态的UI支持
This commit is contained in:
IanShaw027
2026-01-14 09:03:59 +08:00
parent b8da5d45ce
commit f38a3e7585
5 changed files with 1013 additions and 86 deletions

View File

@@ -31,6 +31,8 @@ const pageSize = ref(20)
const q = ref('')
const statusCode = ref<number | null>(null)
const phase = ref<string>('')
const errorOwner = ref<string>('')
const resolvedStatus = ref<string>('unresolved')
const accountIdInput = ref<string>('')
const accountId = computed<number | null>(() => {
@@ -52,15 +54,31 @@ const statusCodeSelectOptions = computed(() => {
]
})
const ownerSelectOptions = computed(() => {
return [
{ value: '', label: t('common.all') },
{ value: 'provider', label: 'provider' },
{ value: 'client', label: 'client' },
{ value: 'platform', label: 'platform' }
]
})
const resolvedSelectOptions = computed(() => {
return [
{ value: 'unresolved', label: t('admin.ops.errorDetails.unresolved') || 'unresolved' },
{ value: 'all', label: t('common.all') },
{ value: 'resolved', label: t('admin.ops.errorDetails.resolved') || 'resolved' }
]
})
const phaseSelectOptions = computed(() => {
const options = [
{ value: '', label: t('common.all') },
{ value: 'request', label: 'request' },
{ value: 'auth', label: 'auth' },
{ value: 'routing', label: 'routing' },
{ value: 'upstream', label: 'upstream' },
{ value: 'network', label: 'network' },
{ value: 'routing', label: 'routing' },
{ value: 'auth', label: 'auth' },
{ value: 'billing', label: 'billing' },
{ value: 'concurrency', label: 'concurrency' },
{ value: 'internal', label: 'internal' }
]
return options
@@ -92,6 +110,14 @@ async function fetchErrorLogs() {
const phaseVal = String(phase.value || '').trim()
if (phaseVal) params.phase = phaseVal
const ownerVal = String(errorOwner.value || '').trim()
if (ownerVal) params.error_owner = ownerVal
const resolvedVal = String(resolvedStatus.value || '').trim()
if (resolvedVal === 'resolved') params.resolved = 'true'
else if (resolvedVal === 'unresolved') params.resolved = 'false'
// 'all' -> omit
const res = await opsAPI.listErrorLogs(params)
rows.value = res.items || []
total.value = res.total || 0
@@ -108,6 +134,8 @@ function resetFilters() {
q.value = ''
statusCode.value = null
phase.value = props.errorType === 'upstream' ? 'upstream' : ''
errorOwner.value = ''
resolvedStatus.value = 'unresolved'
accountIdInput.value = ''
page.value = 1
fetchErrorLogs()
@@ -154,7 +182,7 @@ watch(
)
watch(
() => [statusCode.value, phase.value] as const,
() => [statusCode.value, phase.value, errorOwner.value, resolvedStatus.value] as const,
() => {
if (!props.show) return
page.value = 1
@@ -177,8 +205,8 @@ watch(
<div class="flex h-full min-h-0 flex-col">
<!-- Filters -->
<div class="mb-4 flex-shrink-0 border-b border-gray-200 pb-4 dark:border-dark-700">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
<div class="lg:col-span-5">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-14">
<div class="lg:col-span-4">
<div class="relative group">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
<svg
@@ -208,6 +236,14 @@ watch(
</div>
<div class="lg:col-span-2">
<Select :model-value="errorOwner" :options="ownerSelectOptions" class="w-full" @update:model-value="errorOwner = String($event ?? '')" />
</div>
<div class="lg:col-span-2">
<Select :model-value="resolvedStatus" :options="resolvedSelectOptions" class="w-full" @update:model-value="resolvedStatus = String($event ?? 'unresolved')" />
</div>
<div class="lg:col-span-1">
<input
v-model="accountIdInput"
type="text"