Refresh node list when new node composed

This commit ensures that the node list will be updated to
contain the new node when 'compose' is called. It also moves
the get logic from Home to its parent Layout.

Change-Id: I0ccee805df716e501d361573b471ad25c04a56a0
Closes-bug: #1630810

valence/ui/src/js/components/Layout.js

@@ -3,6 +3,8 @@ import ComposeDisplay from "./home/ComposeDisplay";
 import DetailDisplay from "./home/DetailDisplay";
 import Home from "./home/Home";
 
+var util = require('../util.js');
+
 const Layout = React.createClass({
 
   getInitialState: function() {
@@ -19,6 +21,14 @@ const Layout = React.createClass({
     };
   },
 
+  componentWillMount: function() {
+    this.getPods();
+    this.getRacks();
+    this.getSystems();
+    this.getStorage();
+    this.getNodes();
+  },
+
   displayHome: function() {
     this.setState({
       homeDisplay: "inline-block",
@@ -46,23 +56,43 @@ const Layout = React.createClass({
     });
   },
 
-  updatePods: function(pods) {
+  getPods: function() {
+    util.getPods(this.setPods);
+  },
+
+  setPods: function(pods) {
     this.setState({pods: pods});
   },
 
-  updateRacks: function(racks) {
+  getRacks: function() {
+    util.getRacks(this.setRacks);
+  },
+
+  setRacks: function(racks) {
     this.setState({racks: racks});
   },
 
-  updateSystems: function(systems) {
+  getSystems: function() {
+    util.getSystems(this.setSystems);
+  },
+
+  setSystems: function(systems) {
     this.setState({systems: systems});
   },
 
-  updateStorage: function(storage) {
+  getStorage: function() {
+    util.getStorage(this.setStorage);
+  },
+
+  setStorage: function(storage) {
     this.setState({storage: storage});
   },
 
-  updateNodes: function(nodes) {
+  getNodes: function() {
+    util.getNodes(this.setNodes);
+  },
+
+  setNodes: function(nodes) {
     this.setState({nodes: nodes});
   },
 
@@ -114,11 +144,11 @@ const Layout = React.createClass({
           nodeList={this.state.nodes}
           onShowDetail={this.displayDetail}
           onShowCompose={this.displayCompose}
-          onUpdatePods={this.updatePods}
-          onUpdateRacks={this.updateRacks}
-          onUpdateSystems={this.updateSystems}
-          onUpdateStorage={this.updateStorage}
-          onUpdateNodes={this.updateNodes}
+          onUpdatePods={this.getPods}
+          onUpdateRacks={this.getRacks}
+          onUpdateSystems={this.getSystems}
+          onUpdateStorage={this.getStorage}
+          onUpdateNodes={this.getNodes}
         />
         <DetailDisplay
           display={this.state.detailDisplay}
@@ -129,6 +159,7 @@ const Layout = React.createClass({
           display={this.state.composeDisplay}
           systemList={this.state.systems}
           onHideCompose={this.displayHome}
+          onUpdateNodes={this.getNodes}
         />
 
         <footer class="footer navbar-fixed-bottom">

valence/ui/src/js/components/home/ComposeDisplay.js

@@ -24,15 +24,18 @@ const ComposeDisplay = React.createClass({
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
-      },  
+      },
       data: data,
       dataType: 'text',
+      success: function(resp) {
+        this.clearInputs();
+        this.props.onUpdateNodes();
+        this.props.onHideCompose();
+      }.bind(this),
       error: function(xhr, status, err) {
         console.error(url, status, err.toString());
       }.bind(this)
     });
-    this.clearInputs()
-    this.props.onHideCompose();
   },
 
   getProcessors: function() {

valence/ui/src/js/components/home/Home.js

@@ -24,7 +24,7 @@ const Home = React.createClass({
       data: JSON.stringify(config.nodeConfig),
       dataType: 'text',
       success: function(resp) {
-        this.getNodes();
+        this.props.onUpdateNodes();
       }.bind(this),
       error: function(xhr, status, err) {
         console.error(url, status, err.toString());
@@ -32,54 +32,6 @@ const Home = React.createClass({
     });
   },
 
-  componentWillMount: function() {
-    this.getPods();
-    this.getRacks();
-    this.getSystems();
-    this.getStorage();
-    this.getNodes();
-  },
-
-  getPods: function() {
-    util.getPods(this.setPods);
-  },
-
-  getRacks: function() {
-    util.getRacks(this.setRacks);
-  },
-
-  getSystems: function() {
-    util.getSystems(this.setSystems);
-  },
-
-  getStorage: function() {
-    util.getStorage(this.setStorage);
-  },
-
-  getNodes: function() {
-    util.getNodes(this.setNodes);
-  },
-
-  setPods: function(pods) {
-    this.props.onUpdatePods(pods);
-  },
-
-  setRacks: function(racks) {
-    this.props.onUpdateRacks(racks);
-  },
-
-  setSystems: function(systems) {
-    this.props.onUpdateSystems(systems);
-  },
-
-  setStorage: function(storage) {
-    this.props.onUpdateStorage(storage);
-  },
-
-  setNodes: function(nodes) {
-    this.props.onUpdateNodes(nodes);
-  },
-
   render: function() {
     return (
       <div style={{display: this.props.display}}>
@@ -96,11 +48,11 @@ const Home = React.createClass({
           <div class="row">
             <div class="col-sm-3 col-md-2 sidebar">
               <ul class="nav nav-sidebar">
-                <li class="active"><a href="#pods" data-toggle="tab" onClick={() => this.getPods()}>PODS</a></li>
-                <li><a href="#racks" data-toggle="tab" onClick={() => this.getRacks()}>RACKS</a></li>
-                <li><a href="#systems" data-toggle="tab" onClick={() => this.getSystems()}>SYSTEMS</a></li>
-                <li><a href="#storage" data-toggle="tab" onClick={() => this.getStorage()}>STORAGE</a></li>
-                <li><a href="#composednodes" data-toggle="tab" onClick={() => this.getNodes()}>COMPOSED NODES</a></li>
+                <li class="active"><a href="#pods" data-toggle="tab" onClick={() => this.props.onUpdatePods()}>PODS</a></li>
+                <li><a href="#racks" data-toggle="tab" onClick={() => this.props.onUpdateRacks()}>RACKS</a></li>
+                <li><a href="#systems" data-toggle="tab" onClick={() => this.props.onUpdateSystems()}>SYSTEMS</a></li>
+                <li><a href="#storage" data-toggle="tab" onClick={() => this.props.onUpdateStorage()}>STORAGE</a></li>
+                <li><a href="#composednodes" data-toggle="tab" onClick={() => this.props.onUpdateNodes()}>COMPOSED NODES</a></li>
               </ul>
             </div>
             <div class="col-sm-9 col-md-10 main">
@@ -136,7 +88,7 @@ const Home = React.createClass({
                 <div role="tabpanel" class="tab-pane" id="composednodes">
                   <NodeList
                     onShowDetail={this.props.onShowDetail}
-                    onUpdateNodes={this.getNodes}
+                    onUpdateNodes={this.props.onUpdateNodes}
                     nodes={this.props.nodeList}
                     header="COMPOSED NODES"
                   />