chore: initial commit for phase05
This commit is contained in:
hibna
@@ -0,0 +1,17 @@
|
||||
import { useParams } from 'react-router';
|
||||
import { HardDrive } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
|
||||
export function BackupsPage() {
|
||||
const { serverId } = useParams();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<HardDrive className="mb-4 h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="text-muted-foreground">Backup management coming soon</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">Server: {serverId}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import { Terminal } from '@xterm/xterm';
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
import { WebLinksAddon } from '@xterm/addon-web-links';
|
||||
import '@xterm/xterm/css/xterm.css';
|
||||
import { getSocket, connectSocket } from '@/lib/socket';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Send } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
|
||||
export function ConsolePage() {
|
||||
const { orgId, serverId } = useParams();
|
||||
const termRef = useRef<HTMLDivElement>(null);
|
||||
const terminalRef = useRef<Terminal | null>(null);
|
||||
const fitAddonRef = useRef<FitAddon | null>(null);
|
||||
const [command, setCommand] = useState('');
|
||||
const [history, setHistory] = useState<string[]>([]);
|
||||
const [historyIndex, setHistoryIndex] = useState(-1);
|
||||
|
||||
useEffect(() => {
|
||||
if (!termRef.current) return;
|
||||
|
||||
const terminal = new Terminal({
|
||||
cursorBlink: false,
|
||||
disableStdin: true,
|
||||
fontSize: 13,
|
||||
fontFamily: '"JetBrains Mono", "Fira Code", monospace',
|
||||
theme: {
|
||||
background: '#0a0a0f',
|
||||
foreground: '#d4d4d8',
|
||||
cursor: '#d4d4d8',
|
||||
selectionBackground: '#27272a',
|
||||
},
|
||||
scrollback: 5000,
|
||||
convertEol: true,
|
||||
});
|
||||
|
||||
const fitAddon = new FitAddon();
|
||||
terminal.loadAddon(fitAddon);
|
||||
terminal.loadAddon(new WebLinksAddon());
|
||||
terminal.open(termRef.current);
|
||||
fitAddon.fit();
|
||||
|
||||
terminalRef.current = terminal;
|
||||
fitAddonRef.current = fitAddon;
|
||||
|
||||
terminal.writeln('\x1b[90m--- Console connected ---\x1b[0m');
|
||||
|
||||
// Socket.IO connection
|
||||
connectSocket();
|
||||
const socket = getSocket();
|
||||
|
||||
socket.emit('server:console:join', { serverId });
|
||||
|
||||
const handleOutput = (data: { line: string }) => {
|
||||
terminal.writeln(data.line);
|
||||
};
|
||||
|
||||
socket.on('server:console:output', handleOutput);
|
||||
|
||||
const handleResize = () => fitAddon.fit();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
socket.off('server:console:output', handleOutput);
|
||||
socket.emit('server:console:leave', { serverId });
|
||||
window.removeEventListener('resize', handleResize);
|
||||
terminal.dispose();
|
||||
};
|
||||
}, [serverId]);
|
||||
|
||||
const sendCommand = () => {
|
||||
if (!command.trim()) return;
|
||||
const socket = getSocket();
|
||||
socket.emit('server:console:command', { serverId, orgId, command: command.trim() });
|
||||
setHistory((prev) => [...prev, command.trim()]);
|
||||
setHistoryIndex(-1);
|
||||
setCommand('');
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
sendCommand();
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
if (history.length === 0) return;
|
||||
const newIndex = historyIndex < history.length - 1 ? historyIndex + 1 : historyIndex;
|
||||
setHistoryIndex(newIndex);
|
||||
setCommand(history[history.length - 1 - newIndex] ?? '');
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
if (historyIndex <= 0) {
|
||||
setHistoryIndex(-1);
|
||||
setCommand('');
|
||||
} else {
|
||||
const newIndex = historyIndex - 1;
|
||||
setHistoryIndex(newIndex);
|
||||
setCommand(history[history.length - 1 - newIndex] ?? '');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<Card className="overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<div ref={termRef} className="h-[500px]" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="Type a command..."
|
||||
value={command}
|
||||
onChange={(e) => setCommand(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<Button onClick={sendCommand} size="icon">
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Folder,
|
||||
FileText,
|
||||
ArrowUp,
|
||||
Trash2,
|
||||
Plus,
|
||||
Download,
|
||||
Upload,
|
||||
Save,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { api } from '@/lib/api';
|
||||
import { formatBytes } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogClose,
|
||||
} from '@/components/ui/dialog';
|
||||
|
||||
interface FileEntry {
|
||||
name: string;
|
||||
path: string;
|
||||
isDirectory: boolean;
|
||||
size: number;
|
||||
modifiedAt: number;
|
||||
}
|
||||
|
||||
export function FilesPage() {
|
||||
const { orgId, serverId } = useParams();
|
||||
const queryClient = useQueryClient();
|
||||
const [currentPath, setCurrentPath] = useState('/');
|
||||
const [editingFile, setEditingFile] = useState<{ path: string; content: string } | null>(null);
|
||||
const [newFileName, setNewFileName] = useState('');
|
||||
const [showNewFile, setShowNewFile] = useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
|
||||
|
||||
const filesQuery = useQuery({
|
||||
queryKey: ['files', orgId, serverId, currentPath],
|
||||
queryFn: () =>
|
||||
api.get<{ files: FileEntry[] }>(
|
||||
`/organizations/${orgId}/servers/${serverId}/files`,
|
||||
{ path: currentPath },
|
||||
),
|
||||
enabled: !editingFile,
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (paths: string[]) =>
|
||||
api.post(`/organizations/${orgId}/servers/${serverId}/files/delete`, { paths }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['files', orgId, serverId, currentPath] });
|
||||
setDeleteTarget(null);
|
||||
},
|
||||
});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: ({ path, data }: { path: string; data: string }) =>
|
||||
api.post(`/organizations/${orgId}/servers/${serverId}/files/write`, { path, data }),
|
||||
onSuccess: () => {
|
||||
setEditingFile(null);
|
||||
queryClient.invalidateQueries({ queryKey: ['files', orgId, serverId, currentPath] });
|
||||
},
|
||||
});
|
||||
|
||||
const createFileMutation = useMutation({
|
||||
mutationFn: ({ path, data }: { path: string; data: string }) =>
|
||||
api.post(`/organizations/${orgId}/servers/${serverId}/files/write`, { path, data }),
|
||||
onSuccess: () => {
|
||||
setShowNewFile(false);
|
||||
setNewFileName('');
|
||||
queryClient.invalidateQueries({ queryKey: ['files', orgId, serverId, currentPath] });
|
||||
},
|
||||
});
|
||||
|
||||
const openFile = async (file: FileEntry) => {
|
||||
if (file.isDirectory) {
|
||||
setCurrentPath(file.path);
|
||||
return;
|
||||
}
|
||||
const res = await api.get<{ data: string }>(
|
||||
`/organizations/${orgId}/servers/${serverId}/files/read`,
|
||||
{ path: file.path },
|
||||
);
|
||||
setEditingFile({ path: file.path, content: res.data });
|
||||
};
|
||||
|
||||
const goUp = () => {
|
||||
if (currentPath === '/') return;
|
||||
const parts = currentPath.split('/').filter(Boolean);
|
||||
parts.pop();
|
||||
setCurrentPath('/' + parts.join('/'));
|
||||
};
|
||||
|
||||
const breadcrumbs = currentPath.split('/').filter(Boolean);
|
||||
|
||||
const files = filesQuery.data?.files ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{editingFile ? (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-sm font-mono">{editingFile.path}</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
saveMutation.mutate({ path: editingFile.path, data: editingFile.content })
|
||||
}
|
||||
disabled={saveMutation.isPending}
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
Save
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => setEditingFile(null)}>
|
||||
<X className="h-4 w-4" />
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<textarea
|
||||
value={editingFile.content}
|
||||
onChange={(e) => setEditingFile({ ...editingFile, content: e.target.value })}
|
||||
className="min-h-[500px] w-full rounded-md border bg-background p-3 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Button variant="ghost" size="icon" onClick={goUp} disabled={currentPath === '/'}>
|
||||
<ArrowUp className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-muted-foreground">/</span>
|
||||
{breadcrumbs.map((crumb, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<button
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
onClick={() =>
|
||||
setCurrentPath('/' + breadcrumbs.slice(0, i + 1).join('/'))
|
||||
}
|
||||
>
|
||||
{crumb}
|
||||
</button>
|
||||
{i < breadcrumbs.length - 1 && (
|
||||
<span className="text-muted-foreground">/</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={() => setShowNewFile(true)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
New File
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showNewFile && (
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="filename.txt"
|
||||
value={newFileName}
|
||||
onChange={(e) => setNewFileName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && newFileName) {
|
||||
const path =
|
||||
currentPath === '/' ? `/${newFileName}` : `${currentPath}/${newFileName}`;
|
||||
createFileMutation.mutate({ path, data: '' });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (!newFileName) return;
|
||||
const path =
|
||||
currentPath === '/' ? `/${newFileName}` : `${currentPath}/${newFileName}`;
|
||||
createFileMutation.mutate({ path, data: '' });
|
||||
}}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setShowNewFile(false);
|
||||
setNewFileName('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{files.length === 0 && (
|
||||
<div className="flex items-center justify-center py-12 text-muted-foreground">
|
||||
This directory is empty
|
||||
</div>
|
||||
)}
|
||||
{files.map((file) => (
|
||||
<div
|
||||
key={file.path}
|
||||
className="flex cursor-pointer items-center justify-between px-4 py-2.5 hover:bg-muted/50"
|
||||
onClick={() => openFile(file)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{file.isDirectory ? (
|
||||
<Folder className="h-4 w-4 text-blue-400" />
|
||||
) : (
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span className="text-sm">{file.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
{!file.isDirectory && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatBytes(file.size)}
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteTarget(file.path);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete File</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Are you sure you want to delete <code className="font-mono">{deleteTarget}</code>?
|
||||
</p>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => deleteTarget && deleteMutation.mutate([deleteTarget])}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Users } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
|
||||
export function PlayersPage() {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Users className="mb-4 h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="text-muted-foreground">Active player tracking coming soon</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Puzzle } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
|
||||
export function PluginsPage() {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Puzzle className="mb-4 h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="text-muted-foreground">Plugin management coming soon</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
|
||||
export function SchedulesPage() {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Calendar className="mb-4 h-12 w-12 text-muted-foreground/50" />
|
||||
<p className="text-muted-foreground">Scheduled tasks coming soon</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams, useOutletContext } from 'react-router';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { formatBytes } from '@/lib/utils';
|
||||
|
||||
interface ServerDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
memoryLimit: number;
|
||||
diskLimit: number;
|
||||
cpuLimit: number;
|
||||
startupOverride?: string;
|
||||
environment?: Record<string, string>;
|
||||
}
|
||||
|
||||
export function ServerSettingsPage() {
|
||||
const { orgId, serverId } = useParams();
|
||||
const { server } = useOutletContext<{ server?: ServerDetail }>();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [name, setName] = useState(server?.name ?? '');
|
||||
const [description, setDescription] = useState(server?.description ?? '');
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (body: Record<string, unknown>) =>
|
||||
api.patch(`/organizations/${orgId}/servers/${serverId}`, body),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['server', orgId, serverId] });
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>General</CardTitle>
|
||||
<CardDescription>Basic server information</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Name</Label>
|
||||
<Input value={name} onChange={(e) => setName(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Description</Label>
|
||||
<Input value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => updateMutation.mutate({ name, description })}
|
||||
disabled={updateMutation.isPending}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Resources</CardTitle>
|
||||
<CardDescription>Current resource limits</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-sm text-muted-foreground">Memory</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{server ? formatBytes(server.memoryLimit) : '—'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-sm text-muted-foreground">Disk</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{server ? formatBytes(server.diskLimit) : '—'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-sm text-muted-foreground">CPU</p>
|
||||
<p className="text-lg font-semibold">{server?.cpuLimit ?? '—'}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-destructive">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">Danger Zone</CardTitle>
|
||||
<CardDescription>Irreversible actions</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="destructive">Delete Server</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user