(feature) Update UI & Resource Availability

src/pages/Home.jsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import ServerCard from "../servers/ServerCard.jsx";
+import RconDialog, { useRconDialog } from "../servers/RconDialog.jsx";
+import Overview from "../overview/Overview.jsx";
+import "@mcl/css/server-card.css";
+import "@mcl/css/overview.css";
+import { useServerInstances } from "@mcl/queries";
+
+export default function Home() {
+  const [server, setServer] = useState();
+  const [servers, setServers] = useState([]);
+  const [rdOpen, rconToggle] = useRconDialog();
+  const { isLoading, data: serversData } = useServerInstances();
+  const { servers: serverInstances, clusterMetrics } = serversData ?? {};
+  useEffect(() => {
+    if (!serverInstances) return;
+    serverInstances.sort((a, b) => a.name.localeCompare(b.name));
+    setServers(serverInstances);
+  }, [serverInstances]);
+
+  const openRcon = (s) => () => {
+    setServer(s);
+    rconToggle();
+  };
+  return (
+    <Box className="home">
+      <Overview clusterMetrics={clusterMetrics} />
+      {!isLoading && servers.length === 0 && (
+        <Box display="flex" alignItems="center" justifyContent="center">
+          <Typography variant="h4" sx={{ textAlign: "center" }}>
+            No servers found!
+          </Typography>
+        </Box>
+      )}
+      <Box className="servers">
+        {!isLoading &&
+          servers.map((s, k) => (
+            <ServerCard key={k} server={s} openRcon={openRcon(s.name)} />
+          ))}
+      </Box>
+      <RconDialog
+        keepMounted
+        open={rdOpen}
+        dialogToggle={rconToggle}
+        serverName={server}
+      />
+    </Box>
+  );
+}