130 inc batch async

Add code to batch page to send job number to batch app.

src/components/services/SubmitJob.js

-//'{"runId": "dirac1", 
-//"parameters": [{"key": "type", "value": "batch.query"}, {"key": "someparam", "value": "somevalue"}]}'
-                        //{'key': 'someparam', 'value': 'somevalue'}
-
 import axios from "axios";
 import React, { useContext, useEffect, useState } from "react";
 import { Button, Form, Container } from "react-bootstrap";
@@ -11,7 +7,7 @@ import BatchParametersComponent from "./Batch/BatchParametersComponent";
 
 export default function SubmitJob() {
 
-   const { api_host } = useContext(GlobalContext);
+   const { api_host, accessToken } = useContext(GlobalContext);
    const location = useLocation();
    const { workflowfile, facility } = location.state;
    const [jobData, setJobData] = useState(undefined);
@@ -22,9 +18,10 @@ export default function SubmitJob() {
       showFinal: false,
       url: ""
    });
-   const [uwsState, setUwsState] = useState([]);
+   const [uwsState, setUwsState] = useState({});
    const [uwsStateRun, setUwsStateRun] = useState([]);
 
+
    useEffect(() => {
       axios
          .get(api_host + "batch/worker/load?workflowfile=" + workflowfile)
@@ -42,27 +39,27 @@ export default function SubmitJob() {
 
    const onClickSubmitButton = e => {
      e.preventDefault();
-     console.log(params);
-     var pars = [];
-     paramKeys.map((key) =>
-          pars.push("key: " + [key] + ", value: " + params[key]) 
-     );
-     console.log(pars);
-     const content = {
-         'runId': 'test', 
-         'parameters': [{'key': 'type','value': 'batch.query'},
-                      pars.stringify()
-                      //{'key': 'someparam', 'value': 'somevalue'}
-                      ]
-     };
-     //const content = {};
-     //content['runid'] = 'test';
-     //content['parameters'] = [{'key': 'type','value': 'batch.query'},pars.toString()];
-     //content['parameters'] = [{'key': 'type','value': 'batch.query'},{'key': 'someparam', 'value': 'somevalue'}];
-     console.log(content)
+
+     const typeParam = {};
+     typeParam['key'] = 'type';
+     typeParam['value'] = 'batch.query';
+
+     const variableParams = paramKeys.map((key,value) => {
+        return({key: key, value: params[key]})
+     });
+
+     const combinedParams = variableParams.concat(typeParam);
+
+     const content = {};
+     content['runId']  = 'batch';
+     content['parameters'] = combinedParams
+
      const headers = {
          'Content-Type': 'application/json'
+         //TODO does not work for me loaclly at the moment but needs adding
+         //"Authorization": `Bearer ${accessToken}`
      };
+
      axios.post(api_host + "uws/jobs/", content, { headers })
              .then((response) => {
                 const data = response.data;
@@ -77,7 +74,8 @@ export default function SubmitJob() {
          setState(prev => ({...prev, showRunButton: false, showFinal: false}));
      } else {
          setState(prev => ({...prev, showRunButton: true}));
-     }
+     };
+
    };
 
    const onClickRunButton = e => {
@@ -126,7 +124,7 @@ export default function SubmitJob() {
    return (
 
     <div>
-    <Container className="ida" fluid>
+    <Container className="batch" fluid>
 
     <h1>Batch Analysis Submission</h1><br/>
     <h4>{jobData.title}</h4><br/>
@@ -147,10 +145,15 @@ export default function SubmitJob() {
          <Button onClick={onClickSubmitButton} className="submit-button">Submit</Button>
       : null }
 
-
       <br/><br/><br/>
       { state.showRunButton ?
-         JSON.stringify(uwsState)
+         <>
+            Job Number: {String(uwsState.url).slice(0,-1).substring(String(uwsState.url).slice(0,-1).lastIndexOf("/")+1,String(uwsState.url).slice(0,-1).length)}
+            <br/>
+            Status: {uwsState.phase}
+            <br/><br/>
+            Select RUN to submit the job with the above parameters or ABORT to cancel.<br/>
+         </>
       : null }
 
       <br/><br/><br/>
@@ -164,7 +167,12 @@ export default function SubmitJob() {
 
       <br/><br/><br/>
       { state.showFinal ?
-         JSON.stringify(uwsStateRun)
+      <>
+         Job Number: {String(uwsState.url).slice(0,-1).substring(String(uwsState.url).slice(0,-1).lastIndexOf("/")+1,String(uwsState.url).slice(0,-1).length)}
+         <br/>
+         Status: {uwsStateRun.phase}
+         <br/><br/>
+      </>
       : null }
 
     </Container>