diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/home')
14 files changed, 375 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js new file mode 100644 index 00000000..42bdab8a --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js @@ -0,0 +1,54 @@ +import React from 'react' +import FontAwesome from 'react-fontawesome' +import './ContactSection.sass' +import ContentSection from './ContentSection' + +const ContactSection = () => ( + <ContentSection name="contact" title="Contact"> + <div className="row justify-content-center"> + <div className="col-4"> + <a href="https://github.com/atlarge-research/opendc"> + <FontAwesome name="github" size="3x" className="mb-2" /> + <div className="w-100" /> + atlarge-research/opendc + </a> + </div> + <div className="col-4"> + <a href="mailto:opendc@atlarge-research.com"> + <FontAwesome name="envelope" size="3x" className="mb-2" /> + <div className="w-100" /> + opendc@atlarge-research.com + </a> + </div> + </div> + <div className="row"> + <div className="col text-center"> + <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft" /> + </div> + </div> + <div className="row"> + <div className="col text-center"> + A project by the + <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer"> + <strong>@Large Research Group</strong> + </a> + . + </div> + </div> + <div className="row"> + <div className="col text-center disclaimer mt-5 small"> + <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" /> + <br /> + OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable. + <br /> + The OpenDC authors should in no way be liable in the event this happens (see our{' '} + <strong> + <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md">license</a> + </strong> + ). Sorry for the inconvenience. + </div> + </div> + </ContentSection> +) + +export default ContactSection diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass b/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass new file mode 100644 index 00000000..997f8d98 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass @@ -0,0 +1,15 @@ +.contact-section + background-color: #444 + color: #ddd + + a + color: #ddd + + a:hover + color: #fff + + .tudelft-icon + height: 100px + + .disclaimer + color: #cccccc diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js new file mode 100644 index 00000000..9d4832d9 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js @@ -0,0 +1,19 @@ +import classNames from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' +import './ContentSection.sass' + +const ContentSection = ({ name, title, children }) => ( + <div id={name} className={classNames(name + '-section', 'content-section')}> + <div className="container"> + <h1>{title}</h1> + {children} + </div> + </div> +) + +ContentSection.propTypes = { + name: PropTypes.string.isRequired, +} + +export default ContentSection diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass b/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass new file mode 100644 index 00000000..a4c8bd66 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass @@ -0,0 +1,9 @@ +@import ../../style-globals/_variables.sass + +.content-section + padding-top: 50px + padding-bottom: 150px + text-align: center + + h1 + margin-bottom: 30px diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js new file mode 100644 index 00000000..a799272a --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js @@ -0,0 +1,40 @@ +import React from 'react' + +const IntroSection = () => ( + <section id="intro" className="intro-section"> + <div className="container pt-5 pb-3"> + <div className="row justify-content-center"> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <h4>The datacenter (DC) industry...</h4> + <ul> + <li>Is worth over $15 bn, and growing</li> + <li>Has many hard-to-grasp concepts</li> + <li>Needs to become accessible to many</li> + </ul> + </div> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <img + src="img/datacenter-drawing.png" + className="col-12 img-fluid" + alt="Schematic top-down view of a datacenter" + /> + <p className="col-12 figure-caption text-center"> + <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif"> + Image source + </a> + </p> + </div> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <h4>OpenDC provides...</h4> + <ul> + <li>Collaborative online DC modeling</li> + <li>Diverse and effective DC simulation</li> + <li>Exploratory DC performance feedback</li> + </ul> + </div> + </div> + </div> + </section> +) + +export default IntroSection diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js new file mode 100644 index 00000000..7b410679 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js @@ -0,0 +1,18 @@ +import React from 'react' +import './JumbotronHeader.sass' + +const JumbotronHeader = () => ( + <section className="jumbotron-header"> + <div className="container"> + <div className="jumbotron text-center"> + <h1> + Open<span className="dc">DC</span> + </h1> + <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p> + <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" /> + </div> + </div> + </section> +) + +export default JumbotronHeader diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass new file mode 100644 index 00000000..1b6a89fd --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass @@ -0,0 +1,24 @@ +.jumbotron-header + background: #00A6D6 + +.jumbotron + background-color: inherit + margin-bottom: 0 + + padding-top: 120px + padding-bottom: 120px + + img + max-width: 110px + + h1 + color: #fff + font-size: 4.5em + + .dc + color: #fff + font-weight: bold + + .lead + color: #fff + font-size: 1.4em diff --git a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js new file mode 100644 index 00000000..643dca65 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js @@ -0,0 +1,22 @@ +import React from 'react' +import ScreenshotSection from './ScreenshotSection' + +const ModelingSection = () => ( + <ScreenshotSection + name="modeling" + title="Datacenter Modeling" + imageUrl="/img/screenshot-construction.png" + caption="Building a datacenter in OpenDC" + imageIsRight={true} + > + <h3>Collaboratively...</h3> + <ul> + <li>Model DC layout, and room locations and types</li> + <li>Place racks in rooms and nodes in racks</li> + <li>Add real-world CPU, GPU, memory, storage and network units to each node</li> + <li>Select from diverse scheduling policies</li> + </ul> + </ScreenshotSection> +) + +export default ModelingSection diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js new file mode 100644 index 00000000..c987d5d0 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js @@ -0,0 +1,24 @@ +import classNames from 'classnames' +import React from 'react' +import ContentSection from './ContentSection' +import './ScreenshotSection.sass' + +const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => ( + <ContentSection name={name} title={title}> + <div className="row"> + <div + className={classNames('col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left', { + 'order-1': !imageIsRight, + })} + > + {children} + </div> + <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12"> + <img src={imageUrl} className="col-12 screenshot" alt={caption} /> + <div className="row text-muted justify-content-center">{caption}</div> + </div> + </div> + </ContentSection> +) + +export default ScreenshotSection diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass new file mode 100644 index 00000000..2f454cb4 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass @@ -0,0 +1,5 @@ +.screenshot + outline: 2px black solid + padding-left: 0 + padding-right: 0 + margin-bottom: 5px diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js new file mode 100644 index 00000000..b0244cb5 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js @@ -0,0 +1,22 @@ +import React from 'react' +import ScreenshotSection from './ScreenshotSection' + +const ModelingSection = () => ( + <ScreenshotSection + name="project" + title="Datacenter Simulation" + imageUrl="/img/screenshot-simulation-zoom.png" + caption="Running an experiment in OpenDC" + imageIsRight={false} + > + <h3>Working with OpenDC:</h3> + <ul> + <li>Seamlessly switch between construction and simulation modes</li> + <li>Choose one of several predefined workloads (Big Data, Bag of Tasks, Hadoop, etc.)</li> + <li>Play, pause, and skip around the informative simulation timeline</li> + <li>Visualize and demo live</li> + </ul> + </ScreenshotSection> +) + +export default ModelingSection diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js new file mode 100644 index 00000000..e5ed9683 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js @@ -0,0 +1,30 @@ +import React from 'react' +import ContentSection from './ContentSection' + +const Stakeholder = ({ name, title, subtitle }) => ( + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6"> + <img + src={'img/stakeholders/' + name + '.png'} + className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" + alt={title} + /> + <div className="text-center mt-2"> + <h4>{title}</h4> + <p>{subtitle}</p> + </div> + </div> +) + +const StakeholderSection = () => ( + <ContentSection name="stakeholders" title="Stakeholders"> + <div className="row justify-content-center"> + <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" /> + <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" /> + <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" /> + <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design" /> + <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts" /> + </div> + </ContentSection> +) + +export default StakeholderSection diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js new file mode 100644 index 00000000..4b6f1e25 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js @@ -0,0 +1,53 @@ +import React from 'react' +import ContentSection from './ContentSection' + +const TeamMember = ({ photoId, name, description }) => ( + <div className="col-xl-4 col-lg-4 col-md-5 col-sm-6 col-12 justify-content-center"> + <img + src={'img/portraits/' + photoId + '.png'} + className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2" + alt={name} + /> + <div className="col-12"> + <h4>{name}</h4> + <div className="team-member-description">{description}</div> + </div> + </div> +) + +const TeamSection = () => ( + <ContentSection name="team" title="Core Team"> + <div className="row justify-content-center"> + <TeamMember photoId="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" /> + <TeamMember + photoId="gandreadis" + name="Georgios Andreadis" + description="Software Engineer responsible for the frontend web application" + /> + <TeamMember + photoId="fmastenbroek" + name="Fabian Mastenbroek" + description="Software Engineer responsible for the datacenter simulator" + /> + <TeamMember + photoId="jburley" + name="Jacob Burley" + description="Software Engineer responsible for prefabricated components" + /> + <TeamMember + photoId="loverweel" + name="Leon Overweel" + description="Former product lead and Software Engineer" + /> + </div> + <div className="text-center lead mt-3"> + See{' '} + <a target="_blank" href="http://atlarge.science/opendc#team" rel="noopener noreferrer"> + atlarge.science/opendc + </a>{' '} + for the full team! + </div> + </ContentSection> +) + +export default TeamSection diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js new file mode 100644 index 00000000..c6013c71 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js @@ -0,0 +1,40 @@ +import React from 'react' +import FontAwesome from 'react-fontawesome' +import ContentSection from './ContentSection' + +const TechnologiesSection = () => ( + <ContentSection name="technologies" title="Technologies"> + <ul className="list-group text-left"> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary"> + <span style={{ minWidth: 100 }}> + <FontAwesome name="window-maximize" className="mr-2" /> + <strong className="">Browser</strong> + </span> + <span className="text-right">JavaScript, React, Redux, Konva</span> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning"> + <span style={{ minWidth: 100 }}> + <FontAwesome name="television" className="mr-2" /> + <strong>Server</strong> + </span> + <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success"> + <span style={{ minWidth: 100 }}> + <FontAwesome name="database" className="mr-2" /> + <strong>Database</strong> + </span> + <span className="text-right">MongoDB</span> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger"> + <span style={{ minWidth: 100 }}> + <FontAwesome name="cogs" className="mr-2" /> + <strong>Simulator</strong> + </span> + <span className="text-right">Kotlin</span> + </li> + </ul> + </ContentSection> +) + +export default TechnologiesSection |