130 inc batch async

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

src/components/services/SubmitJob.js

@@ -7,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);
@@ -18,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)
@@ -39,22 +40,24 @@ export default function SubmitJob() {
    const onClickSubmitButton = e => {
      e.preventDefault();
 
-     const tpars = {};
-     tpars['key'] = 'type';
-     tpars['value'] = 'batch.query';
+     const typeParam = {};
+     typeParam['key'] = 'type';
+     typeParam['value'] = 'batch.query';
 
-     const pars = paramKeys.map((key,value) => {
+     const variableParams = paramKeys.map((key,value) => {
         return({key: key, value: params[key]})
      });
 
-     const pars2 = pars.concat(tpars);
+     const combinedParams = variableParams.concat(typeParam);
 
      const content = {};
-     content['runId']  = 'test';
-     content['parameters'] = pars2;
+     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 })
@@ -121,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/>
@@ -142,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/>
@@ -159,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>