feat(ui): 优化ops监控面板和组件功能
- 增强告警事件卡片的交互和静默功能 - 完善错误详情弹窗的展示和操作 - 优化错误日志表格的筛选和排序 - 新增重试和解决状态的UI支持
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user