Skip to content
Snippets Groups Projects

130 inc batch async

Merged Gareth Hughes requested to merge 130_IncBatchAsync into master
Compare and Show latest version
1 file
+ 5
4
Compare changes
  • Side-by-side
  • Inline
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>
Loading