merge: Add PatternFly 4 web interface (#161)

This pull requests adds the new web interface based on the PatternFly 4 design framework.
This framework enables us to develop more quickly the interfaces necessary in OpenDC. 

* Remove the OpenDC landing page from the web interface module
* Add support for the PatternFly 4 framework in Next.js
* Relax topology schema requirements
* Migrate UI components to PatternFly 4

14 files changed, 0 insertions, 549 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 60a7e6a3..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-import { Row, Col } from 'reactstrap'
-import ContentSection from './ContentSection'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faExclamationTriangle, faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { contactSection, tudelftIcon } from './ContactSection.module.scss'
-
-const ContactSection = () => (
-    <ContentSection name="contact" title="Contact" className={contactSection}>
-        <Row className="justify-content-center">
-            <Col md="4">
-                <a href="https://github.com/atlarge-research/opendc">
-                    <FontAwesomeIcon icon={faGithub} size="3x" className="mb-2" />
-                    <div className="w-100" />
-                    atlarge-research/opendc
-                </a>
-            </Col>
-            <Col md="4">
-                <a href="mailto:opendc@atlarge-research.com">
-                    <FontAwesomeIcon icon={faEnvelope} size="3x" className="mb-2" />
-                    <div className="w-100" />
-                    opendc@atlarge-research.com
-                </a>
-            </Col>
-        </Row>
-        <Row>
-            <Col className="text-center">
-                <Image
-                    src="/img/tudelft-icon.png"
-                    className={tudelftIcon}
-                    layout="intrinsic"
-                    width={162}
-                    height={100}
-                    alt="TU Delft"
-                />
-            </Col>
-        </Row>
-        <Row>
-            <Col className="text-center">
-                A project by the &nbsp;
-                <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
-                    <strong>@Large Research Group</strong>
-                </a>
-                .
-            </Col>
-        </Row>
-        <Row>
-            <Col className="text-center disclaimer mt-5 small">
-                <FontAwesomeIcon icon={faExclamationTriangle} 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.
-            </Col>
-        </Row>
-    </ContentSection>
-)
-
-export default ContactSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
deleted file mode 100644
index 9ab4fcb1..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.contactSection {
-    background-color: #444;
-    color: #ddd;
-
-    a {
-        color: #ddd;
-
-        &:hover {
-            color: #fff;
-        }
-    }
-
-    .tudelftIcon {
-        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 abaa565c..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import classNames from 'classnames'
-import { Container } from 'reactstrap'
-import { contentSection } from './ContentSection.module.scss'
-
-const ContentSection = ({ name, title, children, className }) => (
-    <section id={name} className={classNames(className, contentSection)}>
-        <Container>
-            <h1>{title}</h1>
-            {children}
-        </Container>
-    </section>
-)
-
-ContentSection.propTypes = {
-    name: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    className: PropTypes.string,
-}
-
-export default ContentSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
deleted file mode 100644
index d27a0ce0..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'src/style/_variables.scss';
-
-.contentSection {
-    padding-top: 50px;
-    padding-bottom: 50px;
-    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 f9000d32..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Container, Row, Col } from 'reactstrap'
-
-const IntroSection = ({ className }) => (
-    <section id="intro" className={className}>
-        <Container className="pt-5 pb-3">
-            <Row className="justify-content-center">
-                <Col xl="4" lg="4" md="4" sm="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>
-                </Col>
-                <Col xl="4" lg="4" md="4" sm="8">
-                    <Image
-                        src="/img/datacenter-drawing.png"
-                        className="col-12"
-                        layout="intrinsic"
-                        width={350}
-                        height={197}
-                        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>
-                </Col>
-                <Col xl="4" lg="4" md="4" sm="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>
-                </Col>
-            </Row>
-        </Container>
-    </section>
-)
-
-IntroSection.propTypes = {
-    className: PropTypes.string,
-}
-
-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 98aa0af2..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-import { Container, Jumbotron, Button } from 'reactstrap'
-import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
-
-const JumbotronHeader = () => (
-    <section className={jumbotronHeader}>
-        <Container>
-            <Jumbotron className={jumbotron}>
-                <h1>
-                    Open<span className={dc}>DC</span>
-                </h1>
-                <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p>
-                <div className="mt-5">
-                    <Image src="/img/logo.png" layout="intrinsic" height={110} width={110} alt="OpenDC" />
-                </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> <FontAwesomeIcon icon={faExternalLinkAlt} />
-                    </Button>
-                </p>
-            </Jumbotron>
-        </Container>
-    </section>
-)
-
-export default JumbotronHeader
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
deleted file mode 100644
index 567b3e73..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.jumbotronHeader {
-    background: #00a6d6;
-}
-
-.jumbotron {
-    background-color: inherit;
-    margin-bottom: 0;
-    text-align: center;
-
-    padding-top: 120px;
-    padding-bottom: 120px;
-
-    img {
-        max-width: 110px;
-    }
-
-    h1 {
-        color: #fff;
-        font-size: 4.5em;
-
-        .dc {
-            color: #fff;
-            font-weight: bold;
-        }
-    }
-
-    :global(.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 8959663a..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import ScreenshotSection from './ScreenshotSection'
-
-const ModelingSection = ({ className }) => (
-    <ScreenshotSection
-        name="modeling"
-        title="Datacenter Modeling"
-        imageUrl="/img/screenshot-construction.png"
-        caption="Building a datacenter in OpenDC"
-        imageIsRight={true}
-        className={className}
-    >
-        <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>
-)
-
-ModelingSection.propTypes = {
-    className: PropTypes.string,
-}
-
-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 58fe1710..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Row, Col } from 'reactstrap'
-import ContentSection from './ContentSection'
-import { screenshot } from './ScreenshotSection.module.scss'
-
-const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsRight, children }) => (
-    <ContentSection name={name} title={title} className={className}>
-        <Row>
-            <Col xl="5" lg="5" md="5" sm="12" className={`text-left my-auto ${!imageIsRight ? 'order-1' : ''}`}>
-                {children}
-            </Col>
-            <Col xl="7" lg="7" md="7" sm="12">
-                <Image
-                    src={imageUrl}
-                    className={`col-12 ${screenshot}`}
-                    layout="intrinsic"
-                    width={635}
-                    height={419}
-                    alt={caption}
-                />
-                <div className="row text-muted justify-content-center">{caption}</div>
-            </Col>
-        </Row>
-    </ContentSection>
-)
-
-ScreenshotSection.propTypes = {
-    className: PropTypes.string,
-    name: PropTypes.string,
-    title: PropTypes.string,
-    imageUrl: PropTypes.string,
-    caption: PropTypes.string,
-    imageIsRight: PropTypes.bool,
-    children: PropTypes.node,
-}
-
-export default ScreenshotSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
deleted file mode 100644
index 7e22de32..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
+++ /dev/null
@@ -1,5 +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 46ce6a35..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Col, Row } from 'reactstrap'
-import ContentSection from './ContentSection'
-
-const SimulationSection = ({ className }) => {
-    return (
-        <ContentSection name="project" title="Datecenter Simulation" className={className}>
-            <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">
-                    <Image
-                        src="/img/screenshot-simulation.png"
-                        className="col-12"
-                        layout="intrinsic"
-                        width={635}
-                        height={419}
-                        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&apos;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">
-                    <Image
-                        src="/img/opendc-architecture.png"
-                        className="col-12"
-                        layout="intrinsic"
-                        width={635}
-                        height={232}
-                        alt="OpenDC's Architecture"
-                    />
-                    <Row className="text-muted justify-content-center">OpenDC&apos;s Architecture</Row>
-                </Col>
-            </Row>
-        </ContentSection>
-    )
-}
-
-SimulationSection.propTypes = {
-    className: PropTypes.string,
-}
-
-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 aa689ba4..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Row, Col } from 'reactstrap'
-import ContentSection from './ContentSection'
-
-const Stakeholder = ({ name, title, subtitle }) => (
-    <Col xl="4" lg="4" md="4" sm="6">
-        <Col
-            tag="img"
-            xl="3"
-            lg="3"
-            md="4"
-            sm="4"
-            src={'img/stakeholders/' + name + '.png'}
-            className="img-fluid"
-            alt={title}
-        />
-        <div className="text-center mt-2">
-            <h4>{title}</h4>
-            <p>{subtitle}</p>
-        </div>
-    </Col>
-)
-
-Stakeholder.propTypes = {
-    name: PropTypes.string,
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-}
-
-const StakeholderSection = ({ className }) => (
-    <ContentSection name="stakeholders" title="Stakeholders" className={className}>
-        <Row className="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" />
-        </Row>
-    </ContentSection>
-)
-
-StakeholderSection.propTypes = {
-    className: PropTypes.string,
-}
-
-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 dd057a93..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-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">
-        <Row>
-            <Col xl="10" lg="10" md="10" sm="8" col="5" className="my-2 mx-auto" alt={name}>
-                <Image
-                    src={'/img/portraits/' + photoId + '.png'}
-                    layout="intrinsic"
-                    width={182}
-                    height={182}
-                    alt={name}
-                />
-            </Col>
-            <Col>
-                <h4>{name}</h4>
-                <div className="team-member-description">{description}</div>
-            </Col>
-        </Row>
-    </Col>
-)
-
-TeamLead.propTypes = {
-    photoId: PropTypes.string,
-    name: PropTypes.string,
-    description: PropTypes.string,
-}
-
-const TeamMember = ({ photoId, name }) => (
-    <Col xl="2" lg="2" md="3" sm="4" className="justify-content-center">
-        <Row>
-            <Col xl="10" lg="10" md="10" sm="8" xs="5" className="my-2 mx-auto">
-                <Image
-                    src={'/img/portraits/' + photoId + '.png'}
-                    layout="intrinsic"
-                    width={100}
-                    height={100}
-                    alt={name}
-                />
-            </Col>
-            <Col>
-                <h5>{name}</h5>
-            </Col>
-        </Row>
-    </Col>
-)
-
-TeamMember.propTypes = {
-    photoId: PropTypes.string,
-    name: PropTypes.string,
-}
-
-const TeamSection = ({ className }) => (
-    <ContentSection name="team" title="OpenDC Team" className={className}>
-        <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>
-)
-
-TeamSection.propTypes = {
-    className: PropTypes.string,
-}
-
-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 e5131c2a..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { ListGroup, ListGroupItem } from 'reactstrap'
-import ContentSection from './ContentSection'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faWindowMaximize, faTv, faDatabase, faCogs } from '@fortawesome/free-solid-svg-icons'
-
-const TechnologiesSection = ({ className }) => (
-    <ContentSection name="technologies" title="Technologies" className={className}>
-        <ListGroup className="list-group text-left">
-            <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
-                <span style={{ minWidth: 100 }}>
-                    <FontAwesomeIcon icon={faWindowMaximize} className="mr-2" />
-                    <strong className="">Browser</strong>
-                </span>
-                <span className="text-right">JavaScript, React, Redux, Konva</span>
-            </ListGroupItem>
-            <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center">
-                <span style={{ minWidth: 100 }}>
-                    <FontAwesomeIcon icon={faTv} className="mr-2" />
-                    <strong>Server</strong>
-                </span>
-                <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
-            </ListGroupItem>
-            <ListGroupItem color="success" className="d-flex justify-content-between align-items-center">
-                <span style={{ minWidth: 100 }}>
-                    <FontAwesomeIcon icon={faDatabase} className="mr-2" />
-                    <strong>Database</strong>
-                </span>
-                <span className="text-right">MongoDB</span>
-            </ListGroupItem>
-            <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center">
-                <span style={{ minWidth: 100 }}>
-                    <FontAwesomeIcon icon={faCogs} className="mr-2" />
-                    <strong>Simulator</strong>
-                </span>
-                <span className="text-right">Kotlin</span>
-            </ListGroupItem>
-        </ListGroup>
-    </ContentSection>
-)
-
-TechnologiesSection.propTypes = {
-    className: PropTypes.string,
-}
-
-export default TechnologiesSection