433 lines
12 KiB
TypeScript
433 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { useWebSocket } from '@/lib/websocket/context';
|
|
import {
|
|
WebSocketMessage,
|
|
StepData,
|
|
SteamOutputData,
|
|
ErrorData,
|
|
CompleteData
|
|
} from '@/lib/websocket/client';
|
|
|
|
interface ServerCreationProgressClientProps {
|
|
serverId: string;
|
|
}
|
|
|
|
interface ConsoleEntry {
|
|
id: string;
|
|
timestamp: number;
|
|
type: 'step' | 'steam_output' | 'error' | 'complete';
|
|
content: string;
|
|
level: 'info' | 'success' | 'warning' | 'error';
|
|
}
|
|
|
|
interface StepStatus {
|
|
step: string;
|
|
status: 'pending' | 'in_progress' | 'completed' | 'failed';
|
|
message: string;
|
|
}
|
|
|
|
const STEPS = [
|
|
{ key: 'validation', label: 'Validation' },
|
|
{ key: 'directory_creation', label: 'Directory Creation' },
|
|
{ key: 'steam_download', label: 'Steam Download' },
|
|
{ key: 'config_generation', label: 'Config Generation' },
|
|
{ key: 'service_creation', label: 'Service Creation' },
|
|
{ key: 'firewall_rules', label: 'Firewall Rules' },
|
|
{ key: 'database_save', label: 'Database Save' },
|
|
{ key: 'completed', label: 'Completed' }
|
|
];
|
|
|
|
export function ServerCreationProgressClient({ serverId }: ServerCreationProgressClientProps) {
|
|
const [entries, setEntries] = useState<ConsoleEntry[]>([]);
|
|
const [steps, setSteps] = useState<Record<string, StepStatus>>({});
|
|
const [isCompleted, setIsCompleted] = useState(false);
|
|
const [completionResult, setCompletionResult] = useState<{
|
|
success: boolean;
|
|
message: string;
|
|
} | null>(null);
|
|
const [isMinimized, setIsMinimized] = useState(false);
|
|
|
|
const {
|
|
associateWithServer,
|
|
addMessageHandler,
|
|
removeMessageHandler,
|
|
connectionStatus,
|
|
connectionError,
|
|
reconnect
|
|
} = useWebSocket();
|
|
const router = useRouter();
|
|
const consoleRef = useRef<HTMLDivElement>(null);
|
|
|
|
const addEntry = (entry: Omit<ConsoleEntry, 'id'>) => {
|
|
const newEntry = {
|
|
...entry,
|
|
id: `${Date.now()}-${Math.random()}`
|
|
};
|
|
setEntries((prev) => [...prev, newEntry]);
|
|
};
|
|
|
|
const scrollToBottom = () => {
|
|
if (consoleRef.current && !isMinimized) {
|
|
consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
scrollToBottom();
|
|
}, [entries, isMinimized]);
|
|
|
|
useEffect(() => {
|
|
if (serverId) {
|
|
associateWithServer(serverId);
|
|
}
|
|
}, [serverId, associateWithServer]);
|
|
|
|
useEffect(() => {
|
|
const handleMessage = (message: WebSocketMessage) => {
|
|
if (message.server_id !== serverId) return;
|
|
|
|
const timestamp = message.timestamp;
|
|
|
|
switch (message.type) {
|
|
case 'step': {
|
|
const data = message.data as StepData;
|
|
setSteps((prev) => ({
|
|
...prev,
|
|
[data.step]: {
|
|
step: data.step,
|
|
status: data.status,
|
|
message: data.message
|
|
}
|
|
}));
|
|
|
|
let level: ConsoleEntry['level'] = 'info';
|
|
if (data.status === 'completed') level = 'success';
|
|
else if (data.status === 'failed') level = 'error';
|
|
else if (data.status === 'in_progress') level = 'warning';
|
|
|
|
addEntry({
|
|
timestamp,
|
|
type: 'step',
|
|
content: `[${data.step.toUpperCase()}] ${data.message}${data.error ? ` - ${data.error}` : ''}`,
|
|
level
|
|
});
|
|
break;
|
|
}
|
|
|
|
case 'steam_output': {
|
|
const data = message.data as SteamOutputData;
|
|
addEntry({
|
|
timestamp,
|
|
type: 'steam_output',
|
|
content: data.output,
|
|
level: data.is_error ? 'error' : 'info'
|
|
});
|
|
break;
|
|
}
|
|
|
|
case 'error': {
|
|
const data = message.data as ErrorData;
|
|
addEntry({
|
|
timestamp,
|
|
type: 'error',
|
|
content: `ERROR: ${data.error}${data.details ? ` - ${data.details}` : ''}`,
|
|
level: 'error'
|
|
});
|
|
break;
|
|
}
|
|
|
|
case 'complete': {
|
|
const data = message.data as CompleteData;
|
|
setIsCompleted(true);
|
|
setCompletionResult({ success: data.success, message: data.message });
|
|
|
|
addEntry({
|
|
timestamp,
|
|
type: 'complete',
|
|
content: `COMPLETED: ${data.message}`,
|
|
level: data.success ? 'success' : 'error'
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
addMessageHandler(handleMessage);
|
|
return () => {
|
|
removeMessageHandler(handleMessage);
|
|
};
|
|
}, [addMessageHandler, removeMessageHandler, serverId]);
|
|
|
|
const handleReturnToDashboard = () => {
|
|
router.push('/dashboard');
|
|
};
|
|
|
|
const handleReconnect = async () => {
|
|
try {
|
|
await reconnect();
|
|
} catch (error) {
|
|
console.error('Failed to reconnect:', error);
|
|
}
|
|
};
|
|
|
|
const getStepStatusIcon = (status: StepStatus['status']) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return '⏳';
|
|
case 'in_progress':
|
|
return '🔄';
|
|
case 'completed':
|
|
return '✅';
|
|
case 'failed':
|
|
return '❌';
|
|
}
|
|
};
|
|
|
|
const getEntryClassName = (level: ConsoleEntry['level']) => {
|
|
switch (level) {
|
|
case 'success':
|
|
return 'text-green-400';
|
|
case 'warning':
|
|
return 'text-yellow-400';
|
|
case 'error':
|
|
return 'text-red-400';
|
|
default:
|
|
return 'text-gray-300';
|
|
}
|
|
};
|
|
|
|
const getConnectionStatusColor = () => {
|
|
switch (connectionStatus) {
|
|
case 'connected':
|
|
return 'text-green-400';
|
|
case 'connecting':
|
|
return 'text-yellow-400';
|
|
case 'disconnected':
|
|
return 'text-gray-400';
|
|
case 'error':
|
|
return 'text-red-400';
|
|
}
|
|
};
|
|
|
|
const getConnectionStatusIcon = () => {
|
|
switch (connectionStatus) {
|
|
case 'connected':
|
|
return '🟢';
|
|
case 'connecting':
|
|
return '🟡';
|
|
case 'disconnected':
|
|
return '⚫';
|
|
case 'error':
|
|
return '🔴';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white">
|
|
{/* Header */}
|
|
<header className="bg-gray-800 shadow-md">
|
|
<div className="mx-auto flex max-w-[120rem] items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center space-x-4">
|
|
<Link
|
|
href="/dashboard"
|
|
className="text-gray-400 hover:text-white"
|
|
title="Back to Dashboard"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
<h1 className="text-xl font-bold">Server Creation Progress</h1>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
{/* Connection Status */}
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-lg">{getConnectionStatusIcon()}</span>
|
|
<span className={`text-sm ${getConnectionStatusColor()}`}>
|
|
{connectionStatus === 'connected' && 'Connected'}
|
|
{connectionStatus === 'connecting' && 'Connecting...'}
|
|
{connectionStatus === 'disconnected' && 'Disconnected'}
|
|
{connectionStatus === 'error' && 'Connection Error'}
|
|
</span>
|
|
{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
|
|
<button
|
|
onClick={handleReconnect}
|
|
className="rounded bg-blue-600 px-2 py-1 text-xs hover:bg-blue-700"
|
|
title="Reconnect to WebSocket"
|
|
>
|
|
Reconnect
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setIsMinimized(!isMinimized)}
|
|
className="text-gray-400 hover:text-white"
|
|
title={isMinimized ? 'Expand Console' : 'Minimize Console'}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
{isMinimized ? (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M7 14l3-3 3 3"
|
|
/>
|
|
) : (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M17 10l-3 3-3-3"
|
|
/>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
{isCompleted && (
|
|
<button
|
|
onClick={handleReturnToDashboard}
|
|
className={`rounded-md px-4 py-2 text-sm font-medium ${
|
|
completionResult?.success
|
|
? 'bg-green-600 hover:bg-green-700'
|
|
: 'bg-red-600 hover:bg-red-700'
|
|
}`}
|
|
>
|
|
{completionResult?.success ? 'Return to Dashboard' : 'Back to Dashboard'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Connection Error Banner */}
|
|
{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
|
|
<div className="border-l-4 border-red-400 bg-red-600 p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0">
|
|
<svg className="h-5 w-5 text-red-50" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm text-red-50">
|
|
<strong>WebSocket Connection Lost</strong> -
|
|
{connectionError
|
|
? ` ${connectionError}`
|
|
: ' Unable to receive real-time updates.'}{' '}
|
|
Progress may not be current.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleReconnect}
|
|
className="rounded bg-red-700 px-3 py-1 text-sm text-red-50 hover:bg-red-800"
|
|
>
|
|
Reconnect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<main className="mx-auto max-w-[120rem] px-4 py-6 sm:px-6 lg:px-8">
|
|
<div className="space-y-6">
|
|
{/* Steps Progress */}
|
|
<div className="rounded-lg bg-gray-800 p-6">
|
|
<h2 className="mb-4 text-lg font-medium text-gray-300">Progress Steps</h2>
|
|
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
|
{STEPS.map(({ key, label }) => {
|
|
const stepStatus = steps[key];
|
|
return (
|
|
<div
|
|
key={key}
|
|
className={`flex items-center space-x-3 rounded-lg p-3 text-sm ${
|
|
stepStatus?.status === 'completed'
|
|
? 'bg-green-900/50 text-green-100'
|
|
: stepStatus?.status === 'in_progress'
|
|
? 'bg-yellow-900/50 text-yellow-100'
|
|
: stepStatus?.status === 'failed'
|
|
? 'bg-red-900/50 text-red-100'
|
|
: 'bg-gray-700 text-gray-300'
|
|
}`}
|
|
>
|
|
<span className="text-lg">
|
|
{getStepStatusIcon(stepStatus?.status || 'pending')}
|
|
</span>
|
|
<span className="font-medium">{label}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Console Output */}
|
|
{!isMinimized && (
|
|
<div className="rounded-lg bg-gray-800">
|
|
<div className="flex items-center justify-between border-b border-gray-700 p-4">
|
|
<h2 className="text-lg font-medium text-gray-300">Console Output</h2>
|
|
<div className="text-sm text-gray-400">{entries.length} log entries</div>
|
|
</div>
|
|
<div className="h-96 overflow-hidden rounded-b-lg bg-black p-4">
|
|
<div
|
|
ref={consoleRef}
|
|
className="h-full space-y-1 overflow-y-auto font-mono text-sm"
|
|
>
|
|
{entries.map((entry) => (
|
|
<div
|
|
key={entry.id}
|
|
className={`${getEntryClassName(entry.level)} leading-tight`}
|
|
>
|
|
<span className="text-xs text-gray-500">
|
|
{new Date(entry.timestamp * 1000).toLocaleTimeString()}
|
|
</span>{' '}
|
|
<span>{entry.content}</span>
|
|
</div>
|
|
))}
|
|
{entries.length === 0 && (
|
|
<div className="py-8 text-center text-gray-500">
|
|
Waiting for server creation to begin...
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isMinimized && (
|
|
<div className="rounded-lg bg-gray-800 p-4">
|
|
<div className="text-center text-gray-400">
|
|
Console minimized - click the expand button in the header to view output
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|