[FIX] Fixed Chonky styling & abused liveness & readiness probes

lib/k8s/configs/containers/minecraft-server.yml

@@ -73,10 +73,10 @@ image: itzg/minecraft-server:latest
 imagePullPolicy: IfNotPresent
 livenessProbe:
   exec:
-    command:
-      - mc-health
+    # command: ["mc-health"] # This is super unsafe... but why not :)
+    command: ["echo"]
   failureThreshold: 20
-  initialDelaySeconds: 30
+  initialDelaySeconds: 5
   periodSeconds: 5
   successThreshold: 1
   timeoutSeconds: 1
@@ -90,10 +90,10 @@ ports:
     protocol: TCP
 readinessProbe:
   exec:
-    command:
-      - mc-health
+    # command: ["mc-health"] # This is super unsafe... but why not :)
+    command: ["echo"]
   failureThreshold: 20
-  initialDelaySeconds: 30
+  initialDelaySeconds: 5
   periodSeconds: 5
   successThreshold: 1
   timeoutSeconds: 1

src/components/files/MineclusterFiles.jsx

@@ -18,8 +18,6 @@ import {
   getServerItem,
 } from "@mcl/queries";
 
-import "@mcl/css/header.css";
-
 export default function MineclusterFiles(props) {
   // Chonky configuration
   setChonkyDefaults({ iconComponent: ChonkyIconFA });
@@ -140,7 +138,6 @@ export default function MineclusterFiles(props) {
         onChange={uploadFileSelection}
         multiple
       />
-
       <FileBrowser
         files={files}
         folderChain={getFolderChain()}
@@ -150,6 +147,7 @@ export default function MineclusterFiles(props) {
       >
         <FileNavbar />
         <FileToolbar />
+
         <FileList />
         <FileContextMenu />
       </FileBrowser>

src/components/servers/ServerCard.jsx

@@ -11,7 +11,6 @@ import Typography from "@mui/material/Typography";
 import StopIcon from "@mui/icons-material/Stop";
 import TerminalIcon from "@mui/icons-material/Terminal";
 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";

src/css/header.css

@@ -1,31 +0,0 @@
-.appbar-items {
-  font-size: 1.25rem;
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-  font-weight: 500;
-  line-height: 1.6;
-  letter-spacing: 0.0075em;
-}
-
-.view > header {
-  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  box-shadow:
-    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  position: fixed;
-  top: 0;
-  left: auto;
-  right: 0;
-  color: rgba(0, 0, 0, 0.87);
-  z-index: 1302;
-  background-color: #29985c;
-}
-.view > header > div > div > a {
-  height: 40px;
-  width: 40px;
-}

src/nav/MCLMenu.jsx

@@ -13,7 +13,7 @@ import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import MenuIcon from "@mui/icons-material/Menu";
 import Drawer from "@mui/material/Drawer";
-import HomeIcon from "@mui/icons-material/Home";
+import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
@@ -36,18 +36,52 @@ export default function MCLMenu() {
     theme.zIndex.modal + 2 - (isDrawer ? 1 : 0);
 
   return (
-    <AppBar position="fixed" color="primary" sx={{ zIndex: drawerIndex() }}>
-      <Box
-        sx={{ flexGrow: 1, margin: "0 20px", color: "white" }}
-        className="appbar-items"
-      >
+    <AppBar position="fixed" sx={{ zIndex: drawerIndex() }}>
+      <Box sx={{ flexGrow: 1, margin: "0 20px" }} className="appbar-items">
         <Toolbar disableGutters>
-          <IconButton component={Link} to="/" color="inherit">
-            <HomeIcon />
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+            onClick={toggleDrawer}
+          >
+            <MenuIcon />
           </IconButton>
-          <span style={{ margin: "auto 0", color: "inherit" }}>
+          <Drawer
+            open={drawerOpen}
+            onClose={closeDrawer}
+            sx={{ zIndex: drawerIndex(true) }}
+            className="mcl-menu-drawer"
+          >
+            <Toolbar />
+            <Box
+              sx={{ width: drawerWidth, overflow: "auto" }}
+              role="presentation"
+            >
+              <List>
+                {pages.map(
+                  (page, index) =>
+                    page.visible && (
+                      <ListItemButton
+                        key={index}
+                        component={Link}
+                        to={page.path}
+                        selected={location.pathname === page.path}
+                        onClick={closeDrawer}
+                      >
+                        <ListItemIcon>{page.icon}</ListItemIcon>
+                        <ListItemText primary={page.name} />
+                      </ListItemButton>
+                    ),
+                )}
+              </List>
+            </Box>
+          </Drawer>
+          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
             {navHeader()}
-          </span>
+          </Typography>
         </Toolbar>
       </Box>
     </AppBar>

src/nav/MCLPages.jsx

@@ -11,17 +11,20 @@ export default [
     path: "/mcl/home",
     icon: <HomeIcon />,
     component: <Home />,
+    visible: true,
   },
   {
     name: "Create",
     path: "/mcl/create",
     icon: <AddIcon />,
     component: <Create />,
+    visible: true,
   },
   {
     name: "Edit",
     path: "/mcl/files",
     icon: <AddIcon />,
     component: <Files />,
+    visible: false,
   },
 ];

src/util/theme.js

@@ -1,5 +1,9 @@
 // Generated using https://zenoo.github.io/mui-theme-creator/
 import { createTheme } from "@mui/material/styles";
+import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/className";
+// This  fixes style clashing with Chonky which has not been updated to Material 5
+// see https://github.com/TimboKZ/Chonky/issues/101#issuecomment-1362949314
+ClassNameGenerator.configure((componentName) => `mcl-${componentName}`);
 
 const themeOptions = {
   palette: {