Fetch and display datacenter topology

6 files changed, 23 insertions, 14 deletions

diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index 0950d5bd..879c7c39 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -1,8 +1,8 @@
 import React from "react";
 import {Group, Layer, Stage} from "react-konva";
+import DatacenterContainer from "../../containers/map/DatacenterContainer";
 import jQuery from "../../util/jquery";
 import Backdrop from "./elements/Backdrop";
-import DatacenterGroup from "./groups/DatacenterGroup";
 import GridGroup from "./groups/GridGroup";
 import {MAP_SIZE_IN_PIXELS} from "./MapConstants";
 
@@ -28,7 +28,7 @@ class MapStage extends React.Component {
         this.setState({width: jQuery(window).width(), height: jQuery(window).height()});
     }
 
-    dragBoundHandler(pos) {
+    dragBoundFunc(pos) {
         return {
             x: pos.x > 0 ? 0 :
                 (pos.x < -MAP_SIZE_IN_PIXELS + this.state.width ? -MAP_SIZE_IN_PIXELS + this.state.width : pos.x),
@@ -41,9 +41,9 @@ class MapStage extends React.Component {
         return (
             <Stage width={this.state.width} height={this.state.height}>
                 <Layer>
-                    <Group draggable={true} dragBoundFunc={this.dragBoundHandler.bind(this)}>
+                    <Group draggable={true} dragBoundFunc={this.dragBoundFunc.bind(this)}>
                         <Backdrop/>
-                        <DatacenterGroup/>
+                        <DatacenterContainer/>
                         <GridGroup/>
                     </Group>
                 </Layer>
diff --git a/src/components/map/elements/RoomTile.js b/src/components/map/elements/RoomTile.js
index aa837def..759dcf35 100644
--- a/src/components/map/elements/RoomTile.js
+++ b/src/components/map/elements/RoomTile.js
@@ -2,6 +2,7 @@ import React from "react";
 import {Rect} from "react-konva";
 import {ROOM_DEFAULT_COLOR} from "../../../colors/index";
 import Shapes from "../../../shapes/index";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
 const RoomTile = ({tile}) => (
     <Rect
diff --git a/src/components/map/elements/TileObject.js b/src/components/map/elements/TileObject.js
index 8703011c..1517ef97 100644
--- a/src/components/map/elements/TileObject.js
+++ b/src/components/map/elements/TileObject.js
@@ -3,7 +3,7 @@ import React from "react";
 import {Rect} from "react-konva";
 import {OBJECT_BORDER_COLOR, ROOM_DEFAULT_COLOR} from "../../../colors/index";
 import Shapes from "../../../shapes/index";
-import {OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS} from "../MapConstants";
+import {OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
 const TileObject = ({tile, color}) => (
     <Rect
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>
 );