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,10 +7,10 @@ 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 { api_host } = useContext(GlobalContext);
+  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, accessToken } = useContext(GlobalContext);
 
   const [defaultWorkflow] = "https://github.com/ESAP-WP5/binder-empty";
 
@@ -78,10 +79,48 @@ export default  function Batch() {
      setState(prev => ({...prev, showNext: false, showSubmit: true, showMonitor: false}));
    }
 
+
+   const checkJobStatus = uwsJobURL => {
+       const headers = {
+           'Content-Type': 'application/json',
+           "Authorization": `Bearer ${accessToken}`
+       };
+       axios.get(uwsJobURL, {headers})
+         .then((response) => {
+                  setList_job_results(response.data);
+                  if(response.data.phase == "EXECUTING") setTimeout(checkJobStatus,1000,response.data.url)
+         }).catch(error => {
+                  console.log("Error when quering batch app api with job number");
+         });
+   }
+
+   // TODO need to pass dirac job number here (mayb another job number)
    {/* Find Job from Monitor page Button */}
    {/* TODO This will have to go off to the Async and create a ESAP worker job?? */}
    const onClickFindJob = e => {
      e.preventDefault();
+     const typeParam = {};
+     typeParam['key'] = 'type';
+     typeParam['value'] = 'batch.query';
+     const jobIDparam = {};
+     jobIDparam['key'] = 'jobid';
+     jobIDparam['value'] = jobValues.jobID;
+     const content = {};
+     content['runId']  = 'batch';
+     content['parameters'] = [typeParam,jobIDparam];
+     const headers = {
+         'Content-Type': 'application/json',
+         "Authorization": `Bearer ${accessToken}`
+     };
+     axios.post(api_host + "uws/jobs/", content, {headers})
+             .then((response) => {
+                  return axios.post(response.data.url + "phase/", {PHASE:"RUN"}, {headers})
+         }).then((response) => {
+                  setList_job_results(response.data);
+                  setTimeout(checkJobStatus,1000,response.data.url)
+         }).catch(error => {
+                  console.log("Error when quering batch app api with job number");
+         });
      setState(prev => ({...prev, showMonitor: true, showSubmit: false, showJobStatus: true}));
    }
 
@@ -161,6 +200,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 +208,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 +237,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 +256,12 @@ export default  function Batch() {
             <div className="advanced-search">
                Job ID: {jobValues.jobID}
                <br/>
-               Job Status: Complete
+               Job Status: {job_results.phase}
+               <br/>
+               Creation Time: {job_results.creationTime}
+               <br/>
+               <br/>
+               Job Status: {JSON.stringify(job_results.results)}
             </div>
           : null }
 
@@ -248,7 +297,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 +337,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 +352,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>