diff --git a/ui/src/css/components/home/ComposeDisplay.css b/ui/src/css/components/home/ComposeDisplay.css new file mode 100644 index 0000000..357f4a2 --- /dev/null +++ b/ui/src/css/components/home/ComposeDisplay.css @@ -0,0 +1,31 @@ +.detail-button { + background-color: #428bca; + border: none; + color: white; + padding: 6px 18px; + text-align: center; + border-radius: 4px; + float: right; +} + +.compose-button { + background-color: #428bca; + border: none; + color: white; + padding: 10px 24px; + text-align: center; + margin-top: 10px; + display: block; + border-radius: 4px; + position: relative; + float: left; +} + +.compose-node-details { + margin-top: 30px; + padding: 20px; + padding-bottom: 40px; + border-radius: 4px; + background-color: #f8f8f8; +} + diff --git a/ui/src/css/components/home/DetailDisplay.css b/ui/src/css/components/home/DetailDisplay.css new file mode 100644 index 0000000..c5154bb --- /dev/null +++ b/ui/src/css/components/home/DetailDisplay.css @@ -0,0 +1,9 @@ +.details { + margin-top: 30px; + padding: 20px; + padding-bottom: 40px; + width: 100%; + border-radius: 4px; + background-color: #f8f8f8; +} + diff --git a/ui/src/customized.css b/ui/src/css/components/home/Home.css similarity index 68% rename from ui/src/customized.css rename to ui/src/css/components/home/Home.css index e707ff2..4805d73 100644 --- a/ui/src/customized.css +++ b/ui/src/css/components/home/Home.css @@ -50,38 +50,6 @@ hr.separator { height: 2px; } -.detail-button { - background-color: #428bca; - border: none; - color: white; - padding: 6px 18px; - text-align: center; - border-radius: 4px; - float: right; -} - -.compose-button { - background-color: #428bca; - border: none; - color: white; - padding: 10px 24px; - text-align: center; - margin-top: 10px; - display: block; - border-radius: 4px; - position: relative; - float: left; -} - -.details { - margin-top: 30px; - padding: 20px; - padding-bottom: 40px; - width: 100%; - border-radius: 4px; - background-color: #f8f8f8; -} - .resource { margin-bottom: 10px; padding: 20px; @@ -90,30 +58,6 @@ hr.separator { 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 */ @@ -192,3 +136,7 @@ hr.separator { border-radius: 50%; } +.compose-node-button { + margin-right: 20px; +} + diff --git a/ui/src/css/components/home/NodeList.css b/ui/src/css/components/home/NodeList.css new file mode 100644 index 0000000..ffd5a27 --- /dev/null +++ b/ui/src/css/components/home/NodeList.css @@ -0,0 +1,10 @@ +.node-detail-button { + background-color: #428bca; + border: none; + color: white; + padding: 6px 18px; + text-align: center; + border-radius: 4px; + float: right; +} + diff --git a/ui/src/css/components/home/ResourceList.css b/ui/src/css/components/home/ResourceList.css new file mode 100644 index 0000000..2c7dbe0 --- /dev/null +++ b/ui/src/css/components/home/ResourceList.css @@ -0,0 +1,24 @@ +.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; +} + + diff --git a/ui/src/css/customized.css b/ui/src/css/customized.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/ui/src/css/customized.css @@ -0,0 +1 @@ + diff --git a/ui/src/index.html b/ui/src/index.html index bde32af..86f0d3c 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -4,7 +4,6 @@ Rack Scale Design - diff --git a/ui/src/js/components/home/ComposeDisplay.js b/ui/src/js/components/home/ComposeDisplay.js index 9a9e150..08f826c 100644 --- a/ui/src/js/components/home/ComposeDisplay.js +++ b/ui/src/js/components/home/ComposeDisplay.js @@ -17,6 +17,7 @@ import React from "react"; var config = require('../../config.js'); var util = require('../../util.js'); +var style = require("../../../css/components/home/ComposeDisplay.css"); const VlanItem = React.createClass({ @@ -153,41 +154,41 @@ const ComposeDisplay = React.createClass({ displayStyle = "none"; } return ( -
+
- - + + - - + + - - + + - - + + - - + + - - + + - - + + - - +
Name:Name:
Description:Description:
System Memory GB:System Memory GB:
Processor Model:Processor Model:
Remote Storage Capacity GB:Remote Storage Capacity GB:
Remote storage IQN:Remote storage IQN:
Remote storage master drive:Remote storage master drive:
Ethernet interface: + Ethernet interface: {this.state.vlans.map(function(obj) { return }.bind(this))} diff --git a/ui/src/js/components/home/DetailDisplay.js b/ui/src/js/components/home/DetailDisplay.js index 131d9a5..fc4bff7 100644 --- a/ui/src/js/components/home/DetailDisplay.js +++ b/ui/src/js/components/home/DetailDisplay.js @@ -15,6 +15,8 @@ import React from "react"; +var style = require("../../../css/components/home/DetailDisplay.css"); + const DetailDisplay = React.createClass({ renderPod: function(data) { diff --git a/ui/src/js/components/home/Home.js b/ui/src/js/components/home/Home.js index 39e9753..b3569c9 100644 --- a/ui/src/js/components/home/Home.js +++ b/ui/src/js/components/home/Home.js @@ -19,6 +19,7 @@ import NodeList from "./NodeList"; var config = require('../../config.js'); var util = require('../../util.js'); +var style = require("../../../css/components/home/Home.css"); const Home = React.createClass({ @@ -56,12 +57,12 @@ const Home = React.createClass({ renderHome: function() { return ( -
+

Welcome to RSD Details

This is a brief overview of all kinds of resources in this environment. See the User Guide for more information on how to configure them.

- this.props.onShowCompose()} value="Compose Node" /> + this.props.onShowCompose()} value="Compose Node" /> this.configCompose()} value="Compose From Config File" />

diff --git a/ui/src/js/components/home/NodeList.js b/ui/src/js/components/home/NodeList.js index 2a8d50e..15e5ab8 100644 --- a/ui/src/js/components/home/NodeList.js +++ b/ui/src/js/components/home/NodeList.js @@ -17,6 +17,7 @@ import React from "react"; var config = require('../../config.js'); var util = require('../../util.js'); +var style = require("../../../css/components/home/NodeList.css"); const NodeList = React.createClass({ @@ -97,11 +98,11 @@ const NodeList = React.createClass({ return this.props.nodes.map((node, i) =>
{node.Name} - this.props.onShowDetail(node, this.props.header)} value="Show" /> - this.delete(node.Id)} value="Delete" /> - this.setBoot(node.Id)} value="Set Boot Source" /> - this.assemble(node.Id)} value="Assemble" /> - this.powerOn(node.Id)} value="Power On" /> + this.props.onShowDetail(node, this.props.header)} value="Show" /> + this.delete(node.Id)} value="Delete" /> + this.setBoot(node.Id)} value="Set Boot Source" /> + this.assemble(node.Id)} value="Assemble" /> + 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 955a6ea..36b164f 100644 --- a/ui/src/js/components/home/ResourceList.js +++ b/ui/src/js/components/home/ResourceList.js @@ -16,6 +16,7 @@ import React from "react"; var util = require('../../util.js'); +var style = require("../../../css/components/home/ResourceList.css"); const ResourceList = React.createClass({ diff --git a/ui/src/rsd.css b/ui/src/rsd.css deleted file mode 100644 index 9570c1f..0000000 --- a/ui/src/rsd.css +++ /dev/null @@ -1,27 +0,0 @@ -.header { - margin-top: 40px; - width: 100%; - background-color: rgb(51, 102, 255); - color: rgb(0, 0, 0); - height: 40px; - padding-left: 10px; - padding-top: 20px; -} - -.header:hover { - background-color: rgb(204, 204, 255); -} - -.item { - width: 100%; - background-color: rgb(153, 179, 255); - color: rgb(0, 0, 0); - height: 40px; - padding-left: 30px; - padding-top: 2px; - border-bottom: solid 1px rgb(51, 102, 255); -} - -.item:hover { - background-color: rgb(204, 204, 255); -} \ No newline at end of file diff --git a/ui/webpack.config.js b/ui/webpack.config.js index 31ea969..8cbc60d 100644 --- a/ui/webpack.config.js +++ b/ui/webpack.config.js @@ -18,6 +18,10 @@ module.exports = { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], } + }, + { + test: /\.css$/, + loader: "style-loader!css-loader" } ] },