From 5fcc8b4859f40d9a43176888c129cabdc19d3a6d Mon Sep 17 00:00:00 2001
From: CyberL1 <mateusz.hf18@gmail.com>
Date: Thu, 16 Jan 2025 17:02:05 +0100
Subject: [PATCH] feat: add processes page

---
 src/components/ProcessesTable.tsx | 66 +++++++++++++++++++++++++++++++
 src/main.tsx                      |  5 +++
 src/pages/App.tsx                 |  7 +---
 src/pages/container/processes.tsx |  6 +++
 src/types.ts                      |  6 +++
 5 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ProcessesTable.tsx
 create mode 100644 src/pages/container/processes.tsx

diff --git a/src/components/ProcessesTable.tsx b/src/components/ProcessesTable.tsx
new file mode 100644
index 0000000..73487d5
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/main.tsx b/src/main.tsx
index a394e9a..1824714 100644
--- a/src/main.tsx
+++ b/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 />,
+			},
 		],
 	},
 ]);
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index c2d7916..5284480 100644
--- a/src/pages/App.tsx
+++ b/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: "Syscall",
-		icon: "Memory",
-		href: `//${localStorage.getItem("hostname")}.syscall.lol`,
-		openInNewTab: true,
-	},
+	{ title: "Processes", icon: "Memory", href: "/container/processes" },
 ];
 
 const drawerWidth = 240;
diff --git a/src/pages/container/processes.tsx b/src/pages/container/processes.tsx
new file mode 100644
index 0000000..d6ffaba
--- /dev/null
+++ b/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} />;
+}
diff --git a/src/types.ts b/src/types.ts
index 4e3786f..981b8c7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -27,3 +27,9 @@ export interface InfoData {
 	created: string;
 	image: string;
 }
+
+export interface Process {
+	pid: number;
+	user: string;
+	command: string;
+}