From bf7708f658cc6299a3b775afe24459b5a808c54d Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 22 Sep 2017 21:20:54 +0200
Subject: Restructure component and container directories

---
 .../sidebars/topology/rack/BackToRoomComponent.js  | 10 ++++
 .../sidebars/topology/rack/DeleteRackComponent.js  | 10 ++++
 .../sidebars/topology/rack/EmptySlotComponent.js   | 20 +++++++
 .../app/sidebars/topology/rack/MachineComponent.js | 65 ++++++++++++++++++++++
 .../sidebars/topology/rack/MachineListComponent.js | 20 +++++++
 .../topology/rack/MachineListComponent.sass        |  2 +
 .../sidebars/topology/rack/RackNameComponent.js    |  8 +++
 .../sidebars/topology/rack/RackSidebarComponent.js | 33 +++++++++++
 .../topology/rack/RackSidebarComponent.sass        | 11 ++++
 9 files changed, 179 insertions(+)
 create mode 100644 src/components/app/sidebars/topology/rack/BackToRoomComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/DeleteRackComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/EmptySlotComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/MachineComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/MachineListComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/MachineListComponent.sass
 create mode 100644 src/components/app/sidebars/topology/rack/RackNameComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/RackSidebarComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/RackSidebarComponent.sass

(limited to 'src/components/app/sidebars/topology/rack')

diff --git a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
new file mode 100644
index 00000000..267001c6
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const BackToRoomComponent = ({onClick}) => (
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to room
+    </div>
+);
+
+export default BackToRoomComponent;
diff --git a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
new file mode 100644
index 00000000..b268bd72
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const DeleteRackComponent = ({onClick}) => (
+    <div className="btn btn-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this rack
+    </div>
+);
+
+export default DeleteRackComponent;
diff --git a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
new file mode 100644
index 00000000..08665072
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+const EmptySlotComponent = ({position, onAdd, inSimulation}) => (
+    <li className="list-group-item d-flex justify-content-between align-items-center">
+        <span className="badge badge-default badge-info mr-1 disabled">
+            {position}
+        </span>
+        {inSimulation ?
+            <span className="badge badge-default badge-success">
+                Empty Slot
+            </span> :
+            <button className="btn btn-outline-primary" onClick={onAdd}>
+                <span className="fa fa-plus mr-2"/>
+                Add machine
+            </button>
+        }
+    </li>
+);
+
+export default EmptySlotComponent;
diff --git a/src/components/app/sidebars/topology/rack/MachineComponent.js b/src/components/app/sidebars/topology/rack/MachineComponent.js
new file mode 100644
index 00000000..545bb916
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -0,0 +1,65 @@
+import React from "react";
+import Shapes from "../../../../../shapes";
+import {convertLoadToSimulationColor} from "../../../../../util/simulation-load";
+
+const UnitIcon = ({id, type}) => (
+    <div>
+        <img
+            src={"/img/topology/" + id + "-icon.png"}
+            alt={"Machine contains " + type + " units"}
+            className="img-fluid ml-1"
+            style={{maxHeight: "35px"}}
+        />
+    </div>
+);
+
+const MachineComponent = ({position, machine, inSimulation, machineLoad, onClick}) => {
+    let color = "white";
+    if (inSimulation && machineLoad) {
+        color = convertLoadToSimulationColor(machineLoad);
+    }
+    const hasNoUnits = machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length
+        + machine.storageIds.length === 0;
+
+    return (
+        <li
+            className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
+            onClick={onClick}
+            style={{backgroundColor: color}}
+        >
+            <span className="badge badge-default badge-info mr-1">
+                {position}
+            </span>
+            <div className="d-inline-flex">
+                {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
+                }
+                {hasNoUnits ?
+                    <span className="badge badge-default badge-warning">
+                        Machine with no units
+                    </span> :
+                    undefined
+                }
+            </div>
+        </li>
+    );
+};
+
+MachineComponent.propTypes = {
+    machine: Shapes.Machine
+};
+
+export default MachineComponent;
diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.js b/src/components/app/sidebars/topology/rack/MachineListComponent.js
new file mode 100644
index 00000000..fcb90d66
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -0,0 +1,20 @@
+import React from "react";
+import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer";
+import MachineContainer from "../../../../../containers/app/sidebars/topology/rack/MachineContainer";
+import "./MachineListComponent.css";
+
+const MachineListComponent = ({machineIds}) => {
+    return (
+        <ul className="list-group machine-list">
+            {machineIds.map((machineId, index) => {
+                if (machineId === null) {
+                    return <EmptySlotContainer key={index} position={index + 1}/>;
+                } else {
+                    return <MachineContainer key={index} position={index + 1} machineId={machineId}/>;
+                }
+            })}
+        </ul>
+    );
+};
+
+export default MachineListComponent;
diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/src/components/app/sidebars/topology/rack/MachineListComponent.sass
new file mode 100644
index 00000000..bbcfe696
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/MachineListComponent.sass
@@ -0,0 +1,2 @@
+.machine-list li
+  min-height: 64px
diff --git a/src/components/app/sidebars/topology/rack/RackNameComponent.js b/src/components/app/sidebars/topology/rack/RackNameComponent.js
new file mode 100644
index 00000000..ee8d194b
--- /dev/null
+++ b/src/components/app/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/app/sidebars/topology/rack/RackSidebarComponent.js b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
new file mode 100644
index 00000000..f563a52f
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -0,0 +1,33 @@
+import React from "react";
+import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
+import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
+import BackToRoomContainer from "../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer";
+import DeleteRackContainer from "../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer";
+import MachineListContainer from "../../../../../containers/app/sidebars/topology/rack/MachineListContainer";
+import RackNameContainer from "../../../../../containers/app/sidebars/topology/rack/RackNameContainer";
+import "./RackSidebarComponent.css";
+
+const RackSidebarComponent = ({inSimulation, rackId}) => {
+    return (
+        <div className="rack-sidebar-container flex-column">
+            <div className="rack-sidebar-header-container">
+                <RackNameContainer/>
+                <BackToRoomContainer/>
+                {inSimulation ?
+                    <div>
+                        <LoadBarContainer objectType="rack" objectId={rackId}/>
+                        <LoadChartContainer objectType="rack" objectId={rackId}/>
+                    </div> :
+                    <div>
+                        <DeleteRackContainer/>
+                    </div>
+                }
+            </div>
+            <div className="machine-list-container mt-2">
+                <MachineListContainer/>
+            </div>
+        </div>
+    );
+};
+
+export default RackSidebarComponent;
diff --git a/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
new file mode 100644
index 00000000..822804bc
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
@@ -0,0 +1,11 @@
+.rack-sidebar-container
+  display: flex
+  height: 100%
+  max-height: 100%
+
+.rack-sidebar-header-container
+  flex: 0
+
+.machine-list-container
+  flex: 1
+  overflow-y: scroll
-- 
cgit v1.2.3