Implement first machine slot listing

8 files changed, 104 insertions, 2 deletions

diff --git a/src/components/sidebars/topology/TopologySidebarComponent.js b/src/components/sidebars/topology/TopologySidebarComponent.js
index dc4dc231..bc23d320 100644
--- a/src/components/sidebars/topology/TopologySidebarComponent.js
+++ b/src/components/sidebars/topology/TopologySidebarComponent.js
@@ -2,6 +2,7 @@ import React from "react";
 import BuildingSidebarContainer from "../../../containers/sidebars/topology/building/BuildingSidebarContainer";
 import RoomSidebarContainer from "../../../containers/sidebars/topology/room/RoomSidebarContainer";
 import Sidebar from "../Sidebar";
+import RackSidebarComponent from "./rack/RackSidebarComponent";
 
 const TopologySidebarComponent = ({interactionLevel}) => {
     let sidebarContent;
@@ -13,6 +14,9 @@ const TopologySidebarComponent = ({interactionLevel}) => {
         case "ROOM":
             sidebarContent = <RoomSidebarContainer/>;
             break;
+        case "RACK":
+            sidebarContent = <RackSidebarComponent/>;
+            break;
         default:
             sidebarContent = "Missing Content";
     }
diff --git a/src/components/sidebars/topology/rack/DeleteRackComponent.js b/src/components/sidebars/topology/rack/DeleteRackComponent.js
new file mode 100644
index 00000000..555f6d02
--- /dev/null
+++ b/src/components/sidebars/topology/rack/DeleteRackComponent.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const DeleteRackComponent = ({onClick}) => {
+    return (
+        <div className="btn btn-danger btn-block" onClick={onClick}>
+            Delete this rack
+        </div>
+    );
+};
+
+export default DeleteRackComponent;
diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js
new file mode 100644
index 00000000..5234ee63
--- /dev/null
+++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js
@@ -0,0 +1,16 @@
+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"/>
+        </button>
+    </li>
+);
+
+export default EmptySlotComponent;
diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js
new file mode 100644
index 00000000..e328951e
--- /dev/null
+++ b/src/components/sidebars/topology/rack/MachineComponent.js
@@ -0,0 +1,28 @@
+import React from "react";
+import Shapes from "../../../../shapes";
+
+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">
+            {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>
+    </li>
+);
+
+MachineComponent.propTypes = {
+    machine: Shapes.Machine
+};
+
+export default MachineComponent;
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.js b/src/components/sidebars/topology/rack/MachineListComponent.js
new file mode 100644
index 00000000..d8a31ddc
--- /dev/null
+++ b/src/components/sidebars/topology/rack/MachineListComponent.js
@@ -0,0 +1,19 @@
+import React from "react";
+import EmptySlotContainer from "../../../../containers/sidebars/topology/rack/EmptySlotContainer";
+import MachineContainer from "../../../../containers/sidebars/topology/rack/MachineContainer";
+
+const MachineListComponent = ({machineIds}) => {
+    return (
+        <ul className="list-group">
+            {machineIds.map((machineId, index) => {
+                if (machineId === null) {
+                    return <EmptySlotContainer key={index} position={index}/>;
+                } else {
+                    return <MachineContainer key={index} position={index} machineId={machineId}/>;
+                }
+            })}
+        </ul>
+    );
+};
+
+export default MachineListComponent;
diff --git a/src/components/sidebars/topology/rack/RackNameComponent.js b/src/components/sidebars/topology/rack/RackNameComponent.js
new file mode 100644
index 00000000..ee8d194b
--- /dev/null
+++ b/src/components/sidebars/topology/rack/RackNameComponent.js
@@ -0,0 +1,8 @@
+import React from "react";
+import NameComponent from "../NameComponent";
+
+const RackNameComponent = ({rackName, onEdit}) => (
+    <NameComponent name={rackName} onEdit={onEdit}/>
+);
+
+export default RackNameComponent;
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js
new file mode 100644
index 00000000..ddb10387
--- /dev/null
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js
@@ -0,0 +1,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";
+
+const RackSidebarComponent = () => {
+    return (
+        <div>
+            <RackNameContainer/>
+            <DeleteRackContainer/>
+            <MachineListContainer/>
+        </div>
+    );
+};
+
+export default RackSidebarComponent;
diff --git a/src/components/sidebars/topology/room/RackConstructionComponent.js b/src/components/sidebars/topology/room/RackConstructionComponent.js
index 8298eade..894ffdf7 100644
--- a/src/components/sidebars/topology/room/RackConstructionComponent.js
+++ b/src/components/sidebars/topology/room/RackConstructionComponent.js
@@ -1,7 +1,7 @@
 import React from "react";
 
-const RackConstructionComponent = ({inObjectConstructionMode, onStart, onStop}) => {
-    if (inObjectConstructionMode) {
+const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) => {
+    if (inRackConstructionMode) {
         return (
             <div className="btn btn-primary btn-block" onClick={onStop}>
                 Stop rack construction