[FEATURE] Fixed file manager and adjusted starting display (#5)

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

lib/k8s/server-control.js

@@ -11,7 +11,6 @@ const kc = new k8s.KubeConfig();
 kc.loadFromDefault();
 
 const k8sMetrics = new k8s.Metrics(kc);
-const k8sDeps = kc.makeApiClient(k8s.AppsV1Api);
 const namespace = process.env.MCL_SERVER_NAMESPACE;
 
 export async function startServerContainer(serverSpec) {
@@ -43,17 +42,26 @@ export async function stopServerContainer(serverSpec) {
 export async function getInstances() {
   const serverDeployments = await getDeployments();
   const podMetricsResponse = await k8sMetrics.getPodMetrics(namespace);
-  var name, metrics, started;
+  var name, metrics, services, serverAvailable, ftpAvailable;
   const serverInstances = serverDeployments.map((s) => {
     name = s.metadata.annotations["minecluster.dunemask.net/server-name"];
     metrics = null;
-    started = !!s.spec.template.spec.containers.find((c) =>
+    const { containers } = s.spec.template.spec;
-      c.name.includes(`mcl-${name}-server`),
+    services = containers.map(({ name }) => name.split("-").pop());
+    const serverStatusList = s.status.conditions.map(
+      ({ type: statusType, status: sts }) => ({ statusType, sts }),
     );
+    const deploymentAvailable =
+      serverStatusList.find(
+        (ss) => ss.statusType === "Available" && ss.sts === "True",
+      ) !== undefined;
+    serverAvailable = services.includes(`server`) && deploymentAvailable;
+    ftpAvailable = services.includes("ftp") && deploymentAvailable;
+
     const pod = podMetricsResponse.items.find(({ metadata: md }) => {
       return md.labels && md.labels.app && md.labels.app === `mcl-${name}-app`;
     });
-    if (started && pod) {
+    if (serverAvailable && pod) {
       const podCpus = pod.containers.map(
         ({ usage }) => parseInt(usage.cpu) / 1_000_000,
       );
@@ -65,7 +73,7 @@ export async function getInstances() {
         memory: Math.ceil(podMems.reduce((a, b) => a + b)),
       };
     }
-    return { name, metrics, started };
+    return { name, metrics, services, serverAvailable, ftpAvailable };
   });
   return serverInstances;
 }

src/components/files/MineclusterFiles.jsx

@@ -38,26 +38,33 @@ export default function MineclusterFiles(props) {
   const [dirStack, setDirStack] = useState(["."]);
   const [files, setFiles] = useState([]);
 
-  const updateFiles = () =>
+  const updateFiles = () => {
-    getServerFiles(serverName, dirStack.join("/")).then((f) =>
+    const dir = dirStack.join("/");
-      setFiles(f ?? []),
+    getServerFiles(serverName, dir).then((f) => {
-    );
+      const files = f.map((fi) => ({ ...fi, id: `${dir}/${fi.name}` }));
+      setFiles(files ?? []);
+    });
+  };
 
   useEffect(() => {
     updateFiles();
   }, [dirStack]);
 
   const getFolderChain = () => {
-    if (dirStack.length === 1) return [{ id: "home", name: "/", isDir: true }];
+    if (dirStack.length === 1) return [{ id: "./", name: "Home", isDir: true }];
-    return dirStack.map((d, i) => ({ id: `${d}-${i}`, name: d, isDir: true }));
+    return dirStack.map((d, i) => ({
+      id: `${dirStack.slice(0, i + 1).join("/")}`,
+      name: i === 0 ? "Home" : d,
+      isDir: true,
+    }));
   };
 
   const openParentFolder = () => setDirStack(dirStack.slice(0, -1));
 
   function openFolder(payload) {
     const { targetFile: file } = payload;
-    if (!file || !file.isDir) return;
+    if (file && file.isDir) return setDirStack(file.id.split("/"));
-    setDirStack([...dirStack, file.name]);
+    if (file && !file.isDir) return downloadFiles([file]);
   }
 
   function createFolder() {
@@ -101,13 +108,12 @@ export default function MineclusterFiles(props) {
         getServerItem(serverName, f.name, [...dirStack, f.name].join("/")),
       ),
     )
-      .then(() => console.log("Done"))
+      .then(() => console.log("Done downloading files!"))
       .catch((e) => console.error("Error Downloading files!", e));
   }
 
   function fileClick(chonkyEvent) {
     const { id: clickEvent, payload } = chonkyEvent;
-    console.log(chonkyEvent);
     if (clickEvent === "open_parent_folder") return openParentFolder();
     if (clickEvent === "create_folder") return createFolder();
     if (clickEvent === "upload_files") return inputRef.current.click();
@@ -115,7 +121,7 @@ export default function MineclusterFiles(props) {
       return downloadFiles(chonkyEvent.state.selectedFilesForAction);
     if (clickEvent === "delete_files")
       return deleteItems(chonkyEvent.state.selectedFilesForAction);
-    if (clickEvent !== "open_files") return console.log(clickEvent);
+    if (clickEvent !== "open_files") return; // console.log(clickEvent);
     openFolder(payload);
   }
   return (

src/components/servers/ServerCard.jsx

@@ -19,12 +19,12 @@ import { Link } from "react-router-dom";
 
 export default function ServerCard(props) {
   const { server, openRcon } = props;
-  const { name, metrics, started } = server;
+  const { name, metrics, ftpAvailable, serverAvailable, services } = server;
   const startServer = useStartServer(name);
   const stopServer = useStopServer(name);
   const deleteServer = useDeleteServer(name);
   function toggleRcon() {
-    if (!started) return;
+    if (!services.includes("server")) return;
     openRcon();
   }
 
@@ -60,14 +60,26 @@ export default function ServerCard(props) {
           </Box>
         )}
         <Chip
-          label={started ? "Online" : "Offline"}
+          label={
-          color={started ? "success" : "error"}
+            services.includes("server")
+              ? serverAvailable
+                ? "Online"
+                : "Starting"
+              : "Offline"
+          }
+          color={
+            services.includes("server")
+              ? serverAvailable
+                ? "success"
+                : "info"
+              : "error"
+          }
           className="server-card-status-indicator"
         />
       </CardContent>
       <div className="server-card-actions-wrapper">
         <CardActions className="server-card-actions server-card-element">
-          {started && (
+          {services.includes("server") && (
             <IconButton
               color="error"
               aria-label="Stop Server"
@@ -77,7 +89,7 @@ export default function ServerCard(props) {
               <StopIcon />
             </IconButton>
           )}
-          {!started && (
+          {!services.includes("server") && (
             <IconButton
               color="success"
               aria-label="Start Server"
@@ -92,7 +104,7 @@ export default function ServerCard(props) {
             aria-label="RCON"
             onClick={toggleRcon}
             size="large"
-            disabled={!started}
+            disabled={!services.includes("server")}
           >
             <TerminalIcon />
           </IconButton>
@@ -106,11 +118,12 @@ export default function ServerCard(props) {
             <EditIcon />
           </IconButton>
           <IconButton
-            color="primary"
+            color="info"
             aria-label="Files"
             size="large"
             component={Link}
             to={`/mcl/files?server=${name}`}
+            disabled={!services.includes("ftp")}
           >
             <FolderIcon />
           </IconButton>

src/css/header.css

@@ -23,7 +23,7 @@
   right: 0;
   color: rgba(0, 0, 0, 0.87);
   z-index: 1302;
-  background-color: black;
+  background-color: #29985c;
 }
 .view > header > div > div > a {
   height: 40px;

src/nav/MCLMenu.jsx

@@ -36,12 +36,7 @@ export default function MCLMenu() {
     theme.zIndex.modal + 2 - (isDrawer ? 1 : 0);
 
   return (
-    <AppBar
+    <AppBar position="fixed" color="primary" sx={{ zIndex: drawerIndex() }}>
-      position="fixed"
-      color="primary"
-      sx={{ zIndex: drawerIndex(), bgcolor: "black" }}
-      enableColorOnDark={true}
-    >
       <Box
         sx={{ flexGrow: 1, margin: "0 20px", color: "white" }}
         className="appbar-items"

src/pages/CreateOptions.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
@@ -24,6 +25,7 @@ export default function Create() {
   const [wl, setWl] = useState([]);
   const [ops, setOps] = useState([]);
   const [spec, setSpec] = useState(defaultServer);
+  const nav = useNavigate();
   const versionList = useVersionList();
   const [versions, setVersions] = useState(["latest"]);
   const createServer = useCreateServer(spec);
@@ -86,11 +88,11 @@ export default function Create() {
       updateSpec("whitelist", newWl.join(","));
     };
 
-  const opUpdate = (e) => alert("Op not implimented");
+  async function upsertSpec() {
-
-  function upsertSpec() {
     if (validateSpec() !== "validated") return;
-    createServer(spec);
+    createServer(spec)
+      .then(() => nav("/"))
+      .catch(alert);
   }
 
   function validateSpec() {

src/pages/Home.jsx

@@ -53,12 +53,7 @@ export default function Home() {
             <ServerCard key={k} server={s} openRcon={openRcon(s.name)} />
           ))}
       </Box>
-      <RconDialog
+      <RconDialog open={rdOpen} dialogToggle={rconToggle} serverName={server} />
-        keepMounted
-        open={rdOpen}
-        dialogToggle={rconToggle}
-        serverName={server}
-      />
       <Button
         component={Link}
         to="/mcl/create"

src/util/queries.js

@@ -46,7 +46,7 @@ export const createServerFolder = async (server, path) =>
   fetchApiCore("/files/folder", {
     name: server,
     path,
-  }); /*postJsonApi("/files/folder", {name: server, path});*/
+  });
 export const deleteServerItem = async (server, path, isDir) =>
   fetchApiCore("/files/item", { name: server, path, isDir }, "DELETE");
 
@@ -106,6 +106,5 @@ const postJsonApi = (subPath, body, invalidate, method = "POST") => {
       body: JSON.stringify(body),
     });
     if (invalidate) qc.invalidateQueries([invalidate]);
-    return res.json();
   };
 };

src/util/theme.js

@@ -5,7 +5,7 @@ const themeOptions = {
   palette: {
     mode: "light",
     primary: {
-      main: "rgba(109,216,144,255)",
+      main: "#29985c",
     },
     secondary: {
       main: "#f50057",