From dad2701ac61d032289a79e69bb0e6ea47cb7323d Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sat, 8 May 2021 22:15:10 +0200
Subject: ui: Update disclaimer in footer

---
 opendc-web/opendc-web-ui/src/components/home/ContactSection.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index 42bdab8a..d5c6e55f 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -39,11 +39,12 @@ const ContactSection = () => (
             <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.md">license</a>
+                    <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt">license</a>
                 </strong>
                 ). Sorry for the inconvenience.
             </div>
-- 
cgit v1.2.3


From 85e9603897c020bb4634c7c941d66f2c06dcacb7 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 9 May 2021 10:56:57 +0200
Subject: ui: Actualize team section

---
 .../src/components/home/TeamSection.js             | 88 ++++++++++++----------
 1 file changed, 50 insertions(+), 38 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
index 4b6f1e25..1ee1cbf5 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -1,52 +1,64 @@
 import React from 'react'
+import { Row, Col } from 'reactstrap'
 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
+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'}
-            className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2"
+            xl="10"
+            lg="10"
+            md="10"
+            sm="8"
+            col="5"
+            className="mb-2 mt-2"
             alt={name}
         />
-        <div className="col-12">
+        <Col>
             <h4>{name}</h4>
             <div className="team-member-description">{description}</div>
-        </div>
-    </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="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 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>
 )
 
-- 
cgit v1.2.3


From dceed47c17241a25b58437a9772cc418551ac30a Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 9 May 2021 11:11:14 +0200
Subject: ui: Update screenshots of OpenDC user-interface

---
 .../src/components/home/ScreenshotSection.js        | 21 +++++++++++++--------
 .../src/components/home/ScreenshotSection.sass      |  1 -
 .../src/components/home/SimulationSection.js        | 10 ++++++----
 3 files changed, 19 insertions(+), 13 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index c987d5d0..263590d5 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,23 +1,28 @@
 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}>
-        <div className="row">
-            <div
-                className={classNames('col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left', {
+        <Row>
+            <Col
+                xl="5"
+                lg="5"
+                md="5"
+                sm="!2"
+                className={classNames('text-left my-auto', {
                     'order-1': !imageIsRight,
                 })}
             >
                 {children}
-            </div>
-            <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12">
+            </Col>
+            <Col xl="7" lg="7" md="7" sm="12">
                 <img src={imageUrl} className="col-12 screenshot" alt={caption} />
-                <div className="row text-muted justify-content-center">{caption}</div>
-            </div>
-        </div>
+                <Row className="text-muted justify-content-center">{caption}</Row>
+            </Col>
+        </Row>
     </ContentSection>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
index 2f454cb4..6b1a6ec4 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
@@ -1,5 +1,4 @@
 .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
index b0244cb5..739a5d11 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -5,16 +5,18 @@ const ModelingSection = () => (
     <ScreenshotSection
         name="project"
         title="Datacenter Simulation"
-        imageUrl="/img/screenshot-simulation-zoom.png"
+        imageUrl="/img/screenshot-simulation.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>
+            <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>
     </ScreenshotSection>
 )
-- 
cgit v1.2.3


From a0345ef9aac2138b6b78cdf72a168862e47a45da Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 9 May 2021 11:21:51 +0200
Subject: ui: Link to OpenDC 2.0 paper

---
 .../src/components/home/JumbotronHeader.js            | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
index 7b410679..6a9ea00c 100644
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
@@ -1,17 +1,28 @@
 import React from 'react'
+import { Container, Jumbotron, Button } from 'reactstrap'
 import './JumbotronHeader.sass'
 
 const JumbotronHeader = () => (
     <section className="jumbotron-header">
-        <div className="container">
-            <div className="jumbotron text-center">
+        <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" />
-            </div>
-        </div>
+                <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>
 )
 
-- 
cgit v1.2.3


From 33e425279f171539205fcda20c6817e9f8e02033 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 9 May 2021 11:37:04 +0200
Subject: ui: Include figure on OpenDC 2.0 architecture

---
 .../src/components/home/SimulationSection.js       | 68 +++++++++++++++-------
 1 file changed, 47 insertions(+), 21 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index 739a5d11..8e98717a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -1,24 +1,50 @@
 import React from 'react'
-import ScreenshotSection from './ScreenshotSection'
+import { Col, Row } from 'reactstrap'
+import ContentSection from './ContentSection'
 
-const ModelingSection = () => (
-    <ScreenshotSection
-        name="project"
-        title="Datacenter Simulation"
-        imageUrl="/img/screenshot-simulation.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 (Business Critical, Workflows, Machine Learning, Serverless,
-                etc.)
-            </li>
-            <li>Compare datacenter topologies using automated plots and visual summaries</li>
-        </ul>
-    </ScreenshotSection>
-)
+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>
 
-export default ModelingSection
+                <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
-- 
cgit v1.2.3