build: Migrate to flat project structure

This change updates the project structure to become flattened.
Previously, the simulator, frontend and API each lived into their own
directory.

With this change, all modules of the project live in the top-level
directory of the repository. This should improve discoverability of
modules of the project.

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 &nbsp;
+                <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