Cyber/dlinux-dashboard
1
1
Fork 0
mirror of https://github.com/CyberL1/dlinux-dashboard.git synced 2025-01-21 17:09:19 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: connecting to the dlinux api

Browse Source
This commit is contained in:
CyberL1 2025-01-16 13:30:01 +01:00
parent 81bf5fb6af
commit e47e87199f
12 changed files with 318 additions and 334 deletions
Show Stats Download Patch File Download Diff File 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>

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

@ -0,0 +1,25 @@
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`, {
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>);
}

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

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

@ -0,0 +1,40 @@
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`, {
headers: { "x-ssh-auth": data.key },
});
const json = await hello.json();
if (json.message.startsWith("Hello")) {
localStorage.setItem("key", data.key.toString());
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>
);
}

82
src/components/WebTerminal.tsx
View File

@ -4,59 +4,61 @@ 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();
const terminalRef = useRef<HTMLDivElement>(null); container = container.data as InfoData;
useEffect(() => { const terminalRef = useRef<HTMLDivElement>(null);
document.title = `Terminal: ${container.name}`;
if (terminalRef.current) { useEffect(() => {
const terminal = new Terminal({ rows: 67 }); document.title = `Terminal: ${container.name}`;
const socket = new WebSocket( if (terminalRef.current) {
`ws://127.0.0.1:3000/containers/${container.id}/terminal`, const terminal = new Terminal({ rows: 67 });
);
const fitAddon = new FitAddon(); const socket = new WebSocket(
terminal.loadAddon(fitAddon); `ws://127.0.0.1:3000/containers/${container.id}/terminal`,
);
terminal.open(terminalRef.current); const fitAddon = new FitAddon();
fitAddon.fit(); terminal.loadAddon(fitAddon);
terminal.write("Connecting to the container\r\n"); terminal.open(terminalRef.current);
fitAddon.fit();
socket.onopen = () => { terminal.write("Connecting to the container\r\n");
const attachAddon = new AttachAddon(socket);
terminal.loadAddon(attachAddon);
terminal.clear(); socket.onopen = () => {
terminal.focus(); const attachAddon = new AttachAddon(socket);
terminal.loadAddon(attachAddon);
socket.send( terminal.clear();
JSON.stringify({ terminal.focus();
rows: terminal.rows,
cols: terminal.cols,
}),
);
};
window.addEventListener("resize", () => { socket.send(
fitAddon.fit(); JSON.stringify({
}); rows: terminal.rows,
cols: terminal.cols,
}),
);
};
terminal.onResize(({ rows, cols }) => { window.addEventListener("resize", () => {
socket.send(JSON.stringify({ rows, cols })); fitAddon.fit();
}); });
return () => { terminal.onResize(({ rows, cols }) => {
socket.close(); socket.send(JSON.stringify({ rows, cols }));
terminal.dispose(); });
};
}
}, []);
return <div ref={terminalRef} style={{ height: "auto" }} />; return () => {
socket.close();
terminal.dispose();
};
}
}, []);
return <div ref={terminalRef} style={{ height: "auto" }} />;
} }

63
src/main.tsx
View File

@ -3,41 +3,40 @@ 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 ContainerPage, { async function loader() {
Loader as ContainerDataLoader, const info = await fetch(`https://api.ssh.surf/info`, {
} from "./pages/containers/[name]/index.tsx"; headers: { "x-ssh-auth": localStorage.getItem("key") },
import TerminalPage from "./pages/containers/[name]/terminal.tsx"; });
const data = await info.json();
return data;
}
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
path: "/", path: "/",
element: <App />, element: <App />,
errorElement: <App error />, errorElement: <App error />,
children: [ children: [
{ {
path: "/containers", path: "/container",
element: <Containers />, element: <ContainerPage />,
loader: ContainersLoader, loader,
}, },
{ {
path: "/containers/:name", path: "/container/terminal",
element: <ContainerPage />, element: <TerminalPage />,
loader: ContainerDataLoader, loader,
}, },
{ ],
path: "/containers/:name/terminal", },
element: <TerminalPage />,
loader: ContainerDataLoader,
},
],
},
]); ]);
ReactDOM.createRoot(document.getElementById("root")!).render( ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode> <React.StrictMode>
<RouterProvider router={router} /> <RouterProvider router={router} />
</React.StrictMode>, </React.StrictMode>,
); );

164
src/pages/App.tsx
View File

@ -3,103 +3,105 @@ import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css"; import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css"; import "@fontsource/roboto/700.css";
import { import {
AppBar, AppBar,
Box, Box,
Drawer, Drawer,
Icon, Icon,
IconButton, IconButton,
List, List,
ListItem, ListItem,
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
Toolbar, Toolbar,
Typography, Typography,
} 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;
} }
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" },
]; ];
const drawerWidth = 240; const drawerWidth = 240;
function App({ error }: { error?: boolean }) { function App({ error }: { error?: boolean }) {
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(false);
return ( return (
<> <>
<AppBar <AppBar
position="fixed" position="fixed"
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
> >
<Toolbar> <Toolbar>
<IconButton <IconButton
onClick={() => setOpen(!isOpen)} onClick={() => setOpen(!isOpen)}
size="large" size="large"
color="inherit" color="inherit"
sx={{ mr: 2 }} sx={{ mr: 2 }}
> >
<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>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Drawer <Drawer
variant="permanent" variant="permanent"
sx={{ sx={{
width: isOpen ? drawerWidth : 56, width: isOpen ? drawerWidth : 56,
"& .MuiDrawer-paper": { "& .MuiDrawer-paper": {
width: isOpen ? drawerWidth : 56, width: isOpen ? drawerWidth : 56,
overflowX: "hidden", overflowX: "hidden",
transition: (theme) => transition: (theme) =>
theme.transitions.create("width", { theme.transitions.create("width", {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
}, },
}} }}
> >
<Toolbar /> <Toolbar />
<List> <List>
{sidebarItems.map((item) => ( {sidebarItems.map((item) => (
<ListItem <ListItem
key={item.title} key={item.title}
component={Link} component={Link}
to={item.href} to={item.href}
disablePadding disablePadding
> >
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<Icon component={Icons[item.icon]} /> <Icon component={Icons[item.icon]} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={item.title} /> <ListItemText primary={item.title} />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
))} ))}
</List> </List>
</Drawer> </Drawer>
<Toolbar /> <Toolbar />
<Box <Box
component="main" component="main"
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 App;

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

@ -0,0 +1,60 @@
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();
if (!container.data) {
return "Container not found";
}
container = container.data as InfoData;
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
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(`/api/containers/${container.name}/${state}`, {
method: "PUT",
});
if (res.ok) {
setPowerStateLocked(false);
revalidator.revalidate();
}
}
}

18
src/pages/containers/[name]/terminal.tsx → src/pages/container/terminal.tsx
View File

@ -1,17 +1,15 @@
import { useLoaderData } from "react-router"; import { useLoaderData } from "react-router";
import { Container } from "../../../types"; import { Container } from "../../types";
import { Paper, Typography } from "@mui/material"; import { Paper, Typography } from "@mui/material";
import WebTerminal from "../../../components/WebTerminal"; import WebTerminal from "../../components/WebTerminal";
interface Params { export async function Loader() {
name: string; const info = await fetch(`https://api.ssh.surf/info`, {
} headers: { "x-ssh-auth": localStorage["key"] },
});
export async function Loader({ params }: { params: Params }) { const data = await info.json();
const container = await fetch(`/api/containers/${params.name}`); return data;
const data = await container.json();
return data;
} }
export default function TerminalPage() { export default function TerminalPage() {

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

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

34
src/types.ts
View File

@ -1,7 +1,29 @@
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;
} }