chore: initial commit for phase07
This commit is contained in:
hibna
@@ -18,6 +18,7 @@ import { OrganizationsPage } from '@/pages/organizations/index';
|
||||
import { DashboardPage } from '@/pages/dashboard/index';
|
||||
import { CreateServerPage } from '@/pages/servers/create';
|
||||
import { NodesPage } from '@/pages/nodes/index';
|
||||
import { NodeDetailPage } from '@/pages/nodes/detail';
|
||||
import { MembersPage } from '@/pages/settings/members';
|
||||
|
||||
// Server pages
|
||||
@@ -86,6 +87,7 @@ export function App() {
|
||||
<Route path="/org/:orgId/dashboard" element={<DashboardPage />} />
|
||||
<Route path="/org/:orgId/servers/new" element={<CreateServerPage />} />
|
||||
<Route path="/org/:orgId/nodes" element={<NodesPage />} />
|
||||
<Route path="/org/:orgId/nodes/:nodeId" element={<NodeDetailPage />} />
|
||||
<Route path="/org/:orgId/settings/members" element={<MembersPage />} />
|
||||
|
||||
{/* Server detail */}
|
||||
|
||||
@@ -0,0 +1,248 @@
|
||||
import { useParams, Link } from 'react-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Network,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
Cpu,
|
||||
MemoryStick,
|
||||
HardDrive,
|
||||
Server,
|
||||
Activity,
|
||||
} from 'lucide-react';
|
||||
import { api } from '@/lib/api';
|
||||
import { formatBytes } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
|
||||
interface NodeDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
fqdn: string;
|
||||
daemonPort: number;
|
||||
grpcPort: number;
|
||||
memoryTotal: number;
|
||||
diskTotal: number;
|
||||
isOnline: boolean;
|
||||
daemonVersion: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface NodeStats {
|
||||
cpuPercent: number;
|
||||
memoryUsed: number;
|
||||
memoryTotal: number;
|
||||
diskUsed: number;
|
||||
diskTotal: number;
|
||||
activeServers: number;
|
||||
totalServers: number;
|
||||
uptime: number;
|
||||
}
|
||||
|
||||
interface ServerSummary {
|
||||
id: string;
|
||||
name: string;
|
||||
status: string;
|
||||
memoryLimit: number;
|
||||
cpuLimit: number;
|
||||
gameName: string;
|
||||
}
|
||||
|
||||
export function NodeDetailPage() {
|
||||
const { orgId, nodeId } = useParams();
|
||||
|
||||
const { data: node } = useQuery({
|
||||
queryKey: ['node', orgId, nodeId],
|
||||
queryFn: () => api.get<NodeDetail>(`/organizations/${orgId}/nodes/${nodeId}`),
|
||||
});
|
||||
|
||||
const { data: stats } = useQuery({
|
||||
queryKey: ['node-stats', orgId, nodeId],
|
||||
queryFn: () => api.get<NodeStats>(`/organizations/${orgId}/nodes/${nodeId}/stats`),
|
||||
refetchInterval: 10_000,
|
||||
});
|
||||
|
||||
const { data: serversData } = useQuery({
|
||||
queryKey: ['node-servers', orgId, nodeId],
|
||||
queryFn: () =>
|
||||
api.get<{ data: ServerSummary[] }>(
|
||||
`/organizations/${orgId}/nodes/${nodeId}/servers`,
|
||||
),
|
||||
});
|
||||
|
||||
const servers = serversData?.data ?? [];
|
||||
|
||||
if (!node) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const memPercent = stats
|
||||
? Math.round((stats.memoryUsed / stats.memoryTotal) * 100)
|
||||
: 0;
|
||||
const diskPercent = stats
|
||||
? Math.round((stats.diskUsed / stats.diskTotal) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link to={`/org/${orgId}/nodes`}>
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
<Network className="h-6 w-6 text-primary" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{node.name}</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{node.fqdn}:{node.daemonPort}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={node.isOnline ? 'default' : 'destructive'}>
|
||||
{node.isOnline ? (
|
||||
<><Wifi className="mr-1 h-3 w-3" /> Online</>
|
||||
) : (
|
||||
<><WifiOff className="mr-1 h-3 w-3" /> Offline</>
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium">CPU Usage</CardTitle>
|
||||
<Cpu className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats ? `${stats.cpuPercent.toFixed(1)}%` : '—'}
|
||||
</div>
|
||||
<Progress value={stats?.cpuPercent ?? 0} className="mt-2 h-2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium">Memory</CardTitle>
|
||||
<MemoryStick className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats
|
||||
? `${formatBytes(stats.memoryUsed)} / ${formatBytes(stats.memoryTotal)}`
|
||||
: '—'}
|
||||
</div>
|
||||
<Progress value={memPercent} className="mt-2 h-2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium">Disk</CardTitle>
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats
|
||||
? `${formatBytes(stats.diskUsed)} / ${formatBytes(stats.diskTotal)}`
|
||||
: '—'}
|
||||
</div>
|
||||
<Progress value={diskPercent} className="mt-2 h-2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium">Servers</CardTitle>
|
||||
<Server className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{stats ? `${stats.activeServers} / ${stats.totalServers}` : servers.length.toString()}
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{stats ? 'active / total' : 'total servers'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Node Info */}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Node Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<InfoRow label="FQDN" value={node.fqdn} />
|
||||
<InfoRow label="Daemon Port" value={String(node.daemonPort)} />
|
||||
<InfoRow label="gRPC Port" value={String(node.grpcPort)} />
|
||||
<InfoRow label="Total Memory" value={formatBytes(node.memoryTotal)} />
|
||||
<InfoRow label="Total Disk" value={formatBytes(node.diskTotal)} />
|
||||
{node.daemonVersion && (
|
||||
<InfoRow label="Daemon Version" value={node.daemonVersion} />
|
||||
)}
|
||||
<InfoRow label="Created" value={new Date(node.createdAt).toLocaleDateString()} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Servers on this Node</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{servers.length === 0 ? (
|
||||
<p className="py-4 text-center text-sm text-muted-foreground">
|
||||
No servers on this node
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{servers.map((srv) => (
|
||||
<Link
|
||||
key={srv.id}
|
||||
to={`/org/${orgId}/servers/${srv.id}/console`}
|
||||
className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium">{srv.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{srv.gameName}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant={srv.status === 'running' ? 'default' : 'outline'}
|
||||
>
|
||||
{srv.status}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatBytes(srv.memoryLimit)} RAM
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">{label}</span>
|
||||
<span className="font-medium">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import { useParams, Link } from 'react-router';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Plus, Network, Wifi, WifiOff } from 'lucide-react';
|
||||
import { api } from '@/lib/api';
|
||||
@@ -153,7 +153,8 @@ export function NodesPage() {
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{nodes.map((node) => (
|
||||
<Card key={node.id}>
|
||||
<Link key={node.id} to={`/org/${orgId}/nodes/${node.id}`}>
|
||||
<Card className="transition-colors hover:bg-muted/50 cursor-pointer">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Network className="h-5 w-5 text-primary" />
|
||||
@@ -175,6 +176,7 @@ export function NodesPage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,280 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import { HardDrive } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
HardDrive,
|
||||
Plus,
|
||||
Download,
|
||||
Trash2,
|
||||
Lock,
|
||||
Unlock,
|
||||
RotateCcw,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
} from 'lucide-react';
|
||||
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 } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
|
||||
interface Backup {
|
||||
id: string;
|
||||
name: string;
|
||||
sizeBytes: number | null;
|
||||
cdnPath: string | null;
|
||||
checksum: string | null;
|
||||
isLocked: boolean;
|
||||
completedAt: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number | null): string {
|
||||
if (bytes === null || bytes === 0) return '—';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i] ?? 'B'}`;
|
||||
}
|
||||
|
||||
export function BackupsPage() {
|
||||
const { serverId } = useParams();
|
||||
const { orgId, serverId } = useParams();
|
||||
const queryClient = useQueryClient();
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [confirmRestore, setConfirmRestore] = useState<string | null>(null);
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['backups', orgId, serverId],
|
||||
queryFn: () =>
|
||||
api.get<{ backups: Backup[] }>(
|
||||
`/organizations/${orgId}/servers/${serverId}/backups`,
|
||||
),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (backupId: string) =>
|
||||
api.delete(`/organizations/${orgId}/servers/${serverId}/backups/${backupId}`),
|
||||
onSuccess: () =>
|
||||
queryClient.invalidateQueries({ queryKey: ['backups', orgId, serverId] }),
|
||||
});
|
||||
|
||||
const restoreMutation = useMutation({
|
||||
mutationFn: (backupId: string) =>
|
||||
api.post(`/organizations/${orgId}/servers/${serverId}/backups/${backupId}/restore`, {}),
|
||||
onSuccess: () => setConfirmRestore(null),
|
||||
});
|
||||
|
||||
const lockMutation = useMutation({
|
||||
mutationFn: (backupId: string) =>
|
||||
api.patch(`/organizations/${orgId}/servers/${serverId}/backups/${backupId}/lock`, {}),
|
||||
onSuccess: () =>
|
||||
queryClient.invalidateQueries({ queryKey: ['backups', orgId, serverId] }),
|
||||
});
|
||||
|
||||
const backupList = data?.backups ?? [];
|
||||
|
||||
const totalSize = backupList.reduce((sum, b) => sum + (b.sizeBytes ?? 0), 0);
|
||||
|
||||
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>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Backups</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{backupList.length} backup{backupList.length !== 1 ? 's' : ''} — {formatBytes(totalSize)} total
|
||||
</p>
|
||||
</div>
|
||||
<Dialog open={showCreate} onOpenChange={setShowCreate}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm">
|
||||
<Plus className="mr-1.5 h-4 w-4" />
|
||||
Create Backup
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Backup</DialogTitle>
|
||||
</DialogHeader>
|
||||
<CreateBackupForm
|
||||
orgId={orgId!}
|
||||
serverId={serverId!}
|
||||
onClose={() => setShowCreate(false)}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{backupList.length === 0 ? (
|
||||
<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">No backups yet</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Create a backup to save the current state of your server
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{backupList.map((backup) => (
|
||||
<Card key={backup.id}>
|
||||
<CardContent className="flex items-center justify-between py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
|
||||
{backup.completedAt ? (
|
||||
<CheckCircle2 className="h-5 w-5 text-green-500" />
|
||||
) : (
|
||||
<Clock className="h-5 w-5 text-yellow-500 animate-pulse" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{backup.name}</p>
|
||||
{backup.isLocked && (
|
||||
<Badge variant="outline">
|
||||
<Lock className="mr-1 h-3 w-3" />
|
||||
Locked
|
||||
</Badge>
|
||||
)}
|
||||
{!backup.completedAt && (
|
||||
<Badge variant="outline" className="text-yellow-500">
|
||||
In Progress
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-0.5 flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<span>{formatBytes(backup.sizeBytes)}</span>
|
||||
<span>{new Date(backup.createdAt).toLocaleString()}</span>
|
||||
{backup.checksum && (
|
||||
<span className="font-mono">
|
||||
{backup.checksum.slice(0, 12)}...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{backup.completedAt && (
|
||||
<>
|
||||
{confirmRestore === backup.id ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-destructive mr-1">Confirm?</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => restoreMutation.mutate(backup.id)}
|
||||
disabled={restoreMutation.isPending}
|
||||
>
|
||||
Yes
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setConfirmRestore(null)}
|
||||
>
|
||||
No
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setConfirmRestore(backup.id)}
|
||||
title="Restore"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => lockMutation.mutate(backup.id)}
|
||||
title={backup.isLocked ? 'Unlock' : 'Lock'}
|
||||
>
|
||||
{backup.isLocked ? (
|
||||
<Unlock className="h-4 w-4" />
|
||||
) : (
|
||||
<Lock className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
{!backup.isLocked && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={() => deleteMutation.mutate(backup.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateBackupForm({
|
||||
orgId,
|
||||
serverId,
|
||||
onClose,
|
||||
}: {
|
||||
orgId: string;
|
||||
serverId: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState(
|
||||
`backup-${new Date().toISOString().slice(0, 10)}`,
|
||||
);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: { name: string }) =>
|
||||
api.post(`/organizations/${orgId}/servers/${serverId}/backups`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['backups', orgId, serverId] });
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
createMutation.mutate({ name });
|
||||
}}
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="grid gap-1.5">
|
||||
<Label>Backup Name</Label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? 'Creating...' : 'Create Backup'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,426 @@
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Calendar,
|
||||
Plus,
|
||||
Play,
|
||||
Pause,
|
||||
Trash2,
|
||||
Clock,
|
||||
Zap,
|
||||
Terminal,
|
||||
Power,
|
||||
HardDrive,
|
||||
} from 'lucide-react';
|
||||
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 } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
interface ScheduledTask {
|
||||
id: string;
|
||||
name: string;
|
||||
action: 'command' | 'power' | 'backup';
|
||||
payload: string;
|
||||
scheduleType: 'interval' | 'daily' | 'weekly' | 'cron';
|
||||
scheduleData: Record<string, unknown>;
|
||||
isActive: boolean;
|
||||
lastRunAt: string | null;
|
||||
nextRunAt: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
const DAYS_OF_WEEK = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
|
||||
const ACTION_ICONS = {
|
||||
command: Terminal,
|
||||
power: Power,
|
||||
backup: HardDrive,
|
||||
} as const;
|
||||
|
||||
export function SchedulesPage() {
|
||||
const { orgId, serverId } = useParams();
|
||||
const queryClient = useQueryClient();
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['schedules', orgId, serverId],
|
||||
queryFn: () =>
|
||||
api.get<{ tasks: ScheduledTask[] }>(
|
||||
`/organizations/${orgId}/servers/${serverId}/schedules`,
|
||||
),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (taskId: string) =>
|
||||
api.delete(`/organizations/${orgId}/servers/${serverId}/schedules/${taskId}`),
|
||||
onSuccess: () =>
|
||||
queryClient.invalidateQueries({ queryKey: ['schedules', orgId, serverId] }),
|
||||
});
|
||||
|
||||
const triggerMutation = useMutation({
|
||||
mutationFn: (taskId: string) =>
|
||||
api.post(`/organizations/${orgId}/servers/${serverId}/schedules/${taskId}/trigger`, {}),
|
||||
onSuccess: () =>
|
||||
queryClient.invalidateQueries({ queryKey: ['schedules', orgId, serverId] }),
|
||||
});
|
||||
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: ({ taskId, isActive }: { taskId: string; isActive: boolean }) =>
|
||||
api.patch(`/organizations/${orgId}/servers/${serverId}/schedules/${taskId}`, { isActive }),
|
||||
onSuccess: () =>
|
||||
queryClient.invalidateQueries({ queryKey: ['schedules', orgId, serverId] }),
|
||||
});
|
||||
|
||||
const tasks = data?.tasks ?? [];
|
||||
|
||||
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>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Scheduled Tasks</h2>
|
||||
<Dialog open={showCreate} onOpenChange={setShowCreate}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm">
|
||||
<Plus className="mr-1.5 h-4 w-4" />
|
||||
New Schedule
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Scheduled Task</DialogTitle>
|
||||
</DialogHeader>
|
||||
<CreateScheduleForm
|
||||
orgId={orgId!}
|
||||
serverId={serverId!}
|
||||
onClose={() => setShowCreate(false)}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{tasks.length === 0 ? (
|
||||
<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">No scheduled tasks yet</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Create a schedule to automate commands, power actions, or backups
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{tasks.map((task) => {
|
||||
const ActionIcon = ACTION_ICONS[task.action];
|
||||
return (
|
||||
<Card key={task.id}>
|
||||
<CardContent className="flex items-center justify-between py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
|
||||
<ActionIcon className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{task.name}</p>
|
||||
<Badge variant={task.isActive ? 'default' : 'outline'}>
|
||||
{task.isActive ? 'Active' : 'Paused'}
|
||||
</Badge>
|
||||
<Badge variant="outline">{task.action}</Badge>
|
||||
</div>
|
||||
<div className="mt-0.5 flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatSchedule(task.scheduleType, task.scheduleData)}
|
||||
</span>
|
||||
{task.nextRunAt && (
|
||||
<span>
|
||||
Next: {new Date(task.nextRunAt).toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
{task.lastRunAt && (
|
||||
<span>
|
||||
Last: {new Date(task.lastRunAt).toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{task.action === 'command' && (
|
||||
<p className="mt-0.5 font-mono text-xs text-muted-foreground">
|
||||
$ {task.payload}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => triggerMutation.mutate(task.id)}
|
||||
title="Run now"
|
||||
>
|
||||
<Zap className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
toggleMutation.mutate({
|
||||
taskId: task.id,
|
||||
isActive: !task.isActive,
|
||||
})
|
||||
}
|
||||
title={task.isActive ? 'Pause' : 'Resume'}
|
||||
>
|
||||
{task.isActive ? (
|
||||
<Pause className="h-4 w-4" />
|
||||
) : (
|
||||
<Play className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={() => deleteMutation.mutate(task.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatSchedule(type: string, data: Record<string, unknown>): string {
|
||||
switch (type) {
|
||||
case 'interval':
|
||||
return `Every ${data.minutes ?? 60} minutes`;
|
||||
case 'daily':
|
||||
return `Daily at ${String(data.hour ?? 0).padStart(2, '0')}:${String(data.minute ?? 0).padStart(2, '0')}`;
|
||||
case 'weekly': {
|
||||
const day = DAYS_OF_WEEK[Number(data.dayOfWeek ?? 0)] ?? 'Sunday';
|
||||
return `${day} at ${String(data.hour ?? 0).padStart(2, '0')}:${String(data.minute ?? 0).padStart(2, '0')}`;
|
||||
}
|
||||
case 'cron':
|
||||
return `Cron: ${String(data.expression ?? '* * * * *')}`;
|
||||
default:
|
||||
return type;
|
||||
}
|
||||
}
|
||||
|
||||
function CreateScheduleForm({
|
||||
orgId,
|
||||
serverId,
|
||||
onClose,
|
||||
}: {
|
||||
orgId: string;
|
||||
serverId: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState('');
|
||||
const [action, setAction] = useState<'command' | 'power' | 'backup'>('command');
|
||||
const [payload, setPayload] = useState('');
|
||||
const [scheduleType, setScheduleType] = useState<'interval' | 'daily' | 'weekly' | 'cron'>('interval');
|
||||
|
||||
// Schedule data fields
|
||||
const [minutes, setMinutes] = useState('60');
|
||||
const [hour, setHour] = useState('0');
|
||||
const [minute, setMinute] = useState('0');
|
||||
const [dayOfWeek, setDayOfWeek] = useState('0');
|
||||
const [cronExpression, setCronExpression] = useState('0 * * * *');
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) =>
|
||||
api.post(`/organizations/${orgId}/servers/${serverId}/schedules`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['schedules', orgId, serverId] });
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
|
||||
const buildScheduleData = (): Record<string, unknown> => {
|
||||
switch (scheduleType) {
|
||||
case 'interval':
|
||||
return { minutes: parseInt(minutes, 10) };
|
||||
case 'daily':
|
||||
return { hour: parseInt(hour, 10), minute: parseInt(minute, 10) };
|
||||
case 'weekly':
|
||||
return { dayOfWeek: parseInt(dayOfWeek, 10), hour: parseInt(hour, 10), minute: parseInt(minute, 10) };
|
||||
case 'cron':
|
||||
return { expression: cronExpression };
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
createMutation.mutate({
|
||||
name,
|
||||
action,
|
||||
payload: action === 'backup' ? 'backup' : payload,
|
||||
scheduleType,
|
||||
scheduleData: buildScheduleData(),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid gap-1.5">
|
||||
<Label>Name</Label>
|
||||
<Input
|
||||
placeholder="Daily restart"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="grid gap-1.5">
|
||||
<Label>Action</Label>
|
||||
<Select value={action} onValueChange={(v) => setAction(v as typeof action)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="command">Run Command</SelectItem>
|
||||
<SelectItem value="power">Power Action</SelectItem>
|
||||
<SelectItem value="backup">Create Backup</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{action !== 'backup' && (
|
||||
<div className="grid gap-1.5">
|
||||
<Label>{action === 'command' ? 'Command' : 'Power Action'}</Label>
|
||||
{action === 'command' ? (
|
||||
<Input
|
||||
placeholder="say Server restarting..."
|
||||
value={payload}
|
||||
onChange={(e) => setPayload(e.target.value)}
|
||||
required
|
||||
/>
|
||||
) : (
|
||||
<Select value={payload} onValueChange={setPayload}>
|
||||
<SelectTrigger><SelectValue placeholder="Select..." /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="start">Start</SelectItem>
|
||||
<SelectItem value="stop">Stop</SelectItem>
|
||||
<SelectItem value="restart">Restart</SelectItem>
|
||||
<SelectItem value="kill">Kill</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1.5">
|
||||
<Label>Schedule Type</Label>
|
||||
<Select value={scheduleType} onValueChange={(v) => setScheduleType(v as typeof scheduleType)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="interval">Interval</SelectItem>
|
||||
<SelectItem value="daily">Daily</SelectItem>
|
||||
<SelectItem value="weekly">Weekly</SelectItem>
|
||||
<SelectItem value="cron">Cron Expression</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{scheduleType === 'interval' && (
|
||||
<div className="grid gap-1.5">
|
||||
<Label>Interval (minutes)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
value={minutes}
|
||||
onChange={(e) => setMinutes(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(scheduleType === 'daily' || scheduleType === 'weekly') && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{scheduleType === 'weekly' && (
|
||||
<div className="col-span-2 grid gap-1.5">
|
||||
<Label>Day of Week</Label>
|
||||
<Select value={dayOfWeek} onValueChange={setDayOfWeek}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{DAYS_OF_WEEK.map((day, i) => (
|
||||
<SelectItem key={day} value={String(i)}>{day}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid gap-1.5">
|
||||
<Label>Hour (0-23)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
max="23"
|
||||
value={hour}
|
||||
onChange={(e) => setHour(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-1.5">
|
||||
<Label>Minute (0-59)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
max="59"
|
||||
value={minute}
|
||||
onChange={(e) => setMinute(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{scheduleType === 'cron' && (
|
||||
<div className="grid gap-1.5">
|
||||
<Label>Cron Expression</Label>
|
||||
<Input
|
||||
placeholder="0 */6 * * *"
|
||||
value={cronExpression}
|
||||
onChange={(e) => setCronExpression(e.target.value)}
|
||||
className="font-mono"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Format: minute hour day-of-month month day-of-week
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? 'Creating...' : 'Create Schedule'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user