server creation
This commit is contained in:
Fran Jurmanović
106
src/components/server/CreateServerModal.tsx
Normal file
106
src/components/server/CreateServerModal.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useFormState } from 'react-dom';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||
import { createServerAction, type ServerActionResult } from '@/lib/actions/server-management';
|
||||
import { useServerCreationPopup } from '@/lib/context/ServerCreationPopupContext';
|
||||
|
||||
interface CreateServerModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const initialState: ServerActionResult = { success: false, message: '' };
|
||||
|
||||
export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
|
||||
const [serverName, setServerName] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const [state, formAction] = useFormState(createServerAction, initialState);
|
||||
const { showPopup } = useServerCreationPopup();
|
||||
|
||||
useEffect(() => {
|
||||
if (state.success && state.data?.id) {
|
||||
// Server creation started, show popup
|
||||
showPopup(state.data.id, serverName);
|
||||
onClose();
|
||||
setServerName('');
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [state.success, state.data, showPopup, serverName, onClose]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!serverName.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
const formData = new FormData();
|
||||
formData.append('name', serverName.trim());
|
||||
formAction(formData);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (isSubmitting) {
|
||||
return; // Prevent closing during submission
|
||||
}
|
||||
onClose();
|
||||
setServerName('');
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={handleClose} title="Create New Server">
|
||||
{!state.success && state.message && (
|
||||
<div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{state.message}</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-6">
|
||||
<label htmlFor="server-name" className="block text-sm font-medium text-gray-300">
|
||||
Server Name
|
||||
</label>
|
||||
<input
|
||||
id="server-name"
|
||||
type="text"
|
||||
value={serverName}
|
||||
onChange={(e) => setServerName(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:opacity-50"
|
||||
placeholder="Enter server name..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !serverName.trim()}
|
||||
className="flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<LoadingSpinner className="mr-2 h-4 w-4" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
'Create Server'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
79
src/components/server/DeleteServerModal.tsx
Normal file
79
src/components/server/DeleteServerModal.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useTransition } from 'react';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||
import { deleteServerAction } from '@/lib/actions/server-management';
|
||||
import { Server } from '@/lib/types/server';
|
||||
|
||||
interface DeleteServerModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
server: Server;
|
||||
}
|
||||
|
||||
export function DeleteServerModal({ isOpen, onClose, server }: DeleteServerModalProps) {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const handleDelete = () => {
|
||||
setError(null);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const result = await deleteServerAction(server.id);
|
||||
if (result.success) {
|
||||
onClose();
|
||||
} else {
|
||||
setError(result.message);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete server');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (isPending) {
|
||||
return; // Prevent closing during deletion
|
||||
}
|
||||
onClose();
|
||||
setError(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={handleClose} title="Delete Server">
|
||||
{error && <div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{error}</div>}
|
||||
|
||||
<div className="mb-6">
|
||||
<p className="text-gray-300">
|
||||
Are you sure you want to delete the server <strong>"{server.name}"</strong>?
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-gray-400">This action cannot be undone.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
disabled={isPending}
|
||||
className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={isPending}
|
||||
className="flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
{isPending ? (
|
||||
<>
|
||||
<LoadingSpinner size="sm" className="mr-2" />
|
||||
Deleting...
|
||||
</>
|
||||
) : (
|
||||
'Delete Server'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -1,88 +1,136 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
|
||||
import { User, hasPermission } from '@/lib/types/user';
|
||||
import {
|
||||
startServerEventAction,
|
||||
restartServerEventAction,
|
||||
stopServerEventAction
|
||||
} from '@/lib/actions/servers';
|
||||
import { DeleteServerModal } from './DeleteServerModal';
|
||||
import { useSteamCMD } from '@/lib/context/SteamCMDContext';
|
||||
|
||||
interface ServerCardProps {
|
||||
server: Server;
|
||||
user: User;
|
||||
}
|
||||
|
||||
export function ServerCard({ server }: ServerCardProps) {
|
||||
export function ServerCard({ server, user }: ServerCardProps) {
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const { isSteamCMDRunning } = useSteamCMD();
|
||||
|
||||
const canDeleteServer = hasPermission(user, 'server.delete');
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
|
||||
<Link href={`/dashboard/server/${server.id}`} className="block">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white">{server.name}</h3>
|
||||
<div className="mt-2 flex items-center">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
|
||||
/>
|
||||
<span className="text-sm text-gray-300 capitalize">
|
||||
{serviceStatusToString(server.status)}
|
||||
</span>
|
||||
<>
|
||||
<div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
|
||||
<Link href={`/dashboard/server/${server.id}`} className="block">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white">{server.name}</h3>
|
||||
<div className="mt-2 flex items-center">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
|
||||
/>
|
||||
<span className="text-sm text-gray-300 capitalize">
|
||||
{serviceStatusToString(server.status)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
{canDeleteServer && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setIsDeleteModalOpen(true);
|
||||
}}
|
||||
className="text-gray-400 hover:text-red-400"
|
||||
title="Delete Server"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9zM4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 102 0v3a1 1 0 11-2 0V9zm4 0a1 1 0 10-2 0v3a1 1 0 002 0V9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<div className="text-gray-400 hover:text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-gray-400 hover:text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-300">
|
||||
<div>
|
||||
<span className="text-gray-500">Track:</span>
|
||||
<span className="ml-2">{server.state?.track || 'N/A'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Players:</span>
|
||||
<span className="ml-2">{server.state?.playerCount || 0}</span>
|
||||
<div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-300">
|
||||
<div>
|
||||
<span className="text-gray-500">Track:</span>
|
||||
<span className="ml-2">{server.state?.track || 'N/A'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Players:</span>
|
||||
<span className="ml-2">{server.state?.playerCount || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
|
||||
<form action={startServerEventAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Running || isSteamCMDRunning}
|
||||
className="rounded bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
title={isSteamCMDRunning ? 'Server actions disabled while SteamCMD is running' : ''}
|
||||
>
|
||||
Start
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={restartServerEventAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Stopped || isSteamCMDRunning}
|
||||
className="rounded bg-yellow-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
title={isSteamCMDRunning ? 'Server actions disabled while SteamCMD is running' : ''}
|
||||
>
|
||||
Restart
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={stopServerEventAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Stopped || isSteamCMDRunning}
|
||||
className="rounded bg-red-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
title={isSteamCMDRunning ? 'Server actions disabled while SteamCMD is running' : ''}
|
||||
>
|
||||
Stop
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
|
||||
<form action={startServerEventAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Running}
|
||||
className="rounded bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Start
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={restartServerEventAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Stopped}
|
||||
className="rounded bg-yellow-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Restart
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={stopServerEventAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Stopped}
|
||||
className="rounded bg-red-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Stop
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DeleteServerModal
|
||||
isOpen={isDeleteModalOpen}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
server={server}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
444
src/components/server/ServerCreationPopup.tsx
Normal file
444
src/components/server/ServerCreationPopup.tsx
Normal file
@@ -0,0 +1,444 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useWebSocket } from '@/lib/websocket/context';
|
||||
import {
|
||||
WebSocketMessage,
|
||||
StepData,
|
||||
SteamOutputData,
|
||||
ErrorData,
|
||||
CompleteData
|
||||
} from '@/lib/websocket/client';
|
||||
|
||||
interface ServerCreationPopupProps {
|
||||
serverId: string;
|
||||
serverName: string;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onComplete?: (success: boolean, message: string) => void;
|
||||
}
|
||||
|
||||
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 ServerCreationPopup({
|
||||
serverId,
|
||||
serverName,
|
||||
isOpen,
|
||||
onClose,
|
||||
onComplete
|
||||
}: ServerCreationPopupProps) {
|
||||
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 [isConsoleVisible, setIsConsoleVisible] = useState(true);
|
||||
|
||||
const {
|
||||
associateWithServer,
|
||||
addMessageHandler,
|
||||
removeMessageHandler,
|
||||
connectionStatus,
|
||||
connectionError,
|
||||
reconnect
|
||||
} = useWebSocket();
|
||||
|
||||
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 && isConsoleVisible) {
|
||||
consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [entries, isMinimized, isConsoleVisible]);
|
||||
|
||||
useEffect(() => {
|
||||
if (serverId && isOpen) {
|
||||
associateWithServer(serverId);
|
||||
}
|
||||
}, [serverId, isOpen, associateWithServer]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMessage = (message: WebSocketMessage) => {
|
||||
// Only handle messages for this server
|
||||
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'
|
||||
});
|
||||
|
||||
onComplete?.(data.success, data.message);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
addMessageHandler(handleMessage);
|
||||
return () => {
|
||||
removeMessageHandler(handleMessage);
|
||||
};
|
||||
}
|
||||
}, [addMessageHandler, removeMessageHandler, serverId, isOpen, onComplete]);
|
||||
|
||||
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 '🔴';
|
||||
}
|
||||
};
|
||||
|
||||
const getCurrentProgress = () => {
|
||||
const completedSteps = Object.values(steps).filter(
|
||||
(step) => step.status === 'completed'
|
||||
).length;
|
||||
const totalSteps = STEPS.length;
|
||||
return { completed: completedSteps, total: totalSteps };
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
// Minimized state - circular icon in bottom corner
|
||||
if (isMinimized) {
|
||||
const progress = getCurrentProgress();
|
||||
const isProgressing =
|
||||
!isCompleted && Object.values(steps).some((step) => step.status === 'in_progress');
|
||||
|
||||
return (
|
||||
<div className="fixed right-4 bottom-4 z-50">
|
||||
<button
|
||||
onClick={() => setIsMinimized(false)}
|
||||
className={`flex h-16 w-16 items-center justify-center rounded-full border-2 shadow-lg transition-all hover:scale-105 ${
|
||||
isCompleted
|
||||
? completionResult?.success
|
||||
? 'border-green-400 bg-green-600 hover:bg-green-700'
|
||||
: 'border-red-400 bg-red-600 hover:bg-red-700'
|
||||
: 'border-blue-400 bg-blue-600 hover:bg-blue-700'
|
||||
}`}
|
||||
title={`Server Creation: ${serverName} - ${progress.completed}/${progress.total} steps`}
|
||||
>
|
||||
<div className="text-center text-white">
|
||||
{isCompleted ? (
|
||||
<span className="text-2xl">{completionResult?.success ? '✅' : '❌'}</span>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-xs font-bold">
|
||||
{progress.completed}/{progress.total}
|
||||
</div>
|
||||
{isProgressing && <div className="animate-pulse text-xs">⚡</div>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Progress ring */}
|
||||
{!isCompleted && (
|
||||
<svg className="absolute inset-0 h-16 w-16 -rotate-90 transform">
|
||||
<circle
|
||||
cx="32"
|
||||
cy="32"
|
||||
r="28"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
className="text-gray-300 opacity-20"
|
||||
/>
|
||||
<circle
|
||||
cx="32"
|
||||
cy="32"
|
||||
r="28"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
strokeDasharray={`${(progress.completed / progress.total) * 175.929} 175.929`}
|
||||
className="text-white transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Expanded popup state
|
||||
return (
|
||||
<div className="fixed right-4 bottom-4 z-50 max-h-[600px] w-96 rounded-lg border border-gray-700 bg-gray-800 shadow-2xl select-none">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-gray-700 p-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-lg">🔧</span>
|
||||
<h3 className="truncate font-medium text-white">{serverName}</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Connection Status */}
|
||||
<div className="flex items-center space-x-1">
|
||||
<span className="text-sm">{getConnectionStatusIcon()}</span>
|
||||
{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
|
||||
<button
|
||||
onClick={handleReconnect}
|
||||
className="rounded bg-blue-600 px-1 py-0.5 text-xs hover:bg-blue-700"
|
||||
title="Reconnect"
|
||||
>
|
||||
🔄
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Console Toggle */}
|
||||
<button
|
||||
onClick={() => setIsConsoleVisible(!isConsoleVisible)}
|
||||
className="text-sm text-gray-400 hover:text-white"
|
||||
title={isConsoleVisible ? 'Hide Console' : 'Show Console'}
|
||||
>
|
||||
{isConsoleVisible ? '📋' : '📋'}
|
||||
</button>
|
||||
|
||||
{/* Minimize */}
|
||||
<button
|
||||
onClick={() => setIsMinimized(true)}
|
||||
className="text-gray-400 hover:text-white"
|
||||
title="Minimize"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Close */}
|
||||
{isCompleted && (
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-white" title="Close">
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Connection Error Banner */}
|
||||
{(connectionStatus === 'disconnected' || connectionStatus === 'error') && (
|
||||
<div className="bg-red-600 p-2 text-xs text-red-50">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>Connection lost - {connectionError || 'Reconnecting...'}</span>
|
||||
<button onClick={handleReconnect} className="underline">
|
||||
Reconnect
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Steps Progress */}
|
||||
<div className="border-b border-gray-700 p-4">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{STEPS.map(({ key, label }) => {
|
||||
const stepStatus = steps[key];
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={`flex items-center space-x-2 rounded p-2 text-xs ${
|
||||
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>{getStepStatusIcon(stepStatus?.status || 'pending')}</span>
|
||||
<span className="truncate">{label}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Console Output */}
|
||||
{isConsoleVisible && (
|
||||
<div className="h-64 bg-black">
|
||||
<div ref={consoleRef} className="h-full space-y-1 overflow-y-auto p-3 font-mono text-xs">
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Completion Status */}
|
||||
{isCompleted && (
|
||||
<div
|
||||
className={`p-3 text-center text-sm ${
|
||||
completionResult?.success
|
||||
? 'bg-green-900/50 text-green-100'
|
||||
: 'bg-red-900/50 text-red-100'
|
||||
}`}
|
||||
>
|
||||
{completionResult?.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/components/server/ServerCreationPopupContainer.tsx
Normal file
29
src/components/server/ServerCreationPopupContainer.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { useServerCreationPopup } from '@/lib/context/ServerCreationPopupContext';
|
||||
import { ServerCreationPopup } from './ServerCreationPopup';
|
||||
|
||||
export function ServerCreationPopupContainer() {
|
||||
const { popup, hidePopup } = useServerCreationPopup();
|
||||
|
||||
if (!popup) return null;
|
||||
|
||||
const handleComplete = (success: boolean, message: string) => {
|
||||
// Refresh the page on successful completion to show the new server
|
||||
if (success) {
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 2000); // Wait 2 seconds to let user see the success message
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ServerCreationPopup
|
||||
serverId={popup.serverId}
|
||||
serverName={popup.serverName}
|
||||
isOpen={popup.isOpen}
|
||||
onClose={hidePopup}
|
||||
onComplete={handleComplete}
|
||||
/>
|
||||
);
|
||||
}
|
||||
50
src/components/server/ServerListWithActions.tsx
Normal file
50
src/components/server/ServerListWithActions.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Server } from '@/lib/types/server';
|
||||
import { User, hasPermission } from '@/lib/types/user';
|
||||
import { ServerCard } from './ServerCard';
|
||||
import { CreateServerModal } from './CreateServerModal';
|
||||
import RefreshButton from '@/components/ui/RefreshButton';
|
||||
import { useSteamCMD } from '@/lib/context/SteamCMDContext';
|
||||
|
||||
interface ServerListWithActionsProps {
|
||||
servers: Server[];
|
||||
user: User;
|
||||
}
|
||||
|
||||
export function ServerListWithActions({ servers, user }: ServerListWithActionsProps) {
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const { isSteamCMDRunning } = useSteamCMD();
|
||||
|
||||
const canCreateServer = hasPermission(user, 'server.create');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">Your Servers</h2>
|
||||
<div className="flex items-center space-x-4">
|
||||
{canCreateServer && (
|
||||
<button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
disabled={isSteamCMDRunning}
|
||||
className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
title={isSteamCMDRunning ? 'Server creation disabled while SteamCMD is running' : ''}
|
||||
>
|
||||
Create Server
|
||||
</button>
|
||||
)}
|
||||
<RefreshButton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{servers.map((server) => (
|
||||
<ServerCard key={server.id} server={server} user={user} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<CreateServerModal isOpen={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
46
src/components/ui/SteamCMDNotification.tsx
Normal file
46
src/components/ui/SteamCMDNotification.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { useSteamCMD } from '@/lib/context/SteamCMDContext';
|
||||
|
||||
export function SteamCMDNotification() {
|
||||
const { isSteamCMDRunning, runningSteamServers } = useSteamCMD();
|
||||
|
||||
if (!isSteamCMDRunning) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const serverCount = runningSteamServers.size;
|
||||
|
||||
return (
|
||||
<div className="bg-yellow-600 border-l-4 border-yellow-400 p-4">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<svg
|
||||
className="h-5 w-5 text-yellow-50"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm text-yellow-50">
|
||||
<strong>SteamCMD is currently running</strong> for {serverCount} server{serverCount !== 1 ? 's' : ''}.
|
||||
Server actions are temporarily disabled to prevent conflicts.
|
||||
This will automatically resolve when the download completes.
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0">
|
||||
<div className="flex items-center">
|
||||
<div className="animate-spin h-4 w-4 border-2 border-yellow-50 border-t-transparent rounded-full mr-2"></div>
|
||||
<span className="text-xs text-yellow-50">Downloading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/components/websocket/WebSocketInitializer.tsx
Normal file
27
src/components/websocket/WebSocketInitializer.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useWebSocket } from '@/lib/websocket/context';
|
||||
|
||||
interface WebSocketInitializerProps {
|
||||
openToken?: string;
|
||||
}
|
||||
|
||||
export function WebSocketInitializer({ openToken }: WebSocketInitializerProps) {
|
||||
const { connect, disconnect, isConnected } = useWebSocket();
|
||||
|
||||
useEffect(() => {
|
||||
console.log({ openToken, connect, disconnect, isConnected });
|
||||
if (openToken && !isConnected) {
|
||||
connect(openToken).catch((error) => {
|
||||
console.error('Failed to connect WebSocket:', error);
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
disconnect();
|
||||
};
|
||||
}, [openToken, connect, disconnect, isConnected]);
|
||||
|
||||
return null; // This component doesn't render anything
|
||||
}
|
||||
Reference in New Issue
Block a user