pond: List nodes in NodeList

lotuspond/front/src/App.css

@@ -4,6 +4,14 @@
   font-family: monospace;
 }
 
+.NodeList {
+  background: #f9be77;
+  user-select: text;
+  font-family: monospace;
+  min-width: 40em;
+  display: inline-block;
+}
+
 .FullNode {
   background: #f9be77;
   user-select: text;

lotuspond/front/src/NodeList.js

@@ -84,17 +84,30 @@ class NodeList extends React.Component {
 
     return (
       <Cristal title={"Node List"} initialPosition="bottom-left">
-        <div>
+        <div className={'NodeList'}>
-          <button onClick={this.spawnNode} disabled={!this.state.existingLoaded}>Spawn Node</button>
+          <div>
-          <button onClick={this.connMgr} disabled={!this.state.existingLoaded && !this.state.showConnMgr}>Connections</button>
+            <button onClick={this.spawnNode} disabled={!this.state.existingLoaded}>Spawn Node</button>
-          <button onClick={this.consensus} disabled={!this.state.existingLoaded && !this.state.showConsensus}>Consensus</button>
+            <button onClick={this.connMgr} disabled={!this.state.existingLoaded && !this.state.showConnMgr}>Connections</button>
-        </div>
+            <button onClick={this.consensus} disabled={!this.state.existingLoaded && !this.state.showConsensus}>Consensus</button>
-        <div>
+          </div>
-          {Object.keys(this.state.nodes).map(n => {
+          <div>
-            return <div key={n}>
+            {Object.keys(this.state.nodes).map(n => {
-              {n}
+              const nd = this.state.nodes[n]
-            </div>
+              let type = "FULL"
-          })}
+              if (nd.Storage) {
+                type = "STOR"
+              }
+
+              let info = "[CONNECTING..]"
+              if (nd.conn) {
+                info = <span>{nd.peerid}</span>
+              }
+
+              return <div key={n}>
+                {n} {type} {info}
+              </div>
+            })}
+          </div>
         </div>
         <div>
           {connMgr}