Add initial menu to IDA / Separate DLAAS & BinderHubs

src/assets/Interactive.css

@@ -241,3 +241,11 @@
     width:50%;
     margin-left:200px;
 }
+
+.ida-menu-items {
+  width:280px;
+  background-color:white;
+  color:black;
+  height:40px;
+  margin-bottom:15px;
+}

src/components/services/Interactive.js

@@ -18,8 +18,10 @@ export default  function Interactive() {
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [showMoreButton, setShowMoreButton] = useState(true);
   const [showDeploy, setShowDeploy] = useState(false);
+  const [showInitMenu, setShowInitMenu] = useState(true);
+  const [showNotebooks, setShowNotebooks] = useState(false);
   const [numberOfitemsShown, setNumberOfitemsShown] = useState(3)
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [defaultWorkflow] = "https://github.com/ESAP-WP5/binder-empty";
 
   const [advSearchFilters, setAdvSearchFilters] = useState({
@@ -34,8 +36,8 @@ export default  function Interactive() {
     searchType: ""
   });
 
-
   // Fetch Notebooks
+  /*
   useEffect(() => {
       axios
       .get(api_host + "ida/workflows/search")
@@ -46,16 +48,16 @@ export default  function Interactive() {
         });
    }, [api_host]);
 
-
   // Fetch JHubs
   useEffect(() => {
       axios
-      .get(api_host + "ida/facilities/search")
+      .get(api_host + "ida/facilities/search?facilitytype=jupyterhub")
         .then((response) => {
           setList_of_idaSystems(response.data.results);
           setIdaSystemURL(response.data.results[0].url);
         });
   }, [api_host]);
+  */
 
   if (loading) {
     return (
@@ -64,7 +66,6 @@ export default  function Interactive() {
     { !showFacilities ?
 
     <div className="workflow-div">
-    <h2>Workflows</h2>
      </div>
     : null }
          <LoadingSpinner/>
@@ -74,7 +75,9 @@ export default  function Interactive() {
   }
 
   if ((!list_of_workflows) || (!list_of_idaSystems)) {
-    return null;
+     setList_of_idaSystems([]);
+     setList_of_workflows([]);
+     return null;
   }
 
   const handleChange = event => {
@@ -178,6 +181,42 @@ export default  function Interactive() {
 
   };
 
+  const onClickNotebooks = e => {
+    e.preventDefault();
+    setShowInitMenu(false);
+    setLoading(true);
+
+    axios
+    .get(api_host + "ida/facilities/search?facilitytype=jupyterhub")
+      .then((response) => {
+        setList_of_idaSystems(response.data.results);
+        setIdaSystemURL(response.data.results[0].url);
+      });
+    axios
+    .get(api_host + "ida/workflows/search")
+      .then((response) => {
+        setList_of_workflows(response.data.results);
+        setWorkflowURL(defaultWorkflow);
+        setLoading(false);
+        setShowNotebooks(true);
+
+      });
+
+  };
+
+  const onCLickLoadDLAAS = e => {
+    e.preventDefault();
+    setShowFacilities(true);
+    setShowInitMenu(false);
+    axios
+    .get(api_host + "ida/facilities/search?facilitytype=dlaas")
+      .then((response) => {
+        setList_of_idaSystems(response.data.results);
+        setIdaSystemURL(response.data.results[0].url);
+      });
+
+  };
+
   const showMore = e => {
     e.preventDefault();
     if (numberOfitemsShown + 3 <= list_of_workflows.length) {
@@ -197,10 +236,20 @@ export default  function Interactive() {
 
     <h1>Interactive Analysis</h1>
 
-    { !showFacilities ?
+    { showInitMenu ?
+      <div>
+          <br /><br/>
+          <Button className="ida-menu-items" onClick={onCLickLoadDLAAS}>DLAAS</Button>
+          <br />
+          <Button className="ida-menu-items" onClick={onClickNotebooks}>Binder/Jupyter Notebooks</Button>
+      </div>
+         : null }
+
+
+    { !showFacilities && showNotebooks ?
 
     <div className="workflow-div">
-    <h2>Workflows</h2>
+    <h2>Notebooks</h2>
 
     <Form className="mt-5">
 
@@ -220,7 +269,7 @@ export default  function Interactive() {
          : null }
 
       { showNext ?
-        <Button className="next-button"  onClick={onClickNext}>Next</Button>
+        <Button	 className="next-button"  onClick={onClickNext}>Next</Button>
          : null }
       <br/>
       <a href="#" onClick={onClickAdvanced}>Advanced Search</a>