add build stage to dockerfile for frontend

nereid/Dockerfile.multi

@@ -1,9 +1,15 @@
 # Austin Orr 11/27/2019
 # This approach is the fastest to build and yields reasonably
-# small images at ~500mb each. The alipine+install variant of this
+# small images at ~500mb each. The alpine+install variant of this
 # pattern is able to reduce each image to ~250MB but takes considerable
 # time to build and is considerably more complex for scipy and pandas.
 
+FROM node:lts-bullseye as frontend
+WORKDIR /app
+COPY ./nereid/static/frontend .
+RUN npm install . && npm run build
+CMD ["bash", "-c", "while true; do sleep 1; done"]
+
 
 FROM python:3.11-bullseye as nereid_install
 RUN apt-get update -y \
@@ -58,6 +64,8 @@ COPY ./scripts /
 RUN chmod +x /start.sh /start-reload.sh /prestart.sh /prestart-worker.sh /run-worker.sh
 ENV PYTHONPATH=/nereid
 ENV PATH=/opt/venv/bin:$PATH
+COPY ./nereid /nereid/nereid
+COPY --from=frontend /app/dist /nereid/nereid/static/frontend
 
 
 # you are here, trying to get the requirements loaded, and rearranging the shared containers.
@@ -83,7 +91,6 @@ RUN addgroup --gid 1000 ${IMG_USER} \
     && chown -R ${IMG_USER}:${IMG_USER} /nereid
 USER ${IMG_USER}
 COPY --from=core-env --chown=${IMG_USER} /opt/venv /opt/venv
-COPY --chown=${IMG_USER} ./nereid /nereid/nereid
 CMD /run-worker.sh
 
 
@@ -108,7 +115,6 @@ COPY --from=server-env /opt/venv /opt/venv
 COPY gunicorn_conf.py /gunicorn_conf.py
 EXPOSE 80
 CMD /start.sh
-COPY ./nereid /nereid/nereid
 
 
 FROM core-env as test-env
@@ -131,7 +137,6 @@ COPY .coveragerc /nereid/.coveragerc
 COPY conftest.py /nereid/conftest.py
 ## This will make the container wait, doing nothing, but alive
 CMD ["bash", "-c", "while true; do sleep 1; done"]
-COPY ./nereid /nereid/nereid
 
 
 FROM python:3.11-bullseye as nereid-edge
@@ -141,6 +146,7 @@ RUN awk -F"==" '{print $1}' /requirements_dev.txt > /requirements_edge.txt
 RUN cat requirements_edge.txt
 RUN pip install -r /requirements_edge.txt
 COPY ./nereid /nereid/nereid
+COPY --from=frontend /app/dist /nereid/nereid/static/frontend
 COPY ./scripts /
 RUN chmod +x /start.sh /start-reload.sh /prestart.sh /prestart-worker.sh /run-worker.sh
 WORKDIR /nereid

nereid/nereid/static/frontend/dist/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="/static/logo/trident_neptune_logo.ico" />
     <link
       href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css"
       rel="stylesheet"
@@ -14,7 +15,7 @@
     ></script>
 
     <title>Nereid UI</title>
-    <script type="module" crossorigin src="/app/assets/index-m-Qkl2xL.js"></script>
+    <script type="module" crossorigin src="/app/assets/index-pTGsNcoA.js"></script>
     <link rel="modulepreload" crossorigin href="/app/assets/vendor-QiQdsv75.js">
     <link rel="stylesheet" crossorigin href="/app/assets/index-DmpQbGXd.css">
   </head>

nereid/nereid/static/frontend/src/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="/static/logo/trident_neptune_logo.ico" />
     <link
       href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css"
       rel="stylesheet"

nereid/nereid/static/frontend/src/js/components/base/load-blob.js

@@ -14,13 +14,13 @@ export default class LoadFileUIBase extends Component {
     self.data_callback =
       options.data_callback ||
       function (data) {
-        console.log("loaded data: ", data);
+        console.debug("loaded data: ", data);
       };
 
     self.primary_callback =
       options.primary_callback ||
       function () {
-        console.log(`clicked primary button load files UI ${self.id}`);
+        console.debug(`clicked primary button load files UI ${self.id}`);
       };
     self.primary_button_label = options.primary_button_label || "Apply";
 

nereid/nereid/static/frontend/src/js/components/graph-interface/map.js

@@ -120,7 +120,7 @@ export default class Map extends Component {
   toggleMapMode() {
     let self = this;
     self.image_group.classed("hidden", !self.store.state.map_mode);
-    console.log("map mode toggled!");
+    console.debug("map mode toggled!");
   }
 
   zoomed({ transform }) {

nereid/nereid/static/frontend/src/js/components/graph-interface/points.js

@@ -140,7 +140,7 @@ export default class Points extends Component {
   // let found = null;
 
   addPoint = (longlat) => {
-    console.log("enter add point");
+    console.debug("enter add point");
 
     let self = this;
     if (!get(self, "store.state.add_node_mode")) {
@@ -157,7 +157,7 @@ export default class Points extends Component {
     )
       return;
     // event.preventDefault();
-    console.log("adding Point");
+    console.debug("adding Point");
 
     let id = data.length > 0 ? data[data.length - 1].id + 1 : 0;
     let point = [self.width() / 2 + id * 40, self.height() / 2 + id * 40];
@@ -236,7 +236,7 @@ export default class Points extends Component {
     let self = this;
     let scale = get(self, "store.state.initialScale");
     let center = get(self, "store.state.initialCenter");
-    console.log("reset");
+    console.debug("reset");
     let zoom_transform = get(self, "store.state.zoomTransform");
 
     self.svg
@@ -255,7 +255,7 @@ export default class Points extends Component {
   }
 
   zoom_to_group() {
-    console.log("z to g");
+    console.debug("z to g");
     let self = this;
     const bb = self.circle_group.node().getBBox();
     const [[x0, y0], [x1, y1]] = [

nereid/nereid/static/frontend/src/js/components/tabs/editor-tab/editor-menu/drawers/drawer-content-node-treatment-facility.js

@@ -116,7 +116,7 @@ export class TreatmentFacilityNodeEditorUI extends Component {
           ) ||
           util.get(self, "store.state.treatment_facility_fields.state.region");
 
-        console.log("tmnt facility fields:", treatment_facility_fields);
+        console.debug("tmnt facility fields:", treatment_facility_fields);
 
         build_form(
           "#facility-form",

nereid/nereid/static/frontend/src/js/components/tabs/howto-tab.js

@@ -21,7 +21,6 @@ export class HowTab extends Component {
   async fetch_page() {
     let self = this;
     let url = `${store.state.nereid_host}` + "/static/pages/how_to";
-    console.log(url);
     util.incr_waiting();
     fetch(url, { method: "GET" })
       .then((resp) => {

nereid/nereid/static/frontend/src/js/components/tabs/results-tab/result_summary/land_surface_summary.js

@@ -43,7 +43,7 @@ export const table_land_surface_load_summary = (data) => {
         ...new Set(util.flatten(summary.map((d) => Object.keys(d)))),
       ];
 
-      console.log("landsurface load summary:", summary);
+      console.debug("landsurface load summary:", summary);
 
       return [summary, summary_keys];
     },

nereid/nereid/static/frontend/src/js/lib/nereid-api.js

@@ -101,6 +101,16 @@ const nereid = {
     }
   },
 
+  getTaskData: async (host, api, task_id) => {
+    let rsp;
+    try {
+      rsp = await util.getJsonResponse(`${host}${api}/task/${task_id}`);
+      return rsp;
+    } catch (err) {
+      console.error(err); // TypeError: failed to fetch
+    }
+  },
+
   postValidateNetwork: async (host, api, state, region, data) => {
     let route = `${host}${api}/network/validate?state=${state}&region=${region}`;
     let rsp;
@@ -185,6 +195,18 @@ const nereid = {
       rsp = await util.postJsonResponse(route, data);
       if (rsp?.data?.errors?.length == 0) {
         return rsp;
+      } else if (
+        (rsp?.data == null) &
+        ["pending", "started"].includes(rsp?.status?.toLowerCase()) &
+        (rsp?.task_id != null)
+      ) {
+        rsp = await util.poll({
+          fn: () => nereid.getTaskData(host, api, rsp.task_id),
+          validate: (_result) => _result?.data != null,
+          interval_milli: 333,
+          maxAttempts: 20,
+        });
+        return rsp;
       }
     } catch (e) {
       console.error(e);
@@ -292,7 +314,6 @@ export const getConfig = async ({
   nereid_state,
   nereid_region,
 }) => {
-  // console.log(nereid_host, nereid_state, nereid_region);
   if (!nereid_host) {
     nereid_host = window.location.origin; //await nereid.getHost();
   }

nereid/nereid/static/frontend/src/js/lib/util.js

@@ -74,15 +74,15 @@ export const decr_waiting = () => {
 // fetch API wrappers for json retrieval
 
 export async function getJsonResponse(url) {
-  console.log("fetching with get", url);
+  console.debug("fetching with get", url);
   incr_waiting();
   const response = await fetch(url, { method: "GET" })
     // .catch((error) => {
     //   alert(error);
     //   return {};
     // })
     .then((resp) => {
-      console.log("getJsonResponse response:", resp);
+      console.debug("getJsonResponse response:", resp);
       if (resp.status == 200) {
         return resp.json();
       } else if (resp.status == 422) {
@@ -95,7 +95,7 @@ export async function getJsonResponse(url) {
       }
     })
     .then((data) => {
-      console.log("getJsonResponse data returned:", data);
+      console.debug("getJsonResponse data returned:", data);
       return data;
     })
     .finally(decr_waiting);
@@ -104,7 +104,7 @@ export async function getJsonResponse(url) {
 }
 
 export async function postJsonResponse(url, data) {
-  console.log("fetching with post", url, data);
+  console.debug("fetching with post", url, data);
   incr_waiting();
 
   const response = await fetch(url, {
@@ -115,7 +115,7 @@ export async function postJsonResponse(url, data) {
     body: JSON.stringify(data),
   })
     .then((resp) => {
-      console.log("postJsonResponse response:", resp);
+      console.debug("postJsonResponse response:", resp);
       if (resp.status == 200) {
         return resp.json();
       } else if (resp.status == 422) {
@@ -126,28 +126,29 @@ export async function postJsonResponse(url, data) {
       }
     })
     .then((data) => {
-      console.log("postJsonResponse data returned:", data);
+      console.debug("postJsonResponse data returned:", data);
       return data;
     })
     .finally(decr_waiting);
   return response;
 }
 
-export const poll = ({ fn, validate, interval, maxAttempts }) => {
-  console.log("Start poll...");
+export const poll = ({ fn, validate, interval_milli, maxAttempts }) => {
+  console.debug("Start poll...");
   let attempts = 0;
 
   const executePoll = async (resolve, reject) => {
-    console.log("- poll");
+    console.debug("- poll");
     const result = await fn();
     attempts++;
+    console.debug(attempts, result);
 
     if (validate(result)) {
       return resolve(result);
     } else if (maxAttempts && attempts === maxAttempts) {
       return reject(new Error("Exceeded max attempts"));
     } else {
-      setTimeout(executePoll, interval, resolve, reject);
+      setTimeout(executePoll, interval_milli, resolve, reject);
     }
   };
 
@@ -203,7 +204,7 @@ export const getConfigFromUrlQueryParams = async () => {
     nereid_region: region || store.state.nereid_region,
   });
   store.dispatch("updateConfig", cfg);
-  console.log(cfg);
+  console.debug(cfg);
 
   return false;
 };