remaking Immersion page for admins
This commit is contained in:
Arthur Wambst
parent
0a7e3fcc44
commit
3557050f8e
@ -10,7 +10,10 @@ function Immersion() {
|
||||
const { id } = useParams();
|
||||
const [ji, setJi] = useState<Ji>();
|
||||
const [instance, setInstance] = useState<Instance>();
|
||||
const [allInstances, setAllInstances] = useState<Instance[]>([]);
|
||||
const [instancesStatus, setInstancesStatus] = useState<Record<number, string>>({});
|
||||
const username = localStorage.getItem("username");
|
||||
|
||||
const copyText = (copy: string) => {
|
||||
navigator.clipboard.writeText(copy);
|
||||
toast.success("Copied!", {
|
||||
@ -31,6 +34,21 @@ function Immersion() {
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`/api/ji/${id}/all-instances`).then((res) => {
|
||||
setAllInstances(res.data);
|
||||
// Récupérer le status de chaque instance
|
||||
res.data.forEach((inst: Instance) => {
|
||||
axios.get(`/api/ji/${id}/container`).then((statusRes) => {
|
||||
setInstancesStatus(prev => ({
|
||||
...prev,
|
||||
[inst.id]: statusRes.data
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get("/api/user/me").then((res) => {
|
||||
localStorage.setItem("username", res.data.username);
|
||||
@ -45,13 +63,75 @@ function Immersion() {
|
||||
|
||||
const container_status = localStorage.getItem("container_status");
|
||||
|
||||
const handleCreateContainers = () => {
|
||||
axios.post(`/api/ji/${id}/containers`).then((res) => {
|
||||
if (res.status === 200) {
|
||||
toast.success("Containers created successfully!", {
|
||||
draggable: true,
|
||||
theme: localStorage.getItem("theme") || "dark",
|
||||
});
|
||||
// Recharger les instances pour mettre à jour les status
|
||||
axios.get(`/api/ji/${id}/all-instances`).then((res) => {
|
||||
setAllInstances(res.data);
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
toast.error("Failed to create containers", {
|
||||
draggable: true,
|
||||
theme: localStorage.getItem("theme") || "dark",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleStartAllContainers = () => {
|
||||
axios.post(`/api/ji/${id}/container/start`).then((res) => {
|
||||
if (res.status === 200) {
|
||||
toast.success("All containers started successfully!", {
|
||||
draggable: true,
|
||||
theme: localStorage.getItem("theme") || "dark",
|
||||
});
|
||||
// Recharger les instances pour mettre à jour les status
|
||||
axios.get(`/api/ji/${id}/all-instances`).then((res) => {
|
||||
setAllInstances(res.data);
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
toast.error("Failed to start containers", {
|
||||
draggable: true,
|
||||
theme: localStorage.getItem("theme") || "dark",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleStopAllContainers = () => {
|
||||
axios.post(`/api/ji/${id}/container/stop`).then((res) => {
|
||||
if (res.status === 200) {
|
||||
toast.success("All containers stopped successfully!", {
|
||||
draggable: true,
|
||||
theme: localStorage.getItem("theme") || "dark",
|
||||
});
|
||||
// Recharger les instances pour mettre à jour les status
|
||||
axios.get(`/api/ji/${id}/all-instances`).then((res) => {
|
||||
setAllInstances(res.data);
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
toast.error("Failed to stop containers", {
|
||||
draggable: true,
|
||||
theme: localStorage.getItem("theme") || "dark",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{ji && (
|
||||
<>
|
||||
<h1 className="text-3xl font-bold mb-2 ms-10">{ji.name}</h1>
|
||||
<div className="px-6">
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
{/* Section supérieure : Info + iframe */}
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Colonne gauche - Informations */}
|
||||
<div className="lg:w-1/3 px-4">
|
||||
<div className="bg-base-200 p-6 rounded-lg shadow-md mt-4">
|
||||
<h2 className="text-2xl font-semibold text-blue-600 mb-2">
|
||||
@ -69,49 +149,53 @@ function Immersion() {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{ instance && <div className="bg-base-200 p-6 rounded-lg shadow-md mt-6">
|
||||
<h2 className="text-2xl font-semibold text-blue-600 mb-2">
|
||||
Your credentials :
|
||||
</h2>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>SSH:</span>
|
||||
<div
|
||||
className="flex gap-2 items-center"
|
||||
onClick={() => copyText(`ssh -p ${instance.port} ${username}@la-banquise.fr`)}
|
||||
>
|
||||
<span className="font-medium">ssh -p {instance.port} {username}@la-banquise.fr</span>
|
||||
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
|
||||
<ClipboardIcon className="size-6" />
|
||||
|
||||
{instance && (
|
||||
<div className="bg-base-200 p-6 rounded-lg shadow-md mt-6">
|
||||
<h2 className="text-2xl font-semibold text-blue-600 mb-2">
|
||||
Your credentials :
|
||||
</h2>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>SSH:</span>
|
||||
<div
|
||||
className="flex gap-2 items-center cursor-pointer"
|
||||
onClick={() => copyText(`ssh -p ${instance.port} ${username}@la-banquise.fr`)}
|
||||
>
|
||||
<span className="font-medium">ssh -p {instance.port} {username}@la-banquise.fr</span>
|
||||
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
|
||||
<ClipboardIcon className="size-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>Instance name:</span>
|
||||
<div className="flex gap-2 items-center" >
|
||||
<span className="font-medium">{instance.name}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>Password:</span>
|
||||
<div
|
||||
className="flex gap-2 items-center"
|
||||
onClick={() => copyText(instance.pwd)}
|
||||
>
|
||||
<span className="font-normal">{instance.pwd}</span>
|
||||
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
|
||||
<ClipboardIcon className="size-6" />
|
||||
</li>
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>Instance name:</span>
|
||||
<div className="flex gap-2 items-center">
|
||||
<span className="font-medium">{instance.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>Status:</span>
|
||||
<div className="flex gap-2 items-center" >
|
||||
<span className="font-normal">{container_status}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>}
|
||||
</li>
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>Password:</span>
|
||||
<div
|
||||
className="flex gap-2 items-center cursor-pointer"
|
||||
onClick={() => copyText(instance.pwd)}
|
||||
>
|
||||
<span className="font-normal">{instance.pwd}</span>
|
||||
<div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
|
||||
<ClipboardIcon className="size-6" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex justify-between align-middle items-center">
|
||||
<span>Status:</span>
|
||||
<div className="flex gap-2 items-center">
|
||||
<span className="font-normal">{container_status}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<a
|
||||
href={ji.pdfLink}
|
||||
target="_blank"
|
||||
@ -128,6 +212,108 @@ function Immersion() {
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Colonne droite - iframe du sujet */}
|
||||
<div className="lg:w-2/3 px-4">
|
||||
<div className="bg-base-200 shadow-lg rounded-lg p-6 mt-4 h-full">
|
||||
<h2 className="text-2xl font-bold text-blue-600 mb-4">
|
||||
Subject
|
||||
</h2>
|
||||
<iframe
|
||||
src="https://tp.la-banquise.fr"
|
||||
className="w-full h-[600px] rounded-lg border-2 border-base-300"
|
||||
title="Subject Document"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section inférieure : Tableau des instances sur toute la largeur */}
|
||||
<div className="px-4 mt-8">
|
||||
<div className="bg-base-200 shadow-lg rounded-lg p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-2xl font-bold text-blue-600">
|
||||
All Instances
|
||||
</h2>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleCreateContainers}
|
||||
className="btn btn-success"
|
||||
>
|
||||
Create All Containers
|
||||
</button>
|
||||
<button
|
||||
onClick={handleStartAllContainers}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
Start All
|
||||
</button>
|
||||
<button
|
||||
onClick={handleStopAllContainers}
|
||||
className="btn btn-error"
|
||||
>
|
||||
Stop All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="p-4">#</th>
|
||||
<th className="p-4">Name</th>
|
||||
<th className="p-4">Port</th>
|
||||
<th className="p-4">Username</th>
|
||||
<th className="p-4">Password</th>
|
||||
<th className="p-4">Status</th>
|
||||
<th className="p-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allInstances.length > 0 ? (
|
||||
allInstances.map((inst: Instance, index: number) => (
|
||||
<tr key={inst.id || index} className="hover:bg-base-300">
|
||||
<td className="p-4">{index + 1}</td>
|
||||
<td className="p-4">{inst.name}</td>
|
||||
<td className="p-4">{inst.port}</td>
|
||||
<td className="p-4">{username}</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono">{inst.pwd}</span>
|
||||
<button
|
||||
onClick={() => copyText(inst.pwd)}
|
||||
className="btn btn-sm btn-ghost"
|
||||
>
|
||||
<ClipboardIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className="badge badge-primary">
|
||||
{instancesStatus[inst.id] || "Loading..."}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => copyText(`ssh -p ${inst.port} ${username}@la-banquise.fr`)}
|
||||
>
|
||||
Copy SSH
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center p-8 text-gray-500">
|
||||
No instances found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user