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

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/(main)/nodes/components/edge-node-detail.tsx
+125 -82
View File
@@ -4,17 +4,7 @@ import Link from 'next/link';
import {useRouter} from 'next/navigation';
import {useMutation, useQueryClient} from '@tanstack/react-query';
import {useState} from 'react';
import {
Activity,
Cpu,
FileText,
Fingerprint,
Package,
RefreshCw,
RotateCcw,
Trash2,
Upload,
} from 'lucide-react';
import {Activity, Cpu, FileText, Fingerprint, Package, RefreshCw, RotateCcw, Trash2, Upload,} from 'lucide-react';
import {toast} from 'sonner';
import {
@@ -29,16 +19,12 @@ import {
} from '@/components/ui/alert-dialog';
import {Button} from '@/components/ui/button';
import {formatDateTime} from '@/lib/utils';
import type {NodeAgentReleaseInfo, NodeItem, ReleaseChannel} from '@/lib/services/openflare';
import type {NodeAgentReleaseInfo, NodeItem, ReleaseChannel,} from '@/lib/services/openflare';
import {NodeService} from '@/lib/services/openflare';
import {AgentUpdateDialog} from './agent-update-dialog';
import {NodeDetailShell} from './node-detail-shell';
import {
NodeErrorBanner,
NodeInfoRow,
NodeSectionCard,
} from './node-detail-primitives';
import {NodeErrorBanner, NodeInfoRow, NodeSectionCard,} from './node-detail-primitives';
import {NodeEditorDialog} from './node-editor-dialog';
import {NodeObservability} from './node-observability';
import {NodeStatusBadge} from './node-status-badge';
@@ -102,7 +88,10 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
}) =>
NodeService.requestAgentUpdate(node.id, {
channel: release?.channel ?? channel,
tag_name: release?.channel === 'preview' ? release.tag_name || undefined : undefined,
tag_name:
release?.channel === 'preview'
? release.tag_name || undefined
: undefined,
}),
onSuccess: async (updated) => {
toast.success(
@@ -127,114 +116,146 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
const handleRefresh = () => {
void Promise.all([
queryClient.invalidateQueries({ queryKey: nodesQueryKey }),
queryClient.invalidateQueries({ queryKey: ['openflare', 'node-observability', node.id] }),
queryClient.invalidateQueries({
queryKey: ['openflare', 'node-observability', node.id],
}),
]);
};
const headerActions = (
<>
<Button variant="outline" size="sm" className="h-8" onClick={() => setEditorOpen(true)}>
<Button
variant='outline'
size='sm'
className='h-8'
onClick={() => setEditorOpen(true)}
>
编辑
</Button>
<Button variant="outline" size="sm" className="h-8" onClick={handleRefresh}>
<RefreshCw className="size-3.5 mr-1.5" />
<Button
variant='outline'
size='sm'
className='h-8'
onClick={handleRefresh}
>
<RefreshCw className='size-3.5 mr-1.5' />
刷新
</Button>
<Button
variant="outline"
size="sm"
className="h-8"
variant='outline'
size='sm'
className='h-8'
disabled={forceSyncMutation.isPending}
onClick={() => forceSyncMutation.mutate()}
>
<RotateCcw className="size-3.5 mr-1.5" />
<RotateCcw className='size-3.5 mr-1.5' />
{forceSyncMutation.isPending ? '同步中...' : '强制同步'}
</Button>
<Button
variant="outline"
size="sm"
className="h-8"
variant='outline'
size='sm'
className='h-8'
disabled={restartMutation.isPending}
onClick={() => restartMutation.mutate()}
>
{restartMutation.isPending ? '下发中...' : '重启 OpenResty'}
</Button>
<Button variant="secondary" size="sm" className="h-8" onClick={() => setUpgradeOpen(true)}>
<Upload className="size-3.5 mr-1.5" />
<Button
variant='secondary'
size='sm'
className='h-8'
onClick={() => setUpgradeOpen(true)}
>
<Upload className='size-3.5 mr-1.5' />
{node.update_requested ? '查看升级' : '升级 Agent'}
</Button>
<Button
variant="outline"
size="sm"
className="h-8 text-destructive hover:text-destructive"
variant='outline'
size='sm'
className='h-8 text-destructive hover:text-destructive'
onClick={() => setDeleteOpen(true)}
>
<Trash2 className="size-3.5 mr-1.5" />
<Trash2 className='size-3.5 mr-1.5' />
删除
</Button>
</>
);
const overviewTab = (
<div className="space-y-6">
<div className='space-y-6'>
{node.last_error ? <NodeErrorBanner message={node.last_error} /> : null}
<div className="grid gap-6 xl:grid-cols-2">
<NodeSectionCard title="运行状态" description="节点在线情况与 OpenResty 健康">
<div className="divide-y">
<NodeInfoRow label="运行状态">
<div className='grid gap-6 xl:grid-cols-2'>
<NodeSectionCard
title='运行状态'
description='节点在线情况与 OpenResty 健康'
>
<div className='divide-y'>
<NodeInfoRow label='运行状态'>
<NodeStatusBadge
label={getNodeStatusLabel(node.status)}
tone={getNodeStatusTone(node.status)}
/>
</NodeInfoRow>
<NodeInfoRow label="OpenResty 健康">
<NodeInfoRow label='OpenResty 健康'>
<NodeStatusBadge
label={getOpenrestyStatusLabel(node.openresty_status)}
tone={getOpenrestyStatusTone(node.openresty_status)}
/>
</NodeInfoRow>
<NodeInfoRow label="最近心跳">
<NodeInfoRow label='最近心跳'>
{isMeaningfulTime(node.last_seen_at)
? `${formatRelativeTime(node.last_seen_at)} · ${formatDateTime(node.last_seen_at)}`
: '暂无'}
</NodeInfoRow>
<NodeInfoRow label="IP 地址">
<NodeInfoRow label='IP 地址'>
{node.ip || '—'}
{node.ip_manual_override ? '（已锁定）' : ''}
</NodeInfoRow>
<NodeInfoRow label="地图点位">{node.geo_name || '未配置'}</NodeInfoRow>
<NodeInfoRow label='地图点位'>
{node.geo_name || '未配置'}
</NodeInfoRow>
</div>
</NodeSectionCard>
<NodeSectionCard
title="配置同步"
description="版本追平与应用结果摘要"
title='配置同步'
description='版本追平与应用结果摘要'
action={
<Button variant="outline" size="sm" className="h-8" asChild>
<Link href={`/apply-logs?node_id=${encodeURIComponent(node.node_id)}`}>
<FileText className="size-3.5 mr-1.5" />
<Button variant='outline' size='sm' className='h-8' asChild>
<Link
href={`/apply-logs?node_id=${encodeURIComponent(node.node_id)}`}
>
<FileText className='size-3.5 mr-1.5' />
应用记录
</Link>
</Button>
}
>
<div className="divide-y">
<NodeInfoRow label="当前配置版本">{node.current_version || '未应用'}</NodeInfoRow>
<NodeInfoRow label="最近应用">
<div className='divide-y'>
<NodeInfoRow label='当前配置版本'>
{node.current_version || '未应用'}
</NodeInfoRow>
<NodeInfoRow label='最近应用'>
<NodeStatusBadge
label={getApplyLabel(node.latest_apply_result)}
tone={getApplyTone(node.latest_apply_result)}
/>
</NodeInfoRow>
<NodeInfoRow label="最近应用时间">
<NodeInfoRow label='最近应用时间'>
{isMeaningfulTime(node.latest_apply_at)
? `${formatRelativeTime(node.latest_apply_at)} · ${formatDateTime(node.latest_apply_at)}`
: '暂无'}
</NodeInfoRow>
<NodeInfoRow label="Agent 版本">{node.version || 'unknown'}</NodeInfoRow>
<NodeInfoRow label="Nginx 版本">{node.ext_version || 'unknown'}</NodeInfoRow>
<NodeInfoRow label="自动更新">{node.auto_update_enabled ? '已启用' : '手动'}</NodeInfoRow>
<NodeInfoRow label='Agent 版本'>
{node.version || 'unknown'}
</NodeInfoRow>
<NodeInfoRow label='Nginx 版本'>
{node.ext_version || 'unknown'}
</NodeInfoRow>
<NodeInfoRow label='自动更新'>
{node.auto_update_enabled ? '已启用' : '手动'}
</NodeInfoRow>
</div>
</NodeSectionCard>
</div>
@@ -242,33 +263,45 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
);
const manageTab = (
<div className="space-y-6">
<NodeSectionCard title="节点标识" description="用于 Agent 接入与鉴别的核心字段">
<div className="divide-y">
<NodeInfoRow label="节点 ID">
<span className="font-mono text-xs break-all">{node.node_id}</span>
<div className='space-y-6'>
<NodeSectionCard
title='节点标识'
description='用于 Agent 接入与鉴别的核心字段'
>
<div className='divide-y'>
<NodeInfoRow label='节点 ID'>
<span className='font-mono text-xs break-all'>{node.node_id}</span>
</NodeInfoRow>
<NodeInfoRow label="Agent Token">
<span className="font-mono text-xs break-all">{node.access_token || '暂无'}</span>
<NodeInfoRow label='Agent Token'>
<span className='font-mono text-xs break-all'>
{node.access_token || '暂无'}
</span>
</NodeInfoRow>
<NodeInfoRow label='创建时间'>
{formatDateTime(node.created_at)}
</NodeInfoRow>
<NodeInfoRow label='更新时间'>
{formatDateTime(node.updated_at)}
</NodeInfoRow>
<NodeInfoRow label="创建时间">{formatDateTime(node.created_at)}</NodeInfoRow>
<NodeInfoRow label="更新时间">{formatDateTime(node.updated_at)}</NodeInfoRow>
</div>
</NodeSectionCard>
<NodeSectionCard title="运行消息" description="OpenResty 与 Agent 上报的状态说明">
<div className="space-y-4 text-sm">
<NodeSectionCard
title='运行消息'
description='OpenResty 与 Agent 上报的状态说明'
>
<div className='space-y-4 text-sm'>
<div>
<p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
<p className='mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground'>
OpenResty 状态消息
</p>
<p className="rounded-lg border bg-muted/30 px-3 py-3 leading-6 break-words whitespace-pre-wrap">
<p className='rounded-lg border bg-muted/30 px-3 py-3 leading-6 break-words whitespace-pre-wrap'>
{node.openresty_message || '当前未上报额外错误。'}
</p>
</div>
{node.restart_openresty_requested ? (
<div className="flex items-center gap-2 text-sm text-amber-700 dark:text-amber-300">
<Activity className="size-4" />
<div className='flex items-center gap-2 text-sm text-amber-700 dark:text-amber-300'>
<Activity className='size-4' />
已等待节点在下一次心跳后执行 OpenResty 重启。
</div>
) : null}
@@ -281,10 +314,13 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
<>
<NodeDetailShell
title={node.name}
typeLabel="Edge"
typeTone="info"
typeLabel='Edge'
typeTone='info'
statusBadges={[
{ label: getNodeStatusLabel(node.status), tone: getNodeStatusTone(node.status) },
{
label: getNodeStatusLabel(node.status),
tone: getNodeStatusTone(node.status),
},
{
label: getOpenrestyStatusLabel(node.openresty_status),
tone: getOpenrestyStatusTone(node.openresty_status),
@@ -294,7 +330,11 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
kpis={[
{ label: '节点 ID', value: node.node_id, icon: Fingerprint },
{ label: 'Agent 版本', value: node.version || 'unknown', icon: Cpu },
{ label: '当前配置', value: node.current_version || '未应用', icon: Package },
{
label: '当前配置',
value: node.current_version || '未应用',
icon: Package,
},
{
label: '最近心跳',
value: isMeaningfulTime(node.last_seen_at)
@@ -308,12 +348,12 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
<NodeObservability
nodeId={node.id}
node={node}
variant="edge"
connectionHint="OpenResty 当前连接"
variant='edge'
connectionHint='OpenResty 当前连接'
/>
}
manage={manageTab}
defaultTab="overview"
defaultTab='overview'
/>
<NodeEditorDialog
@@ -341,13 +381,16 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
<AlertDialogHeader>
<AlertDialogTitle>确认删除节点</AlertDialogTitle>
<AlertDialogDescription>
确认删除节点「{node.name}」吗？删除后该节点需要重新创建并重新接入。
确认删除节点「{node.name}
」吗？删除后该节点需要重新创建并重新接入。
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={deleteMutation.isPending}>取消</AlertDialogCancel>
<AlertDialogCancel disabled={deleteMutation.isPending}>
取消
</AlertDialogCancel>
<AlertDialogAction
className="bg-destructive text-white hover:bg-destructive/90"
className='bg-destructive text-white hover:bg-destructive/90'
disabled={deleteMutation.isPending}
onClick={() => deleteMutation.mutate()}
>
@@ -358,4 +401,4 @@ export function EdgeNodeDetail({ node }: { node: NodeItem }) {
</AlertDialog>
</>
);
}
}