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

4 files changed, 0 insertions, 193 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
deleted file mode 100644
index d61ff24e..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Portfolio } from '../../../../shapes'
-import Link from 'next/link'
-import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
-import { Button, Col, Row } from 'reactstrap'
-import classNames from 'classnames'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
-
-function PortfolioListComponent({
-    portfolios,
-    currentProjectId,
-    currentPortfolioId,
-    onNewPortfolio,
-    onChoosePortfolio,
-    onDeletePortfolio,
-}) {
-    return (
-        <div className="pb-3">
-            <h2>
-                Portfolios
-                <Button color="primary" outline className="float-right" onClick={(e) => onNewPortfolio(e)}>
-                    <FontAwesomeIcon icon={faPlus} />
-                </Button>
-            </h2>
-
-            {portfolios.map((portfolio) => (
-                <div key={portfolio._id}>
-                    <Row className="row mb-1">
-                        <Col
-                            xs="7"
-                            className={classNames('align-self-center', {
-                                'font-weight-bold': portfolio._id === currentPortfolioId,
-                            })}
-                        >
-                            {portfolio.name}
-                        </Col>
-                        <Col xs="5" className="text-right">
-                            <Link passHref href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
-                                <Button
-                                    color="primary"
-                                    outline
-                                    className="mr-1"
-                                    onClick={() => onChoosePortfolio(portfolio._id)}
-                                >
-                                    <FontAwesomeIcon icon={faPlay} />
-                                </Button>
-                            </Link>
-                            <Button color="danger" outline onClick={() => onDeletePortfolio(portfolio._id)}>
-                                <FontAwesomeIcon icon={faTrash} />
-                            </Button>
-                        </Col>
-                    </Row>
-                    <ScenarioListContainer portfolioId={portfolio._id} />
-                </div>
-            ))}
-        </div>
-    )
-}
-
-PortfolioListComponent.propTypes = {
-    portfolios: PropTypes.arrayOf(Portfolio),
-    currentProjectId: PropTypes.string,
-    currentPortfolioId: PropTypes.string,
-    onNewPortfolio: PropTypes.func.isRequired,
-    onChoosePortfolio: PropTypes.func.isRequired,
-    onDeletePortfolio: PropTypes.func.isRequired,
-}
-
-export default PortfolioListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
deleted file mode 100644
index 10d22e5b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Sidebar from '../Sidebar'
-import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
-import PortfolioListContainer from '../../../../containers/app/sidebars/project/PortfolioListContainer'
-import { Container } from 'reactstrap'
-
-const ProjectSidebarComponent = ({ collapsible }) => (
-    <Sidebar isRight={false} collapsible={collapsible}>
-        <Container fluid className="h-100 overflow-auto">
-            <TopologyListContainer />
-            <PortfolioListContainer />
-        </Container>
-    </Sidebar>
-)
-
-ProjectSidebarComponent.propTypes = {
-    collapsible: PropTypes.bool,
-}
-
-export default ProjectSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
deleted file mode 100644
index e81d2b78..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Scenario } from '../../../../shapes'
-import { Button, Col, Row } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
-
-function ScenarioListComponent({ scenarios, portfolioId, onNewScenario, onDeleteScenario }) {
-    return (
-        <>
-            {scenarios.map((scenario, idx) => (
-                <Row key={scenario._id} className="mb-1">
-                    <Col xs="7" className="pl-5 align-self-center">
-                        {scenario.name}
-                    </Col>
-                    <Col xs="5" className="text-right">
-                        <Button
-                            color="danger"
-                            outline
-                            disabled={idx === 0}
-                            onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
-                        >
-                            <FontAwesomeIcon icon={faTrash} />
-                        </Button>
-                    </Col>
-                </Row>
-            ))}
-            <div className="pl-4 mb-2">
-                <Button color="primary" outline onClick={() => onNewScenario(portfolioId)}>
-                    <FontAwesomeIcon icon={faPlus} className="mr-1" />
-                    New scenario
-                </Button>
-            </div>
-        </>
-    )
-}
-
-ScenarioListComponent.propTypes = {
-    scenarios: PropTypes.arrayOf(Scenario),
-    portfolioId: PropTypes.string,
-    onNewScenario: PropTypes.func.isRequired,
-    onDeleteScenario: PropTypes.func.isRequired,
-}
-
-export default ScenarioListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
deleted file mode 100644
index ac58669b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Topology } from '../../../../shapes'
-import { Button, Col, Row } from 'reactstrap'
-import classNames from 'classnames'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
-
-function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
-    return (
-        <div className="pb-3">
-            <h2>
-                Topologies
-                <Button color="primary" outline className="float-right" onClick={onNewTopology}>
-                    <FontAwesomeIcon icon={faPlus} />
-                </Button>
-            </h2>
-
-            {topologies.map((topology, idx) => (
-                <Row key={topology._id} className="mb-1">
-                    <Col
-                        xs="7"
-                        className={classNames('align-self-center', {
-                            'font-weight-bold': topology._id === currentTopologyId,
-                        })}
-                    >
-                        {topology.name}
-                    </Col>
-                    <Col xs="5" className="text-right">
-                        <Button color="primary" outline className="mr-1" onClick={() => onChooseTopology(topology._id)}>
-                            <FontAwesomeIcon icon={faPlay} />
-                        </Button>
-                        <Button
-                            color="danger"
-                            outline
-                            disabled={idx === 0}
-                            onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
-                        >
-                            <FontAwesomeIcon icon={faTrash} />
-                        </Button>
-                    </Col>
-                </Row>
-            ))}
-        </div>
-    )
-}
-
-TopologyListComponent.propTypes = {
-    topologies: PropTypes.arrayOf(Topology),
-    currentTopologyId: PropTypes.string,
-    onChooseTopology: PropTypes.func.isRequired,
-    onNewTopology: PropTypes.func.isRequired,
-    onDeleteTopology: PropTypes.func.isRequired,
-}
-
-export default TopologyListComponent