diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/home')
14 files changed, 0 insertions, 431 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 deleted file mode 100644 index d5c6e55f..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js +++ /dev/null @@ -1,55 +0,0 @@ -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 /> - <strong>Disclaimer: </strong> - 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.txt">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 deleted file mode 100644 index 997f8d98..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass +++ /dev/null @@ -1,15 +0,0 @@ -.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 deleted file mode 100644 index 9d4832d9..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index a4c8bd66..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass +++ /dev/null @@ -1,9 +0,0 @@ -@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 deleted file mode 100644 index a799272a..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js +++ /dev/null @@ -1,40 +0,0 @@ -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 deleted file mode 100644 index 6a9ea00c..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import { Container, Jumbotron, Button } from 'reactstrap' -import './JumbotronHeader.sass' - -const JumbotronHeader = () => ( - <section className="jumbotron-header"> - <Container> - <Jumbotron className="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" /> - <p className="lead mt-5"> - <Button - tag="a" - target="_blank" - href="https://atlarge-research.com/pdfs/ccgrid21-opendc-paper.pdf" - color="warning" - > - Read about <strong>OpenDC 2.0</strong> <i className="fa fa-external-link" /> - </Button> - </p> - </Jumbotron> - </Container> - </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 deleted file mode 100644 index 1b6a89fd..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass +++ /dev/null @@ -1,24 +0,0 @@ -.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 deleted file mode 100644 index 643dca65..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js +++ /dev/null @@ -1,22 +0,0 @@ -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 deleted file mode 100644 index 263590d5..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js +++ /dev/null @@ -1,29 +0,0 @@ -import classNames from 'classnames' -import React from 'react' -import { Row, Col } from 'reactstrap' -import ContentSection from './ContentSection' -import './ScreenshotSection.sass' - -const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => ( - <ContentSection name={name} title={title}> - <Row> - <Col - xl="5" - lg="5" - md="5" - sm="!2" - className={classNames('text-left my-auto', { - 'order-1': !imageIsRight, - })} - > - {children} - </Col> - <Col xl="7" lg="7" md="7" sm="12"> - <img src={imageUrl} className="col-12 screenshot" alt={caption} /> - <Row className="text-muted justify-content-center">{caption}</Row> - </Col> - </Row> - </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 deleted file mode 100644 index 6b1a6ec4..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass +++ /dev/null @@ -1,4 +0,0 @@ -.screenshot - 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 deleted file mode 100644 index 8e98717a..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react' -import { Col, Row } from 'reactstrap' -import ContentSection from './ContentSection' - -const SimulationSection = () => { - return ( - <ContentSection name="project" title="Datecenter Simulation"> - <Row> - <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto order-1"> - <h3>Working with OpenDC:</h3> - <ul> - <li>Seamlessly switch between construction and simulation modes</li> - <li> - Choose one of several predefined workloads (Business Critical, Workflows, Machine Learning, - Serverless, etc.) - </li> - <li>Compare datacenter topologies using automated plots and visual summaries</li> - </ul> - </Col> - <Col xl="7" lg="7" md="7" sm="12"> - <img - src="/img/screenshot-simulation.png" - className="col-12 screenshot" - alt="Running an experiment in OpenDC" - /> - <Row className="text-muted justify-content-center">Running an experiment in OpenDC</Row> - </Col> - </Row> - <Row className="mt-5"> - <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto"> - <h3>OpenDC's Simulator:</h3> - <ul> - <li>Includes a detailed operational model of modern datacenters</li> - <li> - Support for emerging datacenter technologies around <em>cloud computing</em>,{' '} - <em>serverless computing</em>, <em>big data</em>, and <em>machine learning</em> - </li> - </ul> - </Col> - - <Col xl="7" lg="7" md="7" sm="12"> - <img src="/img/opendc-architecture.png" className="col-12 screenshot" alt="OpenDC's Architecture" /> - <Row className="text-muted justify-content-center">OpenDC's Architecture</Row> - </Col> - </Row> - </ContentSection> - ) -} - -export default SimulationSection diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js deleted file mode 100644 index e5ed9683..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js +++ /dev/null @@ -1,30 +0,0 @@ -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 deleted file mode 100644 index 1ee1cbf5..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react' -import { Row, Col } from 'reactstrap' -import ContentSection from './ContentSection' - -const TeamLead = ({ photoId, name, description }) => ( - <Col xl="3" lg="3" md="4" sm="6" className="justify-content-center"> - <Col - tag="img" - src={'img/portraits/' + photoId + '.png'} - xl="10" - lg="10" - md="10" - sm="8" - col="5" - className="mb-2 mt-2" - alt={name} - /> - <Col> - <h4>{name}</h4> - <div className="team-member-description">{description}</div> - </Col> - </Col> -) - -const TeamMember = ({ photoId, name }) => ( - <Col xl="2" lg="2" md="3" sm="4" className="justify-content-center"> - <Col - tag="img" - src={'img/portraits/' + photoId + '.png'} - xl="10" - lg="10" - md="10" - sm="8" - col="5" - className="mb-2 mt-2" - alt={name} - /> - <Col> - <h5>{name}</h5> - </Col> - </Col> -) - -const TeamSection = () => ( - <ContentSection name="team" title="OpenDC Team"> - <Row className="justify-content-center"> - <TeamLead photoId="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" /> - <TeamLead photoId="fmastenbroek" name="Fabian Mastenbroek" description="Technology Lead" /> - <TeamLead photoId="gandreadis" name="Georgios Andreadis" description="Former Technology Lead (2018-2020)" /> - <TeamLead photoId="vvanbeek" name="Vincent van Beek" description="Former Technology Lead (2017-2018)" /> - </Row> - <Row className="justify-content-center mt-5"> - <TeamMember photoId="loverweel" name="Leon Overweel" /> - <TeamMember photoId="lfdversluis" name="Laurens Versluis" /> - <TeamMember photoId="evaneyk" name="Erwin van Eyk" /> - <TeamMember photoId="sjounaid" name="Soufiane Jounaid" /> - <TeamMember photoId="wlai" name="Wenchen Lai" /> - <TeamMember photoId="hhe" name="Hongyu He" /> - <TeamMember photoId="jburley" name="Jacob Burley" /> - <TeamMember photoId="jbosch" name="Jaro Bosch" /> - </Row> - </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 deleted file mode 100644 index c6013c71..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js +++ /dev/null @@ -1,40 +0,0 @@ -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 |