feat: add processes page

src/components/ProcessesTable.tsx

@@ -0,0 +1,66 @@
+import {
+	Paper,
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+import { Process } from "../types";
+
+export default function ProcessesTable({ container }: { container: string }) {
+	const [processes, setProcesses] = useState<Process[]>([]);
+
+	useEffect(() => {
+		const updateProcesses = async () => {
+			const processesForTable = [];
+
+			const apiCall = await fetch(
+				`https://process-list.syscall.lol/${container}`,
+			);
+			const processes = await apiCall.json();
+
+			for (const process of processes) {
+				const proc: Process = {
+					pid: process[1],
+					user: process[0],
+					command: process[7],
+				};
+
+				processesForTable.push(proc);
+			}
+
+			setProcesses(processesForTable);
+		};
+
+		updateProcesses();
+		setInterval(updateProcesses, 3000);
+	}, [container]);
+
+	return (
+		<TableContainer component={Paper}>
+			<Table>
+				<TableHead>
+					<TableRow>
+						<TableCell>PID</TableCell>
+						<TableCell>User</TableCell>
+						<TableCell>Command</TableCell>
+					</TableRow>
+				</TableHead>
+				<TableBody>
+					{processes.map((process) => (
+						<TableRow key={process.pid}>
+							<TableCell component="th" scope="row">
+								{process.pid}
+							</TableCell>
+							<TableCell>{process.user}</TableCell>
+							<TableCell>{process.command}</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
+	);
+}

src/main.tsx

@@ -5,6 +5,7 @@ import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router";
 import ContainerPage from "./pages/container/index.tsx";
 import TerminalPage from "./pages/container/terminal.tsx";
+import ProcessesPage from "./pages/container/processes.tsx";
 
 async function loader() {
 	const info = await fetch(`https://api.ssh.surf/info`, {
@@ -32,6 +33,10 @@ const router = createBrowserRouter([
 				element: <TerminalPage />,
 				loader,
 			},
+			{
+				path: "/container/processes",
+				element: <ProcessesPage />,
+			},
 		],
 	},
 ]);

src/pages/App.tsx

@@ -32,12 +32,7 @@ interface Item {
 const sidebarItems: Item[] = [
 	{ title: "Info", icon: "Info", href: "/container" },
 	{ title: "Terminal", icon: "Terminal", href: "/container/terminal" },
-	{
+	{ title: "Processes", icon: "Memory", href: "/container/processes" },
-		title: "Syscall",
-		icon: "Memory",
-		href: `//${localStorage.getItem("hostname")}.syscall.lol`,
-		openInNewTab: true,
-	},
 ];
 
 const drawerWidth = 240;

src/pages/container/processes.tsx

@@ -0,0 +1,6 @@
+import ProcessesTable from "../../components/ProcessesTable";
+
+export default function ProcessesPage() {
+	const containerName = localStorage["hostname"];
+	return <ProcessesTable container={containerName} />;
+}

src/types.ts

@@ -27,3 +27,9 @@ export interface InfoData {
 	created: string;
 	image: string;
 }
+
+export interface Process {
+	pid: number;
+	user: string;
+	command: string;
+}