[FEATURE] Initial FS traversal

lib/controllers/file-controller.js

@@ -6,6 +6,19 @@ export async function listFiles(req, res) {
   if (!serverSpec) return res.sendStatus(400);
   if (!serverSpec.name) return res.status(400).send("Server name required!");
   listServerFiles(serverSpec)
-    .then(() => res.sendStatus(200))
+    .then((f) => {
+      const fileData = f.map((fi, i) => ({
+        name: fi.name,
+        isDir: fi.type === 2,
+        id: `${fi.name}-${i}`,
+        isHidden: fi.name.startsWith("."),
+        isSymLink: !!fi.link,
+        size: fi.size,
+      }));
+      console.log(fileData);
+      res.json(fileData);
+    })
     .catch(sendError(res));
 }
+
+export async function uploadFile(req, res) {}

lib/k8s/server-create.js

@@ -179,7 +179,7 @@ export default async function createServerResources(serverSpec) {
   const deploymentRes = await k8sDeps.listNamespacedDeployment(namespace);
   const deployments = deploymentRes.body.items.map((i) => i.metadata.name);
   if (deployments.includes(`mcl-${serverSpec.name}`))
-    throw new ExpressClientError({m: "Server already exists!", c: 409 });
+    throw new ExpressClientError({ m: "Server already exists!", c: 409 });
   const pvcRes = await k8sCore.listNamespacedPersistentVolumeClaim(namespace);
   const pvcs = pvcRes.body.items.map((i) => i.metadata.name);
   if (pvcs.includes(`mcl-${serverSpec.name}-volume`))

lib/k8s/server-files.js

@@ -25,7 +25,7 @@ const handleError = (e) => {
 };
 
 export async function listServerFiles(serverSpec) {
-  const { name } = serverSpec;
+  const { name, dir } = serverSpec;
   const server = await getServerAssets(name);
   if (!server)
     throw new ExpressClientError({
@@ -40,9 +40,12 @@ export async function listServerFiles(serverSpec) {
 
   // FTP Operations;
   const client = await useFtp(server.service).catch(handleError);
-  await client
+  const files = client
-    .list()
+    .list(dir)
-    .then((f) => res.json(f))
+    .then((f) => {
-    .catch(handleError);
       client.close();
+      return f;
+    })
+    .catch(handleError);
+  return files;
 }

package.json

@@ -43,6 +43,8 @@
     "basic-ftp": "^5.0.4",
     "bcrypt": "^5.1.1",
     "chalk": "^5.3.0",
+    "chonky": "^2.3.2",
+    "chonky-icon-fontawesome": "^2.3.2",
     "express": "^4.18.2",
     "figlet": "^1.7.0",
     "js-yaml": "^4.1.0",

src/components/edit/MineclusterFiles.jsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+import {
+  FileBrowser,
+  FileContextMenu,
+  FileList,
+  FileNavbar,
+  FileToolbar,
+  setChonkyDefaults,
+} from "chonky";
+import { ChonkyIconFA } from "chonky-icon-fontawesome";
+
+import { getServerFiles } from "@mcl/queries";
+
+export default function MineclusterFiles(props) {
+  setChonkyDefaults({ iconComponent: ChonkyIconFA });
+  const { server: serverName } = props;
+  const [dirStack, setDirStack] = useState(["."]);
+  const [files, setFiles] = useState([]);
+  useEffect(() => {
+    getServerFiles(serverName, dirStack.join("/")).then((f) =>
+      setFiles(f ?? []),
+    );
+  }, [dirStack]);
+
+  const getFolderChain = () => {
+    if (dirStack.length === 1) return [{ id: "home", name: "/", isDir: true }];
+    return dirStack.map((d, i) => ({ id: `${d}-${i}`, name: d, isDir: true }));
+  };
+
+  function fileClick(chonkyEvent) {
+    const { id: clickEvent, payload } = chonkyEvent;
+    console.log(chonkyEvent);
+    if (clickEvent === `open_parent_folder`)
+      return setDirStack(dirStack.slice(0, -1));
+    if (clickEvent !== `open_files`) return console.log(clickEvent);
+    const { targetFile: file } = payload;
+    if (!file || !file.isDir) return;
+    setDirStack([...dirStack, file.name]);
+  }
+  return (
+    <Box className="minecluster-files" sx={{ height: "calc(100vh - 6rem)" }}>
+      <FileBrowser
+        files={files}
+        folderChain={getFolderChain()}
+        onFileAction={fileClick}
+      >
+        <FileNavbar />
+        <FileToolbar />
+        <FileList />
+        <FileContextMenu />
+      </FileBrowser>
+    </Box>
+  );
+}

src/components/servers/ServerCard.jsx

@@ -14,6 +14,8 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PendingIcon from "@mui/icons-material/Pending";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 import EditIcon from "@mui/icons-material/Edit";
+import FolderIcon from "@mui/icons-material/Folder";
+import { Link } from "react-router-dom";
 
 export default function ServerCard(props) {
   const { server, openRcon } = props;
@@ -94,9 +96,24 @@ export default function ServerCard(props) {
           >
             <TerminalIcon />
           </IconButton>
-          <IconButton color="primary" aria-label="Edit" size="large">
+          <IconButton
+            color="primary"
+            aria-label="Edit"
+            size="large"
+            component={Link}
+            to={`/mcl/edit?server=${name}`}
+          >
             <EditIcon />
           </IconButton>
+          <IconButton
+            color="primary"
+            aria-label="Files"
+            size="large"
+            component={Link}
+            to={`/mcl/files?server=${name}`}
+          >
+            <FolderIcon />
+          </IconButton>
           <IconButton
             color="error"
             aria-label="Delete Server"

src/nav/MCLPages.jsx

@@ -1,5 +1,6 @@
 import Home from "@mcl/pages/Home.jsx";
 import Create from "@mcl/pages/Create.jsx";
+import Files from "@mcl/pages/Files.jsx";
 // Go To https://mui.com/material-ui/material-icons/ for more!
 import HomeIcon from "@mui/icons-material/Home";
 import AddIcon from "@mui/icons-material/Add";
@@ -17,4 +18,10 @@ export default [
     icon: <AddIcon />,
     component: <Create />,
   },
+  {
+    name: "Edit",
+    path: "/mcl/files",
+    icon: <AddIcon />,
+    component: <Files />,
+  },
 ];

src/pages/Files.jsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Toolbar from "@mui/material/Toolbar";
+import MineclusterFiles from "@mcl/components/edit/MineclusterFiles.jsx";
+
+export default function Files() {
+  const [searchParams] = useSearchParams();
+  const currentServer = searchParams.get("server");
+  const nav = useNavigate();
+  useEffect(() => {
+    if (!currentServer) nav("/");
+  }, [currentServer]);
+  return (
+    <Box className="edit" sx={{ height: "100%" }}>
+      <MineclusterFiles server={currentServer} />
+    </Box>
+  );
+}

src/util/queries.js

@@ -30,6 +30,15 @@ export const useDeleteServer = (server) =>
   postJsonApi("/server/delete", { name: server }, "server-instances", "DELETE");
 export const useCreateServer = (spec) =>
   postJsonApi("/server/create", spec, "server-list");
+
+export const getServerFiles = async (server, dir) =>
+  fetchApiPost("/files/list", { name: server, dir })();
+
+export const useInvalidator = () => {
+  const qc = useQueryClient();
+  return (q) => qc.invalidateQueries([q]);
+};
+
 export const useServerList = () =>
   useQuery({ queryKey: ["server-list"], queryFn: fetchApi("/server/list") });
 export const useServerInstances = () =>
@@ -63,5 +72,6 @@ const postJsonApi = (subPath, body, invalidate, method = "POST") => {
       body: JSON.stringify(body),
     });
     qc.invalidateQueries([invalidate]);
+    return res.json();
   };
 };