Launch UI

src/app/App.js

@@ -6,43 +6,64 @@ import './App.css';
 
 class App extends Component {
     constructor(props) {
-	super(props);
+        super(props);
         this.state = {frameworks: this.props.frameworkImages,
-                      disableAllButton: false};
-	this.loadingGif = "https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif";
-	this.click = this.click.bind(this);
-	this.api = window.location.protocol+"//"+window.location.href.split('/')[2]
+                        disableAllButtons: false,
+                        ui_url: null,
+                        cid: null};
+        this.loadingGif = "https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif";
+        this.select = this.select.bind(this);
+        this.confirm = this.confirm.bind(this);
+        this.api = window.location.protocol+"//"+window.location.href.split('/')[2];
     }
 
-    click(f) {
-        var updatedFramework = this.state.frameworks
-        var type = typeof updatedFramework;
-        console.log(type);
+    select(f) {
+        var updatedFramework = this.state.frameworks;
         var index = updatedFramework.indexOf(f);
         updatedFramework[index].loading = true;
-        this.setState({framework:updatedFramework, disableAllButton:true})
+        this.setState({framework:updatedFramework, disableAllButtons:true});
+
+        fetch('http://localhost:5656/create_container', {
+        //fetch(this.api + '/create_container', {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(f)
+            }).then((resp) => resp.json()).then(data => {
+                var loadedFramework = this.state.frameworks;
+                loadedFramework[index].loaded = true;
+                console.log(data["cid"]);
+                this.setState({framework:loadedFramework, cid: data['cid'], ui_url: data['ui_url']})
+            });
+    }
 
-        fetch(this.api + '/create_container', {
-                  method: 'POST',
-                  headers: {
+    confirm() {
+        //fetch(this.api + '/confirm', {
+        fetch('http://localhost:5656/confirm', {
+            method: 'POST',
+            headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',
-              },
-              body: JSON.stringify(f)
-          }).then((resp) => resp.json()).then(function(res){
-                window.location = res['ui_url']; 
-	        });
-          console.log(f)
+            },
+            body: JSON.stringify({cid: this.state.cid})
+        }).then((resp) => resp.json()).then(data => {
+            console.log(data);
+            if (data["verified"] == "confirmed") {
+                window.location = this.state.ui_url
+            }
+        });
+
     }
 
     render() {
-	      console.log(this.state.disableAllButton);
-	      return (
+        return (
             <div className="GPU-CLUSTER-FRONTEND">
                 <Nav/> 
-                <Frameworks disabled={this.state.disableButton} frameworks={this.state.frameworks} handler={this.click} loadingGif={this.loadingGif} />
-				        <Footer/>
-			      </div>
+                <Frameworks disabled={this.state.disableAllButtons} frameworks={this.state.frameworks} confirm_handler={this.confirm} select_handler={this.select} loadingGif={this.loadingGif} />
+				<Footer/>
+			</div>
         );
     }
 }

src/app/footer/Footer.js

@@ -8,7 +8,7 @@ class Footer extends Component {
             <footer className="footer">
                 <div className="small-4 medium-4 large-4 columns">
                     <a id="illinois" href="https://illinois.edu" target="_blank">
-                        <img class="logo" id="illinois" src="/new_illinois.svg"></img>
+                        <img className="logo" id="illinois" src="/new_illinois.svg"></img>
                     </a>
                 </div>
                 <div className="small-4 medium-4 large-4 columns">

src/app/frameworks/Frameworks.js

@@ -3,13 +3,12 @@ import './Frameworks.css'
 import Framework from './framework/Framework.js'
 
 class Grid extends Component {
-    renderFramework(f, t, cl) {
-        return <Framework disabled={this.props.disabled} framework={f} onClickHandler={this.props.handler} loadingGif={this.props.loadingGif}/>
+    renderFramework(f) {
+        return <Framework disabled={this.props.disabled} framework={f} onConfirmHandler={this.props.confirm_handler} onSelectHandler={this.props.select_handler} loadingGif={this.props.loadingGif}/>
     }
 
     render() {
         var frameworks = []
-        console.log(this.props.grid)
         for (var f = 0; f < this.props.frameworks.length; f++) {
             frameworks.push(this.renderFramework(this.props.frameworks[f]));
         }

src/app/frameworks/framework/Framework.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
 .Framework {
     border: 0px;
     border-bottom: 3px;
@@ -24,7 +25,7 @@
 .Framework > .label > .name {
     color: #333333;
     display:block;
-    font-size: 0.5em;
+    font-size: 0.25em;
     font-family: "Roboto Mono", monospace;
     text-align: center;
 } 
@@ -46,4 +47,48 @@
     width: 15vw;
     max-height: 200px;
     max-width: 200px;
+}
+
+.confirm {
+    height: 5vw;
+    width: 15vw;
+    font-size: 12pt;
+    background-color: #262626;
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-family: "Roboto Mono", monospace;
+    margin-top: 3vw;
+    max-height: 75px;
+    max-width: 250px;
+
+}
+
+.confirm:hover {
+    background-color: #4089C9; 
+    text-decoration: underline;
+    -o-transition:.5s;
+    -ms-transition:.5s;
+    -moz-transition:.5s;
+    -webkit-transition:.5s;
+    transition:.5s;
+}
+
+.confirm_box {
+    border: 0px;
+    border-bottom: 3px;
+    border-color: #333333;
+    background-color: #fff;
+    height: 24vw;
+    width: 25vw;
+    max-height: 400px;
+    max-width: 400px;
+    font-size:4.5vw;
+    color: #fff;
+    font-size-adjust:auto;
+    border-style: solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

src/app/frameworks/framework/Framework.js

@@ -3,16 +3,25 @@ import './Framework.css'
 
 class Framework extends Component {
     render() {
-	console.log(this.props.disabled);
-        return (
-		<button className="Framework" onClick={() => this.props.onClickHandler(this.props.framework)} disabled={this.props.disabled || this.props.framework.disabled}>
-                <img className="logo" src={this.props.framework.loading ? this.props.loadingGif : this.props.framework.img} alt=""/>
-                <div className="label"> 
-                    <span className="name">{this.props.framework.name}</span>
-                    <span className="details">{this.props.framework.details}</span>
+        if (this.props.framework.loaded) {
+            return (
+                <div className="confirm_box">
+                    <div className="confirm_padding"></div>
+                    <button className="confirm" onClick={() => this.props.onConfirmHandler(this.props.framework)}>Launch</button>
                 </div>
-            </button>
-        )
+            )
+        } else {
+            return (
+                <button className="Framework" onClick={() => this.props.onSelectHandler(this.props.framework, this.props.idx)} disabled={this.props.disabled || this.props.framework.disabled}>
+                    <img className="logo" src={this.props.framework.loading ? this.props.loadingGif : this.props.framework.img} alt=""/>
+                    <div className="label"> 
+                        <span className="name">{this.props.framework.name}</span>
+                        <span className="details">{this.props.framework.details}</span>
+                    </div>
+                </button>
+            )
+        }
+
     }
 }