mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-04 07:06:36 +08:00
ryan
63cd906cfc
- Merge all files inside openflare-server to the repository root directory. - Relocate agent, relay, and flared subprojects from internal/ to internal/apps/. - Combine docker-compose files and update build context paths to root. - Update GitHub workflows and Dockerfiles to refer to new directories and package names. - Rewrite Go package imports across all files. - Resolve database renew test race condition and clean up docs.
361 lines
13 KiB
TypeScript
361 lines
13 KiB
TypeScript
'use client';
|
|
|
|
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 {toast} from 'sonner';
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} 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 {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 {NodeEditorDialog} from './node-editor-dialog';
|
|
import {NodeObservability} from './node-observability';
|
|
import {NodeStatusBadge} from './node-status-badge';
|
|
import {
|
|
formatRelativeTime,
|
|
getApplyLabel,
|
|
getApplyTone,
|
|
getErrorMessage,
|
|
getNodeStatusLabel,
|
|
getNodeStatusTone,
|
|
getOpenrestyStatusLabel,
|
|
getOpenrestyStatusTone,
|
|
isMeaningfulTime,
|
|
} from './node-utils';
|
|
|
|
const nodesQueryKey = ['openflare', 'nodes'];
|
|
|
|
export function EdgeNodeDetail({ node }: { node: NodeItem }) {
|
|
const router = useRouter();
|
|
const queryClient = useQueryClient();
|
|
const [editorOpen, setEditorOpen] = useState(false);
|
|
const [upgradeOpen, setUpgradeOpen] = useState(false);
|
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: (payload: Parameters<typeof NodeService.updateNode>[1]) =>
|
|
NodeService.updateNode(node.id, payload),
|
|
onSuccess: async () => {
|
|
toast.success('节点已更新');
|
|
setEditorOpen(false);
|
|
await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
|
|
},
|
|
onError: (error) => toast.error(getErrorMessage(error)),
|
|
});
|
|
|
|
const forceSyncMutation = useMutation({
|
|
mutationFn: () => NodeService.requestForceSync(node.id),
|
|
onSuccess: async (updated) => {
|
|
toast.success(`已向节点 ${updated.name} 下发强制同步指令`);
|
|
await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
|
|
},
|
|
onError: (error) => toast.error(getErrorMessage(error)),
|
|
});
|
|
|
|
const restartMutation = useMutation({
|
|
mutationFn: () => NodeService.requestOpenrestyRestart(node.id),
|
|
onSuccess: async (updated) => {
|
|
toast.success(`已向节点 ${updated.name} 下发 OpenResty 重启指令`);
|
|
await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
|
|
},
|
|
onError: (error) => toast.error(getErrorMessage(error)),
|
|
});
|
|
|
|
const upgradeMutation = useMutation({
|
|
mutationFn: ({
|
|
release,
|
|
channel,
|
|
}: {
|
|
release: NodeAgentReleaseInfo | null;
|
|
channel: ReleaseChannel;
|
|
}) =>
|
|
NodeService.requestAgentUpdate(node.id, {
|
|
channel: release?.channel ?? channel,
|
|
tag_name: release?.channel === 'preview' ? release.tag_name || undefined : undefined,
|
|
}),
|
|
onSuccess: async (updated) => {
|
|
toast.success(
|
|
`已向节点 ${updated.name} 下发${updated.update_channel === 'preview' ? '预览版' : '正式版'}升级指令`,
|
|
);
|
|
setUpgradeOpen(false);
|
|
await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
|
|
},
|
|
onError: (error) => toast.error(getErrorMessage(error)),
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: () => NodeService.deleteNode(node.id),
|
|
onSuccess: async () => {
|
|
toast.success('节点已删除');
|
|
await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
|
|
router.push('/nodes');
|
|
},
|
|
onError: (error) => toast.error(getErrorMessage(error)),
|
|
});
|
|
|
|
const handleRefresh = () => {
|
|
void Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: nodesQueryKey }),
|
|
queryClient.invalidateQueries({ queryKey: ['openflare', 'node-observability', node.id] }),
|
|
]);
|
|
};
|
|
|
|
const headerActions = (
|
|
<>
|
|
<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>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8"
|
|
disabled={forceSyncMutation.isPending}
|
|
onClick={() => forceSyncMutation.mutate()}
|
|
>
|
|
<RotateCcw className="size-3.5 mr-1.5" />
|
|
{forceSyncMutation.isPending ? '同步中...' : '强制同步'}
|
|
</Button>
|
|
<Button
|
|
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" />
|
|
{node.update_requested ? '查看升级' : '升级 Agent'}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 text-destructive hover:text-destructive"
|
|
onClick={() => setDeleteOpen(true)}
|
|
>
|
|
<Trash2 className="size-3.5 mr-1.5" />
|
|
删除
|
|
</Button>
|
|
</>
|
|
);
|
|
|
|
const overviewTab = (
|
|
<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="运行状态">
|
|
<NodeStatusBadge
|
|
label={getNodeStatusLabel(node.status)}
|
|
tone={getNodeStatusTone(node.status)}
|
|
/>
|
|
</NodeInfoRow>
|
|
<NodeInfoRow label="OpenResty 健康">
|
|
<NodeStatusBadge
|
|
label={getOpenrestyStatusLabel(node.openresty_status)}
|
|
tone={getOpenrestyStatusTone(node.openresty_status)}
|
|
/>
|
|
</NodeInfoRow>
|
|
<NodeInfoRow label="最近心跳">
|
|
{isMeaningfulTime(node.last_seen_at)
|
|
? `${formatRelativeTime(node.last_seen_at)} · ${formatDateTime(node.last_seen_at)}`
|
|
: '暂无'}
|
|
</NodeInfoRow>
|
|
<NodeInfoRow label="IP 地址">
|
|
{node.ip || '—'}
|
|
{node.ip_manual_override ? '（已锁定）' : ''}
|
|
</NodeInfoRow>
|
|
<NodeInfoRow label="地图点位">{node.geo_name || '未配置'}</NodeInfoRow>
|
|
</div>
|
|
</NodeSectionCard>
|
|
|
|
<NodeSectionCard
|
|
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" />
|
|
应用记录
|
|
</Link>
|
|
</Button>
|
|
}
|
|
>
|
|
<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="最近应用时间">
|
|
{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>
|
|
</div>
|
|
</NodeSectionCard>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
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>
|
|
</NodeInfoRow>
|
|
<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>
|
|
</div>
|
|
</NodeSectionCard>
|
|
|
|
<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">
|
|
OpenResty 状态消息
|
|
</p>
|
|
<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" />
|
|
已等待节点在下一次心跳后执行 OpenResty 重启。
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</NodeSectionCard>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<NodeDetailShell
|
|
title={node.name}
|
|
typeLabel="Edge"
|
|
typeTone="info"
|
|
statusBadges={[
|
|
{ label: getNodeStatusLabel(node.status), tone: getNodeStatusTone(node.status) },
|
|
{
|
|
label: getOpenrestyStatusLabel(node.openresty_status),
|
|
tone: getOpenrestyStatusTone(node.openresty_status),
|
|
},
|
|
]}
|
|
actions={headerActions}
|
|
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: isMeaningfulTime(node.last_seen_at)
|
|
? formatRelativeTime(node.last_seen_at)
|
|
: '暂无',
|
|
icon: Activity,
|
|
},
|
|
]}
|
|
overview={overviewTab}
|
|
dashboard={
|
|
<NodeObservability
|
|
nodeId={node.id}
|
|
node={node}
|
|
variant="edge"
|
|
connectionHint="OpenResty 当前连接"
|
|
/>
|
|
}
|
|
manage={manageTab}
|
|
defaultTab="overview"
|
|
/>
|
|
|
|
<NodeEditorDialog
|
|
open={editorOpen}
|
|
node={node}
|
|
submitting={saveMutation.isPending}
|
|
onClose={() => setEditorOpen(false)}
|
|
onSubmit={async (payload) => {
|
|
await saveMutation.mutateAsync(payload);
|
|
}}
|
|
/>
|
|
|
|
<AgentUpdateDialog
|
|
open={upgradeOpen}
|
|
node={node}
|
|
submitting={upgradeMutation.isPending}
|
|
onClose={() => setUpgradeOpen(false)}
|
|
onConfirm={async (release, channel) => {
|
|
await upgradeMutation.mutateAsync({ release, channel });
|
|
}}
|
|
/>
|
|
|
|
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>确认删除节点</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
确认删除节点「{node.name}」吗？删除后该节点需要重新创建并重新接入。
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={deleteMutation.isPending}>取消</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className="bg-destructive text-white hover:bg-destructive/90"
|
|
disabled={deleteMutation.isPending}
|
|
onClick={() => deleteMutation.mutate()}
|
|
>
|
|
{deleteMutation.isPending ? '删除中...' : '确认删除'}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
);
|
|
} |