diff --git a/ui/src/customized.css b/ui/src/customized.css index 0d785c5..e707ff2 100644 --- a/ui/src/customized.css +++ b/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 */ diff --git a/ui/src/js/components/Layout.js b/ui/src/js/components/Layout.js index 54217ad..70bc4e4 100644 --- a/ui/src/js/components/Layout.js +++ b/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} diff --git a/ui/src/js/components/home/Home.js b/ui/src/js/components/home/Home.js index f5473d3..6cf2ac2 100644 --- a/ui/src/js/components/home/Home.js +++ b/ui/src/js/components/home/Home.js @@ -97,6 +97,7 @@ const Home = React.createClass({ diff --git a/ui/src/js/components/home/NodeList.js b/ui/src/js/components/home/NodeList.js index 4ab1dde..4b9bc76 100644 --- a/ui/src/js/components/home/NodeList.js +++ b/ui/src/js/components/home/NodeList.js @@ -95,7 +95,7 @@ const NodeList = React.createClass({ renderList: function() { return this.props.nodes.map((node, i) => -
+
{node.Name} this.props.onShowDetail(node, this.props.header)} value="Show" /> this.delete(node.Id)} value="Delete" /> @@ -104,7 +104,6 @@ const NodeList = React.createClass({ this.powerOn(node.Id)} value="Power On" />
{node.Description} -
); }, diff --git a/ui/src/js/components/home/ResourceList.js b/ui/src/js/components/home/ResourceList.js index cd7b2b9..8e27e3a 100644 --- a/ui/src/js/components/home/ResourceList.js +++ b/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) => -
- {resource.Name} - this.props.onShowDetail(resource, this.props.header)} value="Show" /> -
- {resource.Description} -
-
- ); - }, - 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 ( +
+ {resource.Name} | Health Warning + onShowDetail(resource)} value="Show" /> +
+ {resource.Description} +
+ ); + } else if (resource.Status.Health == "Critical") { + return ( +
+ {resource.Name} | Health Critical + onShowDetail(resource)} value="Show" /> +
+ {resource.Description} +
+ ); + } + } + if (inUseResources.indexOf(resource["@odata.id"]) < 0) { + return ( +
+ {resource.Name} + onShowDetail(resource)} value="Show" /> +
+ {resource.Description} +
+ ); + } else { + return ( +
+ {resource.Name} | In Use + onShowDetail(resource)} value="Show" /> +
+ {resource.Description} +
+ ); + } + }); return ( -
- {this.renderList()} +
+ {resourceList}
); - }, + } + }); -ResourceList.defaultProps = { resources: [], header: ""}; +ResourceList.defaultProps = { resources: [], inUseResources: [], header: ""}; export default ResourceList;