From 751a9ef3a12c952fe179f256d854d0c4aa37e28e Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Wed, 4 Oct 2017 22:49:07 +0200 Subject: Apply prettier to codebase --- src/components/app/map/LoadingScreen.js | 10 +- src/components/app/map/MapConstants.js | 3 +- src/components/app/map/MapStageComponent.js | 184 ++++++++++--------- .../app/map/controls/ExportCanvasComponent.js | 14 +- .../app/map/controls/ScaleIndicatorComponent.js | 16 +- .../app/map/controls/ToolPanelComponent.js | 8 +- .../app/map/controls/ZoomControlComponent.js | 38 ++-- src/components/app/map/elements/Backdrop.js | 20 +- src/components/app/map/elements/GrayLayer.js | 24 +-- src/components/app/map/elements/HoverTile.js | 39 ++-- src/components/app/map/elements/ImageComponent.js | 74 ++++---- src/components/app/map/elements/RackFillBar.js | 124 +++++++------ src/components/app/map/elements/RoomTile.js | 22 +-- src/components/app/map/elements/TileObject.js | 36 ++-- src/components/app/map/elements/TilePlusIcon.js | 78 ++++---- src/components/app/map/elements/WallSegment.js | 58 +++--- src/components/app/map/groups/DatacenterGroup.js | 54 +++--- src/components/app/map/groups/GridGroup.js | 47 +++-- src/components/app/map/groups/RackGroup.js | 48 +++-- src/components/app/map/groups/RoomGroup.js | 76 ++++---- src/components/app/map/groups/TileGroup.js | 57 +++--- src/components/app/map/groups/WallGroup.js | 22 +-- .../app/map/layers/HoverLayerComponent.js | 128 +++++++------ src/components/app/map/layers/MapLayerComponent.js | 25 ++- .../app/map/layers/ObjectHoverLayerComponent.js | 10 +- .../app/map/layers/RoomHoverLayerComponent.js | 6 +- src/components/app/sidebars/Sidebar.js | 66 ++++--- .../app/sidebars/elements/LoadBarComponent.js | 30 +-- .../app/sidebars/elements/LoadChartComponent.js | 130 ++++++------- .../simulation/ExperimentMetadataComponent.js | 25 ++- .../app/sidebars/simulation/LoadMetricComponent.js | 59 +++--- .../simulation/SimulationSidebarComponent.js | 22 +-- .../app/sidebars/simulation/TaskComponent.js | 97 +++++----- .../app/sidebars/simulation/TraceComponent.js | 28 +-- .../app/sidebars/topology/NameComponent.js | 14 +- .../sidebars/topology/TopologySidebarComponent.js | 42 ++--- .../topology/building/BuildingSidebarComponent.js | 25 +-- .../building/NewRoomConstructionComponent.js | 44 +++-- .../topology/machine/BackToRackComponent.js | 10 +- .../topology/machine/DeleteMachineComponent.js | 10 +- .../topology/machine/MachineNameComponent.js | 4 +- .../topology/machine/MachineSidebarComponent.js | 27 +-- .../sidebars/topology/machine/UnitAddComponent.js | 67 ++++--- .../app/sidebars/topology/machine/UnitComponent.js | 124 +++++++------ .../sidebars/topology/machine/UnitListComponent.js | 37 ++-- .../sidebars/topology/machine/UnitTabsComponent.js | 103 ++++++----- .../sidebars/topology/rack/BackToRoomComponent.js | 10 +- .../sidebars/topology/rack/DeleteRackComponent.js | 10 +- .../sidebars/topology/rack/EmptySlotComponent.js | 29 ++- .../app/sidebars/topology/rack/MachineComponent.js | 119 ++++++------ .../sidebars/topology/rack/MachineListComponent.js | 30 +-- .../sidebars/topology/rack/RackNameComponent.js | 4 +- .../sidebars/topology/rack/RackSidebarComponent.js | 43 ++--- .../topology/room/BackToBuildingComponent.js | 10 +- .../sidebars/topology/room/DeleteRoomComponent.js | 10 +- .../topology/room/RackConstructionComponent.js | 32 ++-- .../sidebars/topology/room/RoomNameComponent.js | 4 +- .../sidebars/topology/room/RoomSidebarComponent.js | 41 +++-- .../sidebars/topology/room/RoomTypeComponent.js | 8 +- src/components/app/timeline/PlayButtonComponent.js | 38 ++-- src/components/app/timeline/TimelineComponent.js | 50 ++--- .../app/timeline/TimelineControlsComponent.js | 72 ++++---- .../app/timeline/TimelineLabelsComponent.js | 14 +- .../experiments/ExperimentListComponent.js | 59 +++--- .../experiments/ExperimentRowComponent.js | 64 +++---- .../experiments/NewExperimentButtonComponent.js | 18 +- src/components/home/ContactSection.js | 97 +++++----- src/components/home/ContentSection.js | 14 +- src/components/home/IntroSection.js | 64 +++---- src/components/home/JumbotronHeader.js | 24 +-- src/components/home/ModelingSection.js | 29 +-- src/components/home/ScreenshotSection.js | 39 ++-- src/components/home/SimulationSection.js | 30 +-- src/components/home/StakeholderSection.js | 49 +++-- src/components/home/TeamSection.js | 80 ++++---- src/components/home/TechnologiesSection.js | 74 ++++---- src/components/modals/ConfirmationModal.js | 50 ++--- src/components/modals/Modal.js | 203 +++++++++++---------- src/components/modals/TextInputModal.js | 83 +++++---- .../NewExperimentModalComponent.js | 169 +++++++++-------- src/components/navigation/AppNavbar.js | 97 +++++----- src/components/navigation/HomeNavbar.js | 28 +-- src/components/navigation/LogoutButton.js | 12 +- src/components/navigation/Navbar.js | 140 +++++++------- src/components/not-found/BlinkingCursor.js | 4 +- src/components/not-found/CodeBlock.js | 42 +++-- src/components/not-found/TerminalWindow.js | 35 ++-- src/components/simulations/FilterButton.js | 32 ++-- src/components/simulations/FilterPanel.js | 12 +- .../simulations/NewSimulationButtonComponent.js | 18 +- .../simulations/SimulationActionButtons.js | 58 +++--- src/components/simulations/SimulationAuthList.js | 61 ++++--- src/components/simulations/SimulationAuthRow.js | 42 +++-- 93 files changed, 2402 insertions(+), 2034 deletions(-) (limited to 'src/components') diff --git a/src/components/app/map/LoadingScreen.js b/src/components/app/map/LoadingScreen.js index 3d5753e2..9f379e0b 100644 --- a/src/components/app/map/LoadingScreen.js +++ b/src/components/app/map/LoadingScreen.js @@ -1,11 +1,11 @@ -import React from 'react'; +import React from "react"; import FontAwesome from "react-fontawesome"; const LoadingScreen = () => ( -
- - Loading your datacenter... -
+
+ + Loading your datacenter... +
); export default LoadingScreen; diff --git a/src/components/app/map/MapConstants.js b/src/components/app/map/MapConstants.js index a0166d15..32438b5e 100644 --- a/src/components/app/map/MapConstants.js +++ b/src/components/app/map/MapConstants.js @@ -5,7 +5,8 @@ export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS; export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5; export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3; -export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2; +export const OBJECT_SIZE_IN_PIXELS = + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2; export const GRID_LINE_WIDTH_IN_PIXELS = 2; export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8; diff --git a/src/components/app/map/MapStageComponent.js b/src/components/app/map/MapStageComponent.js index c5b31e0f..ce6a60f6 100644 --- a/src/components/app/map/MapStageComponent.js +++ b/src/components/app/map/MapStageComponent.js @@ -1,108 +1,122 @@ import React from "react"; -import {Stage} from "react-konva"; -import {Shortcuts} from "react-shortcuts"; +import { Stage } from "react-konva"; +import { Shortcuts } from "react-shortcuts"; import MapLayer from "../../../containers/app/map/layers/MapLayer"; import ObjectHoverLayer from "../../../containers/app/map/layers/ObjectHoverLayer"; import RoomHoverLayer from "../../../containers/app/map/layers/RoomHoverLayer"; import jQuery from "../../../util/jquery"; -import {NAVBAR_HEIGHT} from "../../navigation/Navbar"; -import {MAP_MOVE_PIXELS_PER_EVENT} from "./MapConstants"; +import { NAVBAR_HEIGHT } from "../../navigation/Navbar"; +import { MAP_MOVE_PIXELS_PER_EVENT } from "./MapConstants"; class MapStageComponent extends React.Component { - state = { - mouseX: 0, - mouseY: 0 - }; + state = { + mouseX: 0, + mouseY: 0 + }; - constructor() { - super(); + constructor() { + super(); - this.updateDimensions = this.updateDimensions.bind(this); - this.updateScale = this.updateScale.bind(this); - } + this.updateDimensions = this.updateDimensions.bind(this); + this.updateScale = this.updateScale.bind(this); + } - componentWillMount() { - this.updateDimensions(); - } + componentWillMount() { + this.updateDimensions(); + } - componentDidMount() { - window.addEventListener("resize", this.updateDimensions); - window.addEventListener("wheel", this.updateScale); + componentDidMount() { + window.addEventListener("resize", this.updateDimensions); + window.addEventListener("wheel", this.updateScale); - window["exportCanvasToImage"] = () => { - const download = document.createElement("a"); - download.href = this.stage.getStage().toDataURL(); - download.download = "opendc-canvas-export-" + Date.now() + ".png"; - download.click(); - } - } + window["exportCanvasToImage"] = () => { + const download = document.createElement("a"); + download.href = this.stage.getStage().toDataURL(); + download.download = "opendc-canvas-export-" + Date.now() + ".png"; + download.click(); + }; + } - componentWillUnmount() { - window.removeEventListener("resize", this.updateDimensions); - window.removeEventListener("wheel", this.updateScale); - } + componentWillUnmount() { + window.removeEventListener("resize", this.updateDimensions); + window.removeEventListener("wheel", this.updateScale); + } - updateDimensions() { - this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT); - } + updateDimensions() { + this.props.setMapDimensions( + jQuery(window).width(), + jQuery(window).height() - NAVBAR_HEIGHT + ); + } - updateScale(e) { - e.preventDefault(); - this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY); - } + updateScale(e) { + e.preventDefault(); + this.props.zoomInOnPosition( + e.deltaY < 0, + this.state.mouseX, + this.state.mouseY + ); + } - updateMousePosition() { - const mousePos = this.stage.getStage().getPointerPosition(); - this.setState({mouseX: mousePos.x, mouseY: mousePos.y}); - } + updateMousePosition() { + const mousePos = this.stage.getStage().getPointerPosition(); + this.setState({ mouseX: mousePos.x, mouseY: mousePos.y }); + } - handleShortcuts(action) { - switch (action) { - case "MOVE_LEFT": - this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0); - break; - case "MOVE_RIGHT": - this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0); - break; - case "MOVE_UP": - this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT); - break; - case "MOVE_DOWN": - this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT); - break; - default: - break; - } + handleShortcuts(action) { + switch (action) { + case "MOVE_LEFT": + this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0); + break; + case "MOVE_RIGHT": + this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0); + break; + case "MOVE_UP": + this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT); + break; + case "MOVE_DOWN": + this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT); + break; + default: + break; } + } - moveWithDelta(deltaX, deltaY) { - this.props.setMapPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY); - } + moveWithDelta(deltaX, deltaY) { + this.props.setMapPositionWithBoundsCheck( + this.props.mapPosition.x + deltaX, + this.props.mapPosition.y + deltaY + ); + } - render() { - return ( - - { - this.stage = stage; - }} - width={this.props.mapDimensions.width} - height={this.props.mapDimensions.height} - onMouseMove={this.updateMousePosition.bind(this)} - > - - - - - - ) - } + render() { + return ( + + { + this.stage = stage; + }} + width={this.props.mapDimensions.width} + height={this.props.mapDimensions.height} + onMouseMove={this.updateMousePosition.bind(this)} + > + + + + + + ); + } } export default MapStageComponent; diff --git a/src/components/app/map/controls/ExportCanvasComponent.js b/src/components/app/map/controls/ExportCanvasComponent.js index 2f044ffe..ee934f21 100644 --- a/src/components/app/map/controls/ExportCanvasComponent.js +++ b/src/components/app/map/controls/ExportCanvasComponent.js @@ -1,13 +1,13 @@ import React from "react"; const ExportCanvasComponent = () => ( - + ); export default ExportCanvasComponent; diff --git a/src/components/app/map/controls/ScaleIndicatorComponent.js b/src/components/app/map/controls/ScaleIndicatorComponent.js index fd9483b5..b7b5cc36 100644 --- a/src/components/app/map/controls/ScaleIndicatorComponent.js +++ b/src/components/app/map/controls/ScaleIndicatorComponent.js @@ -1,14 +1,14 @@ import React from "react"; -import {TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS} from "../MapConstants"; +import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from "../MapConstants"; import "./ScaleIndicatorComponent.css"; -const ScaleIndicatorComponent = ({scale}) => ( -
- {TILE_SIZE_IN_METERS}m -
+const ScaleIndicatorComponent = ({ scale }) => ( +
+ {TILE_SIZE_IN_METERS}m +
); export default ScaleIndicatorComponent; diff --git a/src/components/app/map/controls/ToolPanelComponent.js b/src/components/app/map/controls/ToolPanelComponent.js index a065358a..605e9887 100644 --- a/src/components/app/map/controls/ToolPanelComponent.js +++ b/src/components/app/map/controls/ToolPanelComponent.js @@ -4,10 +4,10 @@ import ExportCanvasComponent from "./ExportCanvasComponent"; import "./ToolPanelComponent.css"; const ToolPanelComponent = () => ( -
- - -
+
+ + +
); export default ToolPanelComponent; diff --git a/src/components/app/map/controls/ZoomControlComponent.js b/src/components/app/map/controls/ZoomControlComponent.js index 8406e8c1..e1b7491e 100644 --- a/src/components/app/map/controls/ZoomControlComponent.js +++ b/src/components/app/map/controls/ZoomControlComponent.js @@ -1,24 +1,24 @@ import React from "react"; -const ZoomControlComponent = ({zoomInOnCenter}) => { - return ( - - - - - ); +const ZoomControlComponent = ({ zoomInOnCenter }) => { + return ( + + + + + ); }; export default ZoomControlComponent; diff --git a/src/components/app/map/elements/Backdrop.js b/src/components/app/map/elements/Backdrop.js index 9c01df63..57414463 100644 --- a/src/components/app/map/elements/Backdrop.js +++ b/src/components/app/map/elements/Backdrop.js @@ -1,16 +1,16 @@ import React from "react"; -import {Rect} from "react-konva"; -import {BACKDROP_COLOR} from "../../../../util/colors"; -import {MAP_SIZE_IN_PIXELS} from "../MapConstants"; +import { Rect } from "react-konva"; +import { BACKDROP_COLOR } from "../../../../util/colors"; +import { MAP_SIZE_IN_PIXELS } from "../MapConstants"; const Backdrop = () => ( - + ); export default Backdrop; diff --git a/src/components/app/map/elements/GrayLayer.js b/src/components/app/map/elements/GrayLayer.js index c5994d06..28fadd8a 100644 --- a/src/components/app/map/elements/GrayLayer.js +++ b/src/components/app/map/elements/GrayLayer.js @@ -1,17 +1,17 @@ import React from "react"; -import {Rect} from "react-konva"; -import {GRAYED_OUT_AREA_COLOR} from "../../../../util/colors"; -import {MAP_SIZE_IN_PIXELS} from "../MapConstants"; +import { Rect } from "react-konva"; +import { GRAYED_OUT_AREA_COLOR } from "../../../../util/colors"; +import { MAP_SIZE_IN_PIXELS } from "../MapConstants"; -const GrayLayer = ({onClick}) => ( - +const GrayLayer = ({ onClick }) => ( + ); export default GrayLayer; diff --git a/src/components/app/map/elements/HoverTile.js b/src/components/app/map/elements/HoverTile.js index fc12cbdd..42e6547c 100644 --- a/src/components/app/map/elements/HoverTile.js +++ b/src/components/app/map/elements/HoverTile.js @@ -1,27 +1,30 @@ import PropTypes from "prop-types"; import React from "react"; -import {Rect} from "react-konva"; -import {ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR} from "../../../../util/colors"; -import {TILE_SIZE_IN_PIXELS} from "../MapConstants"; +import { Rect } from "react-konva"; +import { + ROOM_HOVER_INVALID_COLOR, + ROOM_HOVER_VALID_COLOR +} from "../../../../util/colors"; +import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; -const HoverTile = ({pixelX, pixelY, isValid, scale, onClick}) => ( - +const HoverTile = ({ pixelX, pixelY, isValid, scale, onClick }) => ( + ); HoverTile.propTypes = { - pixelX: PropTypes.number.isRequired, - pixelY: PropTypes.number.isRequired, - isValid: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired, + pixelX: PropTypes.number.isRequired, + pixelY: PropTypes.number.isRequired, + isValid: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired }; export default HoverTile; diff --git a/src/components/app/map/elements/ImageComponent.js b/src/components/app/map/elements/ImageComponent.js index 486296ea..cf41ddfe 100644 --- a/src/components/app/map/elements/ImageComponent.js +++ b/src/components/app/map/elements/ImageComponent.js @@ -1,48 +1,48 @@ import PropTypes from "prop-types"; import React from "react"; -import {Image} from "react-konva"; +import { Image } from "react-konva"; class ImageComponent extends React.Component { - static imageCaches = {}; - static propTypes = { - src: PropTypes.string.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - opacity: PropTypes.number.isRequired, - }; - - state = { - image: null - }; + static imageCaches = {}; + static propTypes = { + src: PropTypes.string.isRequired, + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + opacity: PropTypes.number.isRequired + }; - componentDidMount() { - if (ImageComponent.imageCaches[this.props.src]) { - this.setState({image: ImageComponent.imageCaches[this.props.src]}); - return; - } + state = { + image: null + }; - const image = new window.Image(); - image.src = this.props.src; - image.onload = () => { - this.setState({image}); - ImageComponent.imageCaches[this.props.src] = image; - } + componentDidMount() { + if (ImageComponent.imageCaches[this.props.src]) { + this.setState({ image: ImageComponent.imageCaches[this.props.src] }); + return; } - render() { - return ( - - ) - } + const image = new window.Image(); + image.src = this.props.src; + image.onload = () => { + this.setState({ image }); + ImageComponent.imageCaches[this.props.src] = image; + }; + } + + render() { + return ( + + ); + } } export default ImageComponent; diff --git a/src/components/app/map/elements/RackFillBar.js b/src/components/app/map/elements/RackFillBar.js index 3a8a1137..43701d97 100644 --- a/src/components/app/map/elements/RackFillBar.js +++ b/src/components/app/map/elements/RackFillBar.js @@ -1,67 +1,89 @@ import PropTypes from "prop-types"; import React from "react"; -import {Group, Rect} from "react-konva"; +import { Group, Rect } from "react-konva"; import { - RACK_ENERGY_BAR_BACKGROUND_COLOR, - RACK_ENERGY_BAR_FILL_COLOR, - RACK_SPACE_BAR_BACKGROUND_COLOR, - RACK_SPACE_BAR_FILL_COLOR + RACK_ENERGY_BAR_BACKGROUND_COLOR, + RACK_ENERGY_BAR_FILL_COLOR, + RACK_SPACE_BAR_BACKGROUND_COLOR, + RACK_SPACE_BAR_FILL_COLOR } from "../../../../util/colors"; import { - OBJECT_BORDER_WIDTH_IN_PIXELS, - OBJECT_MARGIN_IN_PIXELS, - RACK_FILL_ICON_OPACITY, - RACK_FILL_ICON_WIDTH, - TILE_SIZE_IN_PIXELS + OBJECT_BORDER_WIDTH_IN_PIXELS, + OBJECT_MARGIN_IN_PIXELS, + RACK_FILL_ICON_OPACITY, + RACK_FILL_ICON_WIDTH, + TILE_SIZE_IN_PIXELS } from "../MapConstants"; import ImageComponent from "./ImageComponent"; -const RackFillBar = ({positionX, positionY, type, fillFraction}) => { - const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2; - const x = positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS - + (type === "space" ? halfOfObjectBorderWidth : - 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS)); - const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth; - const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth; - const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS; +const RackFillBar = ({ positionX, positionY, type, fillFraction }) => { + const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2; + const x = + positionX * TILE_SIZE_IN_PIXELS + + OBJECT_MARGIN_IN_PIXELS + + (type === "space" + ? halfOfObjectBorderWidth + : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS)); + const startY = + positionY * TILE_SIZE_IN_PIXELS + + OBJECT_MARGIN_IN_PIXELS + + halfOfObjectBorderWidth; + const width = + 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - + halfOfObjectBorderWidth; + const fullHeight = + TILE_SIZE_IN_PIXELS - + OBJECT_MARGIN_IN_PIXELS * 2 - + OBJECT_BORDER_WIDTH_IN_PIXELS; - const fractionHeight = fillFraction * fullHeight; - const fractionY = (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - - fractionHeight; + const fractionHeight = fillFraction * fullHeight; + const fractionY = + (positionY + 1) * TILE_SIZE_IN_PIXELS - + OBJECT_MARGIN_IN_PIXELS - + halfOfObjectBorderWidth - + fractionHeight; - return ( - - - - - - ); + return ( + + + + + + ); }; RackFillBar.propTypes = { - positionX: PropTypes.number.isRequired, - positionY: PropTypes.number.isRequired, - type: PropTypes.string.isRequired, - fillFraction: PropTypes.number.isRequired, + positionX: PropTypes.number.isRequired, + positionY: PropTypes.number.isRequired, + type: PropTypes.string.isRequired, + fillFraction: PropTypes.number.isRequired }; export default RackFillBar; diff --git a/src/components/app/map/elements/RoomTile.js b/src/components/app/map/elements/RoomTile.js index 11948a7a..71c3bf15 100644 --- a/src/components/app/map/elements/RoomTile.js +++ b/src/components/app/map/elements/RoomTile.js @@ -1,20 +1,20 @@ import React from "react"; -import {Rect} from "react-konva"; +import { Rect } from "react-konva"; import Shapes from "../../../../shapes/index"; -import {TILE_SIZE_IN_PIXELS} from "../MapConstants"; +import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; -const RoomTile = ({tile, color}) => ( - +const RoomTile = ({ tile, color }) => ( + ); RoomTile.propTypes = { - tile: Shapes.Tile, + tile: Shapes.Tile }; export default RoomTile; diff --git a/src/components/app/map/elements/TileObject.js b/src/components/app/map/elements/TileObject.js index 73bfddba..c1b631db 100644 --- a/src/components/app/map/elements/TileObject.js +++ b/src/components/app/map/elements/TileObject.js @@ -1,25 +1,29 @@ import PropTypes from "prop-types"; import React from "react"; -import {Rect} from "react-konva"; -import {OBJECT_BORDER_COLOR} from "../../../../util/colors"; -import {OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants"; +import { Rect } from "react-konva"; +import { OBJECT_BORDER_COLOR } from "../../../../util/colors"; +import { + OBJECT_BORDER_WIDTH_IN_PIXELS, + OBJECT_MARGIN_IN_PIXELS, + TILE_SIZE_IN_PIXELS +} from "../MapConstants"; -const TileObject = ({positionX, positionY, color}) => ( - +const TileObject = ({ positionX, positionY, color }) => ( + ); TileObject.propTypes = { - positionX: PropTypes.number.isRequired, - positionY: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, + positionX: PropTypes.number.isRequired, + positionY: PropTypes.number.isRequired, + color: PropTypes.string.isRequired }; export default TileObject; diff --git a/src/components/app/map/elements/TilePlusIcon.js b/src/components/app/map/elements/TilePlusIcon.js index b96bf0f5..06377152 100644 --- a/src/components/app/map/elements/TilePlusIcon.js +++ b/src/components/app/map/elements/TilePlusIcon.js @@ -1,44 +1,52 @@ import PropTypes from "prop-types"; import React from "react"; -import {Group, Line} from "react-konva"; -import {TILE_PLUS_COLOR} from "../../../../util/colors"; -import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants"; +import { Group, Line } from "react-konva"; +import { TILE_PLUS_COLOR } from "../../../../util/colors"; +import { + TILE_PLUS_MARGIN_IN_PIXELS, + TILE_PLUS_WIDTH_IN_PIXELS, + TILE_SIZE_IN_PIXELS +} from "../MapConstants"; -const TilePlusIcon = ({pixelX, pixelY, mapScale}) => { - const linePoints = [ - [ - pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - ], - [ - pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - ], - ]; - return ( - - {linePoints.map((points, index) => ( - - ))} - - ) +const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => { + const linePoints = [ + [ + pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelY + + TILE_SIZE_IN_PIXELS * mapScale - + TILE_PLUS_MARGIN_IN_PIXELS * mapScale + ], + [ + pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelX + + TILE_SIZE_IN_PIXELS * mapScale - + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale + ] + ]; + return ( + + {linePoints.map((points, index) => ( + + ))} + + ); }; TilePlusIcon.propTypes = { - pixelX: PropTypes.number, - pixelY: PropTypes.number, - mapScale: PropTypes.number, + pixelX: PropTypes.number, + pixelY: PropTypes.number, + mapScale: PropTypes.number }; export default TilePlusIcon; diff --git a/src/components/app/map/elements/WallSegment.js b/src/components/app/map/elements/WallSegment.js index 14efd3fc..c5011656 100644 --- a/src/components/app/map/elements/WallSegment.js +++ b/src/components/app/map/elements/WallSegment.js @@ -1,39 +1,39 @@ import React from "react"; -import {Line} from "react-konva"; +import { Line } from "react-konva"; import Shapes from "../../../../shapes/index"; -import {WALL_COLOR} from "../../../../util/colors"; -import {TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS} from "../MapConstants"; +import { WALL_COLOR } from "../../../../util/colors"; +import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from "../MapConstants"; -const WallSegment = ({wallSegment}) => { - let points; - if (wallSegment.isHorizontal) { - points = [ - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS, - (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS - ]; - } else { - points = [ - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS, - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS, - ]; - } +const WallSegment = ({ wallSegment }) => { + let points; + if (wallSegment.isHorizontal) { + points = [ + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS, + (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS + ]; + } else { + points = [ + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS, + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS + ]; + } - return ( - - ) + return ( + + ); }; WallSegment.propTypes = { - wallSegment: Shapes.WallSegment, + wallSegment: Shapes.WallSegment }; export default WallSegment; diff --git a/src/components/app/map/groups/DatacenterGroup.js b/src/components/app/map/groups/DatacenterGroup.js index 1c978360..51e32db6 100644 --- a/src/components/app/map/groups/DatacenterGroup.js +++ b/src/components/app/map/groups/DatacenterGroup.js @@ -1,42 +1,40 @@ import React from "react"; -import {Group} from "react-konva"; +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 ; - } - - if (interactionLevel.mode === "BUILDING") { - return ( - - {datacenter.roomIds.map(roomId => ( - - ))} - - ); - } +const DatacenterGroup = ({ datacenter, interactionLevel }) => { + if (!datacenter) { + return ; + } + if (interactionLevel.mode === "BUILDING") { return ( - - {datacenter.roomIds - .filter(roomId => roomId !== interactionLevel.roomId) - .map(roomId => ) - } - {interactionLevel.mode === "ROOM" ? : null} - {datacenter.roomIds - .filter(roomId => roomId === interactionLevel.roomId) - .map(roomId => ) - } - + + {datacenter.roomIds.map(roomId => ( + + ))} + ); + } + + return ( + + {datacenter.roomIds + .filter(roomId => roomId !== interactionLevel.roomId) + .map(roomId => )} + {interactionLevel.mode === "ROOM" ? : null} + {datacenter.roomIds + .filter(roomId => roomId === interactionLevel.roomId) + .map(roomId => )} + + ); }; DatacenterGroup.propTypes = { - datacenter: Shapes.Datacenter, - interactionLevel: Shapes.InteractionLevel, + datacenter: Shapes.Datacenter, + interactionLevel: Shapes.InteractionLevel }; export default DatacenterGroup; diff --git a/src/components/app/map/groups/GridGroup.js b/src/components/app/map/groups/GridGroup.js index b3c6e1d5..bbb1eb68 100644 --- a/src/components/app/map/groups/GridGroup.js +++ b/src/components/app/map/groups/GridGroup.js @@ -1,30 +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"; +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 + 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 + index * TILE_SIZE_IN_PIXELS, + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS ]); const GridGroup = () => ( - - {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => ( - - ))} - + + {HORIZONTAL_POINT_PAIRS.concat( + VERTICAL_POINT_PAIRS + ).map((points, index) => ( + + ))} + ); export default GridGroup; diff --git a/src/components/app/map/groups/RackGroup.js b/src/components/app/map/groups/RackGroup.js index 57062187..69d6ac10 100644 --- a/src/components/app/map/groups/RackGroup.js +++ b/src/components/app/map/groups/RackGroup.js @@ -1,31 +1,43 @@ import React from "react"; -import {Group} from "react-konva"; +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 { 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); - } +const RackGroup = ({ tile, inSimulation, rackLoad }) => { + let color = RACK_BACKGROUND_COLOR; + if (inSimulation && rackLoad >= 0) { + color = convertLoadToSimulationColor(rackLoad); + } - return ( - - - - - - - - ); + return ( + + + + + + + + ); }; RackGroup.propTypes = { - tile: Shapes.Tile, + tile: Shapes.Tile }; export default RackGroup; diff --git a/src/components/app/map/groups/RoomGroup.js b/src/components/app/map/groups/RoomGroup.js index 18a6bd84..c8f0d3db 100644 --- a/src/components/app/map/groups/RoomGroup.js +++ b/src/components/app/map/groups/RoomGroup.js @@ -1,48 +1,56 @@ import React from "react"; -import {Group} from "react-konva"; +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 ( - - {room.tileIds.map(tileId => ( - - ))} - - ); - } - +const RoomGroup = ({ + room, + interactionLevel, + currentRoomInConstruction, + onClick +}) => { + if (currentRoomInConstruction === room.id) { return ( - - {(() => { - if ((interactionLevel.mode === "RACK" || interactionLevel.mode === "MACHINE") - && interactionLevel.roomId === room.id) { - return [ - room.tileIds - .filter(tileId => tileId !== interactionLevel.tileId) - .map(tileId => ), - , - room.tileIds - .filter(tileId => tileId === interactionLevel.tileId) - .map(tileId => ) - ]; - } else { - return room.tileIds.map(tileId => ( - - )); - } - })()} - - + + {room.tileIds.map(tileId => ( + + ))} + ); + } + + return ( + + {(() => { + if ( + (interactionLevel.mode === "RACK" || + interactionLevel.mode === "MACHINE") && + interactionLevel.roomId === room.id + ) { + return [ + room.tileIds + .filter(tileId => tileId !== interactionLevel.tileId) + .map(tileId => ), + , + room.tileIds + .filter(tileId => tileId === interactionLevel.tileId) + .map(tileId => ) + ]; + } else { + return room.tileIds.map(tileId => ( + + )); + } + })()} + + + ); }; RoomGroup.propTypes = { - room: Shapes.Room, + room: Shapes.Room }; export default RoomGroup; diff --git a/src/components/app/map/groups/TileGroup.js b/src/components/app/map/groups/TileGroup.js index 0cd4ea59..8f3953d7 100644 --- a/src/components/app/map/groups/TileGroup.js +++ b/src/components/app/map/groups/TileGroup.js @@ -1,42 +1,43 @@ import PropTypes from "prop-types"; import React from "react"; -import {Group} from "react-konva"; +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 { + 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 = ; - break; - default: - tileObject = null; - } +const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => { + let tileObject; + switch (tile.objectType) { + case "RACK": + tileObject = ; + break; + default: + tileObject = null; + } - let color = ROOM_DEFAULT_COLOR; - if (newTile) { - color = ROOM_IN_CONSTRUCTION_COLOR; - } else if (inSimulation && roomLoad >= 0) { - color = convertLoadToSimulationColor(roomLoad); - } + let color = ROOM_DEFAULT_COLOR; + if (newTile) { + color = ROOM_IN_CONSTRUCTION_COLOR; + } else if (inSimulation && roomLoad >= 0) { + color = convertLoadToSimulationColor(roomLoad); + } - return ( - onClick(tile)} - > - - {tileObject} - - ); + return ( + onClick(tile)}> + + {tileObject} + + ); }; TileGroup.propTypes = { - tile: Shapes.Tile, - newTile: PropTypes.bool, + tile: Shapes.Tile, + newTile: PropTypes.bool }; export default TileGroup; diff --git a/src/components/app/map/groups/WallGroup.js b/src/components/app/map/groups/WallGroup.js index 6de22523..43de66e8 100644 --- a/src/components/app/map/groups/WallGroup.js +++ b/src/components/app/map/groups/WallGroup.js @@ -1,22 +1,22 @@ import PropTypes from "prop-types"; import React from "react"; -import {Group} from "react-konva"; +import { Group } from "react-konva"; import Shapes from "../../../../shapes/index"; -import {deriveWallLocations} from "../../../../util/tile-calculations"; +import { deriveWallLocations } from "../../../../util/tile-calculations"; import WallSegment from "../elements/WallSegment"; -const WallGroup = ({tiles}) => { - return ( - - {deriveWallLocations(tiles).map((wallSegment, index) => ( - - ))} - - ); +const WallGroup = ({ tiles }) => { + return ( + + {deriveWallLocations(tiles).map((wallSegment, index) => ( + + ))} + + ); }; WallGroup.propTypes = { - tiles: PropTypes.arrayOf(Shapes.Tile).isRequired, + tiles: PropTypes.arrayOf(Shapes.Tile).isRequired }; export default WallGroup; diff --git a/src/components/app/map/layers/HoverLayerComponent.js b/src/components/app/map/layers/HoverLayerComponent.js index aa2e8313..c39532f1 100644 --- a/src/components/app/map/layers/HoverLayerComponent.js +++ b/src/components/app/map/layers/HoverLayerComponent.js @@ -1,63 +1,85 @@ import PropTypes from "prop-types"; -import React from 'react'; -import {Layer} from "react-konva"; +import React from "react"; +import { Layer } from "react-konva"; import HoverTile from "../elements/HoverTile"; -import {TILE_SIZE_IN_PIXELS} from "../MapConstants"; +import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; class HoverLayerComponent extends React.Component { - static propTypes = { - mouseX: PropTypes.number.isRequired, - mouseY: PropTypes.number.isRequired, - mapPosition: PropTypes.object.isRequired, - mapScale: PropTypes.number.isRequired, - isEnabled: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired, - }; - - state = { - positionX: -1, - positionY: -1, - validity: false, - }; - - componentDidUpdate() { - if (!this.props.isEnabled()) { - return; - } - - const positionX = Math.floor((this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)); - const positionY = Math.floor((this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)); - - if (positionX !== this.state.positionX || positionY !== this.state.positionY) { - this.setState({positionX, positionY, validity: this.props.isValid(positionX, positionY)}); - } + static propTypes = { + mouseX: PropTypes.number.isRequired, + mouseY: PropTypes.number.isRequired, + mapPosition: PropTypes.object.isRequired, + mapScale: PropTypes.number.isRequired, + isEnabled: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired + }; + + state = { + positionX: -1, + positionY: -1, + validity: false + }; + + componentDidUpdate() { + if (!this.props.isEnabled()) { + return; } - render() { - if (!this.props.isEnabled()) { - return ; - } - - const pixelX = this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mapPosition.x; - const pixelY = this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mapPosition.y; - - return ( - - this.state.validity ? - this.props.onClick(this.state.positionX, this.state.positionY) : undefined} - /> - {this.props.children ? - React.cloneElement(this.props.children, {pixelX, pixelY, scale: this.props.mapScale}) : - undefined - } - - ); + const positionX = Math.floor( + (this.props.mouseX - this.props.mapPosition.x) / + (this.props.mapScale * TILE_SIZE_IN_PIXELS) + ); + const positionY = Math.floor( + (this.props.mouseY - this.props.mapPosition.y) / + (this.props.mapScale * TILE_SIZE_IN_PIXELS) + ); + + if ( + positionX !== this.state.positionX || + positionY !== this.state.positionY + ) { + this.setState({ + positionX, + positionY, + validity: this.props.isValid(positionX, positionY) + }); } + } + + render() { + if (!this.props.isEnabled()) { + return ; + } + + const pixelX = + this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + + this.props.mapPosition.x; + const pixelY = + this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + + this.props.mapPosition.y; + + return ( + + + this.state.validity + ? this.props.onClick(this.state.positionX, this.state.positionY) + : undefined} + /> + {this.props.children + ? React.cloneElement(this.props.children, { + pixelX, + pixelY, + scale: this.props.mapScale + }) + : undefined} + + ); + } } export default HoverLayerComponent; diff --git a/src/components/app/map/layers/MapLayerComponent.js b/src/components/app/map/layers/MapLayerComponent.js index c969249c..6ad3cb88 100644 --- a/src/components/app/map/layers/MapLayerComponent.js +++ b/src/components/app/map/layers/MapLayerComponent.js @@ -1,17 +1,22 @@ -import React from 'react'; -import {Group, Layer} from "react-konva"; +import React from "react"; +import { Group, Layer } from "react-konva"; import DatacenterContainer from "../../../../containers/app/map/DatacenterContainer"; import Backdrop from "../elements/Backdrop"; import GridGroup from "../groups/GridGroup"; -const MapLayerComponent = ({mapPosition, mapScale}) => ( - - - - - - - +const MapLayerComponent = ({ mapPosition, mapScale }) => ( + + + + + + + ); export default MapLayerComponent; diff --git a/src/components/app/map/layers/ObjectHoverLayerComponent.js b/src/components/app/map/layers/ObjectHoverLayerComponent.js index aa79f8c3..e7342d3c 100644 --- a/src/components/app/map/layers/ObjectHoverLayerComponent.js +++ b/src/components/app/map/layers/ObjectHoverLayerComponent.js @@ -1,11 +1,11 @@ -import React from 'react'; +import React from "react"; import TilePlusIcon from "../elements/TilePlusIcon"; import HoverLayerComponent from "./HoverLayerComponent"; -const ObjectHoverLayerComponent = (props) => ( - - - +const ObjectHoverLayerComponent = props => ( + + + ); export default ObjectHoverLayerComponent; diff --git a/src/components/app/map/layers/RoomHoverLayerComponent.js b/src/components/app/map/layers/RoomHoverLayerComponent.js index 2133c8d8..feea5ae5 100644 --- a/src/components/app/map/layers/RoomHoverLayerComponent.js +++ b/src/components/app/map/layers/RoomHoverLayerComponent.js @@ -1,8 +1,6 @@ -import React from 'react'; +import React from "react"; import HoverLayerComponent from "./HoverLayerComponent"; -const RoomHoverLayerComponent = (props) => ( - -); +const RoomHoverLayerComponent = props => ; export default RoomHoverLayerComponent; diff --git a/src/components/app/sidebars/Sidebar.js b/src/components/app/sidebars/Sidebar.js index 00e3607a..33dbe011 100644 --- a/src/components/app/sidebars/Sidebar.js +++ b/src/components/app/sidebars/Sidebar.js @@ -3,36 +3,48 @@ import React from "react"; import "./Sidebar.css"; class Sidebar extends React.Component { - state = { - collapsed: false - }; + state = { + collapsed: false + }; - render() { - const collapseButton = ( -
this.setState({collapsed: !this.state.collapsed})} - > - {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ? - : - - } -
- ); + render() { + const collapseButton = ( +
this.setState({ collapsed: !this.state.collapsed })} + > + {(this.state.collapsed && this.props.isRight) || + (!this.state.collapsed && !this.props.isRight) ? ( + + ) : ( + + )} +
+ ); - if (this.state.collapsed) { - return collapseButton; - } - return ( -
e.stopPropagation()} - > - {this.props.children} - {collapseButton} -
- ); + if (this.state.collapsed) { + return collapseButton; } + return ( +
e.stopPropagation()} + > + {this.props.children} + {collapseButton} +
+ ); + } } export default Sidebar; diff --git a/src/components/app/sidebars/elements/LoadBarComponent.js b/src/components/app/sidebars/elements/LoadBarComponent.js index 65f94b3d..8c9b164b 100644 --- a/src/components/app/sidebars/elements/LoadBarComponent.js +++ b/src/components/app/sidebars/elements/LoadBarComponent.js @@ -1,22 +1,22 @@ import classNames from "classnames"; import React from "react"; -const LoadBarComponent = ({percent, disabled}) => ( -
- Current load -
-
- {percent}% -
-
+const LoadBarComponent = ({ percent, disabled }) => ( +
+ Current load +
+
+ {percent}% +
+
); export default LoadBarComponent; diff --git a/src/components/app/sidebars/elements/LoadChartComponent.js b/src/components/app/sidebars/elements/LoadChartComponent.js index 91d89287..6f66010e 100644 --- a/src/components/app/sidebars/elements/LoadChartComponent.js +++ b/src/components/app/sidebars/elements/LoadChartComponent.js @@ -1,73 +1,81 @@ import React from "react"; import ReactDOM from "react-dom/server"; import SvgSaver from "svgsaver"; -import {VictoryAxis, VictoryChart, VictoryLine, VictoryScatter} from "victory"; -import {convertSecondsToFormattedTime} from "../../../../util/date-time"; +import { + VictoryAxis, + VictoryChart, + VictoryLine, + VictoryScatter +} from "victory"; +import { convertSecondsToFormattedTime } from "../../../../util/date-time"; -const LoadChartComponent = ({data, currentTick}) => { - const onExport = () => { - const div = document.createElement("div"); - div.innerHTML = ReactDOM.renderToString( - - ); - div.firstChild.style = "font-family: Roboto, Arial, sans-serif; font-size: 10pt;"; - const svgSaver = new SvgSaver(); - svgSaver.asSvg(div.firstChild, "opendc-chart-export-" + Date.now() + ".svg"); - }; - - return ( -
- Load over time - - -
+const LoadChartComponent = ({ data, currentTick }) => { + const onExport = () => { + const div = document.createElement("div"); + div.innerHTML = ReactDOM.renderToString( + + ); + div.firstChild.style = + "font-family: Roboto, Arial, sans-serif; font-size: 10pt;"; + const svgSaver = new SvgSaver(); + svgSaver.asSvg( + div.firstChild, + "opendc-chart-export-" + Date.now() + ".svg" ); + }; + + return ( +
+ Load over time + + +
+ ); }; -const VictoryChartComponent = ({data, currentTick, showCurrentTick}) => ( - - convertSecondsToFormattedTime(tick)} - fixLabelOverlap={true} - label="Simulated Time" - /> - - - - {showCurrentTick ? - : - undefined - } - +const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => ( + + convertSecondsToFormattedTime(tick)} + fixLabelOverlap={true} + label="Simulated Time" + /> + + + + {showCurrentTick ? ( + + ) : ( + undefined + )} + ); -const ExportChartComponent = ({onExport}) => ( - +const ExportChartComponent = ({ onExport }) => ( + ); export default LoadChartComponent; diff --git a/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js index 3649045b..bc563dab 100644 --- a/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js +++ b/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js @@ -1,12 +1,23 @@ import React from "react"; -const ExperimentMetadataComponent = ({experimentName, pathName, traceName, schedulerName}) => ( -
-

{experimentName}

-

Path: {pathName}

-

Trace: {traceName}

-

Scheduler: {schedulerName}

-
+const ExperimentMetadataComponent = ({ + experimentName, + pathName, + traceName, + schedulerName +}) => ( +
+

{experimentName}

+

+ Path: {pathName} +

+

+ Trace: {traceName} +

+

+ Scheduler: {schedulerName} +

+
); export default ExperimentMetadataComponent; diff --git a/src/components/app/sidebars/simulation/LoadMetricComponent.js b/src/components/app/sidebars/simulation/LoadMetricComponent.js index e72e6b67..3e4cf810 100644 --- a/src/components/app/sidebars/simulation/LoadMetricComponent.js +++ b/src/components/app/sidebars/simulation/LoadMetricComponent.js @@ -1,33 +1,40 @@ import React from "react"; -import {SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR} from "../../../../util/colors"; -import {LOAD_NAME_MAP} from "../../../../util/simulation-load"; +import { + SIM_HIGH_COLOR, + SIM_LOW_COLOR, + SIM_MID_HIGH_COLOR, + SIM_MID_LOW_COLOR +} from "../../../../util/colors"; +import { LOAD_NAME_MAP } from "../../../../util/simulation-load"; -const LoadMetricComponent = ({loadMetric}) => ( +const LoadMetricComponent = ({ loadMetric }) => ( +
-
Colors represent {LOAD_NAME_MAP[loadMetric]}
-
- - - - -
+ Colors represent {LOAD_NAME_MAP[loadMetric]}
+
+ + + + +
+
); export default LoadMetricComponent; diff --git a/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/src/components/app/sidebars/simulation/SimulationSidebarComponent.js index 92651dfc..08dbb29a 100644 --- a/src/components/app/sidebars/simulation/SimulationSidebarComponent.js +++ b/src/components/app/sidebars/simulation/SimulationSidebarComponent.js @@ -6,17 +6,17 @@ import Sidebar from "../Sidebar"; import "./SimulationSidebarComponent.css"; const SimulationSidebarComponent = () => { - return ( - -
- - -
- -
-
- - ); + return ( + +
+ + +
+ +
+
+ + ); }; export default SimulationSidebarComponent; diff --git a/src/components/app/sidebars/simulation/TaskComponent.js b/src/components/app/sidebars/simulation/TaskComponent.js index baf6f9ce..bd917cc9 100644 --- a/src/components/app/sidebars/simulation/TaskComponent.js +++ b/src/components/app/sidebars/simulation/TaskComponent.js @@ -1,57 +1,58 @@ import approx from "approximate-number"; import classNames from "classnames"; import React from "react"; -import {convertSecondsToFormattedTime} from "../../../../util/date-time"; +import { convertSecondsToFormattedTime } from "../../../../util/date-time"; -const TaskComponent = ({task, flopsLeft}) => { - let icon; - let progressBarContent; - let percent; - let infoTitle; +const TaskComponent = ({ task, flopsLeft }) => { + let icon; + let progressBarContent; + let percent; + let infoTitle; - if (flopsLeft === task.totalFlopCount) { - icon = "hourglass-half"; - progressBarContent = ""; - percent = 0; - infoTitle = "Not submitted yet"; - } else if (flopsLeft > 0) { - icon = "refresh"; - progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP"; - percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount; - infoTitle = progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)"; - } else { - icon = "check"; - progressBarContent = "Completed"; - percent = 100; - infoTitle = "Completed"; - } + if (flopsLeft === task.totalFlopCount) { + icon = "hourglass-half"; + progressBarContent = ""; + percent = 0; + infoTitle = "Not submitted yet"; + } else if (flopsLeft > 0) { + icon = "refresh"; + progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP"; + percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount; + infoTitle = + progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)"; + } else { + icon = "check"; + progressBarContent = "Completed"; + percent = 100; + infoTitle = "Completed"; + } - return ( -
  • -
    -
    {approx(task.totalFlopCount)} FLOP
    - Starts at {convertSecondsToFormattedTime(task.startTick)} -
    -
    - -
    -
    - {progressBarContent} -
    -
    -
    -
    • - ); + return ( +
  • +
    +
    {approx(task.totalFlopCount)} FLOP
    + Starts at {convertSecondsToFormattedTime(task.startTick)} +
    +
    + +
    +
    + {progressBarContent} +
    +
    +
    +
    • + ); }; export default TaskComponent; diff --git a/src/components/app/sidebars/simulation/TraceComponent.js b/src/components/app/sidebars/simulation/TraceComponent.js index b43a8cea..2b6559b4 100644 --- a/src/components/app/sidebars/simulation/TraceComponent.js +++ b/src/components/app/sidebars/simulation/TraceComponent.js @@ -1,20 +1,20 @@ import React from "react"; import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer"; -const TraceComponent = ({jobs}) => ( -
    -

    Trace

    - {jobs.map(job => ( -
    -

    Job: {job.name}

    -
      - {job.taskIds.map(taskId => ( - - ))} -
    -
    - ))} -
    +const TraceComponent = ({ jobs }) => ( +
    +

    Trace

    + {jobs.map(job => ( +
    +

    Job: {job.name}

    +
      + {job.taskIds.map(taskId => ( + + ))} +
    +
    + ))} +
    ); export default TraceComponent; diff --git a/src/components/app/sidebars/topology/NameComponent.js b/src/components/app/sidebars/topology/NameComponent.js index d663f4ae..805538b3 100644 --- a/src/components/app/sidebars/topology/NameComponent.js +++ b/src/components/app/sidebars/topology/NameComponent.js @@ -1,13 +1,13 @@ import React from "react"; import FontAwesome from "react-fontawesome"; -const NameComponent = ({name, onEdit}) => ( -

    - {name} - -

    +const NameComponent = ({ name, onEdit }) => ( +

    + {name} + +

    ); export default NameComponent; diff --git a/src/components/app/sidebars/topology/TopologySidebarComponent.js b/src/components/app/sidebars/topology/TopologySidebarComponent.js index ff4260a9..81e510a1 100644 --- a/src/components/app/sidebars/topology/TopologySidebarComponent.js +++ b/src/components/app/sidebars/topology/TopologySidebarComponent.js @@ -5,31 +5,27 @@ import RackSidebarContainer from "../../../../containers/app/sidebars/topology/r import RoomSidebarContainer from "../../../../containers/app/sidebars/topology/room/RoomSidebarContainer"; import Sidebar from "../Sidebar"; -const TopologySidebarComponent = ({interactionLevel}) => { - let sidebarContent; +const TopologySidebarComponent = ({ interactionLevel }) => { + let sidebarContent; - switch (interactionLevel.mode) { - case "BUILDING": - sidebarContent = ; - break; - case "ROOM": - sidebarContent = ; - break; - case "RACK": - sidebarContent = ; - break; - case "MACHINE": - sidebarContent = ; - break; - default: - sidebarContent = "Missing Content"; - } + switch (interactionLevel.mode) { + case "BUILDING": + sidebarContent = ; + break; + case "ROOM": + sidebarContent = ; + break; + case "RACK": + sidebarContent = ; + break; + case "MACHINE": + sidebarContent = ; + break; + default: + sidebarContent = "Missing Content"; + } - return ( - - {sidebarContent} - - ); + return {sidebarContent}; }; export default TopologySidebarComponent; diff --git a/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index 2bf81a48..f16c19f0 100644 --- a/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -1,19 +1,20 @@ import React from "react"; import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer"; -const BuildingSidebarComponent = ({inSimulation}) => { - return ( -
    -

    Building

    - {inSimulation ? -
    - - Click on individual rooms to see their stats! -
    : - - } +const BuildingSidebarComponent = ({ inSimulation }) => { + return ( +
    +

    Building

    + {inSimulation ? ( +
    + + Click on individual rooms to see their stats!
    - ); + ) : ( + + )} +
    + ); }; export default BuildingSidebarComponent; diff --git a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js index d89b0ac0..a559c8dd 100644 --- a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js +++ b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js @@ -1,27 +1,31 @@ import React from "react"; -const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomInConstruction}) => { - if (currentRoomInConstruction === -1) { - return ( -
    - - Construct a new room -
    - ); - } +const NewRoomConstructionComponent = ({ + onStart, + onFinish, + onCancel, + currentRoomInConstruction +}) => { + if (currentRoomInConstruction === -1) { return ( -
    -
    - - Finalize new room -
    -
    - - Cancel construction -
    -
    +
    + + Construct a new room +
    ); - + } + return ( +
    +
    + + Finalize new room +
    +
    + + Cancel construction +
    +
    + ); }; export default NewRoomConstructionComponent; diff --git a/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/src/components/app/sidebars/topology/machine/BackToRackComponent.js index 19e33904..7f56aca0 100644 --- a/src/components/app/sidebars/topology/machine/BackToRackComponent.js +++ b/src/components/app/sidebars/topology/machine/BackToRackComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const BackToRackComponent = ({onClick}) => ( -
    - - Back to rack -
    +const BackToRackComponent = ({ onClick }) => ( +
    + + Back to rack +
    ); export default BackToRackComponent; diff --git a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js index 7ba08352..8da39b30 100644 --- a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js +++ b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const DeleteMachineComponent = ({onClick}) => ( -
    - - Delete this machine -
    +const DeleteMachineComponent = ({ onClick }) => ( +
    + + Delete this machine +
    ); export default DeleteMachineComponent; diff --git a/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/src/components/app/sidebars/topology/machine/MachineNameComponent.js index 321e350d..0ad8b79c 100644 --- a/src/components/app/sidebars/topology/machine/MachineNameComponent.js +++ b/src/components/app/sidebars/topology/machine/MachineNameComponent.js @@ -1,7 +1,7 @@ import React from "react"; -const MachineNameComponent = ({position}) => ( -

    Machine at slot {position}

    +const MachineNameComponent = ({ position }) => ( +

    Machine at slot {position}

    ); export default MachineNameComponent; diff --git a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index cf4db80e..5ccaf25c 100644 --- a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -6,21 +6,22 @@ import DeleteMachineContainer from "../../../../../containers/app/sidebars/topol import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer"; import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer"; -const MachineSidebarComponent = ({inSimulation, machineId}) => { - return ( +const MachineSidebarComponent = ({ inSimulation, machineId }) => { + return ( +
    + + + {inSimulation ? (
    - - - {inSimulation ? -
    - - -
    : - - } - + +
    - ); + ) : ( + + )} + +
    + ); }; export default MachineSidebarComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/src/components/app/sidebars/topology/machine/UnitAddComponent.js index f16700df..d0082a72 100644 --- a/src/components/app/sidebars/topology/machine/UnitAddComponent.js +++ b/src/components/app/sidebars/topology/machine/UnitAddComponent.js @@ -2,37 +2,44 @@ import PropTypes from "prop-types"; import React from "react"; class UnitAddComponent extends React.Component { - static propTypes = { - units: PropTypes.array.isRequired, - onAdd: PropTypes.func.isRequired, - }; + static propTypes = { + units: PropTypes.array.isRequired, + onAdd: PropTypes.func.isRequired + }; - render() { - return ( -
    -
    - - -
    -
    - ); - } + render() { + return ( +
    +
    + + +
    +
    + ); + } } export default UnitAddComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitComponent.js b/src/components/app/sidebars/topology/machine/UnitComponent.js index a0435eab..10a310e8 100644 --- a/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -2,61 +2,79 @@ import React from "react"; import jQuery from "../../../../../util/jquery"; class UnitComponent extends React.Component { - componentDidMount() { - jQuery(".unit-info-popover").popover({ - trigger: "focus" - }); - } - - render() { - let unitInfo; - if (this.props.unitType === "cpu" || this.props.unitType === "gpu") { - unitInfo = ( - "Clockrate: " + this.props.unit.clockRateMhz + " MHz
    " + - "Num. Cores: " + this.props.unit.numberOfCores + "
    " + - "Energy Cons.: " + this.props.unit.energyConsumptionW + " W" - ); - } else if (this.props.unitType === "memory" || this.props.unitType === "storage") { - unitInfo = ( - "Speed: " + this.props.unit.speedMbPerS + " Mb/s
    " + - "Size: " + this.props.unit.sizeMb + " MB
    " + - "Energy Cons.: " + this.props.unit.energyConsumptionW + " W" - ); - } + componentDidMount() { + jQuery(".unit-info-popover").popover({ + trigger: "focus" + }); + } - return ( -
  • - - { - this.props.unit.manufacturer - + " " + this.props.unit.family - + " " + this.props.unit.model - + " " + this.props.unit.generation - } - - - - - - {this.props.inSimulation ? - undefined : - - - - } - -
    • - ); + render() { + let unitInfo; + if (this.props.unitType === "cpu" || this.props.unitType === "gpu") { + unitInfo = + "Clockrate: " + + this.props.unit.clockRateMhz + + " MHz
    " + + "Num. Cores: " + + this.props.unit.numberOfCores + + "
    " + + "Energy Cons.: " + + this.props.unit.energyConsumptionW + + " W"; + } else if ( + this.props.unitType === "memory" || + this.props.unitType === "storage" + ) { + unitInfo = + "Speed: " + + this.props.unit.speedMbPerS + + " Mb/s
    " + + "Size: " + + this.props.unit.sizeMb + + " MB
    " + + "Energy Cons.: " + + this.props.unit.energyConsumptionW + + " W"; } + + return ( +
  • + + {this.props.unit.manufacturer + + " " + + this.props.unit.family + + " " + + this.props.unit.model + + " " + + this.props.unit.generation} + + + + + + {this.props.inSimulation ? ( + undefined + ) : ( + + + + )} + +
    • + ); + } } export default UnitComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitListComponent.js b/src/components/app/sidebars/topology/machine/UnitListComponent.js index 683f6023..38df806b 100644 --- a/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,20 +1,29 @@ import React from "react"; import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer"; -const UnitListComponent = ({unitType, unitIds, inSimulation}) => ( -
      - {unitIds.length !== 0 ? - unitIds.map((unitId, index) => ( - - )) : -
      - {inSimulation ? - No units of this type in this machine : - No units... Add some with the menu above! - } -
      - } -
    +const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( +
      + {unitIds.length !== 0 ? ( + unitIds.map((unitId, index) => ( + + )) + ) : ( +
      + {inSimulation ? ( + No units of this type in this machine + ) : ( + + No units... Add some with the menu above! + + )} +
      + )} +
    ); export default UnitListComponent; diff --git a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index 2113d6d8..0683c796 100644 --- a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -2,53 +2,64 @@ import React from "react"; import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer"; import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer"; -const UnitTabsComponent = ({inSimulation}) => ( -
    - -
    -
    - {inSimulation ? - undefined : - - } - -
    -
    - {inSimulation ? - undefined : - - } - -
    -
    - {inSimulation ? - undefined : - - } - -
    -
    - {inSimulation ? - undefined : - - } - -
    -
    +const UnitTabsComponent = ({ inSimulation }) => ( +
    + +
    +
    + {inSimulation ? undefined : } + +
    +
    + {inSimulation ? undefined : } + +
    +
    + {inSimulation ? undefined : } + +
    +
    + {inSimulation ? undefined : } + +
    +
    ); export default UnitTabsComponent; diff --git a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js index 267001c6..6bcf4088 100644 --- a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js +++ b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const BackToRoomComponent = ({onClick}) => ( -
    - - Back to room -
    +const BackToRoomComponent = ({ onClick }) => ( +
    + + Back to room +
    ); export default BackToRoomComponent; diff --git a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js index b268bd72..f0bad0ed 100644 --- a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js +++ b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const DeleteRackComponent = ({onClick}) => ( -
    - - Delete this rack -
    +const DeleteRackComponent = ({ onClick }) => ( +
    + + Delete this rack +
    ); export default DeleteRackComponent; diff --git a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index 08665072..d86f9fee 100644 --- a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,20 +1,19 @@ import React from "react"; -const EmptySlotComponent = ({position, onAdd, inSimulation}) => ( -
  • - - {position} - - {inSimulation ? - - Empty Slot - : - - } -
    • +const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( +
  • + + {position} + + {inSimulation ? ( + Empty Slot + ) : ( + + )} +
    • ); export default EmptySlotComponent; diff --git a/src/components/app/sidebars/topology/rack/MachineComponent.js b/src/components/app/sidebars/topology/rack/MachineComponent.js index 0ba4503d..2521f4a2 100644 --- a/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,65 +1,78 @@ import React from "react"; import Shapes from "../../../../../shapes"; -import {convertLoadToSimulationColor} from "../../../../../util/simulation-load"; +import { convertLoadToSimulationColor } from "../../../../../util/simulation-load"; -const UnitIcon = ({id, type}) => ( -
    - {"Machine -
    +const UnitIcon = ({ id, type }) => ( +
    + {"Machine +
    ); -const MachineComponent = ({position, machine, inSimulation, machineLoad, onClick}) => { - let color = "white"; - if (inSimulation && machineLoad >= 0) { - color = convertLoadToSimulationColor(machineLoad); - } - const hasNoUnits = machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length - + machine.storageIds.length === 0; +const MachineComponent = ({ + position, + machine, + inSimulation, + machineLoad, + onClick +}) => { + let color = "white"; + if (inSimulation && machineLoad >= 0) { + color = convertLoadToSimulationColor(machineLoad); + } + const hasNoUnits = + machine.cpuIds.length + + machine.gpuIds.length + + machine.memoryIds.length + + machine.storageIds.length === + 0; - return ( -
  • - - {position} - -
    - {machine.cpuIds.length > 0 ? - : - undefined - } - {machine.gpuIds.length > 0 ? - : - undefined - } - {machine.memoryIds.length > 0 ? - : - undefined - } - {machine.storageIds.length > 0 ? - : - undefined - } - {hasNoUnits ? - - Machine with no units - : - undefined - } -
    -
    • - ); + return ( +
  • + {position} +
    + {machine.cpuIds.length > 0 ? ( + + ) : ( + undefined + )} + {machine.gpuIds.length > 0 ? ( + + ) : ( + undefined + )} + {machine.memoryIds.length > 0 ? ( + + ) : ( + undefined + )} + {machine.storageIds.length > 0 ? ( + + ) : ( + undefined + )} + {hasNoUnits ? ( + + Machine with no units + + ) : ( + undefined + )} +
    +
    • + ); }; MachineComponent.propTypes = { - machine: Shapes.Machine + machine: Shapes.Machine }; export default MachineComponent; diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.js b/src/components/app/sidebars/topology/rack/MachineListComponent.js index fcb90d66..d5521557 100644 --- a/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -3,18 +3,24 @@ import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/ import MachineContainer from "../../../../../containers/app/sidebars/topology/rack/MachineContainer"; import "./MachineListComponent.css"; -const MachineListComponent = ({machineIds}) => { - return ( -
      - {machineIds.map((machineId, index) => { - if (machineId === null) { - return ; - } else { - return ; - } - })} -
    - ); +const MachineListComponent = ({ machineIds }) => { + return ( +
      + {machineIds.map((machineId, index) => { + if (machineId === null) { + return ; + } else { + return ( + + ); + } + })} +
    + ); }; export default MachineListComponent; diff --git a/src/components/app/sidebars/topology/rack/RackNameComponent.js b/src/components/app/sidebars/topology/rack/RackNameComponent.js index ee8d194b..5e095823 100644 --- a/src/components/app/sidebars/topology/rack/RackNameComponent.js +++ b/src/components/app/sidebars/topology/rack/RackNameComponent.js @@ -1,8 +1,8 @@ import React from "react"; import NameComponent from "../NameComponent"; -const RackNameComponent = ({rackName, onEdit}) => ( - +const RackNameComponent = ({ rackName, onEdit }) => ( + ); export default RackNameComponent; diff --git a/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index f563a52f..f832b9b9 100644 --- a/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -7,27 +7,28 @@ import MachineListContainer from "../../../../../containers/app/sidebars/topolog import RackNameContainer from "../../../../../containers/app/sidebars/topology/rack/RackNameContainer"; import "./RackSidebarComponent.css"; -const RackSidebarComponent = ({inSimulation, rackId}) => { - return ( -
    -
    - - - {inSimulation ? -
    - - -
    : -
    - -
    - } -
    -
    - -
    -
    - ); +const RackSidebarComponent = ({ inSimulation, rackId }) => { + return ( +
    +
    + + + {inSimulation ? ( +
    + + +
    + ) : ( +
    + +
    + )} +
    +
    + +
    +
    + ); }; export default RackSidebarComponent; diff --git a/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js index 81384ba5..0409dbdd 100644 --- a/src/components/app/sidebars/topology/room/BackToBuildingComponent.js +++ b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const BackToBuildingComponent = ({onClick}) => ( -
    - - Back to building -
    +const BackToBuildingComponent = ({ onClick }) => ( +
    + + Back to building +
    ); export default BackToBuildingComponent; diff --git a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js index 3f41eac0..5df484b5 100644 --- a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js +++ b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js @@ -1,10 +1,10 @@ import React from "react"; -const DeleteRoomComponent = ({onClick}) => ( -
    - - Delete this room -
    +const DeleteRoomComponent = ({ onClick }) => ( +
    + + Delete this room +
    ); export default DeleteRoomComponent; diff --git a/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/src/components/app/sidebars/topology/room/RackConstructionComponent.js index 9bfe28ce..0982e403 100644 --- a/src/components/app/sidebars/topology/room/RackConstructionComponent.js +++ b/src/components/app/sidebars/topology/room/RackConstructionComponent.js @@ -1,21 +1,25 @@ import React from "react"; -const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) => { - if (inRackConstructionMode) { - return ( -
    - - Stop rack construction -
    - ); - } - +const RackConstructionComponent = ({ + inRackConstructionMode, + onStart, + onStop +}) => { + if (inRackConstructionMode) { return ( -
    - - Start rack construction -
    +
    + + Stop rack construction +
    ); + } + + return ( +
    + + Start rack construction +
    + ); }; export default RackConstructionComponent; diff --git a/src/components/app/sidebars/topology/room/RoomNameComponent.js b/src/components/app/sidebars/topology/room/RoomNameComponent.js index 4d3e41cc..11b88edd 100644 --- a/src/components/app/sidebars/topology/room/RoomNameComponent.js +++ b/src/components/app/sidebars/topology/room/RoomNameComponent.js @@ -1,8 +1,8 @@ import React from "react"; import NameComponent from "../NameComponent"; -const RoomNameComponent = ({roomName, onEdit}) => ( - +const RoomNameComponent = ({ roomName, onEdit }) => ( + ); export default RoomNameComponent; diff --git a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js index 53857408..727c3f43 100644 --- a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -7,29 +7,30 @@ import RackConstructionContainer from "../../../../../containers/app/sidebars/to import RoomNameContainer from "../../../../../containers/app/sidebars/topology/room/RoomNameContainer"; import RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer"; -const RoomSidebarComponent = ({roomId, roomType, inSimulation}) => { - let allowedObjects; - if (!inSimulation && roomType === "SERVER") { - allowedObjects = ; - } +const RoomSidebarComponent = ({ roomId, roomType, inSimulation }) => { + let allowedObjects; + if (!inSimulation && roomType === "SERVER") { + allowedObjects = ; + } - return ( + return ( +
    + + + + {inSimulation ? (
    - - - - {inSimulation ? -
    - - -
    : -
    - {allowedObjects} - -
    - } + +
    - ); + ) : ( +
    + {allowedObjects} + +
    + )} +
    + ); }; export default RoomSidebarComponent; diff --git a/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/src/components/app/sidebars/topology/room/RoomTypeComponent.js index d42eefb6..46d91c2c 100644 --- a/src/components/app/sidebars/topology/room/RoomTypeComponent.js +++ b/src/components/app/sidebars/topology/room/RoomTypeComponent.js @@ -1,10 +1,8 @@ import React from "react"; -import {ROOM_TYPE_TO_NAME_MAP} from "../../../../../util/room-types"; +import { ROOM_TYPE_TO_NAME_MAP } from "../../../../../util/room-types"; -const RoomTypeComponent = ({roomType}) => ( -

    - {ROOM_TYPE_TO_NAME_MAP[roomType]} -

    +const RoomTypeComponent = ({ roomType }) => ( +

    {ROOM_TYPE_TO_NAME_MAP[roomType]}

    ); export default RoomTypeComponent; diff --git a/src/components/app/timeline/PlayButtonComponent.js b/src/components/app/timeline/PlayButtonComponent.js index 2b8e5328..1a9b0ced 100644 --- a/src/components/app/timeline/PlayButtonComponent.js +++ b/src/components/app/timeline/PlayButtonComponent.js @@ -1,20 +1,30 @@ import React from "react"; -const PlayButtonComponent = ({isPlaying, currentTick, lastSimulatedTick, onPlay, onPause}) => ( -
    { - if (isPlaying) { - onPause(); - } else { - if (currentTick !== lastSimulatedTick) { - onPlay(); - } +const PlayButtonComponent = ({ + isPlaying, + currentTick, + lastSimulatedTick, + onPlay, + onPause +}) => ( +
    { + if (isPlaying) { + onPause(); + } else { + if (currentTick !== lastSimulatedTick) { + onPlay(); } - }}> - {isPlaying ? - : - - } -
    + } + }} + > + {isPlaying ? ( + + ) : ( + + )} +
    ); export default PlayButtonComponent; diff --git a/src/components/app/timeline/TimelineComponent.js b/src/components/app/timeline/TimelineComponent.js index 950a25bd..0f88b8f4 100644 --- a/src/components/app/timeline/TimelineComponent.js +++ b/src/components/app/timeline/TimelineComponent.js @@ -4,34 +4,34 @@ import TimelineLabelsContainer from "../../../containers/app/timeline/TimelineLa import "./Timeline.css"; class TimelineComponent extends React.Component { - componentDidMount() { - this.interval = setInterval(() => { - if (!this.props.isPlaying) { - return; - } + componentDidMount() { + this.interval = setInterval(() => { + if (!this.props.isPlaying) { + return; + } - if (this.props.currentTick < this.props.lastSimulatedTick) { - this.props.incrementTick(); - } else { - this.props.pauseSimulation(); - } - }, 1000); - } + if (this.props.currentTick < this.props.lastSimulatedTick) { + this.props.incrementTick(); + } else { + this.props.pauseSimulation(); + } + }, 1000); + } - componentWillUnmount() { - clearInterval(this.interval); - } + componentWillUnmount() { + clearInterval(this.interval); + } - render() { - return ( -
    -
    - - -
    -
    - ); - } + render() { + return ( +
    +
    + + +
    +
    + ); + } } export default TimelineComponent; diff --git a/src/components/app/timeline/TimelineControlsComponent.js b/src/components/app/timeline/TimelineControlsComponent.js index 72fc4a60..f3d55154 100644 --- a/src/components/app/timeline/TimelineControlsComponent.js +++ b/src/components/app/timeline/TimelineControlsComponent.js @@ -1,39 +1,49 @@ import React from "react"; import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer"; -import {convertTickToPercentage} from "../../../util/timeline"; +import { convertTickToPercentage } from "../../../util/timeline"; class TimelineControlsComponent extends React.Component { - onTimelineClick(e) { - const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth; - const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1)); - this.props.goToTick(tick); - } + onTimelineClick(e) { + const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth; + const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1)); + this.props.goToTick(tick); + } - render() { - return ( -
    - -
    this.timeline = timeline} - onClick={this.onTimelineClick.bind(this)} - > -
    - {this.props.sectionTicks.map(sectionTick => ( -
    - ))} -
    -
    - ); - } + render() { + return ( +
    + +
    (this.timeline = timeline)} + onClick={this.onTimelineClick.bind(this)} + > +
    + {this.props.sectionTicks.map(sectionTick => ( +
    + ))} +
    +
    + ); + } } export default TimelineControlsComponent; diff --git a/src/components/app/timeline/TimelineLabelsComponent.js b/src/components/app/timeline/TimelineLabelsComponent.js index e795691f..6943a86f 100644 --- a/src/components/app/timeline/TimelineLabelsComponent.js +++ b/src/components/app/timeline/TimelineLabelsComponent.js @@ -1,11 +1,15 @@ import React from "react"; -import {convertSecondsToFormattedTime} from "../../../util/date-time"; +import { convertSecondsToFormattedTime } from "../../../util/date-time"; -const TimelineLabelsComponent = ({currentTick, lastSimulatedTick}) => ( -
    -
    {convertSecondsToFormattedTime(currentTick)}
    -
    {convertSecondsToFormattedTime(lastSimulatedTick)}
    +const TimelineLabelsComponent = ({ currentTick, lastSimulatedTick }) => ( +
    +
    + {convertSecondsToFormattedTime(currentTick)}
    +
    + {convertSecondsToFormattedTime(lastSimulatedTick)} +
    +
    ); export default TimelineLabelsComponent; diff --git a/src/components/experiments/ExperimentListComponent.js b/src/components/experiments/ExperimentListComponent.js index f315ebbf..28c06f29 100644 --- a/src/components/experiments/ExperimentListComponent.js +++ b/src/components/experiments/ExperimentListComponent.js @@ -2,37 +2,42 @@ import PropTypes from "prop-types"; import React from "react"; import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer"; -const ExperimentListComponent = ({experimentIds}) => { - return ( -
    - {experimentIds.length === 0 ? -
    - - No experiments here yet... Add some with the button below! -
    : - - - - - - - - - - - {experimentIds.map(experimentId => ( - - ))} - -
    NamePathTraceScheduler -
    - } +const ExperimentListComponent = ({ experimentIds }) => { + return ( +
    + {experimentIds.length === 0 ? ( +
    + + No experiments here yet... Add some with the button + below!
    - ); + ) : ( + + + + + + + + + + + {experimentIds.map(experimentId => ( + + ))} + +
    NamePathTraceScheduler +
    + )} +
    + ); }; ExperimentListComponent.propTypes = { - experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired, + experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired }; export default ExperimentListComponent; diff --git a/src/components/experiments/ExperimentRowComponent.js b/src/components/experiments/ExperimentRowComponent.js index eb9cbacf..e71c6a00 100644 --- a/src/components/experiments/ExperimentRowComponent.js +++ b/src/components/experiments/ExperimentRowComponent.js @@ -1,44 +1,40 @@ import PropTypes from "prop-types"; import React from "react"; -import {Link} from "react-router-dom"; +import { Link } from "react-router-dom"; import Shapes from "../../shapes/index"; -const ExperimentRowComponent = ({experiment, simulationId, onDelete}) => ( - - - {experiment.name} - - - {experiment.path.name ? experiment.path.name : "Path " + experiment.path.id} - - - {experiment.trace.name} - - - {experiment.scheduler.name} - - - - - -
    onDelete(experiment.id)} - > - -
    - - +const ExperimentRowComponent = ({ experiment, simulationId, onDelete }) => ( + + {experiment.name} + + {experiment.path.name + ? experiment.path.name + : "Path " + experiment.path.id} + + {experiment.trace.name} + {experiment.scheduler.name} + + + + +
    onDelete(experiment.id)} + > + +
    + + ); ExperimentRowComponent.propTypes = { - experiment: Shapes.Experiment.isRequired, - simulationId: PropTypes.number.isRequired, + experiment: Shapes.Experiment.isRequired, + simulationId: PropTypes.number.isRequired }; export default ExperimentRowComponent; diff --git a/src/components/experiments/NewExperimentButtonComponent.js b/src/components/experiments/NewExperimentButtonComponent.js index 559a7218..651172e3 100644 --- a/src/components/experiments/NewExperimentButtonComponent.js +++ b/src/components/experiments/NewExperimentButtonComponent.js @@ -1,17 +1,17 @@ -import PropTypes from 'prop-types'; -import React from 'react'; +import PropTypes from "prop-types"; +import React from "react"; -const NewExperimentButtonComponent = ({onClick}) => ( -
    -
    - - New Experiment -
    +const NewExperimentButtonComponent = ({ onClick }) => ( +
    +
    + + New Experiment
    +
    ); NewExperimentButtonComponent.propTypes = { - onClick: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired }; export default NewExperimentButtonComponent; diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js index fd65b31c..d957297a 100644 --- a/src/components/home/ContactSection.js +++ b/src/components/home/ContactSection.js @@ -5,48 +5,61 @@ import "./ContactSection.css"; import ContentSection from "./ContentSection"; const ContactSection = () => ( - -
    -
    - - - -
    - - -
    - opendc@atlarge-research.com - -
    -
    -
    -
    - TU Delft -
    -
    -
    -
    - A project by the   - - @Large Research Group - . -
    -
    -
    -
    - -
    - OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable. -
    - The OpenDC authors should in no way be liable in the event this happens (see our license). Sorry - for the inconvenience. -
    -
    - + +
    +
    + + + +
    + + +
    + opendc@atlarge-research.com + +
    +
    +
    +
    + TU Delft +
    +
    +
    +
    + A project by the   + + @Large Research Group + . +
    +
    +
    +
    + +
    + OpenDC is an experimental tool. Your data may get lost, overwritten, or + otherwise become unavailable. +
    + The OpenDC authors should in no way be liable in the event this happens + (see our{" "} + + + license + + ). Sorry for the inconvenience. +
    +
    + ); export default ContactSection; diff --git a/src/components/home/ContentSection.js b/src/components/home/ContentSection.js index 6b4cbca4..2e24ee10 100644 --- a/src/components/home/ContentSection.js +++ b/src/components/home/ContentSection.js @@ -3,17 +3,17 @@ import PropTypes from "prop-types"; import React from "react"; import "./ContentSection.css"; -const ContentSection = ({name, title, children}) => ( -
    -
    -

    {title}

    - {children} -
    +const ContentSection = ({ name, title, children }) => ( +
    +
    +

    {title}

    + {children}
    +
    ); ContentSection.propTypes = { - name: PropTypes.string.isRequired, + name: PropTypes.string.isRequired }; export default ContentSection; diff --git a/src/components/home/IntroSection.js b/src/components/home/IntroSection.js index 246786f2..59f5face 100644 --- a/src/components/home/IntroSection.js +++ b/src/components/home/IntroSection.js @@ -1,38 +1,40 @@ import React from "react"; const IntroSection = () => ( -
    -
    -
    -
    -

    The datacenter (DC) industry...

    -
      -
    • Is worth over $15 bn, and growing
      • -
    • Has many hard-to-grasp concepts
      • -
    • Needs to become accessible to many
      • -
    -
    - -
    -

    OpenDC provides...

    -
      -
    • Collaborative online DC modeling
      • -
    • Diverse and effective DC simulation
      • -
    • Exploratory DC performance feedback
      • -
    -
    -
    +
    +
    +
    +
    +

    The datacenter (DC) industry...

    +
      +
    • Is worth over $15 bn, and growing
      • +
    • Has many hard-to-grasp concepts
      • +
    • Needs to become accessible to many
      • +
    -
    + +
    +

    OpenDC provides...

    +
      +
    • Collaborative online DC modeling
      • +
    • Diverse and effective DC simulation
      • +
    • Exploratory DC performance feedback
      • +
    +
    +
    +
    + ); export default IntroSection; diff --git a/src/components/home/JumbotronHeader.js b/src/components/home/JumbotronHeader.js index ba504c18..8a5312b3 100644 --- a/src/components/home/JumbotronHeader.js +++ b/src/components/home/JumbotronHeader.js @@ -2,17 +2,19 @@ import React from "react"; import "./JumbotronHeader.css"; const JumbotronHeader = () => ( -
    -
    -
    -

    OpenDC

    -

    - Collaborative Datacenter Simulation and Exploration for Everybody -

    - OpenDC -
    -
    -
    +
    +
    +
    +

    + OpenDC +

    +

    + Collaborative Datacenter Simulation and Exploration for Everybody +

    + OpenDC +
    +
    +
    ); export default JumbotronHeader; diff --git a/src/components/home/ModelingSection.js b/src/components/home/ModelingSection.js index d3252b9b..17834b0b 100644 --- a/src/components/home/ModelingSection.js +++ b/src/components/home/ModelingSection.js @@ -2,18 +2,23 @@ import React from "react"; import ScreenshotSection from "./ScreenshotSection"; const ModelingSection = () => ( - -

    Collaboratively...

    -
      -
    • Model DC layout, and room locations and types
      • -
    • Place racks in rooms and nodes in racks
      • -
    • Add real-world CPU, GPU, memory, storage and network units to each node
      • -
    • Select from diverse scheduling policies
      • -
    -     + +

    Collaboratively...

    +
      +
    • Model DC layout, and room locations and types
      • +
    • Place racks in rooms and nodes in racks
      • +
    • + Add real-world CPU, GPU, memory, storage and network units to each node +
      • +
    • Select from diverse scheduling policies
      • +
    +     ); export default ModelingSection; diff --git a/src/components/home/ScreenshotSection.js b/src/components/home/ScreenshotSection.js index 74394dcb..42b8ac77 100644 --- a/src/components/home/ScreenshotSection.js +++ b/src/components/home/ScreenshotSection.js @@ -3,21 +3,30 @@ import React from "react"; import ContentSection from "./ContentSection"; import "./ScreenshotSection.css"; -const ScreenshotSection = ({name, title, imageUrl, caption, imageIsRight, children}) => ( - -
    -
    - {children} -
    -
    - {caption}/ -
    - {caption} -
    -
    -
    -     +const ScreenshotSection = ({ + name, + title, + imageUrl, + caption, + imageIsRight, + children +}) => ( + +
    +
    + {children} +
    +
    + {caption} +
    {caption}
    +
    +
    +     ); export default ScreenshotSection; diff --git a/src/components/home/SimulationSection.js b/src/components/home/SimulationSection.js index eb1f7787..3961e549 100644 --- a/src/components/home/SimulationSection.js +++ b/src/components/home/SimulationSection.js @@ -2,18 +2,24 @@ import React from "react"; import ScreenshotSection from "./ScreenshotSection"; const ModelingSection = () => ( - -

    Working with OpenDC:

    -
      -
    • Seamlessly switch between construction and simulation modes
      • -
    • Choose one of several predefined workloads (Big Data, Bag of Tasks, Hadoop, etc.)
      • -
    • Play, pause, and skip around the informative simulation timeline
      • -
    • Visualize and demo live
      • -
    -     + +

    Working with OpenDC:

    +
      +
    • Seamlessly switch between construction and simulation modes
      • +
    • + Choose one of several predefined workloads (Big Data, Bag of Tasks, + Hadoop, etc.) +
      • +
    • Play, pause, and skip around the informative simulation timeline
      • +
    • Visualize and demo live
      • +
    +     ); export default ModelingSection; diff --git a/src/components/home/StakeholderSection.js b/src/components/home/StakeholderSection.js index ddfe4f7c..6d25fd86 100644 --- a/src/components/home/StakeholderSection.js +++ b/src/components/home/StakeholderSection.js @@ -1,27 +1,42 @@ import React from "react"; import ContentSection from "./ContentSection"; -const Stakeholder = ({name, title, subtitle}) => ( -
    - {title}/ -
    -

    {title}

    -

    {subtitle}

    -
    +const Stakeholder = ({ name, title, subtitle }) => ( +
    + {title} +
    +

    {title}

    +

    {subtitle}

    +
    ); const StakeholderSection = () => ( - -
    - - - - - -
    -     + +
    + + + + + +
    +     ); export default StakeholderSection; diff --git a/src/components/home/TeamSection.js b/src/components/home/TeamSection.js index f9ca3105..f29003f7 100644 --- a/src/components/home/TeamSection.js +++ b/src/components/home/TeamSection.js @@ -1,43 +1,57 @@ import React from "react"; import ContentSection from "./ContentSection"; -const TeamMember = ({photoId, name, description}) => ( -
    - {name}/ -
    -

    {name}

    -
    - {description} -
    -
    +const TeamMember = ({ photoId, name, description }) => ( +
    + {name} +
    +

    {name}

    +
    {description}
    +
    ); const TeamSection = () => ( - -
    - - - - -
    -
    - See - {" "} - - atlarge.science/opendc - - {" "} - for the full team! -
    -     + +
    + + + + +
    +
    + See{" "} + + atlarge.science/opendc + {" "} + for the full team! +
    +     ); export default TeamSection; diff --git a/src/components/home/TechnologiesSection.js b/src/components/home/TechnologiesSection.js index 5e2ec2fc..fdcfc522 100644 --- a/src/components/home/TechnologiesSection.js +++ b/src/components/home/TechnologiesSection.js @@ -3,46 +3,40 @@ import FontAwesome from "react-fontawesome"; import ContentSection from "./ContentSection"; const TechnologiesSection = () => ( - -
      -
    • - - - Browser - - - JavaScript, React, Redux, Konva - -
      • -
    • - - - Server - - - Python, Flask, FlaskSocketIO, OpenAPI - -
      • -
    • - - - Database - - - MariaDB - -
      • -
    • - - - Simulator - - - Kotlin - -
      • -
    -     + +
      +
    • + + + Browser + + JavaScript, React, Redux, Konva +
      • +
    • + + + Server + + + Python, Flask, FlaskSocketIO, OpenAPI + +
      • +
    • + + + Database + + MariaDB +
      • +
    • + + + Simulator + + Kotlin +
      • +
    +     ); export default TechnologiesSection; diff --git a/src/components/modals/ConfirmationModal.js b/src/components/modals/ConfirmationModal.js index 4543cfd4..abdce5ac 100644 --- a/src/components/modals/ConfirmationModal.js +++ b/src/components/modals/ConfirmationModal.js @@ -3,33 +3,35 @@ import React from "react"; import Modal from "./Modal"; class ConfirmationModal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - message: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - callback: PropTypes.func.isRequired, - }; + static propTypes = { + title: PropTypes.string.isRequired, + message: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + callback: PropTypes.func.isRequired + }; - onConfirm() { - this.props.callback(true); - } + onConfirm() { + this.props.callback(true); + } - onCancel() { - this.props.callback(false); - } + onCancel() { + this.props.callback(false); + } - render() { - return ( - - {this.props.message} - - ); - } + render() { + return ( + + {this.props.message} + + ); + } } export default ConfirmationModal; diff --git a/src/components/modals/Modal.js b/src/components/modals/Modal.js index 1de17455..367cf2da 100644 --- a/src/components/modals/Modal.js +++ b/src/components/modals/Modal.js @@ -4,116 +4,129 @@ import React from "react"; import jQuery from "../../util/jquery"; class Modal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, - submitButtonType: PropTypes.string, - submitButtonText: PropTypes.string, - }; - static defaultProps = { - submitButtonType: "primary", - submitButtonText: "Save", - }; - static idCounter = 0; + static propTypes = { + title: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, + submitButtonType: PropTypes.string, + submitButtonText: PropTypes.string + }; + static defaultProps = { + submitButtonType: "primary", + submitButtonText: "Save" + }; + static idCounter = 0; - /** - * Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate - * close triggers). - */ - visible = false; + // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate + // 'close' triggers) + visible = false; - constructor() { - super(); - this.id = "modal-" + Modal.idCounter++; - } - - componentDidMount() { - this.visible = this.props.show; - this.openOrCloseModal(); - - // Trigger auto-focus - jQuery("#" + this.id) - .on("shown.bs.modal", function () { - jQuery(this).find("input").first().focus(); - }) - .on("hide.bs.modal", () => { - if (this.visible) { - this.props.onCancel(); - } - }) - .on("keydown", e => { - e.stopPropagation(); - }); - } + constructor() { + super(); + this.id = "modal-" + Modal.idCounter++; + } - componentDidUpdate() { - this.visible = this.props.show; - this.openOrCloseModal(); - } + componentDidMount() { + this.visible = this.props.show; + this.openOrCloseModal(); - onSubmit() { + // Trigger auto-focus + jQuery("#" + this.id) + .on("shown.bs.modal", function() { + jQuery(this) + .find("input") + .first() + .focus(); + }) + .on("hide.bs.modal", () => { if (this.visible) { - this.props.onSubmit(); - this.visible = false; - this.closeModal(); + this.props.onCancel(); } - } + }) + .on("keydown", e => { + e.stopPropagation(); + }); + } - onCancel() { - if (this.visible) { - this.props.onCancel(); - this.visible = false; - this.closeModal(); - } - } + componentDidUpdate() { + this.visible = this.props.show; + this.openOrCloseModal(); + } - openModal() { - jQuery("#" + this.id).modal("show"); + onSubmit() { + if (this.visible) { + this.props.onSubmit(); + this.visible = false; + this.closeModal(); } + } - closeModal() { - jQuery("#" + this.id).modal("hide"); + onCancel() { + if (this.visible) { + this.props.onCancel(); + this.visible = false; + this.closeModal(); } + } - openOrCloseModal() { - if (this.visible) { - this.openModal(); - } else { - this.closeModal(); - } + openModal() { + jQuery("#" + this.id).modal("show"); + } + + closeModal() { + jQuery("#" + this.id).modal("hide"); + } + + openOrCloseModal() { + if (this.visible) { + this.openModal(); + } else { + this.closeModal(); } + } - render() { - return ( -