Merge branch 'test-docker' into footer

Author: narendasan

Dockerfile

@@ -6,40 +6,42 @@ import './App.css';
 
 class App extends Component {
     constructor(props) {
-		super(props);
-		
-		console.log(this.props.frameworkImages);
-
+		    super(props);
         this.state = {frameworks: this.props.frameworkImages,
-					  disableButton: false};
-
+				    	        disableAllButton: false};
+        this.loadingGif = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif";
         this.click = this.click.bind(this);
     }
-
 
     click(f) {
-	this.setState({framework:this.state.framework, disableButton:true})
-	fetch('http://vault.acm.illinois.edu:5656/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.replace(res['jupyter_url']); 
-	});
-        console.log(f)
+        var updatedFramework = this.state.frameworks
+        var type = typeof updatedFramework;
+        console.log(type);
+        var index = updatedFramework.indexOf(f);
+        updatedFramework[index].loading = true;
+        this.setState({framework:updatedFramework, disableAllButton:true})
+
+        fetch('http://vault.acm.illinois.edu:5656/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.replace(res['jupyter_url']); 
+	        });
+          console.log(f)
     }
 
     render() {
-	console.log(this.state.disableButton);
-	return (
+	      console.log(this.state.disableAllButton);
+	      return (
             <div className="GPU-CLUSTER-FRONTEND">
                 <Nav/> 
-                <Frameworks disabled={this.state.disableButton} frameworks={this.state.frameworks} handler={this.click} />
-				<Footer/>
-			</div>
+                <Frameworks disabled={this.state.disableButton} frameworks={this.state.frameworks} handler={this.click} loadingGif={this.loadingGif} />
+				        <Footer/>
+			      </div>
         );
     }
 }

src/app/App.js

@@ -4,7 +4,7 @@ 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}/>
+        return <Framework disabled={this.props.disabled} framework={f} onClickHandler={this.props.handler} loadingGif={this.props.loadingGif}/>
     }
 
     render() {

src/app/frameworks/Frameworks.js

@@ -5,8 +5,8 @@ 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}>
-                <img className="logo" src={this.props.framework.img} alt=""/>
+		<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>