Merge "Show in-use/health concerns for resources"

ui/src/customized.css

@@ -55,9 +55,7 @@ hr.separator {
   border: none;
   color: white;
   padding: 6px 18px;
-  margin-right: 6px;
   text-align: center;
-  display: block;
   border-radius: 4px;
   float: right;
 }
@@ -84,6 +82,38 @@ hr.separator {
   background-color: #f8f8f8;
 }
 
+.resource {
+  margin-bottom: 10px;
+  padding: 20px;
+  height: 75px;
+  background-color: #b3b3b3;
+  border-radius: 4px;
+}
+
+.in-use-resource {
+  margin-bottom: 10px;
+  padding: 20px;
+  height: 75px;
+  background-color: #00cc44;
+  border-radius: 4px;
+}
+
+.warning-resource {
+  margin-bottom: 10px;
+  padding: 20px;
+  height: 75px;
+  background-color: #cccc00;
+  border-radius: 4px;
+}
+
+.critical-resource {
+  margin-bottom: 10px;
+  padding: 20px;
+  height: 75px;
+  background-color: #e60000;
+  border-radius: 4px;
+}
+
 /*
  * Sidebar
  */

ui/src/js/components/Layout.js

@@ -32,6 +32,7 @@ const Layout = React.createClass({
       pods: [],
       racks: [],
       systems: [],
+      systemsInUse: [],
       storage: [],
       nodes: []
     };
@@ -148,6 +149,12 @@ const Layout = React.createClass({
   },
 
   setNodes: function(nodes) {
+    // Update systems in use
+    var usedSystems = [];
+    for (var i = 0; i < nodes.length; i++) {
+      usedSystems.push(nodes[i]["Links"]["ComputerSystem"]["@odata.id"]);
+    }
+    this.setState({systemsInUse: usedSystems});
     this.setState({nodes: nodes});
   },
 
@@ -195,6 +202,7 @@ const Layout = React.createClass({
           podList={this.state.pods}
           rackList={this.state.racks}
           systemList={this.state.systems}
+          usedSystemList={this.state.systemsInUse}
           storageList={this.state.storage}
           nodeList={this.state.nodes}
           onShowDetail={this.displayDetail}

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

@@ -97,6 +97,7 @@ const Home = React.createClass({
                   <ResourceList
                     onShowDetail={this.props.onShowDetail}
                     resources={this.props.systemList}
+                    inUseResources={this.props.usedSystemList}
                     header="SYSTEMS"
                   />
                 </div>

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

@@ -95,7 +95,7 @@ const NodeList = React.createClass({
 
   renderList: function() {
     return this.props.nodes.map((node, i) =>
-      <div class="item" key={i}>
+      <div class="resource" key={i}>
         {node.Name}
         <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" />
@@ -104,7 +104,6 @@ const NodeList = React.createClass({
         <input type="button" class="detail-button" onClick={() => this.powerOn(node.Id)} value="Power On" />
         <br />
         {node.Description}
-        <hr class="separator"/>
       </div>
     );
   },

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

@@ -19,27 +19,60 @@ var util = require('../../util.js');
 
 const ResourceList = React.createClass({
 
-  renderList: function() {
-    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, this.props.header)} value="Show" />
-        <br />
-        {resource.Description}
-        <hr class="separator"/>
-      </div>
-    );
-  },
-
   render: function() {
+    var inUseResources = this.props.inUseResources;
+    var onShowDetail = this.props.onShowDetail;
+    var resourceList = this.props.resources.map(function(resource) {
+      if (resource.Status != null) {
+        if (resource.Status.Health == "Warning") {
+          return (
+            <div class="warning-resource" key={resource.Id}>
+              {resource.Name} | Health Warning
+              <input type="button" class="detail-button" onClick={() => onShowDetail(resource)} value="Show" />
+              <br />
+              {resource.Description}
+            </div>
+          );
+        } else if (resource.Status.Health == "Critical") {
+          return (
+            <div class="critical-resource" key={resource.Id}>
+              {resource.Name} | Health Critical
+              <input type="button" class="detail-button" onClick={() => onShowDetail(resource)} value="Show" />
+              <br />
+              {resource.Description}
+            </div>
+          );
+        }
+      }
+      if (inUseResources.indexOf(resource["@odata.id"]) < 0) {
+        return (
+          <div class="resource" key={resource.Id}>
+            {resource.Name}
+            <input type="button" class="detail-button" onClick={() => onShowDetail(resource)} value="Show" />
+            <br />
+            {resource.Description}
+          </div>
+        );
+      } else {
+        return (
+          <div class="in-use-resource" key={resource.Id}>
+            {resource.Name} | In Use
+            <input type="button" class="detail-button" onClick={() => onShowDetail(resource)} value="Show" />
+            <br />
+            {resource.Description}
+          </div>
+        );
+      }
+    });
     return (
-      <div>
-        {this.renderList()}
+      <div class="resourceList">
+        {resourceList}
       </div>
     );
-  },
+  }
+
 });
 
-ResourceList.defaultProps = { resources: [], header: ""};
+ResourceList.defaultProps = { resources: [], inUseResources: [], header: ""};
 
 export default ResourceList;