1 files changed, 28 insertions, 9 deletions
diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index d7e349be..cd4baaa5 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -1,23 +1,42 @@
 import React from "react";
 import {Group} from "react-konva";
+import GrayContainer from "../../../containers/map/GrayContainer";
+import RoomContainer from "../../../containers/map/RoomContainer";
 import Shapes from "../../../shapes/index";
-import RoomGroup from "./RoomGroup";
 
-const DatacenterGroup = ({datacenter}) => {
+const DatacenterGroup = ({datacenter, interactionLevel}) => {
     if (!datacenter) {
         return <Group/>;
     }
-    return (
-        <Group>
-            {datacenter.rooms.map(room => (
-                <RoomGroup key={room.id} room={room}/>
-            ))}
-        </Group>
-    );
+
+    if (interactionLevel.mode === "ROOM") {
+        return (
+            <Group>
+                {datacenter.rooms
+                    .filter(room => room.id !== interactionLevel.roomId)
+                    .map(room => <RoomContainer key={room.id} room={room}/>)
+                }
+                <GrayContainer/>
+                {datacenter.rooms
+                    .filter(room => room.id === interactionLevel.roomId)
+                    .map(room => <RoomContainer key={room.id} room={room}/>)
+                }
+            </Group>
+        );
+    } else {
+        return (
+            <Group>
+                {datacenter.rooms.map(room => (
+                    <RoomContainer key={room.id} room={room}/>
+                ))}
+            </Group>
+        );
+    }
 };
 
 DatacenterGroup.propTypes = {
     datacenter: Shapes.Datacenter,
+    interactionLevel: Shapes.InteractionLevel,
 };
 
 export default DatacenterGroup;