From 9257d89ec2e22b65ffecc7dc7cf67b7a74c34d60 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Wed, 4 Oct 2017 22:09:20 +0200 Subject: Add 'prettier' JS plugin for code reformatting This happens before every commit, to guarantee code format style uniformity. --- package.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/package.json b/package.json index 00e56349..6254575b 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,13 @@ "dependencies": { "approximate-number": "^2.0.0", "classnames": "^2.2.5", + "husky": "^0.14.3", "isomorphic-fetch": "^2.2.1", "konva": "^1.6.8", + "lint-staged": "^4.2.3", "node-sass-chokidar": "^0.0.3", "npm-run-all": "^4.1.1", + "prettier": "^1.7.4", "prop-types": "^15.5.10", "react": "^15.6.1", "react-document-title": "^2.0.3", @@ -45,7 +48,14 @@ "svgsaver": "^0.9.0", "victory": "^0.22.2" }, + "lint-staged": { + "src/**/*.{js,jsx,json,sass}": [ + "prettier --single-quote --write", + "git add" + ] + }, "scripts": { + "precommit": "lint-staged", "build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", "start-js": "react-scripts start", -- cgit v1.2.3 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 --- package.json | 4 +- src/actions/auth.js | 22 +- src/actions/experiments.js | 37 +- src/actions/interaction-level.js | 66 +-- src/actions/map.js | 109 ++-- src/actions/modals/experiments.js | 12 +- src/actions/modals/profile.js | 12 +- src/actions/modals/simulations.js | 12 +- src/actions/modals/topology.js | 60 +- src/actions/objects.js | 63 +- src/actions/profile.js | 3 - src/actions/simulation/load-metric.js | 8 +- src/actions/simulation/playback.js | 16 +- src/actions/simulation/tick.js | 67 ++- src/actions/simulations.js | 56 +- src/actions/states.js | 10 +- src/actions/topology/building.js | 113 ++-- src/actions/topology/machine.js | 26 +- src/actions/topology/rack.js | 22 +- src/actions/topology/room.js | 52 +- src/actions/users.js | 52 +- src/api/index.js | 18 +- src/api/routes/datacenters.js | 34 +- src/api/routes/experiments.js | 20 +- src/api/routes/jobs.js | 4 +- src/api/routes/paths.js | 36 +- src/api/routes/room-types.js | 6 +- src/api/routes/rooms.js | 62 +- src/api/routes/schedulers.js | 4 +- src/api/routes/sections.js | 4 +- src/api/routes/simulations.js | 90 +-- src/api/routes/specifications.js | 30 +- src/api/routes/tiles.js | 160 ++--- src/api/routes/token-signin.js | 12 +- src/api/routes/traces.js | 6 +- src/api/routes/users.js | 104 ++-- src/api/routes/util.js | 56 +- src/api/socket.js | 60 +- src/auth/index.js | 74 +-- 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 +- src/containers/app/map/DatacenterContainer.js | 20 +- src/containers/app/map/GrayContainer.js | 15 +- src/containers/app/map/MapStage.js | 36 +- src/containers/app/map/RackContainer.js | 36 +- src/containers/app/map/RackEnergyFillContainer.js | 52 +- src/containers/app/map/RackSpaceFillContainer.js | 18 +- src/containers/app/map/RoomContainer.js | 25 +- src/containers/app/map/TileContainer.js | 57 +- src/containers/app/map/WallContainer.js | 14 +- .../app/map/controls/ScaleIndicatorContainer.js | 14 +- .../app/map/controls/ZoomControlContainer.js | 23 +- src/containers/app/map/layers/MapLayer.js | 14 +- src/containers/app/map/layers/ObjectHoverLayer.js | 50 +- src/containers/app/map/layers/RoomHoverLayer.js | 79 +-- .../app/sidebars/elements/LoadBarContainer.js | 39 +- .../app/sidebars/elements/LoadChartContainer.js | 38 +- .../simulation/ExperimentMetadataContainer.js | 49 +- .../app/sidebars/simulation/LoadMetricContainer.js | 12 +- .../app/sidebars/simulation/TaskContainer.js | 31 +- .../app/sidebars/simulation/TraceContainer.js | 29 +- .../app/sidebars/topology/TopologySidebar.js | 12 +- .../topology/building/BuildingSidebarContainer.js | 14 +- .../building/NewRoomConstructionContainer.js | 31 +- .../topology/machine/BackToRackContainer.js | 17 +- .../topology/machine/DeleteMachineContainer.js | 17 +- .../topology/machine/MachineNameContainer.js | 12 +- .../topology/machine/MachineSidebarContainer.js | 20 +- .../sidebars/topology/machine/UnitAddContainer.js | 23 +- .../app/sidebars/topology/machine/UnitContainer.js | 25 +- .../sidebars/topology/machine/UnitListContainer.js | 20 +- .../sidebars/topology/machine/UnitTabsContainer.js | 12 +- .../sidebars/topology/rack/BackToRoomContainer.js | 17 +- .../sidebars/topology/rack/DeleteRackContainer.js | 17 +- .../sidebars/topology/rack/EmptySlotContainer.js | 23 +- .../app/sidebars/topology/rack/MachineContainer.js | 49 +- .../sidebars/topology/rack/MachineListContainer.js | 15 +- .../sidebars/topology/rack/RackNameContainer.js | 26 +- .../sidebars/topology/rack/RackSidebarContainer.js | 14 +- .../topology/room/BackToBuildingContainer.js | 17 +- .../sidebars/topology/room/DeleteRoomContainer.js | 17 +- .../topology/room/RackConstructionContainer.js | 28 +- .../sidebars/topology/room/RoomNameContainer.js | 23 +- .../sidebars/topology/room/RoomSidebarContainer.js | 16 +- .../sidebars/topology/room/RoomTypeContainer.js | 12 +- src/containers/app/timeline/PlayButtonContainer.js | 32 +- src/containers/app/timeline/TimelineContainer.js | 54 +- .../app/timeline/TimelineControlsContainer.js | 46 +- .../app/timeline/TimelineLabelsContainer.js | 16 +- src/containers/auth/Login.js | 83 ++- src/containers/auth/Logout.js | 15 +- src/containers/auth/ProfileName.js | 14 +- .../experiments/ExperimentListContainer.js | 34 +- .../experiments/ExperimentRowContainer.js | 36 +- .../experiments/NewExperimentButtonContainer.js | 17 +- src/containers/modals/DeleteMachineModal.js | 47 +- src/containers/modals/DeleteProfileModal.js | 47 +- src/containers/modals/DeleteRackModal.js | 47 +- src/containers/modals/DeleteRoomModal.js | 47 +- src/containers/modals/EditRackNameModal.js | 57 +- src/containers/modals/EditRoomNameModal.js | 54 +- src/containers/modals/NewExperimentModal.js | 55 +- src/containers/modals/NewSimulationModal.js | 46 +- src/containers/simulations/FilterLink.js | 21 +- .../simulations/NewSimulationButtonContainer.js | 17 +- src/containers/simulations/SimulationActions.js | 25 +- .../simulations/VisibleSimulationAuthList.js | 50 +- src/index.js | 20 +- src/pages/App.js | 168 +++--- src/pages/Experiments.js | 97 +-- src/pages/Home.js | 80 +-- src/pages/NotFound.js | 14 +- src/pages/Profile.js | 60 +- src/pages/Simulations.js | 60 +- src/reducers/auth.js | 18 +- src/reducers/construction-mode.js | 57 +- src/reducers/current-ids.js | 42 +- src/reducers/index.js | 58 +- src/reducers/interaction-level.js | 110 ++-- src/reducers/map.js | 54 +- src/reducers/modals.js | 99 ++-- src/reducers/objects.js | 144 +++-- src/reducers/simulation-list.js | 49 +- src/reducers/simulation-mode.js | 90 +-- src/reducers/states.js | 52 +- src/registerServiceWorker.js | 154 ++--- src/routes/index.js | 76 ++- src/sagas/experiments.js | 270 +++++---- src/sagas/index.js | 148 +++-- src/sagas/objects.js | 198 +++---- src/sagas/profile.js | 18 +- src/sagas/simulations.js | 71 ++- src/sagas/topology.js | 647 ++++++++++++--------- src/sagas/users.js | 74 +-- src/shapes/index.js | 236 ++++---- src/shortcuts/keymap.js | 12 +- src/store/configure-store.js | 41 +- src/store/middlewares/dummy-middleware.js | 2 +- src/store/middlewares/viewport-adjustment.js | 119 ++-- src/util/authorizations.js | 12 +- src/util/date-time.js | 121 ++-- src/util/date-time.test.js | 56 +- src/util/room-types.js | 10 +- src/util/simulation-load.js | 51 +- src/util/tile-calculations.js | 412 ++++++------- src/util/timeline.js | 22 +- 237 files changed, 6397 insertions(+), 5651 deletions(-) diff --git a/package.json b/package.json index 6254575b..c6c0994a 100644 --- a/package.json +++ b/package.json @@ -49,8 +49,8 @@ "victory": "^0.22.2" }, "lint-staged": { - "src/**/*.{js,jsx,json,sass}": [ - "prettier --single-quote --write", + "src/**/*.{js,jsx,json}": [ + "prettier --write", "git add" ] }, diff --git a/src/actions/auth.js b/src/actions/auth.js index 2ca6a986..45e2eb35 100644 --- a/src/actions/auth.js +++ b/src/actions/auth.js @@ -3,21 +3,21 @@ export const LOG_IN_SUCCEEDED = "LOG_IN_SUCCEEDED"; export const LOG_OUT = "LOG_OUT"; export function logIn(payload) { - return { - type: LOG_IN, - payload - }; + return { + type: LOG_IN, + payload + }; } export function logInSucceeded(payload) { - return { - type: LOG_IN_SUCCEEDED, - payload - }; + return { + type: LOG_IN_SUCCEEDED, + payload + }; } export function logOut() { - return { - type: LOG_OUT - }; + return { + type: LOG_OUT + }; } diff --git a/src/actions/experiments.js b/src/actions/experiments.js index c64df019..b5709981 100644 --- a/src/actions/experiments.js +++ b/src/actions/experiments.js @@ -1,33 +1,34 @@ -export const FETCH_EXPERIMENTS_OF_SIMULATION = "FETCH_EXPERIMENTS_OF_SIMULATION"; +export const FETCH_EXPERIMENTS_OF_SIMULATION = + "FETCH_EXPERIMENTS_OF_SIMULATION"; export const ADD_EXPERIMENT = "ADD_EXPERIMENT"; export const DELETE_EXPERIMENT = "DELETE_EXPERIMENT"; export const OPEN_EXPERIMENT_SUCCEEDED = "OPEN_EXPERIMENT_SUCCEEDED"; export function fetchExperimentsOfSimulation(simulationId) { - return { - type: FETCH_EXPERIMENTS_OF_SIMULATION, - simulationId - }; + return { + type: FETCH_EXPERIMENTS_OF_SIMULATION, + simulationId + }; } export function addExperiment(experiment) { - return { - type: ADD_EXPERIMENT, - experiment - }; + return { + type: ADD_EXPERIMENT, + experiment + }; } export function deleteExperiment(id) { - return { - type: DELETE_EXPERIMENT, - id - }; + return { + type: DELETE_EXPERIMENT, + id + }; } export function openExperimentSucceeded(simulationId, experimentId) { - return { - type: OPEN_EXPERIMENT_SUCCEEDED, - simulationId, - experimentId - } + return { + type: OPEN_EXPERIMENT_SUCCEEDED, + simulationId, + experimentId + }; } diff --git a/src/actions/interaction-level.js b/src/actions/interaction-level.js index 2003f45e..31120146 100644 --- a/src/actions/interaction-level.js +++ b/src/actions/interaction-level.js @@ -4,47 +4,47 @@ export const GO_FROM_RACK_TO_MACHINE = "GO_FROM_RACK_TO_MACHINE"; export const GO_DOWN_ONE_INTERACTION_LEVEL = "GO_DOWN_ONE_INTERACTION_LEVEL"; export function goFromBuildingToRoom(roomId) { - return (dispatch, getState) => { - const {interactionLevel} = getState(); - if (interactionLevel.mode !== "BUILDING") { - return; - } + return (dispatch, getState) => { + const { interactionLevel } = getState(); + if (interactionLevel.mode !== "BUILDING") { + return; + } - dispatch({ - type: GO_FROM_BUILDING_TO_ROOM, - roomId - }); - }; + dispatch({ + type: GO_FROM_BUILDING_TO_ROOM, + roomId + }); + }; } export function goFromRoomToRack(tileId) { - return (dispatch, getState) => { - const {interactionLevel} = getState(); - if (interactionLevel.mode !== "ROOM") { - return; - } - dispatch({ - type: GO_FROM_ROOM_TO_RACK, - tileId - }); - }; + return (dispatch, getState) => { + const { interactionLevel } = getState(); + if (interactionLevel.mode !== "ROOM") { + return; + } + dispatch({ + type: GO_FROM_ROOM_TO_RACK, + tileId + }); + }; } export function goFromRackToMachine(position) { - return (dispatch, getState) => { - const {interactionLevel} = getState(); - if (interactionLevel.mode !== "RACK") { - return; - } - dispatch({ - type: GO_FROM_RACK_TO_MACHINE, - position - }); - }; + return (dispatch, getState) => { + const { interactionLevel } = getState(); + if (interactionLevel.mode !== "RACK") { + return; + } + dispatch({ + type: GO_FROM_RACK_TO_MACHINE, + position + }); + }; } export function goDownOneInteractionLevel() { - return { - type: GO_DOWN_ONE_INTERACTION_LEVEL - }; + return { + type: GO_DOWN_ONE_INTERACTION_LEVEL + }; } diff --git a/src/actions/map.js b/src/actions/map.js index 47d4714d..82546c00 100644 --- a/src/actions/map.js +++ b/src/actions/map.js @@ -1,8 +1,8 @@ import { - MAP_MAX_SCALE, - MAP_MIN_SCALE, - MAP_SCALE_PER_EVENT, - MAP_SIZE_IN_PIXELS + MAP_MAX_SCALE, + MAP_MIN_SCALE, + MAP_SCALE_PER_EVENT, + MAP_SIZE_IN_PIXELS } from "../components/app/map/MapConstants"; export const SET_MAP_POSITION = "SET_MAP_POSITION"; @@ -10,67 +10,84 @@ export const SET_MAP_DIMENSIONS = "SET_MAP_DIMENSIONS"; export const SET_MAP_SCALE = "SET_MAP_SCALE"; export function setMapPosition(x, y) { - return { - type: SET_MAP_POSITION, - x, - y - }; + return { + type: SET_MAP_POSITION, + x, + y + }; } export function setMapDimensions(width, height) { - return { - type: SET_MAP_DIMENSIONS, - width, - height - }; + return { + type: SET_MAP_DIMENSIONS, + width, + height + }; } export function setMapScale(scale) { - return { - type: SET_MAP_SCALE, - scale - }; + return { + type: SET_MAP_SCALE, + scale + }; } export function zoomInOnCenter(zoomIn) { - return (dispatch, getState) => { - const state = getState(); + return (dispatch, getState) => { + const state = getState(); - dispatch(zoomInOnPosition(zoomIn, state.map.dimensions.width / 2, state.map.dimensions.height / 2)); - } + dispatch( + zoomInOnPosition( + zoomIn, + state.map.dimensions.width / 2, + state.map.dimensions.height / 2 + ) + ); + }; } export function zoomInOnPosition(zoomIn, x, y) { - return (dispatch, getState) => { - const state = getState(); + return (dispatch, getState) => { + const state = getState(); - const centerPoint = { - x: x / state.map.scale - state.map.position.x / state.map.scale, - y: y / state.map.scale - state.map.position.y / state.map.scale, - }; - const newScale = zoomIn ? state.map.scale * MAP_SCALE_PER_EVENT : state.map.scale / MAP_SCALE_PER_EVENT; - const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE); + const centerPoint = { + x: x / state.map.scale - state.map.position.x / state.map.scale, + y: y / state.map.scale - state.map.position.y / state.map.scale + }; + const newScale = zoomIn + ? state.map.scale * MAP_SCALE_PER_EVENT + : state.map.scale / MAP_SCALE_PER_EVENT; + const boundedScale = Math.min( + Math.max(MAP_MIN_SCALE, newScale), + MAP_MAX_SCALE + ); - const newX = -(centerPoint.x - x / boundedScale) * boundedScale; - const newY = -(centerPoint.y - y / boundedScale) * boundedScale; + const newX = -(centerPoint.x - x / boundedScale) * boundedScale; + const newY = -(centerPoint.y - y / boundedScale) * boundedScale; - dispatch(setMapPositionWithBoundsCheck(newX, newY)); - dispatch(setMapScale(boundedScale)); - } + dispatch(setMapPositionWithBoundsCheck(newX, newY)); + dispatch(setMapScale(boundedScale)); + }; } export function setMapPositionWithBoundsCheck(x, y) { - return (dispatch, getState) => { - const state = getState(); + return (dispatch, getState) => { + const state = getState(); - const scaledMapSize = MAP_SIZE_IN_PIXELS * state.map.scale; - const updatedX = x > 0 ? 0 : - (x < -scaledMapSize + state.map.dimensions.width - ? -scaledMapSize + state.map.dimensions.width : x); - const updatedY = y > 0 ? 0 : - (y < -scaledMapSize + state.map.dimensions.height - ? -scaledMapSize + state.map.dimensions.height : y); + const scaledMapSize = MAP_SIZE_IN_PIXELS * state.map.scale; + const updatedX = + x > 0 + ? 0 + : x < -scaledMapSize + state.map.dimensions.width + ? -scaledMapSize + state.map.dimensions.width + : x; + const updatedY = + y > 0 + ? 0 + : y < -scaledMapSize + state.map.dimensions.height + ? -scaledMapSize + state.map.dimensions.height + : y; - dispatch(setMapPosition(updatedX, updatedY)); - } + dispatch(setMapPosition(updatedX, updatedY)); + }; } diff --git a/src/actions/modals/experiments.js b/src/actions/modals/experiments.js index 43a53a3a..df939fa5 100644 --- a/src/actions/modals/experiments.js +++ b/src/actions/modals/experiments.js @@ -2,13 +2,13 @@ export const OPEN_NEW_EXPERIMENT_MODAL = "OPEN_NEW_EXPERIMENT_MODAL"; export const CLOSE_NEW_EXPERIMENT_MODAL = "CLOSE_EXPERIMENT_MODAL"; export function openNewExperimentModal() { - return { - type: OPEN_NEW_EXPERIMENT_MODAL - }; + return { + type: OPEN_NEW_EXPERIMENT_MODAL + }; } export function closeNewExperimentModal() { - return { - type: CLOSE_NEW_EXPERIMENT_MODAL - }; + return { + type: CLOSE_NEW_EXPERIMENT_MODAL + }; } diff --git a/src/actions/modals/profile.js b/src/actions/modals/profile.js index 421e7602..ee52610c 100644 --- a/src/actions/modals/profile.js +++ b/src/actions/modals/profile.js @@ -2,13 +2,13 @@ export const OPEN_DELETE_PROFILE_MODAL = "OPEN_DELETE_PROFILE_MODAL"; export const CLOSE_DELETE_PROFILE_MODAL = "CLOSE_DELETE_PROFILE_MODAL"; export function openDeleteProfileModal() { - return { - type: OPEN_DELETE_PROFILE_MODAL - }; + return { + type: OPEN_DELETE_PROFILE_MODAL + }; } export function closeDeleteProfileModal() { - return { - type: CLOSE_DELETE_PROFILE_MODAL - }; + return { + type: CLOSE_DELETE_PROFILE_MODAL + }; } diff --git a/src/actions/modals/simulations.js b/src/actions/modals/simulations.js index 8281238d..b11d356c 100644 --- a/src/actions/modals/simulations.js +++ b/src/actions/modals/simulations.js @@ -2,13 +2,13 @@ export const OPEN_NEW_SIMULATION_MODAL = "OPEN_NEW_SIMULATION_MODAL"; export const CLOSE_NEW_SIMULATION_MODAL = "CLOSE_SIMULATION_MODAL"; export function openNewSimulationModal() { - return { - type: OPEN_NEW_SIMULATION_MODAL - }; + return { + type: OPEN_NEW_SIMULATION_MODAL + }; } export function closeNewSimulationModal() { - return { - type: CLOSE_NEW_SIMULATION_MODAL - }; + return { + type: CLOSE_NEW_SIMULATION_MODAL + }; } diff --git a/src/actions/modals/topology.js b/src/actions/modals/topology.js index b8e297e0..7ee16522 100644 --- a/src/actions/modals/topology.js +++ b/src/actions/modals/topology.js @@ -10,61 +10,61 @@ export const OPEN_DELETE_MACHINE_MODAL = "OPEN_DELETE_MACHINE_MODAL"; export const CLOSE_DELETE_MACHINE_MODAL = "CLOSE_DELETE_MACHINE_MODAL"; export function openEditRoomNameModal() { - return { - type: OPEN_EDIT_ROOM_NAME_MODAL - }; + return { + type: OPEN_EDIT_ROOM_NAME_MODAL + }; } export function closeEditRoomNameModal() { - return { - type: CLOSE_EDIT_ROOM_NAME_MODAL - }; + return { + type: CLOSE_EDIT_ROOM_NAME_MODAL + }; } export function openDeleteRoomModal() { - return { - type: OPEN_DELETE_ROOM_MODAL - }; + return { + type: OPEN_DELETE_ROOM_MODAL + }; } export function closeDeleteRoomModal() { - return { - type: CLOSE_DELETE_ROOM_MODAL - }; + return { + type: CLOSE_DELETE_ROOM_MODAL + }; } export function openEditRackNameModal() { - return { - type: OPEN_EDIT_RACK_NAME_MODAL - }; + return { + type: OPEN_EDIT_RACK_NAME_MODAL + }; } export function closeEditRackNameModal() { - return { - type: CLOSE_EDIT_RACK_NAME_MODAL - }; + return { + type: CLOSE_EDIT_RACK_NAME_MODAL + }; } export function openDeleteRackModal() { - return { - type: OPEN_DELETE_RACK_MODAL - }; + return { + type: OPEN_DELETE_RACK_MODAL + }; } export function closeDeleteRackModal() { - return { - type: CLOSE_DELETE_RACK_MODAL - }; + return { + type: CLOSE_DELETE_RACK_MODAL + }; } export function openDeleteMachineModal() { - return { - type: OPEN_DELETE_MACHINE_MODAL - }; + return { + type: OPEN_DELETE_MACHINE_MODAL + }; } export function closeDeleteMachineModal() { - return { - type: CLOSE_DELETE_MACHINE_MODAL - }; + return { + type: CLOSE_DELETE_MACHINE_MODAL + }; } diff --git a/src/actions/objects.js b/src/actions/objects.js index 60885471..80b56c0c 100644 --- a/src/actions/objects.js +++ b/src/actions/objects.js @@ -1,41 +1,48 @@ export const ADD_TO_STORE = "ADD_TO_STORE"; export const ADD_PROP_TO_STORE_OBJECT = "ADD_PROP_TO_STORE_OBJECT"; -export const ADD_ID_TO_STORE_OBJECT_LIST_PROP = "ADD_ID_TO_STORE_OBJECT_LIST_PROP"; -export const REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP = "REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP"; +export const ADD_ID_TO_STORE_OBJECT_LIST_PROP = + "ADD_ID_TO_STORE_OBJECT_LIST_PROP"; +export const REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP = + "REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP"; export function addToStore(objectType, object) { - return { - type: ADD_TO_STORE, - objectType, - object - }; + return { + type: ADD_TO_STORE, + objectType, + object + }; } export function addPropToStoreObject(objectType, objectId, propObject) { - return { - type: ADD_PROP_TO_STORE_OBJECT, - objectType, - objectId, - propObject - }; + return { + type: ADD_PROP_TO_STORE_OBJECT, + objectType, + objectId, + propObject + }; } export function addIdToStoreObjectListProp(objectType, objectId, propName, id) { - return { - type: ADD_ID_TO_STORE_OBJECT_LIST_PROP, - objectType, - objectId, - propName, - id - }; + return { + type: ADD_ID_TO_STORE_OBJECT_LIST_PROP, + objectType, + objectId, + propName, + id + }; } -export function removeIdFromStoreObjectListProp(objectType, objectId, propName, id) { - return { - type: REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP, - objectType, - objectId, - propName, - id - }; +export function removeIdFromStoreObjectListProp( + objectType, + objectId, + propName, + id +) { + return { + type: REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP, + objectType, + objectId, + propName, + id + }; } diff --git a/src/actions/profile.js b/src/actions/profile.js index b28b04f6..e69de29b 100644 --- a/src/actions/profile.js +++ b/src/actions/profile.js @@ -1,3 +0,0 @@ - - - diff --git a/src/actions/simulation/load-metric.js b/src/actions/simulation/load-metric.js index e426a7d2..c59e3596 100644 --- a/src/actions/simulation/load-metric.js +++ b/src/actions/simulation/load-metric.js @@ -1,8 +1,8 @@ export const CHANGE_LOAD_METRIC = "CHANGE_LOAD_METRIC"; export function changeLoadMetric(metric) { - return { - type: CHANGE_LOAD_METRIC, - metric - }; + return { + type: CHANGE_LOAD_METRIC, + metric + }; } diff --git a/src/actions/simulation/playback.js b/src/actions/simulation/playback.js index bddb9a0a..8e913914 100644 --- a/src/actions/simulation/playback.js +++ b/src/actions/simulation/playback.js @@ -1,15 +1,15 @@ export const SET_PLAYING = "SET_PLAYING"; export function playSimulation() { - return { - type: SET_PLAYING, - playing: true - } + return { + type: SET_PLAYING, + playing: true + }; } export function pauseSimulation() { - return { - type: SET_PLAYING, - playing: false - } + return { + type: SET_PLAYING, + playing: false + }; } diff --git a/src/actions/simulation/tick.js b/src/actions/simulation/tick.js index 06066662..a629b340 100644 --- a/src/actions/simulation/tick.js +++ b/src/actions/simulation/tick.js @@ -1,44 +1,49 @@ -import {getDatacenterIdOfTick} from "../../util/timeline"; -import {setCurrentDatacenter} from "../topology/building"; +import { getDatacenterIdOfTick } from "../../util/timeline"; +import { setCurrentDatacenter } from "../topology/building"; export const GO_TO_TICK = "GO_TO_TICK"; export const SET_LAST_SIMULATED_TICK = "SET_LAST_SIMULATED_TICK"; export function incrementTick() { - return (dispatch, getState) => { - const {currentTick} = getState(); - dispatch(goToTick(currentTick + 1)); - } + return (dispatch, getState) => { + const { currentTick } = getState(); + dispatch(goToTick(currentTick + 1)); + }; } export function goToTick(tick) { - return (dispatch, getState) => { - const state = getState(); - - let sections = []; - if (state.currentExperimentId !== -1) { - const sectionIds = state.objects.path[state.objects.experiment[state.currentExperimentId].pathId].sectionIds; - - if (sectionIds) { - sections = sectionIds.map(sectionId => state.objects.section[sectionId]); - } - } - - const newDatacenterId = getDatacenterIdOfTick(tick, sections); - if (state.currentDatacenterId !== newDatacenterId) { - dispatch(setCurrentDatacenter(newDatacenterId)); - } - - dispatch({ - type: GO_TO_TICK, - tick - }); + return (dispatch, getState) => { + const state = getState(); + + let sections = []; + if (state.currentExperimentId !== -1) { + const sectionIds = + state.objects.path[ + state.objects.experiment[state.currentExperimentId].pathId + ].sectionIds; + + if (sectionIds) { + sections = sectionIds.map( + sectionId => state.objects.section[sectionId] + ); + } + } + + const newDatacenterId = getDatacenterIdOfTick(tick, sections); + if (state.currentDatacenterId !== newDatacenterId) { + dispatch(setCurrentDatacenter(newDatacenterId)); } + + dispatch({ + type: GO_TO_TICK, + tick + }); + }; } export function setLastSimulatedTick(tick) { - return { - type: SET_LAST_SIMULATED_TICK, - tick - } + return { + type: SET_LAST_SIMULATED_TICK, + tick + }; } diff --git a/src/actions/simulations.js b/src/actions/simulations.js index 145ceab2..6da7aa3a 100644 --- a/src/actions/simulations.js +++ b/src/actions/simulations.js @@ -6,47 +6,47 @@ export const DELETE_SIMULATION_SUCCEEDED = "DELETE_SIMULATION_SUCCEEDED"; export const OPEN_SIMULATION_SUCCEEDED = "OPEN_SIMULATION_SUCCEEDED"; export function setAuthVisibilityFilter(filter) { - return { - type: SET_AUTH_VISIBILITY_FILTER, - filter - }; + return { + type: SET_AUTH_VISIBILITY_FILTER, + filter + }; } export function addSimulation(name) { - return (dispatch, getState) => { - const {auth} = getState(); - dispatch({ - type: ADD_SIMULATION, - name, - userId: auth.userId - }); - }; + return (dispatch, getState) => { + const { auth } = getState(); + dispatch({ + type: ADD_SIMULATION, + name, + userId: auth.userId + }); + }; } export function addSimulationSucceeded(authorization) { - return { - type: ADD_SIMULATION_SUCCEEDED, - authorization - }; + return { + type: ADD_SIMULATION_SUCCEEDED, + authorization + }; } export function deleteSimulation(id) { - return { - type: DELETE_SIMULATION, - id - }; + return { + type: DELETE_SIMULATION, + id + }; } export function deleteSimulationSucceeded(id) { - return { - type: DELETE_SIMULATION_SUCCEEDED, - id - }; + return { + type: DELETE_SIMULATION_SUCCEEDED, + id + }; } export function openSimulationSucceeded(id) { - return { - type: OPEN_SIMULATION_SUCCEEDED, - id - }; + return { + type: OPEN_SIMULATION_SUCCEEDED, + id + }; } diff --git a/src/actions/states.js b/src/actions/states.js index 29baa326..b3a355a2 100644 --- a/src/actions/states.js +++ b/src/actions/states.js @@ -1,9 +1,9 @@ export const ADD_BATCH_TO_STATES = "ADD_BATCH_TO_STATES"; export function addBatchToStates(objectType, objects) { - return { - type: ADD_BATCH_TO_STATES, - objectType, - objects - }; + return { + type: ADD_BATCH_TO_STATES, + objectType, + objects + }; } diff --git a/src/actions/topology/building.js b/src/actions/topology/building.js index 019a473c..5aef2932 100644 --- a/src/actions/topology/building.js +++ b/src/actions/topology/building.js @@ -1,92 +1,99 @@ export const SET_CURRENT_DATACENTER = "SET_CURRENT_DATACENTER"; export const RESET_CURRENT_DATACENTER = "RESET_CURRENT_DATACENTER"; export const START_NEW_ROOM_CONSTRUCTION = "START_NEW_ROOM_CONSTRUCTION"; -export const START_NEW_ROOM_CONSTRUCTION_SUCCEEDED = "START_NEW_ROOM_CONSTRUCTION_SUCCEEDED"; +export const START_NEW_ROOM_CONSTRUCTION_SUCCEEDED = + "START_NEW_ROOM_CONSTRUCTION_SUCCEEDED"; export const FINISH_NEW_ROOM_CONSTRUCTION = "FINISH_NEW_ROOM_CONSTRUCTION"; export const CANCEL_NEW_ROOM_CONSTRUCTION = "CANCEL_NEW_ROOM_CONSTRUCTION"; -export const CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED = "CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED"; +export const CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED = + "CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED"; export const ADD_TILE = "ADD_TILE"; export const DELETE_TILE = "DELETE_TILE"; export function setCurrentDatacenter(datacenterId) { - return { - type: SET_CURRENT_DATACENTER, - datacenterId - }; + return { + type: SET_CURRENT_DATACENTER, + datacenterId + }; } export function resetCurrentDatacenter() { - return { - type: RESET_CURRENT_DATACENTER - }; + return { + type: RESET_CURRENT_DATACENTER + }; } export function startNewRoomConstruction() { - return { - type: START_NEW_ROOM_CONSTRUCTION - }; + return { + type: START_NEW_ROOM_CONSTRUCTION + }; } export function startNewRoomConstructionSucceeded(roomId) { - return { - type: START_NEW_ROOM_CONSTRUCTION_SUCCEEDED, - roomId - }; + return { + type: START_NEW_ROOM_CONSTRUCTION_SUCCEEDED, + roomId + }; } export function finishNewRoomConstruction() { - return (dispatch, getState) => { - const {objects, construction} = getState(); - if (objects.room[construction.currentRoomInConstruction].tileIds.length === 0) { - dispatch(cancelNewRoomConstruction()); - return; - } + return (dispatch, getState) => { + const { objects, construction } = getState(); + if ( + objects.room[construction.currentRoomInConstruction].tileIds.length === 0 + ) { + dispatch(cancelNewRoomConstruction()); + return; + } - dispatch({ - type: FINISH_NEW_ROOM_CONSTRUCTION - }); - }; + dispatch({ + type: FINISH_NEW_ROOM_CONSTRUCTION + }); + }; } export function cancelNewRoomConstruction() { - return { - type: CANCEL_NEW_ROOM_CONSTRUCTION - }; + return { + type: CANCEL_NEW_ROOM_CONSTRUCTION + }; } export function cancelNewRoomConstructionSucceeded() { - return { - type: CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED - }; + return { + type: CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED + }; } export function toggleTileAtLocation(positionX, positionY) { - return (dispatch, getState) => { - const {objects, construction} = getState(); + return (dispatch, getState) => { + const { objects, construction } = getState(); - const tileIds = objects.room[construction.currentRoomInConstruction].tileIds; - for (let index in tileIds) { - if (objects.tile[tileIds[index]].positionX === positionX - && objects.tile[tileIds[index]].positionY === positionY) { - dispatch(deleteTile(tileIds[index])); - return; - } - } - dispatch(addTile(positionX, positionY)); - }; + const tileIds = + objects.room[construction.currentRoomInConstruction].tileIds; + for (let index in tileIds) { + if ( + objects.tile[tileIds[index]].positionX === positionX && + objects.tile[tileIds[index]].positionY === positionY + ) { + dispatch(deleteTile(tileIds[index])); + return; + } + } + dispatch(addTile(positionX, positionY)); + }; } export function addTile(positionX, positionY) { - return { - type: ADD_TILE, - positionX, - positionY - }; + return { + type: ADD_TILE, + positionX, + positionY + }; } export function deleteTile(tileId) { - return { - type: DELETE_TILE, - tileId - } + return { + type: DELETE_TILE, + tileId + }; } diff --git a/src/actions/topology/machine.js b/src/actions/topology/machine.js index 48d88052..56968b7d 100644 --- a/src/actions/topology/machine.js +++ b/src/actions/topology/machine.js @@ -3,23 +3,23 @@ export const ADD_UNIT = "ADD_UNIT"; export const DELETE_UNIT = "DELETE_UNIT"; export function deleteMachine() { - return { - type: DELETE_MACHINE - }; + return { + type: DELETE_MACHINE + }; } export function addUnit(unitType, id) { - return { - type: ADD_UNIT, - unitType, - id - }; + return { + type: ADD_UNIT, + unitType, + id + }; } export function deleteUnit(unitType, index) { - return { - type: DELETE_UNIT, - unitType, - index - }; + return { + type: DELETE_UNIT, + unitType, + index + }; } diff --git a/src/actions/topology/rack.js b/src/actions/topology/rack.js index 043d6190..06988424 100644 --- a/src/actions/topology/rack.js +++ b/src/actions/topology/rack.js @@ -3,21 +3,21 @@ export const DELETE_RACK = "DELETE_RACK"; export const ADD_MACHINE = "ADD_MACHINE"; export function editRackName(name) { - return { - type: EDIT_RACK_NAME, - name - }; + return { + type: EDIT_RACK_NAME, + name + }; } export function deleteRack() { - return { - type: DELETE_RACK - }; + return { + type: DELETE_RACK + }; } export function addMachine(position) { - return { - type: ADD_MACHINE, - position - }; + return { + type: ADD_MACHINE, + position + }; } diff --git a/src/actions/topology/room.js b/src/actions/topology/room.js index 884c7e84..4e0fc3a2 100644 --- a/src/actions/topology/room.js +++ b/src/actions/topology/room.js @@ -1,4 +1,4 @@ -import {findTileWithPosition} from "../../util/tile-calculations"; +import { findTileWithPosition } from "../../util/tile-calculations"; export const EDIT_ROOM_NAME = "EDIT_ROOM_NAME"; export const DELETE_ROOM = "DELETE_ROOM"; @@ -7,42 +7,42 @@ export const STOP_RACK_CONSTRUCTION = "STOP_RACK_CONSTRUCTION"; export const ADD_RACK_TO_TILE = "ADD_RACK_TO_TILE"; export function editRoomName(name) { - return { - type: EDIT_ROOM_NAME, - name - }; + return { + type: EDIT_ROOM_NAME, + name + }; } export function startRackConstruction() { - return { - type: START_RACK_CONSTRUCTION - }; + return { + type: START_RACK_CONSTRUCTION + }; } export function stopRackConstruction() { - return { - type: STOP_RACK_CONSTRUCTION - }; + return { + type: STOP_RACK_CONSTRUCTION + }; } export function addRackToTile(positionX, positionY) { - return (dispatch, getState) => { - const {objects, interactionLevel} = getState(); - const currentRoom = objects.room[interactionLevel.roomId]; - const tiles = currentRoom.tileIds.map(tileId => objects.tile[tileId]); - const tile = findTileWithPosition(tiles, positionX, positionY); + return (dispatch, getState) => { + const { objects, interactionLevel } = getState(); + const currentRoom = objects.room[interactionLevel.roomId]; + const tiles = currentRoom.tileIds.map(tileId => objects.tile[tileId]); + const tile = findTileWithPosition(tiles, positionX, positionY); - if (tile !== null) { - dispatch({ - type: ADD_RACK_TO_TILE, - tileId: tile.id - }); - } - }; + if (tile !== null) { + dispatch({ + type: ADD_RACK_TO_TILE, + tileId: tile.id + }); + } + }; } export function deleteRoom() { - return { - type: DELETE_ROOM - }; + return { + type: DELETE_ROOM + }; } diff --git a/src/actions/users.js b/src/actions/users.js index 04a5b95a..dc393df9 100644 --- a/src/actions/users.js +++ b/src/actions/users.js @@ -1,37 +1,41 @@ -export const FETCH_AUTHORIZATIONS_OF_CURRENT_USER = "FETCH_AUTHORIZATIONS_OF_CURRENT_USER"; -export const FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED = "FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED"; +export const FETCH_AUTHORIZATIONS_OF_CURRENT_USER = + "FETCH_AUTHORIZATIONS_OF_CURRENT_USER"; +export const FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED = + "FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED"; export const DELETE_CURRENT_USER = "DELETE_CURRENT_USER"; export const DELETE_CURRENT_USER_SUCCEEDED = "DELETE_CURRENT_USER_SUCCEEDED"; export function fetchAuthorizationsOfCurrentUser() { - return (dispatch, getState) => { - const {auth} = getState(); - dispatch({ - type: FETCH_AUTHORIZATIONS_OF_CURRENT_USER, - userId: auth.userId - }); - }; + return (dispatch, getState) => { + const { auth } = getState(); + dispatch({ + type: FETCH_AUTHORIZATIONS_OF_CURRENT_USER, + userId: auth.userId + }); + }; } -export function fetchAuthorizationsOfCurrentUserSucceeded(authorizationsOfCurrentUser) { - return { - type: FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED, - authorizationsOfCurrentUser - }; +export function fetchAuthorizationsOfCurrentUserSucceeded( + authorizationsOfCurrentUser +) { + return { + type: FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED, + authorizationsOfCurrentUser + }; } export function deleteCurrentUser() { - return (dispatch, getState) => { - const {auth} = getState(); - dispatch({ - type: DELETE_CURRENT_USER, - userId: auth.userId - }); - }; + return (dispatch, getState) => { + const { auth } = getState(); + dispatch({ + type: DELETE_CURRENT_USER, + userId: auth.userId + }); + }; } export function deleteCurrentUserSucceeded() { - return { - type: DELETE_CURRENT_USER_SUCCEEDED - }; + return { + type: DELETE_CURRENT_USER_SUCCEEDED + }; } diff --git a/src/api/index.js b/src/api/index.js index a26422c0..37c288a3 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,13 +1,13 @@ -import {sendSocketRequest} from "./socket"; +import { sendSocketRequest } from "./socket"; export function sendRequest(request) { - return new Promise((resolve, reject) => { - sendSocketRequest(request, response => { - if (response.status.code === 200) { - resolve(response.content); - } else { - reject(response); - } - }) + return new Promise((resolve, reject) => { + sendSocketRequest(request, response => { + if (response.status.code === 200) { + resolve(response.content); + } else { + reject(response); + } }); + }); } diff --git a/src/api/routes/datacenters.js b/src/api/routes/datacenters.js index df621a62..20cf4935 100644 --- a/src/api/routes/datacenters.js +++ b/src/api/routes/datacenters.js @@ -1,26 +1,26 @@ -import {sendRequest} from "../index"; -import {getById} from "./util"; +import { sendRequest } from "../index"; +import { getById } from "./util"; export function getDatacenter(datacenterId) { - return getById("/datacenters/{datacenterId}", {datacenterId}); + return getById("/datacenters/{datacenterId}", { datacenterId }); } export function getRoomsOfDatacenter(datacenterId) { - return getById("/datacenters/{datacenterId}/rooms", {datacenterId}); + return getById("/datacenters/{datacenterId}/rooms", { datacenterId }); } export function addRoomToDatacenter(room) { - return sendRequest({ - path: "/datacenters/{datacenterId}/rooms", - method: "POST", - parameters: { - body: { - room - }, - path: { - datacenterId: room.datacenterId - }, - query: {} - } - }); + return sendRequest({ + path: "/datacenters/{datacenterId}/rooms", + method: "POST", + parameters: { + body: { + room + }, + path: { + datacenterId: room.datacenterId + }, + query: {} + } + }); } diff --git a/src/api/routes/experiments.js b/src/api/routes/experiments.js index 84edae2f..f61698c5 100644 --- a/src/api/routes/experiments.js +++ b/src/api/routes/experiments.js @@ -1,29 +1,33 @@ -import {deleteById, getById} from "./util"; +import { deleteById, getById } from "./util"; export function getExperiment(experimentId) { - return getById("/experiments/{experimentId}", {experimentId}); + return getById("/experiments/{experimentId}", { experimentId }); } export function deleteExperiment(experimentId) { - return deleteById("/experiments/{experimentId}", {experimentId}); + return deleteById("/experiments/{experimentId}", { experimentId }); } export function getLastSimulatedTick(experimentId) { - return getById("/experiments/{experimentId}/last-simulated-tick", {experimentId}); + return getById("/experiments/{experimentId}/last-simulated-tick", { + experimentId + }); } export function getAllMachineStates(experimentId) { - return getById("/experiments/{experimentId}/machine-states", {experimentId}); + return getById("/experiments/{experimentId}/machine-states", { + experimentId + }); } export function getAllRackStates(experimentId) { - return getById("/experiments/{experimentId}/rack-states", {experimentId}); + return getById("/experiments/{experimentId}/rack-states", { experimentId }); } export function getAllRoomStates(experimentId) { - return getById("/experiments/{experimentId}/room-states", {experimentId}); + return getById("/experiments/{experimentId}/room-states", { experimentId }); } export function getAllTaskStates(experimentId) { - return getById("/experiments/{experimentId}/task-states", {experimentId}); + return getById("/experiments/{experimentId}/task-states", { experimentId }); } diff --git a/src/api/routes/jobs.js b/src/api/routes/jobs.js index e96c12ba..355acc32 100644 --- a/src/api/routes/jobs.js +++ b/src/api/routes/jobs.js @@ -1,5 +1,5 @@ -import {getById} from "./util"; +import { getById } from "./util"; export function getTasksOfJob(jobId) { - return getById("/jobs/{jobId}/tasks", {jobId}); + return getById("/jobs/{jobId}/tasks", { jobId }); } diff --git a/src/api/routes/paths.js b/src/api/routes/paths.js index 073cbe7e..78ef7d6e 100644 --- a/src/api/routes/paths.js +++ b/src/api/routes/paths.js @@ -1,30 +1,30 @@ -import {sendRequest} from "../index"; -import {getById} from "./util"; +import { sendRequest } from "../index"; +import { getById } from "./util"; export function getPath(pathId) { - return getById("/paths/{pathId}", {pathId}); + return getById("/paths/{pathId}", { pathId }); } export function getBranchesOfPath(pathId) { - return getById("/paths/{pathId}/branches", {pathId}); + return getById("/paths/{pathId}/branches", { pathId }); } export function branchFromPath(pathId, section) { - return sendRequest({ - path: "/paths/{pathId}/branches", - method: "POST", - parameters: { - body: { - section - }, - path: { - pathId - }, - query: {} - } - }); + return sendRequest({ + path: "/paths/{pathId}/branches", + method: "POST", + parameters: { + body: { + section + }, + path: { + pathId + }, + query: {} + } + }); } export function getSectionsOfPath(pathId) { - return getById("/paths/{pathId}/sections", {pathId}); + return getById("/paths/{pathId}/sections", { pathId }); } diff --git a/src/api/routes/room-types.js b/src/api/routes/room-types.js index 339896d2..8a3eac58 100644 --- a/src/api/routes/room-types.js +++ b/src/api/routes/room-types.js @@ -1,9 +1,9 @@ -import {getAll, getById} from "./util"; +import { getAll, getById } from "./util"; export function getAvailableRoomTypes() { - return getAll("/room-types"); + return getAll("/room-types"); } export function getAllowedObjectsOfRoomType(name) { - return getById("/room-types/{name}/allowed-objects", {name}); + return getById("/room-types/{name}/allowed-objects", { name }); } diff --git a/src/api/routes/rooms.js b/src/api/routes/rooms.js index 1a7a7453..56395d7f 100644 --- a/src/api/routes/rooms.js +++ b/src/api/routes/rooms.js @@ -1,46 +1,46 @@ -import {sendRequest} from "../index"; -import {deleteById, getById} from "./util"; +import { sendRequest } from "../index"; +import { deleteById, getById } from "./util"; export function getRoom(roomId) { - return getById("/rooms/{roomId}", {roomId}); + return getById("/rooms/{roomId}", { roomId }); } export function updateRoom(room) { - return sendRequest({ - path: "/rooms/{roomId}", - method: "PUT", - parameters: { - body: { - room - }, - path: { - roomId: room.id - }, - query: {} - } - }); + return sendRequest({ + path: "/rooms/{roomId}", + method: "PUT", + parameters: { + body: { + room + }, + path: { + roomId: room.id + }, + query: {} + } + }); } export function deleteRoom(roomId) { - return deleteById("/rooms/{roomId}", {roomId}); + return deleteById("/rooms/{roomId}", { roomId }); } export function getTilesOfRoom(roomId) { - return getById("/rooms/{roomId}/tiles", {roomId}); + return getById("/rooms/{roomId}/tiles", { roomId }); } export function addTileToRoom(tile) { - return sendRequest({ - path: "/rooms/{roomId}/tiles", - method: "POST", - parameters: { - body: { - tile - }, - path: { - roomId: tile.roomId - }, - query: {} - } - }); + return sendRequest({ + path: "/rooms/{roomId}/tiles", + method: "POST", + parameters: { + body: { + tile + }, + path: { + roomId: tile.roomId + }, + query: {} + } + }); } diff --git a/src/api/routes/schedulers.js b/src/api/routes/schedulers.js index 246abf32..ea360967 100644 --- a/src/api/routes/schedulers.js +++ b/src/api/routes/schedulers.js @@ -1,5 +1,5 @@ -import {getAll} from "./util"; +import { getAll } from "./util"; export function getAllSchedulers() { - return getAll("/schedulers"); + return getAll("/schedulers"); } diff --git a/src/api/routes/sections.js b/src/api/routes/sections.js index 8d71d768..5e1a077d 100644 --- a/src/api/routes/sections.js +++ b/src/api/routes/sections.js @@ -1,5 +1,5 @@ -import {getById} from "./util"; +import { getById } from "./util"; export function getSection(sectionId) { - return getById("/sections/{sectionId}", {sectionId}); + return getById("/sections/{sectionId}", { sectionId }); } diff --git a/src/api/routes/simulations.js b/src/api/routes/simulations.js index 09f4b6d7..dcb9ac5f 100644 --- a/src/api/routes/simulations.js +++ b/src/api/routes/simulations.js @@ -1,68 +1,70 @@ -import {sendRequest} from "../index"; -import {deleteById, getById} from "./util"; +import { sendRequest } from "../index"; +import { deleteById, getById } from "./util"; export function getSimulation(simulationId) { - return getById("/simulations/{simulationId}", {simulationId}); + return getById("/simulations/{simulationId}", { simulationId }); } export function addSimulation(simulation) { - return sendRequest({ - path: "/simulations", - method: "POST", - parameters: { - body: { - simulation - }, - path: {}, - query: {} - } - }); + return sendRequest({ + path: "/simulations", + method: "POST", + parameters: { + body: { + simulation + }, + path: {}, + query: {} + } + }); } export function updateSimulation(simulation) { - return sendRequest({ - path: "/simulations/{simulationId}", - method: "PUT", - parameters: { - body: { - simulation - }, - path: { - simulationId: simulation.id - }, - query: {} - } - }); + return sendRequest({ + path: "/simulations/{simulationId}", + method: "PUT", + parameters: { + body: { + simulation + }, + path: { + simulationId: simulation.id + }, + query: {} + } + }); } export function deleteSimulation(simulationId) { - return deleteById("/simulations/{simulationId}", {simulationId}); + return deleteById("/simulations/{simulationId}", { simulationId }); } export function getAuthorizationsBySimulation(simulationId) { - return getById("/simulations/{simulationId}/authorizations", {simulationId}); + return getById("/simulations/{simulationId}/authorizations", { + simulationId + }); } export function getPathsOfSimulation(simulationId) { - return getById("/simulations/{simulationId}/paths", {simulationId}); + return getById("/simulations/{simulationId}/paths", { simulationId }); } export function getExperimentsOfSimulation(simulationId) { - return getById("/simulations/{simulationId}/experiments", {simulationId}); + return getById("/simulations/{simulationId}/experiments", { simulationId }); } export function addExperiment(simulationId, experiment) { - return sendRequest({ - path: "/simulations/{simulationId}/experiments", - method: "POST", - parameters: { - body: { - experiment - }, - path: { - simulationId - }, - query: {} - } - }); + return sendRequest({ + path: "/simulations/{simulationId}/experiments", + method: "POST", + parameters: { + body: { + experiment + }, + path: { + simulationId + }, + query: {} + } + }); } diff --git a/src/api/routes/specifications.js b/src/api/routes/specifications.js index 676d9441..0f60b571 100644 --- a/src/api/routes/specifications.js +++ b/src/api/routes/specifications.js @@ -1,57 +1,57 @@ -import {getAll, getById} from "./util"; +import { getAll, getById } from "./util"; export function getAllCoolingItems() { - return getAll("/specifications/cooling-items"); + return getAll("/specifications/cooling-items"); } export function getCoolingItem(id) { - return getById("/specifications/cooling-items/{id}", {id}); + return getById("/specifications/cooling-items/{id}", { id }); } export function getAllCPUs() { - return getAll("/specifications/cpus"); + return getAll("/specifications/cpus"); } export function getCPU(id) { - return getById("/specifications/cpus/{id}", {id}); + return getById("/specifications/cpus/{id}", { id }); } export function getAllFailureModels() { - return getAll("/specifications/failure-models"); + return getAll("/specifications/failure-models"); } export function getFailureModel(id) { - return getById("/specifications/failure-models/{id}", {id}); + return getById("/specifications/failure-models/{id}", { id }); } export function getAllGPUs() { - return getAll("/specifications/gpus"); + return getAll("/specifications/gpus"); } export function getGPU(id) { - return getById("/specifications/gpus/{id}", {id}); + return getById("/specifications/gpus/{id}", { id }); } export function getAllMemories() { - return getAll("/specifications/memories"); + return getAll("/specifications/memories"); } export function getMemory(id) { - return getById("/specifications/memories/{id}", {id}); + return getById("/specifications/memories/{id}", { id }); } export function getAllPSUs() { - return getAll("/specifications/psus"); + return getAll("/specifications/psus"); } export function getPSU(id) { - return getById("/specifications/psus/{id}", {id}); + return getById("/specifications/psus/{id}", { id }); } export function getAllStorages() { - return getAll("/specifications/storages"); + return getAll("/specifications/storages"); } export function getStorage(id) { - return getById("/specifications/storages/{id}", {id}); + return getById("/specifications/storages/{id}", { id }); } diff --git a/src/api/routes/tiles.js b/src/api/routes/tiles.js index b1c594d5..08481ef4 100644 --- a/src/api/routes/tiles.js +++ b/src/api/routes/tiles.js @@ -1,146 +1,146 @@ -import {sendRequest} from "../index"; -import {deleteById, getById} from "./util"; +import { sendRequest } from "../index"; +import { deleteById, getById } from "./util"; export function getTile(tileId) { - return getById("/tiles/{tileId}", {tileId}); + return getById("/tiles/{tileId}", { tileId }); } export function deleteTile(tileId) { - return deleteById("/tiles/{tileId}", {tileId}); + return deleteById("/tiles/{tileId}", { tileId }); } export function getRackByTile(tileId) { - return getTileObject(tileId, "/rack"); + return getTileObject(tileId, "/rack"); } export function addRackToTile(tileId, rack) { - return addTileObject(tileId, {rack}, "/rack"); + return addTileObject(tileId, { rack }, "/rack"); } export function updateRackOnTile(tileId, rack) { - return updateTileObject(tileId, {rack}, "/rack"); + return updateTileObject(tileId, { rack }, "/rack"); } export function deleteRackFromTile(tileId) { - return deleteTileObject(tileId, "/rack"); + return deleteTileObject(tileId, "/rack"); } export function getMachinesOfRackByTile(tileId) { - return getById("/tiles/{tileId}/rack/machines", {tileId}); + return getById("/tiles/{tileId}/rack/machines", { tileId }); } export function addMachineToRackOnTile(tileId, machine) { - return sendRequest({ - path: "/tiles/{tileId}/rack/machines", - method: "POST", - parameters: { - body: { - machine - }, - path: { - tileId - }, - query: {} - } - }); + return sendRequest({ + path: "/tiles/{tileId}/rack/machines", + method: "POST", + parameters: { + body: { + machine + }, + path: { + tileId + }, + query: {} + } + }); } export function updateMachineInRackOnTile(tileId, position, machine) { - return sendRequest({ - path: "/tiles/{tileId}/rack/machines/{position}", - method: "PUT", - parameters: { - body: { - machine - }, - path: { - tileId, - position - }, - query: {} - } - }); + return sendRequest({ + path: "/tiles/{tileId}/rack/machines/{position}", + method: "PUT", + parameters: { + body: { + machine + }, + path: { + tileId, + position + }, + query: {} + } + }); } export function deleteMachineInRackOnTile(tileId, position) { - return sendRequest({ - path: "/tiles/{tileId}/rack/machines/{position}", - method: "DELETE", - parameters: { - body: {}, - path: { - tileId, - position - }, - query: {} - } - }); + return sendRequest({ + path: "/tiles/{tileId}/rack/machines/{position}", + method: "DELETE", + parameters: { + body: {}, + path: { + tileId, + position + }, + query: {} + } + }); } export function getCoolingItemByTile(tileId) { - return getTileObject(tileId, "/cooling-item"); + return getTileObject(tileId, "/cooling-item"); } export function addCoolingItemToTile(tileId, coolingItemId) { - return addTileObject(tileId, {coolingItemId}, "/cooling-item"); + return addTileObject(tileId, { coolingItemId }, "/cooling-item"); } export function updateCoolingItemOnTile(tileId, coolingItemId) { - return updateTileObject(tileId, {coolingItemId}, "/cooling-item"); + return updateTileObject(tileId, { coolingItemId }, "/cooling-item"); } export function deleteCoolingItemFromTile(tileId) { - return deleteTileObject(tileId, "/cooling-item"); + return deleteTileObject(tileId, "/cooling-item"); } export function getPSUByTile(tileId) { - return getTileObject(tileId, "/psu"); + return getTileObject(tileId, "/psu"); } export function addPSUToTile(tileId, psuId) { - return addTileObject(tileId, {psuId}, "/psu"); + return addTileObject(tileId, { psuId }, "/psu"); } export function updatePSUOnTile(tileId, psuId) { - return updateTileObject(tileId, {psuId}, "/psu"); + return updateTileObject(tileId, { psuId }, "/psu"); } export function deletePSUFromTile(tileId) { - return deleteTileObject(tileId, "/psu"); + return deleteTileObject(tileId, "/psu"); } function getTileObject(tileId, endpoint) { - return getById("/tiles/{tileId}" + endpoint, {tileId}); + return getById("/tiles/{tileId}" + endpoint, { tileId }); } function addTileObject(tileId, objectBody, endpoint) { - return sendRequest({ - path: "/tiles/{tileId}" + endpoint, - method: "POST", - parameters: { - body: objectBody, - path: { - tileId - }, - query: {} - } - }); + return sendRequest({ + path: "/tiles/{tileId}" + endpoint, + method: "POST", + parameters: { + body: objectBody, + path: { + tileId + }, + query: {} + } + }); } function updateTileObject(tileId, objectBody, endpoint) { - return sendRequest({ - path: "/tiles/{tileId}" + endpoint, - method: "PUT", - parameters: { - body: objectBody, - path: { - tileId - }, - query: {} - } - }); + return sendRequest({ + path: "/tiles/{tileId}" + endpoint, + method: "PUT", + parameters: { + body: objectBody, + path: { + tileId + }, + query: {} + } + }); } function deleteTileObject(tileId, endpoint) { - return deleteById("/tiles/{tileId}" + endpoint, {tileId}); + return deleteById("/tiles/{tileId}" + endpoint, { tileId }); } diff --git a/src/api/routes/token-signin.js b/src/api/routes/token-signin.js index dbf70869..26875606 100644 --- a/src/api/routes/token-signin.js +++ b/src/api/routes/token-signin.js @@ -1,9 +1,7 @@ export function performTokenSignIn(token) { - return new Promise(resolve => { - window["jQuery"].post( - "/tokensignin", - {idtoken: token}, - data => resolve(data) - ) - }); + return new Promise(resolve => { + window["jQuery"].post("/tokensignin", { idtoken: token }, data => + resolve(data) + ); + }); } diff --git a/src/api/routes/traces.js b/src/api/routes/traces.js index 6a34ca7c..a9ee4fae 100644 --- a/src/api/routes/traces.js +++ b/src/api/routes/traces.js @@ -1,9 +1,9 @@ -import {getAll, getById} from "./util"; +import { getAll, getById } from "./util"; export function getAllTraces() { - return getAll("/traces"); + return getAll("/traces"); } export function getJobsOfTrace(traceId) { - return getById("/traces/{traceId}/jobs", {traceId}); + return getById("/traces/{traceId}/jobs", { traceId }); } diff --git a/src/api/routes/users.js b/src/api/routes/users.js index 7b931d66..f8d8039c 100644 --- a/src/api/routes/users.js +++ b/src/api/routes/users.js @@ -1,71 +1,71 @@ -import {sendRequest} from "../index"; -import {deleteById, getById} from "./util"; +import { sendRequest } from "../index"; +import { deleteById, getById } from "./util"; export function getUserByEmail(email) { - return sendRequest({ - path: "/users", - method: "GET", - parameters: { - body: {}, - path: {}, - query: { - email - } - } - }); + return sendRequest({ + path: "/users", + method: "GET", + parameters: { + body: {}, + path: {}, + query: { + email + } + } + }); } export function addUser(user) { - return sendRequest({ - path: "/users", - method: "POST", - parameters: { - body: { - user: user - }, - path: {}, - query: {} - } - }); + return sendRequest({ + path: "/users", + method: "POST", + parameters: { + body: { + user: user + }, + path: {}, + query: {} + } + }); } export function getUser(userId) { - return sendRequest({ - path: "/users/{userId}", - method: "GET", - parameters: { - body: {}, - path: { - userId - }, - query: {} - } - }); + return sendRequest({ + path: "/users/{userId}", + method: "GET", + parameters: { + body: {}, + path: { + userId + }, + query: {} + } + }); } export function updateUser(userId, user) { - return sendRequest({ - path: "/users/{userId}", - method: "PUT", - parameters: { - body: { - user: { - givenName: user.givenName, - familyName: user.familyName - } - }, - path: { - userId - }, - query: {} + return sendRequest({ + path: "/users/{userId}", + method: "PUT", + parameters: { + body: { + user: { + givenName: user.givenName, + familyName: user.familyName } - }); + }, + path: { + userId + }, + query: {} + } + }); } export function deleteUser(userId) { - return deleteById("/users/{userId}", {userId}); + return deleteById("/users/{userId}", { userId }); } export function getAuthorizationsByUser(userId) { - return getById("/users/{userId}/authorizations", {userId}); + return getById("/users/{userId}/authorizations", { userId }); } diff --git a/src/api/routes/util.js b/src/api/routes/util.js index ff21d4f4..35a40333 100644 --- a/src/api/routes/util.js +++ b/src/api/routes/util.js @@ -1,37 +1,37 @@ -import {sendRequest} from "../index"; +import { sendRequest } from "../index"; export function getAll(path) { - return sendRequest({ - path, - method: "GET", - parameters: { - body: {}, - path: {}, - query: {} - } - }); + return sendRequest({ + path, + method: "GET", + parameters: { + body: {}, + path: {}, + query: {} + } + }); } export function getById(path, pathObject) { - return sendRequest({ - path, - method: "GET", - parameters: { - body: {}, - path: pathObject, - query: {} - } - }); + return sendRequest({ + path, + method: "GET", + parameters: { + body: {}, + path: pathObject, + query: {} + } + }); } export function deleteById(path, pathObject) { - return sendRequest({ - path, - method: "DELETE", - parameters: { - body: {}, - path: pathObject, - query: {} - } - }); + return sendRequest({ + path, + method: "DELETE", + parameters: { + body: {}, + path: pathObject, + query: {} + } + }); } diff --git a/src/api/socket.js b/src/api/socket.js index 283e02e7..cba60288 100644 --- a/src/api/socket.js +++ b/src/api/socket.js @@ -1,50 +1,52 @@ import io from "socket.io-client"; -import {getAuthToken} from "../auth/index"; +import { getAuthToken } from "../auth/index"; let socket; let requestIdCounter = 0; const callbacks = {}; export function setupSocketConnection(onConnect) { - let port = window.location.port; - if (process.env.NODE_ENV !== 'production') { - port = 8081 - } - socket = io.connect(window.location.protocol + "//" + window.location.hostname + ":" + port); - socket.on("connect", onConnect); - socket.on("response", onSocketResponse); + let port = window.location.port; + if (process.env.NODE_ENV !== "production") { + port = 8081; + } + socket = io.connect( + window.location.protocol + "//" + window.location.hostname + ":" + port + ); + socket.on("connect", onConnect); + socket.on("response", onSocketResponse); } export function sendSocketRequest(request, callback) { - if (!socket.connected) { - console.error("Attempted to send request over unconnected socket"); - return; - } + if (!socket.connected) { + console.error("Attempted to send request over unconnected socket"); + return; + } - const newId = requestIdCounter++; - callbacks[newId] = callback; + const newId = requestIdCounter++; + callbacks[newId] = callback; - request.id = newId; - request.token = getAuthToken(); + request.id = newId; + request.token = getAuthToken(); - if (!request.isRootRoute) { - request.path = "/v1" + request.path; - } + if (!request.isRootRoute) { + request.path = "/v1" + request.path; + } - socket.emit("request", request); + socket.emit("request", request); - if (process.env.NODE_ENV !== 'production') { - console.log("Sent socket request:", request); - } + if (process.env.NODE_ENV !== "production") { + console.log("Sent socket request:", request); + } } function onSocketResponse(json) { - const response = JSON.parse(json); + const response = JSON.parse(json); - if (process.env.NODE_ENV !== 'production') { - console.log("Received socket response:", response); - } + if (process.env.NODE_ENV !== "production") { + console.log("Received socket response:", response); + } - callbacks[response.id](response); - delete callbacks[response.id]; + callbacks[response.id](response); + delete callbacks[response.id]; } diff --git a/src/auth/index.js b/src/auth/index.js index 418d816c..83c27b27 100644 --- a/src/auth/index.js +++ b/src/auth/index.js @@ -1,57 +1,57 @@ -import {LOG_IN_SUCCEEDED, LOG_OUT} from "../actions/auth"; -import {DELETE_CURRENT_USER_SUCCEEDED} from "../actions/users"; +import { LOG_IN_SUCCEEDED, LOG_OUT } from "../actions/auth"; +import { DELETE_CURRENT_USER_SUCCEEDED } from "../actions/users"; const getAuthObject = () => { - const authItem = localStorage.getItem("auth"); - if (!authItem || authItem === "{}") { - return undefined; - } - return JSON.parse(authItem); + const authItem = localStorage.getItem("auth"); + if (!authItem || authItem === "{}") { + return undefined; + } + return JSON.parse(authItem); }; export const userIsLoggedIn = () => { - const authObj = getAuthObject(); + const authObj = getAuthObject(); - if (!authObj || !authObj.googleId) { - return false; - } + if (!authObj || !authObj.googleId) { + return false; + } - const currentTime = (new Date()).getTime(); - return parseInt(authObj.expiresAt, 10) - currentTime > 0; + const currentTime = new Date().getTime(); + return parseInt(authObj.expiresAt, 10) - currentTime > 0; }; export const getAuthToken = () => { - const authObj = getAuthObject(); - if (!authObj) { - return undefined; - } + const authObj = getAuthObject(); + if (!authObj) { + return undefined; + } - return authObj.authToken; + return authObj.authToken; }; -export const saveAuthLocalStorage = (payload) => { - localStorage.setItem("auth", JSON.stringify(payload)); +export const saveAuthLocalStorage = payload => { + localStorage.setItem("auth", JSON.stringify(payload)); }; export const clearAuthLocalStorage = () => { - localStorage.setItem("auth", ""); + localStorage.setItem("auth", ""); }; export const authRedirectMiddleware = store => next => action => { - switch (action.type) { - case LOG_IN_SUCCEEDED: - saveAuthLocalStorage(action.payload); - window.location.href = "/simulations"; - break; - case LOG_OUT: - case DELETE_CURRENT_USER_SUCCEEDED: - clearAuthLocalStorage(); - window.location.href = "/"; - break; - default: - next(action); - return; - } - - next(action); + switch (action.type) { + case LOG_IN_SUCCEEDED: + saveAuthLocalStorage(action.payload); + window.location.href = "/simulations"; + break; + case LOG_OUT: + case DELETE_CURRENT_USER_SUCCEEDED: + clearAuthLocalStorage(); + window.location.href = "/"; + break; + default: + next(action); + return; + } + + next(action); }; 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 ( -