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
2016-10-20 15:19:54 -07:00 · 2016-10-20 15:19:54 -07:00 · bc81feef1f
commit bc81feef1f
parent 9c96ce73eb
7 changed files with 202 additions and 71 deletions
--- a/ui/src/customized.css
+++ b/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;
--- a/ui/src/js/components/Layout.js
+++ b/ui/src/js/components/Layout.js
@ -9,10 +9,11 @@ const Layout = React.createClass({

  getInitialState: function() {
    return {
-      homeDisplay: "inline-block",
-      detailDisplay: "none",
-      composeDisplay: "none",
+      displayHome: true,
+      displayDetail: false,
+      displayCompose: false,
      detailData: "",
+      detailType: "",
      pods: [],
      racks: [],
      systems: [],
@ -31,19 +32,19 @@ const Layout = React.createClass({

  displayHome: function() {
    this.setState({
-      homeDisplay: "inline-block",
-      detailDisplay: "none",
-      composeDisplay: "none",
-      detailData: ""
+      displayHome: true,
+      displayDetail: false,
+      displayCompose: false
    });
  },

-  displayDetail: function(item) {
+  displayDetail: function(item, itemType) {
    this.setState({
-      homeDisplay: "none",
-      detailDisplay: "inline-block",
-      composeDisplay: "none",
-      detailData: JSON.stringify(item, null, "\t")
+      displayHome: false,
+      displayDetail: true,
+      displayCompose: false,
+      detailData: item,
+      detailType: itemType
    });
  },

@ -51,10 +52,9 @@ const Layout = React.createClass({
    this.getStorage();
    this.fillComposeForms();
    this.setState({
-      homeDisplay: "none",
-      detailDisplay: "none",
-      composeDisplay: "inline-block",
-      detailData: ""
+      displayHome: false,
+      displayDetail: false,
+      displayCompose: true
    });
  },

@ -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}
--- a/ui/src/js/components/home/ComposeDisplay.js
+++ b/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 (
-        <div class="details" style={{display: this.props.display}}>
-          <form id="inputForm">
-            <table>
-              <tbody>
-                <tr>
-                  <td align="right">Name:</td>
-                  <td align="left"><input type="text" id="name" /></td>
-                </tr>
-                <tr>
-                  <td align="right">Description:</td>
-                  <td align="left"><input type="text" id="description" /></td>
-                </tr>
-                <tr>
-                  <td align="right">System Memory GB:</td>
-                  <td align="left"><input type="number" min="0" id="totalMem" /></td>
-                </tr>
-                <tr>
-                  <td align="right">Processor Model:</td>
-                  <td align="left"><select id="processorModels" /></td>
-                </tr>
-                <tr>
-                  <td align="right">Remote Storage Capacity GB:</td>
-                  <td align="left"><input type="number" min="0" id="storageCapacity" /></td>
-                </tr>
-                <tr>
-                  <td align="right">Remote storage IQN:</td>
-                  <td align="left"><input type="text" id="iqn" /></td>
-                </tr>
-                <tr>
-                  <td align="right">Remote storage master drive:</td>
-                  <td align="left"><select id="remoteDrives" /></td>
-                </tr>
-              </tbody>
-            </table>
-          </form>
-          <input type="button"
-           class="compose-button"
-           onClick={() => this.compose()} value="Compose" />
-          <input type="button"
-           class="detail-button"
-           onClick={() => this.props.onHideCompose()} value="Return" />
-        </div>
-    );
+    if (this.props.display) {
+      return (
+          <div class="details" styles="inline-block">
+            <form id="inputForm">
+              <table>
+                <tbody>
+                  <tr>
+                    <td align="right">Name:</td>
+                    <td align="left"><input type="text" id="name" /></td>
+                  </tr>
+                  <tr>
+                    <td align="right">Description:</td>
+                    <td align="left"><input type="text" id="description" /></td>
+                  </tr>
+                  <tr>
+                    <td align="right">System Memory GB:</td>
+                    <td align="left"><input type="number" min="0" id="totalMem" /></td>
+                  </tr>
+                  <tr>
+                    <td align="right">Processor Model:</td>
+                    <td align="left"><select id="processorModels" /></td>
+                  </tr>
+                  <tr>
+                    <td align="right">Remote Storage Capacity GB:</td>
+                    <td align="left"><input type="number" min="0" id="storageCapacity" /></td>
+                  </tr>
+                  <tr>
+                    <td align="right">Remote storage IQN:</td>
+                    <td align="left"><input type="text" id="iqn" /></td>
+                  </tr>
+                  <tr>
+                    <td align="right">Remote storage master drive:</td>
+                    <td align="left"><select id="remoteDrives" /></td>
+                  </tr>
+                </tbody>
+              </table>
+            </form>
+            <input type="button"
+             class="compose-button"
+             onClick={() => this.compose()} value="Compose" />
+            <input type="button"
+             class="detail-button"
+             onClick={() => this.props.onHideCompose()} value="Return" />
+          </div>
+      );
+    } else {
+      return(<div styles="none" />);
+    }
  }

 });
--- a/ui/src/js/components/home/DetailDisplay.js
+++ b/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}}>
-          <pre>{this.props.data}</pre>
+      <div class="details" styles="inline-block">
+        <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" />);
+    }
  }
 });

--- a/ui/src/js/components/home/Home.js
+++ b/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
--- a/ui/src/js/components/home/NodeList.js
+++ b/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" />
--- a/ui/src/js/components/home/ResourceList.js
+++ b/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"/>