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.

13 files changed, 114 insertions, 72 deletions

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>
     )
 }