From 5b79bbf779095b7fb7f6d5f3e7de7ecc557e0477 Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 10:45:49 -0600
Subject: [PATCH 01/10] ready to test

---
 src/app/App.js                             | 52 +++++++++++-----------
 src/app/frameworks/Frameworks.js           |  6 +--
 src/app/frameworks/framework/Framework.css | 21 ++++++++-
 src/app/frameworks/framework/Framework.js  | 25 +++++++----
 4 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index 6fe528b..7db51ce 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -6,43 +6,45 @@ import './App.css';
 
 class App extends Component {
     constructor(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]
+        super(props);
+            this.state = {frameworks: this.props.frameworkImages,
+                          disableAllButtons: false,
+                          selects: Array.apply(null, Array(this.props.frameworkImages.length)).map(Number.prototype.valueOf,0),
+                          ui_url: null};
+        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];
     }
         
-    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(this.api + '/create_container', {
-                  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)
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(f)
+            }).then((resp) => resp.json()).then(function(res){
+                this.setState({ui_url: res['ui_url']}); 
+            });
+    }
+
+    confirm() {
+        window.location = this.state.ui_url;
     }
     
     render() {
-	      console.log(this.state.disableAllButton);
 	      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} selection={this.state.selects} confirm_handler={this.confirm} select_handler={this.select} loadingGif={this.loadingGif} />
+				<Footer/>
+			</div>
         );
     }
 }
diff --git a/src/app/frameworks/Frameworks.js b/src/app/frameworks/Frameworks.js
index 15dd126..476bec9 100644
--- a/src/app/frameworks/Frameworks.js
+++ b/src/app/frameworks/Frameworks.js
@@ -3,15 +3,15 @@ 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, i) {
+        return <Framework disabled={this.props.disabled} framework={f} onConfirmHandler={this.props.confirm_handler} onSelectHandler={this.props.select_handler} selected={this.props.selects[i]} 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]));
+            frameworks.push(this.renderFramework(this.props.frameworks[f], f));
         }
 
         return (
diff --git a/src/app/frameworks/framework/Framework.css b/src/app/frameworks/framework/Framework.css
index 033a750..8433862 100644
--- a/src/app/frameworks/framework/Framework.css
+++ b/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,22 @@
     width: 15vw;
     max-height: 200px;
     max-width: 200px;
+}
+
+.confirm {
+    height: 2.5vw;
+    width: 5vw;
+    font-size: 0.15em;
+    background-color: #262626;
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-family: "Roboto Mono", monospace;
+
+}
+
+.confirm > hover {
+    background-color: #4089C9; 
+    text-decoration: underline;
 }
\ No newline at end of file
diff --git a/src/app/frameworks/framework/Framework.js b/src/app/frameworks/framework/Framework.js
index 213ea33..6b6b1a2 100644
--- a/src/app/frameworks/framework/Framework.js
+++ b/src/app/frameworks/framework/Framework.js
@@ -4,15 +4,22 @@ 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>
-                </div>
-            </button>
-        )
+        if (this.props.selected) {
+            return (
+                <button className="confirm" onClick={() => this.props.onConfirmHandler(this.props.framework)}>Launch</button>
+            )
+        } else {
+            return (
+                <button className="Framework" onClick={() => this.props.onSelectHandler(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>
+                    </div>
+                </button>
+            )
+        }
+
     }
 }
 

From 12ef7efb29bd19cd82920681ec802cc30f90e6dc Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 10:52:08 -0600
Subject: [PATCH 02/10] bind functions

---
 src/app/App.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/App.js b/src/app/App.js
index 7db51ce..c642c4a 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -12,7 +12,8 @@ class App extends Component {
                           selects: Array.apply(null, Array(this.props.frameworkImages.length)).map(Number.prototype.valueOf,0),
                           ui_url: null};
         this.loadingGif = "https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif";
-        this.click = this.click.bind(this);
+        this.select = this.select.bind(this);
+        this.confirm = this.confirm.bind(this);
         this.api = window.location.protocol+"//"+window.location.href.split('/')[2];
     }
         

From bbfa66f9034c91ea97be51aa9764560aeaf97844 Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 10:55:07 -0600
Subject: [PATCH 03/10] selection

---
 src/app/App.js                   | 4 ++--
 src/app/frameworks/Frameworks.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index c642c4a..ec84529 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -9,7 +9,7 @@ class App extends Component {
         super(props);
             this.state = {frameworks: this.props.frameworkImages,
                           disableAllButtons: false,
-                          selects: Array.apply(null, Array(this.props.frameworkImages.length)).map(Number.prototype.valueOf,0),
+                          framework_selection: Array.apply(null, Array(this.props.frameworkImages.length)).map(Number.prototype.valueOf,0),
                           ui_url: null};
         this.loadingGif = "https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif";
         this.select = this.select.bind(this);
@@ -43,7 +43,7 @@ class App extends Component {
 	      return (
             <div className="GPU-CLUSTER-FRONTEND">
                 <Nav/> 
-                <Frameworks disabled={this.state.disableAllButtons} frameworks={this.state.frameworks} selection={this.state.selects} confirm_handler={this.confirm} select_handler={this.select} loadingGif={this.loadingGif} />
+                <Frameworks disabled={this.state.disableAllButtons} frameworks={this.state.frameworks} selected_framework={this.state.framework_selection} confirm_handler={this.confirm} select_handler={this.select} loadingGif={this.loadingGif} />
 				<Footer/>
 			</div>
         );
diff --git a/src/app/frameworks/Frameworks.js b/src/app/frameworks/Frameworks.js
index 476bec9..bb15c3f 100644
--- a/src/app/frameworks/Frameworks.js
+++ b/src/app/frameworks/Frameworks.js
@@ -4,7 +4,7 @@ import Framework from './framework/Framework.js'
 
 class Grid extends Component {
     renderFramework(f, i) {
-        return <Framework disabled={this.props.disabled} framework={f} onConfirmHandler={this.props.confirm_handler} onSelectHandler={this.props.select_handler} selected={this.props.selects[i]} loadingGif={this.props.loadingGif}/>
+        return <Framework disabled={this.props.disabled} framework={f} onConfirmHandler={this.props.confirm_handler} onSelectHandler={this.props.select_handler} selected={this.props.selected_framework[i]} loadingGif={this.props.loadingGif}/>
     }
 
     render() {

From 698892e8ab5016975c5ffc4faaabe580d697dbf1 Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 11:21:10 -0600
Subject: [PATCH 04/10] use bools

---
 src/app/App.js                            | 11 +++++++----
 src/app/frameworks/Frameworks.js          |  2 +-
 src/app/frameworks/framework/Framework.js |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index ec84529..dfd5a29 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -9,7 +9,7 @@ class App extends Component {
         super(props);
             this.state = {frameworks: this.props.frameworkImages,
                           disableAllButtons: false,
-                          framework_selection: Array.apply(null, Array(this.props.frameworkImages.length)).map(Number.prototype.valueOf,0),
+                          framework_selection: new Array(this.props.frameworkImages.length).fill(false),
                           ui_url: null};
         this.loadingGif = "https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif";
         this.select = this.select.bind(this);
@@ -17,7 +17,7 @@ class App extends Component {
         this.api = window.location.protocol+"//"+window.location.href.split('/')[2];
     }
         
-    select(f) {
+    select(f, i) {
         var updatedFramework = this.state.frameworks;
         var index = updatedFramework.indexOf(f);
         updatedFramework[index].loading = true;
@@ -30,8 +30,11 @@ class App extends Component {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(f)
-            }).then((resp) => resp.json()).then(function(res){
-                this.setState({ui_url: res['ui_url']}); 
+            }).then((resp) => resp.json()).then(function(res) {
+                selected = this.state.framework_selection;
+                selected[i] = true;
+                this.setState({framework_selection: selected, ui_url: res['ui_url']}); 
+                console.log("container is ready");
             });
     }
 
diff --git a/src/app/frameworks/Frameworks.js b/src/app/frameworks/Frameworks.js
index bb15c3f..2061dee 100644
--- a/src/app/frameworks/Frameworks.js
+++ b/src/app/frameworks/Frameworks.js
@@ -4,7 +4,7 @@ import Framework from './framework/Framework.js'
 
 class Grid extends Component {
     renderFramework(f, i) {
-        return <Framework disabled={this.props.disabled} framework={f} onConfirmHandler={this.props.confirm_handler} onSelectHandler={this.props.select_handler} selected={this.props.selected_framework[i]} loadingGif={this.props.loadingGif}/>
+        return <Framework disabled={this.props.disabled} framework={f} onConfirmHandler={this.props.confirm_handler} onSelectHandler={this.props.select_handler} idx={i} selected={this.props.selected_framework[i]} loadingGif={this.props.loadingGif}/>
     }
 
     render() {
diff --git a/src/app/frameworks/framework/Framework.js b/src/app/frameworks/framework/Framework.js
index 6b6b1a2..0762a26 100644
--- a/src/app/frameworks/framework/Framework.js
+++ b/src/app/frameworks/framework/Framework.js
@@ -10,7 +10,7 @@ class Framework extends Component {
             )
         } else {
             return (
-                <button className="Framework" onClick={() => this.props.onSelectHandler(this.props.framework)} disabled={this.props.disabled || this.props.framework.disabled}>
+                <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>

From 09f3f3f11cf1873438cc4a044d021c5744cc7bc7 Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 11:22:05 -0600
Subject: [PATCH 05/10] use bools

---
 src/app/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/App.js b/src/app/App.js
index dfd5a29..2effc63 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -31,7 +31,7 @@ class App extends Component {
                 },
                 body: JSON.stringify(f)
             }).then((resp) => resp.json()).then(function(res) {
-                selected = this.state.framework_selection;
+                var selected = this.state.framework_selection;
                 selected[i] = true;
                 this.setState({framework_selection: selected, ui_url: res['ui_url']}); 
                 console.log("container is ready");

From f91334daf0092070d8e8850867e71b39a06c102a Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 16:46:20 -0600
Subject: [PATCH 06/10] working needs styling

---
 src/app/App.js                            | 27 +++++++++++------------
 src/app/footer/Footer.js                  |  2 +-
 src/app/frameworks/Frameworks.js          |  6 ++---
 src/app/frameworks/framework/Framework.js |  5 +++--
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index 2effc63..e4bf2b4 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -7,34 +7,32 @@ import './App.css';
 class App extends Component {
     constructor(props) {
         super(props);
-            this.state = {frameworks: this.props.frameworkImages,
-                          disableAllButtons: false,
-                          framework_selection: new Array(this.props.frameworkImages.length).fill(false),
-                          ui_url: null};
+        this.state = {frameworks: this.props.frameworkImages,
+                        disableAllButtons: false,
+                        ui_url: 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];
     }
         
-    select(f, i) {
+    select(f) {
         var updatedFramework = this.state.frameworks;
         var index = updatedFramework.indexOf(f);
         updatedFramework[index].loading = true;
         this.setState({framework:updatedFramework, disableAllButtons:true});
-
-        fetch(this.api + '/create_container', {
+        //TODO: CHANGE BACK
+        fetch('http://localhost:5656/dummy_create_container', {
                 method: 'POST',
                 headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(f)
-            }).then((resp) => resp.json()).then(function(res) {
-                var selected = this.state.framework_selection;
-                selected[i] = true;
-                this.setState({framework_selection: selected, ui_url: res['ui_url']}); 
-                console.log("container is ready");
+            }).then((resp) => resp.json()).then(data => {
+                var loadedFramework = this.state.frameworks;
+                loadedFramework[index].loaded = true;
+                this.setState({framework:loadedFramework, ui_url: data['ui_url']})
             });
     }
 
@@ -43,10 +41,11 @@ class App extends Component {
     }
     
     render() {
-	      return (
+        console.log(this.state.ui_url);
+        return (
             <div className="GPU-CLUSTER-FRONTEND">
                 <Nav/> 
-                <Frameworks disabled={this.state.disableAllButtons} frameworks={this.state.frameworks} selected_framework={this.state.framework_selection} confirm_handler={this.confirm} select_handler={this.select} loadingGif={this.loadingGif} />
+                <Frameworks disabled={this.state.disableAllButtons} frameworks={this.state.frameworks} confirm_handler={this.confirm} select_handler={this.select} loadingGif={this.loadingGif} />
 				<Footer/>
 			</div>
         );
diff --git a/src/app/footer/Footer.js b/src/app/footer/Footer.js
index 821752c..a1a0f31 100644
--- a/src/app/footer/Footer.js
+++ b/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">
diff --git a/src/app/frameworks/Frameworks.js b/src/app/frameworks/Frameworks.js
index 2061dee..e561cfb 100644
--- a/src/app/frameworks/Frameworks.js
+++ b/src/app/frameworks/Frameworks.js
@@ -3,15 +3,15 @@ import './Frameworks.css'
 import Framework from './framework/Framework.js'
 
 class Grid extends Component {
-    renderFramework(f, i) {
-        return <Framework disabled={this.props.disabled} framework={f} onConfirmHandler={this.props.confirm_handler} onSelectHandler={this.props.select_handler} idx={i} selected={this.props.selected_framework[i]} 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], f));
+            frameworks.push(this.renderFramework(this.props.frameworks[f]));
         }
 
         return (
diff --git a/src/app/frameworks/framework/Framework.js b/src/app/frameworks/framework/Framework.js
index 0762a26..c79af72 100644
--- a/src/app/frameworks/framework/Framework.js
+++ b/src/app/frameworks/framework/Framework.js
@@ -3,8 +3,9 @@ import './Framework.css'
 
 class Framework extends Component {
     render() {
-	console.log(this.props.disabled);
-        if (this.props.selected) {
+	    console.log("THIS FRAMEWORK IS SELECTED" + this.props.framework.loaded);
+        if (this.props.framework.loaded) {
+            console.log(this.props.framework);
             return (
                 <button className="confirm" onClick={() => this.props.onConfirmHandler(this.props.framework)}>Launch</button>
             )

From 88e0e7b5a1713ddfabe7fb5346603a7a9bc22392 Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 17:25:43 -0600
Subject: [PATCH 07/10] styling done

---
 src/app/frameworks/framework/Framework.css | 28 +++++++++++++++++++---
 src/app/frameworks/framework/Framework.js  |  5 +++-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/app/frameworks/framework/Framework.css b/src/app/frameworks/framework/Framework.css
index 8433862..67d0681 100644
--- a/src/app/frameworks/framework/Framework.css
+++ b/src/app/frameworks/framework/Framework.css
@@ -50,8 +50,8 @@
 }
 
 .confirm {
-    height: 2.5vw;
-    width: 5vw;
+    height: 75px;
+    width: 250px;
     font-size: 0.15em;
     background-color: #262626;
     border: none;
@@ -59,10 +59,32 @@
     text-align: center;
     text-decoration: none;
     font-family: "Roboto Mono", monospace;
+    margin-left:3.5vw;
+    margin-top:10vw;
 
 }
 
-.confirm > hover {
+.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;
 }
\ No newline at end of file
diff --git a/src/app/frameworks/framework/Framework.js b/src/app/frameworks/framework/Framework.js
index c79af72..d855e7f 100644
--- a/src/app/frameworks/framework/Framework.js
+++ b/src/app/frameworks/framework/Framework.js
@@ -7,7 +7,10 @@ class Framework extends Component {
         if (this.props.framework.loaded) {
             console.log(this.props.framework);
             return (
-                <button className="confirm" onClick={() => this.props.onConfirmHandler(this.props.framework)}>Launch</button>
+                <div className="confirm_box">
+                    <div className="confirm_padding"></div>
+                    <button className="confirm" onClick={() => this.props.onConfirmHandler(this.props.framework)}>Launch</button>
+                </div>
             )
         } else {
             return (

From 20688ea4399667f4b538e5c95641196dd282fbd9 Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 17:26:44 -0600
Subject: [PATCH 08/10] move back to real backend

---
 src/app/App.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index e4bf2b4..5fcdec1 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -21,8 +21,7 @@ class App extends Component {
         var index = updatedFramework.indexOf(f);
         updatedFramework[index].loading = true;
         this.setState({framework:updatedFramework, disableAllButtons:true});
-        //TODO: CHANGE BACK
-        fetch('http://localhost:5656/dummy_create_container', {
+        fetch(this.api + '/create_container', {
                 method: 'POST',
                 headers: {
                     'Accept': 'application/json',

From e6cb5f479922b44ea9e0a3f4bd0420e218523cbe Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Tue, 27 Feb 2018 18:38:16 -0600
Subject: [PATCH 09/10] confirmation route done

---
 src/app/App.js                             | 19 +++++++++++++++++--
 src/app/frameworks/Frameworks.js           |  1 -
 src/app/frameworks/framework/Framework.css | 14 +++++++++-----
 src/app/frameworks/framework/Framework.js  |  2 --
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index 5fcdec1..a0a48a3 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -21,7 +21,9 @@ class App extends Component {
         var index = updatedFramework.indexOf(f);
         updatedFramework[index].loading = true;
         this.setState({framework:updatedFramework, disableAllButtons:true});
-        fetch(this.api + '/create_container', {
+        
+        fetch('http://localhost:5656/dummy_create_container', {
+        //fetch(this.api + '/create_container', {
                 method: 'POST',
                 headers: {
                     'Accept': 'application/json',
@@ -36,7 +38,20 @@ class App extends Component {
     }
 
     confirm() {
-        window.location = this.state.ui_url;
+        //fetch(this.api + '/confirm', {
+        fetch('http://localhost:5656/confirm', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ui_url: this.state.ui_url})
+        }).then((resp) => resp.json()).then(data => {
+            if (data["verified"] == "confirmed") {
+                window.location = this.state.ui_url
+            }
+        });
+        
     }
     
     render() {
diff --git a/src/app/frameworks/Frameworks.js b/src/app/frameworks/Frameworks.js
index e561cfb..f4b2911 100644
--- a/src/app/frameworks/Frameworks.js
+++ b/src/app/frameworks/Frameworks.js
@@ -9,7 +9,6 @@ class Grid extends Component {
 
     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]));
         }
diff --git a/src/app/frameworks/framework/Framework.css b/src/app/frameworks/framework/Framework.css
index 67d0681..bb2107b 100644
--- a/src/app/frameworks/framework/Framework.css
+++ b/src/app/frameworks/framework/Framework.css
@@ -50,17 +50,18 @@
 }
 
 .confirm {
-    height: 75px;
-    width: 250px;
-    font-size: 0.15em;
+    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-left:3.5vw;
-    margin-top:10vw;
+    margin-top: 3vw;
+    max-height: 75px;
+    max-width: 250px;
 
 }
 
@@ -87,4 +88,7 @@
     color: #fff;
     font-size-adjust:auto;
     border-style: solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
\ No newline at end of file
diff --git a/src/app/frameworks/framework/Framework.js b/src/app/frameworks/framework/Framework.js
index d855e7f..6c27733 100644
--- a/src/app/frameworks/framework/Framework.js
+++ b/src/app/frameworks/framework/Framework.js
@@ -3,9 +3,7 @@ import './Framework.css'
 
 class Framework extends Component {
     render() {
-	    console.log("THIS FRAMEWORK IS SELECTED" + this.props.framework.loaded);
         if (this.props.framework.loaded) {
-            console.log(this.props.framework);
             return (
                 <div className="confirm_box">
                     <div className="confirm_padding"></div>

From ff6caf5ef3e5b96540d1373f81907efb78c81845 Mon Sep 17 00:00:00 2001
From: Naren Dasan <naren@narendasan.com>
Date: Sat, 3 Mar 2018 19:10:59 -0600
Subject: [PATCH 10/10] working with new backend

---
 src/app/App.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index a0a48a3..d4e2a0f 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -9,7 +9,8 @@ class App extends Component {
         super(props);
         this.state = {frameworks: this.props.frameworkImages,
                         disableAllButtons: false,
-                        ui_url: null};
+                        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);
@@ -22,7 +23,7 @@ class App extends Component {
         updatedFramework[index].loading = true;
         this.setState({framework:updatedFramework, disableAllButtons:true});
         
-        fetch('http://localhost:5656/dummy_create_container', {
+        fetch('http://localhost:5656/create_container', {
         //fetch(this.api + '/create_container', {
                 method: 'POST',
                 headers: {
@@ -33,7 +34,8 @@ class App extends Component {
             }).then((resp) => resp.json()).then(data => {
                 var loadedFramework = this.state.frameworks;
                 loadedFramework[index].loaded = true;
-                this.setState({framework:loadedFramework, ui_url: data['ui_url']})
+                console.log(data["cid"]);
+                this.setState({framework:loadedFramework, cid: data['cid'], ui_url: data['ui_url']})
             });
     }
 
@@ -45,8 +47,9 @@ class App extends Component {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify({ui_url: this.state.ui_url})
+            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
             }
@@ -55,7 +58,6 @@ class App extends Component {
     }
     
     render() {
-        console.log(this.state.ui_url);
         return (
             <div className="GPU-CLUSTER-FRONTEND">
                 <Nav/>