Finish rack mode machine list rendering

6 files changed, 66 insertions, 26 deletions

diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js
index 5234ee63..1ca13b67 100644
--- a/src/components/sidebars/topology/rack/EmptySlotComponent.js
+++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js
@@ -2,13 +2,13 @@ import React from "react";
 import FontAwesome from "react-fontawesome";
 
 const EmptySlotComponent = ({position, onAdd}) => (
-    <li className="list-group-item justify-content-between">
-        <span className="badge badge-default badge-info">
-            {position}
-        </span>
-        Add machine
-        <button className="btn btn-secondary" onClick={onAdd}>
-            <FontAwesome name="plus"/>
+    <li className="list-group-item d-flex justify-content-between align-items-center">
+            <span className="badge badge-default badge-info mr-1">
+                {position}
+            </span>
+        <button className="btn btn-outline-primary" onClick={onAdd}>
+            <FontAwesome name="plus" className="mr-1"/>
+            Add machine
         </button>
     </li>
 );
diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js
index e328951e..56e723bc 100644
--- a/src/components/sidebars/topology/rack/MachineComponent.js
+++ b/src/components/sidebars/topology/rack/MachineComponent.js
@@ -1,23 +1,49 @@
 import React from "react";
 import Shapes from "../../../../shapes";
 
+const UnitIcon = ({id, type}) => (
+    <div>
+        <img
+            src={"/img/topology/" + id + "-icon.png"}
+            alt={"Machine contains " + type + " units"}
+            className="img-fluid"
+            style={{maxHeight: "35px"}}
+        />
+    </div>
+);
+
 const MachineComponent = ({position, machine, onClick}) => (
-    <li className="list-group-item list-group-item-action justify-content-between" onClick={onClick}>
-        <span className="badge badge-default badge-info">
+    <li
+        className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
+        onClick={onClick}
+    >
+        <span className="badge badge-default badge-info mr-1">
             {position}
         </span>
-        <span className="badge badge-primary badge-pill">
-            {machine.cpuIds.length} CPUs
-        </span>
-        <span className="badge badge-warning badge-pill">
-            {machine.gpuIds.length} GPUs
-        </span>
-        <span className="badge badge-success badge-pill">
-            {machine.memoryIds.length} Memories
-        </span>
-        <span className="badge badge-info badge-pill">
-            {machine.storageIds.length} Storages
-        </span>
+        <div>
+            {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
+            }
+            {machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0 ?
+                <span className="badge badge-default badge-warning">
+                    Machine with no units
+                </span> :
+                undefined
+            }
+        </div>
     </li>
 );
 
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.js b/src/components/sidebars/topology/rack/MachineListComponent.js
index d8a31ddc..41522e36 100644
--- a/src/components/sidebars/topology/rack/MachineListComponent.js
+++ b/src/components/sidebars/topology/rack/MachineListComponent.js
@@ -1,15 +1,16 @@
 import React from "react";
 import EmptySlotContainer from "../../../../containers/sidebars/topology/rack/EmptySlotContainer";
 import MachineContainer from "../../../../containers/sidebars/topology/rack/MachineContainer";
+import "./MachineListComponent.css";
 
 const MachineListComponent = ({machineIds}) => {
     return (
-        <ul className="list-group">
+        <ul className="list-group machine-list">
             {machineIds.map((machineId, index) => {
                 if (machineId === null) {
-                    return <EmptySlotContainer key={index} position={index}/>;
+                    return <EmptySlotContainer key={index} position={index + 1}/>;
                 } else {
-                    return <MachineContainer key={index} position={index} machineId={machineId}/>;
+                    return <MachineContainer key={index} position={index + 1} machineId={machineId}/>;
                 }
             })}
         </ul>
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.sass b/src/components/sidebars/topology/rack/MachineListComponent.sass
new file mode 100644
index 00000000..bbcfe696
--- /dev/null
+++ b/src/components/sidebars/topology/rack/MachineListComponent.sass
@@ -0,0 +1,2 @@
+.machine-list li
+  min-height: 64px
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js
index ddb10387..007add6e 100644
--- a/src/components/sidebars/topology/rack/RackSidebarComponent.js
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js
@@ -2,13 +2,16 @@ import React from "react";
 import DeleteRackContainer from "../../../../containers/sidebars/topology/rack/DeleteRackContainer";
 import MachineListContainer from "../../../../containers/sidebars/topology/rack/MachineListContainer";
 import RackNameContainer from "../../../../containers/sidebars/topology/rack/RackNameContainer";
+import "./RackSidebarComponent.css";
 
 const RackSidebarComponent = () => {
     return (
-        <div>
+        <div className="rack-sidebar-container flex-column">
             <RackNameContainer/>
             <DeleteRackContainer/>
-            <MachineListContainer/>
+            <div className="machine-list-container mt-2">
+                <MachineListContainer/>
+            </div>
         </div>
     );
 };
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
new file mode 100644
index 00000000..192929cf
--- /dev/null
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
@@ -0,0 +1,8 @@
+.rack-sidebar-container
+  display: flex
+  height: 100%
+  max-height: 100%
+
+.machine-list-container
+  flex: 1
+  overflow-y: scroll