From 873ddacf5abafe43fbc2b6c1033e473c3366dc62 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 11 May 2021 15:40:11 +0200
Subject: ui: Move component styling into CSS modules

This change updates the frontend codebase by moving the component
styling into CSS module files as opposed to the global styles which we
used before. In addition, I have changed the syntax to the newer SCSS
syntax, which is more similar to CSS.

These changes reduces the styling conflicts that can occur between
components and allows us to migrate to systems that do not support
importing global styles in components. Moreover, we can benefit from
treeshaking using CSS modules.
---
 .../src/components/app/sidebars/Sidebar.js         | 78 ++++++++++------------
 .../components/app/sidebars/Sidebar.module.scss    | 57 ++++++++++++++++
 .../src/components/app/sidebars/Sidebar.sass       | 50 --------------
 .../sidebars/topology/rack/MachineListComponent.js |  4 +-
 .../topology/rack/MachineListComponent.module.scss |  3 +
 .../topology/rack/MachineListComponent.sass        |  2 -
 .../sidebars/topology/rack/RackSidebarComponent.js |  8 +--
 .../topology/rack/RackSidebarComponent.module.scss | 14 ++++
 .../topology/rack/RackSidebarComponent.sass        | 11 ---
 9 files changed, 115 insertions(+), 112 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass

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

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
index f7368f54..64e95014 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -1,53 +1,45 @@
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import React from 'react'
-import './Sidebar.sass'
+import React, { useState } from 'react'
+import { collapseButton, collapseButtonRight, sidebar, sidebarRight } from './Sidebar.module.scss'
 
-class Sidebar extends React.Component {
-    static propTypes = {
-        isRight: PropTypes.bool.isRequired,
-        collapsible: PropTypes.bool,
-    }
+function Sidebar({ isRight, collapsible = true, children }) {
+    const [isCollapsed, setCollapsed] = useState(false)
 
-    static defaultProps = {
-        collapsible: true,
-    }
+    const button = (
+        <div
+            className={classNames(collapseButton, {
+                [collapseButtonRight]: isRight,
+            })}
+            onClick={() => setCollapsed(!isCollapsed)}
+        >
+            {(isCollapsed && isRight) || (!isCollapsed && !isRight) ? (
+                <span className="fa fa-angle-left" title={isRight ? 'Expand' : 'Collapse'} />
+            ) : (
+                <span className="fa fa-angle-right" title={isRight ? 'Collapse' : 'Expand'} />
+            )}
+        </div>
+    )
 
-    state = {
-        collapsed: false,
+    if (isCollapsed) {
+        return button
     }
+    return (
+        <div
+            className={classNames(`${sidebar} p-3 h-100`, {
+                [sidebarRight]: isRight,
+            })}
+            onWheel={(e) => e.stopPropagation()}
+        >
+            {children}
+            {collapsible && button}
+        </div>
+    )
+}
 
-    render() {
-        const collapseButton = (
-            <div
-                className={classNames('sidebar-collapse-button', {
-                    'sidebar-collapse-button-right': this.props.isRight,
-                })}
-                onClick={() => this.setState({ collapsed: !this.state.collapsed })}
-            >
-                {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ? (
-                    <span className="fa fa-angle-left" title={this.props.isRight ? 'Expand' : 'Collapse'} />
-                ) : (
-                    <span className="fa fa-angle-right" title={this.props.isRight ? 'Collapse' : 'Expand'} />
-                )}
-            </div>
-        )
-
-        if (this.state.collapsed) {
-            return collapseButton
-        }
-        return (
-            <div
-                className={classNames('sidebar p-3 h-100', {
-                    'sidebar-right': this.props.isRight,
-                })}
-                onWheel={(e) => e.stopPropagation()}
-            >
-                {this.props.children}
-                {this.props.collapsible && collapseButton}
-            </div>
-        )
-    }
+Sidebar.propTypes = {
+    isRight: PropTypes.bool.isRequired,
+    collapsible: PropTypes.bool,
 }
 
 export default Sidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
new file mode 100644
index 00000000..d6be4d9b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
@@ -0,0 +1,57 @@
+@import '../../../style-globals/_variables.scss';
+@import '../../../style-globals/_mixins.scss';
+
+.collapseButton {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    padding: 5px 7px;
+
+    background: white;
+    border: solid 1px $gray-semi-light;
+    z-index: 99;
+
+    @include clickable;
+    border-radius: 5px;
+    transition: background 200ms;
+
+    &.collapseButtonRight {
+        left: auto;
+        right: 5px;
+        top: 5px;
+    }
+
+    &:hover {
+        background: #eeeeee;
+    }
+}
+
+.sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $side-bar-width;
+
+    z-index: 100;
+    background: white;
+
+    border-right: $gray-semi-dark 1px solid;
+
+    .collapseButton {
+        left: auto;
+        right: -25px;
+    }
+}
+
+.sidebarRight {
+    left: auto;
+    right: 0;
+
+    border-left: $gray-semi-dark 1px solid;
+    border-right: none;
+
+    .collapseButtonRight {
+        left: -25px;
+        right: auto;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass
deleted file mode 100644
index b8e15716..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass
+++ /dev/null
@@ -1,50 +0,0 @@
-@import ../../../style-globals/_variables.sass
-@import ../../../style-globals/_mixins.sass
-
-.sidebar-collapse-button
-    position: absolute
-    left: 5px
-    top: 5px
-    padding: 5px 7px
-
-    background: white
-    border: solid 1px $gray-semi-light
-    z-index: 99
-
-    +clickable
-    +border-radius(5px)
-    +transition(background, 200ms)
-
-    &.sidebar-collapse-button-right
-        left: auto
-        right: 5px
-        top: 5px
-
-    &:hover
-        background: #eeeeee
-
-.sidebar
-    position: absolute
-    top: 0
-    left: 0
-    width: $side-bar-width
-
-    z-index: 100
-    background: white
-
-    border-right: $gray-semi-dark 1px solid
-
-    .sidebar-collapse-button
-        left: auto
-        right: -25px
-
-.sidebar-right
-    left: auto
-    right: 0
-
-    border-left: $gray-semi-dark 1px solid
-    border-right: none
-
-    .sidebar-collapse-button-right
-        left: -25px
-        right: auto
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
index 12be26bd..1c07d237 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
 import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
-import './MachineListComponent.sass'
+import { machineList } from './MachineListComponent.module.scss'
 
 const MachineListComponent = ({ machineIds }) => {
     return (
-        <ul className="list-group machine-list">
+        <ul className={`list-group ${machineList}`}>
             {machineIds.map((machineId, index) => {
                 if (machineId === null) {
                     return <EmptySlotContainer key={index} position={index + 1} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
new file mode 100644
index 00000000..f075aac9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
@@ -0,0 +1,3 @@
+.machineList li {
+    min-height: 64px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass
deleted file mode 100644
index 11b82c93..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-.machine-list li
-    min-height: 64px
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index ca41bf57..74313bf7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -3,19 +3,19 @@ import BackToRoomContainer from '../../../../../containers/app/sidebars/topology
 import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer'
 import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer'
 import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer'
-import './RackSidebarComponent.sass'
+import { sidebarContainer, sidebarHeaderContainer, machineListContainer } from './RackSidebarComponent.module.scss'
 import AddPrefabContainer from '../../../../../containers/app/sidebars/topology/rack/AddPrefabContainer'
 
 const RackSidebarComponent = () => {
     return (
-        <div className="rack-sidebar-container flex-column">
-            <div className="rack-sidebar-header-container">
+        <div className={`${sidebarContainer} flex-column`}>
+            <div className={sidebarHeaderContainer}>
                 <RackNameContainer />
                 <BackToRoomContainer />
                 <AddPrefabContainer />
                 <DeleteRackContainer />
             </div>
-            <div className="machine-list-container mt-2">
+            <div className={`${machineListContainer} mt-2`}>
                 <MachineListContainer />
             </div>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
new file mode 100644
index 00000000..8ce3836a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
@@ -0,0 +1,14 @@
+.sidebarContainer {
+    display: flex;
+    height: 100%;
+    max-height: 100%;
+}
+
+.sidebarHeaderContainer {
+    flex: 0;
+}
+
+.machineListContainer {
+    flex: 1;
+    overflow-y: scroll;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
deleted file mode 100644
index 29fec02a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-.rack-sidebar-container
-    display: flex
-    height: 100%
-    max-height: 100%
-
-.rack-sidebar-header-container
-    flex: 0
-
-.machine-list-container
-    flex: 1
-    overflow-y: scroll
-- 
cgit v1.2.3


From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 12 May 2021 22:42:12 +0200
Subject: ui: Migrate from CRA to Next.js

This change updates the web frontend to use Next.js instead of Create
React App (CRA). Next.js enables the possibility of rendering pages on
the server side (which reduces the time to first frame) and overall
provides a better development experience.

Future commits will try to futher optimize the implementation for
Next.js.
---
 .../app/sidebars/project/PortfolioListComponent.js          | 13 +++++++------
 .../app/sidebars/project/ScenarioListComponent.js           | 13 ++++++++-----
 2 files changed, 15 insertions(+), 11 deletions(-)

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

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
index b000b9e2..b714a7d2 100644
--- 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
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Shapes from '../../../../shapes'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
 
@@ -44,11 +44,12 @@ class PortfolioListComponent extends React.Component {
                                 {portfolio.name}
                             </div>
                             <div className="col-5 text-right">
-                                <Link
-                                    className="btn btn-outline-primary mr-1 fa fa-play"
-                                    to={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}
-                                    onClick={() => this.props.onChoosePortfolio(portfolio._id)}
-                                />
+                                <Link href={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}>
+                                    <a
+                                        className="btn btn-outline-primary mr-1 fa fa-play"
+                                        onClick={() => this.props.onChoosePortfolio(portfolio._id)}
+                                    />
+                                </Link>
                                 <span
                                     className="btn btn-outline-danger fa fa-trash"
                                     onClick={() => this.onDelete(portfolio._id)}
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
index e775a663..4efa99ef 100644
--- 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
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Shapes from '../../../../shapes'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 
 class ScenarioListComponent extends React.Component {
@@ -34,10 +34,13 @@ class ScenarioListComponent extends React.Component {
                         </div>
                         <div className="col-5 text-right">
                             <Link
-                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
-                                to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                                onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
-                            />
+                                href={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                            >
+                                <a
+                                    className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                                    onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
+                                />
+                            </Link>
                             <span
                                 className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
                                 onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}
-- 
cgit v1.2.3


From 24147cba0f5723be3525e8f40d1954144841629b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 13:00:00 +0200
Subject: ui: Address technical dept in frontend

---
 .../app/sidebars/project/PortfolioListComponent.js | 106 ++++++++++-----------
 .../app/sidebars/project/ScenarioListComponent.js  | 105 ++++++++++----------
 .../app/sidebars/project/TopologyListComponent.js  |  91 ++++++++----------
 .../sidebars/topology/machine/UnitAddComponent.js  |  56 +++++------
 .../app/sidebars/topology/rack/MachineComponent.js |   4 +-
 5 files changed, 174 insertions(+), 188 deletions(-)

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

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
index b714a7d2..d002b473 100644
--- 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
@@ -1,67 +1,65 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../../../shapes'
+import { Portfolio } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
 
-class PortfolioListComponent extends React.Component {
-    static propTypes = {
-        portfolios: PropTypes.arrayOf(Shapes.Portfolio),
-        currentProjectId: PropTypes.string.isRequired,
-        currentPortfolioId: PropTypes.string,
-        onNewPortfolio: PropTypes.func.isRequired,
-        onChoosePortfolio: PropTypes.func.isRequired,
-        onDeletePortfolio: PropTypes.func.isRequired,
-    }
+function PortfolioListComponent({
+    portfolios,
+    currentProjectId,
+    currentPortfolioId,
+    onNewPortfolio,
+    onChoosePortfolio,
+    onDeletePortfolio,
+}) {
+    return (
+        <div className="pb-3">
+            <h2>
+                Portfolios
+                <button className="btn btn-outline-primary float-right" onClick={(e) => onNewPortfolio(e)}>
+                    <FontAwesome name="plus" />
+                </button>
+            </h2>
 
-    onDelete(id) {
-        this.props.onDeletePortfolio(id)
-    }
-
-    render() {
-        return (
-            <div className="pb-3">
-                <h2>
-                    Portfolios
-                    <button
-                        className="btn btn-outline-primary float-right"
-                        onClick={this.props.onNewPortfolio.bind(this)}
-                    >
-                        <FontAwesome name="plus" />
-                    </button>
-                </h2>
-
-                {this.props.portfolios.map((portfolio, idx) => (
-                    <div key={portfolio._id}>
-                        <div className="row mb-1">
-                            <div
-                                className={
-                                    'col-7 align-self-center ' +
-                                    (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')
-                                }
-                            >
-                                {portfolio.name}
-                            </div>
-                            <div className="col-5 text-right">
-                                <Link href={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}>
-                                    <a
-                                        className="btn btn-outline-primary mr-1 fa fa-play"
-                                        onClick={() => this.props.onChoosePortfolio(portfolio._id)}
-                                    />
-                                </Link>
-                                <span
-                                    className="btn btn-outline-danger fa fa-trash"
-                                    onClick={() => this.onDelete(portfolio._id)}
+            {portfolios.map((portfolio, idx) => (
+                <div key={portfolio._id}>
+                    <div className="row mb-1">
+                        <div
+                            className={
+                                'col-7 align-self-center ' +
+                                (portfolio._id === currentPortfolioId ? 'font-weight-bold' : '')
+                            }
+                        >
+                            {portfolio.name}
+                        </div>
+                        <div className="col-5 text-right">
+                            <Link href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
+                                <a
+                                    className="btn btn-outline-primary mr-1 fa fa-play"
+                                    onClick={() => onChoosePortfolio(portfolio._id)}
                                 />
-                            </div>
+                            </Link>
+                            <span
+                                className="btn btn-outline-danger fa fa-trash"
+                                onClick={() => onDeletePortfolio(portfolio._id)}
+                            />
                         </div>
-                        <ScenarioListContainer portfolioId={portfolio._id} />
                     </div>
-                ))}
-            </div>
-        )
-    }
+                    <ScenarioListContainer portfolioId={portfolio._id} />
+                </div>
+            ))}
+        </div>
+    )
+}
+
+PortfolioListComponent.propTypes = {
+    portfolios: PropTypes.arrayOf(Portfolio),
+    currentProjectId: PropTypes.string.isRequired,
+    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/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index 4efa99ef..26543d12 100644
--- 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
@@ -1,65 +1,64 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../../../shapes'
+import { Scenario } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 
-class ScenarioListComponent extends React.Component {
-    static propTypes = {
-        scenarios: PropTypes.arrayOf(Shapes.Scenario),
-        portfolioId: PropTypes.string,
-        currentProjectId: PropTypes.string.isRequired,
-        currentScenarioId: PropTypes.string,
-        onNewScenario: PropTypes.func.isRequired,
-        onChooseScenario: PropTypes.func.isRequired,
-        onDeleteScenario: PropTypes.func.isRequired,
-    }
-
-    onDelete(id) {
-        this.props.onDeleteScenario(id)
-    }
-
-    render() {
-        return (
-            <>
-                {this.props.scenarios.map((scenario, idx) => (
-                    <div key={scenario._id} className="row mb-1">
-                        <div
-                            className={
-                                'col-7 pl-5 align-self-center ' +
-                                (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')
-                            }
-                        >
-                            {scenario.name}
-                        </div>
-                        <div className="col-5 text-right">
-                            <Link
-                                href={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                            >
-                                <a
-                                    className="btn btn-outline-primary mr-1 fa fa-play disabled"
-                                    onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
-                                />
-                            </Link>
-                            <span
-                                className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
-                                onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}
-                            />
-                        </div>
-                    </div>
-                ))}
-                <div className="pl-4 mb-2">
+function ScenarioListComponent({
+    scenarios,
+    portfolioId,
+    currentProjectId,
+    currentScenarioId,
+    onNewScenario,
+    onChooseScenario,
+    onDeleteScenario,
+}) {
+    return (
+        <>
+            {scenarios.map((scenario, idx) => (
+                <div key={scenario._id} className="row mb-1">
                     <div
-                        className="btn btn-outline-primary"
-                        onClick={() => this.props.onNewScenario(this.props.portfolioId)}
+                        className={
+                            'col-7 pl-5 align-self-center ' +
+                            (scenario._id === currentScenarioId ? 'font-weight-bold' : '')
+                        }
                     >
-                        <FontAwesome name="plus" className="mr-1" />
-                        New scenario
+                        {scenario.name}
                     </div>
+                    <div className="col-5 text-right">
+                        <Link
+                            href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                        >
+                            <a
+                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                                onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
+                            />
+                        </Link>
+                        <span
+                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                            onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
+                        />
+                    </div>
+                </div>
+            ))}
+            <div className="pl-4 mb-2">
+                <div className="btn btn-outline-primary" onClick={() => onNewScenario(this.props.portfolioId)}>
+                    <FontAwesome name="plus" className="mr-1" />
+                    New scenario
                 </div>
-            </>
-        )
-    }
+            </div>
+        </>
+    )
+}
+
+ScenarioListComponent.propTypes = {
+    scenarios: PropTypes.arrayOf(Scenario),
+    portfolioId: PropTypes.string,
+    currentProjectId: PropTypes.string.isRequired,
+    currentScenarioId: PropTypes.string,
+    onNewScenario: PropTypes.func.isRequired,
+    onChooseScenario: 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
index 2f42f7e4..a7d78c4a 100644
--- 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
@@ -1,60 +1,49 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../../../shapes'
+import { Topology } from '../../../../shapes'
 import FontAwesome from 'react-fontawesome'
 
-class TopologyListComponent extends React.Component {
-    static propTypes = {
-        topologies: PropTypes.arrayOf(Shapes.Topology),
-        currentTopologyId: PropTypes.string,
-        onChooseTopology: PropTypes.func.isRequired,
-        onNewTopology: PropTypes.func.isRequired,
-        onDeleteTopology: PropTypes.func.isRequired,
-    }
+function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
+    return (
+        <div className="pb-3">
+            <h2>
+                Topologies
+                <button className="btn btn-outline-primary float-right" onClick={onNewTopology}>
+                    <FontAwesome name="plus" />
+                </button>
+            </h2>
 
-    onChoose(id) {
-        this.props.onChooseTopology(id)
-    }
-
-    onDelete(id) {
-        this.props.onDeleteTopology(id)
-    }
-
-    render() {
-        return (
-            <div className="pb-3">
-                <h2>
-                    Topologies
-                    <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}>
-                        <FontAwesome name="plus" />
-                    </button>
-                </h2>
-
-                {this.props.topologies.map((topology, idx) => (
-                    <div key={topology._id} className="row mb-1">
-                        <div
-                            className={
-                                'col-7 align-self-center ' +
-                                (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')
-                            }
-                        >
-                            {topology.name}
-                        </div>
-                        <div className="col-5 text-right">
-                            <span
-                                className="btn btn-outline-primary mr-1 fa fa-play"
-                                onClick={() => this.onChoose(topology._id)}
-                            />
-                            <span
-                                className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
-                                onClick={() => (idx !== 0 ? this.onDelete(topology._id) : undefined)}
-                            />
-                        </div>
+            {topologies.map((topology, idx) => (
+                <div key={topology._id} className="row mb-1">
+                    <div
+                        className={
+                            'col-7 align-self-center ' + (topology._id === currentTopologyId ? 'font-weight-bold' : '')
+                        }
+                    >
+                        {topology.name}
                     </div>
-                ))}
-            </div>
-        )
-    }
+                    <div className="col-5 text-right">
+                        <span
+                            className="btn btn-outline-primary mr-1 fa fa-play"
+                            onClick={() => onChooseTopology(topology._id)}
+                        />
+                        <span
+                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                            onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
+                        />
+                    </div>
+                </div>
+            ))}
+        </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
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index 4e9dbc7e..f80fccc8 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -1,35 +1,35 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef } from 'react'
 
-class UnitAddComponent extends React.Component {
-    static propTypes = {
-        units: PropTypes.array.isRequired,
-        onAdd: PropTypes.func.isRequired,
-    }
+function UnitAddComponent({ units, onAdd }) {
+    const unitSelect = useRef(null)
 
-    render() {
-        return (
-            <div className="form-inline">
-                <div className="form-group w-100">
-                    <select className="form-control w-70 mr-1" ref={(unitSelect) => (this.unitSelect = unitSelect)}>
-                        {this.props.units.map((unit) => (
-                            <option value={unit._id} key={unit._id}>
-                                {unit.name}
-                            </option>
-                        ))}
-                    </select>
-                    <button
-                        type="submit"
-                        className="btn btn-outline-primary"
-                        onClick={() => this.props.onAdd(this.unitSelect.value)}
-                    >
-                        <span className="fa fa-plus mr-2" />
-                        Add
-                    </button>
-                </div>
+    return (
+        <div className="form-inline">
+            <div className="form-group w-100">
+                <select className="form-control w-70 mr-1" ref={unitSelect}>
+                    {units.map((unit) => (
+                        <option value={unit._id} key={unit._id}>
+                            {unit.name}
+                        </option>
+                    ))}
+                </select>
+                <button
+                    type="submit"
+                    className="btn btn-outline-primary"
+                    onClick={() => onAdd(unitSelect.current.value)}
+                >
+                    <span className="fa fa-plus mr-2" />
+                    Add
+                </button>
             </div>
-        )
-    }
+        </div>
+    )
+}
+
+UnitAddComponent.propTypes = {
+    units: PropTypes.array.isRequired,
+    onAdd: PropTypes.func.isRequired,
 }
 
 export default UnitAddComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index caa3dc04..4db0e7fe 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Shapes from '../../../../../shapes'
+import { Machine } from '../../../../../shapes'
 
 const UnitIcon = ({ id, type }) => (
     <div>
@@ -37,7 +37,7 @@ const MachineComponent = ({ position, machine, onClick }) => {
 }
 
 MachineComponent.propTypes = {
-    machine: Shapes.Machine,
+    machine: Machine,
 }
 
 export default MachineComponent
-- 
cgit v1.2.3


From 1edbae1a0224e30bafb98638f419e1f967a9286f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 17:42:53 +0200
Subject: ui: Move modal state outside of Redux

This change updates the frontend so that the modal state is not stored
inside Redux but instead is stored using the useState hook. This
simplifies the design of the modal components.
---
 .../app/sidebars/project/PortfolioListComponent.js | 38 +++++++++++---------
 .../sidebars/project/ProjectSidebarComponent.js    |  5 +--
 .../app/sidebars/project/ScenarioListComponent.js  | 40 +++++++++++++---------
 .../app/sidebars/project/TopologyListComponent.js  | 38 ++++++++++++--------
 .../topology/machine/DeleteMachineComponent.js     | 10 ------
 .../topology/machine/MachineNameComponent.js       |  5 ---
 .../sidebars/topology/rack/DeleteRackComponent.js  | 10 ------
 .../sidebars/topology/rack/RackNameComponent.js    |  6 ----
 .../sidebars/topology/room/EditRoomComponent.js    | 22 ------------
 .../sidebars/topology/room/RoomNameComponent.js    |  6 ----
 10 files changed, 72 insertions(+), 108 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomNameComponent.js

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

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
index d002b473..ae965939 100644
--- 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
@@ -4,6 +4,8 @@ import { Portfolio } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
+import { Button, Col, Row } from 'reactstrap'
+import classNames from 'classnames'
 
 function PortfolioListComponent({
     portfolios,
@@ -17,35 +19,39 @@ function PortfolioListComponent({
         <div className="pb-3">
             <h2>
                 Portfolios
-                <button className="btn btn-outline-primary float-right" onClick={(e) => onNewPortfolio(e)}>
+                <Button color="primary" outline className="float-right" onClick={(e) => onNewPortfolio(e)}>
                     <FontAwesome name="plus" />
-                </button>
+                </Button>
             </h2>
 
             {portfolios.map((portfolio, idx) => (
                 <div key={portfolio._id}>
-                    <div className="row mb-1">
-                        <div
-                            className={
-                                'col-7 align-self-center ' +
-                                (portfolio._id === currentPortfolioId ? 'font-weight-bold' : '')
-                            }
+                    <Row className="row mb-1">
+                        <Col
+                            xs="7"
+                            className={classNames('align-self-center', {
+                                'font-weight-bold': portfolio._id === currentPortfolioId,
+                            })}
                         >
                             {portfolio.name}
-                        </div>
-                        <div className="col-5 text-right">
+                        </Col>
+                        <Col xs="5" className="text-right">
                             <Link href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
-                                <a
-                                    className="btn btn-outline-primary mr-1 fa fa-play"
+                                <Button
+                                    color="primary"
+                                    outline
+                                    className="mr-1 fa fa-play"
                                     onClick={() => onChoosePortfolio(portfolio._id)}
                                 />
                             </Link>
-                            <span
-                                className="btn btn-outline-danger fa fa-trash"
+                            <Button
+                                color="danger"
+                                outline
+                                className="fa fa-trash"
                                 onClick={() => onDeletePortfolio(portfolio._id)}
                             />
-                        </div>
-                    </div>
+                        </Col>
+                    </Row>
                     <ScenarioListContainer portfolioId={portfolio._id} />
                 </div>
             ))}
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
index 4789315e..7dd13663 100644
--- 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
@@ -2,13 +2,14 @@ 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}>
-        <div className="h-100 overflow-auto container-fluid">
+        <Container fluid className="h-100 overflow-auto">
             <TopologyListContainer />
             <PortfolioListContainer />
-        </div>
+        </Container>
     </Sidebar>
 )
 
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
index 26543d12..168b8e02 100644
--- 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
@@ -3,6 +3,8 @@ import React from 'react'
 import { Scenario } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
+import { Button, Col, Row } from 'reactstrap'
+import classNames from 'classnames'
 
 function ScenarioListComponent({
     scenarios,
@@ -16,36 +18,42 @@ function ScenarioListComponent({
     return (
         <>
             {scenarios.map((scenario, idx) => (
-                <div key={scenario._id} className="row mb-1">
-                    <div
-                        className={
-                            'col-7 pl-5 align-self-center ' +
-                            (scenario._id === currentScenarioId ? 'font-weight-bold' : '')
-                        }
+                <Row key={scenario._id} className="mb-1">
+                    <Col
+                        xs="7"
+                        className={classNames('pl-5 align-self-center', {
+                            'font-weight-bold': scenario._id === currentScenarioId,
+                        })}
                     >
                         {scenario.name}
-                    </div>
-                    <div className="col-5 text-right">
+                    </Col>
+                    <Col xs="5" className="text-right">
                         <Link
                             href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
                         >
-                            <a
-                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                            <Button
+                                color="primary"
+                                outline
+                                disabled
+                                className="mr-1 fa fa-play"
                                 onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
                             />
                         </Link>
-                        <span
-                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                        <Button
+                            color="danger"
+                            outline
+                            className="fa fa-trash"
+                            disabled={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
                         />
-                    </div>
-                </div>
+                    </Col>
+                </Row>
             ))}
             <div className="pl-4 mb-2">
-                <div className="btn btn-outline-primary" onClick={() => onNewScenario(this.props.portfolioId)}>
+                <Button color="primary" outline onClick={() => onNewScenario(portfolioId)}>
                     <FontAwesome name="plus" className="mr-1" />
                     New scenario
-                </div>
+                </Button>
             </div>
         </>
     )
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
index a7d78c4a..d5627abc 100644
--- 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
@@ -2,37 +2,45 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Topology } from '../../../../shapes'
 import FontAwesome from 'react-fontawesome'
+import { Button, Col, Row } from 'reactstrap'
+import classNames from 'classnames'
 
 function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
     return (
         <div className="pb-3">
             <h2>
                 Topologies
-                <button className="btn btn-outline-primary float-right" onClick={onNewTopology}>
+                <Button color="primary" outline className="float-right" onClick={onNewTopology}>
                     <FontAwesome name="plus" />
-                </button>
+                </Button>
             </h2>
 
             {topologies.map((topology, idx) => (
-                <div key={topology._id} className="row mb-1">
-                    <div
-                        className={
-                            'col-7 align-self-center ' + (topology._id === currentTopologyId ? 'font-weight-bold' : '')
-                        }
+                <Row key={topology._id} className="mb-1">
+                    <Col
+                        xs="7"
+                        className={classNames('align-self-center', {
+                            'font-weight-bold': topology._id === currentTopologyId,
+                        })}
                     >
                         {topology.name}
-                    </div>
-                    <div className="col-5 text-right">
-                        <span
-                            className="btn btn-outline-primary mr-1 fa fa-play"
+                    </Col>
+                    <Col xs="5" className="text-right">
+                        <Button
+                            color="primary"
+                            outline
+                            className="mr-1 fa fa-play"
                             onClick={() => onChooseTopology(topology._id)}
                         />
-                        <span
-                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                        <Button
+                            color="danger"
+                            outline
+                            className="fa fa-trash"
+                            disable={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
                         />
-                    </div>
-                </div>
+                    </Col>
+                </Row>
             ))}
         </div>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
deleted file mode 100644
index 37820316..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-const DeleteMachineComponent = ({ onClick }) => (
-    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2" />
-        Delete this machine
-    </div>
-)
-
-export default DeleteMachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
deleted file mode 100644
index 992383c4..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react'
-
-const MachineNameComponent = ({ position }) => <h2>Machine at slot {position}</h2>
-
-export default MachineNameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
deleted file mode 100644
index 23b0daac..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-const DeleteRackComponent = ({ onClick }) => (
-    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2" />
-        Delete this rack
-    </div>
-)
-
-export default DeleteRackComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameComponent.js
deleted file mode 100644
index b701909a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameComponent.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import NameComponent from '../NameComponent'
-
-const RackNameComponent = ({ rackName, onEdit }) => <NameComponent name={rackName} onEdit={onEdit} />
-
-export default RackNameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomComponent.js
deleted file mode 100644
index 857a646f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomComponent.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-const EditRoomComponent = ({ onEdit, onFinish, isEditing, isInRackConstructionMode }) =>
-    isEditing ? (
-        <div className="btn btn-info btn-block" onClick={onFinish}>
-            <span className="fa fa-check mr-2" />
-            Finish editing room
-        </div>
-    ) : (
-        <div
-            className={classNames('btn btn-outline-info btn-block', {
-                disabled: isInRackConstructionMode,
-            })}
-            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
-        >
-            <span className="fa fa-pencil mr-2" />
-            Edit the tiles of this room
-        </div>
-    )
-
-export default EditRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomNameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomNameComponent.js
deleted file mode 100644
index d637828e..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomNameComponent.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import NameComponent from '../NameComponent'
-
-const RoomNameComponent = ({ roomName, onEdit }) => <NameComponent name={roomName} onEdit={onEdit} />
-
-export default RoomNameComponent
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 .../opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
index d6be4d9b..19c6a97f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
@@ -1,5 +1,5 @@
-@import '../../../style-globals/_variables.scss';
-@import '../../../style-globals/_mixins.scss';
+@import 'src/style/_variables.scss';
+@import 'src/style/_mixins.scss';
 
 .collapseButton {
     position: absolute;
-- 
cgit v1.2.3


From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.
---
 .../src/components/app/sidebars/Sidebar.js         |  6 +++--
 .../app/sidebars/project/PortfolioListComponent.js | 20 ++++++++--------
 .../app/sidebars/project/ScenarioListComponent.js  | 16 ++++++++-----
 .../app/sidebars/project/TopologyListComponent.js  | 21 ++++++++--------
 .../app/sidebars/topology/NameComponent.js         |  5 ++--
 .../building/NewRoomConstructionComponent.js       | 17 +++++++------
 .../topology/machine/BackToRackComponent.js        |  4 +++-
 .../sidebars/topology/machine/UnitAddComponent.js  | 25 ++++++++++---------
 .../app/sidebars/topology/machine/UnitComponent.js | 10 ++++++--
 .../sidebars/topology/machine/UnitTabsComponent.js | 28 ++++++++++++++--------
 .../sidebars/topology/rack/AddPrefabComponent.js   |  9 ++++---
 .../sidebars/topology/rack/BackToRoomComponent.js  |  9 ++++---
 .../sidebars/topology/rack/EmptySlotComponent.js   | 17 ++++++++-----
 .../app/sidebars/topology/rack/MachineComponent.js | 26 +++++++++++---------
 .../topology/room/BackToBuildingComponent.js       |  4 +++-
 .../sidebars/topology/room/DeleteRoomComponent.js  |  9 ++++---
 .../topology/room/RackConstructionComponent.js     | 23 ++++++++++--------
 17 files changed, 148 insertions(+), 101 deletions(-)

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

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
index 64e95014..ccaa4144 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 import { collapseButton, collapseButtonRight, sidebar, sidebarRight } from './Sidebar.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 
 function Sidebar({ isRight, collapsible = true, children }) {
     const [isCollapsed, setCollapsed] = useState(false)
@@ -14,9 +16,9 @@ function Sidebar({ isRight, collapsible = true, children }) {
             onClick={() => setCollapsed(!isCollapsed)}
         >
             {(isCollapsed && isRight) || (!isCollapsed && !isRight) ? (
-                <span className="fa fa-angle-left" title={isRight ? 'Expand' : 'Collapse'} />
+                <FontAwesomeIcon icon={faAngleLeft} title={isRight ? 'Expand' : 'Collapse'} />
             ) : (
-                <span className="fa fa-angle-right" title={isRight ? 'Collapse' : 'Expand'} />
+                <FontAwesomeIcon icon={faAngleRight} title={isRight ? 'Collapse' : 'Expand'} />
             )}
         </div>
     )
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
index ae965939..9dd36d5e 100644
--- 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
@@ -2,10 +2,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Portfolio } from '../../../../shapes'
 import Link from 'next/link'
-import FontAwesome from 'react-fontawesome'
 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,
@@ -20,7 +21,7 @@ function PortfolioListComponent({
             <h2>
                 Portfolios
                 <Button color="primary" outline className="float-right" onClick={(e) => onNewPortfolio(e)}>
-                    <FontAwesome name="plus" />
+                    <FontAwesomeIcon icon={faPlus} />
                 </Button>
             </h2>
 
@@ -40,16 +41,15 @@ function PortfolioListComponent({
                                 <Button
                                     color="primary"
                                     outline
-                                    className="mr-1 fa fa-play"
+                                    className="mr-1"
                                     onClick={() => onChoosePortfolio(portfolio._id)}
-                                />
+                                >
+                                    <FontAwesomeIcon icon={faPlay} />
+                                </Button>
                             </Link>
-                            <Button
-                                color="danger"
-                                outline
-                                className="fa fa-trash"
-                                onClick={() => onDeletePortfolio(portfolio._id)}
-                            />
+                            <Button color="danger" outline onClick={() => onDeletePortfolio(portfolio._id)}>
+                                <FontAwesomeIcon icon={faTrash} />
+                            </Button>
                         </Col>
                     </Row>
                     <ScenarioListContainer portfolioId={portfolio._id} />
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
index 168b8e02..131a00b5 100644
--- 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
@@ -2,9 +2,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Scenario } from '../../../../shapes'
 import Link from 'next/link'
-import FontAwesome from 'react-fontawesome'
 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 ScenarioListComponent({
     scenarios,
@@ -35,23 +36,26 @@ function ScenarioListComponent({
                                 color="primary"
                                 outline
                                 disabled
-                                className="mr-1 fa fa-play"
+                                className="mr-1"
                                 onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
-                            />
+                            >
+                                <FontAwesomeIcon icon={faPlay} />
+                            </Button>
                         </Link>
                         <Button
                             color="danger"
                             outline
-                            className="fa fa-trash"
                             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)}>
-                    <FontAwesome name="plus" className="mr-1" />
+                    <FontAwesomeIcon icon={faPlus} className="mr-1" />
                     New scenario
                 </Button>
             </div>
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
index d5627abc..ac58669b 100644
--- 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
@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Topology } from '../../../../shapes'
-import FontAwesome from 'react-fontawesome'
 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 (
@@ -11,7 +12,7 @@ function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology
             <h2>
                 Topologies
                 <Button color="primary" outline className="float-right" onClick={onNewTopology}>
-                    <FontAwesome name="plus" />
+                    <FontAwesomeIcon icon={faPlus} />
                 </Button>
             </h2>
 
@@ -26,19 +27,17 @@ function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology
                         {topology.name}
                     </Col>
                     <Col xs="5" className="text-right">
-                        <Button
-                            color="primary"
-                            outline
-                            className="mr-1 fa fa-play"
-                            onClick={() => onChooseTopology(topology._id)}
-                        />
+                        <Button color="primary" outline className="mr-1" onClick={() => onChooseTopology(topology._id)}>
+                            <FontAwesomeIcon icon={faPlay} />
+                        </Button>
                         <Button
                             color="danger"
                             outline
-                            className="fa fa-trash"
-                            disable={idx === 0}
+                            disabled={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
-                        />
+                        >
+                            <FontAwesomeIcon icon={faTrash} />
+                        </Button>
                     </Col>
                 </Row>
             ))}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
index 5fb0dc55..b4cbc78f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
@@ -1,11 +1,12 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
 
 const NameComponent = ({ name, onEdit }) => (
     <h2>
         {name}
         <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-            <FontAwesome name="pencil" />
+            <FontAwesomeIcon icon={faPencilAlt} />
         </button>
     </h2>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index fd552c1e..b1461743 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,24 +1,27 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoomInConstruction }) => {
     if (currentRoomInConstruction === '-1') {
         return (
             <div className="btn btn-outline-primary btn-block" onClick={onStart}>
-                <span className="fa fa-plus mr-2" />
+                <FontAwesomeIcon icon={faPlus} className="mr-2" />
                 Construct a new room
             </div>
         )
     }
     return (
         <div>
-            <div className="btn btn-primary btn-block" onClick={onFinish}>
-                <span className="fa fa-check mr-2" />
+            <Button color="primary" block onClick={onFinish}>
+                <FontAwesomeIcon icon={faCheck} className="mr-2" />
                 Finalize new room
-            </div>
-            <div className="btn btn-default btn-block" onClick={onCancel}>
-                <span className="fa fa-times mr-2" />
+            </Button>
+            <Button color="default" block onClick={onCancel}>
+                <FontAwesomeIcon icon={faTimes} className="mr-2" />
                 Cancel construction
-            </div>
+            </Button>
         </div>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index 70d522b2..eac99643 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -1,8 +1,10 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
 
 const BackToRackComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2" />
+        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
         Back to rack
     </div>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index f80fccc8..532add37 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -1,29 +1,28 @@
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
+import { Button, Form, FormGroup, Input } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
 function UnitAddComponent({ units, onAdd }) {
     const unitSelect = useRef(null)
 
     return (
-        <div className="form-inline">
-            <div className="form-group w-100">
-                <select className="form-control w-70 mr-1" ref={unitSelect}>
+        <Form inline>
+            <FormGroup className="w-100">
+                <Input type="select" className="w-70 mr-1" innerRef={unitSelect}>
                     {units.map((unit) => (
                         <option value={unit._id} key={unit._id}>
                             {unit.name}
                         </option>
                     ))}
-                </select>
-                <button
-                    type="submit"
-                    className="btn btn-outline-primary"
-                    onClick={() => onAdd(unitSelect.current.value)}
-                >
-                    <span className="fa fa-plus mr-2" />
+                </Input>
+                <Button color="primary" outline onClick={() => onAdd(unitSelect.current.value)}>
+                    <FontAwesomeIcon icon={faPlus} className="mr-2" />
                     Add
-                </button>
-            </div>
-        </div>
+                </Button>
+            </FormGroup>
+        </Form>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
index de55e506..aa473f91 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import { UncontrolledPopover, PopoverHeader, PopoverBody, Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 
 function UnitComponent({ index, unitType, unit, onDelete }) {
     let unitInfo
@@ -37,13 +39,17 @@ function UnitComponent({ index, unitType, unit, onDelete }) {
         <li className="d-flex list-group-item justify-content-between align-items-center">
             <span style={{ maxWidth: '60%' }}>{unit.name}</span>
             <span>
-                <Button outline={true} color="info" className="mr-1 fa fa-info-circle" id={`unit-${index}`} />
+                <Button outline={true} color="info" className="mr-1" id={`unit-${index}`}>
+                    <FontAwesomeIcon icon={faInfoCircle} />
+                </Button>
                 <UncontrolledPopover trigger="focus" placement="left" target={`unit-${index}`}>
                     <PopoverHeader>Unit Information</PopoverHeader>
                     <PopoverBody>{unitInfo}</PopoverBody>
                 </UncontrolledPopover>
 
-                <span className="btn btn-outline-danger fa fa-trash" onClick={onDelete} />
+                <Button outline color="danger" onClick={onDelete}>
+                    <FontAwesomeIcon icon={faTrash} />
+                </Button>
             </span>
         </li>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 6599fefd..ebb5f479 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'
+import { Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap'
 import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer'
 import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer'
 
@@ -10,7 +10,7 @@ const UnitTabsComponent = () => {
     }
 
     return (
-        <div>
+        <div className="mt-2">
             <Nav tabs>
                 <NavItem>
                     <NavLink
@@ -55,20 +55,28 @@ const UnitTabsComponent = () => {
             </Nav>
             <TabContent activeTab={activeTab}>
                 <TabPane tabId="cpu-units">
-                    <UnitAddContainer unitType="cpu" />
-                    <UnitListContainer unitType="cpu" />
+                    <div className="py-2">
+                        <UnitAddContainer unitType="cpu" />
+                        <UnitListContainer unitType="cpu" />
+                    </div>
                 </TabPane>
                 <TabPane tabId="gpu-units">
-                    <UnitAddContainer unitType="gpu" />
-                    <UnitListContainer unitType="gpu" />
+                    <div className="py-2">
+                        <UnitAddContainer unitType="gpu" />
+                        <UnitListContainer unitType="gpu" />
+                    </div>
                 </TabPane>
                 <TabPane tabId="memory-units">
-                    <UnitAddContainer unitType="memory" />
-                    <UnitListContainer unitType="memory" />
+                    <div className="py-2">
+                        <UnitAddContainer unitType="memory" />
+                        <UnitListContainer unitType="memory" />
+                    </div>
                 </TabPane>
                 <TabPane tabId="storage-units">
-                    <UnitAddContainer unitType="storage" />
-                    <UnitListContainer unitType="storage" />
+                    <div className="py-2">
+                        <UnitAddContainer unitType="storage" />
+                        <UnitListContainer unitType="storage" />
+                    </div>
                 </TabPane>
             </TabContent>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
index 75418f9d..d0218f38 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
@@ -1,10 +1,13 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSave } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const AddPrefabComponent = ({ onClick }) => (
-    <div className="btn btn-primary btn-block" onClick={onClick}>
-        <span className="fa fa-floppy-o mr-2" />
+    <Button color="primary" block onClick={onClick}>
+        <FontAwesomeIcon icon={faSave} className="mr-2" />
         Save this rack to a prefab
-    </div>
+    </Button>
 )
 
 export default AddPrefabComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index c14775bf..f6a6f79b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -1,10 +1,13 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const BackToRoomComponent = ({ onClick }) => (
-    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2" />
+    <Button color="secondary" block className="mb-2" onClick={onClick}>
+        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
         Back to room
-    </div>
+    </Button>
 )
 
 export default BackToRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index d7e30f1d..d6fa9dc9 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,13 +1,18 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { ListGroupItem, Badge, Button } from 'reactstrap'
 
 const EmptySlotComponent = ({ position, onAdd }) => (
-    <li className="list-group-item d-flex justify-content-between align-items-center">
-        <span className="badge badge-default badge-info mr-1 disabled">{position}</span>
-        <button className="btn btn-outline-primary" onClick={onAdd}>
-            <span className="fa fa-plus mr-2" />
+    <ListGroupItem className="d-flex justify-content-between align-items-center">
+        <Badge color="info" className="mr-1">
+            {position}
+        </Badge>
+        <Button color="primary" outline onClick={onAdd}>
+            <FontAwesomeIcon icon={faPlus} className="mr-2" />
             Add machine
-        </button>
-    </li>
+        </Button>
+    </ListGroupItem>
 )
 
 export default EmptySlotComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index 4db0e7fe..36b15c71 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,13 +1,16 @@
 import React from 'react'
+import Image from 'next/image'
 import { Machine } from '../../../../../shapes'
+import { Badge, ListGroupItem } from 'reactstrap'
 
 const UnitIcon = ({ id, type }) => (
-    <div>
-        <img
+    <div className="ml-1">
+        <Image
             src={'/img/topology/' + id + '-icon.png'}
             alt={'Machine contains ' + type + ' units'}
-            className="img-fluid ml-1"
-            style={{ maxHeight: '35px' }}
+            layout="intrinsic"
+            height={35}
+            width={35}
         />
     </div>
 )
@@ -17,22 +20,23 @@ const MachineComponent = ({ position, machine, onClick }) => {
         machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0
 
     return (
-        <li
-            className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
+        <ListGroupItem
+            action
+            className="d-flex justify-content-between align-items-center"
             onClick={onClick}
             style={{ backgroundColor: 'white' }}
         >
-            <span className="badge badge-default badge-info mr-1">{position}</span>
+            <Badge color="info" className="mr-1">
+                {position}
+            </Badge>
             <div className="d-inline-flex">
                 {machine.cpuIds.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
                 {machine.gpuIds.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
                 {machine.memoryIds.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
                 {machine.storageIds.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
-                {hasNoUnits ? (
-                    <span className="badge badge-default badge-warning">Machine with no units</span>
-                ) : undefined}
+                {hasNoUnits ? <Badge color="warning">Machine with no units</Badge> : undefined}
             </div>
-        </li>
+        </ListGroupItem>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 64c0a1f6..696b345b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -1,8 +1,10 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
 
 const BackToBuildingComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2" />
+        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
         Back to building
     </div>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 78417359..242f7a2b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -1,10 +1,13 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const DeleteRoomComponent = ({ onClick }) => (
-    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2" />
+    <Button color="danger" outline block onClick={onClick}>
+        <FontAwesomeIcon icon={faTrash} className="mr-2" />
         Delete this room
-    </div>
+    </Button>
 )
 
 export default DeleteRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 44566f61..19d6b309 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,26 +1,29 @@
-import classNames from 'classnames'
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
     if (inRackConstructionMode) {
         return (
-            <div className="btn btn-primary btn-block" onClick={onStop}>
-                <span className="fa fa-times mr-2" />
+            <Button color="primary" block onClick={onStop}>
+                <FontAwesomeIcon icon={faTimes} className="mr-2" />
                 Stop rack construction
-            </div>
+            </Button>
         )
     }
 
     return (
-        <div
-            className={classNames('btn btn-outline-primary btn-block', {
-                disabled: isEditingRoom,
-            })}
+        <Button
+            color="primary"
+            outline
+            block
+            disabled={isEditingRoom}
             onClick={() => (isEditingRoom ? undefined : onStart())}
         >
-            <span className="fa fa-plus mr-2" />
+            <FontAwesomeIcon icon={faPlus} className="mr-2" />
             Start rack construction
-        </div>
+        </Button>
     )
 }
 
-- 
cgit v1.2.3