Get entire topology editing process working

7 files changed, 42 insertions, 41 deletions

diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index e8722506..98238de7 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -17,13 +17,7 @@ class UnitAddComponent extends React.Component {
                     >
                         {this.props.units.map(unit => (
                             <option value={unit._id} key={unit._id}>
-                                {unit.manufacturer +
-                                ' ' +
-                                unit.family +
-                                ' ' +
-                                unit.model +
-                                ' ' +
-                                unit.generation}
+                                {unit.name}
                             </option>
                         ))}
                     </select>
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
index 647c8e5c..bde6d444 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -39,31 +39,29 @@ class UnitComponent extends React.Component {
 
         return (
             <li className="d-flex list-group-item justify-content-between align-items-center">
-        <span style={{ maxWidth: '60%' }}>
-          {this.props.unit.name}
-        </span>
+                <span style={{ maxWidth: '60%' }}>
+                    {this.props.unit.name}
+                </span>
                 <span>
-          <span
-              tabIndex="0"
-              className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle"
-              role="button"
-              data-toggle="popover"
-              data-trigger="focus"
-              title="Unit information"
-              data-content={unitInfo}
-              data-html="true"
-          />
+                    <span
+                        tabIndex="0"
+                        className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle"
+                        role="button"
+                        data-toggle="popover"
+                        data-trigger="focus"
+                        title="Unit information"
+                        data-content={unitInfo}
+                        data-html="true"
+                    />
                     {this.props.inSimulation ? (
                         undefined
                     ) : (
                         <span
-                            className="btn btn-outline-danger"
+                            className="btn btn-outline-danger fa fa-trash"
                             onClick={this.props.onDelete}
-                        >
-              <span className="fa fa-trash"/>
-            </span>
+                        />
                     )}
-        </span>
+                </span>
             </li>
         )
     }
diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js
index da43a330..15f08b5f 100644
--- a/frontend/src/components/navigation/AppNavbar.js
+++ b/frontend/src/components/navigation/AppNavbar.js
@@ -30,7 +30,7 @@ const AppNavbar = ({ simulationId, inSimulation, fullWidth, onViewTopologies })
                         title="Topologies"
                         onClick={onViewTopologies}
                     >
-                        <FontAwesome name="home" className="mr-2"/>
+                        <FontAwesome name="server" className="mr-2"/>
                         Topologies
                     </span>
                 </NavItem>
diff --git a/frontend/src/components/navigation/Navbar.sass b/frontend/src/components/navigation/Navbar.sass
index a270bc6b..c9d2aad2 100644
--- a/frontend/src/components/navigation/Navbar.sass
+++ b/frontend/src/components/navigation/Navbar.sass
@@ -23,6 +23,7 @@
     height: 40px
     background: $blue
     border: none
+    padding-top: 10px
     +clickable
 
     &:hover
diff --git a/frontend/src/containers/auth/Login.js b/frontend/src/containers/auth/Login.js
index 951f6b10..deb9a654 100644
--- a/frontend/src/containers/auth/Login.js
+++ b/frontend/src/containers/auth/Login.js
@@ -37,8 +37,8 @@ class LoginContainer extends React.Component {
                 onFailure={this.onAuthFailure.bind(this)}
                 render={renderProps => (
                     <span onClick={renderProps.onClick} className="login btn btn-primary">
-            <span className="fa fa-google"/> Login with Google
-          </span>
+                        <span className="fa fa-google"/> Login with Google
+                    </span>
                 )}
             >
             </GoogleLogin>
diff --git a/frontend/src/sagas/objects.js b/frontend/src/sagas/objects.js
index 174f9c3e..1a31c195 100644
--- a/frontend/src/sagas/objects.js
+++ b/frontend/src/sagas/objects.js
@@ -70,23 +70,23 @@ export const fetchAndStoreTopology = function* (id) {
                         if (fullTile.rack) {
                             const fullRack = fullTile.rack
 
-                            generateIdIfNotPresent(fullTile)
+                            generateIdIfNotPresent(fullRack)
 
                             if (!rackStore[fullRack._id]) {
                                 for (let machineIdx in fullRack.machines) {
-                                    const fullMachine = fullRoom.machines[machineIdx]
+                                    const fullMachine = fullRack.machines[machineIdx]
 
                                     generateIdIfNotPresent(fullMachine)
 
                                     if (!machineStore[fullMachine._id]) {
-                                        let machine = (({ _id, position, cpuIds, gpuIds, memoryIds, storageIds }) => ({
+                                        let machine = (({ _id, position, cpus, gpus, memories, storages }) => ({
                                             _id,
                                             rackId: fullRack._id,
                                             position,
-                                            cpuIds,
-                                            gpuIds,
-                                            memoryIds,
-                                            storageIds,
+                                            cpuIds: cpus.map((u) => u._id),
+                                            gpuIds: gpus.map((u) => u._id),
+                                            memoryIds: memories.map((u) => u._id),
+                                            storageIds: storages.map((u) => u._id),
                                         }))(fullMachine)
                                         yield put(addToStore('machine', machine))
                                     }
@@ -96,8 +96,9 @@ export const fetchAndStoreTopology = function* (id) {
                                 fullRack.machines.forEach(
                                     (machine) => (filledSlots[machine.position - 1] = machine._id)
                                 )
-                                let rack = (({ _id, capacity, powerCapacityW }) => ({
+                                let rack = (({ _id, name, capacity, powerCapacityW }) => ({
                                     _id,
+                                    name,
                                     capacity,
                                     powerCapacityW,
                                     machineIds: filledSlots,
@@ -144,6 +145,10 @@ export const updateTopologyOnServer = function* (id) {
     const tileStore = yield select(OBJECT_SELECTORS['tile'])
     const rackStore = yield select(OBJECT_SELECTORS['rack'])
     const machineStore = yield select(OBJECT_SELECTORS['machine'])
+    const cpuStore = yield select(OBJECT_SELECTORS['cpu'])
+    const gpuStore = yield select(OBJECT_SELECTORS['gpu'])
+    const memoryStore = yield select(OBJECT_SELECTORS['memory'])
+    const storageStore = yield select(OBJECT_SELECTORS['storage'])
 
     const topology = {
         _id: id,
@@ -159,6 +164,7 @@ export const updateTopologyOnServer = function* (id) {
                     ? undefined
                     : {
                           _id: rackStore[tileStore[tileId].rackId]._id,
+                          name: rackStore[tileStore[tileId].rackId].name,
                           capacity: rackStore[tileStore[tileId].rackId].capacity,
                           powerCapacityW: rackStore[tileStore[tileId].rackId].powerCapacityW,
                           machines: rackStore[tileStore[tileId].rackId].machineIds
@@ -166,10 +172,10 @@ export const updateTopologyOnServer = function* (id) {
                               .map((machineId) => ({
                                   _id: machineId,
                                   position: machineStore[machineId].position,
-                                  cpuIds: machineStore[machineId].cpuIds,
-                                  gpuIds: machineStore[machineId].gpuIds,
-                                  memoryIds: machineStore[machineId].memoryIds,
-                                  storageIds: machineStore[machineId].storageIds,
+                                  cpus: machineStore[machineId].cpuIds.map((id) => cpuStore[id]),
+                                  gpus: machineStore[machineId].gpuIds.map((id) => gpuStore[id]),
+                                  memories: machineStore[machineId].memoryIds.map((id) => memoryStore[id]),
+                                  storages: machineStore[machineId].storageIds.map((id) => storageStore[id]),
                               })),
                       },
             })),
diff --git a/frontend/src/sagas/topology.js b/frontend/src/sagas/topology.js
index 0be619a9..e7ce9043 100644
--- a/frontend/src/sagas/topology.js
+++ b/frontend/src/sagas/topology.js
@@ -199,6 +199,7 @@ export function* onAddRackToTile(action) {
         const topologyId = yield select((state) => state.currentTopologyId)
         const rack = {
             _id: uuid(),
+            name: 'Rack',
             capacity: DEFAULT_RACK_SLOT_CAPACITY,
             powerCapacityW: DEFAULT_RACK_POWER_CAPACITY,
         }
@@ -218,7 +219,8 @@ export function* onAddMachine(action) {
         const rack = yield select((state) => state.objects.rack[rackId])
 
         const machine = {
-            _id: -1,
+            _id: uuid(),
+            rackId,
             position: action.position,
             cpuIds: [],
             gpuIds: [],