From de8f12d74faef5fa3f9e38d1340948cab2d06ea3 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Wed, 1 Jul 2020 13:33:31 +0200 Subject: Manually generate IDs --- frontend/.prettierrc.yaml | 4 + frontend/src/actions/auth.js | 28 +- frontend/src/actions/experiments.js | 42 +- frontend/src/actions/interaction-level.js | 70 +- frontend/src/actions/map.js | 134 ++-- frontend/src/actions/modals/experiments.js | 16 +- frontend/src/actions/modals/profile.js | 16 +- frontend/src/actions/modals/simulations.js | 16 +- frontend/src/actions/modals/topology.js | 80 +-- frontend/src/actions/objects.js | 62 +- frontend/src/actions/simulation/load-metric.js | 10 +- frontend/src/actions/simulation/playback.js | 18 +- frontend/src/actions/simulation/tick.js | 76 +-- frontend/src/actions/simulations.js | 68 +- frontend/src/actions/states.js | 12 +- frontend/src/actions/topology/building.js | 152 ++--- frontend/src/actions/topology/machine.js | 32 +- frontend/src/actions/topology/rack.js | 28 +- frontend/src/actions/topology/room.js | 60 +- frontend/src/actions/users.js | 52 +- frontend/src/api/index.js | 20 +- frontend/src/api/routes/datacenters.js | 34 +- frontend/src/api/routes/experiments.js | 24 +- frontend/src/api/routes/jobs.js | 4 +- frontend/src/api/routes/paths.js | 36 +- frontend/src/api/routes/room-types.js | 6 +- frontend/src/api/routes/rooms.js | 62 +- frontend/src/api/routes/schedulers.js | 4 +- frontend/src/api/routes/sections.js | 4 +- frontend/src/api/routes/simulations.js | 92 +-- frontend/src/api/routes/specifications.js | 30 +- frontend/src/api/routes/tiles.js | 160 ++--- frontend/src/api/routes/token-signin.js | 10 +- frontend/src/api/routes/traces.js | 6 +- frontend/src/api/routes/users.js | 106 +-- frontend/src/api/routes/util.js | 56 +- frontend/src/api/socket.js | 70 +- frontend/src/auth/index.js | 84 +-- frontend/src/components/app/map/LoadingScreen.js | 16 +- frontend/src/components/app/map/MapConstants.js | 44 +- .../src/components/app/map/MapStageComponent.js | 218 +++--- .../app/map/controls/ExportCanvasComponent.js | 20 +- .../app/map/controls/ScaleIndicatorComponent.js | 22 +- .../app/map/controls/ScaleIndicatorComponent.sass | 14 +- .../app/map/controls/ToolPanelComponent.js | 20 +- .../app/map/controls/ToolPanelComponent.sass | 8 +- .../app/map/controls/ZoomControlComponent.js | 28 +- .../src/components/app/map/elements/Backdrop.js | 26 +- .../src/components/app/map/elements/GrayLayer.js | 28 +- .../src/components/app/map/elements/HoverTile.js | 47 +- .../components/app/map/elements/ImageComponent.js | 80 +-- .../src/components/app/map/elements/RackFillBar.js | 160 ++--- .../src/components/app/map/elements/RoomTile.js | 30 +- .../src/components/app/map/elements/TileObject.js | 44 +- .../components/app/map/elements/TilePlusIcon.js | 88 ++- .../src/components/app/map/elements/WallSegment.js | 66 +- .../components/app/map/groups/DatacenterGroup.js | 66 +- .../src/components/app/map/groups/GridGroup.js | 65 +- .../src/components/app/map/groups/RackGroup.js | 74 +-- .../src/components/app/map/groups/RoomGroup.js | 100 +-- .../src/components/app/map/groups/TileGroup.js | 69 +- .../src/components/app/map/groups/WallGroup.js | 34 +- .../app/map/layers/HoverLayerComponent.js | 146 ++--- .../components/app/map/layers/MapLayerComponent.js | 38 +- .../app/map/layers/ObjectHoverLayerComponent.js | 16 +- .../app/map/layers/RoomHoverLayerComponent.js | 8 +- frontend/src/components/app/sidebars/Sidebar.js | 86 +-- frontend/src/components/app/sidebars/Sidebar.sass | 66 +- .../app/sidebars/elements/LoadBarComponent.js | 36 +- .../app/sidebars/elements/LoadChartComponent.js | 158 +++-- .../simulation/ExperimentMetadataComponent.js | 40 +- .../app/sidebars/simulation/LoadMetricComponent.js | 61 +- .../simulation/SimulationSidebarComponent.js | 38 +- .../simulation/SimulationSidebarComponent.sass | 10 +- .../app/sidebars/simulation/TaskComponent.js | 102 +-- .../app/sidebars/simulation/TraceComponent.js | 34 +- .../app/sidebars/topology/NameComponent.js | 20 +- .../sidebars/topology/TopologySidebarComponent.js | 52 +- .../topology/building/BuildingSidebarComponent.js | 33 +- .../building/NewRoomConstructionComponent.js | 54 +- .../topology/machine/BackToRackComponent.js | 14 +- .../topology/machine/DeleteMachineComponent.js | 14 +- .../topology/machine/MachineNameComponent.js | 8 +- .../topology/machine/MachineSidebarComponent.js | 44 +- .../sidebars/topology/machine/UnitAddComponent.js | 82 +-- .../app/sidebars/topology/machine/UnitComponent.js | 132 ++-- .../sidebars/topology/machine/UnitListComponent.js | 44 +- .../sidebars/topology/machine/UnitTabsComponent.js | 122 ++-- .../sidebars/topology/rack/BackToRoomComponent.js | 14 +- .../sidebars/topology/rack/DeleteRackComponent.js | 14 +- .../sidebars/topology/rack/EmptySlotComponent.js | 26 +- .../app/sidebars/topology/rack/MachineComponent.js | 136 ++-- .../sidebars/topology/rack/MachineListComponent.js | 46 +- .../topology/rack/MachineListComponent.sass | 2 +- .../sidebars/topology/rack/RackNameComponent.js | 10 +- .../sidebars/topology/rack/RackSidebarComponent.js | 62 +- .../topology/rack/RackSidebarComponent.sass | 12 +- .../topology/room/BackToBuildingComponent.js | 14 +- .../sidebars/topology/room/DeleteRoomComponent.js | 14 +- .../sidebars/topology/room/EditRoomComponent.js | 48 +- .../topology/room/RackConstructionComponent.js | 56 +- .../sidebars/topology/room/RoomNameComponent.js | 10 +- .../sidebars/topology/room/RoomSidebarComponent.js | 64 +- .../sidebars/topology/room/RoomTypeComponent.js | 10 +- .../components/app/timeline/PlayButtonComponent.js | 54 +- frontend/src/components/app/timeline/Timeline.sass | 148 ++--- .../components/app/timeline/TimelineComponent.js | 60 +- .../app/timeline/TimelineControlsComponent.js | 88 +-- .../app/timeline/TimelineLabelsComponent.js | 22 +- .../experiments/ExperimentListComponent.js | 104 +-- .../experiments/ExperimentRowComponent.js | 70 +- .../experiments/NewExperimentButtonComponent.js | 22 +- frontend/src/components/home/ContactSection.js | 122 ++-- frontend/src/components/home/ContactSection.sass | 20 +- frontend/src/components/home/ContentSection.js | 26 +- frontend/src/components/home/ContentSection.sass | 10 +- frontend/src/components/home/IntroSection.js | 72 +- frontend/src/components/home/JumbotronHeader.js | 34 +- frontend/src/components/home/JumbotronHeader.sass | 32 +- frontend/src/components/home/ModelingSection.js | 42 +- frontend/src/components/home/ScreenshotSection.js | 58 +- .../src/components/home/ScreenshotSection.sass | 8 +- frontend/src/components/home/SimulationSection.js | 44 +- frontend/src/components/home/StakeholderSection.js | 72 +- frontend/src/components/home/TeamSection.js | 101 +-- .../src/components/home/TechnologiesSection.js | 50 +- .../src/components/modals/ConfirmationModal.js | 60 +- frontend/src/components/modals/Modal.js | 226 +++---- frontend/src/components/modals/TextInputModal.js | 98 +-- .../NewExperimentModalComponent.js | 190 +++--- frontend/src/components/navigation/AppNavbar.js | 106 +-- frontend/src/components/navigation/HomeNavbar.js | 38 +- frontend/src/components/navigation/LogoutButton.js | 22 +- frontend/src/components/navigation/Navbar.js | 176 ++--- frontend/src/components/navigation/Navbar.sass | 36 +- .../src/components/not-found/BlinkingCursor.js | 8 +- .../src/components/not-found/BlinkingCursor.sass | 48 +- frontend/src/components/not-found/CodeBlock.js | 54 +- frontend/src/components/not-found/CodeBlock.sass | 4 +- .../src/components/not-found/TerminalWindow.js | 50 +- .../src/components/not-found/TerminalWindow.sass | 94 +-- .../src/components/simulations/FilterButton.js | 38 +- frontend/src/components/simulations/FilterPanel.js | 20 +- .../src/components/simulations/FilterPanel.sass | 6 +- .../simulations/NewSimulationButtonComponent.js | 22 +- .../simulations/SimulationActionButtons.js | 64 +- .../components/simulations/SimulationAuthList.js | 74 +-- .../components/simulations/SimulationAuthRow.js | 50 +- .../src/containers/app/map/DatacenterContainer.js | 24 +- frontend/src/containers/app/map/GrayContainer.js | 18 +- frontend/src/containers/app/map/MapStage.js | 46 +- frontend/src/containers/app/map/RackContainer.js | 46 +- .../containers/app/map/RackEnergyFillContainer.js | 70 +- .../containers/app/map/RackSpaceFillContainer.js | 24 +- frontend/src/containers/app/map/RoomContainer.js | 30 +- frontend/src/containers/app/map/TileContainer.js | 66 +- frontend/src/containers/app/map/WallContainer.js | 20 +- .../app/map/controls/ScaleIndicatorContainer.js | 18 +- .../app/map/controls/ZoomControlContainer.js | 28 +- frontend/src/containers/app/map/layers/MapLayer.js | 18 +- .../containers/app/map/layers/ObjectHoverLayer.js | 54 +- .../containers/app/map/layers/RoomHoverLayer.js | 88 +-- .../app/sidebars/elements/LoadBarContainer.js | 50 +- .../app/sidebars/elements/LoadChartContainer.js | 50 +- .../simulation/ExperimentMetadataContainer.js | 62 +- .../app/sidebars/simulation/LoadMetricContainer.js | 16 +- .../app/sidebars/simulation/TaskContainer.js | 40 +- .../app/sidebars/simulation/TraceContainer.js | 40 +- .../app/sidebars/topology/TopologySidebar.js | 16 +- .../topology/building/BuildingSidebarContainer.js | 19 +- .../building/NewRoomConstructionContainer.js | 39 +- .../topology/machine/BackToRackContainer.js | 20 +- .../topology/machine/DeleteMachineContainer.js | 20 +- .../topology/machine/MachineNameContainer.js | 16 +- .../topology/machine/MachineSidebarContainer.js | 26 +- .../sidebars/topology/machine/UnitAddContainer.js | 28 +- .../app/sidebars/topology/machine/UnitContainer.js | 30 +- .../sidebars/topology/machine/UnitListContainer.js | 28 +- .../sidebars/topology/machine/UnitTabsContainer.js | 16 +- .../sidebars/topology/rack/BackToRoomContainer.js | 20 +- .../sidebars/topology/rack/DeleteRackContainer.js | 20 +- .../sidebars/topology/rack/EmptySlotContainer.js | 28 +- .../app/sidebars/topology/rack/MachineContainer.js | 60 +- .../sidebars/topology/rack/MachineListContainer.js | 22 +- .../sidebars/topology/rack/RackNameContainer.js | 34 +- .../sidebars/topology/rack/RackSidebarContainer.js | 18 +- .../topology/room/BackToBuildingContainer.js | 20 +- .../sidebars/topology/room/DeleteRoomContainer.js | 20 +- .../sidebars/topology/room/EditRoomContainer.js | 36 +- .../topology/room/RackConstructionContainer.js | 36 +- .../sidebars/topology/room/RoomNameContainer.js | 28 +- .../sidebars/topology/room/RoomSidebarContainer.js | 20 +- .../sidebars/topology/room/RoomTypeContainer.js | 16 +- .../containers/app/timeline/PlayButtonContainer.js | 38 +- .../containers/app/timeline/TimelineContainer.js | 62 +- .../app/timeline/TimelineControlsContainer.js | 54 +- .../app/timeline/TimelineLabelsContainer.js | 20 +- frontend/src/containers/auth/Login.js | 100 ++- frontend/src/containers/auth/Logout.js | 18 +- frontend/src/containers/auth/ProfileName.js | 18 +- .../experiments/ExperimentListContainer.js | 44 +- .../experiments/ExperimentRowContainer.js | 44 +- .../experiments/NewExperimentButtonContainer.js | 20 +- .../src/containers/modals/DeleteMachineModal.js | 54 +- .../src/containers/modals/DeleteProfileModal.js | 54 +- frontend/src/containers/modals/DeleteRackModal.js | 54 +- frontend/src/containers/modals/DeleteRoomModal.js | 54 +- .../src/containers/modals/EditRackNameModal.js | 68 +- .../src/containers/modals/EditRoomNameModal.js | 64 +- .../src/containers/modals/NewExperimentModal.js | 62 +- .../src/containers/modals/NewSimulationModal.js | 54 +- frontend/src/containers/simulations/FilterLink.js | 26 +- .../simulations/NewSimulationButtonContainer.js | 20 +- .../containers/simulations/SimulationActions.js | 31 +- .../simulations/VisibleSimulationAuthList.js | 70 +- frontend/src/index.js | 34 +- frontend/src/index.sass | 38 +- frontend/src/pages/App.js | 220 +++---- frontend/src/pages/Experiments.js | 124 ++-- frontend/src/pages/Home.js | 108 +-- frontend/src/pages/Home.sass | 8 +- frontend/src/pages/NotFound.js | 22 +- frontend/src/pages/NotFound.sass | 16 +- frontend/src/pages/Profile.js | 68 +- frontend/src/pages/Simulations.js | 74 +-- frontend/src/reducers/auth.js | 18 +- frontend/src/reducers/construction-mode.js | 78 ++- frontend/src/reducers/current-ids.js | 41 +- frontend/src/reducers/index.js | 62 +- frontend/src/reducers/interaction-level.js | 112 ++-- frontend/src/reducers/map.js | 52 +- frontend/src/reducers/modals.js | 127 ++-- frontend/src/reducers/objects.js | 138 ++-- frontend/src/reducers/simulation-list.js | 52 +- frontend/src/reducers/simulation-mode.js | 91 ++- frontend/src/reducers/states.js | 50 +- frontend/src/registerServiceWorker.js | 158 ++--- frontend/src/routes/index.js | 108 +-- frontend/src/sagas/experiments.js | 302 +++++---- frontend/src/sagas/index.js | 162 ++--- frontend/src/sagas/objects.js | 170 ++--- frontend/src/sagas/profile.js | 18 +- frontend/src/sagas/simulations.js | 73 +-- frontend/src/sagas/topology.js | 730 ++++++++++----------- frontend/src/sagas/users.js | 79 +-- frontend/src/shapes/index.js | 284 ++++---- frontend/src/shortcuts/keymap.js | 16 +- frontend/src/store/configure-store.js | 57 +- frontend/src/store/middlewares/dummy-middleware.js | 4 +- .../src/store/middlewares/viewport-adjustment.js | 136 ++-- frontend/src/style-globals/_mixins.sass | 26 +- frontend/src/util/authorizations.js | 16 +- frontend/src/util/colors.js | 46 +- frontend/src/util/date-time.js | 98 +-- frontend/src/util/date-time.test.js | 64 +- frontend/src/util/jquery.js | 4 +- frontend/src/util/room-types.js | 12 +- frontend/src/util/simulation-load.js | 53 +- frontend/src/util/tile-calculations.js | 436 ++++++------ frontend/src/util/timeline.js | 22 +- 260 files changed, 7433 insertions(+), 7537 deletions(-) create mode 100644 frontend/.prettierrc.yaml (limited to 'frontend') diff --git a/frontend/.prettierrc.yaml b/frontend/.prettierrc.yaml new file mode 100644 index 00000000..6e8842f0 --- /dev/null +++ b/frontend/.prettierrc.yaml @@ -0,0 +1,4 @@ +trailingComma: "es5" +tabWidth: 4 +semi: false +singleQuote: true diff --git a/frontend/src/actions/auth.js b/frontend/src/actions/auth.js index 45e2eb35..38c1a782 100644 --- a/frontend/src/actions/auth.js +++ b/frontend/src/actions/auth.js @@ -1,23 +1,23 @@ -export const LOG_IN = "LOG_IN"; -export const LOG_IN_SUCCEEDED = "LOG_IN_SUCCEEDED"; -export const LOG_OUT = "LOG_OUT"; +export const LOG_IN = 'LOG_IN' +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/frontend/src/actions/experiments.js b/frontend/src/actions/experiments.js index b5709981..d0eda331 100644 --- a/frontend/src/actions/experiments.js +++ b/frontend/src/actions/experiments.js @@ -1,34 +1,34 @@ 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"; + '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/frontend/src/actions/interaction-level.js b/frontend/src/actions/interaction-level.js index 31120146..ff6b1fa3 100644 --- a/frontend/src/actions/interaction-level.js +++ b/frontend/src/actions/interaction-level.js @@ -1,50 +1,50 @@ -export const GO_FROM_BUILDING_TO_ROOM = "GO_FROM_BUILDING_TO_ROOM"; -export const GO_FROM_ROOM_TO_RACK = "GO_FROM_ROOM_TO_RACK"; -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 const GO_FROM_BUILDING_TO_ROOM = 'GO_FROM_BUILDING_TO_ROOM' +export const GO_FROM_ROOM_TO_RACK = 'GO_FROM_ROOM_TO_RACK' +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; + return (dispatch, getState) => { + const { interactionLevel } = getState() + if (interactionLevel.mode !== 'ROOM') { + return + } + dispatch({ + type: GO_FROM_ROOM_TO_RACK, + tileId, + }) } - dispatch({ - type: GO_FROM_ROOM_TO_RACK, - tileId - }); - }; } export function goFromRackToMachine(position) { - return (dispatch, getState) => { - const { interactionLevel } = getState(); - if (interactionLevel.mode !== "RACK") { - return; + return (dispatch, getState) => { + const { interactionLevel } = getState() + if (interactionLevel.mode !== 'RACK') { + return + } + dispatch({ + type: GO_FROM_RACK_TO_MACHINE, + position, + }) } - 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/frontend/src/actions/map.js b/frontend/src/actions/map.js index 82546c00..4ab767f7 100644 --- a/frontend/src/actions/map.js +++ b/frontend/src/actions/map.js @@ -1,93 +1,93 @@ import { - MAP_MAX_SCALE, - MAP_MIN_SCALE, - MAP_SCALE_PER_EVENT, - MAP_SIZE_IN_PIXELS -} from "../components/app/map/MapConstants"; + 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"; -export const SET_MAP_DIMENSIONS = "SET_MAP_DIMENSIONS"; -export const SET_MAP_SCALE = "SET_MAP_SCALE"; +export const SET_MAP_POSITION = 'SET_MAP_POSITION' +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/frontend/src/actions/modals/experiments.js b/frontend/src/actions/modals/experiments.js index df939fa5..37f1922f 100644 --- a/frontend/src/actions/modals/experiments.js +++ b/frontend/src/actions/modals/experiments.js @@ -1,14 +1,14 @@ -export const OPEN_NEW_EXPERIMENT_MODAL = "OPEN_NEW_EXPERIMENT_MODAL"; -export const CLOSE_NEW_EXPERIMENT_MODAL = "CLOSE_EXPERIMENT_MODAL"; +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/frontend/src/actions/modals/profile.js b/frontend/src/actions/modals/profile.js index ee52610c..39c72c03 100644 --- a/frontend/src/actions/modals/profile.js +++ b/frontend/src/actions/modals/profile.js @@ -1,14 +1,14 @@ -export const OPEN_DELETE_PROFILE_MODAL = "OPEN_DELETE_PROFILE_MODAL"; -export const CLOSE_DELETE_PROFILE_MODAL = "CLOSE_DELETE_PROFILE_MODAL"; +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/frontend/src/actions/modals/simulations.js b/frontend/src/actions/modals/simulations.js index b11d356c..0ef1cbaa 100644 --- a/frontend/src/actions/modals/simulations.js +++ b/frontend/src/actions/modals/simulations.js @@ -1,14 +1,14 @@ -export const OPEN_NEW_SIMULATION_MODAL = "OPEN_NEW_SIMULATION_MODAL"; -export const CLOSE_NEW_SIMULATION_MODAL = "CLOSE_SIMULATION_MODAL"; +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/frontend/src/actions/modals/topology.js b/frontend/src/actions/modals/topology.js index 7ee16522..bc59e579 100644 --- a/frontend/src/actions/modals/topology.js +++ b/frontend/src/actions/modals/topology.js @@ -1,70 +1,70 @@ -export const OPEN_EDIT_ROOM_NAME_MODAL = "OPEN_EDIT_ROOM_NAME_MODAL"; -export const CLOSE_EDIT_ROOM_NAME_MODAL = "CLOSE_EDIT_ROOM_NAME_MODAL"; -export const OPEN_DELETE_ROOM_MODAL = "OPEN_DELETE_ROOM_MODAL"; -export const CLOSE_DELETE_ROOM_MODAL = "CLOSE_DELETE_ROOM_MODAL"; -export const OPEN_EDIT_RACK_NAME_MODAL = "OPEN_EDIT_RACK_NAME_MODAL"; -export const CLOSE_EDIT_RACK_NAME_MODAL = "CLOSE_EDIT_RACK_NAME_MODAL"; -export const OPEN_DELETE_RACK_MODAL = "OPEN_DELETE_RACK_MODAL"; -export const CLOSE_DELETE_RACK_MODAL = "CLOSE_DELETE_RACK_MODAL"; -export const OPEN_DELETE_MACHINE_MODAL = "OPEN_DELETE_MACHINE_MODAL"; -export const CLOSE_DELETE_MACHINE_MODAL = "CLOSE_DELETE_MACHINE_MODAL"; +export const OPEN_EDIT_ROOM_NAME_MODAL = 'OPEN_EDIT_ROOM_NAME_MODAL' +export const CLOSE_EDIT_ROOM_NAME_MODAL = 'CLOSE_EDIT_ROOM_NAME_MODAL' +export const OPEN_DELETE_ROOM_MODAL = 'OPEN_DELETE_ROOM_MODAL' +export const CLOSE_DELETE_ROOM_MODAL = 'CLOSE_DELETE_ROOM_MODAL' +export const OPEN_EDIT_RACK_NAME_MODAL = 'OPEN_EDIT_RACK_NAME_MODAL' +export const CLOSE_EDIT_RACK_NAME_MODAL = 'CLOSE_EDIT_RACK_NAME_MODAL' +export const OPEN_DELETE_RACK_MODAL = 'OPEN_DELETE_RACK_MODAL' +export const CLOSE_DELETE_RACK_MODAL = 'CLOSE_DELETE_RACK_MODAL' +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/frontend/src/actions/objects.js b/frontend/src/actions/objects.js index 80b56c0c..2b445c9d 100644 --- a/frontend/src/actions/objects.js +++ b/frontend/src/actions/objects.js @@ -1,48 +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_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"; + 'ADD_ID_TO_STORE_OBJECT_LIST_PROP' export const REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP = - "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 - }; + id, +) { + return { + type: REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP, + objectType, + objectId, + propName, + id, + } } diff --git a/frontend/src/actions/simulation/load-metric.js b/frontend/src/actions/simulation/load-metric.js index c59e3596..c59338ed 100644 --- a/frontend/src/actions/simulation/load-metric.js +++ b/frontend/src/actions/simulation/load-metric.js @@ -1,8 +1,8 @@ -export const CHANGE_LOAD_METRIC = "CHANGE_LOAD_METRIC"; +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/frontend/src/actions/simulation/playback.js b/frontend/src/actions/simulation/playback.js index 8e913914..5d7d8af2 100644 --- a/frontend/src/actions/simulation/playback.js +++ b/frontend/src/actions/simulation/playback.js @@ -1,15 +1,15 @@ -export const SET_PLAYING = "SET_PLAYING"; +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/frontend/src/actions/simulation/tick.js b/frontend/src/actions/simulation/tick.js index a629b340..72387d24 100644 --- a/frontend/src/actions/simulation/tick.js +++ b/frontend/src/actions/simulation/tick.js @@ -1,49 +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 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)); + 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, + }) } - - 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/frontend/src/actions/simulations.js b/frontend/src/actions/simulations.js index 6da7aa3a..779e9b9e 100644 --- a/frontend/src/actions/simulations.js +++ b/frontend/src/actions/simulations.js @@ -1,52 +1,52 @@ -export const SET_AUTH_VISIBILITY_FILTER = "SET_AUTH_VISIBILITY_FILTER"; -export const ADD_SIMULATION = "ADD_SIMULATION"; -export const ADD_SIMULATION_SUCCEEDED = "ADD_SIMULATION_SUCCEEDED"; -export const DELETE_SIMULATION = "DELETE_SIMULATION"; -export const DELETE_SIMULATION_SUCCEEDED = "DELETE_SIMULATION_SUCCEEDED"; -export const OPEN_SIMULATION_SUCCEEDED = "OPEN_SIMULATION_SUCCEEDED"; +export const SET_AUTH_VISIBILITY_FILTER = 'SET_AUTH_VISIBILITY_FILTER' +export const ADD_SIMULATION = 'ADD_SIMULATION' +export const ADD_SIMULATION_SUCCEEDED = 'ADD_SIMULATION_SUCCEEDED' +export const DELETE_SIMULATION = 'DELETE_SIMULATION' +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/frontend/src/actions/states.js b/frontend/src/actions/states.js index b3a355a2..430fbd09 100644 --- a/frontend/src/actions/states.js +++ b/frontend/src/actions/states.js @@ -1,9 +1,9 @@ -export const ADD_BATCH_TO_STATES = "ADD_BATCH_TO_STATES"; +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/frontend/src/actions/topology/building.js b/frontend/src/actions/topology/building.js index c6381a07..2d4d399c 100644 --- a/frontend/src/actions/topology/building.js +++ b/frontend/src/actions/topology/building.js @@ -1,117 +1,117 @@ -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 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 FINISH_NEW_ROOM_CONSTRUCTION = "FINISH_NEW_ROOM_CONSTRUCTION"; -export const CANCEL_NEW_ROOM_CONSTRUCTION = "CANCEL_NEW_ROOM_CONSTRUCTION"; + '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 START_ROOM_EDIT = "START_ROOM_EDIT"; -export const FINISH_ROOM_EDIT = "FINISH_ROOM_EDIT"; -export const ADD_TILE = "ADD_TILE"; -export const DELETE_TILE = "DELETE_TILE"; + 'CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED' +export const START_ROOM_EDIT = 'START_ROOM_EDIT' +export const FINISH_ROOM_EDIT = 'FINISH_ROOM_EDIT' +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 startRoomEdit() { - return (dispatch, getState) => { - const { interactionLevel } = getState(); - dispatch({ - type: START_ROOM_EDIT, - roomId: interactionLevel.roomId - }); - }; + return (dispatch, getState) => { + const { interactionLevel } = getState() + dispatch({ + type: START_ROOM_EDIT, + roomId: interactionLevel.roomId, + }) + } } export function finishRoomEdit() { - return { - type: FINISH_ROOM_EDIT - }; + return { + type: FINISH_ROOM_EDIT, + } } 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; - } + 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)) } - 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/frontend/src/actions/topology/machine.js b/frontend/src/actions/topology/machine.js index 56968b7d..17ccce5d 100644 --- a/frontend/src/actions/topology/machine.js +++ b/frontend/src/actions/topology/machine.js @@ -1,25 +1,25 @@ -export const DELETE_MACHINE = "DELETE_MACHINE"; -export const ADD_UNIT = "ADD_UNIT"; -export const DELETE_UNIT = "DELETE_UNIT"; +export const DELETE_MACHINE = 'DELETE_MACHINE' +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/frontend/src/actions/topology/rack.js b/frontend/src/actions/topology/rack.js index 06988424..b117402e 100644 --- a/frontend/src/actions/topology/rack.js +++ b/frontend/src/actions/topology/rack.js @@ -1,23 +1,23 @@ -export const EDIT_RACK_NAME = "EDIT_RACK_NAME"; -export const DELETE_RACK = "DELETE_RACK"; -export const ADD_MACHINE = "ADD_MACHINE"; +export const EDIT_RACK_NAME = 'EDIT_RACK_NAME' +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/frontend/src/actions/topology/room.js b/frontend/src/actions/topology/room.js index 4e0fc3a2..3476f0b6 100644 --- a/frontend/src/actions/topology/room.js +++ b/frontend/src/actions/topology/room.js @@ -1,48 +1,48 @@ -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"; -export const START_RACK_CONSTRUCTION = "START_RACK_CONSTRUCTION"; -export const STOP_RACK_CONSTRUCTION = "STOP_RACK_CONSTRUCTION"; -export const ADD_RACK_TO_TILE = "ADD_RACK_TO_TILE"; +export const EDIT_ROOM_NAME = 'EDIT_ROOM_NAME' +export const DELETE_ROOM = 'DELETE_ROOM' +export const START_RACK_CONSTRUCTION = 'START_RACK_CONSTRUCTION' +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/frontend/src/actions/users.js b/frontend/src/actions/users.js index dc393df9..cae7e211 100644 --- a/frontend/src/actions/users.js +++ b/frontend/src/actions/users.js @@ -1,41 +1,41 @@ export const FETCH_AUTHORIZATIONS_OF_CURRENT_USER = - "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"; + '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 + authorizationsOfCurrentUser, ) { - return { - type: FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED, - 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/frontend/src/api/index.js b/frontend/src/api/index.js index 37c288a3..6f6c924c 100644 --- a/frontend/src/api/index.js +++ b/frontend/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/frontend/src/api/routes/datacenters.js b/frontend/src/api/routes/datacenters.js index 20cf4935..d041b6ae 100644 --- a/frontend/src/api/routes/datacenters.js +++ b/frontend/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/frontend/src/api/routes/experiments.js b/frontend/src/api/routes/experiments.js index f61698c5..75dab7af 100644 --- a/frontend/src/api/routes/experiments.js +++ b/frontend/src/api/routes/experiments.js @@ -1,33 +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/frontend/src/api/routes/jobs.js b/frontend/src/api/routes/jobs.js index 355acc32..205c1777 100644 --- a/frontend/src/api/routes/jobs.js +++ b/frontend/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/frontend/src/api/routes/paths.js b/frontend/src/api/routes/paths.js index 78ef7d6e..74811ab2 100644 --- a/frontend/src/api/routes/paths.js +++ b/frontend/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/frontend/src/api/routes/room-types.js b/frontend/src/api/routes/room-types.js index 8a3eac58..6c964e93 100644 --- a/frontend/src/api/routes/room-types.js +++ b/frontend/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/frontend/src/api/routes/rooms.js b/frontend/src/api/routes/rooms.js index 56395d7f..f87d1298 100644 --- a/frontend/src/api/routes/rooms.js +++ b/frontend/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/frontend/src/api/routes/schedulers.js b/frontend/src/api/routes/schedulers.js index ea360967..4481fb2a 100644 --- a/frontend/src/api/routes/schedulers.js +++ b/frontend/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/frontend/src/api/routes/sections.js b/frontend/src/api/routes/sections.js index 5e1a077d..1ee8a22a 100644 --- a/frontend/src/api/routes/sections.js +++ b/frontend/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/frontend/src/api/routes/simulations.js b/frontend/src/api/routes/simulations.js index dcb9ac5f..aec89dcc 100644 --- a/frontend/src/api/routes/simulations.js +++ b/frontend/src/api/routes/simulations.js @@ -1,70 +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/frontend/src/api/routes/specifications.js b/frontend/src/api/routes/specifications.js index 0f60b571..167fdce5 100644 --- a/frontend/src/api/routes/specifications.js +++ b/frontend/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/frontend/src/api/routes/tiles.js b/frontend/src/api/routes/tiles.js index 08481ef4..170fe462 100644 --- a/frontend/src/api/routes/tiles.js +++ b/frontend/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/frontend/src/api/routes/token-signin.js b/frontend/src/api/routes/token-signin.js index 26875606..7cff093a 100644 --- a/frontend/src/api/routes/token-signin.js +++ b/frontend/src/api/routes/token-signin.js @@ -1,7 +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/frontend/src/api/routes/traces.js b/frontend/src/api/routes/traces.js index a9ee4fae..140408b1 100644 --- a/frontend/src/api/routes/traces.js +++ b/frontend/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/frontend/src/api/routes/users.js b/frontend/src/api/routes/users.js index f8d8039c..4cb194ce 100644 --- a/frontend/src/api/routes/users.js +++ b/frontend/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, + }, + 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/frontend/src/api/routes/util.js b/frontend/src/api/routes/util.js index 35a40333..67e7173b 100644 --- a/frontend/src/api/routes/util.js +++ b/frontend/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/frontend/src/api/socket.js b/frontend/src/api/socket.js index fadb77ad..ce5f7587 100644 --- a/frontend/src/api/socket.js +++ b/frontend/src/api/socket.js @@ -1,52 +1,52 @@ -import io from "socket.io-client"; -import { getAuthToken } from "../auth/index"; +import io from 'socket.io-client' +import { getAuthToken } from '../auth/index' -let socket; -let requestIdCounter = 0; -const callbacks = {}; +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 = "/v2" + request.path; - } + if (!request.isRootRoute) { + request.path = '/v2' + 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/frontend/src/auth/index.js b/frontend/src/auth/index.js index 83c27b27..7922f567 100644 --- a/frontend/src/auth/index.js +++ b/frontend/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)); -}; + 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/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js index 9f379e0b..ca159982 100644 --- a/frontend/src/components/app/map/LoadingScreen.js +++ b/frontend/src/components/app/map/LoadingScreen.js @@ -1,11 +1,11 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; +import React from 'react' +import FontAwesome from 'react-fontawesome' const LoadingScreen = () => ( -
- - Loading your datacenter... -
-); +
+ + Loading your datacenter... +
+) -export default LoadingScreen; +export default LoadingScreen diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js index 32438b5e..286920e2 100644 --- a/frontend/src/components/app/map/MapConstants.js +++ b/frontend/src/components/app/map/MapConstants.js @@ -1,29 +1,29 @@ -export const MAP_SIZE = 50; -export const TILE_SIZE_IN_PIXELS = 100; -export const TILE_SIZE_IN_METERS = 0.5; -export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS; +export const MAP_SIZE = 50 +export const TILE_SIZE_IN_PIXELS = 100 +export const TILE_SIZE_IN_METERS = 0.5 +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_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; + 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; -export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12; -export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10; +export const GRID_LINE_WIDTH_IN_PIXELS = 2 +export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8 +export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12 +export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10 -export const SIDEBAR_WIDTH = 350; -export const VIEWPORT_PADDING = 50; +export const SIDEBAR_WIDTH = 350 +export const VIEWPORT_PADDING = 50 -export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3; -export const RACK_FILL_ICON_OPACITY = 0.8; +export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3 +export const RACK_FILL_ICON_OPACITY = 0.8 -export const MAP_MOVE_PIXELS_PER_EVENT = 20; -export const MAP_SCALE_PER_EVENT = 1.1; -export const MAP_MIN_SCALE = 0.5; -export const MAP_MAX_SCALE = 1.5; +export const MAP_MOVE_PIXELS_PER_EVENT = 20 +export const MAP_SCALE_PER_EVENT = 1.1 +export const MAP_MIN_SCALE = 0.5 +export const MAP_MAX_SCALE = 1.5 -export const MAX_NUM_UNITS_PER_MACHINE = 4; -export const DEFAULT_RACK_SLOT_CAPACITY = 42; -export const DEFAULT_RACK_POWER_CAPACITY = 10000; +export const MAX_NUM_UNITS_PER_MACHINE = 4 +export const DEFAULT_RACK_SLOT_CAPACITY = 42 +export const DEFAULT_RACK_POWER_CAPACITY = 10000 diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js index 67b3349c..455604e4 100644 --- a/frontend/src/components/app/map/MapStageComponent.js +++ b/frontend/src/components/app/map/MapStageComponent.js @@ -1,126 +1,126 @@ -import React from "react"; -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 { Provider } from "react-redux"; -import { store } from "../../../store/configure-store"; +import React from 'react' +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 { Provider } from 'react-redux' +import { store } from '../../../store/configure-store' class MapStageComponent extends React.Component { - state = { - mouseX: 0, - mouseY: 0 - }; + state = { + mouseX: 0, + mouseY: 0, + } - constructor(props) { - super(props); + constructor(props) { + super(props) - 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; +export default MapStageComponent diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js index ee934f21..d166bcc8 100644 --- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js +++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js @@ -1,13 +1,13 @@ -import React from "react"; +import React from 'react' const ExportCanvasComponent = () => ( - -); + +) -export default ExportCanvasComponent; +export default ExportCanvasComponent diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js index b7b5cc36..daaf8ec6 100644 --- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js +++ b/frontend/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 "./ScaleIndicatorComponent.css"; +import React from 'react' +import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants' +import './ScaleIndicatorComponent.css' const ScaleIndicatorComponent = ({ scale }) => ( -
- {TILE_SIZE_IN_METERS}m -
-); +
+ {TILE_SIZE_IN_METERS}m +
+) -export default ScaleIndicatorComponent; +export default ScaleIndicatorComponent diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass index f2d2b55b..03a72c99 100644 --- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass +++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass @@ -1,9 +1,9 @@ .scale-indicator - position: absolute - right: 10px - bottom: 10px - z-index: 50 + position: absolute + right: 10px + bottom: 10px + z-index: 50 - border: solid 2px #212529 - border-top: none - border-left: none + border: solid 2px #212529 + border-top: none + border-left: none diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js index 605e9887..e3bb1dbb 100644 --- a/frontend/src/components/app/map/controls/ToolPanelComponent.js +++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js @@ -1,13 +1,13 @@ -import React from "react"; -import ZoomControlContainer from "../../../../containers/app/map/controls/ZoomControlContainer"; -import ExportCanvasComponent from "./ExportCanvasComponent"; -import "./ToolPanelComponent.css"; +import React from 'react' +import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer' +import ExportCanvasComponent from './ExportCanvasComponent' +import './ToolPanelComponent.css' const ToolPanelComponent = () => ( -
- - -
-); +
+ + +
+) -export default ToolPanelComponent; +export default ToolPanelComponent diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.sass b/frontend/src/components/app/map/controls/ToolPanelComponent.sass index 996712b3..8b27d24a 100644 --- a/frontend/src/components/app/map/controls/ToolPanelComponent.sass +++ b/frontend/src/components/app/map/controls/ToolPanelComponent.sass @@ -1,5 +1,5 @@ .tool-panel - position: absolute - left: 10px - bottom: 10px - z-index: 50 + position: absolute + left: 10px + bottom: 10px + z-index: 50 diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js index e1b7491e..bd6527a6 100644 --- a/frontend/src/components/app/map/controls/ZoomControlComponent.js +++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js @@ -1,24 +1,24 @@ -import React from "react"; +import React from 'react' const ZoomControlComponent = ({ zoomInOnCenter }) => { - return ( - + return ( + - ); -}; + ) +} -export default ZoomControlComponent; +export default ZoomControlComponent diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js index 57414463..556d6a7b 100644 --- a/frontend/src/components/app/map/elements/Backdrop.js +++ b/frontend/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 React from 'react' +import { Rect } from 'react-konva' +import { BACKDROP_COLOR } from '../../../../util/colors' +import { MAP_SIZE_IN_PIXELS } from '../MapConstants' const Backdrop = () => ( - -); + +) -export default Backdrop; +export default Backdrop diff --git a/frontend/src/components/app/map/elements/GrayLayer.js b/frontend/src/components/app/map/elements/GrayLayer.js index 28fadd8a..c54a34ad 100644 --- a/frontend/src/components/app/map/elements/GrayLayer.js +++ b/frontend/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 React from 'react' +import { Rect } from 'react-konva' +import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors' +import { MAP_SIZE_IN_PIXELS } from '../MapConstants' const GrayLayer = ({ onClick }) => ( - -); + +) -export default GrayLayer; +export default GrayLayer diff --git a/frontend/src/components/app/map/elements/HoverTile.js b/frontend/src/components/app/map/elements/HoverTile.js index 42e6547c..912229c4 100644 --- a/frontend/src/components/app/map/elements/HoverTile.js +++ b/frontend/src/components/app/map/elements/HoverTile.js @@ -1,30 +1,27 @@ -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 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' 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; +export default HoverTile diff --git a/frontend/src/components/app/map/elements/ImageComponent.js b/frontend/src/components/app/map/elements/ImageComponent.js index cf41ddfe..2b5c569f 100644 --- a/frontend/src/components/app/map/elements/ImageComponent.js +++ b/frontend/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 PropTypes from 'prop-types' +import React from 'react' +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; +export default ImageComponent diff --git a/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js index 43701d97..6e56e059 100644 --- a/frontend/src/components/app/map/elements/RackFillBar.js +++ b/frontend/src/components/app/map/elements/RackFillBar.js @@ -1,89 +1,89 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group, Rect } from "react-konva"; +import PropTypes from 'prop-types' +import React from 'react' +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 -} from "../../../../util/colors"; + 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 -} from "../MapConstants"; -import ImageComponent from "./ImageComponent"; + 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 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; +export default RackFillBar diff --git a/frontend/src/components/app/map/elements/RoomTile.js b/frontend/src/components/app/map/elements/RoomTile.js index 71c3bf15..43bf918e 100644 --- a/frontend/src/components/app/map/elements/RoomTile.js +++ b/frontend/src/components/app/map/elements/RoomTile.js @@ -1,20 +1,20 @@ -import React from "react"; -import { Rect } from "react-konva"; -import Shapes from "../../../../shapes/index"; -import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Rect } from 'react-konva' +import Shapes from '../../../../shapes/index' +import { TILE_SIZE_IN_PIXELS } from '../MapConstants' const RoomTile = ({ tile, color }) => ( - -); + +) RoomTile.propTypes = { - tile: Shapes.Tile -}; + tile: Shapes.Tile, +} -export default RoomTile; +export default RoomTile diff --git a/frontend/src/components/app/map/elements/TileObject.js b/frontend/src/components/app/map/elements/TileObject.js index c1b631db..9e87cc82 100644 --- a/frontend/src/components/app/map/elements/TileObject.js +++ b/frontend/src/components/app/map/elements/TileObject.js @@ -1,29 +1,25 @@ -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 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' 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; +export default TileObject diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js index 06377152..dd6e0beb 100644 --- a/frontend/src/components/app/map/elements/TilePlusIcon.js +++ b/frontend/src/components/app/map/elements/TilePlusIcon.js @@ -1,52 +1,48 @@ -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 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' 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 + 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) => ( - - ))} - - ); -}; + 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; +export default TilePlusIcon diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js index c5011656..d1ba6157 100644 --- a/frontend/src/components/app/map/elements/WallSegment.js +++ b/frontend/src/components/app/map/elements/WallSegment.js @@ -1,39 +1,39 @@ -import React from "react"; -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 React from 'react' +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' 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 - ]; - } + 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; +export default WallSegment diff --git a/frontend/src/components/app/map/groups/DatacenterGroup.js b/frontend/src/components/app/map/groups/DatacenterGroup.js index 51e32db6..3d3b9702 100644 --- a/frontend/src/components/app/map/groups/DatacenterGroup.js +++ b/frontend/src/components/app/map/groups/DatacenterGroup.js @@ -1,40 +1,40 @@ -import React from "react"; -import { Group } from "react-konva"; -import GrayContainer from "../../../../containers/app/map/GrayContainer"; -import RoomContainer from "../../../../containers/app/map/RoomContainer"; -import Shapes from "../../../../shapes/index"; +import React from 'react' +import { Group } from 'react-konva' +import GrayContainer from '../../../../containers/app/map/GrayContainer' +import RoomContainer from '../../../../containers/app/map/RoomContainer' +import Shapes from '../../../../shapes/index' const DatacenterGroup = ({ datacenter, interactionLevel }) => { - if (!datacenter) { - return ; - } + if (!datacenter) { + return + } - if (interactionLevel.mode === "BUILDING") { - return ( - - {datacenter.roomIds.map(roomId => ( - - ))} - - ); - } + if (interactionLevel.mode === 'BUILDING') { + return ( + + {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 => )} - - ); -}; + 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; +export default DatacenterGroup diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js index bbb1eb68..10554834 100644 --- a/frontend/src/components/app/map/groups/GridGroup.js +++ b/frontend/src/components/app/map/groups/GridGroup.js @@ -1,41 +1,36 @@ -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 React from 'react' +import { Group, Line } from 'react-konva' +import { GRID_COLOR } from '../../../../util/colors' +import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' -const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i); +const 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; +export default GridGroup diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js index 69d6ac10..708dcf69 100644 --- a/frontend/src/components/app/map/groups/RackGroup.js +++ b/frontend/src/components/app/map/groups/RackGroup.js @@ -1,43 +1,43 @@ -import React from "react"; -import { Group } from "react-konva"; -import RackEnergyFillContainer from "../../../../containers/app/map/RackEnergyFillContainer"; -import RackSpaceFillContainer from "../../../../containers/app/map/RackSpaceFillContainer"; -import Shapes from "../../../../shapes/index"; -import { RACK_BACKGROUND_COLOR } from "../../../../util/colors"; -import { convertLoadToSimulationColor } from "../../../../util/simulation-load"; -import TileObject from "../elements/TileObject"; +import React from 'react' +import { Group } from 'react-konva' +import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFillContainer' +import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer' +import Shapes from '../../../../shapes/index' +import { RACK_BACKGROUND_COLOR } from '../../../../util/colors' +import { convertLoadToSimulationColor } from '../../../../util/simulation-load' +import TileObject from '../elements/TileObject' const RackGroup = ({ tile, inSimulation, rackLoad }) => { - let color = RACK_BACKGROUND_COLOR; - if (inSimulation && rackLoad >= 0) { - color = convertLoadToSimulationColor(rackLoad); - } + 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; +export default RackGroup diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js index c8f0d3db..230e3c9b 100644 --- a/frontend/src/components/app/map/groups/RoomGroup.js +++ b/frontend/src/components/app/map/groups/RoomGroup.js @@ -1,56 +1,56 @@ -import React from "react"; -import { Group } from "react-konva"; -import GrayContainer from "../../../../containers/app/map/GrayContainer"; -import TileContainer from "../../../../containers/app/map/TileContainer"; -import WallContainer from "../../../../containers/app/map/WallContainer"; -import Shapes from "../../../../shapes/index"; +import React from 'react' +import { Group } from 'react-konva' +import GrayContainer from '../../../../containers/app/map/GrayContainer' +import TileContainer from '../../../../containers/app/map/TileContainer' +import WallContainer from '../../../../containers/app/map/WallContainer' +import Shapes from '../../../../shapes/index' const RoomGroup = ({ - room, - interactionLevel, - currentRoomInConstruction, - onClick -}) => { - if (currentRoomInConstruction === room.id) { - return ( - - {room.tileIds.map(tileId => ( - - ))} - - ); - } + room, + interactionLevel, + currentRoomInConstruction, + onClick, + }) => { + if (currentRoomInConstruction === room.id) { + return ( + + {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 => ( - - )); - } - })()} - - - ); -}; + 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; +export default RoomGroup diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js index 8f3953d7..49e2e52b 100644 --- a/frontend/src/components/app/map/groups/TileGroup.js +++ b/frontend/src/components/app/map/groups/TileGroup.js @@ -1,43 +1,40 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group } from "react-konva"; -import RackContainer from "../../../../containers/app/map/RackContainer"; -import Shapes from "../../../../shapes/index"; -import { - ROOM_DEFAULT_COLOR, - ROOM_IN_CONSTRUCTION_COLOR -} from "../../../../util/colors"; -import { convertLoadToSimulationColor } from "../../../../util/simulation-load"; -import RoomTile from "../elements/RoomTile"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group } from 'react-konva' +import RackContainer from '../../../../containers/app/map/RackContainer' +import Shapes from '../../../../shapes/index' +import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors' +import { convertLoadToSimulationColor } from '../../../../util/simulation-load' +import RoomTile from '../elements/RoomTile' const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => { - let tileObject; - switch (tile.objectType) { - case "RACK": - tileObject = ; - break; - default: - tileObject = null; - } + 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; +export default TileGroup diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js index 43de66e8..81c72d94 100644 --- a/frontend/src/components/app/map/groups/WallGroup.js +++ b/frontend/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 Shapes from "../../../../shapes/index"; -import { deriveWallLocations } from "../../../../util/tile-calculations"; -import WallSegment from "../elements/WallSegment"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group } from 'react-konva' +import Shapes from '../../../../shapes/index' +import { deriveWallLocations } from '../../../../util/tile-calculations' +import WallSegment from '../elements/WallSegment' const WallGroup = ({ tiles }) => { - return ( - - {deriveWallLocations(tiles).map((wallSegment, index) => ( - - ))} - - ); -}; + return ( + + {deriveWallLocations(tiles).map((wallSegment, index) => ( + + ))} + + ) +} WallGroup.propTypes = { - tiles: PropTypes.arrayOf(Shapes.Tile).isRequired -}; + tiles: PropTypes.arrayOf(Shapes.Tile).isRequired, +} -export default WallGroup; +export default WallGroup diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js index c39532f1..25c9c412 100644 --- a/frontend/src/components/app/map/layers/HoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js @@ -1,85 +1,85 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Layer } from "react-konva"; -import HoverTile from "../elements/HoverTile"; -import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; +import PropTypes from 'prop-types' +import React from 'react' +import { Layer } from 'react-konva' +import HoverTile from '../elements/HoverTile' +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 - }; + 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, + } - componentDidUpdate() { - if (!this.props.isEnabled()) { - return; + state = { + positionX: -1, + positionY: -1, + validity: false, } - 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) - ); + componentDidUpdate() { + if (!this.props.isEnabled()) { + return + } - if ( - positionX !== this.state.positionX || - positionY !== this.state.positionY - ) { - this.setState({ - positionX, - positionY, - validity: this.props.isValid(positionX, positionY) - }); - } - } + 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), + ) - render() { - if (!this.props.isEnabled()) { - return ; + if ( + positionX !== this.state.positionX || + positionY !== this.state.positionY + ) { + this.setState({ + positionX, + positionY, + validity: this.props.isValid(positionX, positionY), + }) + } } - 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; + render() { + if (!this.props.isEnabled()) { + return + } - 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 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; +export default HoverLayerComponent diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js index 6ad3cb88..1a31f2b9 100644 --- a/frontend/src/components/app/map/layers/MapLayerComponent.js +++ b/frontend/src/components/app/map/layers/MapLayerComponent.js @@ -1,22 +1,22 @@ -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"; +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 }) => ( - - - - - - - -); + + + + + + + +) -export default MapLayerComponent; +export default MapLayerComponent diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js index e7342d3c..31689635 100644 --- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js @@ -1,11 +1,11 @@ -import React from "react"; -import TilePlusIcon from "../elements/TilePlusIcon"; -import HoverLayerComponent from "./HoverLayerComponent"; +import React from 'react' +import TilePlusIcon from '../elements/TilePlusIcon' +import HoverLayerComponent from './HoverLayerComponent' const ObjectHoverLayerComponent = props => ( - - - -); + + + +) -export default ObjectHoverLayerComponent; +export default ObjectHoverLayerComponent diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js index feea5ae5..d3d5e9b2 100644 --- a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js @@ -1,6 +1,6 @@ -import React from "react"; -import HoverLayerComponent from "./HoverLayerComponent"; +import React from 'react' +import HoverLayerComponent from './HoverLayerComponent' -const RoomHoverLayerComponent = props => ; +const RoomHoverLayerComponent = props => -export default RoomHoverLayerComponent; +export default RoomHoverLayerComponent diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js index 33dbe011..7ba8639a 100644 --- a/frontend/src/components/app/sidebars/Sidebar.js +++ b/frontend/src/components/app/sidebars/Sidebar.js @@ -1,50 +1,50 @@ -import classNames from "classnames"; -import React from "react"; -import "./Sidebar.css"; +import classNames from 'classnames' +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; + if (this.state.collapsed) { + return collapseButton + } + return ( +
e.stopPropagation()} + > + {this.props.children} + {collapseButton} +
+ ) } - return ( -
e.stopPropagation()} - > - {this.props.children} - {collapseButton} -
- ); - } } -export default Sidebar; +export default Sidebar diff --git a/frontend/src/components/app/sidebars/Sidebar.sass b/frontend/src/components/app/sidebars/Sidebar.sass index 4d0e5f1e..02e8940d 100644 --- a/frontend/src/components/app/sidebars/Sidebar.sass +++ b/frontend/src/components/app/sidebars/Sidebar.sass @@ -2,49 +2,49 @@ @import ../../../style-globals/_mixins.sass .sidebar-collapse-button - position: absolute - left: 5px - top: 5px - padding: 5px 7px + position: absolute + left: 5px + top: 5px + padding: 5px 7px - background: white - border: solid 1px $gray-semi-light - z-index: 99 + background: white + border: solid 1px $gray-semi-light + z-index: 99 - +clickable - +border-radius(5px) - +transition(background, 200ms) + +clickable + +border-radius(5px) + +transition(background, 200ms) - &.sidebar-collapse-button-right - left: auto - right: 5px - top: 5px + &.sidebar-collapse-button-right + left: auto + right: 5px + top: 5px - &:hover - background: #eeeeee + &:hover + background: #eeeeee .sidebar - position: absolute - top: 0 - left: 0 - width: 350px + position: absolute + top: 0 + left: 0 + width: 350px - z-index: 100 - background: white + z-index: 100 + background: white - border-right: $gray-semi-dark 1px solid + border-right: $gray-semi-dark 1px solid - .sidebar-collapse-button - left: auto - right: -25px + .sidebar-collapse-button + left: auto + right: -25px .sidebar-right - left: auto - right: 0 + left: auto + right: 0 - border-left: $gray-semi-dark 1px solid - border-right: none + border-left: $gray-semi-dark 1px solid + border-right: none - .sidebar-collapse-button-right - left: -25px - right: auto + .sidebar-collapse-button-right + left: -25px + right: auto diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js index 8c9b164b..01005085 100644 --- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js +++ b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js @@ -1,22 +1,22 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const LoadBarComponent = ({ percent, disabled }) => ( -
- Current load -
-
- {percent}% -
+
+ Current load +
+
+ {percent}% +
+
-
-); +) -export default LoadBarComponent; +export default LoadBarComponent diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js index 5f0d40cb..ae52891a 100644 --- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js +++ b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js @@ -1,90 +1,84 @@ -import React from "react"; -import ReactDOM from "react-dom/server"; -import SvgSaver from "svgsaver"; -import { - VictoryAxis, - VictoryChart, - VictoryLabel, - VictoryLine, - VictoryScatter -} from "victory"; -import { convertSecondsToFormattedTime } from "../../../../util/date-time"; +import React from 'react' +import ReactDOM from 'react-dom/server' +import SvgSaver from 'svgsaver' +import { VictoryAxis, VictoryChart, VictoryLabel, 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" - ); - }; + 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 - - -
- ); -}; + return ( +
+ Load over time + + +
+ ) +} const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => ( - - convertSecondsToFormattedTime(tick)} - fixLabelOverlap={true} - label="Simulated Time" - /> - - - - {showCurrentTick ? ( - - } - data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]} - labels={point => - point.y === 1 - ? "Current tick : " + convertSecondsToFormattedTime(currentTick) - : ""} - style={{ - data: { stroke: "#00A6D6", strokeWidth: 4 }, - labels: { fill: "#00A6D6" } - }} - /> - ) : ( - undefined - )} - -); + + convertSecondsToFormattedTime(tick)} + fixLabelOverlap={true} + label="Simulated Time" + /> + + + + {showCurrentTick ? ( + + } + data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]} + labels={point => + point.y === 1 + ? 'Current tick : ' + convertSecondsToFormattedTime(currentTick) + : ''} + style={{ + data: { stroke: '#00A6D6', strokeWidth: 4 }, + labels: { fill: '#00A6D6' }, + }} + /> + ) : ( + undefined + )} + +) const ExportChartComponent = ({ onExport }) => ( - -); + +) -export default LoadChartComponent; +export default LoadChartComponent diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js index bc563dab..54a8b5e9 100644 --- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js +++ b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js @@ -1,23 +1,23 @@ -import React from "react"; +import React from 'react' const ExperimentMetadataComponent = ({ - experimentName, - pathName, - traceName, - schedulerName -}) => ( -
-

{experimentName}

-

- Path: {pathName} -

-

- Trace: {traceName} -

-

- Scheduler: {schedulerName} -

-
-); + experimentName, + pathName, + traceName, + schedulerName, + }) => ( +
+

{experimentName}

+

+ Path: {pathName} +

+

+ Trace: {traceName} +

+

+ Scheduler: {schedulerName} +

+
+) -export default ExperimentMetadataComponent; +export default ExperimentMetadataComponent diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js index 3e4cf810..6ee6a3b9 100644 --- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js +++ b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js @@ -1,40 +1,35 @@ -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 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' const LoadMetricComponent = ({ loadMetric }) => ( -
- Colors represent {LOAD_NAME_MAP[loadMetric]} -
-
- - - +
+ Colors represent {LOAD_NAME_MAP[loadMetric]} +
+
+ + + +
-
-); +) -export default LoadMetricComponent; +export default LoadMetricComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js index 08dbb29a..6e89c40e 100644 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js +++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js @@ -1,22 +1,22 @@ -import React from "react"; -import ExperimentMetadataContainer from "../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer"; -import LoadMetricContainer from "../../../../containers/app/sidebars/simulation/LoadMetricContainer"; -import TraceContainer from "../../../../containers/app/sidebars/simulation/TraceContainer"; -import Sidebar from "../Sidebar"; -import "./SimulationSidebarComponent.css"; +import React from 'react' +import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer' +import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer' +import TraceContainer from '../../../../containers/app/sidebars/simulation/TraceContainer' +import Sidebar from '../Sidebar' +import './SimulationSidebarComponent.css' const SimulationSidebarComponent = () => { - return ( - -
- - -
- -
-
- - ); -}; + return ( + +
+ + +
+ +
+
+ + ) +} -export default SimulationSidebarComponent; +export default SimulationSidebarComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass index 82af97fa..6490cf8d 100644 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass +++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass @@ -1,8 +1,8 @@ .simulation-sidebar-container - display: flex - height: 100% - max-height: 100% + display: flex + height: 100% + max-height: 100% .trace-container - flex: 1 - overflow-y: scroll + flex: 1 + overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/simulation/TaskComponent.js b/frontend/src/components/app/sidebars/simulation/TaskComponent.js index bd917cc9..94617086 100644 --- a/frontend/src/components/app/sidebars/simulation/TaskComponent.js +++ b/frontend/src/components/app/sidebars/simulation/TaskComponent.js @@ -1,58 +1,58 @@ -import approx from "approximate-number"; -import classNames from "classnames"; -import React from "react"; -import { convertSecondsToFormattedTime } from "../../../../util/date-time"; +import approx from 'approximate-number' +import classNames from 'classnames' +import React from 'react' +import { convertSecondsToFormattedTime } from '../../../../util/date-time' const TaskComponent = ({ task, flopsLeft }) => { - let icon; - let progressBarContent; - let percent; - let infoTitle; + 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)} -
    -
    + return ( +
  • +
    +
    {approx(task.totalFlopCount)} FLOP
    + Starts at {convertSecondsToFormattedTime(task.startTick)} +
    +
    -
    -
    - {progressBarContent} -
    -
    -
    -
    • - ); -}; +
    +
    + {progressBarContent} +
    +
    +
    + + ) +} -export default TaskComponent; +export default TaskComponent diff --git a/frontend/src/components/app/sidebars/simulation/TraceComponent.js b/frontend/src/components/app/sidebars/simulation/TraceComponent.js index 2b6559b4..1292219b 100644 --- a/frontend/src/components/app/sidebars/simulation/TraceComponent.js +++ b/frontend/src/components/app/sidebars/simulation/TraceComponent.js @@ -1,20 +1,20 @@ -import React from "react"; -import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer"; +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 => ( - - ))} -
    -
    - ))} -
    -); +
    +

    Trace

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

    Job: {job.name}

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

    - {name} - -

    -); +

    + {name} + +

    +) -export default NameComponent; +export default NameComponent diff --git a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js index 81e510a1..b1def94b 100644 --- a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js @@ -1,31 +1,31 @@ -import React from "react"; -import BuildingSidebarContainer from "../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer"; -import MachineSidebarContainer from "../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer"; -import RackSidebarContainer from "../../../../containers/app/sidebars/topology/rack/RackSidebarContainer"; -import RoomSidebarContainer from "../../../../containers/app/sidebars/topology/room/RoomSidebarContainer"; -import Sidebar from "../Sidebar"; +import React from 'react' +import BuildingSidebarContainer from '../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer' +import MachineSidebarContainer from '../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer' +import RackSidebarContainer from '../../../../containers/app/sidebars/topology/rack/RackSidebarContainer' +import RoomSidebarContainer from '../../../../containers/app/sidebars/topology/room/RoomSidebarContainer' +import Sidebar from '../Sidebar' const TopologySidebarComponent = ({ interactionLevel }) => { - let sidebarContent; + 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; +export default TopologySidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index f16c19f0..00965c18 100644 --- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -1,20 +1,21 @@ -import React from "react"; -import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer"; +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! + return ( +
    +

    Building

    + {inSimulation ? ( +
    + + Click on individual rooms to see their stats! +
    + ) : ( + + )}
    - ) : ( - - )} -
    - ); -}; + ) +} -export default BuildingSidebarComponent; +export default BuildingSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js index 7b049642..362483bf 100644 --- a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js @@ -1,31 +1,31 @@ -import React from "react"; +import React from 'react' const NewRoomConstructionComponent = ({ - onStart, - onFinish, - onCancel, - currentRoomInConstruction -}) => { - if (currentRoomInConstruction === -1) { + onStart, + onFinish, + onCancel, + currentRoomInConstruction, + }) => { + if (currentRoomInConstruction === -1) { + return ( +
    + + Construct a new room +
    + ) + } return ( -
    - - Construct a new room -
    - ); - } - return ( -
    -
    - - Finalize new room -
    -
    - - Cancel construction -
    -
    - ); -}; +
    +
    + + Finalize new room +
    +
    + + Cancel construction +
    +
    + ) +} -export default NewRoomConstructionComponent; +export default NewRoomConstructionComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js index 7f56aca0..d7ce24bc 100644 --- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToRackComponent = ({ onClick }) => ( -
    - - Back to rack -
    -); +
    + + Back to rack +
    +) -export default BackToRackComponent; +export default BackToRackComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js index d8774bf9..b9aa6251 100644 --- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteMachineComponent = ({ onClick }) => ( -
    - - Delete this machine -
    -); +
    + + Delete this machine +
    +) -export default DeleteMachineComponent; +export default DeleteMachineComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js index 0ad8b79c..70be6968 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react' const MachineNameComponent = ({ position }) => ( -

    Machine at slot {position}

    -); +

    Machine at slot {position}

    +) -export default MachineNameComponent; +export default MachineNameComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index 5ccaf25c..66c8c84f 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -1,27 +1,27 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToRackContainer from "../../../../../containers/app/sidebars/topology/machine/BackToRackContainer"; -import DeleteMachineContainer from "../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer"; -import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer"; -import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer' +import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer' +import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer' +import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer' const MachineSidebarComponent = ({ inSimulation, machineId }) => { - return ( -
    - - - {inSimulation ? ( + return (
    - - + + + {inSimulation ? ( +
    + + +
    + ) : ( + + )} +
    - ) : ( - - )} - -
    - ); -}; + ) +} -export default MachineSidebarComponent; +export default MachineSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js index 0c903228..57e219fd 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js @@ -1,46 +1,46 @@ -import PropTypes from "prop-types"; -import React from "react"; +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; +export default UnitAddComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index 7c27043d..93ac1cdd 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -1,78 +1,78 @@ -import React from "react"; -import jQuery from "../../../../../util/jquery"; +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 ( -
  • - + 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.unit.family + + ' ' + + this.props.unit.model + + ' ' + + this.props.unit.generation} - + - {this.props.inSimulation ? ( - undefined - ) : ( - - + {this.props.inSimulation ? ( + undefined + ) : ( + + - )} + )} -
    • - ); - } + + ) + } } -export default UnitComponent; +export default UnitComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js index 38df806b..31d4db51 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,29 +1,29 @@ -import React from "react"; -import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer"; +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 +
        + {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; +export default UnitListComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index 0683c796..df7eeb77 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -1,65 +1,65 @@ -import React from "react"; -import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer"; -import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer"; +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 : } - -
    +
    + +
    +
    + {inSimulation ? undefined : } + +
    +
    + {inSimulation ? undefined : } + +
    +
    + {inSimulation ? undefined : } + +
    +
    + {inSimulation ? undefined : } + +
    +
    -
    -); +) -export default UnitTabsComponent; +export default UnitTabsComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js index 6bcf4088..345674d1 100644 --- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToRoomComponent = ({ onClick }) => ( -
    - - Back to room -
    -); +
    + + Back to room +
    +) -export default BackToRoomComponent; +export default BackToRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js index d8aa7634..b1672764 100644 --- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteRackComponent = ({ onClick }) => ( -
    - - Delete this rack -
    -); +
    + + Delete this rack +
    +) -export default DeleteRackComponent; +export default DeleteRackComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index d86f9fee..f182a78c 100644 --- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,19 +1,19 @@ -import React from "react"; +import React from 'react' const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( -
  • +
  • {position} - {inSimulation ? ( - Empty Slot - ) : ( - - )} -
    • -); + {inSimulation ? ( + Empty Slot + ) : ( + + )} + +) -export default EmptySlotComponent; +export default EmptySlotComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js index 2521f4a2..0a1d1065 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,78 +1,78 @@ -import React from "react"; -import Shapes from "../../../../../shapes"; -import { convertLoadToSimulationColor } from "../../../../../util/simulation-load"; +import React from 'react' +import Shapes from '../../../../../shapes' +import { convertLoadToSimulationColor } from '../../../../../util/simulation-load' const UnitIcon = ({ id, type }) => ( -
    - {"Machine -
    -); +
    + {'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; + 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 ? ( - + 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 - )} -
    -
    • - ); -}; + ) : ( + undefined + )} +
    + + ) +} MachineComponent.propTypes = { - machine: Shapes.Machine -}; + machine: Shapes.Machine, +} -export default MachineComponent; +export default MachineComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js index d5521557..a381771c 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -1,26 +1,26 @@ -import React from "react"; -import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer"; -import MachineContainer from "../../../../../containers/app/sidebars/topology/rack/MachineContainer"; -import "./MachineListComponent.css"; +import React from 'react' +import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer' +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 ( - - ); - } - })} -
    - ); -}; + return ( +
      + {machineIds.map((machineId, index) => { + if (machineId === null) { + return + } else { + return ( + + ) + } + })} +
    + ) +} -export default MachineListComponent; +export default MachineListComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass index bbcfe696..11b82c93 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass @@ -1,2 +1,2 @@ .machine-list li - min-height: 64px + min-height: 64px diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js index 5e095823..1888b69d 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import NameComponent from "../NameComponent"; +import React from 'react' +import NameComponent from '../NameComponent' const RackNameComponent = ({ rackName, onEdit }) => ( - -); + +) -export default RackNameComponent; +export default RackNameComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index f832b9b9..47d99254 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -1,34 +1,34 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToRoomContainer from "../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer"; -import DeleteRackContainer from "../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer"; -import MachineListContainer from "../../../../../containers/app/sidebars/topology/rack/MachineListContainer"; -import RackNameContainer from "../../../../../containers/app/sidebars/topology/rack/RackNameContainer"; -import "./RackSidebarComponent.css"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToRoomContainer from '../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer' +import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer' +import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer' +import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer' +import './RackSidebarComponent.css' const RackSidebarComponent = ({ inSimulation, rackId }) => { - return ( -
    -
    - - - {inSimulation ? ( -
    - - -
    - ) : ( -
    - -
    - )} -
    -
    - -
    -
    - ); -}; + return ( +
    +
    + + + {inSimulation ? ( +
    + + +
    + ) : ( +
    + +
    + )} +
    +
    + +
    +
    + ) +} -export default RackSidebarComponent; +export default RackSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass index 822804bc..29fec02a 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass @@ -1,11 +1,11 @@ .rack-sidebar-container - display: flex - height: 100% - max-height: 100% + display: flex + height: 100% + max-height: 100% .rack-sidebar-header-container - flex: 0 + flex: 0 .machine-list-container - flex: 1 - overflow-y: scroll + flex: 1 + overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js index 0409dbdd..7bd8c2f8 100644 --- a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToBuildingComponent = ({ onClick }) => ( -
    - - Back to building -
    -); +
    + + Back to building +
    +) -export default BackToBuildingComponent; +export default BackToBuildingComponent diff --git a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js index 3e3b3b36..2be752b5 100644 --- a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteRoomComponent = ({ onClick }) => ( -
    - - Delete this room -
    -); +
    + + Delete this room +
    +) -export default DeleteRoomComponent; +export default DeleteRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js index c3b9f0ad..672a191f 100644 --- a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js @@ -1,27 +1,27 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const EditRoomComponent = ({ - onEdit, - onFinish, - isEditing, - isInRackConstructionMode -}) => - isEditing ? ( -
    - - Finish editing room -
    - ) : ( -
    (isInRackConstructionMode ? undefined : onEdit())} - > - - Edit the tiles of this room -
    - ); + onEdit, + onFinish, + isEditing, + isInRackConstructionMode, + }) => + isEditing ? ( +
    + + Finish editing room +
    + ) : ( +
    (isInRackConstructionMode ? undefined : onEdit())} + > + + Edit the tiles of this room +
    + ) -export default EditRoomComponent; +export default EditRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js index 06b8a2aa..42b7357b 100644 --- a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js @@ -1,32 +1,32 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const RackConstructionComponent = ({ - onStart, - onStop, - inRackConstructionMode, - isEditingRoom -}) => { - if (inRackConstructionMode) { - return ( -
    - - Stop rack construction -
    - ); - } + onStart, + onStop, + inRackConstructionMode, + isEditingRoom, + }) => { + if (inRackConstructionMode) { + return ( +
    + + Stop rack construction +
    + ) + } - return ( -
    (isEditingRoom ? undefined : onStart())} - > - - Start rack construction -
    - ); -}; + return ( +
    (isEditingRoom ? undefined : onStart())} + > + + Start rack construction +
    + ) +} -export default RackConstructionComponent; +export default RackConstructionComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js index 11b88edd..409d2eef 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import NameComponent from "../NameComponent"; +import React from 'react' +import NameComponent from '../NameComponent' const RoomNameComponent = ({ roomName, onEdit }) => ( - -); + +) -export default RoomNameComponent; +export default RoomNameComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js index 275f9624..d9865744 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -1,38 +1,38 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToBuildingContainer from "../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer"; -import DeleteRoomContainer from "../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer"; -import EditRoomContainer from "../../../../../containers/app/sidebars/topology/room/EditRoomContainer"; -import RackConstructionContainer from "../../../../../containers/app/sidebars/topology/room/RackConstructionContainer"; -import RoomNameContainer from "../../../../../containers/app/sidebars/topology/room/RoomNameContainer"; -import RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToBuildingContainer from '../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer' +import DeleteRoomContainer from '../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer' +import EditRoomContainer from '../../../../../containers/app/sidebars/topology/room/EditRoomContainer' +import RackConstructionContainer from '../../../../../containers/app/sidebars/topology/room/RackConstructionContainer' +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 = ; - } + let allowedObjects + if (!inSimulation && roomType === 'SERVER') { + allowedObjects = + } - return ( -
    - - - - {inSimulation ? ( + return (
    - - + + + + {inSimulation ? ( +
    + + +
    + ) : ( +
    + {allowedObjects} + + +
    + )}
    - ) : ( -
    - {allowedObjects} - - -
    - )} -
    - ); -}; + ) +} -export default RoomSidebarComponent; +export default RoomSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js index 46d91c2c..b662307c 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import { ROOM_TYPE_TO_NAME_MAP } from "../../../../../util/room-types"; +import React from 'react' +import { ROOM_TYPE_TO_NAME_MAP } from '../../../../../util/room-types' const RoomTypeComponent = ({ roomType }) => ( -

    {ROOM_TYPE_TO_NAME_MAP[roomType]}

    -); +

    {ROOM_TYPE_TO_NAME_MAP[roomType]}

    +) -export default RoomTypeComponent; +export default RoomTypeComponent diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js index 1a9b0ced..7968c68d 100644 --- a/frontend/src/components/app/timeline/PlayButtonComponent.js +++ b/frontend/src/components/app/timeline/PlayButtonComponent.js @@ -1,30 +1,30 @@ -import React from "react"; +import React from 'react' const PlayButtonComponent = ({ - isPlaying, - currentTick, - lastSimulatedTick, - onPlay, - onPause -}) => ( -
    { - if (isPlaying) { - onPause(); - } else { - if (currentTick !== lastSimulatedTick) { - onPlay(); - } - } - }} - > - {isPlaying ? ( - - ) : ( - - )} -
    -); + isPlaying, + currentTick, + lastSimulatedTick, + onPlay, + onPause, + }) => ( +
    { + if (isPlaying) { + onPause() + } else { + if (currentTick !== lastSimulatedTick) { + onPlay() + } + } + }} + > + {isPlaying ? ( + + ) : ( + + )} +
    +) -export default PlayButtonComponent; +export default PlayButtonComponent diff --git a/frontend/src/components/app/timeline/Timeline.sass b/frontend/src/components/app/timeline/Timeline.sass index 4c99a218..2d2cb979 100644 --- a/frontend/src/components/app/timeline/Timeline.sass +++ b/frontend/src/components/app/timeline/Timeline.sass @@ -7,110 +7,110 @@ $border-width: 1px $timeline-border: $border-width solid $gray-semi-dark .timeline-bar - display: block - position: absolute - left: 0 - bottom: 20px - width: 100% - text-align: center - z-index: 2000 + display: block + position: absolute + left: 0 + bottom: 20px + width: 100% + text-align: center + z-index: 2000 - pointer-events: none + pointer-events: none .timeline-container - display: inline-block - margin: 0 auto - text-align: left + display: inline-block + margin: 0 auto + text-align: left - width: $container-size + width: $container-size .timeline-labels - display: block - height: 25px - line-height: 25px + display: block + height: 25px + line-height: 25px - div - display: inline-block + div + display: inline-block - .start-time-label - margin-left: $play-btn-size - $border-width - padding-left: 4px + .start-time-label + margin-left: $play-btn-size - $border-width + padding-left: 4px - .end-time-label - padding-right: 4px - float: right + .end-time-label + padding-right: 4px + float: right .timeline-controls - display: flex - border: $timeline-border - overflow: hidden + display: flex + border: $timeline-border + overflow: hidden - pointer-events: all + pointer-events: all - +border-radius($standard-border-radius) + +border-radius($standard-border-radius) - .play-btn - width: $play-btn-size - height: $play-btn-size + $border-width - line-height: $play-btn-size + $border-width - text-align: center - float: left - margin-top: -$border-width + .play-btn + width: $play-btn-size + height: $play-btn-size + $border-width + line-height: $play-btn-size + $border-width + text-align: center + float: left + margin-top: -$border-width - font-size: 16pt - background: #333 - color: #eee + font-size: 16pt + background: #333 + color: #eee - +transition(background, $transition-length) - +user-select - +clickable + +transition(background, $transition-length) + +user-select + +clickable - .play-btn:hover - background: #656565 + .play-btn:hover + background: #656565 - .play-btn:active - background: #000 + .play-btn:active + background: #000 - .timeline - position: relative - flex: 1 - height: $play-btn-size - line-height: $play-btn-size - float: right + .timeline + position: relative + flex: 1 + height: $play-btn-size + line-height: $play-btn-size + float: right - background: $blue-light + background: $blue-light - z-index: 500 + z-index: 500 - div - +transition(all, $transition-length) + div + +transition(all, $transition-length) - .time-marker - position: absolute - top: 0 - left: 0 + .time-marker + position: absolute + top: 0 + left: 0 - width: 6px - height: 100% + width: 6px + height: 100% - background: $blue-very-dark + background: $blue-very-dark - +border-radius(2px) + +border-radius(2px) - z-index: 503 + z-index: 503 - pointer-events: none + pointer-events: none - .section-marker - position: absolute - top: 0 - left: 0 + .section-marker + position: absolute + top: 0 + left: 0 - width: 3px - height: 100% + width: 3px + height: 100% - background: #222222 + background: #222222 - z-index: 504 + z-index: 504 - pointer-events: none + pointer-events: none diff --git a/frontend/src/components/app/timeline/TimelineComponent.js b/frontend/src/components/app/timeline/TimelineComponent.js index 0f88b8f4..c183c0e8 100644 --- a/frontend/src/components/app/timeline/TimelineComponent.js +++ b/frontend/src/components/app/timeline/TimelineComponent.js @@ -1,37 +1,37 @@ -import React from "react"; -import TimelineControlsContainer from "../../../containers/app/timeline/TimelineControlsContainer"; -import TimelineLabelsContainer from "../../../containers/app/timeline/TimelineLabelsContainer"; -import "./Timeline.css"; +import React from 'react' +import TimelineControlsContainer from '../../../containers/app/timeline/TimelineControlsContainer' +import TimelineLabelsContainer from '../../../containers/app/timeline/TimelineLabelsContainer' +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; +export default TimelineComponent diff --git a/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js index f3d55154..5412b1f5 100644 --- a/frontend/src/components/app/timeline/TimelineControlsComponent.js +++ b/frontend/src/components/app/timeline/TimelineControlsComponent.js @@ -1,49 +1,49 @@ -import React from "react"; -import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer"; -import { convertTickToPercentage } from "../../../util/timeline"; +import React from 'react' +import PlayButtonContainer from '../../../containers/app/timeline/PlayButtonContainer' +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; +export default TimelineControlsComponent diff --git a/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js index 6943a86f..55818d24 100644 --- a/frontend/src/components/app/timeline/TimelineLabelsComponent.js +++ b/frontend/src/components/app/timeline/TimelineLabelsComponent.js @@ -1,15 +1,15 @@ -import React from "react"; -import { convertSecondsToFormattedTime } from "../../../util/date-time"; +import React from 'react' +import { convertSecondsToFormattedTime } from '../../../util/date-time' const TimelineLabelsComponent = ({ currentTick, lastSimulatedTick }) => ( -
    -
    - {convertSecondsToFormattedTime(currentTick)} +
    +
    + {convertSecondsToFormattedTime(currentTick)} +
    +
    + {convertSecondsToFormattedTime(lastSimulatedTick)} +
    -
    - {convertSecondsToFormattedTime(lastSimulatedTick)} -
    -
    -); +) -export default TimelineLabelsComponent; +export default TimelineLabelsComponent diff --git a/frontend/src/components/experiments/ExperimentListComponent.js b/frontend/src/components/experiments/ExperimentListComponent.js index 2f7106e5..55a7ff6d 100644 --- a/frontend/src/components/experiments/ExperimentListComponent.js +++ b/frontend/src/components/experiments/ExperimentListComponent.js @@ -1,59 +1,59 @@ -import PropTypes from "prop-types"; -import React from "react"; -import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer"; +import PropTypes from 'prop-types' +import React from 'react' +import ExperimentRowContainer from '../../containers/experiments/ExperimentRowContainer' const ExperimentListComponent = ({ experimentIds, loading }) => { - let alert; + let alert - if (loading) { - alert = ( -
    - - Loading Experiments... -
    - ); - } else if (experimentIds.length === 0 && !loading) { - alert = ( -
    - - No experiments here yet... Add some with the button - below! -
    - ); - } + if (loading) { + alert = ( +
    + + Loading Experiments... +
    + ) + } else if (experimentIds.length === 0 && !loading) { + alert = ( +
    + + No experiments here yet... Add some with the button + below! +
    + ) + } - return ( -
    - {alert ? ( - alert - ) : ( - - - - - - - - - - - {experimentIds.map(experimentId => ( - - ))} - -
    NamePathTraceScheduler -
    - )} -
    - ); -}; + return ( +
    + {alert ? ( + alert + ) : ( + + + + + + + + + + + {experimentIds.map(experimentId => ( + + ))} + +
    NamePathTraceScheduler +
    + )} +
    + ) +} ExperimentListComponent.propTypes = { - experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired, - loading: PropTypes.bool -}; + experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired, + loading: PropTypes.bool, +} -export default ExperimentListComponent; +export default ExperimentListComponent diff --git a/frontend/src/components/experiments/ExperimentRowComponent.js b/frontend/src/components/experiments/ExperimentRowComponent.js index e71c6a00..8a2638a7 100644 --- a/frontend/src/components/experiments/ExperimentRowComponent.js +++ b/frontend/src/components/experiments/ExperimentRowComponent.js @@ -1,40 +1,40 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Link } from "react-router-dom"; -import Shapes from "../../shapes/index"; +import PropTypes from 'prop-types' +import React from 'react' +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)} - > - -
    - - -); + + {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.string.isRequired, +} -export default ExperimentRowComponent; +export default ExperimentRowComponent diff --git a/frontend/src/components/experiments/NewExperimentButtonComponent.js b/frontend/src/components/experiments/NewExperimentButtonComponent.js index 651172e3..2902825d 100644 --- a/frontend/src/components/experiments/NewExperimentButtonComponent.js +++ b/frontend/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 +
    +
    + + New Experiment +
    -
    -); +) NewExperimentButtonComponent.propTypes = { - onClick: PropTypes.func.isRequired -}; + onClick: PropTypes.func.isRequired, +} -export default NewExperimentButtonComponent; +export default NewExperimentButtonComponent diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js index f6c9c5d8..1ac2202c 100644 --- a/frontend/src/components/home/ContactSection.js +++ b/frontend/src/components/home/ContactSection.js @@ -1,64 +1,64 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; -import "./ContactSection.css"; -import ContentSection from "./ContentSection"; +import React from 'react' +import FontAwesome from 'react-fontawesome' +import './ContactSection.css' +import ContentSection from './ContentSection' const ContactSection = () => ( - -
    -
    - - - - -
    -
    - 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. -
    -
    - -); + +
    +
    + + + + +
    +
    + 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; +export default ContactSection diff --git a/frontend/src/components/home/ContactSection.sass b/frontend/src/components/home/ContactSection.sass index 2cde7391..997f8d98 100644 --- a/frontend/src/components/home/ContactSection.sass +++ b/frontend/src/components/home/ContactSection.sass @@ -1,15 +1,15 @@ .contact-section - background-color: #444 - color: #ddd - - a + background-color: #444 color: #ddd - a:hover - color: #fff + a + color: #ddd + + a:hover + color: #fff - .tudelft-icon - height: 100px + .tudelft-icon + height: 100px - .disclaimer - color: #cccccc + .disclaimer + color: #cccccc diff --git a/frontend/src/components/home/ContentSection.js b/frontend/src/components/home/ContentSection.js index 2e24ee10..ba2e4ec3 100644 --- a/frontend/src/components/home/ContentSection.js +++ b/frontend/src/components/home/ContentSection.js @@ -1,19 +1,19 @@ -import classNames from "classnames"; -import PropTypes from "prop-types"; -import React from "react"; -import "./ContentSection.css"; +import classNames from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' +import './ContentSection.css' const ContentSection = ({ name, title, children }) => ( -
    -
    -

    {title}

    - {children} +
    +
    +

    {title}

    + {children} +
    -
    -); +) ContentSection.propTypes = { - name: PropTypes.string.isRequired -}; + name: PropTypes.string.isRequired, +} -export default ContentSection; +export default ContentSection diff --git a/frontend/src/components/home/ContentSection.sass b/frontend/src/components/home/ContentSection.sass index 67541179..a4c8bd66 100644 --- a/frontend/src/components/home/ContentSection.sass +++ b/frontend/src/components/home/ContentSection.sass @@ -1,9 +1,9 @@ @import ../../style-globals/_variables.sass .content-section - padding-top: 50px - padding-bottom: 100px - text-align: center + padding-top: 50px + padding-bottom: 150px + text-align: center - h1 - margin-bottom: 30px + h1 + margin-bottom: 30px diff --git a/frontend/src/components/home/IntroSection.js b/frontend/src/components/home/IntroSection.js index 59f5face..a799272a 100644 --- a/frontend/src/components/home/IntroSection.js +++ b/frontend/src/components/home/IntroSection.js @@ -1,40 +1,40 @@ -import React from "react"; +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
      • -
    +
    +
    +
    +
    +

    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
      • +
    +
    +
    - -
    -

    OpenDC provides...

    -
      -
    • Collaborative online DC modeling
      • -
    • Diverse and effective DC simulation
      • -
    • Exploratory DC performance feedback
      • -
    -
    -
    -
    -
    -); + +) -export default IntroSection; +export default IntroSection diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js index 8a5312b3..d519e840 100644 --- a/frontend/src/components/home/JumbotronHeader.js +++ b/frontend/src/components/home/JumbotronHeader.js @@ -1,20 +1,20 @@ -import React from "react"; -import "./JumbotronHeader.css"; +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; +export default JumbotronHeader diff --git a/frontend/src/components/home/JumbotronHeader.sass b/frontend/src/components/home/JumbotronHeader.sass index b88b79f7..1b6a89fd 100644 --- a/frontend/src/components/home/JumbotronHeader.sass +++ b/frontend/src/components/home/JumbotronHeader.sass @@ -1,24 +1,24 @@ .jumbotron-header - background: #00A6D6 + background: #00A6D6 .jumbotron - background-color: inherit - margin-bottom: 0 + background-color: inherit + margin-bottom: 0 - padding-top: 120px - padding-bottom: 120px + padding-top: 120px + padding-bottom: 120px - img - max-width: 110px + img + max-width: 110px - h1 - color: #fff - font-size: 4.5em + h1 + color: #fff + font-size: 4.5em - .dc - color: #fff - font-weight: bold + .dc + color: #fff + font-weight: bold - .lead - color: #fff - font-size: 1.4em + .lead + color: #fff + font-size: 1.4em diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js index 17834b0b..cdbb5a44 100644 --- a/frontend/src/components/home/ModelingSection.js +++ b/frontend/src/components/home/ModelingSection.js @@ -1,24 +1,24 @@ -import React from "react"; -import ScreenshotSection from "./ScreenshotSection"; +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; +export default ModelingSection diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js index 42b8ac77..fdb55020 100644 --- a/frontend/src/components/home/ScreenshotSection.js +++ b/frontend/src/components/home/ScreenshotSection.js @@ -1,32 +1,32 @@ -import classNames from "classnames"; -import React from "react"; -import ContentSection from "./ContentSection"; -import "./ScreenshotSection.css"; +import classNames from 'classnames' +import React from 'react' +import ContentSection from './ContentSection' +import './ScreenshotSection.css' const ScreenshotSection = ({ - name, - title, - imageUrl, - caption, - imageIsRight, - children -}) => ( - -
    -
    - {children} -
    -
    - {caption} -
    {caption}
    -
    -
    -     -); + name, + title, + imageUrl, + caption, + imageIsRight, + children, + }) => ( + +
    +
    + {children} +
    +
    + {caption}/ +
    {caption}
    +
    +
    +     +) -export default ScreenshotSection; +export default ScreenshotSection diff --git a/frontend/src/components/home/ScreenshotSection.sass b/frontend/src/components/home/ScreenshotSection.sass index a349ad48..2f454cb4 100644 --- a/frontend/src/components/home/ScreenshotSection.sass +++ b/frontend/src/components/home/ScreenshotSection.sass @@ -1,5 +1,5 @@ .screenshot - outline: 2px black solid - padding-left: 0 - padding-right: 0 - margin-bottom: 5px + outline: 2px black solid + padding-left: 0 + padding-right: 0 + margin-bottom: 5px diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js index 3961e549..0fa21c34 100644 --- a/frontend/src/components/home/SimulationSection.js +++ b/frontend/src/components/home/SimulationSection.js @@ -1,25 +1,25 @@ -import React from "react"; -import ScreenshotSection from "./ScreenshotSection"; +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; +export default ModelingSection diff --git a/frontend/src/components/home/StakeholderSection.js b/frontend/src/components/home/StakeholderSection.js index 6d25fd86..e547ebe0 100644 --- a/frontend/src/components/home/StakeholderSection.js +++ b/frontend/src/components/home/StakeholderSection.js @@ -1,42 +1,42 @@ -import React from "react"; -import ContentSection from "./ContentSection"; +import React from 'react' +import ContentSection from './ContentSection' const Stakeholder = ({ name, title, subtitle }) => ( -
    - {title} -
    -

    {title}

    -

    {subtitle}

    +
    + {title} +
    +

    {title}

    +

    {subtitle}

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

    {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; +export default TeamSection diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js index fdcfc522..13d8ca02 100644 --- a/frontend/src/components/home/TechnologiesSection.js +++ b/frontend/src/components/home/TechnologiesSection.js @@ -1,42 +1,42 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; -import ContentSection from "./ContentSection"; +import React from 'react' +import FontAwesome from 'react-fontawesome' +import ContentSection from './ContentSection' const TechnologiesSection = () => ( - -
      -
    • + +
        +
      • - + Browser - JavaScript, React, Redux, Konva -
        • -
      • + JavaScript, React, Redux, Konva +
        • +
      • - + Server - + Python, Flask, FlaskSocketIO, OpenAPI -
        • -
      • +
        • +
      • - + Database - MariaDB -
        • -
      • + MariaDB +
        • +
      • - + Simulator - Kotlin -
        • -
      -       -); + Kotlin +
      • +
    +     +) -export default TechnologiesSection; +export default TechnologiesSection diff --git a/frontend/src/components/modals/ConfirmationModal.js b/frontend/src/components/modals/ConfirmationModal.js index abdce5ac..589047dc 100644 --- a/frontend/src/components/modals/ConfirmationModal.js +++ b/frontend/src/components/modals/ConfirmationModal.js @@ -1,37 +1,37 @@ -import PropTypes from "prop-types"; -import React from "react"; -import Modal from "./Modal"; +import PropTypes from 'prop-types' +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; +export default ConfirmationModal diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js index 19337db8..ec6080f2 100644 --- a/frontend/src/components/modals/Modal.js +++ b/frontend/src/components/modals/Modal.js @@ -1,132 +1,132 @@ -import classNames from "classnames"; -import PropTypes from "prop-types"; -import React from "react"; -import jQuery from "../../util/jquery"; +import classNames from 'classnames' +import PropTypes from 'prop-types' +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(props) { - super(props); - this.id = "modal-" + Modal.idCounter++; - } + constructor(props) { + super(props) + this.id = 'modal-' + Modal.idCounter++ + } - componentDidMount() { - this.visible = this.props.show; - this.openOrCloseModal(); + 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(); - }); - } + // 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() + }) + } - componentDidUpdate() { - this.visible = this.props.show; - this.openOrCloseModal(); - } + componentDidUpdate() { + this.visible = this.props.show + this.openOrCloseModal() + } - onSubmit() { - if (this.visible) { - this.props.onSubmit(); - this.visible = false; - this.closeModal(); + onSubmit() { + if (this.visible) { + this.props.onSubmit() + this.visible = false + this.closeModal() + } } - } - onCancel() { - if (this.visible) { - this.props.onCancel(); - this.visible = false; - this.closeModal(); + onCancel() { + if (this.visible) { + this.props.onCancel() + this.visible = false + this.closeModal() + } } - } - openModal() { - jQuery("#" + this.id).modal("show"); - } + openModal() { + jQuery('#' + this.id).modal('show') + } - closeModal() { - jQuery("#" + this.id).modal("hide"); - } + closeModal() { + jQuery('#' + this.id).modal('hide') + } - openOrCloseModal() { - if (this.visible) { - this.openModal(); - } else { - this.closeModal(); + openOrCloseModal() { + if (this.visible) { + this.openModal() + } else { + this.closeModal() + } } - } - render() { - return ( -