From 19f1e6db285d0bb8a96d2cea9c7f3a543692b81a Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Thu, 21 Sep 2017 16:07:12 +0200
Subject: Hide all construction elements in simulation

---
 .../sidebars/elements/LoadChartComponent.js        |  4 ++--
 .../topology/machine/MachineSidebarComponent.js    |  4 ++--
 .../sidebars/topology/machine/UnitComponent.js     |  7 +++++--
 .../sidebars/topology/machine/UnitListComponent.js |  7 +++++--
 .../sidebars/topology/machine/UnitTabsComponent.js | 22 +++++++++++++++++-----
 .../sidebars/topology/rack/EmptySlotComponent.js   | 21 +++++++++++++--------
 .../sidebars/topology/machine/UnitContainer.js     |  1 +
 .../sidebars/topology/machine/UnitListContainer.js |  1 +
 .../sidebars/topology/machine/UnitTabsContainer.js | 14 ++++++++++++++
 .../sidebars/topology/rack/EmptySlotContainer.js   |  8 +++++++-
 10 files changed, 67 insertions(+), 22 deletions(-)
 create mode 100644 src/containers/sidebars/topology/machine/UnitTabsContainer.js

diff --git a/src/components/sidebars/elements/LoadChartComponent.js b/src/components/sidebars/elements/LoadChartComponent.js
index 8f0ee6d7..8b2438c2 100644
--- a/src/components/sidebars/elements/LoadChartComponent.js
+++ b/src/components/sidebars/elements/LoadChartComponent.js
@@ -12,8 +12,8 @@ const LoadChartComponent = ({data, currentTick}) => (
         />
         <VictoryLine
             data={[
-                {x: currentTick, y: 0},
-                {x: currentTick, y: 1},
+                {x: currentTick + 1, y: 0},
+                {x: currentTick + 1, y: 1},
             ]}
             style={{
                 data: {stroke: "#00A6D6", strokeWidth: 3}
diff --git a/src/components/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/sidebars/topology/machine/MachineSidebarComponent.js
index 0f85f0f9..e8009c34 100644
--- a/src/components/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/src/components/sidebars/topology/machine/MachineSidebarComponent.js
@@ -4,7 +4,7 @@ import LoadChartContainer from "../../../../containers/sidebars/elements/LoadCha
 import BackToRackContainer from "../../../../containers/sidebars/topology/machine/BackToRackContainer";
 import DeleteMachineContainer from "../../../../containers/sidebars/topology/machine/DeleteMachineContainer";
 import MachineNameContainer from "../../../../containers/sidebars/topology/machine/MachineNameContainer";
-import UnitTabsComponent from "./UnitTabsComponent";
+import UnitTabsContainer from "../../../../containers/sidebars/topology/machine/UnitTabsContainer";
 
 const MachineSidebarComponent = ({inSimulation, machineId}) => {
     return (
@@ -18,7 +18,7 @@ const MachineSidebarComponent = ({inSimulation, machineId}) => {
                 </div> :
                 <DeleteMachineContainer/>
             }
-            <UnitTabsComponent/>
+            <UnitTabsContainer/>
         </div>
     );
 };
diff --git a/src/components/sidebars/topology/machine/UnitComponent.js b/src/components/sidebars/topology/machine/UnitComponent.js
index 20cdad1e..84786ab4 100644
--- a/src/components/sidebars/topology/machine/UnitComponent.js
+++ b/src/components/sidebars/topology/machine/UnitComponent.js
@@ -1,9 +1,12 @@
 import React from "react";
 
-const UnitComponent = ({unit, onDelete}) => (
+const UnitComponent = ({unit, onDelete, inSimulation}) => (
     <li className="d-flex list-group-item justify-content-between align-items-center">
         {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation}
-        <span className="btn btn-outline-danger" onClick={onDelete}>Delete</span>
+        {inSimulation ?
+            undefined :
+            <span className="btn btn-outline-danger" onClick={onDelete}>Delete</span>
+        }
     </li>
 );
 
diff --git a/src/components/sidebars/topology/machine/UnitListComponent.js b/src/components/sidebars/topology/machine/UnitListComponent.js
index 288d1428..307edc0a 100644
--- a/src/components/sidebars/topology/machine/UnitListComponent.js
+++ b/src/components/sidebars/topology/machine/UnitListComponent.js
@@ -1,14 +1,17 @@
 import React from "react";
 import UnitContainer from "../../../../containers/sidebars/topology/machine/UnitContainer";
 
-const UnitListComponent = ({unitType, unitIds}) => (
+const UnitListComponent = ({unitType, unitIds, inSimulation}) => (
     <ul className="list-group mt-1">
         {unitIds.length !== 0 ?
             unitIds.map((unitId, index) => (
                 <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index}/>
             )) :
             <div className="alert alert-info">
-                <strong>No units...</strong> Add some with the menu above!
+                {inSimulation ?
+                    <strong>No units of this type in this machine</strong> :
+                    <span><strong>No units...</strong> Add some with the menu above!</span>
+                }
             </div>
         }
     </ul>
diff --git a/src/components/sidebars/topology/machine/UnitTabsComponent.js b/src/components/sidebars/topology/machine/UnitTabsComponent.js
index cd068442..a7692ecf 100644
--- a/src/components/sidebars/topology/machine/UnitTabsComponent.js
+++ b/src/components/sidebars/topology/machine/UnitTabsComponent.js
@@ -2,7 +2,7 @@ import React from "react";
 import UnitAddContainer from "../../../../containers/sidebars/topology/machine/UnitAddContainer";
 import UnitListContainer from "../../../../containers/sidebars/topology/machine/UnitListContainer";
 
-const UnitTabsComponent = () => (
+const UnitTabsComponent = ({inSimulation}) => (
     <div>
         <ul className="nav nav-tabs mt-2 mb-1" role="tablist">
             <li className="nav-item">
@@ -20,19 +20,31 @@ const UnitTabsComponent = () => (
         </ul>
         <div className="tab-content">
             <div className="tab-pane active" id="cpu-units" role="tabpanel">
-                <UnitAddContainer unitType="cpu"/>
+                {inSimulation ?
+                    undefined :
+                    <UnitAddContainer unitType="cpu"/>
+                }
                 <UnitListContainer unitType="cpu"/>
             </div>
             <div className="tab-pane" id="gpu-units" role="tabpanel">
-                <UnitAddContainer unitType="gpu"/>
+                {inSimulation ?
+                    undefined :
+                    <UnitAddContainer unitType="gpu"/>
+                }
                 <UnitListContainer unitType="gpu"/>
             </div>
             <div className="tab-pane" id="memory-units" role="tabpanel">
-                <UnitAddContainer unitType="memory"/>
+                {inSimulation ?
+                    undefined :
+                    <UnitAddContainer unitType="memory"/>
+                }
                 <UnitListContainer unitType="memory"/>
             </div>
             <div className="tab-pane" id="storage-units" role="tabpanel">
-                <UnitAddContainer unitType="storage"/>
+                {inSimulation ?
+                    undefined :
+                    <UnitAddContainer unitType="storage"/>
+                }
                 <UnitListContainer unitType="storage"/>
             </div>
         </div>
diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js
index 1ca13b67..380cbf16 100644
--- a/src/components/sidebars/topology/rack/EmptySlotComponent.js
+++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,15 +1,20 @@
 import React from "react";
 import FontAwesome from "react-fontawesome";
 
-const EmptySlotComponent = ({position, onAdd}) => (
+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">
-                {position}
-            </span>
-        <button className="btn btn-outline-primary" onClick={onAdd}>
-            <FontAwesome name="plus" className="mr-1"/>
-            Add machine
-        </button>
+        <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}>
+                <FontAwesome name="plus" className="mr-1"/>
+                Add machine
+            </button>
+        }
     </li>
 );
 
diff --git a/src/containers/sidebars/topology/machine/UnitContainer.js b/src/containers/sidebars/topology/machine/UnitContainer.js
index 712d3eef..33001b99 100644
--- a/src/containers/sidebars/topology/machine/UnitContainer.js
+++ b/src/containers/sidebars/topology/machine/UnitContainer.js
@@ -5,6 +5,7 @@ import UnitComponent from "../../../../components/sidebars/topology/machine/Unit
 const mapStateToProps = (state, ownProps) => {
     return {
         unit: state.objects[ownProps.unitType][ownProps.unitId],
+        inSimulation: state.currentExperimentId !== -1
     };
 };
 
diff --git a/src/containers/sidebars/topology/machine/UnitListContainer.js b/src/containers/sidebars/topology/machine/UnitListContainer.js
index cf3a2639..9aed3f60 100644
--- a/src/containers/sidebars/topology/machine/UnitListContainer.js
+++ b/src/containers/sidebars/topology/machine/UnitListContainer.js
@@ -5,6 +5,7 @@ const mapStateToProps = (state, ownProps) => {
     return {
         unitIds: state.objects.machine[state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId]
             .machineIds[state.interactionLevel.position - 1]][ownProps.unitType + "Ids"],
+        inSimulation: state.currentExperimentId !== -1
     };
 };
 
diff --git a/src/containers/sidebars/topology/machine/UnitTabsContainer.js b/src/containers/sidebars/topology/machine/UnitTabsContainer.js
new file mode 100644
index 00000000..c92afcb5
--- /dev/null
+++ b/src/containers/sidebars/topology/machine/UnitTabsContainer.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import UnitTabsComponent from "../../../../components/sidebars/topology/machine/UnitTabsComponent";
+
+const mapStateToProps = state => {
+    return {
+        inSimulation: state.currentExperimentId !== -1,
+    };
+};
+
+const UnitTabsContainer = connect(
+    mapStateToProps
+)(UnitTabsComponent);
+
+export default UnitTabsContainer;
diff --git a/src/containers/sidebars/topology/rack/EmptySlotContainer.js b/src/containers/sidebars/topology/rack/EmptySlotContainer.js
index 97abf473..aa0673d1 100644
--- a/src/containers/sidebars/topology/rack/EmptySlotContainer.js
+++ b/src/containers/sidebars/topology/rack/EmptySlotContainer.js
@@ -2,6 +2,12 @@ import {connect} from "react-redux";
 import {addMachine} from "../../../../actions/topology/rack";
 import EmptySlotComponent from "../../../../components/sidebars/topology/rack/EmptySlotComponent";
 
+const mapStateToProps = state => {
+    return {
+        inSimulation: state.currentExperimentId !== -1
+    };
+};
+
 const mapDispatchToProps = (dispatch, ownProps) => {
     return {
         onAdd: () => dispatch(addMachine(ownProps.position)),
@@ -9,7 +15,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 };
 
 const EmptySlotContainer = connect(
-    undefined,
+    mapStateToProps,
     mapDispatchToProps
 )(EmptySlotComponent);
 
-- 
cgit v1.2.3