From 90fae26aa4bd0e0eb3272ff6e6524060e9004fbb Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Mon, 29 Jun 2020 15:47:09 +0200
Subject: Prepare frontend repository for monorepo

This change prepares the frontend Git repository for the monorepo
residing at https://github.com/atlarge-research.com/opendc. To
accomodate for this, we move all files into a frontend subdirectory.
---
 .../components/app/map/groups/DatacenterGroup.js   | 40 ++++++++++++++++
 .../src/components/app/map/groups/GridGroup.js     | 41 ++++++++++++++++
 .../src/components/app/map/groups/RackGroup.js     | 43 +++++++++++++++++
 .../src/components/app/map/groups/RoomGroup.js     | 56 ++++++++++++++++++++++
 .../src/components/app/map/groups/TileGroup.js     | 43 +++++++++++++++++
 .../src/components/app/map/groups/WallGroup.js     | 22 +++++++++
 6 files changed, 245 insertions(+)
 create mode 100644 frontend/src/components/app/map/groups/DatacenterGroup.js
 create mode 100644 frontend/src/components/app/map/groups/GridGroup.js
 create mode 100644 frontend/src/components/app/map/groups/RackGroup.js
 create mode 100644 frontend/src/components/app/map/groups/RoomGroup.js
 create mode 100644 frontend/src/components/app/map/groups/TileGroup.js
 create mode 100644 frontend/src/components/app/map/groups/WallGroup.js

(limited to 'frontend/src/components/app/map/groups')

diff --git a/frontend/src/components/app/map/groups/DatacenterGroup.js b/frontend/src/components/app/map/groups/DatacenterGroup.js
new file mode 100644
index 00000000..51e32db6
--- /dev/null
+++ b/frontend/src/components/app/map/groups/DatacenterGroup.js
@@ -0,0 +1,40 @@
+import React from "react";
+import { Group } from "react-konva";
+import GrayContainer from "../../../../containers/app/map/GrayContainer";
+import RoomContainer from "../../../../containers/app/map/RoomContainer";
+import Shapes from "../../../../shapes/index";
+
+const DatacenterGroup = ({ datacenter, interactionLevel }) => {
+  if (!datacenter) {
+    return <Group />;
+  }
+
+  if (interactionLevel.mode === "BUILDING") {
+    return (
+      <Group>
+        {datacenter.roomIds.map(roomId => (
+          <RoomContainer key={roomId} roomId={roomId} />
+        ))}
+      </Group>
+    );
+  }
+
+  return (
+    <Group>
+      {datacenter.roomIds
+        .filter(roomId => roomId !== interactionLevel.roomId)
+        .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)}
+      {interactionLevel.mode === "ROOM" ? <GrayContainer /> : null}
+      {datacenter.roomIds
+        .filter(roomId => roomId === interactionLevel.roomId)
+        .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)}
+    </Group>
+  );
+};
+
+DatacenterGroup.propTypes = {
+  datacenter: Shapes.Datacenter,
+  interactionLevel: Shapes.InteractionLevel
+};
+
+export default DatacenterGroup;
diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js
new file mode 100644
index 00000000..bbb1eb68
--- /dev/null
+++ b/frontend/src/components/app/map/groups/GridGroup.js
@@ -0,0 +1,41 @@
+import React from "react";
+import { Group, Line } from "react-konva";
+import { GRID_COLOR } from "../../../../util/colors";
+import {
+  GRID_LINE_WIDTH_IN_PIXELS,
+  MAP_SIZE,
+  MAP_SIZE_IN_PIXELS,
+  TILE_SIZE_IN_PIXELS
+} from "../MapConstants";
+
+const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i);
+const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+  0,
+  index * TILE_SIZE_IN_PIXELS,
+  MAP_SIZE_IN_PIXELS,
+  index * TILE_SIZE_IN_PIXELS
+]);
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+  index * TILE_SIZE_IN_PIXELS,
+  0,
+  index * TILE_SIZE_IN_PIXELS,
+  MAP_SIZE_IN_PIXELS
+]);
+
+const GridGroup = () => (
+  <Group>
+    {HORIZONTAL_POINT_PAIRS.concat(
+      VERTICAL_POINT_PAIRS
+    ).map((points, index) => (
+      <Line
+        key={index}
+        points={points}
+        stroke={GRID_COLOR}
+        strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+        listening={false}
+      />
+    ))}
+  </Group>
+);
+
+export default GridGroup;
diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js
new file mode 100644
index 00000000..69d6ac10
--- /dev/null
+++ b/frontend/src/components/app/map/groups/RackGroup.js
@@ -0,0 +1,43 @@
+import React from "react";
+import { Group } from "react-konva";
+import RackEnergyFillContainer from "../../../../containers/app/map/RackEnergyFillContainer";
+import RackSpaceFillContainer from "../../../../containers/app/map/RackSpaceFillContainer";
+import Shapes from "../../../../shapes/index";
+import { RACK_BACKGROUND_COLOR } from "../../../../util/colors";
+import { convertLoadToSimulationColor } from "../../../../util/simulation-load";
+import TileObject from "../elements/TileObject";
+
+const RackGroup = ({ tile, inSimulation, rackLoad }) => {
+  let color = RACK_BACKGROUND_COLOR;
+  if (inSimulation && rackLoad >= 0) {
+    color = convertLoadToSimulationColor(rackLoad);
+  }
+
+  return (
+    <Group>
+      <TileObject
+        positionX={tile.positionX}
+        positionY={tile.positionY}
+        color={color}
+      />
+      <Group opacity={inSimulation ? 0.3 : 1}>
+        <RackSpaceFillContainer
+          tileId={tile.id}
+          positionX={tile.positionX}
+          positionY={tile.positionY}
+        />
+        <RackEnergyFillContainer
+          tileId={tile.id}
+          positionX={tile.positionX}
+          positionY={tile.positionY}
+        />
+      </Group>
+    </Group>
+  );
+};
+
+RackGroup.propTypes = {
+  tile: Shapes.Tile
+};
+
+export default RackGroup;
diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js
new file mode 100644
index 00000000..c8f0d3db
--- /dev/null
+++ b/frontend/src/components/app/map/groups/RoomGroup.js
@@ -0,0 +1,56 @@
+import React from "react";
+import { Group } from "react-konva";
+import GrayContainer from "../../../../containers/app/map/GrayContainer";
+import TileContainer from "../../../../containers/app/map/TileContainer";
+import WallContainer from "../../../../containers/app/map/WallContainer";
+import Shapes from "../../../../shapes/index";
+
+const RoomGroup = ({
+  room,
+  interactionLevel,
+  currentRoomInConstruction,
+  onClick
+}) => {
+  if (currentRoomInConstruction === room.id) {
+    return (
+      <Group onClick={onClick}>
+        {room.tileIds.map(tileId => (
+          <TileContainer key={tileId} tileId={tileId} newTile={true} />
+        ))}
+      </Group>
+    );
+  }
+
+  return (
+    <Group onClick={onClick}>
+      {(() => {
+        if (
+          (interactionLevel.mode === "RACK" ||
+            interactionLevel.mode === "MACHINE") &&
+          interactionLevel.roomId === room.id
+        ) {
+          return [
+            room.tileIds
+              .filter(tileId => tileId !== interactionLevel.tileId)
+              .map(tileId => <TileContainer key={tileId} tileId={tileId} />),
+            <GrayContainer key={-1} />,
+            room.tileIds
+              .filter(tileId => tileId === interactionLevel.tileId)
+              .map(tileId => <TileContainer key={tileId} tileId={tileId} />)
+          ];
+        } else {
+          return room.tileIds.map(tileId => (
+            <TileContainer key={tileId} tileId={tileId} />
+          ));
+        }
+      })()}
+      <WallContainer roomId={room.id} />
+    </Group>
+  );
+};
+
+RoomGroup.propTypes = {
+  room: Shapes.Room
+};
+
+export default RoomGroup;
diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js
new file mode 100644
index 00000000..8f3953d7
--- /dev/null
+++ b/frontend/src/components/app/map/groups/TileGroup.js
@@ -0,0 +1,43 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Group } from "react-konva";
+import RackContainer from "../../../../containers/app/map/RackContainer";
+import Shapes from "../../../../shapes/index";
+import {
+  ROOM_DEFAULT_COLOR,
+  ROOM_IN_CONSTRUCTION_COLOR
+} from "../../../../util/colors";
+import { convertLoadToSimulationColor } from "../../../../util/simulation-load";
+import RoomTile from "../elements/RoomTile";
+
+const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => {
+  let tileObject;
+  switch (tile.objectType) {
+    case "RACK":
+      tileObject = <RackContainer tile={tile} />;
+      break;
+    default:
+      tileObject = null;
+  }
+
+  let color = ROOM_DEFAULT_COLOR;
+  if (newTile) {
+    color = ROOM_IN_CONSTRUCTION_COLOR;
+  } else if (inSimulation && roomLoad >= 0) {
+    color = convertLoadToSimulationColor(roomLoad);
+  }
+
+  return (
+    <Group onClick={() => onClick(tile)}>
+      <RoomTile tile={tile} color={color} />
+      {tileObject}
+    </Group>
+  );
+};
+
+TileGroup.propTypes = {
+  tile: Shapes.Tile,
+  newTile: PropTypes.bool
+};
+
+export default TileGroup;
diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js
new file mode 100644
index 00000000..43de66e8
--- /dev/null
+++ b/frontend/src/components/app/map/groups/WallGroup.js
@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Group } from "react-konva";
+import Shapes from "../../../../shapes/index";
+import { deriveWallLocations } from "../../../../util/tile-calculations";
+import WallSegment from "../elements/WallSegment";
+
+const WallGroup = ({ tiles }) => {
+  return (
+    <Group>
+      {deriveWallLocations(tiles).map((wallSegment, index) => (
+        <WallSegment key={index} wallSegment={wallSegment} />
+      ))}
+    </Group>
+  );
+};
+
+WallGroup.propTypes = {
+  tiles: PropTypes.arrayOf(Shapes.Tile).isRequired
+};
+
+export default WallGroup;
-- 
cgit v1.2.3