Implement first machine slot listing

6 files changed, 98 insertions, 0 deletions

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;