[FEATURE] Adjusted servercards

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/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/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",