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.

1 files changed, 15 insertions, 11 deletions

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