Fetch and display datacenter topology

3 files changed, 17 insertions, 9 deletions

diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index 3b7a086b..d7e349be 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -1,14 +1,20 @@
 import React from "react";
 import {Group} from "react-konva";
+import Shapes from "../../../shapes/index";
 import RoomGroup from "./RoomGroup";
 
-const DatacenterGroup = ({datacenter}) => (
-    <Group>
-        {datacenter.rooms.map(room => (
-            <RoomGroup room={room}/>
-        ))}
-    </Group>
-);
+const DatacenterGroup = ({datacenter}) => {
+    if (!datacenter) {
+        return <Group/>;
+    }
+    return (
+        <Group>
+            {datacenter.rooms.map(room => (
+                <RoomGroup key={room.id} room={room}/>
+            ))}
+        </Group>
+    );
+};
 
 DatacenterGroup.propTypes = {
     datacenter: Shapes.Datacenter,
diff --git a/src/components/map/groups/GridGroup.js b/src/components/map/groups/GridGroup.js
index 2651bf19..f50482ce 100644
--- a/src/components/map/groups/GridGroup.js
+++ b/src/components/map/groups/GridGroup.js
@@ -15,11 +15,12 @@ const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
 
 const GridGroup = () => (
     <Group>
-        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map(points => (
+        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
             <Line
                 points={points}
                 stroke={GRID_COLOR}
                 strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+                key={index}
             />
         ))}
     </Group>
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index 90a58767..28240d77 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -1,11 +1,12 @@
 import React from "react";
 import {Group} from "react-konva";
+import Shapes from "../../../shapes/index";
 import TileGroup from "./TileGroup";
 
 const RoomGroup = ({room}) => (
     <Group>
         {room.tiles.map(tile => (
-            <TileGroup tile={tile}/>
+            <TileGroup key={tile.id} tile={tile}/>
         ))}
     </Group>
 );