add upload status and completion to local browser

Author: Mletter1

docker/compose/slycat-compose/slycat-web-server/DockerFile

@@ -10,6 +10,7 @@ RUN pip install --trusted-host files.pythonhosted.org --trusted-host pypi.org --
 RUN pip install --trusted-host files.pythonhosted.org --trusted-host pypi.org --trusted-host pypi.python.org --no-cache-dir -r requirements.txt
 
 RUN git config --global http.sslVerify false
+RUN git config --global http.postBuffer 524288000
 RUN git clone --depth 1 https://github.com/sandialabs/slycat.git
 RUN mkdir -p /var/lib/slycat/data-store
 WORKDIR /usr/src/slycat/slycat

docker/compose/slycat-compose/sshd/DockerFile

@@ -4,8 +4,8 @@ LABEL maintainer="Matthew Letter <mletter@sandia.gov>"
 
 ENV DEBIAN_FRONTEND noninteractive
 
-RUN apt-get update && \
-    apt-get --yes install openssh-server rsync git && \
+RUN apt-get update
+RUN apt-get --yes install openssh-server rsync git && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/* && \
     mkdir -vp /var/run/sshd && \

web-server/plugins/slycat-cca/js/components/CCAWizard.tsx

@@ -21,18 +21,16 @@ export const CCAWizard = (params: CCAWizardParams) => {
   const { pid, marking } = params;
   const [modalOpen, setModalOpen] = React.useState(true);
   const cCAWizardFooter = useCCAWizardFooter();
-  const dispatch = useAppDispatch();
   const statePid = useAppSelector(selectPid);
   const stateMid = useAppSelector(selectMid);
   const handleClosingCallback = useHandleClosingCallback(setModalOpen, stateMid);
   const handleWizardSetup = useHandleWizardSetup(pid, statePid, stateMid, marking);
 
   React.useEffect(() => {
-    console.log("statePid, pid, selectMid", statePid, pid, stateMid);
     if (modalOpen) {
       handleWizardSetup()
     }
-  }, [dispatch, pid, statePid, stateMid]);
+  }, [pid, statePid, stateMid]);
 
   return (
     <CCAModalContent

web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx

@@ -17,23 +17,6 @@ export const CCAWizardSteps = () => {
       <div className="tab-content">
         <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)}/>
         <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)}/>
-        <div hidden={true}>
-          <div
-            className="alert alert-danger"
-            role="alert"
-            data-bind="visible:show_local_browser_error()"
-          >
-            You must selected a file before continuing.
-          </div>
-          {/* <slycat-local-browser
-              params="
-              selection:browser.selection,
-              progress:browser.progress,
-              progress_status:browser.progress_status"
-            ></slycat-local-browser>
-            <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
-        </div>
-
         <div hidden={true}>
           <form role="form">
             {/* <slycat-remote-controls

web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx

@@ -6,22 +6,28 @@ import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
 import {
   resetCCAWizard,
   selectDataLocation,
+  selectFileUploaded,
   selectMid,
   selectPid,
   selectTab,
+  setFileUploaded,
   setMid,
   setPid,
   setTabName,
   TabNames,
-  uploadFile,
 } from "./wizard-store/reducers/cCAWizardSlice";
 import client from "js/slycat-web-client";
 import fileUploader from "js/slycat-file-uploader-factory";
 import * as dialog from "js/slycat-dialog";
 
+/**
+ * A hook for controlling how the back and continue buttons work based on the current redux state
+ * @returns the back button and continue button jsx
+ */
 export const useCCAWizardFooter = () => {
   const tabName = useAppSelector(selectTab);
   const dataLocation = useAppSelector(selectDataLocation);
+  const fileUploaded = useAppSelector(selectFileUploaded);
   const dispatch = useAppDispatch();
 
   /**
@@ -31,8 +37,8 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation) {
       dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
-    if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB) {
-      dispatch(uploadFile());
+    if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB && fileUploaded) {
+      dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
   }, [dispatch, setTabName, tabName]);
 
@@ -55,11 +61,16 @@ export const useCCAWizardFooter = () => {
   );
 
   const nextButton = (
-    <button key="continue" className="btn btn-primary" onClick={handleContinue}>
-      Continue
+    <button
+      key="continue"
+      className="btn btn-primary"
+      onClick={handleContinue}
+      disabled={tabName === TabNames.CCA_LOCAL_BROWSER_TAB && !fileUploaded}
+    >
+      Continue {fileUploaded.toString()}
     </button>
   );
-  return React.useMemo(() => [backButton, nextButton], [tabName, dataLocation, dispatch]);
+  return React.useMemo(() => [backButton, nextButton], [fileUploaded, tabName, dataLocation, dispatch]);
 };
 
 /**
@@ -122,32 +133,47 @@ export const useHandleClosingCallback = (
 /**
  * handle file submission
  */
-export const useHandleSubmit = ():[(file: File) => void, number, string] => {
+export const useHandleLocalFileSubmit = (): [
+  (file: File, parser: string | undefined, setUploadStatus: (status: boolean) => void) => void,
+  number,
+  string,
+] => {
   const mid = useAppSelector(selectMid);
   const pid = useAppSelector(selectPid);
   const [progress, setProgress] = React.useState<number>(0);
   const [progressStatus, setProgressStatus] = React.useState("");
   const handleSubmit = React.useCallback(
-    (file: File) => {
+    (file: File, parser: string | undefined, setUploadStatus: (status: boolean) => void) => {
       const progressCallback = (input?: number) => {
         if (!input) {
           return progress;
         }
         setProgress(input);
       };
+      const progressStatusCallback = (input?: string) => {
+        if (!input) {
+          return progressStatus;
+        }
+        setProgressStatus(input);
+      };
       const fileObject = {
         pid,
         mid,
         file: file,
+        parser: parser,
         aids: [["data-table"], file?.name],
         // parser: component.parser(),
-        progress: progress,
-        progress_status: progressCallback,
+        progress: progressCallback,
+        progress_status: progressStatusCallback,
         progress_final: 90,
         success: function () {
-          // set browser tab
+          console.log("uploaded");
+          setProgress(100);
+          setProgressStatus("File upload complete");
+          setUploadStatus(true);
         },
         error: function () {
+          setUploadStatus(false);
           dialog.ajax_error(
             "Did you choose the correct file and filetype?  There was a problem parsing the file: ",
           )();
@@ -163,3 +189,27 @@ export const useHandleSubmit = ():[(file: File) => void, number, string] => {
 
   return [handleSubmit, progress, progressStatus];
 };
+
+/**
+ * Returns a function that sets the callback "setParser" value to the selected parser
+ */
+export const handleParserChange = (
+  setParser: React.Dispatch<React.SetStateAction<string | undefined>>,
+) =>
+  React.useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      setParser(e?.target?.value ?? undefined);
+    },
+    [setParser],
+  );
+
+export const useSetUploadStatus = () => {
+  const dispatch = useAppDispatch();
+  return React.useCallback(
+    (status: boolean) => {
+      console.log("dispatching", status);
+      dispatch(setFileUploaded(status));
+    },
+    [dispatch],
+  );
+};

web-server/plugins/slycat-cca/js/components/slycat-local-browser/SlycatLocalBrowser.tsx

@@ -2,12 +2,14 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
-import { useHandleSubmit } from "../CCAWizardUtils";
+import { useHandleLocalFileSubmit } from "../CCAWizardUtils";
 import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 
-export const SlycatLocalBrowser = () => {
+export const SlycatLocalBrowser = (props: { setUploadStatus: (status: boolean) => void, disabled?: boolean }) => {
+  const { setUploadStatus, disabled } = props;
   const [file, setFile] = React.useState<File | undefined>(undefined);
-  const [handleSubmit, progress, progressStatus] = useHandleSubmit();
+  const [parser, setParser] = React.useState<string | undefined>(undefined);
+  const [handleSubmit, progress, progressStatus] = useHandleLocalFileSubmit();
   const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
     if (e.target.files !== null && e.target.files.length >= 1) {
       setFile(e.target.files[0]);
@@ -24,6 +26,23 @@ export const SlycatLocalBrowser = () => {
           id="slycat-local-browser-file"
           placeholder="file"
         ></input>
+        <SlycatParserControls setParser={setParser} />
+        <button
+          key="Upload File To Server"
+          disabled={disabled ?? false }
+          style={{visibility: progress<=0? 'visible': 'hidden'}}
+          className="btn btn-primary"
+          data-toggle="tooltip"
+          data-placement="top" 
+          title="You must selected a file before continuing."
+          onClick={React.useCallback(() => {
+            if (file) {
+              handleSubmit(file, parser, setUploadStatus);
+            }
+          }, [file, handleSubmit])}
+        >
+          Upload File parser
+        </button>
         <div className="progress" style={{ visibility: progress > 0 ? undefined : "hidden" }}>
           <div
             className="progress-bar progress-bar-striped progress-bar-animated"
@@ -36,18 +55,6 @@ export const SlycatLocalBrowser = () => {
             {progressStatus}
           </div>
         </div>
-        <SlycatParserControls/>
-        <button
-          key="Upload File To Server"
-          className="btn btn-primary"
-          onClick={React.useCallback(() => {
-            if (file) {
-              handleSubmit(file);
-            }
-          }, [file, handleSubmit])}
-        >
-          Upload File
-        </button>
       </div>
     </div>
   );

web-server/plugins/slycat-cca/js/components/slycat-parser-controls/SlycatParserControls.tsx

@@ -4,18 +4,28 @@
 import * as React from "react";
 import parsers from "js/slycat-parsers";
 import _ from "lodash";
+import { handleParserChange } from "../CCAWizardUtils";
 
-export const SlycatParserControls = () => {
-  const filteredParsers = parsers
+export const SlycatParserControls = (props: {
+  setParser: React.Dispatch<React.SetStateAction<string | undefined>>;
+}) => {
+  const { setParser } = props;
+  const filteredParsers: [{ type: () => string }] = parsers
     .available()
     ?.filter((parser: { categories: () => string }) => _.includes(parser.categories(), "table"));
+  React.useEffect(() => {
+    if (filteredParsers !== undefined && filteredParsers.length > 0) {
+      console.log('reset', filteredParsers[0].type());
+      setParser(filteredParsers[0].type());
+    }
+  }, [filteredParsers.length]);
   return (
     <div className="form-group row">
       <label className="col-sm-2 col-form-label">Filetype</label>
       <div className="col-sm-10">
-        <select id="slycat-model-parser" className="form-control" >
+        <select id="slycat-model-parser" className="form-control" onChange={handleParserChange(setParser)}>
           {filteredParsers.map((parser: { type: () => string }) => {
-            return <option>{parser.type()}</option>;
+            return <option key={parser.type()}>{parser.type()}</option>;
           })}
         </select>
       </div>

web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx

@@ -14,12 +14,14 @@ export interface CCAWizardState {
   dataLocation: dataLocationType;
   mid: string | undefined;
   pid: string | undefined;
+  fileUploaded: boolean;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
   dataLocation: dataLocationType.LOCAL,
   mid: undefined,
-  pid: undefined
+  pid: undefined,
+  fileUploaded: false
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -35,12 +37,12 @@ export const cCAWizardSlice = createSlice({
       state.mid = action.payload;
     },
     setPid: (state, action: PayloadAction<string>) => {
-       // TODO: dispatch model creation if no MID present aka undefined
       state.pid = action.payload;
     },
-    uploadFile: (state) => {
-      console.log(`upload`);
-    },
+    setFileUploaded:(state, action: PayloadAction<boolean>) => {
+      console.log("dispatching action.payload", action.payload)
+     state.fileUploaded = action.payload;
+   },
     resetCCAWizard: () => initialState,
   },
 });
@@ -51,12 +53,13 @@ export const {
   setDataLocation,
   setMid,
   setPid,
-  uploadFile,
   resetCCAWizard: resetCCAWizard,
+  setFileUploaded
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
 export const selectDataLocation = (state: RootState) => state.cCAWizard.dataLocation;
+export const selectFileUploaded= (state: RootState) => state.cCAWizard.fileUploaded;
 export const selectPid = (state: RootState) => state.cCAWizard.pid;
 export const selectMid = (state: RootState) => state.cCAWizard.mid;
 

web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx

@@ -3,12 +3,17 @@
  retains certain rights in this software. */
 import * as React from "react";
 import { SlycatLocalBrowser } from "../slycat-local-browser/SlycatLocalBrowser";
+import { useSetUploadStatus } from "../CCAWizardUtils";
+import { useAppSelector } from "../wizard-store/hooks";
+import { selectFileUploaded } from "../wizard-store/reducers/cCAWizardSlice";
 
 export const CCALocalBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
+  const fileUploaded = useAppSelector(selectFileUploaded);
+  const setUploadStatus = useSetUploadStatus();
   return (
     <div hidden={hidden}>
-      <SlycatLocalBrowser />
+      <SlycatLocalBrowser disabled={fileUploaded} setUploadStatus={setUploadStatus}/>
     </div>
   );
 };