1 files changed, 40 insertions, 14 deletions
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>
 );