Initial Commit Adjustments

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-
+dist/
+build/

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:16
+WORKDIR /dunemask/net/cairo
+# Copy dependencies 
+COPY package.json .
+COPY package-lock.json .
+RUN npm i
+# Copy react build resources over
+COPY public public
+COPY src src
+COPY lib lib
+RUN npm run build:react
+# Copy bin over
+COPY bin bin
+CMD ["npm","start"]
+

dev/views/TestCtx.jsx

@@ -8,7 +8,7 @@ export default function Test() {
     state: jobState,
     dispatch: jobDispatch,
     jobUpdate,
-    jobCreate
+    jobCreate,
   } = useContext(JobContext);
 
   function onLog(d) {

package.json

@@ -9,6 +9,7 @@
     "./web-clients": "./lib/sockets/clients/web.index.js"
   },
   "scripts": {
+    "build:react": "BUILD_PATH='./dist' react-scripts build",
     "start": "node bin/app.js",
     "start:dev": "nodemon bin/app.js",
     "start:dev:replit": "npm run start:dev & npm run start:react:replit",

replit.nix

@@ -4,5 +4,6 @@
         pkgs.nodePackages.typescript-language-server
         pkgs.nodePackages.yarn
         pkgs.replitPackages.jest
+        pkgs.vim	
 ];
 }

src/Views.jsx

@@ -1,33 +1,39 @@
 import { useContext, useState } from "react";
 import ViewContext from "./ctx/ViewContext.jsx";
 
-import * as React from 'react';
+import * as React from "react";
-import AppBar from '@mui/material/AppBar';
+import AppBar from "@mui/material/AppBar";
-import Box from '@mui/material/Box';
+import Box from "@mui/material/Box";
-import Toolbar from '@mui/material/Toolbar';
+import Toolbar from "@mui/material/Toolbar";
-import IconButton from '@mui/material/IconButton';
+import IconButton from "@mui/material/IconButton";
-import Typography from '@mui/material/Typography';
+import Typography from "@mui/material/Typography";
-import Menu from '@mui/material/Menu';
+import Menu from "@mui/material/Menu";
-import MenuIcon from '@mui/icons-material/Menu';
+import MenuIcon from "@mui/icons-material/Menu";
-import Container from '@mui/material/Container';
+import Container from "@mui/material/Container";
-import Avatar from '@mui/material/Avatar';
+import Avatar from "@mui/material/Avatar";
-import Button from '@mui/material/Button';
+import Button from "@mui/material/Button";
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from "@mui/material/Tooltip";
-import MenuItem from '@mui/material/MenuItem';
+import MenuItem from "@mui/material/MenuItem";
-import Drawer from '@mui/material/Drawer';
+import Drawer from "@mui/material/Drawer";
-import ListItem from '@mui/material/ListItem';
+import ListItem from "@mui/material/ListItem";
-import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from '@mui/material/ListItemText';
+import ListItemText from "@mui/material/ListItemText";
-import List from '@mui/material/List';
+import List from "@mui/material/List";
-import ListItemButton from '@mui/material/ListItemButton';
+import ListItemButton from "@mui/material/ListItemButton";
-import NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsIcon from "@mui/icons-material/Notifications";
-import WorkIcon from '@mui/icons-material/Work';
+import WorkIcon from "@mui/icons-material/Work";
-import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
-import SettingsIcon from '@mui/icons-material/Settings';
+import SettingsIcon from "@mui/icons-material/Settings";
-import ErrorIcon from '@mui/icons-material/Error';
+import ErrorIcon from "@mui/icons-material/Error";
 
 const pages = ["failing", "alerting", "jobs", "tests", "settings"];
-const icons = [ErrorIcon , NotificationsIcon, WorkIcon,FormatListBulletedIcon, SettingsIcon];
+const icons = [
+  ErrorIcon,
+  NotificationsIcon,
+  WorkIcon,
+  FormatListBulletedIcon,
+  SettingsIcon,
+];
 
 export default function Views() {
   const [view, setView] = useState(pages[0]);
@@ -41,23 +47,24 @@ export default function Views() {
     <AppBar position="static" color="secondary">
       <Container maxWidth="xl">
         <Toolbar disableGutters>
-          <Drawer
+          <Drawer open={drawerOpen} onClose={closeDrawer}>
-      open={drawerOpen}
+            {" "}
-          onClose={closeDrawer}
+            <Box sx={{ width: 250 }} role="presentation">
-    >  <Box
-      sx={{ width: 250 }}
-      role="presentation"
-    >
               <List>
                 {pages.map((text, index) => (
-          <ListItemButton key={text} onClick={openPage} selected={view===text}>
+                  <ListItemButton
-            <ListItemIcon>
+                    key={text}
-              {/*icons[index]*/}
+                    onClick={openPage}
-            </ListItemIcon>
+                    selected={view === text}
-            <ListItemText primary={text.charAt(0).toUpperCase() + text.slice(1)} />
+                  >
+                    <ListItemIcon>{/*icons[index]*/}</ListItemIcon>
+                    <ListItemText
+                      primary={text.charAt(0).toUpperCase() + text.slice(1)}
+                    />
                   </ListItemButton>
                 ))}
-              </List></Box>
+              </List>
+            </Box>
           </Drawer>
           <IconButton
             size="large"
@@ -73,7 +80,7 @@ export default function Views() {
             variant="h6"
             noWrap
             component="div"
-            sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
+            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
           >
             {view.charAt(0).toUpperCase() + view.slice(1)}
           </Typography>
@@ -81,7 +88,7 @@ export default function Views() {
             variant="h6"
             noWrap
             component="div"
-            sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
+            sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
           >
             {view.charAt(0).toUpperCase() + view.slice(1)}
           </Typography>