Format detail displays

This commit updates the detailed view of resources to only display
relevant information in a readable format rather than a JSON dump
of all info.

Change-Id: Ib380bbd206203b3a651e75d3acd712acaa2f738f
Closes-bug: #1630813

ui/src/customized.css

@@ -78,6 +78,7 @@ hr.separator {
 .details {
   margin-top: 30px;
   padding: 20px;
+  padding-bottom: 40px;
   width: 100%;
   border-radius: 4px;
   background-color: #f8f8f8;

ui/src/js/components/Layout.js

@@ -9,10 +9,11 @@ const Layout = React.createClass({
 
   getInitialState: function() {
     return {
-      homeDisplay: "inline-block",
+      displayHome: true,
-      detailDisplay: "none",
+      displayDetail: false,
-      composeDisplay: "none",
+      displayCompose: false,
       detailData: "",
+      detailType: "",
       pods: [],
       racks: [],
       systems: [],
@@ -31,19 +32,19 @@ const Layout = React.createClass({
 
   displayHome: function() {
     this.setState({
-      homeDisplay: "inline-block",
+      displayHome: true,
-      detailDisplay: "none",
+      displayDetail: false,
-      composeDisplay: "none",
+      displayCompose: false
-      detailData: ""
     });
   },
 
-  displayDetail: function(item) {
+  displayDetail: function(item, itemType) {
     this.setState({
-      homeDisplay: "none",
+      displayHome: false,
-      detailDisplay: "inline-block",
+      displayDetail: true,
-      composeDisplay: "none",
+      displayCompose: false,
-      detailData: JSON.stringify(item, null, "\t")
+      detailData: item,
+      detailType: itemType
     });
   },
 
@@ -51,10 +52,9 @@ const Layout = React.createClass({
     this.getStorage();
     this.fillComposeForms();
     this.setState({
-      homeDisplay: "none",
+      displayHome: false,
-      detailDisplay: "none",
+      displayDetail: false,
-      composeDisplay: "inline-block",
+      displayCompose: true
-      detailData: ""
     });
   },
 
@@ -176,7 +176,7 @@ const Layout = React.createClass({
         </nav>
 
         <Home
-          display={this.state.homeDisplay}
+          display={this.state.displayHome}
           podList={this.state.pods}
           rackList={this.state.racks}
           systemList={this.state.systems}
@@ -191,12 +191,13 @@ const Layout = React.createClass({
           onUpdateNodes={this.getNodes}
         />
         <DetailDisplay
-          display={this.state.detailDisplay}
+          display={this.state.displayDetail}
           data={this.state.detailData}
+          type={this.state.detailType}
           onHideDetail={this.displayHome}
         />
         <ComposeDisplay
-          display={this.state.composeDisplay}
+          display={this.state.displayCompose}
           systemList={this.state.systems}
           onHideCompose={this.displayHome}
           onUpdateNodes={this.getNodes}

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

@@ -18,6 +18,7 @@ const ComposeDisplay = React.createClass({
       data: data,
       dataType: 'text',
       success: function(resp) {
+        console.log(resp);
         this.clearInputs();
         this.props.onUpdateNodes();
         this.props.onHideCompose();
@@ -73,50 +74,54 @@ const ComposeDisplay = React.createClass({
   },
 
   render: function() {
-    return (
+    if (this.props.display) {
-        <div class="details" style={{display: this.props.display}}>
+      return (
-          <form id="inputForm">
+          <div class="details" styles="inline-block">
-            <table>
+            <form id="inputForm">
-              <tbody>
+              <table>
-                <tr>
+                <tbody>
-                  <td align="right">Name:</td>
+                  <tr>
-                  <td align="left"><input type="text" id="name" /></td>
+                    <td align="right">Name:</td>
-                </tr>
+                    <td align="left"><input type="text" id="name" /></td>
-                <tr>
+                  </tr>
-                  <td align="right">Description:</td>
+                  <tr>
-                  <td align="left"><input type="text" id="description" /></td>
+                    <td align="right">Description:</td>
-                </tr>
+                    <td align="left"><input type="text" id="description" /></td>
-                <tr>
+                  </tr>
-                  <td align="right">System Memory GB:</td>
+                  <tr>
-                  <td align="left"><input type="number" min="0" id="totalMem" /></td>
+                    <td align="right">System Memory GB:</td>
-                </tr>
+                    <td align="left"><input type="number" min="0" id="totalMem" /></td>
-                <tr>
+                  </tr>
-                  <td align="right">Processor Model:</td>
+                  <tr>
-                  <td align="left"><select id="processorModels" /></td>
+                    <td align="right">Processor Model:</td>
-                </tr>
+                    <td align="left"><select id="processorModels" /></td>
-                <tr>
+                  </tr>
-                  <td align="right">Remote Storage Capacity GB:</td>
+                  <tr>
-                  <td align="left"><input type="number" min="0" id="storageCapacity" /></td>
+                    <td align="right">Remote Storage Capacity GB:</td>
-                </tr>
+                    <td align="left"><input type="number" min="0" id="storageCapacity" /></td>
-                <tr>
+                  </tr>
-                  <td align="right">Remote storage IQN:</td>
+                  <tr>
-                  <td align="left"><input type="text" id="iqn" /></td>
+                    <td align="right">Remote storage IQN:</td>
-                </tr>
+                    <td align="left"><input type="text" id="iqn" /></td>
-                <tr>
+                  </tr>
-                  <td align="right">Remote storage master drive:</td>
+                  <tr>
-                  <td align="left"><select id="remoteDrives" /></td>
+                    <td align="right">Remote storage master drive:</td>
-                </tr>
+                    <td align="left"><select id="remoteDrives" /></td>
-              </tbody>
+                  </tr>
-            </table>
+                </tbody>
-          </form>
+              </table>
-          <input type="button"
+            </form>
-           class="compose-button"
+            <input type="button"
-           onClick={() => this.compose()} value="Compose" />
+             class="compose-button"
-          <input type="button"
+             onClick={() => this.compose()} value="Compose" />
-           class="detail-button"
+            <input type="button"
-           onClick={() => this.props.onHideCompose()} value="Return" />
+             class="detail-button"
-        </div>
+             onClick={() => this.props.onHideCompose()} value="Return" />
-    );
+          </div>
+      );
+    } else {
+      return(<div styles="none" />);
+    }
   }
 
 });

ui/src/js/components/home/DetailDisplay.js

@@ -2,15 +2,130 @@ import React from "react";
 
 const DetailDisplay = React.createClass({
 
-  render: function() {
+  renderPod: function(data) {
     return (
-        <div class="details" style={{display: this.props.display}}>
+      <div class="details" styles="inline-block">
-          <pre>{this.props.data}</pre>
+        <h2>Pod</h2>
+        <hr class="separator" />
+        <p>Name: {data.Name}</p>
+        <p>Description: {data.Description}</p>
+        <p>State: {data.Status.State}</p>
+        <p>Health: {data.Status.Health}</p>
+        <input type="button"
+         class="detail-button"
+         onClick={() => this.props.onHideDetail()} value="Return" />
+      </div>
+    );
+  },
+
+  renderRack: function(data) {
+    return (
+      <div class="details" styles="inline-block">
+        <h2>Rack</h2>
+        <hr class="separator" />
+        <p>Name: {data.Name}</p>
+        <p>Description: {data.Description}</p>
+        <p>Manufacturer: {data.Manufacturer}</p>
+        <input type="button"
+         class="detail-button"
+         onClick={() => this.props.onHideDetail()} value="Return" />
+      </div>
+    );
+  },
+
+  renderSystem: function(data) {
+    return (
+      <div class="details" styles="inline-block">
+        <h2>System</h2>
+        <hr class="separator" />
+        <p>Name: {data.Name}</p>
+        <p>Description: {data.Description}</p>
+        <p>State: {data.Status.State}</p>
+        <p>Health: {data.Status.Health}</p>
+        <p>Processor Count: {data.ProcessorSummary.Count}</p>
+        <p>Processor Model: {data.ProcessorSummary.Model}</p>
+        <p>Total Memory: {data.MemorySummary.TotalSystemMemoryGiB} GiB</p>
+        <input type="button"
+         class="detail-button"
+         onClick={() => this.props.onHideDetail()} value="Return" />
+      </div>
+    );
+  },
+
+  renderStorage: function(data) {
+    var bootable;
+    if (data.Bootable) {
+      bootable = "True";
+    } else {
+      bootable = "False";
+    }
+    return (
+      <div class="details" styles="inline-block">
+        <h2>Storage</h2>
+        <hr class="separator" />
+        <p>Name: {data.Name}</p>
+        <p>Description: {data.Description}</p>
+        <p>State: {data.Status.State}</p>
+        <p>Health: {data.Status.Health}</p>
+        <p>Type: {data.Type}</p>
+        <p>Mode: {data.Mode}</p>
+        <p>Capacity: {data.CapacityGiB} GiB</p>
+        <p>Bootable: {bootable}</p>
+        <input type="button"
+         class="detail-button"
+         onClick={() => this.props.onHideDetail()} value="Return" />
+      </div>
+    );
+  },
+
+  renderNode: function(data) {
+    return (
+      <div class="details" styles="inline-block">
+        <h2>Composed Node</h2>
+        <hr class="separator" />
+        <p>Name: {data.Name}</p>
+        <p>Description: {data.Description}</p>
+        <p>State: {data.Status.State}</p>
+        <p>Health: {data.Status.Health}</p>
+        <p>Processor Count: {data.Processors.Count}</p>
+        <p>Total Memory: {data.Memory.TotalSystemMemoryGiB} GiB</p>
+        <p>Composed State: {data.ComposedNodeState}</p>
+        <p>Boot Source Target: {data.Boot.BootSourceOverrideTarget}</p>
+        <input type="button"
+         class="detail-button"
+         onClick={() => this.props.onHideDetail()} value="Return" />
+      </div>
+    );
+  },
+
+  render: function() {
+    if (this.props.display) {
+      if (this.props.type == "PODS") {
+        return this.renderPod(this.props.data);
+      }
+      if (this.props.type == "RACKS") {
+        return this.renderRack(this.props.data);
+      }
+      if (this.props.type == "SYSTEMS") {
+        return this.renderSystem(this.props.data);
+      }
+      if (this.props.type == "STORAGE") {
+        return this.renderStorage(this.props.data);
+      }
+      if (this.props.type == "COMPOSED NODES") {
+        return this.renderNode(this.props.data);
+      }
+      return (
+        <div class="details" styles="inline-block">
+          <h2>Nothing to display!</h2>
           <input type="button"
            class="detail-button"
            onClick={() => this.props.onHideDetail()} value="Return" />
         </div>
-    );
+      );
+    } else {
+      return (<div styles="none" />);
+    }
   }
 });
 

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

@@ -39,9 +39,9 @@ const Home = React.createClass({
     });
   },
 
-  render: function() {
+  renderHome: function() {
     return (
-      <div style={{display: this.props.display}}>
+      <div styles="inline-block">
         <div class="jumbotron">
           <h2>Welcome to RSD Details</h2>
           <p>This is a brief overview of all kinds of resources in this environment. See the <a href="#">User Guide</a> for more information on how to configure them.</p>
@@ -106,7 +106,16 @@ const Home = React.createClass({
         </div>
       </div>
     );
+  },
+
+  render: function() {
+    if (this.props.display) {
+      return this.renderHome();
+    } else {
+      return (<div styles="none" />);
+    }   
   }
+
 });
 
 export default Home

ui/src/js/components/home/NodeList.js

@@ -82,7 +82,7 @@ const NodeList = React.createClass({
     return this.props.nodes.map((node, i) =>
       <div class="item" key={i}>
         {node.Name}
-        <input type="button" class="detail-button" onClick={() => this.props.onShowDetail(node)} value="Show" />
+        <input type="button" class="detail-button" onClick={() => this.props.onShowDetail(node, this.props.header)} value="Show" />
         <input type="button" class="detail-button" onClick={() => this.delete(node.Id)} value="Delete" />
         <input type="button" class="detail-button" onClick={() => this.setBoot(node.Id)} value="Set Boot Source" />
         <input type="button" class="detail-button" onClick={() => this.assemble(node.Id)} value="Assemble" />

ui/src/js/components/home/ResourceList.js

@@ -8,7 +8,7 @@ const ResourceList = React.createClass({
     return this.props.resources.map((resource, i) =>
       <div class="resource" key={i}>
         {resource.Name}
-        <input type="button" class="detail-button" onClick={() => this.props.onShowDetail(resource)} value="Show" />
+        <input type="button" class="detail-button" onClick={() => this.props.onShowDetail(resource, this.props.header)} value="Show" />
         <br />
         {resource.Description}
         <hr class="separator"/>