Finish rack mode machine list rendering

11 files changed, 74 insertions, 33 deletions

diff --git a/src/actions/topology.js b/src/actions/topology.js
index 4d9f1e52..04d9f102 100644
--- a/src/actions/topology.js
+++ b/src/actions/topology.js
@@ -245,7 +245,7 @@ export function addMachineSucceeded(machine) {
         const {objects, interactionLevel} = getState();
         const rack = objects.rack[objects.tile[interactionLevel.tileId].objectId];
         const machineIds = [...rack.machineIds];
-        machineIds[machine.position] = machine.id;
+        machineIds[machine.position - 1] = machine.id;
         dispatch(addPropToStoreObject("rack", rack.id, {machineIds}));
     };
 }
diff --git a/src/api/routes/tiles.js b/src/api/routes/tiles.js
index 927a074b..b1c594d5 100644
--- a/src/api/routes/tiles.js
+++ b/src/api/routes/tiles.js
@@ -32,7 +32,7 @@ export function getMachinesOfRackByTile(tileId) {
 export function addMachineToRackOnTile(tileId, machine) {
     return sendRequest({
         path: "/tiles/{tileId}/rack/machines",
-        method: "GET",
+        method: "POST",
         parameters: {
             body: {
                 machine
diff --git a/src/auth/index.js b/src/auth/index.js
index fb2a7038..418d816c 100644
--- a/src/auth/index.js
+++ b/src/auth/index.js
@@ -3,7 +3,7 @@ import {DELETE_CURRENT_USER_SUCCEEDED} from "../actions/users";
 
 const getAuthObject = () => {
     const authItem = localStorage.getItem("auth");
-    if (!authItem) {
+    if (!authItem || authItem === "{}") {
         return undefined;
     }
     return JSON.parse(authItem);
@@ -34,7 +34,7 @@ export const saveAuthLocalStorage = (payload) => {
 };
 
 export const clearAuthLocalStorage = () => {
-    localStorage.setItem("auth", "{}");
+    localStorage.setItem("auth", "");
 };
 
 export const authRedirectMiddleware = store => next => action => {
diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js
index 5234ee63..1ca13b67 100644
--- a/src/components/sidebars/topology/rack/EmptySlotComponent.js
+++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js
@@ -2,13 +2,13 @@ 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"/>
+    <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>
     </li>
 );
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>
 );
 
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.js b/src/components/sidebars/topology/rack/MachineListComponent.js
index d8a31ddc..41522e36 100644
--- a/src/components/sidebars/topology/rack/MachineListComponent.js
+++ b/src/components/sidebars/topology/rack/MachineListComponent.js
@@ -1,15 +1,16 @@
 import React from "react";
 import EmptySlotContainer from "../../../../containers/sidebars/topology/rack/EmptySlotContainer";
 import MachineContainer from "../../../../containers/sidebars/topology/rack/MachineContainer";
+import "./MachineListComponent.css";
 
 const MachineListComponent = ({machineIds}) => {
     return (
-        <ul className="list-group">
+        <ul className="list-group machine-list">
             {machineIds.map((machineId, index) => {
                 if (machineId === null) {
-                    return <EmptySlotContainer key={index} position={index}/>;
+                    return <EmptySlotContainer key={index} position={index + 1}/>;
                 } else {
-                    return <MachineContainer key={index} position={index} machineId={machineId}/>;
+                    return <MachineContainer key={index} position={index + 1} machineId={machineId}/>;
                 }
             })}
         </ul>
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.sass b/src/components/sidebars/topology/rack/MachineListComponent.sass
new file mode 100644
index 00000000..bbcfe696
--- /dev/null
+++ b/src/components/sidebars/topology/rack/MachineListComponent.sass
@@ -0,0 +1,2 @@
+.machine-list li
+  min-height: 64px
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js
index ddb10387..007add6e 100644
--- a/src/components/sidebars/topology/rack/RackSidebarComponent.js
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.js
@@ -2,13 +2,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";
+import "./RackSidebarComponent.css";
 
 const RackSidebarComponent = () => {
     return (
-        <div>
+        <div className="rack-sidebar-container flex-column">
             <RackNameContainer/>
             <DeleteRackContainer/>
-            <MachineListContainer/>
+            <div className="machine-list-container mt-2">
+                <MachineListContainer/>
+            </div>
         </div>
     );
 };
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
new file mode 100644
index 00000000..192929cf
--- /dev/null
+++ b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
@@ -0,0 +1,8 @@
+.rack-sidebar-container
+  display: flex
+  height: 100%
+  max-height: 100%
+
+.machine-list-container
+  flex: 1
+  overflow-y: scroll
diff --git a/src/index.sass b/src/index.sass
index 4b36d4e9..54a426f9 100644
--- a/src/index.sass
+++ b/src/index.sass
@@ -19,7 +19,7 @@ html, body, #root
 .text-page-container
   padding-top: 80px
 
-.btn
+.btn, .list-group-item-action
   +clickable
 
 a, a:hover
diff --git a/src/sagas/topology.js b/src/sagas/topology.js
index 2ae31074..87d20e8f 100644
--- a/src/sagas/topology.js
+++ b/src/sagas/topology.js
@@ -101,7 +101,7 @@ function* fetchTile(tile) {
 function* fetchMachinesOfRack(tileId, rack) {
     const machines = yield fetchAndStoreMachinesOfTile(tileId);
     const machineIds = new Array(rack.capacity).fill(null);
-    machines.forEach(machine => machineIds[machine.position] = machine.id);
+    machines.forEach(machine => machineIds[machine.position - 1] = machine.id);
 
     yield put(addPropToStoreObject("rack", rack.id, {machineIds}));
 
@@ -221,10 +221,11 @@ export function* onAddRackToTile(action) {
         const rack = yield call(addRackToTile, action.tileId, {
             id: -1,
             name: "Rack",
-            capacity: 5,
+            capacity: 42,
             powerCapacityW: 100,
             machines: 20
         });
+        rack.machineIds = new Array(rack.capacity).fill(null);
         yield put(addToStore("rack", rack));
         yield put(addRackToTileSucceeded(action.tileId, rack.id));
     } catch (error) {