tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-09 00:56:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance apply logs and config versions features

Browse Source 
- Add detailed diff reporting for OpenResty options in TestPreviewAndDiffConfigVersion.
- Update ApplyLogsPage to display additional log details including checksums and support file counts.
- Introduce ConfigVersionSnapshotModal for viewing configuration snapshots.
- Refactor config versions page to utilize new snapshot modal and improve option diff display.
- Extend ApplyLogItem type to include checksums and support file count.
- Enhance NodeDetailPage to show target version details and checksums.
This commit is contained in:
ryan
2026-03-12 22:49:18 +08:00
parent 4c0466a92b
commit 594057be06
13 changed files with 618 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atsf_server/web/features/apply-logs/components/apply-logs-page.tsx
+166 -64
View File
@@ -39,12 +39,26 @@ function buildSummary(logs: ApplyLogItem[]) {
return [
{ label: '记录总数', value: logs.length },
{ label: '成功', value: logs.filter((item) => item.result === 'success').length },
{ label: '失败', value: logs.filter((item) => item.result !== 'success').length },
{
label: '成功',
value: logs.filter((item) => item.result === 'success').length,
},
{
label: '失败',
value: logs.filter((item) => item.result !== 'success').length,
},
{ label: '节点数', value: nodeIds.size },
];
}
function truncateHash(value: string) {
if (!value) {
return '—';
}
return value.length > 12 ? `${value.slice(0, 12)}...` : value;
}
export function ApplyLogsPage() {
const queryClient = useQueryClient();
const [nodeFilterInput, setNodeFilterInput] = useState('');
@@ -85,62 +99,73 @@ export function ApplyLogsPage() {
};
return (
<div className='space-y-6'>
<div className="space-y-6">
<PageHeader
title='应用记录'
description='查看节点应用版本的成功或失败记录，支持按 node_id 过滤并查看单条详情。'
title="应用记录"
description="查看节点应用版本的成功或失败记录，支持按 node_id 过滤并查看单条详情。"
action={
<Link
href='/node'
className='inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]'
href="/node"
className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
>
返回节点页
</Link>
}
/>
{feedback ? <InlineMessage tone='info' message={feedback} /> : null}
{feedback ? <InlineMessage tone="info" message={feedback} /> : null}
<AppCard title='记录摘要' description='帮助快速识别失败趋势和受影响节点范围。'>
<div className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
<AppCard
title="记录摘要"
description="帮助快速识别失败趋势和受影响节点范围。"
>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
{summary.map((item) => (
<div
key={item.label}
className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'
className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
>
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>{item.label}</p>
<p className='mt-2 text-lg font-semibold text-[var(--foreground-primary)]'>{item.value}</p>
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
{item.label}
</p>
<p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
{item.value}
</p>
</div>
))}
</div>
</AppCard>
<div className='grid gap-6 xl:grid-cols-[1.2fr_0.8fr]'>
<div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
<AppCard
title='过滤与列表'
description='默认展示全部记录，可按 node_id 快速筛选单节点应用结果。'
title="过滤与列表"
description="默认展示全部记录，可按 node_id 快速筛选单节点应用结果。"
action={
<SecondaryButton
type='button'
onClick={() => void queryClient.invalidateQueries({ queryKey: applyLogsQueryKey(nodeFilter) })}
type="button"
onClick={() =>
void queryClient.invalidateQueries({
queryKey: applyLogsQueryKey(nodeFilter),
})
}
>
刷新
</SecondaryButton>
}
>
<div className='space-y-5'>
<div className='flex flex-col gap-3 lg:flex-row lg:items-center'>
<div className="space-y-5">
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
<ResourceInput
value={nodeFilterInput}
onChange={(event) => setNodeFilterInput(event.target.value)}
placeholder='输入 node_id 过滤应用记录'
className='lg:max-w-md'
placeholder="输入 node_id 过滤应用记录"
className="lg:max-w-md"
/>
<div className='flex flex-wrap gap-2'>
<PrimaryButton type='button' onClick={handleSearch}>
<div className="flex flex-wrap gap-2">
<PrimaryButton type="button" onClick={handleSearch}>
筛选
</PrimaryButton>
<SecondaryButton type='button' onClick={handleReset}>
<SecondaryButton type="button" onClick={handleReset}>
清空
</SecondaryButton>
</div>
@@ -149,45 +174,69 @@ export function ApplyLogsPage() {
{logsQuery.isLoading ? (
<LoadingState />
) : logsQuery.isError ? (
<ErrorState title='应用记录加载失败' description={getErrorMessage(logsQuery.error)} />
<ErrorState
title="应用记录加载失败"
description={getErrorMessage(logsQuery.error)}
/>
) : logs.length === 0 ? (
<EmptyState title='暂无应用记录' description='当前筛选条件下没有可展示的应用结果。' />
<EmptyState
title="暂无应用记录"
description="当前筛选条件下没有可展示的应用结果。"
/>
) : (
<div className='overflow-x-auto'>
<table className='min-w-full divide-y divide-[var(--border-default)] text-left text-sm'>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
<thead>
<tr className='text-[var(--foreground-secondary)]'>
<th className='px-3 py-3 font-medium'>Node ID</th>
<th className='px-3 py-3 font-medium'>版本</th>
<th className='px-3 py-3 font-medium'>结果</th>
<th className='px-3 py-3 font-medium'>时间</th>
<th className='px-3 py-3 font-medium'>详情</th>
<tr className="text-[var(--foreground-secondary)]">
<th className="px-3 py-3 font-medium">Node ID</th>
<th className="px-3 py-3 font-medium">版本</th>
<th className="px-3 py-3 font-medium">结果</th>
<th className="px-3 py-3 font-medium">Checksum</th>
<th className="px-3 py-3 font-medium">时间</th>
<th className="px-3 py-3 font-medium">详情</th>
</tr>
</thead>
<tbody className='divide-y divide-[var(--border-default)]'>
<tbody className="divide-y divide-[var(--border-default)]">
{logs.map((log) => {
const resultMeta = getResultMeta(log.result);
return (
<tr key={log.id} className='align-top'>
<td className='px-3 py-4 font-medium text-[var(--foreground-primary)]'>{log.node_id}</td>
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>{log.version}</td>
<td className='px-3 py-4'>
<StatusBadge label={resultMeta.label} variant={resultMeta.variant} />
<tr key={log.id} className="align-top">
<td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
{log.node_id}
</td>
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>
<div className='space-y-1'>
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
{log.version}
</td>
<td className="px-3 py-4">
<StatusBadge
label={resultMeta.label}
variant={resultMeta.variant}
/>
</td>
<td
className="px-3 py-4 text-[var(--foreground-secondary)]"
title={log.checksum}
>
{truncateHash(log.checksum)}
</td>
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
<div className="space-y-1">
<p>{formatDateTime(log.created_at)}</p>
<p className='text-xs'>{formatRelativeTime(log.created_at)}</p>
<p className="text-xs">
{formatRelativeTime(log.created_at)}
</p>
</div>
</td>
<td className='px-3 py-4'>
<td className="px-3 py-4">
<SecondaryButton
type='button'
type="button"
onClick={() => {
setSelectedLogId(log.id);
setFeedback(`已选中节点 ${log.node_id} 的版本 ${log.version} 记录。`);
setFeedback(
`已选中节点 ${log.node_id} 的版本 ${log.version} 记录。`,
);
}}
className='px-3 py-2 text-xs'
className="px-3 py-2 text-xs"
>
查看详情
</SecondaryButton>
@@ -202,39 +251,92 @@ export function ApplyLogsPage() {
</div>
</AppCard>
<AppCard title='记录详情' description='展示所选应用记录的完整结果与错误信息。'>
<AppCard
title="记录详情"
description="展示所选应用记录的完整结果与错误信息。"
>
{selectedLog ? (
<div className='space-y-4'>
<div className='flex flex-wrap gap-2'>
<div className="space-y-4">
<div className="flex flex-wrap gap-2">
<StatusBadge {...getResultMeta(selectedLog.result)} />
<StatusBadge label={`Node：${selectedLog.node_id}`} variant='info' />
<StatusBadge label={`版本：${selectedLog.version}`} variant='warning' />
<StatusBadge
label={`Node：${selectedLog.node_id}`}
variant="info"
/>
<StatusBadge
label={`版本：${selectedLog.version}`}
variant="warning"
/>
</div>
<div className='grid gap-4 sm:grid-cols-2'>
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>创建时间</p>
<p className='mt-2 text-sm text-[var(--foreground-primary)]'>
<div className="grid gap-4 sm:grid-cols-2">
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
创建时间
</p>
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
{formatDateTime(selectedLog.created_at)}
</p>
</div>
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>相对时间</p>
<p className='mt-2 text-sm text-[var(--foreground-primary)]'>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
相对时间
</p>
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
{formatRelativeTime(selectedLog.created_at)}
</p>
</div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
目标 Checksum
</p>
<p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
{selectedLog.checksum || '无'}
</p>
</div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
支持文件数
</p>
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
{selectedLog.support_file_count}
</p>
</div>
</div>
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>应用信息</p>
<p className='mt-3 whitespace-pre-wrap break-words text-sm leading-6 text-[var(--foreground-primary)]'>
<div className="grid gap-4 sm:grid-cols-2">
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
主配置摘要
</p>
<p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
{selectedLog.main_config_checksum || '无'}
</p>
</div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
路由配置摘要
</p>
<p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
{selectedLog.route_config_checksum || '无'}
</p>
</div>
</div>
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
<p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
应用信息
</p>
<p className="mt-3 text-sm leading-6 break-words whitespace-pre-wrap text-[var(--foreground-primary)]">
{selectedLog.message || '无附加信息'}
</p>
</div>
</div>
) : (
<EmptyState title='未选择记录' description='请先从左侧列表中选择一条应用记录查看详情。' />
<EmptyState
title="未选择记录"
description="请先从左侧列表中选择一条应用记录查看详情。"
/>
)}
</AppCard>
</div>
atsf_server/web/features/apply-logs/types.ts
+4
View File
@@ -4,5 +4,9 @@ export interface ApplyLogItem {
version: string;
result: 'success' | 'failed' | string;
message: string;
checksum: string;
main_config_checksum: string;
route_config_checksum: string;
support_file_count: number;
created_at: string;
}