Merge pull request #27 from LANL-Bioinformatics/24-disable-workflows

24 disable workflows

Author: yxu-lanl

installation/README.md

@@ -26,17 +26,24 @@ https://docs.mongodb.com/manual/installation/#mongodb-community-edition-installa
 
     - Populate the "client build" environment configuration file (i.e. `webapp/client/.env`). 
 
-        You can initialize it based upon the corresponding development/production example file:
+        You can initialize it based upon the corresponding example file:
         ```shell
-        cp webapp/client/.env.development.example \
+        cp webapp/client/.env.example \
         webapp/client/.env
         ```
         > Those environment variables are used within `webapp/client/src/config.js`.
+
+    -  Create a build directory with a production build of the client:
+        ```shell
+        cd webapp/client
+        npm run build
+        ```
+
     - Populate the server environment configuration file (i.e. `webapp/server/.env`). 
 
-        You can initialize it based upon the corresponding development/production example file:
+        You can initialize it based upon the corresponding example file:
         ```shell
-        cp webapp/server/.env.development.example \
+        cp webapp/server/.env.example \
         webapp/server/.env
         ```
         > Those environment variables are used within `webapp/server/config.js`.

installation/install.sh

@@ -51,16 +51,19 @@ do
 done
 
 echo "Setup LANL EDGE webapp ..."
-#build client
-echo "build client..."
+#install client
+echo "install client..."
 cd $app_home/webapp/client
 npm install --legacy-peer-deps
-npm run build
-#build server
-echo "build server..."
+#install server
+echo "install server..."
 cd $app_home/webapp/server
 npm install
 
 echo "LANL EDGE webapp successfully installed!"
-echo "To start the webapp in EDGEv3's root directory:"
-echo "pm2 start pm2.config.js"
+echo "Next steps:"
+echo "1. copy webapp/client/.env.example to webapp/client/.env and update settings in the .env file"
+echo "2. inside webapp/client, run command: npm run build"
+echo "3. copy webapp/server/.env.example to webapp/server/.env and update settings in the .env file"
+echo "4. start MongoDB if it's not started yet"
+echo "5. start the webapp in EDGEv3's root directory: pm2 start pm2.config.js"

webapp/README.md

@@ -8,38 +8,28 @@
 ## Install the webapp
 
     cd installation
-    ./install-local.sh
+    ./install.sh
+
+## Configure and start ui client
+
+    cd webapp/client
+    cp .env.example .env
+    (update settings in .env)
+    npm start
 
-## Start api server
+## Configure and start api server
 
     cd webapp/server
-    (change NODE_ENV=prod to NODE_ENV=dev in .env)
+    cp .env.example .env
+    (update settings in .env)
     npm start
 
-## Start ui client
-
-    cd webapp/client
-    npm start
 
 ## View the website
 
     http://localhost:3000
 
 ## Note
 
-- Have to restart the client when any changes made in client/.env.
-- Have to restart the server when any changes made in server code or server/.env.
-    
-#### Restart api server
-
-    cd webapp/server
-    use Ctrl-C to stop the webapp server
-    npm start
-
-#### Restart ui client
-
-    cd webapp/client
-    use Ctrl-C to stop the webapp client
-    npm start
-
+- Have to restart the api server when any changes made in webapp/server code or webapp/server/.env.
 

webapp/client/.env.development.example

@@ -0,0 +1,13 @@
+###############################################################################
+# Refer to `./src/config.js` to see all supported environment variables.      #
+###############################################################################
+VITE_NAME=EDGE V3
+VITE_EMAIL_NOTIFICATION_ENABLED=false
+VITE_FILEUPLOAD_ENABLED=true
+
+# for development only
+# VITE_API_URL=http://localhost:5000
+
+# ORCiD login
+VITE_IS_ORCID_AUTH_ENABLED=false
+VITE_ORCID_CLIENT_ID=="__POPULATE_ME_IF_ENABLING_ORCID_AUTH__"

webapp/client/.env.example

@@ -12,7 +12,7 @@ import { colors } from './util'
 export const ConfirmDialog = (props) => {
   return (
     <Modal isOpen={props.isOpen} centered>
-      <ModalHeader>{props.title}</ModalHeader>
+      <ModalHeader>{props.header}</ModalHeader>
       <ModalBody>{props.message}</ModalBody>
       <ModalFooter>
         <Button color="primary" onClick={props.handleClickYes}>

webapp/client/.env.production.example

@@ -167,12 +167,16 @@ export const notify = (type, msg, timeout) => {
     toast.success(msg, {
       position: 'top-center',
       autoClose: timeout,
+      rtl: false,
+      hideProgressBar: false,
     })
   }
   if (type === 'error') {
     toast.error(msg, {
       position: 'top-center',
       autoClose: false,
+      rtl: false,
+      hideProgressBar: false,
     })
   }
 }

webapp/client/src/edge/common/Dialogs.js

@@ -15,10 +15,6 @@ const JobQueue = () => {
         accessorKey: 'name', //access nested data with dot notation
         header: 'project',
       },
-      {
-        accessorKey: 'owner',
-        header: 'Owner',
-      },
       {
         accessorKey: 'type', //normal accessorKey
         header: 'Type',
@@ -79,8 +75,8 @@ const JobQueue = () => {
         data={tableData}
         enableFullScreenToggle={false}
         enableColumnActions={false}
-        enableSorting={false}
-        enableColumnFilters={false}
+        enableSorting={true}
+        enableColumnFilters={true}
         state={{
           isLoading: loading,
         }}

webapp/client/src/edge/common/util.js

@@ -28,6 +28,9 @@ const UploadFiles = (props) => {
   const [allowedExtensions, setAllowedExtensions] = useState([])
   const [files, setFiles] = useState([])
   const [updateSize, setUpdateSize] = useState(0)
+  const [files2upload, setFiles2Upload] = useState(0)
+  const [filesUploaded, setFilesUploaded] = useState(0)
+  let uploaded = 0
 
   useEffect(() => {
     //get upload info
@@ -124,6 +127,8 @@ const UploadFiles = (props) => {
     }
 
     //upload files
+    setFiles2Upload(files.length)
+
     let promises = []
     for (var i = 0; i < files.length; i++) {
       let curr = files[i]
@@ -143,9 +148,13 @@ const UploadFiles = (props) => {
             },
           })
             .then((response) => {
+              uploaded += 1
+              setFilesUploaded(uploaded)
               resolve('Upload ' + curr.meta.name + ' successfully!')
             })
             .catch((error) => {
+              uploaded += 1
+              setFilesUploaded(uploaded)
               resolve('Upload ' + curr.meta.name + ' failed! ' + error)
             })
         }),
@@ -155,13 +164,19 @@ const UploadFiles = (props) => {
     Promise.all(promises)
       .then((response) => {
         allFiles.forEach((f) => f.remove())
+        let errors = 0
         response.forEach((e) => {
           if (e.includes('failed')) {
             notify('error', e)
+            errors += 1
           } else {
-            notify('success', e)
+            //notify('success', e)
           }
         })
+        if (errors === 0) {
+          notify('success', 'Files uploaded successfully!', 2000)
+          //setTimeout(() => props.history.push("/user/files"), 2000);
+        }
         setSubmitting(false)
         props.reloadTableData()
       })
@@ -173,7 +188,10 @@ const UploadFiles = (props) => {
 
   return (
     <>
-      <LoaderDialog loading={submitting} text="Uploading..." />
+      <LoaderDialog
+        loading={submitting}
+        text={'Uploading...' + Math.round((filesUploaded / files2upload) * 100) + '%'}
+      />
       <ToastContainer />
       <div className="clearfix">
         <h4 className="pt-3">Upload Files</h4>