mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-13 18:36:37 +08:00
refactor(repo): consolidate openflare-server to root and move subprojects to internal/apps
- 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.
This commit is contained in:
ryan
@@ -0,0 +1,425 @@
|
||||
"use client"
|
||||
|
||||
import {useCallback, useEffect, useMemo, useState} from "react"
|
||||
import {Eye, GitCompare, History, Loader2, Play, RefreshCw, Trash2,} from "lucide-react"
|
||||
import {toast} from "sonner"
|
||||
|
||||
import {EmptyStateWithBorder} from "@/components/layout/empty"
|
||||
import {ErrorInline} from "@/components/layout/error"
|
||||
import {LoadingStateWithBorder} from "@/components/layout/loading"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import {Badge} from "@/components/ui/badge"
|
||||
import {Button} from "@/components/ui/button"
|
||||
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
|
||||
import {
|
||||
type ConfigDiffResult,
|
||||
type ConfigPreviewResult,
|
||||
ConfigVersionService,
|
||||
type ConfigVersionSummary,
|
||||
} from "@/lib/services/openflare"
|
||||
import {formatDateTime} from "@/lib/utils"
|
||||
|
||||
import {CleanupDialog} from "./components/cleanup-dialog"
|
||||
import {DiffDialog} from "./components/diff-dialog"
|
||||
import {PreviewSheet} from "./components/preview-sheet"
|
||||
import {VersionSnapshotSheet} from "./components/version-snapshot-sheet"
|
||||
|
||||
function truncateChecksum(checksum: string) {
|
||||
if (!checksum) return "—"
|
||||
return checksum.length > 16 ? `${checksum.slice(0, 16)}...` : checksum
|
||||
}
|
||||
|
||||
function hasConfigDiff(diff: ConfigDiffResult) {
|
||||
return (
|
||||
diff.added_domains.length > 0 ||
|
||||
diff.removed_domains.length > 0 ||
|
||||
diff.modified_domains.length > 0 ||
|
||||
diff.main_config_changed ||
|
||||
diff.changed_option_keys.length > 0 ||
|
||||
!diff.active_version
|
||||
)
|
||||
}
|
||||
|
||||
export default function ConfigVersionsPage() {
|
||||
const [versions, setVersions] = useState<ConfigVersionSummary[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const [previewOpen, setPreviewOpen] = useState(false)
|
||||
const [preview, setPreview] = useState<ConfigPreviewResult | null>(null)
|
||||
const [previewLoading, setPreviewLoading] = useState(false)
|
||||
const [previewError, setPreviewError] = useState<string | null>(null)
|
||||
|
||||
const [diffOpen, setDiffOpen] = useState(false)
|
||||
const [diff, setDiff] = useState<ConfigDiffResult | null>(null)
|
||||
const [diffLoading, setDiffLoading] = useState(false)
|
||||
const [diffError, setDiffError] = useState<string | null>(null)
|
||||
|
||||
const [snapshotVersion, setSnapshotVersion] = useState<ConfigVersionSummary | null>(null)
|
||||
const [snapshotOpen, setSnapshotOpen] = useState(false)
|
||||
|
||||
const [publishConfirmOpen, setPublishConfirmOpen] = useState(false)
|
||||
const [forcePublishConfirmOpen, setForcePublishConfirmOpen] = useState(false)
|
||||
const [activateTarget, setActivateTarget] = useState<ConfigVersionSummary | null>(null)
|
||||
const [cleanupOpen, setCleanupOpen] = useState(false)
|
||||
|
||||
const [publishing, setPublishing] = useState(false)
|
||||
const [activating, setActivating] = useState(false)
|
||||
const [cleaning, setCleaning] = useState(false)
|
||||
|
||||
const canPublish = useMemo(
|
||||
() => Boolean(preview && preview.route_count > 0 && diff && hasConfigDiff(diff)),
|
||||
[preview, diff],
|
||||
)
|
||||
|
||||
const fetchVersions = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const data = await ConfigVersionService.list()
|
||||
setVersions(data)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "加载失败")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
void fetchVersions()
|
||||
}, [fetchVersions])
|
||||
|
||||
const loadPreviewData = async () => {
|
||||
setPreviewLoading(true)
|
||||
setPreviewError(null)
|
||||
setDiffLoading(true)
|
||||
setDiffError(null)
|
||||
|
||||
try {
|
||||
const [previewData, diffData] = await Promise.all([
|
||||
ConfigVersionService.preview(),
|
||||
ConfigVersionService.diff(),
|
||||
])
|
||||
setPreview(previewData)
|
||||
setDiff(diffData)
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "加载预览失败"
|
||||
setPreviewError(message)
|
||||
setDiffError(message)
|
||||
} finally {
|
||||
setPreviewLoading(false)
|
||||
setDiffLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenPreview = async () => {
|
||||
setPreviewOpen(true)
|
||||
if (!preview) {
|
||||
await loadPreviewData()
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenDiff = async () => {
|
||||
setDiffOpen(true)
|
||||
if (!diff) {
|
||||
setDiffLoading(true)
|
||||
setDiffError(null)
|
||||
try {
|
||||
const diffData = await ConfigVersionService.diff()
|
||||
setDiff(diffData)
|
||||
} catch (err) {
|
||||
setDiffError(err instanceof Error ? err.message : "加载差异失败")
|
||||
} finally {
|
||||
setDiffLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handlePublish = async (force = false) => {
|
||||
setPublishing(true)
|
||||
try {
|
||||
const version = await ConfigVersionService.publish(force)
|
||||
toast.success("发布成功", { description: `版本 ${version.version}` })
|
||||
setPreviewOpen(false)
|
||||
setPublishConfirmOpen(false)
|
||||
setForcePublishConfirmOpen(false)
|
||||
setPreview(null)
|
||||
setDiff(null)
|
||||
await fetchVersions()
|
||||
} catch (err) {
|
||||
toast.error("发布失败", {
|
||||
description: err instanceof Error ? err.message : "未知错误",
|
||||
})
|
||||
} finally {
|
||||
setPublishing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleActivate = async () => {
|
||||
if (!activateTarget) return
|
||||
|
||||
setActivating(true)
|
||||
try {
|
||||
const version = await ConfigVersionService.activate(activateTarget.id)
|
||||
toast.success("激活成功", { description: `版本 ${version.version}` })
|
||||
setActivateTarget(null)
|
||||
await fetchVersions()
|
||||
} catch (err) {
|
||||
toast.error("激活失败", {
|
||||
description: err instanceof Error ? err.message : "未知错误",
|
||||
})
|
||||
} finally {
|
||||
setActivating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCleanup = async (keepCount: number) => {
|
||||
setCleaning(true)
|
||||
try {
|
||||
const result = await ConfigVersionService.cleanup({ keep_count: keepCount })
|
||||
toast.success("清理完成", {
|
||||
description: `已删除 ${result.deleted_count} 个历史快照`,
|
||||
})
|
||||
setCleanupOpen(false)
|
||||
await fetchVersions()
|
||||
} catch (err) {
|
||||
toast.error("清理失败", {
|
||||
description: err instanceof Error ? err.message : "未知错误",
|
||||
})
|
||||
} finally {
|
||||
setCleaning(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="py-6 px-1 space-y-6">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<History className="size-5 text-primary" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">配置版本</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
查看历史快照、预览待发布配置差异，并在需要时重新激活旧版本。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => void fetchVersions()} disabled={loading}>
|
||||
<RefreshCw className={`size-3.5 mr-1 ${loading ? "animate-spin" : ""}`} />
|
||||
刷新
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setCleanupOpen(true)}>
|
||||
<Trash2 className="size-3.5 mr-1" />
|
||||
清理旧版本
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => void handleOpenDiff()}>
|
||||
<GitCompare className="size-3.5 mr-1" />
|
||||
查看差异
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setForcePublishConfirmOpen(true)}>
|
||||
强制发布
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => void handleOpenPreview()}>
|
||||
<Eye className="size-3.5 mr-1" />
|
||||
预览并发布
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? <ErrorInline message={error} onRetry={() => void fetchVersions()} /> : null}
|
||||
|
||||
<div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
|
||||
{loading ? (
|
||||
<LoadingStateWithBorder />
|
||||
) : versions.length === 0 ? (
|
||||
<EmptyStateWithBorder
|
||||
title="暂无历史版本"
|
||||
description="当前还没有可查看的发布记录，请先触发一次配置发布。"
|
||||
/>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader className="bg-muted/40">
|
||||
<TableRow className="border-dashed hover:bg-transparent">
|
||||
<TableHead className="text-xs font-semibold">版本号</TableHead>
|
||||
<TableHead className="text-xs font-semibold">状态</TableHead>
|
||||
<TableHead className="text-xs font-semibold">创建人</TableHead>
|
||||
<TableHead className="text-xs font-semibold">Checksum</TableHead>
|
||||
<TableHead className="text-xs font-semibold">创建时间</TableHead>
|
||||
<TableHead className="text-xs font-semibold text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{versions.map((version) => (
|
||||
<TableRow
|
||||
key={version.id}
|
||||
className="border-dashed hover:bg-muted/10 transition-colors"
|
||||
>
|
||||
<TableCell className="font-mono text-xs font-semibold">
|
||||
{version.version}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{version.is_active ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2"
|
||||
>
|
||||
<span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
|
||||
当前激活
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-[10px] rounded-full py-0 px-2">
|
||||
历史版本
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{version.created_by || "系统"}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="text-xs font-mono text-muted-foreground"
|
||||
title={version.checksum}
|
||||
>
|
||||
{truncateChecksum(version.checksum)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{formatDateTime(version.created_at)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => {
|
||||
setSnapshotVersion(version)
|
||||
setSnapshotOpen(true)
|
||||
}}
|
||||
>
|
||||
<Eye className="size-3 mr-1" />
|
||||
快照
|
||||
</Button>
|
||||
{!version.is_active ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setActivateTarget(version)}
|
||||
>
|
||||
<Play className="size-3 mr-1" />
|
||||
激活
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PreviewSheet
|
||||
open={previewOpen}
|
||||
onOpenChange={setPreviewOpen}
|
||||
preview={preview}
|
||||
loading={previewLoading}
|
||||
error={previewError}
|
||||
publishing={publishing}
|
||||
canPublish={canPublish}
|
||||
onPublish={() => setPublishConfirmOpen(true)}
|
||||
/>
|
||||
|
||||
<DiffDialog
|
||||
open={diffOpen}
|
||||
onOpenChange={setDiffOpen}
|
||||
diff={diff}
|
||||
loading={diffLoading}
|
||||
error={diffError}
|
||||
/>
|
||||
|
||||
<VersionSnapshotSheet
|
||||
version={snapshotVersion}
|
||||
open={snapshotOpen}
|
||||
onOpenChange={setSnapshotOpen}
|
||||
/>
|
||||
|
||||
<CleanupDialog
|
||||
open={cleanupOpen}
|
||||
onOpenChange={setCleanupOpen}
|
||||
onConfirm={(keepCount) => void handleCleanup(keepCount)}
|
||||
loading={cleaning}
|
||||
/>
|
||||
|
||||
<AlertDialog open={publishConfirmOpen} onOpenChange={setPublishConfirmOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认发布配置</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
将把当前待发布配置生成新版本并设为激活版本，节点将随后拉取更新。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={publishing}>取消</AlertDialogCancel>
|
||||
<Button onClick={() => void handlePublish(false)} disabled={publishing}>
|
||||
{publishing ? <Loader2 className="size-4 animate-spin" /> : "确认发布"}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog open={forcePublishConfirmOpen} onOpenChange={setForcePublishConfirmOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认强制发布</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
将忽略配置变化检查并立即生成一个新版本，请确认你确实需要重新发布。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={publishing}>取消</AlertDialogCancel>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => void handlePublish(true)}
|
||||
disabled={publishing}
|
||||
>
|
||||
{publishing ? <Loader2 className="size-4 animate-spin" /> : "强制发布"}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog
|
||||
open={activateTarget !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setActivateTarget(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认激活版本</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{activateTarget
|
||||
? `确认将版本 ${activateTarget.version} 设为当前激活版本吗？`
|
||||
: ""}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={activating}>取消</AlertDialogCancel>
|
||||
<Button onClick={() => void handleActivate()} disabled={activating}>
|
||||
{activating ? <Loader2 className="size-4 animate-spin" /> : "确认激活"}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user