125 batch workflow

Pages for batch workflow. Hidden at the moment.

src/components/services/Batch.js

@@ -8,24 +8,74 @@ import LoadingSpinner from "../LoadingSpinner";
 
 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 [defaultWorkflow] = "https://github.com/ESAP-WP5/binder-empty";
 
    const [state, setState] = useState({
+      showDeploy: false,
+      showNext: false,
       showMonitor: false,
       showSubmit: false,
-      showJobStatus: false
+      showJobStatus: false,
+      showMoreButton: true,
+      numberOfitemsShown: 3,
+      loading: true
+   });
+
+  {/* Cannot be included in the above for some reason - breaks */}
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const [showFacilities, setShowFacilities] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const [advSearchFilters, setAdvSearchFilters] = useState({
+     searchAuthorFilter: "",
+     searchRuntimePlatformFilter: "",
+     searchTypeFilter: ""
+   });
+
+
+  const [advSearchValues, setAdvSearchValues] = useState({
+    searchAuthor: "",
+    searchRuntimePlatform: "",
+    searchType: ""
    });
 
 
+  // Fetch Notebooks
+  useEffect(() => {
+      axios
+      .get(api_host + "batch/workflows/search")
+        .then((response) => {
+          setList_of_workflows(response.data.results);
+          setWorkflowURL(defaultWorkflow);
+          setState(prev => ({...prev, loading: true}));
+        });
+   }, [api_host]);
+
+  // Fetch JHubs
+  useEffect(() => {
+      axios
+      .get(api_host + "batch/facilities/search")
+        .then((response) => {
+          setList_of_batchSystems(response.data.results);
+          setBatchSystemURL(response.data.results[0].url);
+        });
+  }, [api_host]);
+
    {/* Main Monitor Job Button */}
    const onClickMonitorJob = e => {
      e.preventDefault();
-     setState(prev => ({...prev, showSubmit: false, showMonitor: true}));
+     setState(prev => ({...prev, showSubmit: false, showMonitor: true, showDeloy: false}));
+     setShowFacilities(false);
    }
 
    {/* Main Submit Job Button */}
    const onClickSubmitJob = e => {
      e.preventDefault();
-     setState(prev => ({...prev, showSubmit: true, showMonitor: false}));
+     setState(prev => ({...prev, showNext: false, showSubmit: true, showMonitor: false}));
    }
 
    {/* Find Job from Monitor page Button */}
@@ -46,6 +96,77 @@ export default  function Batch() {
      jobID: ""
    });
  
+   const setWorkflow = event => {
+     setWorkflowURL(event.target.value);
+     setState(prev => ({...prev, showNext: true}));
+     //setShowSkip(false)
+   };
+
+   const setFacility = event => {
+     setBatchSystemURL(event.target.value);
+     setState(prev => ({...prev, showDeploy: true}));
+   };
+
+
+{/* TODO This does not work yet but not show in page atm */}
+   const showMore = e => {
+     e.preventDefault();
+     setState(prev => ({...prev, numberOfitemShown: state.numberOfitemShown + 3}));
+     if (state.numberOfitemsShown + 3 <= list_of_workflows.length) {
+       setState(prev => ({...prev, numberOfitemShown: state.numberOfitemShown + 3}));
+     } else {
+       setState(prev => ({...prev, numberOfitemShown: list_of_workflows.length, showMoreButton: false}));
+     }
+   }
+
+   const onClickNext = e => {
+     e.preventDefault();
+     setSearchTerm("");
+     setShowFacilities(true);
+     setAdvSearchValues({"searchType": "", "searchAuthor" : "", "searchRuntimePlatform" : ""});
+     setAdvSearchFilters({"searchTypeFilter": "", "searchAuthorFilter" : "", "searchRuntimePlatformFilter" : ""});
+     setState(prev => ({...prev, showSubmit: false}));
+   };
+
+
+   const handleWorkFlowChange = event => {
+     setSearchTerm(event.target.value);
+     if (event.target.value===""){
+         setState(prev => ({...prev, numberOfitemShown: 3, showMoreButton: true}));
+     } else {
+         setState(prev => ({...prev, numberOfitemShown: list_of_workflows.length, showMoreButton: false}));
+     }
+   }
+
+   const handleFacilityChange = event => {
+     setSearchTerm(event.target.value);
+     if (event.target.value===""){
+         setState(prev => ({...prev, numberOfitemShown: 3, showMoreButton: true}));
+     } else {
+         setState(prev => ({...prev, numberOfitemShown: list_of_workflows.length, showMoreButton: false}));
+     }
+   }
+
+   const facility_results = !searchTerm
+         ? list_of_batchSystems
+         : list_of_batchSystems.filter(facility =>
+             facility.name.toLowerCase().includes(searchTerm.toLocaleLowerCase())
+   );
+
+   let workflow_results = !searchTerm
+         ? list_of_workflows
+         : list_of_workflows.filter(workflow =>
+             ((typeof workflow.name === 'string') && workflow.name.toLowerCase().includes(searchTerm.toLocaleLowerCase())) ||
+             ((typeof workflow.keywords === 'string') && workflow.keywords.toLowerCase().includes(searchTerm.toLocaleLowerCase())) ||
+             ((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()))
+          );
+
+
+    //TODO Fancy Stuff Later
+    //const workflow_results_sliced = workflow_results?.slice(0, state.numberOfitemsShown) || "";
+    const workflow_results_sliced = workflow_results;
 
   return (
 
@@ -109,7 +230,83 @@ export default  function Batch() {
       <div className="advanced-search">
       <Form className="advanced-form">
        <br/><br/>
-         Batch Workflow Search will go here.
+           <input
+             className="search-large"
+             type="text"
+             placeholder="Search for Workflows"
+             value={searchTerm}
+             onChange={handleWorkFlowChange}
+           />
+
+      { state.showNext ?
+        <Button className="next-button"  onClick={onClickNext}>Next</Button>
+         : null }
+
+      <ul className="workflow-ul">
+         {workflow_results_sliced.map(item => (
+          <li className="workflow-li">
+             <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>
+
+          </li>
+        ))}
+      </ul>
+
+{/* Fancy Later TODO
+      { state.showMoreButton ?
+         <Button className="more-button" onClick={showMore}>More</Button>
+       : null }
+*/}
+ 
+       <br/><br/>
+       <br/><br/>
+       <br/><br/>
+      </Form>
+      </div>
+
+     : null }
+
+
+   { showFacilities ?
+
+    <div className="advanced-search">
+    <Form className="advanced-form">
+
+    <div className="search-buttons">
+
+    <br/><br/>
+     <input
+        className="search-large"
+        type="text"
+        placeholder="Search for Facilities"
+        value={searchTerm}
+        onChange={handleFacilityChange}
+      />
+
+      <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>
+         : null }
+
+      </div>
+
+      </div>
+
+      <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/>
+             <span><b>Description:</b> {item.description}</span> <br/>
+             <span><b>Runtime Engine: </b>{item.runtimeengine}</span>
+
+          </li>
+        ))}
+      </ul>
+
        <br/><br/>
        <br/><br/>
        <br/><br/>