130 inc batch async

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

src/components/services/Batch.js

 import React, { useState, useEffect, useContext } from "react";
+import { Link } from 'react-router-dom';
 import axios from "axios";
 import { Button, Form, Container } from "react-bootstrap";
 import { BATCHContext } from "../../contexts/BATCHContext";
@@ -6,9 +7,9 @@ import { GlobalContext } from "../../contexts/GlobalContext";
 import "../../assets/Interactive.css";
 import LoadingSpinner from "../LoadingSpinner";
 
-export default  function Batch() {
+export default function Batch() {
 
-  const {batchSystemURL, setBatchSystemURL, workflowURL, setWorkflowURL, list_of_workflows, setList_of_workflows, list_of_batchSystems, setList_of_batchSystems} = useContext(BATCHContext);
+  const {batchSystemURL, setBatchSystemURL, workflowURL, setWorkflowURL, list_of_workflows, setList_of_workflows, list_of_batchSystems, setList_of_batchSystems, list_job_results, setList_job_results} = useContext(BATCHContext);
   const { api_host } = useContext(GlobalContext);
 
   const [defaultWorkflow] = "https://github.com/ESAP-WP5/binder-empty";
@@ -82,6 +83,14 @@ export default  function Batch() {
    {/* TODO This will have to go off to the Async and create a ESAP worker job?? */}
    const onClickFindJob = e => {
      e.preventDefault();
+     axios
+      .get(api_host + "batch/worker/query?jobID=" + jobValues.jobID)
+        .then((response) => {
+          setList_job_results(response.data);
+         })
+         .catch(function (error) {
+           console.log("Error when quering batch app api with job number");
+         });
      setState(prev => ({...prev, showMonitor: true, showSubmit: false, showJobStatus: true}));
    }
 
@@ -161,6 +170,7 @@ export default  function Batch() {
              ((typeof workflow.author === 'string') && workflow.author.toLowerCase().includes(searchTerm.toLocaleLowerCase())) ||
              ((typeof workflow.runtimePlatform === 'string') && workflow.runtimePlatform.toLowerCase().includes(searchTerm.toLocaleLowerCase())) ||
              ((typeof workflow.description === 'string') && workflow.description.toLowerCase().includes(searchTerm.toLocaleLowerCase()))
+             ((typeof workflow.url === 'string') && workflow.url.toLowerCase().includes(searchTerm.toLocaleLowerCase()))
           );
 
 
@@ -168,6 +178,8 @@ export default  function Batch() {
     //const workflow_results_sliced = workflow_results?.slice(0, state.numberOfitemsShown) || "";
     const workflow_results_sliced = workflow_results;
 
+    const job_results = list_job_results;
+
   return (
 
 
@@ -195,16 +207,18 @@ export default  function Batch() {
 
        <br/><br/>
 
+
         <input
              type="text"
              className="advanced-float-left"
              placeholder="Job ID Number"
              onChange={handleJobIDChange}
+             autoComplete="off"
          />
 
-       <br/><br/>
-         <Button onClick={onClickFindJob} className="search-button">Find Batch Jobs </Button>
-       <br/><br/>
+         <br/><br/>
+           <Button onClick={onClickFindJob} className="search-button">Find Batch Jobs </Button>
+         <br/><br/>
 
          {/* If find batch jobs button pressed do/show this:  */}
          {/* TODO This will be where the magic happens and information from Async is returned */}
@@ -212,7 +226,7 @@ export default  function Batch() {
             <div className="advanced-search">
                Job ID: {jobValues.jobID}
                <br/>
-               Job Status: Complete
+               Job Status: {job_results.phase}
             </div>
           : null }
 
@@ -248,7 +262,7 @@ export default  function Batch() {
              <label className="container workflow-checkbox"><input type="radio" name="workflow" onChange={setWorkflow} value={item.url}     />  <span className="checkmark"></span></label><h5>{item.name}</h5><br/>
              <span><b>Description: </b> <span dangerouslySetInnerHTML={{ __html: item.description }}></span></span><br/>
              <span><b>Keywords: </b>{item.keywords}</span> <br/>
-             <span><b>.... stuff </b>{item.keywords}</span>
+             <span><b>Steering File: </b>{item.url}</span>
 
           </li>
         ))}
@@ -288,8 +302,12 @@ export default  function Batch() {
       <div className="deploy-buttons">
 
       { state.showDeploy ?
-         //<Button className="deploy-button" href={api_host + "batch/deploy?facility=" + batchSystemURL + "&workflow=" + workflowURL} target="_blank">Deploy</Button>
-         <Button className="deploy-button" href={api_host + "batch/CONCORDIA"}>Next</Button>
+         <Link to={{ pathname: "batch/SubmitJob", state: {workflowfile: workflowURL, facility: batchSystemURL} }}>
+           <Button className="deploy-button">Deploy</Button>
+         </Link>
+         //<Button className="deploy-button" href="batch/SubmitJob" >Deploy</Button>
+         //<Button className="deploy-button" href={api_host + "batch/worker/load?workflowfile=" + workflowURL + "&facility=" + batchSystemURL} >Deploy</Button>
+         //<Button className="deploy-button" href={api_host + "batch/CONCORDIA"}>Next</Button>
          : null }
 
       </div>
@@ -299,7 +317,7 @@ export default  function Batch() {
       <ul className="facility-ul">
          {facility_results?.map(item => (
           <li className="facility-li">
-             <label className="container facility-checkbox"><input className="radio" onChange={setFacility} name="facility" type="radio" value={item.url} />  <span className="checkmark"></span></label><h5>{item.name}</h5><br/>
+             <label className="container facility-checkbox"><input className="radio" onChange={setFacility} name="facility" type="radio" value={item.facilitytype} />  <span className="checkmark"></span></label><h5>{item.name}</h5><br/>
              <span><b>Description:</b> {item.description}</span> <br/>
              <span><b>Runtime Engine: </b>{item.runtimeengine}</span>