merge: Add PatternFly 4 web interface (#161)

This pull requests adds the new web interface based on the PatternFly 4 design framework.
This framework enables us to develop more quickly the interfaces necessary in OpenDC. 

* Remove the OpenDC landing page from the web interface module
* Add support for the PatternFly 4 framework in Next.js
* Relax topology schema requirements
* Migrate UI components to PatternFly 4

1 files changed, 21 insertions, 30 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 b71918da..1617b3bf 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
@@ -2,18 +2,16 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Machine } from '../../../../../shapes'
-import { Badge, ListGroupItem } from 'reactstrap'
+import { Flex, Label } from '@patternfly/react-core'
 
 const UnitIcon = ({ id, type }) => (
-    <div className="ml-1">
-        <Image
-            src={'/img/topology/' + id + '-icon.png'}
-            alt={'Machine contains ' + type + ' units'}
-            layout="intrinsic"
-            height={35}
-            width={35}
-        />
-    </div>
+    <Image
+        src={'/img/topology/' + id + '-icon.png'}
+        alt={'Machine contains ' + type + ' units'}
+        layout="intrinsic"
+        height={24}
+        width={24}
+    />
 )
 
 UnitIcon.propTypes = {
@@ -21,34 +19,27 @@ UnitIcon.propTypes = {
     type: PropTypes.string,
 }
 
-const MachineComponent = ({ position, machine, onClick }) => {
+const MachineComponent = ({ machine, onClick }) => {
     const hasNoUnits =
         machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
 
     return (
-        <ListGroupItem
-            action
-            className="d-flex justify-content-between align-items-center"
-            onClick={onClick}
-            style={{ backgroundColor: 'white' }}
-        >
-            <Badge color="info" className="mr-1">
-                {position}
-            </Badge>
-            <div className="d-inline-flex">
-                {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
-                {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
-                {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
-                {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
-                {hasNoUnits ? <Badge color="warning">Machine with no units</Badge> : undefined}
-            </div>
-        </ListGroupItem>
+        <Flex onClick={() => onClick()}>
+            {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
+            {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
+            {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
+            {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
+            {hasNoUnits ? (
+                <Label variant="outline" color="orange">
+                    Machine with no units
+                </Label>
+            ) : undefined}
+        </Flex>
     )
 }
 
 MachineComponent.propTypes = {
-    machine: Machine,
-    position: PropTypes.number,
+    machine: Machine.isRequired,
     onClick: PropTypes.func,
 }