#464 Serve both configs, saving, websockets, early datasets

NASA-AMMOS · Jun 4, 2024 · eb185fe · eb185fe
1 parent 2762ca3
commit eb185fe
Show file tree

Hide file tree

Showing 45 changed files with 5,590 additions and 60 deletions.
diff --git a/API/Backend/Config/setup.js b/API/Backend/Config/setup.js
@@ -12,6 +12,30 @@ let setup = {
         s.ROOT_PATH + "/configure",
         s.ensureGroup(s.permissions.users),
         s.ensureAdmin(true),
+        (req, res) => {
+          const user = process.env.AUTH === "csso" ? req.user : null;
+          res.render("configure", {
+            user: user,
+            AUTH: process.env.AUTH,
+            NODE_ENV: process.env.NODE_ENV,
+            PORT: process.env.PORT || "8888",
+            ENABLE_CONFIG_WEBSOCKETS: process.env.ENABLE_CONFIG_WEBSOCKETS,
+            ENABLE_CONFIG_OVERRIDE: process.env.ENABLE_CONFIG_OVERRIDE,
+            ROOT_PATH:
+              process.env.NODE_ENV === "development"
+                ? ""
+                : process.env.ROOT_PATH || "",
+            WEBSOCKET_ROOT_PATH:
+              process.env.NODE_ENV === "development"
+                ? ""
+                : process.env.WEBSOCKET_ROOT_PATH || "",
+          });
+        }
+      );
+      s.app.get(
+        s.ROOT_PATH + "/configure-beta",
+        s.ensureGroup(s.permissions.users),
+        s.ensureAdmin(true),
         (req, res) => {
           const user = process.env.AUTH === "csso" ? req.user : null;
           res.render("../configure/build/index.pug", {

diff --git a/API/Backend/Datasets/routes/datasets.js b/API/Backend/Datasets/routes/datasets.js
@@ -83,7 +83,7 @@ function get(req, res, next) {
 router.post("/entries", function (req, res, next) {
   Datasets.findAll()
     .then((sets) => {
-      if (sets && sets.length > 0) {
+      if (sets) {
         let entries = [];
         for (let i = 0; i < sets.length; i++) {
           entries.push({ name: sets[i].name, updated: sets[i].updatedAt });

diff --git a/config/css/config.css b/config/css/config.css
@@ -12,6 +12,19 @@ body {
   display: flex;
 }
 
+#seeBeta {
+  width: 100%;
+  text-align: center;
+  padding: 4px 0px;
+  background: linear-gradient(to top, #165293, #1568c1);
+}
+#seeBeta > a {
+  color: white;
+  text-decoration: underline;
+  font-size: 14px;
+  font-weight: bold;
+}
+
 .helpFromDocs {
   position: fixed;
   border-radius: 50%;

diff --git a/configure/package-lock.json b/configure/package-lock.json
diff --git a/configure/package.json b/configure/package.json
@@ -22,6 +22,7 @@
     "html2pug": "^4.0.0",
     "immutable": "^5.0.0-beta.4",
     "leaflet": "^1.9.4",
+    "papaparse": "^5.4.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "^2.19.3",

diff --git a/configure/public/contours.png b/configure/public/contours.png
diff --git a/configure/public/gridlines.png b/configure/public/gridlines.png
diff --git a/...public/topographic-contour-lines-map-seamless-pattern_1284-52862-2272797308.jpg b/...public/topographic-contour-lines-map-seamless-pattern_1284-52862-2272797308.jpg
diff --git a/configure/src/components/Main/Main.js b/configure/src/components/Main/Main.js
@@ -5,16 +5,25 @@ import { makeStyles } from "@mui/styles";
 
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 
 import HomeIcon from "@mui/icons-material/Home";
 import LayersIcon from "@mui/icons-material/Layers";
 import HandymanIcon from "@mui/icons-material/Handyman";
 import ExploreIcon from "@mui/icons-material/Explore";
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import ViewQuiltIcon from "@mui/icons-material/ViewQuilt";
+import HelpIcon from "@mui/icons-material/Help";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 import { calls } from "../../core/calls";
-import { setConfiguration, setSnackBarText } from "../../core/ConfigureStore";
+import {
+  setConfiguration,
+  setSnackBarText,
+  clearLockConfig,
+} from "../../core/ConfigureStore";
 
 import SaveBar from "../SaveBar/SaveBar";
 
@@ -27,6 +36,7 @@ import UserInterface from "../Tabs/UserInterface/UserInterface";
 
 import APITokens from "../../pages/APITokens/APITokens";
 import GeoDatasets from "../../pages/GeoDatasets/GeoDatasets";
+import Datasets from "../../pages/Datasets/Datasets";
 
 const useStyles = makeStyles((theme) => ({
   Main: {
@@ -45,10 +55,23 @@ const useStyles = makeStyles((theme) => ({
     height: "48px",
     minHeight: "48px",
     display: "flex",
-    justifyContent: "center",
+    justifyContent: "space-between",
+    boxSizing: "border-box",
     background: theme.palette.swatches.grey[1000],
     boxShadow: `inset 10px 0px 10px -5px rgba(0,0,0,0.3)`,
-    borderBottom: `1px solid ${theme.palette.swatches.grey[900]} !important`,
+    borderBottom: `2px solid ${theme.palette.swatches.grey[800]} !important`,
+  },
+  left: {
+    display: "flex",
+    justifyContent: "start",
+    width: "88px",
+    padding: "4px",
+  },
+  right: {
+    display: "flex",
+    justifyContent: "end",
+    width: "88px",
+    padding: "4px",
   },
   tabs: {
     "& > div": {
@@ -73,11 +96,13 @@ const useStyles = makeStyles((theme) => ({
 
     "& .MuiTabs-indicator": {
       background: theme.palette.swatches.p[0],
+      height: "4px",
     },
   },
   introWrapper: {
     width: "100%",
     height: "100%",
+    backgroundImage: "url(configure/build/gridlines.png)",
   },
   intro: {
     position: "absolute",
@@ -114,6 +139,7 @@ export default function Main() {
         { mission: mission },
         (res) => {
           dispatch(setConfiguration(res));
+          dispatch(clearLockConfig({}));
         },
         (res) => {
           dispatch(
@@ -131,6 +157,9 @@ export default function Main() {
     case "geodatasets":
       Page = <GeoDatasets />;
       break;
+    case "datasets":
+      Page = <Datasets />;
+      break;
     case "api_tokens":
       Page = <APITokens />;
       break;
@@ -162,12 +191,60 @@ export default function Main() {
     default:
   }
 
+  const toGitHub = () => {
+    window.open("https://github.com/NASA-AMMOS/MMGIS", "_blank").focus();
+  };
+  const toDocs = () => {
+    window.open("https://nasa-ammos.github.io/MMGIS/", "_blank").focus();
+  };
+  const signout = () => {
+    calls.api(
+      "logout",
+      {},
+      (res) => {
+        // Remove last directory from pathname
+        const path = window.location.pathname.split("/");
+        window.location.href = path.slice(0, path.length - 1).join("/") || "/";
+      },
+      (res) => {
+        dispatch(
+          setSnackBarText({
+            text: "Failed to sign-out.",
+            severity: "error",
+          })
+        );
+      }
+    );
+  };
+
   return (
     <div className={c.Main}>
       {Page != null ? (
         <div className={c.page}>{Page}</div>
       ) : mission == null ? (
         <div className={c.introWrapper}>
+          <div className={c.topbar}>
+            <div className={c.left}>
+              <Tooltip title="MMGIS GitHub" placement="bottom" arrow>
+                <IconButton onClick={toGitHub}>
+                  <GitHubIcon fontSize="inherit" />
+                </IconButton>
+              </Tooltip>
+
+              <Tooltip title="MMGIS Documentation" placement="bottom" arrow>
+                <IconButton onClick={toDocs}>
+                  <HelpIcon fontSize="inherit" />
+                </IconButton>
+              </Tooltip>
+            </div>
+            <div className={c.right}>
+              <Tooltip title="Sign-out" placement="bottom" arrow>
+                <IconButton onClick={signout}>
+                  <LogoutIcon fontSize="inherit" />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
           <div className={c.intro}>
             <div className={c.title}>MMGIS</div>
             <div className={c.subtitle}>Configuration</div>
@@ -177,6 +254,19 @@ export default function Main() {
       ) : (
         <>
           <div className={c.topbar}>
+            <div className={c.left}>
+              <Tooltip title="MMGIS GitHub" placement="bottom" arrow>
+                <IconButton onClick={toGitHub}>
+                  <GitHubIcon fontSize="inherit" />
+                </IconButton>
+              </Tooltip>
+
+              <Tooltip title="MMGIS Documentation" placement="bottom" arrow>
+                <IconButton onClick={toDocs}>
+                  <HelpIcon fontSize="inherit" />
+                </IconButton>
+              </Tooltip>
+            </div>
             <div className={c.tabs}>
               <Tabs
                 variant="scrollable"
@@ -214,6 +304,13 @@ export default function Main() {
                 />
               </Tabs>
             </div>
+            <div className={c.right}>
+              <Tooltip title="Sign-out" placement="bottom" arrow>
+                <IconButton onClick={signout}>
+                  <LogoutIcon fontSize="inherit" />
+                </IconButton>
+              </Tooltip>
+            </div>
           </div>
           <div className={c.tabPage}>{TabPage}</div>
           <SaveBar />

diff --git a/configure/src/components/Panel/Panel.js b/configure/src/components/Panel/Panel.js
@@ -22,6 +22,10 @@ const useStyles = makeStyles((theme) => ({
     width: "220px",
     height: "100%",
     background: theme.palette.secondary.main,
+    backgroundImage: "url(configure/build/contours.png)",
+    backgroundSize: "200%",
+    display: "flex",
+    flexFlow: "column",
   },
   title: {
     padding: "30px 0px",
@@ -35,18 +39,26 @@ const useStyles = makeStyles((theme) => ({
     fontSize: "13px",
     marginTop: "-5px",
     textTransform: "uppercase",
+    "& > span": {
+      color: theme.palette.accent.main,
+    },
   },
   newMission: {
     width: "100%",
   },
   newMissionButton: {
     width: "100%",
-    background: `${theme.palette.swatches.p[0]} !important`,
+    color: `${theme.palette.swatches.grey[900]} !important`,
+    background: `${theme.palette.swatches.grey[300]} !important`,
     "&:hover": {
-      background: `${theme.palette.swatches.p[5]} !important`,
+      background: `${theme.palette.swatches.p[0]} !important`,
+      color: `${theme.palette.swatches.grey[0]} !important`,
     },
   },
-  missions: {},
+  missions: {
+    flex: 1,
+    overflowY: "auto",
+  },
   missionsUl: {
     listStyleType: "none",
     padding: 0,
@@ -58,6 +70,7 @@ const useStyles = makeStyles((theme) => ({
   },
   missionButton: {
     width: "100%",
+    background: "rgba(255,255,255,0.06) !important",
     color: `${theme.palette.swatches.grey[900]} !important`,
     textTransform: "capitalize !important",
     justifyContent: "end !important",
@@ -77,11 +90,11 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   pages: {
-    position: "absolute",
     bottom: "0px",
     display: "flex",
     flexFlow: "column",
     width: "100%",
+    borderTop: `2px solid ${theme.palette.swatches.grey[300]}`,
   },
   pageButton: {
     width: "100%",
@@ -91,7 +104,7 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "start !important",
     fontSize: "14px !important",
     padding: "3px 16px !important",
-    background: `transparent !important`,
+    background: "rgba(255,255,255,0.06) !important",
     transition:
       "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 250ms ease-out 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     "&:hover": {
@@ -116,7 +129,9 @@ export default function Panel() {
       <div className={c.Panel}>
         <div className={c.title}>
           <img className={c.titleImage} src={mmgisLogo} alt="MMGIS"></img>
-          <div className={c.configurationName}>Configuration</div>
+          <div className={c.configurationName}>
+            Configuration <span>BETA</span>
+          </div>
         </div>
         <div className={c.newMission}>
           <Button
@@ -173,7 +188,7 @@ export default function Panel() {
             disableElevation
             startIcon={<TextSnippetIcon size="small" />}
             onClick={() => {
-              dispatch(setPage({ page: "newMission" }));
+              dispatch(setPage({ page: "datasets" }));
             }}
           >
             Datasets
@@ -195,7 +210,7 @@ export default function Panel() {
             disableElevation
             startIcon={<PhishingIcon size="small" />}
             onClick={() => {
-              dispatch(setPage({ page: "newMission" }));
+              dispatch(setPage({ page: "webhooks" }));
             }}
           >
             WebHooks