Fetch all unit specifications on initial datacenter load

3 files changed, 34 insertions, 2 deletions

diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js
index c395b522..4854456c 100644
--- a/src/components/sidebars/topology/rack/MachineComponent.js
+++ b/src/components/sidebars/topology/rack/MachineComponent.js
@@ -6,7 +6,7 @@ const UnitIcon = ({id, type}) => (
         <img
             src={"/img/topology/" + id + "-icon.png"}
             alt={"Machine contains " + type + " units"}
-            className="img-fluid"
+            className="img-fluid ml-1"
             style={{maxHeight: "35px"}}
         />
     </div>
@@ -20,7 +20,7 @@ const MachineComponent = ({position, machine, onClick}) => (
         <span className="badge badge-default badge-info mr-1">
             {position}
         </span>
-        <div>
+        <div className="d-inline-flex">
             {machine.cpuIds.length > 0 ?
                 <UnitIcon id="cpu" type="CPU"/> :
                 undefined
diff --git a/src/sagas/objects.js b/src/sagas/objects.js
index 5c9f00c2..508f1cf5 100644
--- a/src/sagas/objects.js
+++ b/src/sagas/objects.js
@@ -6,6 +6,10 @@ import {getTilesOfRoom} from "../api/routes/rooms";
 import {getSection} from "../api/routes/sections";
 import {getPathsOfSimulation, getSimulation} from "../api/routes/simulations";
 import {
+    getAllCPUs,
+    getAllGPUs,
+    getAllMemories,
+    getAllStorages,
     getCoolingItem,
     getCPU,
     getFailureModel,
@@ -64,15 +68,27 @@ export const fetchAndStoreUser = (id) =>
 export const fetchAndStoreFailureModel = (id) =>
     fetchAndStoreObject("failureModel", id, call(getFailureModel, id));
 
+export const fetchAndStoreAllCPUs = () =>
+    fetchAndStoreObjects("cpu", call(getAllCPUs));
+
 export const fetchAndStoreCPU = (id) =>
     fetchAndStoreObject("cpu", id, call(getCPU, id));
 
+export const fetchAndStoreAllGPUs = () =>
+    fetchAndStoreObjects("gpu", call(getAllGPUs));
+
 export const fetchAndStoreGPU = (id) =>
     fetchAndStoreObject("gpu", id, call(getGPU, id));
 
+export const fetchAndStoreAllMemories = () =>
+    fetchAndStoreObjects("memory", call(getAllMemories));
+
 export const fetchAndStoreMemory = (id) =>
     fetchAndStoreObject("memory", id, call(getMemory, id));
 
+export const fetchAndStoreAllStorages = () =>
+    fetchAndStoreObjects("storage", call(getAllStorages));
+
 export const fetchAndStoreStorage = (id) =>
     fetchAndStoreObject("storage", id, call(getStorage, id));
 
diff --git a/src/sagas/topology.js b/src/sagas/topology.js
index f507b2ad..b128ff97 100644
--- a/src/sagas/topology.js
+++ b/src/sagas/topology.js
@@ -22,6 +22,10 @@ import {
     updateRackOnTile
 } from "../api/routes/tiles";
 import {
+    fetchAndStoreAllCPUs,
+    fetchAndStoreAllGPUs,
+    fetchAndStoreAllMemories,
+    fetchAndStoreAllStorages,
     fetchAndStoreCoolingItem,
     fetchAndStoreCPU,
     fetchAndStoreDatacenter,
@@ -43,6 +47,7 @@ export function* onFetchLatestDatacenter(action) {
         const latestPath = paths[paths.length - 1];
         const sections = yield fetchAndStoreSectionsOfPath(latestPath.id);
         const latestSection = sections[sections.length - 1];
+        yield fetchAllUnitSpecifications();
         yield fetchDatacenter(latestSection.datacenterId);
         yield put(fetchLatestDatacenterSucceeded(latestSection.datacenterId));
     } catch (error) {
@@ -64,6 +69,17 @@ export function* fetchDatacenter(datacenterId) {
     }
 }
 
+function* fetchAllUnitSpecifications() {
+    try {
+        yield fetchAndStoreAllCPUs();
+        yield fetchAndStoreAllGPUs();
+        yield fetchAndStoreAllMemories();
+        yield fetchAndStoreAllStorages();
+    } catch (error) {
+        console.log(error);
+    }
+}
+
 function* fetchRoom(roomId) {
     const tiles = yield fetchAndStoreTilesOfRoom(roomId);
     yield put(addPropToStoreObject("room", roomId, {tileIds: tiles.map(tile => tile.id)}));