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" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code containers</title>
<title>DLinux</title>
</head>
<body>
<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 "@xterm/xterm/css/xterm.css";
import { useLoaderData } from "react-router";
import { Container } from "../types";
import { InfoData } from "../types";
export default function WebTerminal() {
const container = useLoaderData() as Container;
const terminalRef = useRef<HTMLDivElement>(null);
let container = useLoaderData();
container = container.data as InfoData;
useEffect(() => {
document.title = `Terminal: ${container.name}`;
const terminalRef = useRef<HTMLDivElement>(null);
if (terminalRef.current) {
const terminal = new Terminal({ rows: 67 });
useEffect(() => {
document.title = `Terminal: ${container.name}`;
const socket = new WebSocket(
`ws://127.0.0.1:3000/containers/${container.id}/terminal`,
);
if (terminalRef.current) {
const terminal = new Terminal({ rows: 67 });
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
const socket = new WebSocket(
`ws://127.0.0.1:3000/containers/${container.id}/terminal`,
);
terminal.open(terminalRef.current);
fitAddon.fit();
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminal.write("Connecting to the container\r\n");
terminal.open(terminalRef.current);
fitAddon.fit();
socket.onopen = () => {
const attachAddon = new AttachAddon(socket);
terminal.loadAddon(attachAddon);
terminal.write("Connecting to the container\r\n");
terminal.clear();
terminal.focus();
socket.onopen = () => {
const attachAddon = new AttachAddon(socket);
terminal.loadAddon(attachAddon);
socket.send(
JSON.stringify({
rows: terminal.rows,
cols: terminal.cols,
}),
);
};
terminal.clear();
terminal.focus();
window.addEventListener("resize", () => {
fitAddon.fit();
});
socket.send(
JSON.stringify({
rows: terminal.rows,
cols: terminal.cols,
}),
);
};
terminal.onResize(({ rows, cols }) => {
socket.send(JSON.stringify({ rows, cols }));
});
window.addEventListener("resize", () => {
fitAddon.fit();
});
return () => {
socket.close();
terminal.dispose();
};
}
}, []);
terminal.onResize(({ rows, cols }) => {
socket.send(JSON.stringify({ rows, cols }));
});
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 "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router";
import Containers, {
Loader as ContainersLoader,
} from "./pages/containers/index.tsx";
import ContainerPage, {
Loader as ContainerDataLoader,
} from "./pages/containers/[name]/index.tsx";
import TerminalPage from "./pages/containers/[name]/terminal.tsx";
import ContainerPage from "./pages/container/index.tsx";
import TerminalPage from "./pages/container/terminal.tsx";
async function loader() {
const info = await fetch(`https://api.ssh.surf/info`, {
headers: { "x-ssh-auth": localStorage.getItem("key") },
});
const data = await info.json();
return data;
}
const router = createBrowserRouter([
{
path: "/",
element: <App />,
errorElement: <App error />,
children: [
{
path: "/containers",
element: <Containers />,
loader: ContainersLoader,
},
{
path: "/containers/:name",
element: <ContainerPage />,
loader: ContainerDataLoader,
},
{
path: "/containers/:name/terminal",
element: <TerminalPage />,
loader: ContainerDataLoader,
},
],
},
{
path: "/",
element: <App />,
errorElement: <App error />,
children: [
{
path: "/container",
element: <ContainerPage />,
loader,
},
{
path: "/container/terminal",
element: <TerminalPage />,
loader,
},
],
},
]);
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>,
<React.StrictMode>
<RouterProvider router={router} />
</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/700.css";
import {
AppBar,
Box,
Drawer,
Icon,
IconButton,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Toolbar,
Typography,
AppBar,
Box,
Drawer,
Icon,
IconButton,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Toolbar,
Typography,
} from "@mui/material";
import * as Icons from "@mui/icons-material";
import { useState } from "react";
import { Link, Outlet } from "react-router";
import ErrorPage from "./Error";
import Login from "../components/Login";
interface Item {
title: string;
icon: keyof typeof Icons;
href: string;
title: string;
icon: keyof typeof Icons;
href: string;
}
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;
function App({ error }: { error?: boolean }) {
const [isOpen, setOpen] = useState(false);
const [isOpen, setOpen] = useState(false);
return (
<>
<AppBar
position="fixed"
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
>
<Toolbar>
<IconButton
onClick={() => setOpen(!isOpen)}
size="large"
color="inherit"
sx={{ mr: 2 }}
>
<Icons.Menu />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Code containers
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
sx={{
width: isOpen ? drawerWidth : 56,
"& .MuiDrawer-paper": {
width: isOpen ? drawerWidth : 56,
overflowX: "hidden",
transition: (theme) =>
theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
}}
>
<Toolbar />
<List>
{sidebarItems.map((item) => (
<ListItem
key={item.title}
component={Link}
to={item.href}
disablePadding
>
<ListItemButton>
<ListItemIcon>
<Icon component={Icons[item.icon]} />
</ListItemIcon>
<ListItemText primary={item.title} />
</ListItemButton>
</ListItem>
))}
</List>
</Drawer>
<Toolbar />
<Box
component="main"
sx={{ p: 2, marginLeft: isOpen ? "240px" : "56px" }}
>
{error && <ErrorPage />}
<Outlet />
</Box>
</>
);
return (
<>
<AppBar
position="fixed"
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
>
<Toolbar>
<IconButton
onClick={() => setOpen(!isOpen)}
size="large"
color="inherit"
sx={{ mr: 2 }}
>
<Icons.Menu />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
DLinux
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
sx={{
width: isOpen ? drawerWidth : 56,
"& .MuiDrawer-paper": {
width: isOpen ? drawerWidth : 56,
overflowX: "hidden",
transition: (theme) =>
theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
}}
>
<Toolbar />
<List>
{sidebarItems.map((item) => (
<ListItem
key={item.title}
component={Link}
to={item.href}
disablePadding
>
<ListItemButton>
<ListItemIcon>
<Icon component={Icons[item.icon]} />
</ListItemIcon>
<ListItemText primary={item.title} />
</ListItemButton>
</ListItem>
))}
</List>
</Drawer>
<Toolbar />
<Box
component="main"
sx={{ p: 2, marginLeft: isOpen ? "240px" : "56px" }}
>
{error && <ErrorPage />}
{localStorage.getItem("key") ? <Outlet /> : <Login />}
</Box>
</>
);
}
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 { Container } from "../../../types";
import { Container } from "../../types";
import { Paper, Typography } from "@mui/material";
import WebTerminal from "../../../components/WebTerminal";
import WebTerminal from "../../components/WebTerminal";
interface Params {
name: string;
}
export async function Loader() {
const info = await fetch(`https://api.ssh.surf/info`, {
headers: { "x-ssh-auth": localStorage["key"] },
});
export async function Loader({ params }: { params: Params }) {
const container = await fetch(`/api/containers/${params.name}`);
const data = await container.json();
return data;
const data = await info.json();
return data;
}
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 {
id: string;
name: string;
image: string;
status: string;
ip: string;
export interface Info {
success: boolean;
data: InfoData;
}
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;
}