Cyber/dlinux-dashboard
1
1
Fork 0
mirror of https://github.com/CyberL1/dlinux-dashboard.git synced 2025-04-03 06:28:37 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: Cyber:81bf5fb6afc1229e22cad502774e7bb9ab8175d8
Branches Tags
Cyber:main
...
compare: Cyber:3cd59266c23f34158e4ef1aa2c4922d568a74a11
Branches Tags
Cyber:main

8 Commits
81bf5fb6af ... 3cd59266c2

Author SHA1 Message Date
CyberL1
3cd59266c2 feat: theme switcher 2025-01-16 17:55:49 +01:00
CyberL1
f1b7e063bb feat: add tooltips to sidebar icons 2025-01-16 17:23:18 +01:00
CyberL1
17c2a3042f feat: add auto dark mode based on user settings 2025-01-16 17:11:50 +01:00
CyberL1
5fcc8b4859 feat: add processes page 2025-01-16 17:02:05 +01:00
CyberL1
4ca8045df9 feat: add link to syscall 2025-01-16 15:10:16 +01:00
CyberL1
03ddc35df0 fix: managing container's state 2025-01-16 13:39:06 +01:00
CyberL1
238c5a2cec chore: add ts-ignore where needed 2025-01-16 13:33:08 +01:00
CyberL1
e47e87199f feat: connecting to the dlinux api 2025-01-16 13:30:01 +01:00
15 changed files with 475 additions and 360 deletions
Show Stats Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code containers</title> <title>DLinux</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

31
src/components/ContainerInfo.tsx Normal file
View File

@ -0,0 +1,31 @@
import { useEffect, useState } from "react";
import { Typography } from "@mui/material";
import { InfoData } from "../types";
export default function ContainerInfo() {
const [info, setInfo] = useState<InfoData>();
useEffect(() => {
const updateInfo = async () => {
const stats = await fetch(`https://api.ssh.surf/info`, {
// @ts-ignore
headers: { "x-ssh-auth": localStorage.getItem("key") },
});
const { data } = await stats.json();
setInfo(data);
};
updateInfo();
}, []);
if (!info) {
return "Fetching container info...";
}
return (
<>
<Typography>Hostname: {info.name}</Typography>
<Typography>Memory: {info.memory}</Typography>
</>
);
}

36
src/components/ContainerStats.tsx
View File

@ -1,36 +0,0 @@
import { useEffect, useState } from "react";
import { ContainerStats as ContainerStatsType } from "dockerode";
import { Typography } from "@mui/material";
export default function ContainerStats({ id }: { id: string }) {
const [stats, setStats] = useState<ContainerStatsType>();
useEffect(() => {
const sse = new EventSource(`/api/containers/${id}/stats`);
sse.onmessage = ({ data }) => {
const parsed = JSON.parse(data);
setStats(parsed);
};
return () => {
sse.close();
};
}, []);
if (!stats) {
return "Fetching container stats...";
}
const CPUPercentage =
((stats.cpu_stats.cpu_usage.total_usage -
stats.precpu_stats.cpu_usage.total_usage) /
(stats.cpu_stats.system_cpu_usage -
stats.precpu_stats.system_cpu_usage)) *
stats.cpu_stats.online_cpus *
100;
return (
<Typography>CPU Usage: {(CPUPercentage || 0).toFixed(2) + "%"}</Typography>
);
}

42
src/components/Login.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Button, Paper, TextField } from "@mui/material";
import { FormEvent } from "react";
export default function Login() {
async function onSubmit(e: FormEvent) {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
const data = Object.fromEntries(formData);
const hello = await fetch(`https://api.ssh.surf/hello`, {
// @ts-ignore
headers: { "x-ssh-auth": data.key },
});
const json = await hello.json();
if (json.message.startsWith("Hello")) {
localStorage.setItem("key", data.key.toString());
localStorage.setItem("hostname", json.message.slice(7).replace("!", ""));
location.reload();
}
}
return (
<Paper
component="form"
autoComplete="off"
onSubmit={onSubmit}
sx={{
display: "flex",
flexDirection: "column",
margin: "auto",
width: 300,
height: 95,
}}
>
<TextField label="API Key" type="password" name="key" variant="filled" />
<Button type="submit">Log in</Button>
</Paper>
);
}

66
src/components/ProcessesTable.tsx Normal file
View File

@ -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>
);
}

10
src/components/WebTerminal.tsx
View File

@ -4,10 +4,12 @@ import { AttachAddon } from "@xterm/addon-attach";
import { FitAddon } from "@xterm/addon-fit"; import { FitAddon } from "@xterm/addon-fit";
import "@xterm/xterm/css/xterm.css"; import "@xterm/xterm/css/xterm.css";
import { useLoaderData } from "react-router"; import { useLoaderData } from "react-router";
import { Container } from "../types"; import { InfoData } from "../types";
export default function WebTerminal() { export default function WebTerminal() {
const container = useLoaderData() as Container; let container = useLoaderData();
container = container.data as InfoData;
const terminalRef = useRef<HTMLDivElement>(null); const terminalRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -17,7 +19,7 @@ export default function WebTerminal() {
const terminal = new Terminal({ rows: 67 }); const terminal = new Terminal({ rows: 67 });
const socket = new WebSocket( const socket = new WebSocket(
`ws://127.0.0.1:3000/containers/${container.id}/terminal`, `ws://127.0.0.1:3000/containers/${container.id}/terminal`, // TODO: Replace this with dlinux ssh connector
); );
const fitAddon = new FitAddon(); const fitAddon = new FitAddon();
@ -56,7 +58,7 @@ export default function WebTerminal() {
terminal.dispose(); terminal.dispose();
}; };
} }
}, []); }, [container]);
return <div ref={terminalRef} style={{ height: "auto" }} />; return <div ref={terminalRef} style={{ height: "auto" }} />;
} }

37
src/main.tsx
View File

@ -3,13 +3,19 @@ import ReactDOM from "react-dom/client";
import App from "./pages/App.tsx"; import App from "./pages/App.tsx";
import "./index.css"; import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router"; import { createBrowserRouter, RouterProvider } from "react-router";
import Containers, { import ContainerPage from "./pages/container/index.tsx";
Loader as ContainersLoader, import TerminalPage from "./pages/container/terminal.tsx";
} from "./pages/containers/index.tsx"; import ProcessesPage from "./pages/container/processes.tsx";
import ContainerPage, {
Loader as ContainerDataLoader, async function loader() {
} from "./pages/containers/[name]/index.tsx"; const info = await fetch(`https://api.ssh.surf/info`, {
import TerminalPage from "./pages/containers/[name]/terminal.tsx"; // @ts-ignore
headers: { "x-ssh-auth": localStorage.getItem("key") },
});
const data = await info.json();
return data;
}
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
@ -18,19 +24,18 @@ const router = createBrowserRouter([
errorElement: <App error />, errorElement: <App error />,
children: [ children: [
{ {
path: "/containers", path: "/container",
element: <Containers />,
loader: ContainersLoader,
},
{
path: "/containers/:name",
element: <ContainerPage />, element: <ContainerPage />,
loader: ContainerDataLoader, loader,
}, },
{ {
path: "/containers/:name/terminal", path: "/container/terminal",
element: <TerminalPage />, element: <TerminalPage />,
loader: ContainerDataLoader, loader,
},
{
path: "/container/processes",
element: <ProcessesPage />,
}, },
], ],
}, },

55
src/pages/App.tsx
View File

@ -5,7 +5,9 @@ import "@fontsource/roboto/700.css";
import { import {
AppBar, AppBar,
Box, Box,
createTheme,
Drawer, Drawer,
FormControlLabel,
Icon, Icon,
IconButton, IconButton,
List, List,
@ -13,28 +15,47 @@ import {
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
Switch,
ThemeProvider,
Toolbar, Toolbar,
Tooltip,
Typography, Typography,
useColorScheme,
} from "@mui/material"; } from "@mui/material";
import * as Icons from "@mui/icons-material"; import * as Icons from "@mui/icons-material";
import { useState } from "react"; import { useState } from "react";
import { Link, Outlet } from "react-router"; import { Link, Outlet } from "react-router";
import ErrorPage from "./Error"; import ErrorPage from "./Error";
import Login from "../components/Login";
interface Item { interface Item {
title: string; title: string;
icon: keyof typeof Icons; icon: keyof typeof Icons;
href: string; href: string;
openInNewTab?: boolean;
} }
const sidebarItems: Item[] = [ const sidebarItems: Item[] = [
{ title: "Containers", icon: "Storage", href: "/containers" }, { title: "Info", icon: "Info", href: "/container" },
{ title: "Terminal", icon: "Terminal", href: "/container/terminal" },
{ title: "Processes", icon: "Memory", href: "/container/processes" },
]; ];
const drawerWidth = 240; const drawerWidth = 240;
const theme = createTheme({
colorSchemes: {
dark: true,
},
});
function App({ error }: { error?: boolean }) { function App({ error }: { error?: boolean }) {
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(false);
const { mode, setMode } = useColorScheme();
if (!mode) {
return null;
}
return ( return (
<> <>
@ -52,8 +73,25 @@ function App({ error }: { error?: boolean }) {
<Icons.Menu /> <Icons.Menu />
</IconButton> </IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Code containers DLinux
</Typography> </Typography>
<FormControlLabel
control={<Switch defaultChecked={mode === "system"} />}
label="Automatic theme"
labelPlacement="start"
onChange={() => setMode(mode === "system" ? "light" : "system")}
/>
{mode != "system" && (
<IconButton
onClick={() => setMode(mode === "dark" ? "light" : "dark")}
>
{mode === "dark" ? (
<Icons.LightMode />
) : (
<Icons.DarkMode htmlColor="#fff" />
)}
</IconButton>
)}
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Drawer <Drawer
@ -74,10 +112,12 @@ function App({ error }: { error?: boolean }) {
<Toolbar /> <Toolbar />
<List> <List>
{sidebarItems.map((item) => ( {sidebarItems.map((item) => (
<Tooltip title={item.title} placement="left" arrow>
<ListItem <ListItem
key={item.title} key={item.title}
component={Link} component={Link}
to={item.href} to={item.href}
target={item.openInNewTab ? "_blank" : "_self"}
disablePadding disablePadding
> >
<ListItemButton> <ListItemButton>
@ -87,6 +127,7 @@ function App({ error }: { error?: boolean }) {
<ListItemText primary={item.title} /> <ListItemText primary={item.title} />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
</Tooltip>
))} ))}
</List> </List>
</Drawer> </Drawer>
@ -96,10 +137,16 @@ function App({ error }: { error?: boolean }) {
sx={{ p: 2, marginLeft: isOpen ? "240px" : "56px" }} sx={{ p: 2, marginLeft: isOpen ? "240px" : "56px" }}
> >
{error && <ErrorPage />} {error && <ErrorPage />}
<Outlet /> {localStorage.getItem("key") ? <Outlet /> : <Login />}
</Box> </Box>
</> </>
); );
} }
export default App; export default function ToggleColorMode() {
return (
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
);
}

61
src/pages/container/index.tsx Normal file
View File

@ -0,0 +1,61 @@
import { useLoaderData, useRevalidator } from "react-router";
import { InfoData } from "../../types";
import { Button, ButtonGroup, Paper, Typography } from "@mui/material";
import { useState } from "react";
import ContainerInfo from "../../components/ContainerInfo";
export default function ContainerPage() {
let container = useLoaderData();
const revalidator = useRevalidator();
const [isPowerStateLocked, setPowerStateLocked] = useState<boolean>();
if (!container.data) {
return "Container not found";
}
container = container.data as InfoData;
return (
<Paper square sx={{ padding: 1 }}>
<Paper sx={{ display: "flex" }} variant="outlined">
<Typography variant="h6" sx={{ flexGrow: 1 }}>
State: {container.state.Status}
</Typography>
<ButtonGroup>
<Button
loading={isPowerStateLocked}
onClick={async () => {
await switchPowerState(
container.state.Status === "running" ? "stop" : "start",
);
}}
>
Power {container.state.Status === "running" ? "off" : "on"}
</Button>
<Button
onClick={async () => await switchPowerState("restart")}
loading={isPowerStateLocked}
disabled={container.state.Status === "exited"}
>
Restart
</Button>
</ButtonGroup>
</Paper>
<ContainerInfo />
</Paper>
);
async function switchPowerState(state: string) {
setPowerStateLocked(true);
const res = await fetch(`https://api.ssh.surf/${state}`, {
// @ts-ignore
headers: { "x-ssh-auth": localStorage.getItem("key") },
});
if (res.ok) {
setPowerStateLocked(false);
revalidator.revalidate();
}
}
}

6
src/pages/container/processes.tsx Normal file
View File

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

25
src/pages/container/terminal.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useLoaderData } from "react-router";
import { InfoData } from "../../types";
import { Paper, Typography } from "@mui/material";
import WebTerminal from "../../components/WebTerminal";
export default function TerminalPage() {
let container = useLoaderData();
if (!container.data) {
return "Container not found";
}
container = container.data as InfoData;
return (
<Paper square sx={{ padding: 1 }}>
<Paper sx={{ display: "flex" }} variant="outlined">
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Terminal: {container.name}
</Typography>
</Paper>
<WebTerminal />
</Paper>
);
}

73
src/pages/containers/[name]/index.tsx
View File

@ -1,73 +0,0 @@
import { useLoaderData, useRevalidator } from "react-router";
import { Container } from "../../../types";
import { Button, ButtonGroup, Paper, Typography } from "@mui/material";
import { useState } from "react";
import ContainerStats from "../../../components/ContainerStats";
interface Params {
name: string;
}
export async function Loader({ params }: { params: Params }) {
const container = await fetch(`/api/containers/${params.name}`);
const data = await container.json();
return data;
}
export default function ContainerPage() {
const container = useLoaderData() as Container & { statusCode: number };
if (container.statusCode === 404) {
return "Container not found";
}
const revalidator = useRevalidator();
const [isPowerStateLocked, setPowerStateLocked] = useState<boolean>();
return (
<Paper square sx={{ padding: 1 }}>
<Paper sx={{ display: "flex" }} variant="outlined">
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Managing: {container.name}
</Typography>
<ButtonGroup>
<Button href={`/containers/${container.name}/terminal`}>
Terminal
</Button>
<Button
loading={isPowerStateLocked}
onClick={async () => {
await switchPowerState(
container.status === "running" ? "stop" : "start",
);
}}
>
Power {container.status === "running" ? "off" : "on"}
</Button>
<Button
onClick={async () => await switchPowerState("restart")}
loading={isPowerStateLocked}
disabled={container.status === "exited"}
>
Restart
</Button>
</ButtonGroup>
</Paper>
<ContainerStats id={container.id} />
</Paper>
);
async function switchPowerState(state: string) {
setPowerStateLocked(true);
const res = await fetch(`/api/containers/${container.name}/${state}`, {
method: "PUT",
});
if (res.ok) {
setPowerStateLocked(false);
revalidator.revalidate();
}
}
}

34
src/pages/containers/[name]/terminal.tsx
View File

@ -1,34 +0,0 @@
import { useLoaderData } from "react-router";
import { Container } from "../../../types";
import { Paper, Typography } from "@mui/material";
import WebTerminal from "../../../components/WebTerminal";
interface Params {
name: string;
}
export async function Loader({ params }: { params: Params }) {
const container = await fetch(`/api/containers/${params.name}`);
const data = await container.json();
return data;
}
export default function TerminalPage() {
const container = useLoaderData() as Container & { statusCode: number };
if (container.statusCode === 404) {
return "Container not found";
}
return (
<Paper square sx={{ padding: 1 }}>
<Paper sx={{ display: "flex" }} variant="outlined">
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Terminal: {container.name}
</Typography>
</Paper>
<WebTerminal />
</Paper>
);
}

55
src/pages/containers/index.tsx
View File

@ -1,55 +0,0 @@
import { useLoaderData } from "react-router";
import { Container } from "../../types";
import {
Button,
Card,
CardActions,
CardContent,
CardHeader,
Grid2 as Grid,
} from "@mui/material";
export async function Loader() {
const containers = await fetch("/api/containers");
const data = await containers.json();
return data;
}
export default function Containers() {
const containers = useLoaderData() as Container[];
return (
<>
<Grid container spacing={2}>
{containers.map((container) => (
<Card key={container.id}>
<CardHeader
title={container.name}
sx={{
textOverflow: "elipsis",
overflow: "hidden",
whiteSpace: "nowrap",
}}
/>
<CardContent>
Image: {container.image}
<br />
Status: {container.status}
</CardContent>
<CardActions>
<Button href={`/containers/${container.name}`}>Manage</Button>
<Button
href={`//${container.name}.${document.location.host}`}
target="_blank"
disabled={container.status === "exited"}
>
Open container
</Button>
</CardActions>
</Card>
))}
</Grid>
</>
);
}

40
src/types.ts
View File

@ -1,7 +1,35 @@
export interface Container { export interface Info {
id: string; success: boolean;
name: string; data: InfoData;
image: string; }
status: string;
ip: string; export interface InfoData {
name: string;
IPAddress: string;
MacAddress: string;
memory: string;
cpus: string;
restartPolicy: { Name: string; MaximumRetryCount: number };
restarts: number;
state: {
Status: string;
Running: boolean;
Paused: boolean;
Restarting: boolean;
OOMKilled: boolean;
Dead: boolean;
Pid: number;
ExitCode: number;
Error: string;
StartedAt: string;
FinishedAt: string;
};
created: string;
image: string;
}
export interface Process {
pid: number;
user: string;
command: string;
} }