fix(frontend): 数据源编辑弹框去掉测试连接
测试结果用 toast 会跑到弹框外，改成保存后在列表页点测试；弹框只留取消/保存。
This commit is contained in:
Codex committed
1 parent
c1e21c20d8
commit
4f75ef8578
1 file changed
+288
@@ -0,0 +1,288 @@
|
|||||||
|
import { memo, useEffect, useState } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
import { Database, Globe, Loader2, Lock, Pencil, Plus, Server, Trash2, Zap } from 'lucide-react'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
import { Checkbox } from '@/components/ui/checkbox'
|
||||||
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Textarea } from '@/components/ui/textarea'
|
||||||
|
import { ConfirmDialog } from '@/components/ConfirmDialog'
|
||||||
|
import { EmptyState } from '@/components/EmptyState'
|
||||||
|
import { clusterApi } from '@/api'
|
||||||
|
import { logsApi, type LogSource } from '@/api/logs'
|
||||||
|
import type { Cluster } from '@/types'
|
||||||
|
|
||||||
|
type SourceForm = Partial<LogSource> & { basicPass?: string; bearerToken?: string }
|
||||||
|
const emptyForm: SourceForm = { name: '', targetType: 'url', url: '', authType: 'none', access: [] }
|
||||||
|
|
||||||
|
/** 数据源管理 — 行卡片列表 + 新建/编辑 Dialog(平台部署的托管源只读,手动源可编辑/删除) */
|
||||||
|
export const SourcesManager = memo(function SourcesManager({ sources, onSaved }: {
|
||||||
|
sources: LogSource[]
|
||||||
|
onSaved: () => void
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation('logs')
|
||||||
|
const [clusters, setClusters] = useState<Cluster[]>([])
|
||||||
|
const [form, setForm] = useState<SourceForm | null>(null)
|
||||||
|
const [saving, setSaving] = useState(false)
|
||||||
|
const [testing, setTesting] = useState(false)
|
||||||
|
const [deleteTarget, setDeleteTarget] = useState<LogSource | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
clusterApi.list({ page: 1, pageSize: 100 }).then(result => setClusters(result.list)).catch(() => setClusters([]))
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const addressOf = (source: Partial<LogSource>) => {
|
||||||
|
if (source.targetType === 'url') return source.url ?? ''
|
||||||
|
const clusterName = clusters.find(cluster => cluster.id === source.clusterID)?.name
|
||||||
|
return [clusterName, source.namespace, `${source.service || 'loki'}:${source.port || 3100}`].filter(Boolean).join(' / ')
|
||||||
|
}
|
||||||
|
const typeText = (source: Partial<LogSource>) => source.targetType === 'url' ? t('source.targetUrl') : t('source.targetClusterSvc')
|
||||||
|
const authText = (source: Partial<LogSource>) =>
|
||||||
|
source.authType === 'basic' ? t('source.authBasic')
|
||||||
|
: source.authType === 'bearer' ? t('source.authBearer')
|
||||||
|
: source.authType === 'headers' ? t('source.authHeaders')
|
||||||
|
: t('source.authNone')
|
||||||
|
|
||||||
|
function test(data: Partial<LogSource> & { basicPass?: string; bearerToken?: string }) {
|
||||||
|
setTesting(true)
|
||||||
|
logsApi.testSource(data)
|
||||||
|
.then(result => { if (result.success) toast.info(result.message); else toast.error(result.message) })
|
||||||
|
.catch(err => toast.error(err instanceof Error ? err.message : t('source.test')))
|
||||||
|
.finally(() => setTesting(false))
|
||||||
|
}
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
if (!form || !form.name?.trim()) return
|
||||||
|
setSaving(true)
|
||||||
|
const action = form.id ? logsApi.updateSource(form.id, form) : logsApi.createSource(form)
|
||||||
|
action
|
||||||
|
.then(() => { setForm(null); onSaved() })
|
||||||
|
.catch(err => toast.error(err instanceof Error ? err.message : t('source.saveFailed')))
|
||||||
|
.finally(() => setSaving(false))
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove() {
|
||||||
|
if (!deleteTarget) return
|
||||||
|
setSaving(true)
|
||||||
|
logsApi.deleteSource(deleteTarget.id)
|
||||||
|
.then(() => { setDeleteTarget(null); if (form?.id === deleteTarget.id) setForm(null); onSaved() })
|
||||||
|
.catch(err => toast.error(err instanceof Error ? err.message : t('source.saveFailed')))
|
||||||
|
.finally(() => setSaving(false))
|
||||||
|
}
|
||||||
|
|
||||||
|
const labelClass = 'text-sm font-medium'
|
||||||
|
|
||||||
|
return <section className="space-y-4" aria-label={t('source.sectionAria')}>
|
||||||
|
<p className="text-xs text-muted-foreground">{t('source.hint')}</p>
|
||||||
|
<Card className="border-border">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
|
<Database className="size-4" />
|
||||||
|
{t('source.heading')}
|
||||||
|
<span className="text-sm font-normal text-muted-foreground">{t('source.countLabel', { count: sources.length })}</span>
|
||||||
|
</CardTitle>
|
||||||
|
<Button size="sm" onClick={() => setForm({ ...emptyForm })}>
|
||||||
|
<Plus className="mr-1 size-4" />
|
||||||
|
{t('source.create')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-0">
|
||||||
|
{sources.length === 0 ? (
|
||||||
|
<EmptyState icon={Database} title={t('source.emptyTitle')} description={t('source.emptyDesc')} />
|
||||||
|
) : (
|
||||||
|
<div className="divide-y divide-border">
|
||||||
|
{sources.map(source => {
|
||||||
|
const managed = source.managed
|
||||||
|
const Icon = source.targetType === 'url' ? Globe : Server
|
||||||
|
return (
|
||||||
|
<div key={source.id} className="flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0">
|
||||||
|
<div className="flex min-w-0 items-center gap-3">
|
||||||
|
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-info/10 text-info">
|
||||||
|
<Icon className="size-4" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<span className="truncate font-medium">{source.name}</span>
|
||||||
|
{source.isDefault && <Badge variant="secondary">{t('source.defaultBadge')}</Badge>}
|
||||||
|
{managed && (
|
||||||
|
<Badge variant="outline" className="gap-1 text-muted-foreground">
|
||||||
|
<Lock className="size-3" />
|
||||||
|
{t('source.managedBadge')}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
||||||
|
{typeText(source)} · {addressOf(source)} · {authText(source)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center gap-2">
|
||||||
|
<Button variant="outline" size="sm" disabled={testing} onClick={() => test(source)}>
|
||||||
|
{testing ? <Loader2 className="mr-1 size-3.5 animate-spin" /> : <Zap className="mr-1 size-3.5" />}
|
||||||
|
{testing ? t('source.testing') : t('source.test')}
|
||||||
|
</Button>
|
||||||
|
{!managed && (
|
||||||
|
<Button variant="outline" size="sm" onClick={() => setForm({ ...source, headers: Object.fromEntries((source.headerNames ?? []).map(name => [name, ''])) })}>
|
||||||
|
<Pencil className="mr-1 size-3.5" />
|
||||||
|
{t('source.edit')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{!managed && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="text-destructive hover:bg-destructive/10"
|
||||||
|
aria-label={t('source.deleteAria', { name: source.name })}
|
||||||
|
onClick={() => setDeleteTarget(source)}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-3.5" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* 新建 / 编辑弹窗 */}
|
||||||
|
<Dialog open={form !== null} onOpenChange={open => { if (!open && !saving) setForm(null) }}>
|
||||||
|
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{form?.id ? `${t('source.editTitle')} · ${form.name}` : t('source.createTitle')}</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
{form && (
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.nameLabel')}
|
||||||
|
<Input className="mt-1" value={form.name ?? ''} onChange={event => setForm({ ...form, name: event.target.value })} placeholder={t('source.namePlaceholder')} />
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<span className={labelClass}>{t('source.typeLabel')}</span>
|
||||||
|
<div className="mt-1 flex gap-2">
|
||||||
|
<button type="button" aria-pressed={form.targetType === 'url'} className={`h-9 rounded-md border px-3 text-sm transition-colors ${form.targetType === 'url' ? 'border-primary bg-primary/10 font-medium text-primary' : 'text-muted-foreground hover:text-foreground'}`} onClick={() => setForm({ ...form, targetType: 'url' })}>{t('source.targetUrl')}</button>
|
||||||
|
<button type="button" aria-pressed={form.targetType === 'cluster-svc'} className={`h-9 rounded-md border px-3 text-sm transition-colors ${form.targetType === 'cluster-svc' ? 'border-primary bg-primary/10 font-medium text-primary' : 'text-muted-foreground hover:text-foreground'}`} onClick={() => setForm({ ...form, targetType: 'cluster-svc', service: form.service || 'loki', port: form.port || 3100 })}>{t('source.targetClusterSvc')}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{form.targetType === 'url' ? (
|
||||||
|
<label className={`${labelClass} sm:col-span-2`}>
|
||||||
|
{t('source.addressLabel')}
|
||||||
|
<Input className="mt-1" value={form.url ?? ''} onChange={event => setForm({ ...form, url: event.target.value })} placeholder="http://10.0.0.8:3100" />
|
||||||
|
</label>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.clusterLabel')}
|
||||||
|
<select className="mt-1 block h-9 w-full rounded-md border bg-background px-3 text-sm" value={form.clusterID ?? ''} onChange={event => setForm({ ...form, clusterID: Number(event.target.value) })}>
|
||||||
|
<option value="">{t('source.clusterPlaceholder')}</option>
|
||||||
|
{clusters.map(cluster => <option key={cluster.id} value={cluster.id}>{cluster.name}</option>)}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.namespaceLabel')}
|
||||||
|
<Input className="mt-1" value={form.namespace ?? ''} onChange={event => setForm({ ...form, namespace: event.target.value })} placeholder="log" />
|
||||||
|
</label>
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.serviceLabel')}
|
||||||
|
<Input className="mt-1" value={form.service ?? ''} onChange={event => setForm({ ...form, service: event.target.value })} placeholder="loki" />
|
||||||
|
</label>
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.portLabel')}
|
||||||
|
<Input className="mt-1" type="number" value={form.port ?? 3100} onChange={event => setForm({ ...form, port: Number(event.target.value) })} />
|
||||||
|
</label>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.authLabel')}
|
||||||
|
<select className="mt-1 block h-9 w-full rounded-md border bg-background px-3 text-sm" value={form.authType ?? 'none'} onChange={event => setForm({ ...form, authType: event.target.value })}>
|
||||||
|
<option value="none">{t('source.authNone')}</option>
|
||||||
|
<option value="basic">{t('source.authBasic')}</option>
|
||||||
|
<option value="bearer">{t('source.authBearer')}</option>
|
||||||
|
<option value="headers">{t('source.authHeaders')}</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
{form.authType === 'basic' && (
|
||||||
|
<>
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.usernameLabel')}
|
||||||
|
<Input className="mt-1" value={form.basicUser ?? ''} onChange={event => setForm({ ...form, basicUser: event.target.value })} />
|
||||||
|
</label>
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.passwordLabel')}
|
||||||
|
<Input className="mt-1" type="password" value={form.basicPass ?? ''} onChange={event => setForm({ ...form, basicPass: event.target.value })} />
|
||||||
|
</label>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{form.authType === 'bearer' && (
|
||||||
|
<label className={labelClass}>
|
||||||
|
{t('source.tokenLabel')}
|
||||||
|
<Input className="mt-1" type="password" value={form.bearerToken ?? ''} onChange={event => setForm({ ...form, bearerToken: event.target.value })} />
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
{form.authType === 'headers' && (
|
||||||
|
<label className={`${labelClass} sm:col-span-2`}>
|
||||||
|
{t('source.headersLabel')}
|
||||||
|
<Textarea
|
||||||
|
key={form.id ?? 'new'}
|
||||||
|
className="mt-1 font-mono text-sm"
|
||||||
|
rows={3}
|
||||||
|
spellCheck={false}
|
||||||
|
defaultValue={JSON.stringify(form.headers ?? {}, null, 2)}
|
||||||
|
onBlur={event => {
|
||||||
|
try {
|
||||||
|
const headers = JSON.parse(event.target.value) as Record<string, string>
|
||||||
|
if (!headers || Array.isArray(headers) || typeof headers !== 'object' || Object.values(headers).some(value => typeof value !== 'string')) throw Error()
|
||||||
|
setForm(current => ({ ...current!, headers }))
|
||||||
|
} catch {
|
||||||
|
toast.error(t('source.headersInvalid'))
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder='{"X-Scope-OrgID":"tenant"}'
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center gap-6 sm:col-span-2">
|
||||||
|
<label className="flex items-center gap-2 text-sm">
|
||||||
|
<Checkbox checked={!!form.skipTLSVerify} onCheckedChange={checked => setForm({ ...form, skipTLSVerify: checked === true })} />
|
||||||
|
{t('source.skipTLS')}
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center gap-2 text-sm">
|
||||||
|
<Checkbox checked={!!form.isDefault} onCheckedChange={checked => setForm({ ...form, isDefault: checked === true })} />
|
||||||
|
{t('source.setDefault')}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<DialogFooter className="gap-2 sm:justify-between">
|
||||||
|
{form?.id ? (
|
||||||
|
<Button variant="outline" className="text-destructive hover:bg-destructive/10" disabled={saving} onClick={() => setDeleteTarget(sources.find(source => source.id === form.id) ?? null)}>
|
||||||
|
<Trash2 className="mr-1 size-4" />
|
||||||
|
{t('source.remove')}
|
||||||
|
</Button>
|
||||||
|
) : <span />}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button variant="outline" disabled={saving} onClick={() => setForm(null)}>{t('source.cancel')}</Button>
|
||||||
|
<Button disabled={saving || !form?.name?.trim()} onClick={save}>{t('source.save')}</Button>
|
||||||
|
</div>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
open={deleteTarget !== null}
|
||||||
|
onOpenChange={open => { if (!open) setDeleteTarget(null) }}
|
||||||
|
name={deleteTarget?.name}
|
||||||
|
title={t('source.deleteTitle')}
|
||||||
|
description={t('source.deleteDesc', { name: deleteTarget?.name ?? '' })}
|
||||||
|
loading={saving}
|
||||||
|
onConfirm={() => void remove()}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
})
|
||||||
Reference in new issue
Block a user