From a4d2f94f950f60a7960e008d26e099f639acfe9a Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 15:44:43 +0100
Subject: Fix implementation of NewScenarioModal

---
 frontend/src/components/modals/Modal.js            |   4 +-
 .../custom-components/NewScenarioModalComponent.js | 268 +++++++++------------
 frontend/src/containers/modals/NewScenarioModal.js |   1 +
 3 files changed, 122 insertions(+), 151 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js
index 36bb498e..b494d970 100644
--- a/frontend/src/components/modals/Modal.js
+++ b/frontend/src/components/modals/Modal.js
@@ -18,8 +18,8 @@ function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, su
     }
 
     return (
-        <RModal isOpen={modal} toggle={toggle}>
-            <ModalHeader toggle={toggle}>{title}</ModalHeader>
+        <RModal isOpen={modal} toggle={cancel}>
+            <ModalHeader toggle={cancel}>{title}</ModalHeader>
             <ModalBody>{children}</ModalBody>
             <ModalFooter>
                 <Button color="secondary" onClick={cancel}>
diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
index 5ba74b0f..631082a2 100644
--- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -1,168 +1,138 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef } from 'react'
+import { Form, FormGroup, Input, Label } from 'reactstrap'
 import Shapes from '../../../shapes'
 import Modal from '../Modal'
 
-class NewScenarioModalComponent extends React.Component {
-    static propTypes = {
-        show: PropTypes.bool.isRequired,
-        currentPortfolioId: PropTypes.string.isRequired,
-        currentPortfolioScenarioIds: PropTypes.arrayOf(PropTypes.string),
-        traces: PropTypes.arrayOf(Shapes.Trace),
-        topologies: PropTypes.arrayOf(Shapes.Topology),
-        schedulers: PropTypes.arrayOf(Shapes.Scheduler),
-        callback: PropTypes.func.isRequired,
-    }
-
-    componentDidMount() {
-        this.reset()
-    }
+const NewScenarioModalComponent = ({
+    show,
+    callback,
+    currentPortfolioId,
+    currentPortfolioScenarioIds,
+    traces,
+    topologies,
+    schedulers,
+}) => {
+    const textInput = useRef(null)
+    const traceSelect = useRef(null)
+    const traceLoadInput = useRef(null)
+    const topologySelect = useRef(null)
+    const failuresCheckbox = useRef(null)
+    const performanceInterferenceCheckbox = useRef(null)
+    const schedulerSelect = useRef(null)
 
-    componentDidUpdate() {
-        if (this.textInput) {
-            if (this.props.currentPortfolioScenarioIds.length === 0) {
-                this.textInput.value = 'Base scenario'
-            } else if (this.textInput.value === 'Base scenario') {
-                this.textInput.value = ''
-            }
-        }
-    }
-
-    reset() {
-        if (this.textInput) {
-            this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''
-            this.traceSelect.selectedIndex = 0
-            this.traceLoadInput.value = 1.0
-            this.topologySelect.selectedIndex = 0
-            this.failuresCheckbox.checked = false
-            this.performanceInterferenceCheckbox.checked = false
-            this.schedulerSelect.selectedIndex = 0
-        }
-    }
-
-    onSubmit() {
-        this.props.callback(
-            this.textInput.value,
-            this.props.currentPortfolioId,
+    const onSubmit = () => {
+        callback(
+            textInput.current.value,
+            currentPortfolioId,
             {
-                traceId: this.traceSelect.value,
-                loadSamplingFraction: parseFloat(this.traceLoadInput.value),
+                traceId: traceSelect.current.value,
+                loadSamplingFraction: parseFloat(traceLoadInput.current.value),
             },
             {
-                topologyId: this.topologySelect.value,
+                topologyId: topologySelect.current.value,
             },
             {
-                failuresEnabled: this.failuresCheckbox.checked,
-                performanceInterferenceEnabled: this.performanceInterferenceCheckbox.checked,
-                schedulerName: this.schedulerSelect.value,
+                failuresEnabled: failuresCheckbox.current.checked,
+                performanceInterferenceEnabled: performanceInterferenceCheckbox.current.checked,
+                schedulerName: schedulerSelect.current.value,
             }
         )
-        this.reset()
     }
-
-    onCancel() {
-        this.props.callback(undefined)
-        this.reset()
+    const onCancel = () => {
+        callback(undefined)
     }
 
-    render() {
-        return (
-            <Modal
-                title="New Scenario"
-                show={this.props.show}
-                onSubmit={this.onSubmit.bind(this)}
-                onCancel={this.onCancel.bind(this)}
+    return (
+        <Modal title="New Scenario" show={show} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    onSubmit()
+                }}
             >
-                <form
-                    onSubmit={(e) => {
-                        e.preventDefault()
-                        this.onSubmit()
-                    }}
-                >
-                    <div className="form-group">
-                        <label className="form-control-label">Name</label>
-                        <input
-                            type="text"
-                            className="form-control"
-                            required
-                            disabled={this.props.currentPortfolioScenarioIds.length === 0}
-                            ref={(textInput) => (this.textInput = textInput)}
-                        />
-                    </div>
-                    <h4>Trace</h4>
-                    <div className="form-group">
-                        <label className="form-control-label">Trace</label>
-                        <select className="form-control" ref={(traceSelect) => (this.traceSelect = traceSelect)}>
-                            {this.props.traces.map((trace) => (
-                                <option value={trace._id} key={trace._id}>
-                                    {trace.name}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                    <div className="form-group">
-                        <label className="form-control-label">Load sampling fraction</label>
-                        <input
-                            type="number"
-                            className="form-control"
-                            required
-                            ref={(traceLoadInput) => (this.traceLoadInput = traceLoadInput)}
-                        />
-                    </div>
-                    <h4>Topology</h4>
-                    <div className="form-group">
-                        <label className="form-control-label">Topology</label>
-                        <select
-                            className="form-control"
-                            ref={(topologySelect) => (this.topologySelect = topologySelect)}
-                        >
-                            {this.props.topologies.map((topology) => (
-                                <option value={topology._id} key={topology._id}>
-                                    {topology.name}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                    <h4>Operational Phenomena</h4>
-                    <div className="form-check">
-                        <label className="form-check-label">
-                            <input
-                                type="checkbox"
-                                className="form-check-input"
-                                ref={(failuresCheckbox) => (this.failuresCheckbox = failuresCheckbox)}
-                            />
-                            <span className="ml-2">Enable failures</span>
-                        </label>
-                    </div>
-                    <div className="form-check">
-                        <label className="form-check-label">
-                            <input
-                                type="checkbox"
-                                className="form-check-input"
-                                ref={(performanceInterferenceCheckbox) =>
-                                    (this.performanceInterferenceCheckbox = performanceInterferenceCheckbox)
-                                }
-                            />
-                            <span className="ml-2">Enable performance interference</span>
-                        </label>
-                    </div>
-                    <div className="form-group">
-                        <label className="form-control-label">Scheduler</label>
-                        <select
-                            className="form-control"
-                            ref={(schedulerSelect) => (this.schedulerSelect = schedulerSelect)}
-                        >
-                            {this.props.schedulers.map((scheduler) => (
-                                <option value={scheduler.name} key={scheduler.name}>
-                                    {scheduler.name}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                </form>
-            </Modal>
-        )
-    }
+                <FormGroup>
+                    <Label for="name">Name</Label>
+                    <Input
+                        name="name"
+                        type="text"
+                        required
+                        disabled={currentPortfolioScenarioIds.length === 0}
+                        defaultValue={currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''}
+                        innerRef={textInput}
+                    />
+                </FormGroup>
+                <h4>Trace</h4>
+                <FormGroup>
+                    <Label for="trace">Trace</Label>
+                    <Input name="trace" type="select" innerRef={traceSelect}>
+                        {traces.map((trace) => (
+                            <option value={trace._id} key={trace._id}>
+                                {trace.name}
+                            </option>
+                        ))}
+                    </Input>
+                </FormGroup>
+                <FormGroup>
+                    <Label for="trace-load">Load sampling fraction</Label>
+                    <Input
+                        name="trace-load"
+                        type="number"
+                        innerRef={traceLoadInput}
+                        required
+                        defaultValue="1"
+                        min="0"
+                        max="1"
+                        step="0.1"
+                    />
+                </FormGroup>
+                <h4>Topology</h4>
+                <div className="form-group">
+                    <Label for="topology">Topology</Label>
+                    <Input name="topology" type="select" innerRef={topologySelect}>
+                        {topologies.map((topology) => (
+                            <option value={topology._id} key={topology._id}>
+                                {topology.name}
+                            </option>
+                        ))}
+                    </Input>
+                </div>
+                <h4>Operational Phenomena</h4>
+                <FormGroup check>
+                    <Label check for="failures">
+                        <Input type="checkbox" name="failures" innerRef={failuresCheckbox} />{' '}
+                        <span className="ml-2">Enable failures</span>
+                    </Label>
+                </FormGroup>
+                <FormGroup check>
+                    <Label check for="perf-interference">
+                        <Input type="checkbox" name="perf-interference" innerRef={performanceInterferenceCheckbox} />{' '}
+                        <span className="ml-2">Enable performance interference</span>
+                    </Label>
+                </FormGroup>
+                <FormGroup>
+                    <Label for="scheduler">Scheduler</Label>
+                    <Input name="scheduler" type="select" innerRef={schedulerSelect}>
+                        {schedulers.map((scheduler) => (
+                            <option value={scheduler.name} key={scheduler.name}>
+                                {scheduler.name}
+                            </option>
+                        ))}
+                    </Input>
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+NewScenarioModalComponent.propTypes = {
+    show: PropTypes.bool.isRequired,
+    currentPortfolioId: PropTypes.string.isRequired,
+    currentPortfolioScenarioIds: PropTypes.arrayOf(PropTypes.string),
+    traces: PropTypes.arrayOf(Shapes.Trace),
+    topologies: PropTypes.arrayOf(Shapes.Topology),
+    schedulers: PropTypes.arrayOf(Shapes.Scheduler),
+    callback: PropTypes.func.isRequired,
 }
 
 export default NewScenarioModalComponent
diff --git a/frontend/src/containers/modals/NewScenarioModal.js b/frontend/src/containers/modals/NewScenarioModal.js
index 225ae321..7d774fa4 100644
--- a/frontend/src/containers/modals/NewScenarioModal.js
+++ b/frontend/src/containers/modals/NewScenarioModal.js
@@ -39,6 +39,7 @@ const mapDispatchToProps = (dispatch) => {
                     })
                 )
             }
+
             dispatch(closeNewScenarioModal())
         },
     }
-- 
cgit v1.2.3


From c0feeec422aed951788dbfdb9fa1df380c56f1df Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 21:17:20 +0100
Subject: Send correct room identifier to server

---
 frontend/package.json         |  2 +-
 frontend/src/sagas/objects.js | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'frontend')

diff --git a/frontend/package.json b/frontend/package.json
index bb190954..16732995 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,7 +16,7 @@
     "author": "Georgios Andreadis <g.andreadis@atlarge-research.com> (https://gandreadis.com/)",
     "license": "MIT",
     "private": true,
-    "proxy": "http://localhost:8082",
+    "proxy": "http://localhost:8081",
     "dependencies": {
         "approximate-number": "~2.0.0",
         "bootstrap": "4.5.3",
diff --git a/frontend/src/sagas/objects.js b/frontend/src/sagas/objects.js
index ebce1f0a..313d9976 100644
--- a/frontend/src/sagas/objects.js
+++ b/frontend/src/sagas/objects.js
@@ -36,8 +36,8 @@ function* fetchAndStoreObject(objectType, id, apiCall) {
 
 function* fetchAndStoreObjects(objectType, apiCall) {
     const objects = yield apiCall
-    for (let index in objects) {
-        yield put(addToStore(objectType, objects[index]))
+    for (let object of objects) {
+        yield put(addToStore(objectType, object))
     }
     return objects
 }
@@ -161,11 +161,11 @@ export const getAllRooms = function* (roomIds, keepIds) {
 
     let rooms = []
 
-    for (let i in roomIds) {
-        let tiles = yield getAllRoomTiles(roomStore[roomIds[i]], keepIds)
+    for (let id of roomIds) {
+        let tiles = yield getAllRoomTiles(roomStore[id], keepIds)
         rooms.push({
-            _id: keepIds ? i : undefined,
-            name: roomStore[roomIds[i]].name,
+            _id: keepIds ? id : undefined,
+            name: roomStore[id].name,
             tiles: tiles,
         })
     }
@@ -175,8 +175,8 @@ export const getAllRooms = function* (roomIds, keepIds) {
 export const getAllRoomTiles = function* (roomStore, keepIds) {
     let tiles = []
 
-    for (let i in roomStore.tileIds) {
-        tiles.push(yield getTileById(roomStore.tileIds[i], keepIds))
+    for (let id of roomStore.tileIds) {
+        tiles.push(yield getTileById(id, keepIds))
     }
     return tiles
 }
@@ -221,9 +221,9 @@ export const fetchAndStoreAllTraces = () => fetchAndStoreObjects('trace', call(g
 
 export const fetchAndStoreAllSchedulers = function* () {
     const objects = yield call(getAllSchedulers)
-    for (let index in objects) {
-        objects[index]._id = objects[index].name
-        yield put(addToStore('scheduler', objects[index]))
+    for (let object of objects) {
+        object._id = object.name
+        yield put(addToStore('scheduler', object))
     }
     return objects
 }
-- 
cgit v1.2.3


From 609411bd23d880fe8c901a6b67852048f8a7b2e4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 21:17:38 +0100
Subject: Do not pass boolean to className

---
 .../components/app/sidebars/topology/machine/UnitTabsComponent.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 569166d8..6599fefd 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -14,7 +14,7 @@ const UnitTabsComponent = () => {
             <Nav tabs>
                 <NavItem>
                     <NavLink
-                        className={activeTab === 'cpu-units' && 'active'}
+                        className={activeTab === 'cpu-units' ? 'active' : ''}
                         onClick={() => {
                             toggle('cpu-units')
                         }}
@@ -24,7 +24,7 @@ const UnitTabsComponent = () => {
                 </NavItem>
                 <NavItem>
                     <NavLink
-                        className={activeTab === 'gpu-units' && 'active'}
+                        className={activeTab === 'gpu-units' ? 'active' : ''}
                         onClick={() => {
                             toggle('gpu-units')
                         }}
@@ -34,7 +34,7 @@ const UnitTabsComponent = () => {
                 </NavItem>
                 <NavItem>
                     <NavLink
-                        className={activeTab === 'memory-units' && 'active'}
+                        className={activeTab === 'memory-units' ? 'active' : ''}
                         onClick={() => {
                             toggle('memory-units')
                         }}
@@ -44,7 +44,7 @@ const UnitTabsComponent = () => {
                 </NavItem>
                 <NavItem>
                     <NavLink
-                        className={activeTab === 'storage-units' && 'active'}
+                        className={activeTab === 'storage-units' ? 'active' : ''}
                         onClick={() => {
                             toggle('storage-units')
                         }}
-- 
cgit v1.2.3


From b14ba802ade3f724edfa6b2b09b643faa583f911 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 14:12:41 +0100
Subject: Migrate to Reactstrap for Navbar

---
 .../components/navigation/AppNavbarComponent.js    |   9 +-
 frontend/src/components/navigation/HomeNavbar.js   |   9 +-
 frontend/src/components/navigation/LogoutButton.js |   5 +-
 frontend/src/components/navigation/Navbar.js       | 131 +++++++++++----------
 frontend/yarn.lock                                 |  40 ++++---
 5 files changed, 103 insertions(+), 91 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js
index 7a1c2462..c5de3d0b 100644
--- a/frontend/src/components/navigation/AppNavbarComponent.js
+++ b/frontend/src/components/navigation/AppNavbarComponent.js
@@ -1,22 +1,23 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
 import { Link } from 'react-router-dom'
+import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
 import './Navbar.sass'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
-            <Link className="nav-link" title="My Projects" to="/projects">
+            <NavLink tag={Link} title="My Projects" to="/projects">
                 <FontAwesome name="list" className="mr-2" />
                 My Projects
-            </Link>
+            </NavLink>
         </NavItem>
         {project ? (
             <NavItem>
-                <Link className="nav-link" title="Current Project" to={`/projects/${project._id}`}>
+                <NavLink tag={Link} title="Current Project" to={`/projects/${project._id}`}>
                     <span>{project.name}</span>
-                </Link>
+                </NavLink>
             </NavItem>
         ) : undefined}
     </Navbar>
diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js
index e22933af..08d222ea 100644
--- a/frontend/src/components/navigation/HomeNavbar.js
+++ b/frontend/src/components/navigation/HomeNavbar.js
@@ -1,13 +1,12 @@
 import React from 'react'
+import { NavItem, NavLink } from 'reactstrap'
 import Navbar from './Navbar'
 import './Navbar.sass'
 
 const ScrollNavItem = ({ id, name }) => (
-    <li className="nav-item">
-        <a className="nav-link" href={id}>
-            {name}
-        </a>
-    </li>
+    <NavItem>
+        <NavLink href={id}>{name}</NavLink>
+    </NavItem>
 )
 
 const HomeNavbar = () => (
diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js
index e3de2ec7..78b02b44 100644
--- a/frontend/src/components/navigation/LogoutButton.js
+++ b/frontend/src/components/navigation/LogoutButton.js
@@ -2,11 +2,12 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
 import { Link } from 'react-router-dom'
+import { NavLink } from 'reactstrap'
 
 const LogoutButton = ({ onLogout }) => (
-    <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
+    <NavLink tag={Link} className="logout" title="Sign out" to="#" onClick={onLogout}>
         <FontAwesome name="power-off" size="lg" />
-    </Link>
+    </NavLink>
 )
 
 LogoutButton.propTypes = {
diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js
index 164a2309..55f98900 100644
--- a/frontend/src/components/navigation/Navbar.js
+++ b/frontend/src/components/navigation/Navbar.js
@@ -1,6 +1,15 @@
-import classNames from 'classnames'
-import React from 'react'
-import { Link, withRouter } from 'react-router-dom'
+import React, { useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import {
+    Navbar as RNavbar,
+    NavItem as RNavItem,
+    NavLink,
+    NavbarBrand,
+    NavbarToggler,
+    Collapse,
+    Nav,
+    Container,
+} from 'reactstrap'
 import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
@@ -9,9 +18,6 @@ import './Navbar.sass'
 
 export const NAVBAR_HEIGHT = 60
 
-export const NavItem = withRouter((props) => <NavItemWithoutRoute {...props} />)
-export const LoggedInSection = withRouter((props) => <LoggedInSectionWithoutRoute {...props} />)
-
 const GitHubLink = () => (
     <a
         href="https://github.com/atlarge-research/opendc"
@@ -22,64 +28,65 @@ const GitHubLink = () => (
     </a>
 )
 
-const NavItemWithoutRoute = ({ route, location, children }) => (
-    <li className={classNames('nav-item clickable', location.pathname === route ? 'active' : undefined)}>{children}</li>
-)
+export const NavItem = ({ route, children }) => {
+    const location = useLocation()
+    return <RNavItem active={location.pathname === route}>{children}</RNavItem>
+}
 
-const LoggedInSectionWithoutRoute = ({ location }) => (
-    <ul className="navbar-nav auth-links">
-        {userIsLoggedIn() ? (
-            [
-                location.pathname === '/' ? (
-                    <NavItem route="/projects" key="projects">
-                        <Link className="nav-link" title="My Projects" to="/projects">
-                            My Projects
-                        </Link>
-                    </NavItem>
-                ) : (
-                    <NavItem route="/profile" key="profile">
-                        <Link className="nav-link" title="My Profile" to="/profile">
-                            <ProfileName />
-                        </Link>
-                    </NavItem>
-                ),
-                <NavItem route="logout" key="logout">
-                    <Logout />
-                </NavItem>,
-            ]
-        ) : (
-            <NavItem route="login">
-                <GitHubLink />
-                <Login visible={true} />
-            </NavItem>
-        )}
-    </ul>
-)
+export const LoggedInSection = () => {
+    const location = useLocation()
+    return (
+        <Nav navbar className="auth-links">
+            {userIsLoggedIn() ? (
+                [
+                    location.pathname === '/' ? (
+                        <NavItem route="/projects" key="projects">
+                            <NavLink tag={Link} title="My Projects" to="/projects">
+                                My Projects
+                            </NavLink>
+                        </NavItem>
+                    ) : (
+                        <NavItem route="/profile" key="profile">
+                            <NavLink tag={Link} title="My Profile" to="/profile">
+                                <ProfileName />
+                            </NavLink>
+                        </NavItem>
+                    ),
+                    <NavItem route="logout" key="logout">
+                        <Logout />
+                    </NavItem>,
+                ]
+            ) : (
+                <NavItem route="login">
+                    <GitHubLink />
+                    <Login visible={true} />
+                </NavItem>
+            )}
+        </Nav>
+    )
+}
 
-const Navbar = ({ fullWidth, children }) => (
-    <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" id="navbar">
-        <div className={fullWidth ? 'container-fluid' : 'container'}>
-            <button
-                className="navbar-toggler navbar-toggler-right"
-                type="button"
-                data-toggle="collapse"
-                data-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent"
-                aria-expanded="false"
-                aria-label="Toggle navigation"
-            >
-                <span className="navbar-toggler-icon" />
-            </button>
-            <Link className="navbar-brand opendc-brand" to="/" title="OpenDC" onClick={() => window.scrollTo(0, 0)}>
-                <img src="/img/logo.png" alt="OpenDC" />
-            </Link>
+const Navbar = ({ fullWidth, children }) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const toggle = () => setIsOpen(!isOpen)
 
-            <div className="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul className="navbar-nav mr-auto">{children}</ul>
-                <LoggedInSection />
-            </div>
-        </div>
-    </nav>
-)
+    return (
+        <RNavbar fixed="top" color="light" light expand="lg" id="navbar">
+            <Container fluid={fullWidth}>
+                <NavbarToggler onClick={toggle} />
+                <NavbarBrand tag={Link} to="/" title="OpenDC" className="opendc-brand">
+                    <img src="/img/logo.png" alt="OpenDC" />
+                </NavbarBrand>
+
+                <Collapse isOpen={isOpen} navbar>
+                    <Nav className="mr-auto" navbar>
+                        {children}
+                    </Nav>
+                    <LoggedInSection />
+                </Collapse>
+            </Container>
+        </RNavbar>
+    )
+}
 
 export default Navbar
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b77c38f6..7398bf38 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1069,14 +1069,14 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.3.tgz#670d002655a7c366540c67f6fd3342cd09500364"
   integrity sha512-RzGO0RLSdokm9Ipe/YD+7ww8X2Ro79qiXZF3HU9ljrM+qnJmH1Vqth+hbiQZy761LnMJTMitHDuKVYTk3k4dLw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.2.0":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.2.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
   integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
@@ -5463,7 +5463,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7428,13 +7428,12 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
 mini-create-react-context@^0.3.0:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
-  integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.3.tgz#b1b2bc6604d3a6c5d9752bad7692615410ebb38e"
+  integrity sha512-TtF6hZE59SGmS4U8529qB+jJFeW6asTLDIpPgvPLSCsooAwJS7QprHIFTqv9/Qh3NdLwQxFYgiHX5lqb6jqzPA==
   dependencies:
-    "@babel/runtime" "^7.4.0"
-    gud "^1.0.0"
-    tiny-warning "^1.0.2"
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
 
 mini-css-extract-plugin@0.9.0:
   version "0.9.0"
@@ -9463,7 +9462,7 @@ react-google-login@~5.1.14:
     "@types/react" "*"
     prop-types "^15.6.0"
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9505,15 +9504,15 @@ react-reconciler@^0.25.1:
     scheduler "^0.19.1"
 
 react-redux@~7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
-  integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
+  integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==
   dependencies:
-    "@babel/runtime" "^7.5.5"
-    hoist-non-react-statics "^3.3.0"
+    "@babel/runtime" "^7.12.1"
+    hoist-non-react-statics "^3.3.2"
     loose-envify "^1.4.0"
     prop-types "^15.7.2"
-    react-is "^16.9.0"
+    react-is "^16.13.1"
 
 react-resize-detector@^2.3.0:
   version "2.3.0"
@@ -9873,11 +9872,16 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.13.3:
   version "0.13.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
   integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
 regenerator-transform@^0.14.2:
   version "0.14.4"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.4.tgz#5266857896518d1616a78a0479337a30ea974cc7"
@@ -11251,7 +11255,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.2:
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-- 
cgit v1.2.3


From eae920b9226ffd9c43699c7f555000d5fc1c623f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 21:39:05 +0100
Subject: Reimplement modals for stability

---
 .../NewPortfolioModalComponent.js                  | 145 +++++++++------------
 .../custom-components/NewTopologyModalComponent.js | 121 +++++++----------
 2 files changed, 106 insertions(+), 160 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
index 19049931..978ca11d 100644
--- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
@@ -1,98 +1,69 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef } from 'react'
+import { Form, FormGroup, Input, Label } from 'reactstrap'
 import Modal from '../Modal'
 import { AVAILABLE_METRICS } from '../../../util/available-metrics'
 
-class NewPortfolioModalComponent extends React.Component {
-    static propTypes = {
-        show: PropTypes.bool.isRequired,
-        callback: PropTypes.func.isRequired,
-    }
+const NewPortfolioModalComponent = ({ show, callback }) => {
+    const textInput = useRef(null)
+    const repeatsInput = useRef(null)
+    const metricCheckboxes = useRef({})
 
-    constructor(props) {
-        super(props)
-        this.metricCheckboxes = {}
-    }
-
-    componentDidMount() {
-        this.reset()
-    }
-
-    reset() {
-        if (this.textInput) {
-            this.textInput.value = ''
-            AVAILABLE_METRICS.forEach((metric) => {
-                this.metricCheckboxes[metric].checked = true
-            })
-            this.repeatsInput.value = 1
-        }
-    }
-
-    onSubmit() {
-        this.props.callback(this.textInput.value, {
-            enabledMetrics: AVAILABLE_METRICS.filter((metric) => this.metricCheckboxes[metric].checked),
-            repeatsPerScenario: parseInt(this.repeatsInput.value),
+    const onSubmit = () =>
+        callback(textInput.current.value, {
+            enabledMetrics: AVAILABLE_METRICS.filter((metric) => metricCheckboxes.current[metric].checked),
+            repeatsPerScenario: parseInt(repeatsInput.current.value),
         })
-        this.reset()
-    }
+    const onCancel = () => callback(undefined)
 
-    onCancel() {
-        this.props.callback(undefined)
-        this.reset()
-    }
-
-    render() {
-        return (
-            <Modal
-                title="New Portfolio"
-                show={this.props.show}
-                onSubmit={this.onSubmit.bind(this)}
-                onCancel={this.onCancel.bind(this)}
+    return (
+        <Modal title="New Portfolio" show={show} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    this.onSubmit()
+                }}
             >
-                <form
-                    onSubmit={(e) => {
-                        e.preventDefault()
-                        this.onSubmit()
-                    }}
-                >
-                    <div className="form-group">
-                        <label className="form-control-label">Name</label>
-                        <input
-                            type="text"
-                            className="form-control"
-                            required
-                            ref={(textInput) => (this.textInput = textInput)}
-                        />
-                    </div>
-                    <h4>Targets</h4>
-                    <h5>Metrics</h5>
-                    <div className="form-group">
-                        {AVAILABLE_METRICS.map((metric) => (
-                            <div className="form-check" key={metric}>
-                                <label className="form-check-label">
-                                    <input
-                                        type="checkbox"
-                                        className="form-check-input"
-                                        ref={(checkbox) => (this.metricCheckboxes[metric] = checkbox)}
-                                    />
-                                    <code>{metric}</code>
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                    <div className="form-group">
-                        <label className="form-control-label">Repeats per scenario</label>
-                        <input
-                            type="number"
-                            className="form-control"
-                            required
-                            ref={(repeatsInput) => (this.repeatsInput = repeatsInput)}
-                        />
-                    </div>
-                </form>
-            </Modal>
-        )
-    }
+                <FormGroup>
+                    <Label for="name">Name</Label>
+                    <Input name="name" type="text" required innerRef={textInput} placeholder="My Portfolio" />
+                </FormGroup>
+                <h4>Targets</h4>
+                <h5>Metrics</h5>
+                <FormGroup>
+                    {AVAILABLE_METRICS.map((metric) => (
+                        <FormGroup check key={metric}>
+                            <Label for={metric} check>
+                                <Input
+                                    name={metric}
+                                    type="checkbox"
+                                    innerRef={(ref) => (metricCheckboxes.current[metric] = ref)}
+                                />
+                                <code>{metric}</code>
+                            </Label>
+                        </FormGroup>
+                    ))}
+                </FormGroup>
+                <FormGroup>
+                    <Label for="repeats">Repeats per scenario</Label>
+                    <Input
+                        name="repeats"
+                        type="number"
+                        required
+                        innerRef={repeatsInput}
+                        defaultValue="1"
+                        min="1"
+                        step="1"
+                    />
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+NewPortfolioModalComponent.propTypes = {
+    show: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
 }
 
 export default NewPortfolioModalComponent
diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
index 8a625b13..b20ec13b 100644
--- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -1,90 +1,65 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import { Form, FormGroup, Input, Label } from 'reactstrap'
+import React, { useRef } from 'react'
 import Shapes from '../../../shapes'
 import Modal from '../Modal'
 
-class NewTopologyModalComponent extends React.Component {
-    static propTypes = {
-        show: PropTypes.bool.isRequired,
-        topologies: PropTypes.arrayOf(Shapes.Topology),
-        onCreateTopology: PropTypes.func.isRequired,
-        onDuplicateTopology: PropTypes.func.isRequired,
-        onCancel: PropTypes.func.isRequired,
+const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology, onCancel, topologies }) => {
+    const textInput = useRef(null)
+    const originTopology = useRef(null)
+
+    const onCreate = () => {
+        onCreateTopology(textInput.current.value)
     }
 
-    reset() {
-        if (this.textInput) {
-            this.textInput.value = ''
-            this.originTopology.selectedIndex = 0
-        }
+    const onDuplicate = () => {
+        onDuplicateTopology(textInput.current.value, originTopology.current.value)
     }
 
-    onSubmit() {
-        if (this.originTopology.selectedIndex === 0) {
-            this.onCreate()
+    const onSubmit = () => {
+        if (originTopology.current.selectedIndex === 0) {
+            onCreate()
         } else {
-            this.onDuplicate()
+            onDuplicate()
         }
     }
 
-    onCreate() {
-        this.props.onCreateTopology(this.textInput.value)
-        this.reset()
-    }
-
-    onDuplicate() {
-        this.props.onDuplicateTopology(this.textInput.value, this.originTopology.value)
-        this.reset()
-    }
-
-    onCancel() {
-        this.props.onCancel()
-        this.reset()
-    }
-
-    render() {
-        return (
-            <Modal
-                title="New Topology"
-                show={this.props.show}
-                onSubmit={this.onSubmit.bind(this)}
-                onCancel={this.onCancel.bind(this)}
+    return (
+        <Modal title="New Topology" show={show} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    onSubmit()
+                }}
             >
-                <form
-                    onSubmit={(e) => {
-                        e.preventDefault()
-                        this.onSubmit()
-                    }}
-                >
-                    <div className="form-group">
-                        <label className="form-control-label">Name</label>
-                        <input
-                            type="text"
-                            className="form-control"
-                            required
-                            ref={(textInput) => (this.textInput = textInput)}
-                        />
-                    </div>
-                    <div className="form-group">
-                        <label className="form-control-label">Topology to duplicate</label>
-                        <select
-                            className="form-control"
-                            ref={(originTopology) => (this.originTopology = originTopology)}
-                        >
-                            <option value={-1} key={-1}>
-                                None - start from scratch
+                <FormGroup>
+                    <Label for="name">Name</Label>
+                    <Input name="name" type="text" required innerRef={textInput} />
+                </FormGroup>
+                <FormGroup>
+                    <Label for="origin">Topology to duplicate</Label>
+                    <Input name="origin" type="select" innerRef={originTopology}>
+                        <option value={-1} key={-1}>
+                            None - start from scratch
+                        </option>
+                        {topologies.map((topology) => (
+                            <option value={topology._id} key={topology._id}>
+                                {topology.name}
                             </option>
-                            {this.props.topologies.map((topology) => (
-                                <option value={topology._id} key={topology._id}>
-                                    {topology.name}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-                </form>
-            </Modal>
-        )
-    }
+                        ))}
+                    </Input>
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+NewTopologyModalComponent.propTypes = {
+    show: PropTypes.bool.isRequired,
+    topologies: PropTypes.arrayOf(Shapes.Topology),
+    onCreateTopology: PropTypes.func.isRequired,
+    onDuplicateTopology: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
 }
 
 export default NewTopologyModalComponent
-- 
cgit v1.2.3