ui: display overlay when no machines available

pkgs/ui/.envrc

@@ -2,7 +2,7 @@
 
 source_up
 
-files=(flake-module.nix package.json package-lock.json)
+files=(../../flake.nix ../theme default.nix flake-module.nix package.json package-lock.json)
 if type nix_direnv_watch_file &>/dev/null; then
   nix_direnv_watch_file "${files[@]}"
 else

pkgs/ui/src/components/noDataOverlay/index.tsx

@@ -75,7 +75,7 @@ export function NoDataOverlay(props: NoDataOverlayProps) {
           </g>
         </g>
       </svg>
-      <Box sx={{ mt: 1 }}>{label}</Box>
+      <Box sx={{ mt: 1, textAlign: "center" }}>{label}</Box>
     </StyledGridOverlay>
   );
 }

pkgs/ui/src/components/table/nodeTableContainer.tsx

@@ -13,6 +13,7 @@ import { visuallyHidden } from "@mui/utils";
 import { NodeRow } from "./nodeRow";
 
 import { Machine } from "@/api/model/machine";
+import { NoDataOverlay } from "../noDataOverlay";
 
 interface HeadCell {
   disablePadding: boolean;
@@ -163,6 +164,11 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
   );
   return (
     <TableContainer>
+      {tableData.length === 0 ? (
+        <div className="my-8 flex w-full items-center justify-center">
+          <NoDataOverlay label={"No Machines"} />
+        </div>
+      ) : (
         <Table aria-labelledby="tableTitle" size={dense ? "small" : "medium"}>
           <EnhancedTableHead
             order={order}
@@ -192,6 +198,7 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
             )}
           </TableBody>
         </Table>
+      )}
     </TableContainer>
   );
 }