[FEATURE] Backups View & Style fix (#22)

Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/22

lib/controllers/s3-controller.js

@@ -0,0 +1,84 @@
+import { S3, GetObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { basename } from "node:path";
+import { getServerEntry } from "../database/queries/server-queries.js";
+import { ERR } from "../util/logging.js";
+import { checkAuthorization } from "../database/queries/server-queries.js";
+const s3Region = "us-east-1";
+
+async function getS3BackupData(serverId) {
+  const serverEntry = await getServerEntry(serverId);
+  if (!serverEntry?.backupHost) return undefined;
+  const s3Config = {
+    credentials: {
+      accessKeyId: serverEntry.backupId,
+      secretAccessKey: serverEntry.backupKey,
+    },
+    endpoint: `https://${serverEntry.backupHost}`,
+    forcePathStyle: true,
+    region: s3Region,
+  };
+  const pathParts = serverEntry.backupPath.split("/");
+  if (pathParts[0] === "") pathParts.shift();
+  const bucket = pathParts.shift();
+  const backupPrefix = pathParts.join("/");
+  return { s3Config, bucket, backupPrefix };
+}
+
+export async function listS3Backups(req, res) {
+  const serverSpec = req.body;
+  if (!serverSpec.id) return res.status(400).send("Server id missing!");
+  const authorized = await checkAuthorization(serverSpec.id, req.cairoId);
+  if (!authorized)
+    return res
+      .status(403)
+      .send("You do not have permission to access that server!");
+  const s3Data = await getS3BackupData(serverSpec.id);
+  if (!s3Data) return res.status(409).send("Backup not configured!");
+  const { s3Config, bucket, backupPrefix } = s3Data;
+  const s3Client = new S3(s3Config);
+  try {
+    const listResponse = await s3Client.listObjectsV2({
+      Bucket: bucket,
+      Prefix: backupPrefix,
+    });
+    const files =
+      listResponse.Contents?.map((f) => ({
+        name: basename(f.Key),
+        lastModified: f.LastModified,
+        path: f.Key,
+        size: f.Size,
+      })) ?? [];
+    res.json(files);
+  } catch (e) {
+    ERR("S3", e);
+    res.sendStatus(500);
+  }
+}
+
+export async function getS3BackupUrl(req, res) {
+  const serverSpec = req.body;
+  if (!serverSpec.id) return res.status(400).send("Server id missing!");
+  if (!serverSpec.backupPath)
+    return res.status(400).send("Backup path missing!");
+  const authorized = await checkAuthorization(serverSpec.id, req.cairoId);
+  if (!authorized)
+    return res
+      .status(403)
+      .send("You do not have permission to access that server!");
+  const s3Data = await getS3BackupData(serverSpec.id);
+  if (!s3Data) return res.status(409).send("Backup not configured!");
+  const { s3Config, bucket } = s3Data;
+  const s3Client = new S3(s3Config);
+  try {
+    const command = new GetObjectCommand({
+      Bucket: bucket,
+      Key: serverSpec.backupPath,
+    });
+    const url = await getSignedUrl(s3Client, command, { expiresIn: 3600 });
+    res.json({ url });
+  } catch (e) {
+    ERR("S3", e);
+    res.sendStatus(500);
+  }
+}

lib/routes/s3-route.js

@@ -0,0 +1,11 @@
+import { Router, json as jsonMiddleware } from "express";
+import { getS3BackupUrl, listS3Backups } from "../controllers/s3-controller.js";
+import cairoAuthMiddleware from "./middlewares/auth-middleware.js";
+
+const router = Router();
+router.use([cairoAuthMiddleware, jsonMiddleware()]);
+
+router.post("/backups", listS3Backups);
+router.post("/backup-url", getS3BackupUrl);
+
+export default router;

lib/server/router.js

@@ -8,6 +8,7 @@ import systemRoute from "../routes/system-route.js";
 import serverRoute from "../routes/server-route.js";
 import filesRoute from "../routes/files-route.js";
 import reactRoute from "../routes/react-route.js";
+import s3Route from "../routes/s3-route.js";
 import {
   logErrors,
   clientErrorHandler,
@@ -27,6 +28,7 @@ export default function buildRoutes(pg, skio) {
   router.use("/api/system", systemRoute);
   router.use("/api/server", serverRoute);
   router.use("/api/files", filesRoute);
+  router.use("/api/s3", s3Route);
   router.use(["/mcl", "/mcl/*"], reactRoute); // Static Build Route
   /*router.use(logErrors);
   router.use(clientErrorHandler);

package.json

@@ -42,8 +42,9 @@
     "vite": "^5.1.1"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.529.1",
+    "@aws-sdk/s3-request-presigner": "^3.529.1",
     "@kubernetes/client-node": "^0.20.0",
-    "aws-sdk": "^2.1555.0",
     "basic-ftp": "^5.0.4",
     "bcrypt": "^5.1.1",
     "chalk": "^5.3.0",

src/components/servers/BackupsDialog.jsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from "react";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+import Button from "@mui/material/Button";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Dialog from "@mui/material/Dialog";
+import IconButton from "@mui/material/IconButton";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import DownloadIcon from "@mui/icons-material/Download";
+import { getBackupUrl, getServerBackups } from "../../util/queries";
+
+export function useBackupDialog(isOpen = false) {
+  const [open, setOpen] = useState(isOpen);
+  const dialogToggle = () => setOpen(!open);
+  return [open, dialogToggle];
+}
+
+export default function BackupDialog(props) {
+  const { serverId, open, dialogToggle } = props;
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
+  const [backups, setBackups] = useState([]);
+
+  function refreshUpdateList() {
+    getServerBackups(serverId).then(setBackups);
+  }
+  useEffect(() => {
+    if (!serverId) return;
+    refreshUpdateList();
+  }, [serverId, open]);
+
+  function normalizeLastModified(lastModified) {
+    const d = new Date(Date.parse(lastModified));
+    return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}`;
+  }
+
+  const downloadBackup = (backup) =>
+    async function openBackupLink() {
+      const { url } = await getBackupUrl(serverId, backup.path);
+      window.open(url, "_blank").focus();
+    };
+
+  const normalizedSize = (size) => `${(size / Math.pow(1024, 3)).toFixed(2)}GB`;
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="lg"
+      open={open}
+      fullScreen={fullScreen}
+      PaperProps={!fullScreen ? { sx: { height: "60%" } } : undefined}
+    >
+      <Toolbar sx={{ display: { md: "none" } }} />
+      <DialogTitle>Backups</DialogTitle>
+      <DialogContent sx={{ height: "100%" }}>
+        {backups.map((backup, i) => (
+          <Stack key={i} sx={{ width: "100%" }} direction="row">
+            <Typography variant="subtitle2" sx={{ m: "auto 0", width: "40%" }}>
+              {backup.name}
+            </Typography>
+            <Typography variant="subtitle2" sx={{ m: "auto 0", width: "20%" }}>
+              {normalizeLastModified(backup.lastModified)}
+            </Typography>
+            <Typography variant="subtitle2" sx={{ m: "auto 0", width: "40%" }}>
+              {normalizedSize(backup.size)}
+            </Typography>
+
+            <IconButton
+              sx={{ marginLeft: "auto" }}
+              onClick={downloadBackup(backup)}
+            >
+              <DownloadIcon />
+            </IconButton>
+          </Stack>
+        ))}
+      </DialogContent>
+      <DialogActions>
+        <Button autoFocus onClick={dialogToggle}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/components/servers/RconView.jsx

@@ -61,6 +61,7 @@ export default function RconView(props) {
           color: "white",
           borderRadius: "4px",
           width: "100%",
+          height: "100%",
         }}
       >
         {logs.length === 0 &&

src/components/servers/ServerCard.jsx

@@ -14,10 +14,11 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import EditIcon from "@mui/icons-material/Edit";
 import FolderIcon from "@mui/icons-material/Folder";
+import BackupIcon from "@mui/icons-material/Backup";
 import { Link } from "react-router-dom";
 
 export default function ServerCard(props) {
-  const { server, openRcon } = props;
+  const { server, openRcon, openBackups } = props;
   const { name, id, metrics, ftpAvailable, serverAvailable, services } = server;
   const startServer = useStartServer(id);
   const stopServer = useStopServer(id);
@@ -117,6 +118,14 @@ export default function ServerCard(props) {
           >
             <EditIcon />
           </IconButton>
+          <IconButton
+            color="info"
+            aria-label="Backups"
+            size="large"
+            onClick={openBackups}
+          >
+            <BackupIcon />
+          </IconButton>
           <IconButton
             color="info"
             aria-label="Files"

src/pages/Home.jsx

@@ -12,12 +12,16 @@ import SpeedDialIcon from "@mui/material/SpeedDialIcon";
 import "@mcl/css/server-card.css";
 import "@mcl/css/overview.css";
 import { useServerInstances } from "@mcl/queries";
+import BackupDialog, {
+  useBackupDialog,
+} from "../components/servers/BackupsDialog";
 
 export default function Home() {
   const clusterMetrics = { cpu: 0, memory: 0 };
   const [server, setServer] = useState();
   const [servers, setServers] = useState([]);
   const [rdOpen, rconToggle] = useRconDialog();
+  const [bkOpen, backupsToggle] = useBackupDialog();
   const { isLoading, data: serversData } = useServerInstances();
   const serverInstances = serversData ?? [];
   useEffect(() => {
@@ -31,6 +35,11 @@ export default function Home() {
     rconToggle();
   };
 
+  const openBackups = (s) => () => {
+    setServer(s);
+    backupsToggle();
+  };
+
   return (
     <Box className="home">
       <Overview clusterMetrics={clusterMetrics} />
@@ -51,10 +60,20 @@ export default function Home() {
       <Box className="servers">
         {!isLoading &&
           servers.map((s, k) => (
-            <ServerCard key={k} server={s} openRcon={openRcon(s)} />
+            <ServerCard
+              key={k}
+              server={s}
+              openRcon={openRcon(s)}
+              openBackups={openBackups(s)}
+            />
           ))}
       </Box>
       <RconDialog open={rdOpen} dialogToggle={rconToggle} server={server} />
+      <BackupDialog
+        open={bkOpen}
+        dialogToggle={backupsToggle}
+        serverId={server?.id}
+      />
       <Button
         component={Link}
         to="/mcl/create"

src/util/queries.js

@@ -54,6 +54,11 @@ export const useGetServer = (serverId) =>
     queryFn: fetchApiPost("/server/blueprint", { id: serverId }),
   });
 
+export const getServerBackups = (serverId) =>
+  fetchApiCore("/s3/backups", { id: serverId }, "POST", true);
+export const getBackupUrl = (serverId, backupPath) =>
+  fetchApiCore("/s3/backup-url", { id: serverId, backupPath }, "POST", true);
+
 export const getServerFiles = async (serverId, path) =>
   fetchApiCore("/files/list", { id: serverId, path }, "POST", true);
 export const createServerFolder = async (serverId, path) =>