migrate frontend

This commit is contained in:
ryan
2026-06-18 18:05:00 +08:00
parent 31b114b0cc
commit e7b8993181
27 changed files with 1836 additions and 383 deletions
@@ -0,0 +1,348 @@
'use client';
import {useMutation, useQuery} from '@tanstack/react-query';
import {useCallback, useEffect, useRef, useState} from 'react';
import type {
LatestReleaseInfo,
ReleaseChannel,
UpgradeStreamSnapshot,
UploadedServerBinaryInfo,
} from '@/lib/services/openflare';
import {StatusService, UpdateService} from '@/lib/services/openflare';
const UPGRADE_STATUS_POLL_INTERVAL = 3000;
export const openflarePublicStatusQueryKey = ['openflare', 'public-status'] as const;
export const openflareLatestReleaseQueryKey = (channel: ReleaseChannel = 'stable') =>
['openflare', 'latest-release', channel] as const;
export function mergeReleaseWithUpgradeStream(
release: LatestReleaseInfo | null | undefined,
stream: UpgradeStreamSnapshot | null,
) {
if (!release || !stream) {
return release;
}
return {
...release,
in_progress: stream.in_progress,
upgrade_status: stream.upgrade_status,
upgrade_logs: stream.upgrade_logs,
};
}
export function useOpenFlareServerUpgrade({
open,
canUpgrade,
}: {
open: boolean;
canUpgrade: boolean;
}) {
const [selectedChannel, setSelectedChannel] = useState<ReleaseChannel>('stable');
const [feedback, setFeedback] = useState<string | null>(null);
const [manualStatusMessage, setManualStatusMessage] = useState<string | null>(null);
const [manualErrorMessage, setManualErrorMessage] = useState<string | null>(null);
const [uploadedBinary, setUploadedBinary] = useState<UploadedServerBinaryInfo | null>(null);
const [uploadProgress, setUploadProgress] = useState(0);
const [upgradeStream, setUpgradeStream] = useState<UpgradeStreamSnapshot | null>(null);
const upgradeRefreshPendingRef = useRef(false);
const upgradeReloadStartedRef = useRef(false);
const upgradeReloadTimerRef = useRef<number | null>(null);
const statusQuery = useQuery({
queryKey: openflarePublicStatusQueryKey,
queryFn: () => StatusService.getPublicStatus(),
enabled: open,
});
const stableReleaseQuery = useQuery({
queryKey: openflareLatestReleaseQueryKey('stable'),
queryFn: () => UpdateService.getLatestRelease('stable'),
enabled: open && canUpgrade,
refetchInterval: (query) => {
const release = query.state.data;
if (open && release?.in_progress) {
return UPGRADE_STATUS_POLL_INTERVAL;
}
return 60 * 60 * 1000;
},
});
const previewReleaseQuery = useQuery({
queryKey: openflareLatestReleaseQueryKey('preview'),
queryFn: () => UpdateService.getLatestRelease('preview'),
enabled: false,
refetchInterval: (query) => {
const release = query.state.data;
if (open && release?.in_progress) {
return UPGRADE_STATUS_POLL_INTERVAL;
}
return false;
},
});
const scheduleUpgradePageReload = useCallback(() => {
if (upgradeReloadStartedRef.current) {
return;
}
upgradeReloadStartedRef.current = true;
setFeedback('服务升级已进入重启阶段,页面将在服务恢复后自动刷新。');
const reloadWhenServerReady = async () => {
try {
await StatusService.getPublicStatus();
window.location.reload();
} catch {
upgradeReloadTimerRef.current = window.setTimeout(reloadWhenServerReady, 1500);
}
};
upgradeReloadTimerRef.current = window.setTimeout(reloadWhenServerReady, 1200);
}, []);
useEffect(() => {
return () => {
if (upgradeReloadTimerRef.current !== null) {
window.clearTimeout(upgradeReloadTimerRef.current);
}
};
}, []);
useEffect(() => {
if (!open || !canUpgrade) {
setUpgradeStream(null);
return;
}
let closed = false;
let reconnectTimer: number | null = null;
let socket: WebSocket | null = null;
const connect = () => {
if (closed) {
return;
}
socket = UpdateService.createUpgradeLogsWebSocket();
if (!socket) {
return;
}
socket.onmessage = (event) => {
const snapshot = UpdateService.parseUpgradeStreamSnapshot(String(event.data));
if (snapshot) {
if (snapshot.in_progress || snapshot.upgrade_status === 'succeeded') {
upgradeRefreshPendingRef.current = true;
}
if (snapshot.upgrade_status === 'failed') {
upgradeRefreshPendingRef.current = false;
}
setUpgradeStream(snapshot);
}
};
socket.onclose = () => {
if (closed) {
return;
}
if (upgradeRefreshPendingRef.current) {
scheduleUpgradePageReload();
return;
}
reconnectTimer = window.setTimeout(connect, 1500);
};
};
connect();
return () => {
closed = true;
if (reconnectTimer !== null) {
window.clearTimeout(reconnectTimer);
}
socket?.close();
};
}, [canUpgrade, open, scheduleUpgradePageReload]);
const upgradeMutation = useMutation({
mutationFn: (channel: ReleaseChannel) => UpdateService.upgradeServer(channel),
onSuccess: (release) => {
upgradeRefreshPendingRef.current = true;
setUploadedBinary(null);
setManualStatusMessage(null);
setManualErrorMessage(null);
setFeedback(
`服务升级任务已启动,目标版本 ${release.tag_name}(${release.channel === 'preview' ? '预览版' : '正式版'})。页面可能短暂不可用。`,
);
void stableReleaseQuery.refetch();
if (release.channel === 'preview') {
void previewReleaseQuery.refetch();
}
},
onError: (error) => {
setFeedback(error instanceof Error ? error.message : '升级失败,请稍后重试。');
},
});
const uploadBinaryMutation = useMutation({
mutationFn: (binary: File) =>
UpdateService.uploadServerBinary(binary, (progress) => {
setUploadProgress(progress);
}),
onSuccess: (candidate) => {
setUploadProgress(0);
setFeedback(null);
setManualErrorMessage(null);
setUploadedBinary(candidate);
setManualStatusMessage(candidate.comparison_message);
},
onError: (error) => {
setUploadProgress(0);
setUploadedBinary(null);
setManualStatusMessage(null);
setManualErrorMessage(
error instanceof Error ? error.message : '上传升级包失败,请稍后重试。',
);
},
});
const confirmManualUpgradeMutation = useMutation({
mutationFn: (uploadToken: string) => UpdateService.confirmManualServerUpgrade(uploadToken),
onSuccess: (candidate) => {
upgradeRefreshPendingRef.current = true;
setFeedback(null);
setManualErrorMessage(null);
setUploadedBinary(candidate);
setManualStatusMessage(
`手动升级任务已启动,目标版本 ${candidate.detected_version}。页面可能短暂不可用。`,
);
void stableReleaseQuery.refetch();
void previewReleaseQuery.refetch();
},
onError: (error) => {
setManualStatusMessage(null);
setManualErrorMessage(
error instanceof Error ? error.message : '确认手动升级失败,请稍后重试。',
);
},
});
const resetTransientState = useCallback(() => {
setSelectedChannel('stable');
setFeedback(null);
setManualStatusMessage(null);
setManualErrorMessage(null);
setUploadedBinary(null);
setUploadProgress(0);
setUpgradeStream(null);
upgradeRefreshPendingRef.current = false;
upgradeReloadStartedRef.current = false;
}, []);
const handleOpen = useCallback(() => {
resetTransientState();
if (canUpgrade) {
void stableReleaseQuery.refetch();
}
}, [canUpgrade, resetTransientState, stableReleaseQuery]);
const handleCheckRelease = useCallback(() => {
setFeedback(null);
if (!canUpgrade) {
return;
}
if (selectedChannel === 'preview') {
void previewReleaseQuery.refetch();
return;
}
void stableReleaseQuery.refetch();
}, [canUpgrade, previewReleaseQuery, selectedChannel, stableReleaseQuery]);
const handleChannelChange = useCallback((channel: ReleaseChannel) => {
setSelectedChannel(channel);
setFeedback(null);
}, []);
const handleUpgrade = useCallback(() => {
setFeedback(null);
setManualStatusMessage(null);
setManualErrorMessage(null);
upgradeMutation.mutate(selectedChannel);
}, [selectedChannel, upgradeMutation]);
const handleUploadBinary = useCallback(
(binary: File) => {
setUploadProgress(0);
setManualStatusMessage(null);
setManualErrorMessage(null);
uploadBinaryMutation.mutate(binary);
},
[uploadBinaryMutation],
);
const handleConfirmManualUpgrade = useCallback(() => {
if (!uploadedBinary?.upload_token) {
setManualStatusMessage(null);
setManualErrorMessage('请先上传并检查升级包。');
return;
}
setFeedback(null);
setManualStatusMessage(null);
setManualErrorMessage(null);
confirmManualUpgradeMutation.mutate(uploadedBinary.upload_token);
}, [confirmManualUpgradeMutation, uploadedBinary?.upload_token]);
const selectedRelease =
selectedChannel === 'preview' ? previewReleaseQuery.data : stableReleaseQuery.data;
const releaseWithStream = mergeReleaseWithUpgradeStream(selectedRelease, upgradeStream);
const selectedReleaseError =
selectedChannel === 'preview' ? previewReleaseQuery.error : stableReleaseQuery.error;
const isSelectedReleaseError =
selectedChannel === 'preview' ? previewReleaseQuery.isError : stableReleaseQuery.isError;
const isChecking =
selectedChannel === 'preview'
? previewReleaseQuery.isFetching
: stableReleaseQuery.isFetching;
const isInitialLoading =
(selectedChannel === 'preview'
? previewReleaseQuery.isLoading && !previewReleaseQuery.data
: stableReleaseQuery.isLoading && !stableReleaseQuery.data) && canUpgrade;
const releaseErrorMessage =
feedback ||
(isSelectedReleaseError
? selectedReleaseError instanceof Error
? selectedReleaseError.message
: '版本检查失败,请稍后重试。'
: undefined);
const currentVersion = statusQuery.data?.version || releaseWithStream?.current_version || 'unknown';
return {
currentVersion,
selectedChannel,
release: releaseWithStream,
uploadedBinary,
releaseErrorMessage,
manualStatusMessage,
manualErrorMessage,
isInitialLoading,
isChecking,
isUpgrading: upgradeMutation.isPending,
isUploadingBinary: uploadBinaryMutation.isPending,
uploadProgress,
isConfirmingManualUpgrade: confirmManualUpgradeMutation.isPending,
stableRelease: stableReleaseQuery.data,
handleOpen,
handleCheckRelease,
handleChannelChange,
handleUpgrade,
handleUploadBinary,
handleConfirmManualUpgrade,
};
}
@@ -5,6 +5,7 @@ import {
Gauge,
GitBranch,
Globe,
Info,
LayoutDashboard,
MapPin,
Route,
@@ -43,6 +44,7 @@ export const openflareNavItems: OpenFlareNavItem[] = [
{title: '访问日志', url: '/openflare/access-logs', icon: ScrollText},
{title: '应用日志', url: '/openflare/apply-logs', icon: ClipboardList},
{title: '性能', url: '/openflare/performance', icon: Gauge},
{title: '关于', url: '/openflare/about', icon: Info},
];
/** 网站模块页内二级导航 */
+3
View File
@@ -27,6 +27,7 @@ import {PushService} from './push';
import {AdminUploadService, UploadService} from './upload';
import {UserService} from './user';
import {
AboutService,
AccessLogService,
ApplyLogService,
ConfigVersionService,
@@ -61,6 +62,7 @@ const services = {
adminUpload: AdminUploadService,
dbManage: DbManageService,
push: PushService,
openflareAbout: AboutService,
openflareNode: NodeService,
openflareProxyRoute: ProxyRouteService,
openflareConfigVersion: ConfigVersionService,
@@ -181,6 +183,7 @@ export type { PushEvent, PushHistory, PushChannelConfig, ListPushHistoriesReques
// ==================== OpenFlare 业务服务导出 ====================
export {
AboutService,
LegacyOpenFlareBaseService,
NodeService,
ProxyRouteService,
@@ -0,0 +1,9 @@
import {LegacyOpenFlareBaseService} from './legacy-base.service';
export class AboutService extends LegacyOpenFlareBaseService {
protected static override readonly basePath = '/api';
static getAboutContent(): Promise<string> {
return this.legacyGet<string>('/about');
}
}
@@ -1,3 +1,4 @@
export { AboutService } from './about.service';
export { LegacyOpenFlareBaseService } from './legacy-base.service';
export type { LegacyApiResponse } from './legacy-base.service';
@@ -87,6 +88,9 @@ export type {
DatabaseCleanupTarget,
LatestReleaseInfo,
OpenFlarePublicStatus,
UpgradeLogItem,
UpgradeStreamSnapshot,
UploadedServerBinaryInfo,
OriginDetail,
OriginItem,
OriginMutationPayload,
@@ -108,6 +112,7 @@ export type {
TlsCertificateMutationPayload,
} from './types';
import {AboutService} from './about.service';
import {AccessLogService} from './access-log.service';
import {ApplyLogService} from './apply-log.service';
import {ConfigVersionService} from './config-version.service';
@@ -126,6 +131,7 @@ import {WafService} from './waf.service';
import {WebsiteService} from './website.service';
export const openflareServices = {
about: AboutService,
node: NodeService,
proxyRoute: ProxyRouteService,
configVersion: ConfigVersionService,
@@ -669,10 +669,28 @@ export interface LatestReleaseInfo {
has_update: boolean;
upgrade_supported: boolean;
in_progress: boolean;
upgrade_status: string;
upgrade_status: 'idle' | 'running' | 'succeeded' | 'failed' | string;
upgrade_logs: UpgradeLogItem[];
}
export interface UpgradeStreamSnapshot {
in_progress: boolean;
upgrade_status: 'idle' | 'running' | 'succeeded' | 'failed' | string;
upgrade_logs: UpgradeLogItem[];
}
export interface UploadedServerBinaryInfo {
upload_token: string;
file_name: string;
detected_version: string;
current_version: string;
has_update: boolean;
upgrade_supported: boolean;
ready_to_upgrade: boolean;
comparison_message: string;
uploaded_at: string;
}
export interface WAFRuleGroup {
id: number;
name: string;
@@ -1,16 +1,135 @@
import type {InternalAxiosRequestConfig} from 'axios';
import {getApiBaseUrl} from '@/lib/services/core/config';
import {ApiErrorBase} from '@/lib/services/core/errors';
import type {LegacyApiResponse} from './legacy-base.service';
import {LegacyOpenFlareBaseService} from './legacy-base.service';
import type {LatestReleaseInfo, ReleaseChannel} from './types';
import type {LatestReleaseInfo, ReleaseChannel, UpgradeStreamSnapshot, UploadedServerBinaryInfo,} from './types';
/**
* OpenFlare 服务端升级 API(遗留 `/api/update/*`)。
*
* 可选集成:在顶栏或 Admin 升级入口调用 `getLatestRelease()` 展示版本与更新状态;
* 完整升级流程(upgrade / manual-upload / logs WebSocket)可对接 Wavelet `admin/updater`。
*/
export class UpdateService extends LegacyOpenFlareBaseService {
protected static override readonly basePath = '/api/update';
private static getLegacyApiUrl(path: string): string {
const baseURL = getApiBaseUrl();
const fullPath = this.getFullPath(path);
if (!baseURL) {
return fullPath;
}
return `${baseURL.replace(/\/$/, '')}${fullPath}`;
}
static getLatestRelease(channel: ReleaseChannel = 'stable'): Promise<LatestReleaseInfo> {
return this.legacyGet<LatestReleaseInfo>('/latest-release', { channel });
}
static upgradeServer(channel: ReleaseChannel = 'stable'): Promise<LatestReleaseInfo> {
return this.legacyPost<LatestReleaseInfo>('/upgrade', { channel });
}
static uploadServerBinary(
binary: File,
onProgress?: (progress: number) => void,
): Promise<UploadedServerBinaryInfo> {
const formData = new FormData();
formData.append('binary', binary);
if (!onProgress) {
return this.legacyPost<UploadedServerBinaryInfo>('/manual-upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
} as InternalAxiosRequestConfig);
}
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', this.getLegacyApiUrl('/manual-upload'));
xhr.withCredentials = true;
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
onProgress(Math.round((event.loaded / event.total) * 100));
}
});
xhr.addEventListener('load', () => {
let payload: LegacyApiResponse<UploadedServerBinaryInfo> | null = null;
try {
payload = JSON.parse(
xhr.responseText,
) as LegacyApiResponse<UploadedServerBinaryInfo>;
} catch {
payload = null;
}
if (xhr.status < 200 || xhr.status >= 300) {
reject(
new ApiErrorBase(
payload?.message || `请求失败(${xhr.status})`,
undefined,
xhr.status,
),
);
return;
}
if (!payload) {
reject(new ApiErrorBase('响应格式无效', undefined, xhr.status));
return;
}
if (!payload.success) {
reject(new ApiErrorBase(payload.message || '请求失败', undefined, xhr.status));
return;
}
resolve(payload.data);
});
xhr.addEventListener('error', () => {
reject(new ApiErrorBase('上传过程中网络连接中断,请检查网络后重试', undefined, 0));
});
xhr.send(formData);
});
}
static confirmManualServerUpgrade(uploadToken: string): Promise<UploadedServerBinaryInfo> {
return this.legacyPost<UploadedServerBinaryInfo>('/manual-upgrade', {
upload_token: uploadToken,
});
}
static createUpgradeLogsWebSocket(): WebSocket | null {
if (typeof window === 'undefined') {
return null;
}
const apiUrl = this.getLegacyApiUrl('/logs/ws');
const resolvedUrl = apiUrl.startsWith('http://')
? `ws://${apiUrl.slice('http://'.length)}`
: apiUrl.startsWith('https://')
? `wss://${apiUrl.slice('https://'.length)}`
: `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}${apiUrl}`;
return new WebSocket(resolvedUrl);
}
static parseUpgradeStreamSnapshot(rawMessage: string): UpgradeStreamSnapshot | null {
try {
const parsed = JSON.parse(rawMessage) as Partial<UpgradeStreamSnapshot>;
if (
typeof parsed.in_progress !== 'boolean' ||
typeof parsed.upgrade_status !== 'string' ||
!Array.isArray(parsed.upgrade_logs)
) {
return null;
}
return {
in_progress: parsed.in_progress,
upgrade_status: parsed.upgrade_status,
upgrade_logs: parsed.upgrade_logs,
};
} catch {
return null;
}
}
}