diff options
270 files changed, 7457 insertions, 7602 deletions
@@ -17,7 +17,6 @@ RUN pip install -r /opendc/web-server/requirements.txt RUN cd /opendc/frontend \ && rm -rf ./build \ && yarn \ - && export REACT_APP_OAUTH_CLIENT_ID=$OPENDC_OAUTH_CLIENT_ID \ && yarn build # Set working directory diff --git a/docker-compose.yml b/docker-compose.yml index 0796fa4c..d3493e97 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -17,6 +17,7 @@ services: - OPENDC_DB - OPENDC_DB_USERNAME - OPENDC_DB_PASSWORD + - OPENDC_DB_HOST=mongo - OPENDC_FLASK_SECRET - OPENDC_OAUTH_CLIENT_ID - REACT_APP_OAUTH_CLIENT_ID="${OPENDC_OAUTH_CLIENT_ID}" 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 = () => ( - <div className="display-4"> - <FontAwesome name="refresh" className="mr-4" spin /> - Loading your datacenter... - </div> -); + <div className="display-4"> + <FontAwesome name="refresh" className="mr-4" spin/> + Loading your datacenter... + </div> +) -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 ( - <Shortcuts - name="MAP" - handler={this.handleShortcuts.bind(this)} - targetNodeSelector="body" - > - <Stage - ref={stage => { - this.stage = stage; - }} - width={this.props.mapDimensions.width} - height={this.props.mapDimensions.height} - onMouseMove={this.updateMousePosition.bind(this)} - > - <Provider store={store}> - <MapLayer /> - <RoomHoverLayer - mouseX={this.state.mouseX} - mouseY={this.state.mouseY} - /> - <ObjectHoverLayer - mouseX={this.state.mouseX} - mouseY={this.state.mouseY} - /> - </Provider> - </Stage> - </Shortcuts> - ); - } + render() { + return ( + <Shortcuts + name="MAP" + handler={this.handleShortcuts.bind(this)} + targetNodeSelector="body" + > + <Stage + ref={stage => { + this.stage = stage + }} + width={this.props.mapDimensions.width} + height={this.props.mapDimensions.height} + onMouseMove={this.updateMousePosition.bind(this)} + > + <Provider store={store}> + <MapLayer/> + <RoomHoverLayer + mouseX={this.state.mouseX} + mouseY={this.state.mouseY} + /> + <ObjectHoverLayer + mouseX={this.state.mouseX} + mouseY={this.state.mouseY} + /> + </Provider> + </Stage> + </Shortcuts> + ) + } } -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 = () => ( - <button - className="btn btn-success btn-circle btn-sm" - title="Export Canvas to PNG Image" - onClick={() => window["exportCanvasToImage"]()} - > - <span className="fa fa-camera" /> - </button> -); + <button + className="btn btn-success btn-circle btn-sm" + title="Export Canvas to PNG Image" + onClick={() => window['exportCanvasToImage']()} + > + <span className="fa fa-camera"/> + </button> +) -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 }) => ( - <div - className="scale-indicator" - style={{ width: TILE_SIZE_IN_PIXELS * scale }} - > - {TILE_SIZE_IN_METERS}m - </div> -); + <div + className="scale-indicator" + style={{ width: TILE_SIZE_IN_PIXELS * scale }} + > + {TILE_SIZE_IN_METERS}m + </div> +) -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 = () => ( - <div className="tool-panel"> - <ZoomControlContainer /> - <ExportCanvasComponent /> - </div> -); + <div className="tool-panel"> + <ZoomControlContainer/> + <ExportCanvasComponent/> + </div> +) -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 ( - <span> + return ( + <span> <button - className="btn btn-default btn-circle btn-sm mr-1" - title="Zoom in" - onClick={() => zoomInOnCenter(true)} + className="btn btn-default btn-circle btn-sm mr-1" + title="Zoom in" + onClick={() => zoomInOnCenter(true)} > - <span className="fa fa-plus" /> + <span className="fa fa-plus"/> </button> <button - className="btn btn-default btn-circle btn-sm mr-1" - title="Zoom out" - onClick={() => zoomInOnCenter(false)} + className="btn btn-default btn-circle btn-sm mr-1" + title="Zoom out" + onClick={() => zoomInOnCenter(false)} > - <span className="fa fa-minus" /> + <span className="fa fa-minus"/> </button> </span> - ); -}; + ) +} -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 = () => ( - <Rect - x={0} - y={0} - width={MAP_SIZE_IN_PIXELS} - height={MAP_SIZE_IN_PIXELS} - fill={BACKDROP_COLOR} - /> -); + <Rect + x={0} + y={0} + width={MAP_SIZE_IN_PIXELS} + height={MAP_SIZE_IN_PIXELS} + fill={BACKDROP_COLOR} + /> +) -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 }) => ( - <Rect - x={0} - y={0} - width={MAP_SIZE_IN_PIXELS} - height={MAP_SIZE_IN_PIXELS} - fill={GRAYED_OUT_AREA_COLOR} - onClick={onClick} - /> -); + <Rect + x={0} + y={0} + width={MAP_SIZE_IN_PIXELS} + height={MAP_SIZE_IN_PIXELS} + fill={GRAYED_OUT_AREA_COLOR} + onClick={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 }) => ( - <Rect - x={pixelX} - y={pixelY} - scaleX={scale} - scaleY={scale} - width={TILE_SIZE_IN_PIXELS} - height={TILE_SIZE_IN_PIXELS} - fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR} - onClick={onClick} - /> -); + <Rect + x={pixelX} + y={pixelY} + scaleX={scale} + scaleY={scale} + width={TILE_SIZE_IN_PIXELS} + height={TILE_SIZE_IN_PIXELS} + fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR} + onClick={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 ( - <Image - image={this.state.image} - x={this.props.x} - y={this.props.y} - width={this.props.width} - height={this.props.height} - opacity={this.props.opacity} - /> - ); - } + const image = new window.Image() + image.src = this.props.src + image.onload = () => { + this.setState({ image }) + ImageComponent.imageCaches[this.props.src] = image + } + } + + render() { + return ( + <Image + image={this.state.image} + x={this.props.x} + y={this.props.y} + width={this.props.width} + height={this.props.height} + opacity={this.props.opacity} + /> + ) + } } -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 ( - <Group> - <Rect - x={x} - y={startY} - width={width} - height={fullHeight} - fill={ - type === "space" - ? RACK_SPACE_BAR_BACKGROUND_COLOR - : RACK_ENERGY_BAR_BACKGROUND_COLOR - } - /> - <Rect - x={x} - y={fractionY} - width={width} - height={fractionHeight} - fill={ - type === "space" - ? RACK_SPACE_BAR_FILL_COLOR - : RACK_ENERGY_BAR_FILL_COLOR - } - /> - <ImageComponent - src={"/img/topology/rack-" + type + "-icon.png"} - x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5} - y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5} - width={RACK_FILL_ICON_WIDTH} - height={RACK_FILL_ICON_WIDTH} - opacity={RACK_FILL_ICON_OPACITY} - /> - </Group> - ); -}; + return ( + <Group> + <Rect + x={x} + y={startY} + width={width} + height={fullHeight} + fill={ + type === 'space' + ? RACK_SPACE_BAR_BACKGROUND_COLOR + : RACK_ENERGY_BAR_BACKGROUND_COLOR + } + /> + <Rect + x={x} + y={fractionY} + width={width} + height={fractionHeight} + fill={ + type === 'space' + ? RACK_SPACE_BAR_FILL_COLOR + : RACK_ENERGY_BAR_FILL_COLOR + } + /> + <ImageComponent + src={'/img/topology/rack-' + type + '-icon.png'} + x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5} + y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5} + width={RACK_FILL_ICON_WIDTH} + height={RACK_FILL_ICON_WIDTH} + opacity={RACK_FILL_ICON_OPACITY} + /> + </Group> + ) +} 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 }) => ( - <Rect - x={tile.positionX * TILE_SIZE_IN_PIXELS} - y={tile.positionY * TILE_SIZE_IN_PIXELS} - width={TILE_SIZE_IN_PIXELS} - height={TILE_SIZE_IN_PIXELS} - fill={color} - /> -); + <Rect + x={tile.positionX * TILE_SIZE_IN_PIXELS} + y={tile.positionY * TILE_SIZE_IN_PIXELS} + width={TILE_SIZE_IN_PIXELS} + height={TILE_SIZE_IN_PIXELS} + fill={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 }) => ( - <Rect - x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} - y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} - width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} - height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} - fill={color} - stroke={OBJECT_BORDER_COLOR} - strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS} - /> -); + <Rect + x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} + y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} + width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} + height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} + fill={color} + stroke={OBJECT_BORDER_COLOR} + strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS} + /> +) 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 ( - <Group> - {linePoints.map((points, index) => ( - <Line - key={index} - points={points} - lineCap="round" - stroke={TILE_PLUS_COLOR} - strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale} - listening={false} - /> - ))} - </Group> - ); -}; + return ( + <Group> + {linePoints.map((points, index) => ( + <Line + key={index} + points={points} + lineCap="round" + stroke={TILE_PLUS_COLOR} + strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale} + listening={false} + /> + ))} + </Group> + ) +} 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 ( - <Line - points={points} - lineCap="round" - stroke={WALL_COLOR} - strokeWidth={WALL_WIDTH_IN_PIXELS} - /> - ); -}; + return ( + <Line + points={points} + lineCap="round" + stroke={WALL_COLOR} + strokeWidth={WALL_WIDTH_IN_PIXELS} + /> + ) +} 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 <Group />; - } + if (!datacenter) { + return <Group/> + } - if (interactionLevel.mode === "BUILDING") { - return ( - <Group> - {datacenter.roomIds.map(roomId => ( - <RoomContainer key={roomId} roomId={roomId} /> - ))} - </Group> - ); - } + if (interactionLevel.mode === 'BUILDING') { + return ( + <Group> + {datacenter.roomIds.map(roomId => ( + <RoomContainer key={roomId} roomId={roomId}/> + ))} + </Group> + ) + } - return ( - <Group> - {datacenter.roomIds - .filter(roomId => roomId !== interactionLevel.roomId) - .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)} - {interactionLevel.mode === "ROOM" ? <GrayContainer /> : null} - {datacenter.roomIds - .filter(roomId => roomId === interactionLevel.roomId) - .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)} - </Group> - ); -}; + return ( + <Group> + {datacenter.roomIds + .filter(roomId => roomId !== interactionLevel.roomId) + .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)} + {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null} + {datacenter.roomIds + .filter(roomId => roomId === interactionLevel.roomId) + .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)} + </Group> + ) +} DatacenterGroup.propTypes = { - datacenter: Shapes.Datacenter, - interactionLevel: Shapes.InteractionLevel -}; + 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 = () => ( - <Group> - {HORIZONTAL_POINT_PAIRS.concat( - VERTICAL_POINT_PAIRS - ).map((points, index) => ( - <Line - key={index} - points={points} - stroke={GRID_COLOR} - strokeWidth={GRID_LINE_WIDTH_IN_PIXELS} - listening={false} - /> - ))} - </Group> -); + <Group> + {HORIZONTAL_POINT_PAIRS.concat( + VERTICAL_POINT_PAIRS, + ).map((points, index) => ( + <Line + key={index} + points={points} + stroke={GRID_COLOR} + strokeWidth={GRID_LINE_WIDTH_IN_PIXELS} + listening={false} + /> + ))} + </Group> +) -export default GridGroup; +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 ( - <Group> - <TileObject - positionX={tile.positionX} - positionY={tile.positionY} - color={color} - /> - <Group opacity={inSimulation ? 0.3 : 1}> - <RackSpaceFillContainer - tileId={tile.id} - positionX={tile.positionX} - positionY={tile.positionY} - /> - <RackEnergyFillContainer - tileId={tile.id} - positionX={tile.positionX} - positionY={tile.positionY} - /> - </Group> - </Group> - ); -}; + return ( + <Group> + <TileObject + positionX={tile.positionX} + positionY={tile.positionY} + color={color} + /> + <Group opacity={inSimulation ? 0.3 : 1}> + <RackSpaceFillContainer + tileId={tile.id} + positionX={tile.positionX} + positionY={tile.positionY} + /> + <RackEnergyFillContainer + tileId={tile.id} + positionX={tile.positionX} + positionY={tile.positionY} + /> + </Group> + </Group> + ) +} RackGroup.propTypes = { - tile: Shapes.Tile -}; + 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 ( - <Group onClick={onClick}> - {room.tileIds.map(tileId => ( - <TileContainer key={tileId} tileId={tileId} newTile={true} /> - ))} - </Group> - ); - } + room, + interactionLevel, + currentRoomInConstruction, + onClick, + }) => { + if (currentRoomInConstruction === room.id) { + return ( + <Group onClick={onClick}> + {room.tileIds.map(tileId => ( + <TileContainer key={tileId} tileId={tileId} newTile={true}/> + ))} + </Group> + ) + } - return ( - <Group onClick={onClick}> - {(() => { - if ( - (interactionLevel.mode === "RACK" || - interactionLevel.mode === "MACHINE") && - interactionLevel.roomId === room.id - ) { - return [ - room.tileIds - .filter(tileId => tileId !== interactionLevel.tileId) - .map(tileId => <TileContainer key={tileId} tileId={tileId} />), - <GrayContainer key={-1} />, - room.tileIds - .filter(tileId => tileId === interactionLevel.tileId) - .map(tileId => <TileContainer key={tileId} tileId={tileId} />) - ]; - } else { - return room.tileIds.map(tileId => ( - <TileContainer key={tileId} tileId={tileId} /> - )); - } - })()} - <WallContainer roomId={room.id} /> - </Group> - ); -}; + return ( + <Group onClick={onClick}> + {(() => { + if ( + (interactionLevel.mode === 'RACK' || + interactionLevel.mode === 'MACHINE') && + interactionLevel.roomId === room.id + ) { + return [ + room.tileIds + .filter(tileId => tileId !== interactionLevel.tileId) + .map(tileId => <TileContainer key={tileId} tileId={tileId}/>), + <GrayContainer key={-1}/>, + room.tileIds + .filter(tileId => tileId === interactionLevel.tileId) + .map(tileId => <TileContainer key={tileId} tileId={tileId}/>), + ] + } else { + return room.tileIds.map(tileId => ( + <TileContainer key={tileId} tileId={tileId}/> + )) + } + })()} + <WallContainer roomId={room.id}/> + </Group> + ) +} RoomGroup.propTypes = { - room: Shapes.Room -}; + 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 = <RackContainer tile={tile} />; - break; - default: - tileObject = null; - } + let tileObject + switch (tile.objectType) { + case 'RACK': + tileObject = <RackContainer tile={tile}/> + break + default: + tileObject = null + } - let color = ROOM_DEFAULT_COLOR; - if (newTile) { - color = ROOM_IN_CONSTRUCTION_COLOR; - } else if (inSimulation && roomLoad >= 0) { - color = convertLoadToSimulationColor(roomLoad); - } + let color = ROOM_DEFAULT_COLOR + if (newTile) { + color = ROOM_IN_CONSTRUCTION_COLOR + } else if (inSimulation && roomLoad >= 0) { + color = convertLoadToSimulationColor(roomLoad) + } - return ( - <Group onClick={() => onClick(tile)}> - <RoomTile tile={tile} color={color} /> - {tileObject} - </Group> - ); -}; + return ( + <Group onClick={() => onClick(tile)}> + <RoomTile tile={tile} color={color}/> + {tileObject} + </Group> + ) +} 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 ( - <Group> - {deriveWallLocations(tiles).map((wallSegment, index) => ( - <WallSegment key={index} wallSegment={wallSegment} /> - ))} - </Group> - ); -}; + return ( + <Group> + {deriveWallLocations(tiles).map((wallSegment, index) => ( + <WallSegment key={index} wallSegment={wallSegment}/> + ))} + </Group> + ) +} 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 <Layer />; + 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 <Layer/> + } - return ( - <Layer opacity={0.6}> - <HoverTile - pixelX={pixelX} - pixelY={pixelY} - scale={this.props.mapScale} - isValid={this.state.validity} - onClick={() => - 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} - </Layer> - ); - } + 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 ( + <Layer opacity={0.6}> + <HoverTile + pixelX={pixelX} + pixelY={pixelY} + scale={this.props.mapScale} + isValid={this.state.validity} + onClick={() => + 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} + </Layer> + ) + } } -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 }) => ( - <Layer> - <Group - x={mapPosition.x} - y={mapPosition.y} - scaleX={mapScale} - scaleY={mapScale} - > - <Backdrop /> - <DatacenterContainer /> - <GridGroup /> - </Group> - </Layer> -); + <Layer> + <Group + x={mapPosition.x} + y={mapPosition.y} + scaleX={mapScale} + scaleY={mapScale} + > + <Backdrop/> + <DatacenterContainer/> + <GridGroup/> + </Group> + </Layer> +) -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 => ( - <HoverLayerComponent {...props}> - <TilePlusIcon {...props} /> - </HoverLayerComponent> -); + <HoverLayerComponent {...props}> + <TilePlusIcon {...props} /> + </HoverLayerComponent> +) -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 => <HoverLayerComponent {...props} />; +const RoomHoverLayerComponent = props => <HoverLayerComponent {...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 = ( - <div - className={classNames("sidebar-collapse-button", { - "sidebar-collapse-button-right": this.props.isRight - })} - onClick={() => this.setState({ collapsed: !this.state.collapsed })} - > - {(this.state.collapsed && this.props.isRight) || - (!this.state.collapsed && !this.props.isRight) ? ( - <span - className="fa fa-angle-left" - title={this.props.isRight ? "Expand" : "Collapse"} - /> - ) : ( - <span - className="fa fa-angle-right" - title={this.props.isRight ? "Collapse" : "Expand"} - /> - )} - </div> - ); + render() { + const collapseButton = ( + <div + className={classNames('sidebar-collapse-button', { + 'sidebar-collapse-button-right': this.props.isRight, + })} + onClick={() => this.setState({ collapsed: !this.state.collapsed })} + > + {(this.state.collapsed && this.props.isRight) || + (!this.state.collapsed && !this.props.isRight) ? ( + <span + className="fa fa-angle-left" + title={this.props.isRight ? 'Expand' : 'Collapse'} + /> + ) : ( + <span + className="fa fa-angle-right" + title={this.props.isRight ? 'Collapse' : 'Expand'} + /> + )} + </div> + ) - if (this.state.collapsed) { - return collapseButton; + if (this.state.collapsed) { + return collapseButton + } + return ( + <div + className={classNames('sidebar p-3 h-100', { + 'sidebar-right': this.props.isRight, + })} + onWheel={e => e.stopPropagation()} + > + {this.props.children} + {collapseButton} + </div> + ) } - return ( - <div - className={classNames("sidebar p-3 h-100", { - "sidebar-right": this.props.isRight - })} - onWheel={e => e.stopPropagation()} - > - {this.props.children} - {collapseButton} - </div> - ); - } } -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 }) => ( - <div className="mt-1"> - <strong>Current load</strong> - <div className={classNames("progress", { disabled })}> - <div - className="progress-bar" - role="progressbar" - aria-valuenow={percent} - aria-valuemin="0" - aria-valuemax="100" - style={{ width: percent + "%" }} - > - {percent}% - </div> + <div className="mt-1"> + <strong>Current load</strong> + <div className={classNames('progress', { disabled })}> + <div + className="progress-bar" + role="progressbar" + aria-valuenow={percent} + aria-valuemin="0" + aria-valuemax="100" + style={{ width: percent + '%' }} + > + {percent}% + </div> + </div> </div> - </div> -); +) -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( - <VictoryChartComponent - data={data} - currentTick={currentTick} - showCurrentTick={false} - /> - ); - 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( + <VictoryChartComponent + data={data} + currentTick={currentTick} + showCurrentTick={false} + />, + ) + 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 ( - <div className="mt-1" style={{ position: "relative" }}> - <strong>Load over time</strong> - <VictoryChartComponent - data={data} - currentTick={currentTick} - showCurrentTick={true} - /> - <ExportChartComponent onExport={onExport} /> - </div> - ); -}; + return ( + <div className="mt-1" style={{ position: 'relative' }}> + <strong>Load over time</strong> + <VictoryChartComponent + data={data} + currentTick={currentTick} + showCurrentTick={true} + /> + <ExportChartComponent onExport={onExport}/> + </div> + ) +} const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => ( - <VictoryChart - height={250} - padding={{ top: 10, bottom: 50, left: 50, right: 50 }} - > - <VictoryAxis - tickFormat={tick => convertSecondsToFormattedTime(tick)} - fixLabelOverlap={true} - label="Simulated Time" - /> - <VictoryAxis dependentAxis label="Load" /> - <VictoryLine data={data} /> - <VictoryScatter data={data} /> - {showCurrentTick ? ( - <VictoryLine - labelComponent={ - <VictoryLabel renderInPortal angle={90} dy={-5} dx={60} /> - } - 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 - )} - </VictoryChart> -); + <VictoryChart + height={250} + padding={{ top: 10, bottom: 50, left: 50, right: 50 }} + > + <VictoryAxis + tickFormat={tick => convertSecondsToFormattedTime(tick)} + fixLabelOverlap={true} + label="Simulated Time" + /> + <VictoryAxis dependentAxis label="Load"/> + <VictoryLine data={data}/> + <VictoryScatter data={data}/> + {showCurrentTick ? ( + <VictoryLine + labelComponent={ + <VictoryLabel renderInPortal angle={90} dy={-5} dx={60}/> + } + 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 + )} + </VictoryChart> +) const ExportChartComponent = ({ onExport }) => ( - <button - className="btn btn-success btn-circle btn-sm" - title="Export Chart to PNG Image" - onClick={onExport} - style={{ position: "absolute", top: 0, right: 0 }} - > - <span className="fa fa-camera" /> - </button> -); + <button + className="btn btn-success btn-circle btn-sm" + title="Export Chart to PNG Image" + onClick={onExport} + style={{ position: 'absolute', top: 0, right: 0 }} + > + <span className="fa fa-camera"/> + </button> +) -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 -}) => ( - <div> - <h2>{experimentName}</h2> - <p> - Path: <strong>{pathName}</strong> - </p> - <p> - Trace: <strong>{traceName}</strong> - </p> - <p> - Scheduler: <strong>{schedulerName}</strong> - </p> - </div> -); + experimentName, + pathName, + traceName, + schedulerName, + }) => ( + <div> + <h2>{experimentName}</h2> + <p> + Path: <strong>{pathName}</strong> + </p> + <p> + Trace: <strong>{traceName}</strong> + </p> + <p> + Scheduler: <strong>{schedulerName}</strong> + </p> + </div> +) -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 }) => ( - <div> <div> - Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong> - </div> - <div className="btn-group mb-2" style={{ display: "flex" }}> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }} - title="0-25%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }} - title="25-50%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }} - title="50-75%" - /> + <div> + Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong> + </div> + <div className="btn-group mb-2" style={{ display: 'flex' }}> <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }} - title="75-100%" + className="btn btn-secondary" + style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }} + title="0-25%" /> + <span + className="btn btn-secondary" + style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }} + title="25-50%" + /> + <span + className="btn btn-secondary" + style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }} + title="50-75%" + /> + <span + className="btn btn-secondary" + style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }} + title="75-100%" + /> + </div> </div> - </div> -); +) -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 ( - <Sidebar isRight={false}> - <div className="simulation-sidebar-container flex-column"> - <ExperimentMetadataContainer /> - <LoadMetricContainer /> - <div className="trace-container"> - <TraceContainer /> - </div> - </div> - </Sidebar> - ); -}; + return ( + <Sidebar isRight={false}> + <div className="simulation-sidebar-container flex-column"> + <ExperimentMetadataContainer/> + <LoadMetricContainer/> + <div className="trace-container"> + <TraceContainer/> + </div> + </div> + </Sidebar> + ) +} -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 ( - <li className="list-group-item flex-column align-items-start"> - <div className="d-flex w-100 justify-content-between"> - <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5> - <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small> - </div> - <div title={infoTitle} style={{ display: "flex" }}> + return ( + <li className="list-group-item flex-column align-items-start"> + <div className="d-flex w-100 justify-content-between"> + <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5> + <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small> + </div> + <div title={infoTitle} style={{ display: 'flex' }}> <span - className={classNames("fa", "fa-" + icon)} - style={{ width: "20px" }} + className={classNames('fa', 'fa-' + icon)} + style={{ width: '20px' }} /> - <div className="progress" style={{ flexGrow: 1 }}> - <div - className="progress-bar" - role="progressbar" - aria-valuenow={percent} - aria-valuemin="0" - aria-valuemax="100" - style={{ width: percent + "%" }} - > - {progressBarContent} - </div> - </div> - </div> - </li> - ); -}; + <div className="progress" style={{ flexGrow: 1 }}> + <div + className="progress-bar" + role="progressbar" + aria-valuenow={percent} + aria-valuemin="0" + aria-valuemax="100" + style={{ width: percent + '%' }} + > + {progressBarContent} + </div> + </div> + </div> + </li> + ) +} -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 }) => ( - <div> - <h3>Trace</h3> - {jobs.map(job => ( - <div key={job.id}> - <h4>Job: {job.name}</h4> - <ul className="list-group"> - {job.taskIds.map(taskId => ( - <TaskContainer taskId={taskId} key={taskId} /> - ))} - </ul> - </div> - ))} - </div> -); + <div> + <h3>Trace</h3> + {jobs.map(job => ( + <div key={job.id}> + <h4>Job: {job.name}</h4> + <ul className="list-group"> + {job.taskIds.map(taskId => ( + <TaskContainer taskId={taskId} key={taskId}/> + ))} + </ul> + </div> + ))} + </div> +) -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 }) => ( - <h2> - {name} - <button className="btn btn-outline-secondary float-right" onClick={onEdit}> - <FontAwesome name="pencil" /> - </button> - </h2> -); + <h2> + {name} + <button className="btn btn-outline-secondary float-right" onClick={onEdit}> + <FontAwesome name="pencil"/> + </button> + </h2> +) -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 = <BuildingSidebarContainer />; - break; - case "ROOM": - sidebarContent = <RoomSidebarContainer />; - break; - case "RACK": - sidebarContent = <RackSidebarContainer />; - break; - case "MACHINE": - sidebarContent = <MachineSidebarContainer />; - break; - default: - sidebarContent = "Missing Content"; - } + switch (interactionLevel.mode) { + case 'BUILDING': + sidebarContent = <BuildingSidebarContainer/> + break + case 'ROOM': + sidebarContent = <RoomSidebarContainer/> + break + case 'RACK': + sidebarContent = <RackSidebarContainer/> + break + case 'MACHINE': + sidebarContent = <MachineSidebarContainer/> + break + default: + sidebarContent = 'Missing Content' + } - return <Sidebar isRight={true}>{sidebarContent}</Sidebar>; -}; + return <Sidebar isRight={true}>{sidebarContent}</Sidebar> +} -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 ( - <div> - <h2>Building</h2> - {inSimulation ? ( - <div className="alert alert-info"> - <span className="fa fa-info-circle mr-2" /> - <strong>Click on individual rooms</strong> to see their stats! + return ( + <div> + <h2>Building</h2> + {inSimulation ? ( + <div className="alert alert-info"> + <span className="fa fa-info-circle mr-2"/> + <strong>Click on individual rooms</strong> to see their stats! + </div> + ) : ( + <NewRoomConstructionContainer/> + )} </div> - ) : ( - <NewRoomConstructionContainer /> - )} - </div> - ); -}; + ) +} -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 ( + <div className="btn btn-outline-primary btn-block" onClick={onStart}> + <span className="fa fa-plus mr-2"/> + Construct a new room + </div> + ) + } return ( - <div className="btn btn-outline-primary btn-block" onClick={onStart}> - <span className="fa fa-plus mr-2" /> - Construct a new room - </div> - ); - } - return ( - <div> - <div className="btn btn-primary btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2" /> - Finalize new room - </div> - <div className="btn btn-default btn-block" onClick={onCancel}> - <span className="fa fa-times mr-2" /> - Cancel construction - </div> - </div> - ); -}; + <div> + <div className="btn btn-primary btn-block" onClick={onFinish}> + <span className="fa fa-check mr-2"/> + Finalize new room + </div> + <div className="btn btn-default btn-block" onClick={onCancel}> + <span className="fa fa-times mr-2"/> + Cancel construction + </div> + </div> + ) +} -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 }) => ( - <div className="btn btn-secondary btn-block" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to rack - </div> -); + <div className="btn btn-secondary btn-block" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to rack + </div> +) -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 }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this machine - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this machine + </div> +) -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 }) => ( - <h2>Machine at slot {position}</h2> -); + <h2>Machine at slot {position}</h2> +) -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 ( - <div> - <MachineNameContainer /> - <BackToRackContainer /> - {inSimulation ? ( + return ( <div> - <LoadBarContainer objectType="machine" objectId={machineId} /> - <LoadChartContainer objectType="machine" objectId={machineId} /> + <MachineNameContainer/> + <BackToRackContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="machine" objectId={machineId}/> + <LoadChartContainer objectType="machine" objectId={machineId}/> + </div> + ) : ( + <DeleteMachineContainer/> + )} + <UnitTabsContainer/> </div> - ) : ( - <DeleteMachineContainer /> - )} - <UnitTabsContainer /> - </div> - ); -}; + ) +} -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 ( - <div className="form-inline"> - <div className="form-group w-100"> - <select - className="form-control w-75 mr-1" - ref={unitSelect => (this.unitSelect = unitSelect)} - > - {this.props.units.map(unit => ( - <option value={unit.id} key={unit.id}> - {unit.manufacturer + - " " + - unit.family + - " " + - unit.model + - " " + - unit.generation} - </option> - ))} - </select> - <button - type="submit" - className="btn btn-outline-primary" - onClick={() => - this.props.onAdd(parseInt(this.unitSelect.value, 10)) - } - > - <span className="fa fa-plus mr-2" /> - Add - </button> - </div> - </div> - ); - } + render() { + return ( + <div className="form-inline"> + <div className="form-group w-100"> + <select + className="form-control w-75 mr-1" + ref={unitSelect => (this.unitSelect = unitSelect)} + > + {this.props.units.map(unit => ( + <option value={unit.id} key={unit.id}> + {unit.manufacturer + + ' ' + + unit.family + + ' ' + + unit.model + + ' ' + + unit.generation} + </option> + ))} + </select> + <button + type="submit" + className="btn btn-outline-primary" + onClick={() => + this.props.onAdd(parseInt(this.unitSelect.value, 10)) + } + > + <span className="fa fa-plus mr-2"/> + Add + </button> + </div> + </div> + ) + } } -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 = - "<strong>Clockrate:</strong> <code>" + - this.props.unit.clockRateMhz + - " MHz</code><br/>" + - "<strong>Num. Cores:</strong> <code>" + - this.props.unit.numberOfCores + - "</code><br/>" + - "<strong>Energy Cons.:</strong> <code>" + - this.props.unit.energyConsumptionW + - " W</code>"; - } else if ( - this.props.unitType === "memory" || - this.props.unitType === "storage" - ) { - unitInfo = - "<strong>Speed:</strong> <code>" + - this.props.unit.speedMbPerS + - " Mb/s</code><br/>" + - "<strong>Size:</strong> <code>" + - this.props.unit.sizeMb + - " MB</code><br/>" + - "<strong>Energy Cons.:</strong> <code> " + - this.props.unit.energyConsumptionW + - " W</code>"; + componentDidMount() { + jQuery('.unit-info-popover').popover({ + trigger: 'focus', + }) } - return ( - <li className="d-flex list-group-item justify-content-between align-items-center"> - <span style={{ maxWidth: "60%" }}> + render() { + let unitInfo + if (this.props.unitType === 'cpu' || this.props.unitType === 'gpu') { + unitInfo = + '<strong>Clockrate:</strong> <code>' + + this.props.unit.clockRateMhz + + ' MHz</code><br/>' + + '<strong>Num. Cores:</strong> <code>' + + this.props.unit.numberOfCores + + '</code><br/>' + + '<strong>Energy Cons.:</strong> <code>' + + this.props.unit.energyConsumptionW + + ' W</code>' + } else if ( + this.props.unitType === 'memory' || + this.props.unitType === 'storage' + ) { + unitInfo = + '<strong>Speed:</strong> <code>' + + this.props.unit.speedMbPerS + + ' Mb/s</code><br/>' + + '<strong>Size:</strong> <code>' + + this.props.unit.sizeMb + + ' MB</code><br/>' + + '<strong>Energy Cons.:</strong> <code> ' + + this.props.unit.energyConsumptionW + + ' W</code>' + } + + return ( + <li className="d-flex list-group-item justify-content-between align-items-center"> + <span style={{ maxWidth: '60%' }}> {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} </span> - <span> + <span> <span - tabIndex="0" - className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle" - role="button" - data-toggle="popover" - data-trigger="focus" - title="Unit information" - data-content={unitInfo} - data-html="true" + tabIndex="0" + className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle" + role="button" + data-toggle="popover" + data-trigger="focus" + title="Unit information" + data-content={unitInfo} + data-html="true" /> - {this.props.inSimulation ? ( - undefined - ) : ( - <span - className="btn btn-outline-danger" - onClick={this.props.onDelete} - > - <span className="fa fa-trash" /> + {this.props.inSimulation ? ( + undefined + ) : ( + <span + className="btn btn-outline-danger" + onClick={this.props.onDelete} + > + <span className="fa fa-trash"/> </span> - )} + )} </span> - </li> - ); - } + </li> + ) + } } -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 }) => ( - <ul className="list-group mt-1"> - {unitIds.length !== 0 ? ( - unitIds.map((unitId, index) => ( - <UnitContainer - unitType={unitType} - unitId={unitId} - index={index} - key={index} - /> - )) - ) : ( - <div className="alert alert-info"> - {inSimulation ? ( - <strong>No units of this type in this machine</strong> + <ul className="list-group mt-1"> + {unitIds.length !== 0 ? ( + unitIds.map((unitId, index) => ( + <UnitContainer + unitType={unitType} + unitId={unitId} + index={index} + key={index} + /> + )) ) : ( - <span> + <div className="alert alert-info"> + {inSimulation ? ( + <strong>No units of this type in this machine</strong> + ) : ( + <span> <strong>No units...</strong> Add some with the menu above! </span> + )} + </div> )} - </div> - )} - </ul> -); + </ul> +) -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 }) => ( - <div> - <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> - <li className="nav-item"> - <a - className="nav-link active" - data-toggle="tab" - href="#cpu-units" - role="tab" - > - CPU - </a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> - GPU - </a> - </li> - <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#memory-units" - role="tab" - > - Memory - </a> - </li> - <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#storage-units" - role="tab" - > - Storage - </a> - </li> - </ul> - <div className="tab-content"> - <div className="tab-pane active" id="cpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="cpu" />} - <UnitListContainer unitType="cpu" /> - </div> - <div className="tab-pane" id="gpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="gpu" />} - <UnitListContainer unitType="gpu" /> - </div> - <div className="tab-pane" id="memory-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="memory" />} - <UnitListContainer unitType="memory" /> - </div> - <div className="tab-pane" id="storage-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="storage" />} - <UnitListContainer unitType="storage" /> - </div> + <div> + <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> + <li className="nav-item"> + <a + className="nav-link active" + data-toggle="tab" + href="#cpu-units" + role="tab" + > + CPU + </a> + </li> + <li className="nav-item"> + <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> + GPU + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#memory-units" + role="tab" + > + Memory + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#storage-units" + role="tab" + > + Storage + </a> + </li> + </ul> + <div className="tab-content"> + <div className="tab-pane active" id="cpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>} + <UnitListContainer unitType="cpu"/> + </div> + <div className="tab-pane" id="gpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>} + <UnitListContainer unitType="gpu"/> + </div> + <div className="tab-pane" id="memory-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>} + <UnitListContainer unitType="memory"/> + </div> + <div className="tab-pane" id="storage-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>} + <UnitListContainer unitType="storage"/> + </div> + </div> </div> - </div> -); +) -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 }) => ( - <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to room - </div> -); + <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to room + </div> +) -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 }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this rack - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this rack + </div> +) -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 }) => ( - <li className="list-group-item d-flex justify-content-between align-items-center"> + <li className="list-group-item d-flex justify-content-between align-items-center"> <span className="badge badge-default badge-info mr-1 disabled"> {position} </span> - {inSimulation ? ( - <span className="badge badge-default badge-success">Empty Slot</span> - ) : ( - <button className="btn btn-outline-primary" onClick={onAdd}> - <span className="fa fa-plus mr-2" /> - Add machine - </button> - )} - </li> -); + {inSimulation ? ( + <span className="badge badge-default badge-success">Empty Slot</span> + ) : ( + <button className="btn btn-outline-primary" onClick={onAdd}> + <span className="fa fa-plus mr-2"/> + Add machine + </button> + )} + </li> +) -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 }) => ( - <div> - <img - src={"/img/topology/" + id + "-icon.png"} - alt={"Machine contains " + type + " units"} - className="img-fluid ml-1" - style={{ maxHeight: "35px" }} - /> - </div> -); + <div> + <img + src={'/img/topology/' + id + '-icon.png'} + alt={'Machine contains ' + type + ' units'} + className="img-fluid ml-1" + style={{ maxHeight: '35px' }} + /> + </div> +) 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 ( - <li - className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" - onClick={onClick} - style={{ backgroundColor: color }} - > - <span className="badge badge-default badge-info mr-1">{position}</span> - <div className="d-inline-flex"> - {machine.cpuIds.length > 0 ? ( - <UnitIcon id="cpu" type="CPU" /> - ) : ( - undefined - )} - {machine.gpuIds.length > 0 ? ( - <UnitIcon id="gpu" type="GPU" /> - ) : ( - undefined - )} - {machine.memoryIds.length > 0 ? ( - <UnitIcon id="memory" type="memory" /> - ) : ( - undefined - )} - {machine.storageIds.length > 0 ? ( - <UnitIcon id="storage" type="storage" /> - ) : ( - undefined - )} - {hasNoUnits ? ( - <span className="badge badge-default badge-warning"> + return ( + <li + className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" + onClick={onClick} + style={{ backgroundColor: color }} + > + <span className="badge badge-default badge-info mr-1">{position}</span> + <div className="d-inline-flex"> + {machine.cpuIds.length > 0 ? ( + <UnitIcon id="cpu" type="CPU"/> + ) : ( + undefined + )} + {machine.gpuIds.length > 0 ? ( + <UnitIcon id="gpu" type="GPU"/> + ) : ( + undefined + )} + {machine.memoryIds.length > 0 ? ( + <UnitIcon id="memory" type="memory"/> + ) : ( + undefined + )} + {machine.storageIds.length > 0 ? ( + <UnitIcon id="storage" type="storage"/> + ) : ( + undefined + )} + {hasNoUnits ? ( + <span className="badge badge-default badge-warning"> Machine with no units </span> - ) : ( - undefined - )} - </div> - </li> - ); -}; + ) : ( + undefined + )} + </div> + </li> + ) +} 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 ( - <ul className="list-group machine-list"> - {machineIds.map((machineId, index) => { - if (machineId === null) { - return <EmptySlotContainer key={index} position={index + 1} />; - } else { - return ( - <MachineContainer - key={index} - position={index + 1} - machineId={machineId} - /> - ); - } - })} - </ul> - ); -}; + return ( + <ul className="list-group machine-list"> + {machineIds.map((machineId, index) => { + if (machineId === null) { + return <EmptySlotContainer key={index} position={index + 1}/> + } else { + return ( + <MachineContainer + key={index} + position={index + 1} + machineId={machineId} + /> + ) + } + })} + </ul> + ) +} -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 }) => ( - <NameComponent name={rackName} onEdit={onEdit} /> -); + <NameComponent name={rackName} onEdit={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 ( - <div className="rack-sidebar-container flex-column"> - <div className="rack-sidebar-header-container"> - <RackNameContainer /> - <BackToRoomContainer /> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="rack" objectId={rackId} /> - <LoadChartContainer objectType="rack" objectId={rackId} /> - </div> - ) : ( - <div> - <DeleteRackContainer /> - </div> - )} - </div> - <div className="machine-list-container mt-2"> - <MachineListContainer /> - </div> - </div> - ); -}; + return ( + <div className="rack-sidebar-container flex-column"> + <div className="rack-sidebar-header-container"> + <RackNameContainer/> + <BackToRoomContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="rack" objectId={rackId}/> + <LoadChartContainer objectType="rack" objectId={rackId}/> + </div> + ) : ( + <div> + <DeleteRackContainer/> + </div> + )} + </div> + <div className="machine-list-container mt-2"> + <MachineListContainer/> + </div> + </div> + ) +} -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 }) => ( - <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to building - </div> -); + <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to building + </div> +) -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 }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this room - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this room + </div> +) -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 ? ( - <div className="btn btn-info btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2" /> - Finish editing room - </div> - ) : ( - <div - className={classNames("btn btn-outline-info btn-block", { - disabled: isInRackConstructionMode - })} - onClick={() => (isInRackConstructionMode ? undefined : onEdit())} - > - <span className="fa fa-pencil mr-2" /> - Edit the tiles of this room - </div> - ); + onEdit, + onFinish, + isEditing, + isInRackConstructionMode, + }) => + isEditing ? ( + <div className="btn btn-info btn-block" onClick={onFinish}> + <span className="fa fa-check mr-2"/> + Finish editing room + </div> + ) : ( + <div + className={classNames('btn btn-outline-info btn-block', { + disabled: isInRackConstructionMode, + })} + onClick={() => (isInRackConstructionMode ? undefined : onEdit())} + > + <span className="fa fa-pencil mr-2"/> + Edit the tiles of this room + </div> + ) -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 ( - <div className="btn btn-primary btn-block" onClick={onStop}> - <span className="fa fa-times mr-2" /> - Stop rack construction - </div> - ); - } + onStart, + onStop, + inRackConstructionMode, + isEditingRoom, + }) => { + if (inRackConstructionMode) { + return ( + <div className="btn btn-primary btn-block" onClick={onStop}> + <span className="fa fa-times mr-2"/> + Stop rack construction + </div> + ) + } - return ( - <div - className={classNames("btn btn-outline-primary btn-block", { - disabled: isEditingRoom - })} - onClick={() => (isEditingRoom ? undefined : onStart())} - > - <span className="fa fa-plus mr-2" /> - Start rack construction - </div> - ); -}; + return ( + <div + className={classNames('btn btn-outline-primary btn-block', { + disabled: isEditingRoom, + })} + onClick={() => (isEditingRoom ? undefined : onStart())} + > + <span className="fa fa-plus mr-2"/> + Start rack construction + </div> + ) +} -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 }) => ( - <NameComponent name={roomName} onEdit={onEdit} /> -); + <NameComponent name={roomName} onEdit={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 = <RackConstructionContainer />; - } + let allowedObjects + if (!inSimulation && roomType === 'SERVER') { + allowedObjects = <RackConstructionContainer/> + } - return ( - <div> - <RoomNameContainer /> - <RoomTypeContainer /> - <BackToBuildingContainer /> - {inSimulation ? ( + return ( <div> - <LoadBarContainer objectType="room" objectId={roomId} /> - <LoadChartContainer objectType="room" objectId={roomId} /> + <RoomNameContainer/> + <RoomTypeContainer/> + <BackToBuildingContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="room" objectId={roomId}/> + <LoadChartContainer objectType="room" objectId={roomId}/> + </div> + ) : ( + <div> + {allowedObjects} + <EditRoomContainer/> + <DeleteRoomContainer/> + </div> + )} </div> - ) : ( - <div> - {allowedObjects} - <EditRoomContainer /> - <DeleteRoomContainer /> - </div> - )} - </div> - ); -}; + ) +} -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 }) => ( - <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p> -); + <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p> +) -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 -}) => ( - <div - className="play-btn" - onClick={() => { - if (isPlaying) { - onPause(); - } else { - if (currentTick !== lastSimulatedTick) { - onPlay(); - } - } - }} - > - {isPlaying ? ( - <span className="fa fa-pause" /> - ) : ( - <span className="fa fa-play" /> - )} - </div> -); + isPlaying, + currentTick, + lastSimulatedTick, + onPlay, + onPause, + }) => ( + <div + className="play-btn" + onClick={() => { + if (isPlaying) { + onPause() + } else { + if (currentTick !== lastSimulatedTick) { + onPlay() + } + } + }} + > + {isPlaying ? ( + <span className="fa fa-pause"/> + ) : ( + <span className="fa fa-play"/> + )} + </div> +) -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 ( - <div className="timeline-bar"> - <div className="timeline-container"> - <TimelineLabelsContainer /> - <TimelineControlsContainer /> - </div> - </div> - ); - } + render() { + return ( + <div className="timeline-bar"> + <div className="timeline-container"> + <TimelineLabelsContainer/> + <TimelineControlsContainer/> + </div> + </div> + ) + } } -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 ( - <div className="timeline-controls"> - <PlayButtonContainer /> - <div - className="timeline" - ref={timeline => (this.timeline = timeline)} - onClick={this.onTimelineClick.bind(this)} - > - <div - className="time-marker" - style={{ - left: convertTickToPercentage( - this.props.currentTick, - this.props.lastSimulatedTick - ) - }} - /> - {this.props.sectionTicks.map(sectionTick => ( - <div - key={sectionTick} - className="section-marker" - style={{ - left: convertTickToPercentage( - sectionTick, - this.props.lastSimulatedTick - ) - }} - title="Topology changes at this tick" - /> - ))} - </div> - </div> - ); - } + render() { + return ( + <div className="timeline-controls"> + <PlayButtonContainer/> + <div + className="timeline" + ref={timeline => (this.timeline = timeline)} + onClick={this.onTimelineClick.bind(this)} + > + <div + className="time-marker" + style={{ + left: convertTickToPercentage( + this.props.currentTick, + this.props.lastSimulatedTick, + ), + }} + /> + {this.props.sectionTicks.map(sectionTick => ( + <div + key={sectionTick} + className="section-marker" + style={{ + left: convertTickToPercentage( + sectionTick, + this.props.lastSimulatedTick, + ), + }} + title="Topology changes at this tick" + /> + ))} + </div> + </div> + ) + } } -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 }) => ( - <div className="timeline-labels"> - <div className="start-time-label"> - {convertSecondsToFormattedTime(currentTick)} + <div className="timeline-labels"> + <div className="start-time-label"> + {convertSecondsToFormattedTime(currentTick)} + </div> + <div className="end-time-label"> + {convertSecondsToFormattedTime(lastSimulatedTick)} + </div> </div> - <div className="end-time-label"> - {convertSecondsToFormattedTime(lastSimulatedTick)} - </div> - </div> -); +) -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 = ( - <div className="alert alert-success"> - <span className="fa fa-refresh fa-spin mr-2" /> - <strong>Loading Experiments...</strong> - </div> - ); - } else if (experimentIds.length === 0 && !loading) { - alert = ( - <div className="alert alert-info"> - <span className="fa fa-question-circle mr-2" /> - <strong>No experiments here yet...</strong> Add some with the button - below! - </div> - ); - } + if (loading) { + alert = ( + <div className="alert alert-success"> + <span className="fa fa-refresh fa-spin mr-2"/> + <strong>Loading Experiments...</strong> + </div> + ) + } else if (experimentIds.length === 0 && !loading) { + alert = ( + <div className="alert alert-info"> + <span className="fa fa-question-circle mr-2"/> + <strong>No experiments here yet...</strong> Add some with the button + below! + </div> + ) + } - return ( - <div className="vertically-expanding-container"> - {alert ? ( - alert - ) : ( - <table className="table table-striped"> - <thead> - <tr> - <th>Name</th> - <th>Path</th> - <th>Trace</th> - <th>Scheduler</th> - <th /> - </tr> - </thead> - <tbody> - {experimentIds.map(experimentId => ( - <ExperimentRowContainer - experimentId={experimentId} - key={experimentId} - /> - ))} - </tbody> - </table> - )} - </div> - ); -}; + return ( + <div className="vertically-expanding-container"> + {alert ? ( + alert + ) : ( + <table className="table table-striped"> + <thead> + <tr> + <th>Name</th> + <th>Path</th> + <th>Trace</th> + <th>Scheduler</th> + <th/> + </tr> + </thead> + <tbody> + {experimentIds.map(experimentId => ( + <ExperimentRowContainer + experimentId={experimentId} + key={experimentId} + /> + ))} + </tbody> + </table> + )} + </div> + ) +} 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 }) => ( - <tr> - <td className="pt-3">{experiment.name}</td> - <td className="pt-3"> - {experiment.path.name - ? experiment.path.name - : "Path " + experiment.path.id} - </td> - <td className="pt-3">{experiment.trace.name}</td> - <td className="pt-3">{experiment.scheduler.name}</td> - <td className="text-right"> - <Link - to={"/simulations/" + simulationId + "/experiments/" + experiment.id} - className="btn btn-outline-primary btn-sm mr-2" - title="Open this experiment" - > - <span className="fa fa-play" /> - </Link> - <div - className="btn btn-outline-danger btn-sm" - title="Delete this experiment" - onClick={() => onDelete(experiment.id)} - > - <span className="fa fa-trash" /> - </div> - </td> - </tr> -); + <tr> + <td className="pt-3">{experiment.name}</td> + <td className="pt-3"> + {experiment.path.name + ? experiment.path.name + : 'Path ' + experiment.path.id} + </td> + <td className="pt-3">{experiment.trace.name}</td> + <td className="pt-3">{experiment.scheduler.name}</td> + <td className="text-right"> + <Link + to={'/simulations/' + simulationId + '/experiments/' + experiment.id} + className="btn btn-outline-primary btn-sm mr-2" + title="Open this experiment" + > + <span className="fa fa-play"/> + </Link> + <div + className="btn btn-outline-danger btn-sm" + title="Delete this experiment" + onClick={() => onDelete(experiment.id)} + > + <span className="fa fa-trash"/> + </div> + </td> + </tr> +) 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 }) => ( - <div className="bottom-btn-container"> - <div className="btn btn-primary float-right" onClick={onClick}> - <span className="fa fa-plus mr-2" /> - New Experiment + <div className="bottom-btn-container"> + <div className="btn btn-primary float-right" onClick={onClick}> + <span className="fa fa-plus mr-2"/> + New Experiment + </div> </div> - </div> -); +) 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 = () => ( - <ContentSection name="contact" title="Contact"> - <div className="row justify-content-center"> - <div className="col-4"> - <a href="https://github.com/atlarge-research/opendc"> - <FontAwesome name="github" size="3x" className="mb-2" /> - <div className="w-100" /> - atlarge-research/opendc - </a> - </div> - <div className="col-4"> - <a href="mailto:opendc@atlarge-research.com"> - <FontAwesome name="envelope" size="3x" className="mb-2" /> - <div className="w-100" /> - opendc@atlarge-research.com - </a> - </div> - </div> - <div className="row"> - <div className="col text-center"> - <img - src="img/tudelft-icon.png" - className="img-fluid tudelft-icon" - alt="TU Delft" - /> - </div> - </div> - <div className="row"> - <div className="col text-center"> - A project by the - <a - href="http://atlarge.science" - target="_blank" - rel="noopener noreferrer" - > - <strong>@Large Research Group</strong> - </a>. - </div> - </div> - <div className="row"> - <div className="col text-center disclaimer mt-5 small"> - <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" /> - <br /> - OpenDC is an experimental tool. Your data may get lost, overwritten, or - otherwise become unavailable. - <br /> - The OpenDC authors should in no way be liable in the event this happens - (see our{" "} - <strong> - <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt"> - license - </a> - </strong>). Sorry for the inconvenience. - </div> - </div> - </ContentSection> -); + <ContentSection name="contact" title="Contact"> + <div className="row justify-content-center"> + <div className="col-4"> + <a href="https://github.com/atlarge-research/opendc"> + <FontAwesome name="github" size="3x" className="mb-2"/> + <div className="w-100"/> + atlarge-research/opendc + </a> + </div> + <div className="col-4"> + <a href="mailto:opendc@atlarge-research.com"> + <FontAwesome name="envelope" size="3x" className="mb-2"/> + <div className="w-100"/> + opendc@atlarge-research.com + </a> + </div> + </div> + <div className="row"> + <div className="col text-center"> + <img + src="img/tudelft-icon.png" + className="img-fluid tudelft-icon" + alt="TU Delft" + /> + </div> + </div> + <div className="row"> + <div className="col text-center"> + A project by the + <a + href="http://atlarge.science" + target="_blank" + rel="noopener noreferrer" + > + <strong>@Large Research Group</strong> + </a>. + </div> + </div> + <div className="row"> + <div className="col text-center disclaimer mt-5 small"> + <FontAwesome name="exclamation-triangle" size="2x" className="mr-2"/> + <br/> + OpenDC is an experimental tool. Your data may get lost, overwritten, or + otherwise become unavailable. + <br/> + The OpenDC authors should in no way be liable in the event this happens + (see our{' '} + <strong> + <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md"> + license + </a> + </strong>). Sorry for the inconvenience. + </div> + </div> + </ContentSection> +) -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 }) => ( - <div id={name} className={classNames(name + "-section", "content-section")}> - <div className="container"> - <h1>{title}</h1> - {children} + <div id={name} className={classNames(name + '-section', 'content-section')}> + <div className="container"> + <h1>{title}</h1> + {children} + </div> </div> - </div> -); +) 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 = () => ( - <section id="intro" className="intro-section"> - <div className="container pt-5 pb-3"> - <div className="row justify-content-center"> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> - <h4>The datacenter (DC) industry...</h4> - <ul> - <li>Is worth over $15 bn, and growing</li> - <li>Has many hard-to-grasp concepts</li> - <li>Needs to become accessible to many</li> - </ul> + <section id="intro" className="intro-section"> + <div className="container pt-5 pb-3"> + <div className="row justify-content-center"> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <h4>The datacenter (DC) industry...</h4> + <ul> + <li>Is worth over $15 bn, and growing</li> + <li>Has many hard-to-grasp concepts</li> + <li>Needs to become accessible to many</li> + </ul> + </div> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <img + src="img/datacenter-drawing.png" + className="col-12 img-fluid" + alt="Schematic top-down view of a datacenter" + /> + <p className="col-12 figure-caption text-center"> + <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif"> + Image source + </a> + </p> + </div> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <h4>OpenDC provides...</h4> + <ul> + <li>Collaborative online DC modeling</li> + <li>Diverse and effective DC simulation</li> + <li>Exploratory DC performance feedback</li> + </ul> + </div> + </div> </div> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> - <img - src="img/datacenter-drawing.png" - className="col-12 img-fluid" - alt="Schematic top-down view of a datacenter" - /> - <p className="col-12 figure-caption text-center"> - <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif"> - Image source - </a> - </p> - </div> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> - <h4>OpenDC provides...</h4> - <ul> - <li>Collaborative online DC modeling</li> - <li>Diverse and effective DC simulation</li> - <li>Exploratory DC performance feedback</li> - </ul> - </div> - </div> - </div> - </section> -); + </section> +) -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 = () => ( - <section className="jumbotron-header"> - <div className="container"> - <div className="jumbotron text-center"> - <h1> - Open<span className="dc">DC</span> - </h1> - <p className="lead"> - Collaborative Datacenter Simulation and Exploration for Everybody - </p> - <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" /> - </div> - </div> - </section> -); + <section className="jumbotron-header"> + <div className="container"> + <div className="jumbotron text-center"> + <h1> + Open<span className="dc">DC</span> + </h1> + <p className="lead"> + Collaborative Datacenter Simulation and Exploration for Everybody + </p> + <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC"/> + </div> + </div> + </section> +) -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 = () => ( - <ScreenshotSection - name="modeling" - title="Datacenter Modeling" - imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG" - caption="Building a datacenter in OpenDC" - imageIsRight={true} - > - <h3>Collaboratively...</h3> - <ul> - <li>Model DC layout, and room locations and types</li> - <li>Place racks in rooms and nodes in racks</li> - <li> - Add real-world CPU, GPU, memory, storage and network units to each node - </li> - <li>Select from diverse scheduling policies</li> - </ul> - </ScreenshotSection> -); + <ScreenshotSection + name="modeling" + title="Datacenter Modeling" + imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG" + caption="Building a datacenter in OpenDC" + imageIsRight={true} + > + <h3>Collaboratively...</h3> + <ul> + <li>Model DC layout, and room locations and types</li> + <li>Place racks in rooms and nodes in racks</li> + <li> + Add real-world CPU, GPU, memory, storage and network units to each node + </li> + <li>Select from diverse scheduling policies</li> + </ul> + </ScreenshotSection> +) -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 -}) => ( - <ContentSection name={name} title={title}> - <div className="row"> - <div - className={classNames( - "col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left", - { "order-1": !imageIsRight } - )} - > - {children} - </div> - <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12"> - <img src={imageUrl} className="col-12 screenshot" alt={caption} /> - <div className="row text-muted justify-content-center">{caption}</div> - </div> - </div> - </ContentSection> -); + name, + title, + imageUrl, + caption, + imageIsRight, + children, + }) => ( + <ContentSection name={name} title={title}> + <div className="row"> + <div + className={classNames( + 'col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left', + { 'order-1': !imageIsRight }, + )} + > + {children} + </div> + <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12"> + <img src={imageUrl} className="col-12 screenshot" alt={caption}/> + <div className="row text-muted justify-content-center">{caption}</div> + </div> + </div> + </ContentSection> +) -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 = () => ( - <ScreenshotSection - name="simulation" - title="Datacenter Simulation" - imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG" - caption="Running an experiment in OpenDC" - imageIsRight={false} - > - <h3>Working with OpenDC:</h3> - <ul> - <li>Seamlessly switch between construction and simulation modes</li> - <li> - Choose one of several predefined workloads (Big Data, Bag of Tasks, - Hadoop, etc.) - </li> - <li>Play, pause, and skip around the informative simulation timeline</li> - <li>Visualize and demo live</li> - </ul> - </ScreenshotSection> -); + <ScreenshotSection + name="simulation" + title="Datacenter Simulation" + imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG" + caption="Running an experiment in OpenDC" + imageIsRight={false} + > + <h3>Working with OpenDC:</h3> + <ul> + <li>Seamlessly switch between construction and simulation modes</li> + <li> + Choose one of several predefined workloads (Big Data, Bag of Tasks, + Hadoop, etc.) + </li> + <li>Play, pause, and skip around the informative simulation timeline</li> + <li>Visualize and demo live</li> + </ul> + </ScreenshotSection> +) -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 }) => ( - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6"> - <img - src={"img/stakeholders/" + name + ".png"} - className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" - alt={title} - /> - <div className="text-center mt-2"> - <h4>{title}</h4> - <p>{subtitle}</p> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6"> + <img + src={'img/stakeholders/' + name + '.png'} + className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" + alt={title} + /> + <div className="text-center mt-2"> + <h4>{title}</h4> + <p>{subtitle}</p> + </div> </div> - </div> -); +) const StakeholderSection = () => ( - <ContentSection name="stakeholders" title="Stakeholders"> - <div className="row justify-content-center"> - <Stakeholder - name="Manager" - title="Managers" - subtitle="Seeing is deciding" - /> - <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" /> - <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" /> - <Stakeholder - name="Researcher" - title="Researchers" - subtitle="Understand & design" - /> - <Stakeholder - name="Student" - title="Students" - subtitle="Grasp complex concepts" - /> - </div> - </ContentSection> -); + <ContentSection name="stakeholders" title="Stakeholders"> + <div className="row justify-content-center"> + <Stakeholder + name="Manager" + title="Managers" + subtitle="Seeing is deciding" + /> + <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts"/> + <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune"/> + <Stakeholder + name="Researcher" + title="Researchers" + subtitle="Understand & design" + /> + <Stakeholder + name="Student" + title="Students" + subtitle="Grasp complex concepts" + /> + </div> + </ContentSection> +) -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 }) => ( - <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center"> - <img - src={"img/portraits/" + photoId + ".png"} - className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2" - alt={name} - /> - <div className="col-12"> - <h4>{name}</h4> - <div className="team-member-description">{description}</div> + <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center"> + <img + src={'img/portraits/' + photoId + '.png'} + className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2" + alt={name} + /> + <div className="col-12"> + <h4>{name}</h4> + <div className="team-member-description">{description}</div> + </div> </div> - </div> -); +) const TeamSection = () => ( - <ContentSection name="team" title="Core Team"> - <div className="row justify-content-center"> - <TeamMember - photoId="aiosup" - name="Prof. dr. ir. Alexandru Iosup" - description="Project Lead" - /> - <TeamMember - photoId="gandreadis" - name="Georgios Andreadis" - description="Technology Lead and Software Engineer responsible for the frontend web application" - /> - <TeamMember - photoId="fmastenbroek" - name="Fabian Mastenbroek" - description="Software Engineer responsible for the datacenter simulator" - /> - <TeamMember - photoId="loverweel" - name="Leon Overweel" - description="Software Engineer responsible for the web server, database, and API specification" - /> - </div> - <div className="text-center lead mt-3"> - See{" "} - <a - target="_blank" - href="http://atlarge.science/opendc#team" - rel="noopener noreferrer" - > - atlarge.science/opendc - </a>{" "} - for the full team! - </div> - </ContentSection> -); + <ContentSection name="team" title="Core Team"> + <div className="row justify-content-center"> + <TeamMember + photoId="aiosup" + name="Prof. dr. ir. Alexandru Iosup" + description="Project Lead" + /> + <TeamMember + photoId="loverweel" + name="Leon Overweel" + description="Product Lead and Software Engineer responsible for the web server, database, and + API specification" + /> + <TeamMember + photoId="gandreadis" + name="Georgios Andreadis" + description="Software Engineer responsible for the frontend web application" + /> + <TeamMember + photoId="fmastenbroek" + name="Fabian Mastenbroek" + description="Software Engineer responsible for the datacenter simulator" + /> + </div> + <div className="text-center lead mt-3"> + See{' '} + <a + target="_blank" + href="http://atlarge.science/opendc#team" + rel="noopener noreferrer" + > + atlarge.science/opendc + </a>{' '} + for the full team! + </div> + </ContentSection> +) -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 = () => ( - <ContentSection name="technologies" title="Technologies"> - <ul className="list-group text-left"> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary"> + <ContentSection name="technologies" title="Technologies"> + <ul className="list-group text-left"> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary"> <span style={{ minWidth: 100 }}> - <FontAwesome name="window-maximize" className="mr-2" /> + <FontAwesome name="window-maximize" className="mr-2"/> <strong className="">Browser</strong> </span> - <span className="text-right">JavaScript, React, Redux, Konva</span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning"> + <span className="text-right">JavaScript, React, Redux, Konva</span> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning"> <span style={{ minWidth: 100 }}> - <FontAwesome name="television" className="mr-2" /> + <FontAwesome name="television" className="mr-2"/> <strong>Server</strong> </span> - <span className="text-right"> + <span className="text-right"> Python, Flask, FlaskSocketIO, OpenAPI </span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success"> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success"> <span style={{ minWidth: 100 }}> - <FontAwesome name="database" className="mr-2" /> + <FontAwesome name="database" className="mr-2"/> <strong>Database</strong> </span> - <span className="text-right">MariaDB</span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger"> + <span className="text-right">MariaDB</span> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger"> <span style={{ minWidth: 100 }}> - <FontAwesome name="cogs" className="mr-2" /> + <FontAwesome name="cogs" className="mr-2"/> <strong>Simulator</strong> </span> - <span className="text-right">Kotlin</span> - </li> - </ul> - </ContentSection> -); + <span className="text-right">Kotlin</span> + </li> + </ul> + </ContentSection> +) -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 ( - <Modal - title={this.props.title} - show={this.props.show} - onSubmit={this.onConfirm.bind(this)} - onCancel={this.onCancel.bind(this)} - submitButtonType="danger" - submitButtonText="Confirm" - > - {this.props.message} - </Modal> - ); - } + render() { + return ( + <Modal + title={this.props.title} + show={this.props.show} + onSubmit={this.onConfirm.bind(this)} + onCancel={this.onCancel.bind(this)} + submitButtonType="danger" + submitButtonText="Confirm" + > + {this.props.message} + </Modal> + ) + } } -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 ( - <div className="modal fade" id={this.id} role="dialog"> - <div className="modal-dialog" role="document"> - <div className="modal-content"> - <div className="modal-header"> - <h5 className="modal-title">{this.props.title}</h5> - <button - type="button" - className="close" - onClick={this.onCancel.bind(this)} - aria-label="Close" - > - <span>×</span> - </button> + render() { + return ( + <div className="modal fade" id={this.id} role="dialog"> + <div className="modal-dialog" role="document"> + <div className="modal-content"> + <div className="modal-header"> + <h5 className="modal-title">{this.props.title}</h5> + <button + type="button" + className="close" + onClick={this.onCancel.bind(this)} + aria-label="Close" + > + <span>×</span> + </button> + </div> + <div className="modal-body">{this.props.children}</div> + <div className="modal-footer"> + <button + type="button" + className="btn btn-secondary" + onClick={this.onCancel.bind(this)} + > + Close + </button> + <button + type="button" + className={classNames( + 'btn', + 'btn-' + this.props.submitButtonType, + )} + onClick={this.onSubmit.bind(this)} + > + {this.props.submitButtonText} + </button> + </div> + </div> + </div> </div> - <div className="modal-body">{this.props.children}</div> - <div className="modal-footer"> - <button - type="button" - className="btn btn-secondary" - onClick={this.onCancel.bind(this)} - > - Close - </button> - <button - type="button" - className={classNames( - "btn", - "btn-" + this.props.submitButtonType - )} - onClick={this.onSubmit.bind(this)} - > - {this.props.submitButtonText} - </button> - </div> - </div> - </div> - </div> - ); - } + ) + } } -export default Modal; +export default Modal diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js index cc16f8e1..8d03e81f 100644 --- a/frontend/src/components/modals/TextInputModal.js +++ b/frontend/src/components/modals/TextInputModal.js @@ -1,58 +1,58 @@ -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 TextInputModal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - callback: PropTypes.func.isRequired, - initialValue: PropTypes.string - }; + static propTypes = { + title: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + callback: PropTypes.func.isRequired, + initialValue: PropTypes.string, + } - componentDidUpdate() { - if (this.props.initialValue) { - this.textInput.value = this.props.initialValue; + componentDidUpdate() { + if (this.props.initialValue) { + this.textInput.value = this.props.initialValue + } } - } - onSubmit() { - this.props.callback(this.textInput.value); - this.textInput.value = ""; - } + onSubmit() { + this.props.callback(this.textInput.value) + this.textInput.value = '' + } - onCancel() { - this.props.callback(undefined); - this.textInput.value = ""; - } + onCancel() { + this.props.callback(undefined) + this.textInput.value = '' + } - render() { - return ( - <Modal - title={this.props.title} - show={this.props.show} - onSubmit={this.onSubmit.bind(this)} - onCancel={this.onCancel.bind(this)} - > - <form - onSubmit={e => { - e.preventDefault(); - this.onSubmit(); - }} - > - <div className="form-group"> - <label className="form-control-label">{this.props.label}</label> - <input - type="text" - className="form-control" - ref={textInput => (this.textInput = textInput)} - /> - </div> - </form> - </Modal> - ); - } + render() { + return ( + <Modal + title={this.props.title} + show={this.props.show} + onSubmit={this.onSubmit.bind(this)} + onCancel={this.onCancel.bind(this)} + > + <form + onSubmit={e => { + e.preventDefault() + this.onSubmit() + }} + > + <div className="form-group"> + <label className="form-control-label">{this.props.label}</label> + <input + type="text" + className="form-control" + ref={textInput => (this.textInput = textInput)} + /> + </div> + </form> + </Modal> + ) + } } -export default TextInputModal; +export default TextInputModal diff --git a/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js b/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js index e356fe96..143109ff 100644 --- a/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js @@ -1,104 +1,104 @@ -import PropTypes from "prop-types"; -import React from "react"; -import Shapes from "../../../shapes"; -import Modal from "../Modal"; +import PropTypes from 'prop-types' +import React from 'react' +import Shapes from '../../../shapes' +import Modal from '../Modal' class NewExperimentModalComponent extends React.Component { - static propTypes = { - show: PropTypes.bool.isRequired, - paths: PropTypes.arrayOf(Shapes.Path), - schedulers: PropTypes.arrayOf(Shapes.Scheduler), - traces: PropTypes.arrayOf(Shapes.Trace), - callback: PropTypes.func.isRequired - }; + static propTypes = { + show: PropTypes.bool.isRequired, + paths: PropTypes.arrayOf(Shapes.Path), + schedulers: PropTypes.arrayOf(Shapes.Scheduler), + traces: PropTypes.arrayOf(Shapes.Trace), + callback: PropTypes.func.isRequired, + } - reset() { - this.textInput.value = ""; - this.pathSelect.selectedIndex = 0; - this.traceSelect.selectedIndex = 0; - this.schedulerSelect.selectedIndex = 0; - } + reset() { + this.textInput.value = '' + this.pathSelect.selectedIndex = 0 + this.traceSelect.selectedIndex = 0 + this.schedulerSelect.selectedIndex = 0 + } - onSubmit() { - this.props.callback( - this.textInput.value, - parseInt(this.pathSelect.value, 10), - parseInt(this.traceSelect.value, 10), - this.schedulerSelect.value - ); - this.reset(); - } + onSubmit() { + this.props.callback( + this.textInput.value, + parseInt(this.pathSelect.value, 10), + parseInt(this.traceSelect.value, 10), + this.schedulerSelect.value, + ) + this.reset() + } - onCancel() { - this.props.callback(undefined); - this.reset(); - } + onCancel() { + this.props.callback(undefined) + this.reset() + } - render() { - return ( - <Modal - title="New Experiment" - show={this.props.show} - onSubmit={this.onSubmit.bind(this)} - onCancel={this.onCancel.bind(this)} - > - <form - onSubmit={e => { - e.preventDefault(); - this.onSubmit(); - }} - > - <div className="form-group"> - <label className="form-control-label">Name</label> - <input - type="text" - className="form-control" - ref={textInput => (this.textInput = textInput)} - /> - </div> - <div className="form-group"> - <label className="form-control-label">Path</label> - <select - className="form-control" - ref={pathSelect => (this.pathSelect = pathSelect)} + render() { + return ( + <Modal + title="New Experiment" + show={this.props.show} + onSubmit={this.onSubmit.bind(this)} + onCancel={this.onCancel.bind(this)} > - {this.props.paths.map(path => ( - <option value={path.id} key={path.id}> - {path.name ? path.name : "Path " + path.id} - </option> - ))} - </select> - </div> - <div className="form-group"> - <label className="form-control-label">Trace</label> - <select - className="form-control" - ref={traceSelect => (this.traceSelect = traceSelect)} - > - {this.props.traces.map(trace => ( - <option value={trace.id} key={trace.id}> - {trace.name} - </option> - ))} - </select> - </div> - <div className="form-group"> - <label className="form-control-label">Scheduler</label> - <select - className="form-control" - ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)} - > - {this.props.schedulers.map(scheduler => ( - <option value={scheduler.name} key={scheduler.name}> - {scheduler.name} - </option> - ))} - </select> - </div> - </form> - </Modal> - ); - } + <form + onSubmit={e => { + e.preventDefault() + this.onSubmit() + }} + > + <div className="form-group"> + <label className="form-control-label">Name</label> + <input + type="text" + className="form-control" + ref={textInput => (this.textInput = textInput)} + /> + </div> + <div className="form-group"> + <label className="form-control-label">Path</label> + <select + className="form-control" + ref={pathSelect => (this.pathSelect = pathSelect)} + > + {this.props.paths.map(path => ( + <option value={path.id} key={path.id}> + {path.name ? path.name : 'Path ' + path.id} + </option> + ))} + </select> + </div> + <div className="form-group"> + <label className="form-control-label">Trace</label> + <select + className="form-control" + ref={traceSelect => (this.traceSelect = traceSelect)} + > + {this.props.traces.map(trace => ( + <option value={trace.id} key={trace.id}> + {trace.name} + </option> + ))} + </select> + </div> + <div className="form-group"> + <label className="form-control-label">Scheduler</label> + <select + className="form-control" + ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)} + > + {this.props.schedulers.map(scheduler => ( + <option value={scheduler.name} key={scheduler.name}> + {scheduler.name} + </option> + ))} + </select> + </div> + </form> + </Modal> + ) + } } -export default NewExperimentModalComponent; +export default NewExperimentModalComponent diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js index 1a35f85d..451bb6a3 100644 --- a/frontend/src/components/navigation/AppNavbar.js +++ b/frontend/src/components/navigation/AppNavbar.js @@ -1,56 +1,56 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; -import { Link } from "react-router-dom"; -import Navbar, { NavItem } from "./Navbar"; -import "./Navbar.css"; +import React from 'react' +import FontAwesome from 'react-fontawesome' +import { Link } from 'react-router-dom' +import Navbar, { NavItem } from './Navbar' +import './Navbar.css' const AppNavbar = ({ simulationId, inSimulation, fullWidth }) => ( - <Navbar fullWidth={fullWidth}> - {inSimulation ? ( - <NavItem route={"/simulations/" + simulationId}> - <Link - className="nav-link" - title="Construction" - to={"/simulations/" + simulationId} - > - <FontAwesome name="industry" className="mr-2" /> - Construction - </Link> - </NavItem> - ) : ( - undefined - )} - {inSimulation ? ( - <NavItem route={"/simulations/" + simulationId + "/experiments"}> - <Link - className="nav-link" - title="Experiments" - to={"/simulations/" + simulationId + "/experiments"} - > - <FontAwesome name="play" className="mr-2" /> - Experiments - </Link> - </NavItem> - ) : ( - undefined - )} - <NavItem route="/simulations"> - <Link className="nav-link" title="My Simulations" to="/simulations"> - <FontAwesome name="list" className="mr-2" /> - My Simulations - </Link> - </NavItem> - <NavItem route="email"> - <a - className="nav-link" - title="Support" - href="mailto:opendc@atlarge-research.com" - > - <FontAwesome name="envelope" className="mr-2" /> - Support - </a> - </NavItem> - </Navbar> -); + <Navbar fullWidth={fullWidth}> + {inSimulation ? ( + <NavItem route={'/simulations/' + simulationId}> + <Link + className="nav-link" + title="Construction" + to={'/simulations/' + simulationId} + > + <FontAwesome name="industry" className="mr-2"/> + Construction + </Link> + </NavItem> + ) : ( + undefined + )} + {inSimulation ? ( + <NavItem route={'/simulations/' + simulationId + '/experiments'}> + <Link + className="nav-link" + title="Experiments" + to={'/simulations/' + simulationId + '/experiments'} + > + <FontAwesome name="play" className="mr-2"/> + Experiments + </Link> + </NavItem> + ) : ( + undefined + )} + <NavItem route="/simulations"> + <Link className="nav-link" title="My Simulations" to="/simulations"> + <FontAwesome name="list" className="mr-2"/> + My Simulations + </Link> + </NavItem> + <NavItem route="email"> + <a + className="nav-link" + title="Support" + href="mailto:opendc@atlarge-research.com" + > + <FontAwesome name="envelope" className="mr-2"/> + Support + </a> + </NavItem> + </Navbar> +) -export default AppNavbar; +export default AppNavbar diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js index 5d08bf3c..5bb6721d 100644 --- a/frontend/src/components/navigation/HomeNavbar.js +++ b/frontend/src/components/navigation/HomeNavbar.js @@ -1,24 +1,24 @@ -import React from "react"; -import Navbar from "./Navbar"; -import "./Navbar.css"; +import React from 'react' +import Navbar from './Navbar' +import './Navbar.css' const ScrollNavItem = ({ id, name }) => ( - <li className="nav-item"> - <a className="nav-link" href={id}> - {name} - </a> - </li> -); + <li className="nav-item"> + <a className="nav-link" href={id}> + {name} + </a> + </li> +) const HomeNavbar = () => ( - <Navbar fullWidth={false}> - <ScrollNavItem id="#stakeholders" name="Stakeholders" /> - <ScrollNavItem id="#modeling" name="Modeling" /> - <ScrollNavItem id="#simulation" name="Simulation" /> - <ScrollNavItem id="#technologies" name="Technologies" /> - <ScrollNavItem id="#team" name="Team" /> - <ScrollNavItem id="#contact" name="Contact" /> - </Navbar> -); + <Navbar fullWidth={false}> + <ScrollNavItem id="#stakeholders" name="Stakeholders"/> + <ScrollNavItem id="#modeling" name="Modeling"/> + <ScrollNavItem id="#simulation" name="Simulation"/> + <ScrollNavItem id="#technologies" name="Technologies"/> + <ScrollNavItem id="#team" name="Team"/> + <ScrollNavItem id="#contact" name="Contact"/> + </Navbar> +) -export default HomeNavbar; +export default HomeNavbar diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js index 800a3da8..905e1ae9 100644 --- a/frontend/src/components/navigation/LogoutButton.js +++ b/frontend/src/components/navigation/LogoutButton.js @@ -1,16 +1,16 @@ -import PropTypes from "prop-types"; -import React from "react"; -import FontAwesome from "react-fontawesome"; -import { Link } from "react-router-dom"; +import PropTypes from 'prop-types' +import React from 'react' +import FontAwesome from 'react-fontawesome' +import { Link } from 'react-router-dom' const LogoutButton = ({ onLogout }) => ( - <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}> - <FontAwesome name="power-off" size="lg" /> - </Link> -); + <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}> + <FontAwesome name="power-off" size="lg"/> + </Link> +) LogoutButton.propTypes = { - onLogout: PropTypes.func.isRequired -}; + onLogout: PropTypes.func.isRequired, +} -export default LogoutButton; +export default LogoutButton diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js index 44458949..d22f637e 100644 --- a/frontend/src/components/navigation/Navbar.js +++ b/frontend/src/components/navigation/Navbar.js @@ -1,102 +1,102 @@ -import classNames from "classnames"; -import React from "react"; -import { Link, withRouter } from "react-router-dom"; -import { userIsLoggedIn } from "../../auth/index"; -import Login from "../../containers/auth/Login"; -import Logout from "../../containers/auth/Logout"; -import ProfileName from "../../containers/auth/ProfileName"; -import "./Navbar.css"; +import classNames from 'classnames' +import React from 'react' +import { Link, withRouter } from 'react-router-dom' +import { userIsLoggedIn } from '../../auth/index' +import Login from '../../containers/auth/Login' +import Logout from '../../containers/auth/Logout' +import ProfileName from '../../containers/auth/ProfileName' +import './Navbar.css' -export const NAVBAR_HEIGHT = 60; +export const NAVBAR_HEIGHT = 60 -export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />); +export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />) export const LoggedInSection = withRouter(props => ( - <LoggedInSectionWithoutRoute {...props} /> -)); + <LoggedInSectionWithoutRoute {...props} /> +)) const GitHubLink = () => ( - <a - href="https://github.com/atlarge-research/opendc" - className="ml-2 mr-3 text-dark" - style={{ position: "relative", top: 7 }} - > - <span className="fa fa-github fa-2x" /> - </a> -); + <a + href="https://github.com/atlarge-research/opendc" + className="ml-2 mr-3 text-dark" + style={{ position: 'relative', top: 7 }} + > + <span className="fa fa-github fa-2x"/> + </a> +) const NavItemWithoutRoute = ({ route, location, children }) => ( - <li - className={classNames( - "nav-item", - location.pathname === route ? "active" : undefined - )} - > - {children} - </li> -); + <li + className={classNames( + 'nav-item', + location.pathname === route ? 'active' : undefined, + )} + > + {children} + </li> +) const LoggedInSectionWithoutRoute = ({ location }) => ( - <ul className="navbar-nav auth-links"> - {userIsLoggedIn() ? ( - [ - location.pathname === "/" ? ( - <NavItem route="/simulations" key="simulations"> - <Link className="nav-link" title="My Simulations" to="/simulations"> - My Simulations - </Link> - </NavItem> + <ul className="navbar-nav auth-links"> + {userIsLoggedIn() ? ( + [ + location.pathname === '/' ? ( + <NavItem route="/simulations" key="simulations"> + <Link className="nav-link" title="My Simulations" to="/simulations"> + My Simulations + </Link> + </NavItem> + ) : ( + <NavItem route="/profile" key="profile"> + <Link className="nav-link" title="My Profile" to="/profile"> + <ProfileName/> + </Link> + </NavItem> + ), + <NavItem route="logout" key="logout"> + <Logout/> + </NavItem>, + ] ) : ( - <NavItem route="/profile" key="profile"> - <Link className="nav-link" title="My Profile" to="/profile"> - <ProfileName /> - </Link> - </NavItem> - ), - <NavItem route="logout" key="logout"> - <Logout /> - </NavItem> - ] - ) : ( - <NavItem route="login"> - <GitHubLink /> - <Login visible={true} /> - </NavItem> - )} - </ul> -); + <NavItem route="login"> + <GitHubLink/> + <Login visible={true}/> + </NavItem> + )} + </ul> +) const Navbar = ({ fullWidth, children }) => ( - <nav - className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" - id="navbar" - > - <div className={fullWidth ? "container-fluid" : "container"}> - <button - className="navbar-toggler navbar-toggler-right" - type="button" - data-toggle="collapse" - data-target="#navbarSupportedContent" - aria-controls="navbarSupportedContent" - aria-expanded="false" - aria-label="Toggle navigation" - > - <span className="navbar-toggler-icon" /> - </button> - <Link - className="navbar-brand opendc-brand" - to="/" - title="OpenDC" - onClick={() => window.scrollTo(0, 0)} - > - <img src="/img/logo.png" alt="OpenDC" /> - </Link> + <nav + className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" + id="navbar" + > + <div className={fullWidth ? 'container-fluid' : 'container'}> + <button + className="navbar-toggler navbar-toggler-right" + type="button" + data-toggle="collapse" + data-target="#navbarSupportedContent" + aria-controls="navbarSupportedContent" + aria-expanded="false" + aria-label="Toggle navigation" + > + <span className="navbar-toggler-icon"/> + </button> + <Link + className="navbar-brand opendc-brand" + to="/" + title="OpenDC" + onClick={() => window.scrollTo(0, 0)} + > + <img src="/img/logo.png" alt="OpenDC"/> + </Link> - <div className="collapse navbar-collapse" id="navbarSupportedContent"> - <ul className="navbar-nav mr-auto">{children}</ul> - <LoggedInSection /> - </div> - </div> - </nav> -); + <div className="collapse navbar-collapse" id="navbarSupportedContent"> + <ul className="navbar-nav mr-auto">{children}</ul> + <LoggedInSection/> + </div> + </div> + </nav> +) -export default Navbar; +export default Navbar diff --git a/frontend/src/components/navigation/Navbar.sass b/frontend/src/components/navigation/Navbar.sass index 94c52936..a270bc6b 100644 --- a/frontend/src/components/navigation/Navbar.sass +++ b/frontend/src/components/navigation/Navbar.sass @@ -2,28 +2,28 @@ @import ../../style-globals/_variables.sass .navbar - border-top: $blue 3px solid - border-bottom: $gray-semi-dark 1px solid - color: $gray-very-dark - background: #fafafb + border-top: $blue 3px solid + border-bottom: $gray-semi-dark 1px solid + color: $gray-very-dark + background: #fafafb .opendc-brand - display: inline-block - color: $gray-very-dark + display: inline-block + color: $gray-very-dark - +transition(background, $transition-length) + +transition(background, $transition-length) - img - position: relative - bottom: 3px - display: inline-block - width: 30px + img + position: relative + bottom: 3px + display: inline-block + width: 30px .login - height: 40px - background: $blue - border: none - +clickable + height: 40px + background: $blue + border: none + +clickable - &:hover - background: $blue-dark + &:hover + background: $blue-dark diff --git a/frontend/src/components/not-found/BlinkingCursor.js b/frontend/src/components/not-found/BlinkingCursor.js index eea89e7b..bc2d2366 100644 --- a/frontend/src/components/not-found/BlinkingCursor.js +++ b/frontend/src/components/not-found/BlinkingCursor.js @@ -1,6 +1,6 @@ -import React from "react"; -import "./BlinkingCursor.css"; +import React from 'react' +import './BlinkingCursor.css' -const BlinkingCursor = () => <span className="blinking-cursor">_</span>; +const BlinkingCursor = () => <span className="blinking-cursor">_</span> -export default BlinkingCursor; +export default BlinkingCursor diff --git a/frontend/src/components/not-found/BlinkingCursor.sass b/frontend/src/components/not-found/BlinkingCursor.sass index 6be1476d..ad91df85 100644 --- a/frontend/src/components/not-found/BlinkingCursor.sass +++ b/frontend/src/components/not-found/BlinkingCursor.sass @@ -1,35 +1,35 @@ .blinking-cursor - -webkit-animation: 1s blink step-end infinite - -moz-animation: 1s blink step-end infinite - -o-animation: 1s blink step-end infinite - animation: 1s blink step-end infinite + -webkit-animation: 1s blink step-end infinite + -moz-animation: 1s blink step-end infinite + -o-animation: 1s blink step-end infinite + animation: 1s blink step-end infinite @keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 @-moz-keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 @-webkit-keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 @-ms-keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 @-o-keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js index 46dc4402..9e9cd29c 100644 --- a/frontend/src/components/not-found/CodeBlock.js +++ b/frontend/src/components/not-found/CodeBlock.js @@ -1,34 +1,34 @@ -import React from "react"; -import "./CodeBlock.css"; +import React from 'react' +import './CodeBlock.css' const CodeBlock = () => { - const textBlock = - " oo oooo oo <br/>" + - " oo oo oo oo <br/>" + - " oo oo oo oo <br/>" + - " oooooo oo oo oooooo <br/>" + - " oo oo oo oo <br/>" + - " oo oooo oo <br/>"; - const charList = textBlock.split(""); + const textBlock = + ' oo oooo oo <br/>' + + ' oo oo oo oo <br/>' + + ' oo oo oo oo <br/>' + + ' oooooo oo oo oooooo <br/>' + + ' oo oo oo oo <br/>' + + ' oo oooo oo <br/>' + const charList = textBlock.split('') - // Binary representation of the string "OpenDC!" ;) - const binaryString = - "01001111011100000110010101101110010001000100001100100001"; + // Binary representation of the string "OpenDC!" ;) + const binaryString = + '01001111011100000110010101101110010001000100001100100001' - let binaryIndex = 0; - for (let i = 0; i < charList.length; i++) { - if (charList[i] === "o") { - charList[i] = binaryString[binaryIndex]; - binaryIndex++; + let binaryIndex = 0 + for (let i = 0; i < charList.length; i++) { + if (charList[i] === 'o') { + charList[i] = binaryString[binaryIndex] + binaryIndex++ + } } - } - return ( - <div - className="code-block" - dangerouslySetInnerHTML={{ __html: textBlock }} - /> - ); -}; + return ( + <div + className="code-block" + dangerouslySetInnerHTML={{ __html: textBlock }} + /> + ) +} -export default CodeBlock; +export default CodeBlock diff --git a/frontend/src/components/not-found/CodeBlock.sass b/frontend/src/components/not-found/CodeBlock.sass index 51a3d3d0..e452f917 100644 --- a/frontend/src/components/not-found/CodeBlock.sass +++ b/frontend/src/components/not-found/CodeBlock.sass @@ -1,3 +1,3 @@ .code-block - white-space: pre-wrap - margin-top: 60px + white-space: pre-wrap + margin-top: 60px diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js index c6b8b78b..b629d14c 100644 --- a/frontend/src/components/not-found/TerminalWindow.js +++ b/frontend/src/components/not-found/TerminalWindow.js @@ -1,29 +1,29 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import BlinkingCursor from "./BlinkingCursor"; -import CodeBlock from "./CodeBlock"; -import "./TerminalWindow.css"; +import React from 'react' +import { Link } from 'react-router-dom' +import BlinkingCursor from './BlinkingCursor' +import CodeBlock from './CodeBlock' +import './TerminalWindow.css' const TerminalWindow = () => ( - <div className="terminal-window"> - <div className="terminal-header">Terminal -- bash</div> - <div className="terminal-body"> - <div className="segfault"> - $ status<br /> - opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4<br - /> - opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4<br /> - opendc[4270]: STDERR Page does not exist<br /> - </div> - <CodeBlock /> - <div className="sub-title"> - Got lost?<BlinkingCursor /> - </div> - <Link to="/" className="home-btn"> - <span className="fa fa-home" /> GET ME BACK TO OPENDC - </Link> + <div className="terminal-window"> + <div className="terminal-header">Terminal -- bash</div> + <div className="terminal-body"> + <div className="segfault"> + $ status<br/> + opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4<br + /> + opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4<br/> + opendc[4270]: STDERR Page does not exist<br/> + </div> + <CodeBlock/> + <div className="sub-title"> + Got lost?<BlinkingCursor/> + </div> + <Link to="/" className="home-btn"> + <span className="fa fa-home"/> GET ME BACK TO OPENDC + </Link> + </div> </div> - </div> -); +) -export default TerminalWindow; +export default TerminalWindow diff --git a/frontend/src/components/not-found/TerminalWindow.sass b/frontend/src/components/not-found/TerminalWindow.sass index 4f51a77f..7f05335a 100644 --- a/frontend/src/components/not-found/TerminalWindow.sass +++ b/frontend/src/components/not-found/TerminalWindow.sass @@ -1,70 +1,70 @@ .terminal-window - width: 600px - height: 400px - display: block + width: 600px + height: 400px + display: block - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 + position: absolute + top: 0 + bottom: 0 + left: 0 + right: 0 - margin: auto + margin: auto - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - cursor: default + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + cursor: default - overflow: hidden + overflow: hidden - box-shadow: 5px 5px 20px #444444 + box-shadow: 5px 5px 20px #444444 .terminal-header - font-family: monospace - background: #cccccc - color: #444444 - height: 30px - line-height: 30px - padding-left: 10px + font-family: monospace + background: #cccccc + color: #444444 + height: 30px + line-height: 30px + padding-left: 10px - border-top-left-radius: 7px - border-top-right-radius: 7px + border-top-left-radius: 7px + border-top-right-radius: 7px .terminal-body - font-family: monospace - text-align: center - background-color: #333333 - color: #eeeeee - padding: 10px + font-family: monospace + text-align: center + background-color: #333333 + color: #eeeeee + padding: 10px - height: 100% + height: 100% .segfault - text-align: left + text-align: left .sub-title - margin-top: 20px + margin-top: 20px .home-btn - margin-top: 10px - padding: 5px - display: inline-block - border: 1px solid #eeeeee - color: #eeeeee - text-decoration: none - cursor: pointer + margin-top: 10px + padding: 5px + display: inline-block + border: 1px solid #eeeeee + color: #eeeeee + text-decoration: none + cursor: pointer - -webkit-transition: all 200ms - -moz-transition: all 200ms - -o-transition: all 200ms - transition: all 200ms + -webkit-transition: all 200ms + -moz-transition: all 200ms + -o-transition: all 200ms + transition: all 200ms .home-btn:hover - background: #eeeeee - color: #333333 + background: #eeeeee + color: #333333 .home-btn:active - background: #333333 - color: #eeeeee + background: #333333 + color: #eeeeee diff --git a/frontend/src/components/simulations/FilterButton.js b/frontend/src/components/simulations/FilterButton.js index aa41f180..664f9b46 100644 --- a/frontend/src/components/simulations/FilterButton.js +++ b/frontend/src/components/simulations/FilterButton.js @@ -1,24 +1,24 @@ -import classNames from "classnames"; -import PropTypes from "prop-types"; -import React from "react"; +import classNames from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' const FilterButton = ({ active, children, onClick }) => ( - <button - className={classNames("btn btn-secondary", { active: active })} - onClick={() => { - if (!active) { - onClick(); - } - }} - > - {children} - </button> -); + <button + className={classNames('btn btn-secondary', { active: active })} + onClick={() => { + if (!active) { + onClick() + } + }} + > + {children} + </button> +) FilterButton.propTypes = { - active: PropTypes.bool.isRequired, - children: PropTypes.node.isRequired, - onClick: PropTypes.func.isRequired -}; + active: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, + onClick: PropTypes.func.isRequired, +} -export default FilterButton; +export default FilterButton diff --git a/frontend/src/components/simulations/FilterPanel.js b/frontend/src/components/simulations/FilterPanel.js index 836c0842..cbc3bf6a 100644 --- a/frontend/src/components/simulations/FilterPanel.js +++ b/frontend/src/components/simulations/FilterPanel.js @@ -1,13 +1,13 @@ -import React from "react"; -import FilterLink from "../../containers/simulations/FilterLink"; -import "./FilterPanel.css"; +import React from 'react' +import FilterLink from '../../containers/simulations/FilterLink' +import './FilterPanel.css' const FilterPanel = () => ( - <div className="btn-group filter-panel mb-2"> - <FilterLink filter="SHOW_ALL">All Simulations</FilterLink> - <FilterLink filter="SHOW_OWN">My Simulations</FilterLink> - <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink> - </div> -); + <div className="btn-group filter-panel mb-2"> + <FilterLink filter="SHOW_ALL">All Simulations</FilterLink> + <FilterLink filter="SHOW_OWN">My Simulations</FilterLink> + <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink> + </div> +) -export default FilterPanel; +export default FilterPanel diff --git a/frontend/src/components/simulations/FilterPanel.sass b/frontend/src/components/simulations/FilterPanel.sass index e10e4746..f71cf6c8 100644 --- a/frontend/src/components/simulations/FilterPanel.sass +++ b/frontend/src/components/simulations/FilterPanel.sass @@ -1,5 +1,5 @@ .filter-panel - display: flex + display: flex - button - flex: 1 !important + button + flex: 1 !important diff --git a/frontend/src/components/simulations/NewSimulationButtonComponent.js b/frontend/src/components/simulations/NewSimulationButtonComponent.js index 7e12d30f..d07a6419 100644 --- a/frontend/src/components/simulations/NewSimulationButtonComponent.js +++ b/frontend/src/components/simulations/NewSimulationButtonComponent.js @@ -1,17 +1,17 @@ -import PropTypes from "prop-types"; -import React from "react"; +import PropTypes from 'prop-types' +import React from 'react' const NewSimulationButtonComponent = ({ onClick }) => ( - <div className="bottom-btn-container"> - <div className="btn btn-primary float-right" onClick={onClick}> - <span className="fa fa-plus mr-2" /> - New Simulation + <div className="bottom-btn-container"> + <div className="btn btn-primary float-right" onClick={onClick}> + <span className="fa fa-plus mr-2"/> + New Simulation + </div> </div> - </div> -); +) NewSimulationButtonComponent.propTypes = { - onClick: PropTypes.func.isRequired -}; + onClick: PropTypes.func.isRequired, +} -export default NewSimulationButtonComponent; +export default NewSimulationButtonComponent diff --git a/frontend/src/components/simulations/SimulationActionButtons.js b/frontend/src/components/simulations/SimulationActionButtons.js index 46f4f159..6d2e5831 100644 --- a/frontend/src/components/simulations/SimulationActionButtons.js +++ b/frontend/src/components/simulations/SimulationActionButtons.js @@ -1,37 +1,37 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Link } from "react-router-dom"; +import PropTypes from 'prop-types' +import React from 'react' +import { Link } from 'react-router-dom' const SimulationActionButtons = ({ simulationId, onViewUsers, onDelete }) => ( - <td className="text-right"> - <Link - to={"/simulations/" + simulationId} - className="btn btn-outline-primary btn-sm mr-2" - title="Open this simulation" - > - <span className="fa fa-play" /> - </Link> - <div - className="btn btn-outline-success btn-sm disabled mr-2" - title="View and edit collaborators (not supported yet)" - onClick={() => onViewUsers(simulationId)} - > - <span className="fa fa-users" /> - </div> - <div - className="btn btn-outline-danger btn-sm" - title="Delete this simulation" - onClick={() => onDelete(simulationId)} - > - <span className="fa fa-trash" /> - </div> - </td> -); + <td className="text-right"> + <Link + to={'/simulations/' + simulationId} + className="btn btn-outline-primary btn-sm mr-2" + title="Open this simulation" + > + <span className="fa fa-play"/> + </Link> + <div + className="btn btn-outline-success btn-sm disabled mr-2" + title="View and edit collaborators (not supported yet)" + onClick={() => onViewUsers(simulationId)} + > + <span className="fa fa-users"/> + </div> + <div + className="btn btn-outline-danger btn-sm" + title="Delete this simulation" + onClick={() => onDelete(simulationId)} + > + <span className="fa fa-trash"/> + </div> + </td> +) SimulationActionButtons.propTypes = { - simulationId: PropTypes.number.isRequired, - onViewUsers: PropTypes.func, - onDelete: PropTypes.func -}; + simulationId: PropTypes.number.isRequired, + onViewUsers: PropTypes.func, + onDelete: PropTypes.func, +} -export default SimulationActionButtons; +export default SimulationActionButtons diff --git a/frontend/src/components/simulations/SimulationAuthList.js b/frontend/src/components/simulations/SimulationAuthList.js index f29dc96d..dce7fb5c 100644 --- a/frontend/src/components/simulations/SimulationAuthList.js +++ b/frontend/src/components/simulations/SimulationAuthList.js @@ -1,43 +1,43 @@ -import PropTypes from "prop-types"; -import React from "react"; -import Shapes from "../../shapes/index"; -import SimulationAuthRow from "./SimulationAuthRow"; +import PropTypes from 'prop-types' +import React from 'react' +import Shapes from '../../shapes/index' +import SimulationAuthRow from './SimulationAuthRow' const SimulationAuthList = ({ authorizations }) => { - return ( - <div className="vertically-expanding-container"> - {authorizations.length === 0 ? ( - <div className="alert alert-info"> - <span className="info-icon fa fa-question-circle mr-2" /> - <strong>No simulations here yet...</strong> Add some with the 'New - Simulation' button! + return ( + <div className="vertically-expanding-container"> + {authorizations.length === 0 ? ( + <div className="alert alert-info"> + <span className="info-icon fa fa-question-circle mr-2"/> + <strong>No simulations here yet...</strong> Add some with the 'New + Simulation' button! + </div> + ) : ( + <table className="table table-striped"> + <thead> + <tr> + <th>Simulation name</th> + <th>Last edited</th> + <th>Access rights</th> + <th/> + </tr> + </thead> + <tbody> + {authorizations.map(authorization => ( + <SimulationAuthRow + simulationAuth={authorization} + key={authorization.simulation.id} + /> + ))} + </tbody> + </table> + )} </div> - ) : ( - <table className="table table-striped"> - <thead> - <tr> - <th>Simulation name</th> - <th>Last edited</th> - <th>Access rights</th> - <th /> - </tr> - </thead> - <tbody> - {authorizations.map(authorization => ( - <SimulationAuthRow - simulationAuth={authorization} - key={authorization.simulation.id} - /> - ))} - </tbody> - </table> - )} - </div> - ); -}; + ) +} SimulationAuthList.propTypes = { - authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired -}; + authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired, +} -export default SimulationAuthList; +export default SimulationAuthList diff --git a/frontend/src/components/simulations/SimulationAuthRow.js b/frontend/src/components/simulations/SimulationAuthRow.js index b638fbce..b647db69 100644 --- a/frontend/src/components/simulations/SimulationAuthRow.js +++ b/frontend/src/components/simulations/SimulationAuthRow.js @@ -1,32 +1,32 @@ -import classNames from "classnames"; -import React from "react"; -import SimulationActions from "../../containers/simulations/SimulationActions"; -import Shapes from "../../shapes/index"; -import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from "../../util/authorizations"; -import { parseAndFormatDateTime } from "../../util/date-time"; +import classNames from 'classnames' +import React from 'react' +import SimulationActions from '../../containers/simulations/SimulationActions' +import Shapes from '../../shapes/index' +import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations' +import { parseAndFormatDateTime } from '../../util/date-time' const SimulationAuthRow = ({ simulationAuth }) => ( - <tr> - <td className="pt-3">{simulationAuth.simulation.name}</td> - <td className="pt-3"> - {parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)} - </td> - <td className="pt-3"> + <tr> + <td className="pt-3">{simulationAuth.simulation.name}</td> + <td className="pt-3"> + {parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)} + </td> + <td className="pt-3"> <span - className={classNames( - "fa", - "fa-" + AUTH_ICON_MAP[simulationAuth.authorizationLevel], - "mr-2" - )} + className={classNames( + 'fa', + 'fa-' + AUTH_ICON_MAP[simulationAuth.authorizationLevel], + 'mr-2', + )} /> - {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]} - </td> - <SimulationActions simulationId={simulationAuth.simulation.id} /> - </tr> -); + {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]} + </td> + <SimulationActions simulationId={simulationAuth.simulation.id}/> + </tr> +) SimulationAuthRow.propTypes = { - simulationAuth: Shapes.Authorization.isRequired -}; + simulationAuth: Shapes.Authorization.isRequired, +} -export default SimulationAuthRow; +export default SimulationAuthRow diff --git a/frontend/src/containers/app/map/DatacenterContainer.js b/frontend/src/containers/app/map/DatacenterContainer.js index 125739f3..9ed1d38c 100644 --- a/frontend/src/containers/app/map/DatacenterContainer.js +++ b/frontend/src/containers/app/map/DatacenterContainer.js @@ -1,17 +1,17 @@ -import { connect } from "react-redux"; -import DatacenterGroup from "../../../components/app/map/groups/DatacenterGroup"; +import { connect } from 'react-redux' +import DatacenterGroup from '../../../components/app/map/groups/DatacenterGroup' const mapStateToProps = state => { - if (state.currentDatacenterId === -1) { - return {}; - } + if (state.currentDatacenterId === -1) { + return {} + } - return { - datacenter: state.objects.datacenter[state.currentDatacenterId], - interactionLevel: state.interactionLevel - }; -}; + return { + datacenter: state.objects.datacenter[state.currentDatacenterId], + interactionLevel: state.interactionLevel, + } +} -const DatacenterContainer = connect(mapStateToProps)(DatacenterGroup); +const DatacenterContainer = connect(mapStateToProps)(DatacenterGroup) -export default DatacenterContainer; +export default DatacenterContainer diff --git a/frontend/src/containers/app/map/GrayContainer.js b/frontend/src/containers/app/map/GrayContainer.js index d215bf6c..4ae3beac 100644 --- a/frontend/src/containers/app/map/GrayContainer.js +++ b/frontend/src/containers/app/map/GrayContainer.js @@ -1,13 +1,13 @@ -import { connect } from "react-redux"; -import { goDownOneInteractionLevel } from "../../../actions/interaction-level"; -import GrayLayer from "../../../components/app/map/elements/GrayLayer"; +import { connect } from 'react-redux' +import { goDownOneInteractionLevel } from '../../../actions/interaction-level' +import GrayLayer from '../../../components/app/map/elements/GrayLayer' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(goDownOneInteractionLevel()) - }; -}; + return { + onClick: () => dispatch(goDownOneInteractionLevel()), + } +} -const GrayContainer = connect(undefined, mapDispatchToProps)(GrayLayer); +const GrayContainer = connect(undefined, mapDispatchToProps)(GrayLayer) -export default GrayContainer; +export default GrayContainer diff --git a/frontend/src/containers/app/map/MapStage.js b/frontend/src/containers/app/map/MapStage.js index a8467171..e8abb86f 100644 --- a/frontend/src/containers/app/map/MapStage.js +++ b/frontend/src/containers/app/map/MapStage.js @@ -1,31 +1,31 @@ -import { connect } from "react-redux"; +import { connect } from 'react-redux' import { - setMapDimensions, - setMapPositionWithBoundsCheck, - zoomInOnPosition -} from "../../../actions/map"; -import MapStageComponent from "../../../components/app/map/MapStageComponent"; + setMapDimensions, + setMapPositionWithBoundsCheck, + zoomInOnPosition, +} from '../../../actions/map' +import MapStageComponent from '../../../components/app/map/MapStageComponent' const mapStateToProps = state => { - return { - mapPosition: state.map.position, - mapDimensions: state.map.dimensions - }; -}; + return { + mapPosition: state.map.position, + mapDimensions: state.map.dimensions, + } +} const mapDispatchToProps = dispatch => { - return { - zoomInOnPosition: (zoomIn, x, y) => - dispatch(zoomInOnPosition(zoomIn, x, y)), - setMapPositionWithBoundsCheck: (x, y) => - dispatch(setMapPositionWithBoundsCheck(x, y)), - setMapDimensions: (width, height) => - dispatch(setMapDimensions(width, height)) - }; -}; + return { + zoomInOnPosition: (zoomIn, x, y) => + dispatch(zoomInOnPosition(zoomIn, x, y)), + setMapPositionWithBoundsCheck: (x, y) => + dispatch(setMapPositionWithBoundsCheck(x, y)), + setMapDimensions: (width, height) => + dispatch(setMapDimensions(width, height)), + } +} const MapStage = connect(mapStateToProps, mapDispatchToProps)( - MapStageComponent -); + MapStageComponent, +) -export default MapStage; +export default MapStage diff --git a/frontend/src/containers/app/map/RackContainer.js b/frontend/src/containers/app/map/RackContainer.js index 365bb062..614421b4 100644 --- a/frontend/src/containers/app/map/RackContainer.js +++ b/frontend/src/containers/app/map/RackContainer.js @@ -1,30 +1,30 @@ -import { connect } from "react-redux"; -import RackGroup from "../../../components/app/map/groups/RackGroup"; -import { getStateLoad } from "../../../util/simulation-load"; +import { connect } from 'react-redux' +import RackGroup from '../../../components/app/map/groups/RackGroup' +import { getStateLoad } from '../../../util/simulation-load' const mapStateToProps = (state, ownProps) => { - const inSimulation = state.currentExperimentId !== -1; + const inSimulation = state.currentExperimentId !== -1 - let rackLoad = undefined; - if (inSimulation) { - if ( - state.states.rack[state.currentTick] && - state.states.rack[state.currentTick][ownProps.tile.objectId] - ) { - rackLoad = getStateLoad( - state.loadMetric, - state.states.rack[state.currentTick][ownProps.tile.objectId] - ); + let rackLoad = undefined + if (inSimulation) { + if ( + state.states.rack[state.currentTick] && + state.states.rack[state.currentTick][ownProps.tile.objectId] + ) { + rackLoad = getStateLoad( + state.loadMetric, + state.states.rack[state.currentTick][ownProps.tile.objectId], + ) + } } - } - return { - interactionLevel: state.interactionLevel, - inSimulation, - rackLoad - }; -}; + return { + interactionLevel: state.interactionLevel, + inSimulation, + rackLoad, + } +} -const RackContainer = connect(mapStateToProps)(RackGroup); +const RackContainer = connect(mapStateToProps)(RackGroup) -export default RackContainer; +export default RackContainer diff --git a/frontend/src/containers/app/map/RackEnergyFillContainer.js b/frontend/src/containers/app/map/RackEnergyFillContainer.js index 0b7921d9..e25cd37d 100644 --- a/frontend/src/containers/app/map/RackEnergyFillContainer.js +++ b/frontend/src/containers/app/map/RackEnergyFillContainer.js @@ -1,40 +1,40 @@ -import { connect } from "react-redux"; -import RackFillBar from "../../../components/app/map/elements/RackFillBar"; +import { connect } from 'react-redux' +import RackFillBar from '../../../components/app/map/elements/RackFillBar' const mapStateToProps = (state, ownProps) => { - let energyConsumptionTotal = 0; - const rack = state.objects.rack[state.objects.tile[ownProps.tileId].objectId]; - const machineIds = rack.machineIds; - machineIds.forEach(machineId => { - if (machineId !== null) { - const machine = state.objects.machine[machineId]; - machine.cpuIds.forEach( - id => - (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW) - ); - machine.gpuIds.forEach( - id => - (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW) - ); - machine.memoryIds.forEach( - id => - (energyConsumptionTotal += - state.objects.memory[id].energyConsumptionW) - ); - machine.storageIds.forEach( - id => - (energyConsumptionTotal += - state.objects.storage[id].energyConsumptionW) - ); - } - }); + let energyConsumptionTotal = 0 + const rack = state.objects.rack[state.objects.tile[ownProps.tileId].objectId] + const machineIds = rack.machineIds + machineIds.forEach(machineId => { + if (machineId !== null) { + const machine = state.objects.machine[machineId] + machine.cpuIds.forEach( + id => + (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW), + ) + machine.gpuIds.forEach( + id => + (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW), + ) + machine.memoryIds.forEach( + id => + (energyConsumptionTotal += + state.objects.memory[id].energyConsumptionW), + ) + machine.storageIds.forEach( + id => + (energyConsumptionTotal += + state.objects.storage[id].energyConsumptionW), + ) + } + }) - return { - type: "energy", - fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW) - }; -}; + return { + type: 'energy', + fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW), + } +} -const RackSpaceFillContainer = connect(mapStateToProps)(RackFillBar); +const RackSpaceFillContainer = connect(mapStateToProps)(RackFillBar) -export default RackSpaceFillContainer; +export default RackSpaceFillContainer diff --git a/frontend/src/containers/app/map/RackSpaceFillContainer.js b/frontend/src/containers/app/map/RackSpaceFillContainer.js index cc4d1251..c43695a9 100644 --- a/frontend/src/containers/app/map/RackSpaceFillContainer.js +++ b/frontend/src/containers/app/map/RackSpaceFillContainer.js @@ -1,16 +1,16 @@ -import { connect } from "react-redux"; -import RackFillBar from "../../../components/app/map/elements/RackFillBar"; +import { connect } from 'react-redux' +import RackFillBar from '../../../components/app/map/elements/RackFillBar' const mapStateToProps = (state, ownProps) => { - const machineIds = - state.objects.rack[state.objects.tile[ownProps.tileId].objectId].machineIds; - return { - type: "space", - fillFraction: - machineIds.filter(id => id !== null).length / machineIds.length - }; -}; + const machineIds = + state.objects.rack[state.objects.tile[ownProps.tileId].objectId].machineIds + return { + type: 'space', + fillFraction: + machineIds.filter(id => id !== null).length / machineIds.length, + } +} -const RackSpaceFillContainer = connect(mapStateToProps)(RackFillBar); +const RackSpaceFillContainer = connect(mapStateToProps)(RackFillBar) -export default RackSpaceFillContainer; +export default RackSpaceFillContainer diff --git a/frontend/src/containers/app/map/RoomContainer.js b/frontend/src/containers/app/map/RoomContainer.js index b83c7fa0..91bf4e5d 100644 --- a/frontend/src/containers/app/map/RoomContainer.js +++ b/frontend/src/containers/app/map/RoomContainer.js @@ -1,21 +1,21 @@ -import { connect } from "react-redux"; -import { goFromBuildingToRoom } from "../../../actions/interaction-level"; -import RoomGroup from "../../../components/app/map/groups/RoomGroup"; +import { connect } from 'react-redux' +import { goFromBuildingToRoom } from '../../../actions/interaction-level' +import RoomGroup from '../../../components/app/map/groups/RoomGroup' const mapStateToProps = (state, ownProps) => { - return { - interactionLevel: state.interactionLevel, - currentRoomInConstruction: state.construction.currentRoomInConstruction, - room: state.objects.room[ownProps.roomId] - }; -}; + return { + interactionLevel: state.interactionLevel, + currentRoomInConstruction: state.construction.currentRoomInConstruction, + room: state.objects.room[ownProps.roomId], + } +} const mapDispatchToProps = (dispatch, ownProps) => { - return { - onClick: () => dispatch(goFromBuildingToRoom(ownProps.roomId)) - }; -}; + return { + onClick: () => dispatch(goFromBuildingToRoom(ownProps.roomId)), + } +} -const RoomContainer = connect(mapStateToProps, mapDispatchToProps)(RoomGroup); +const RoomContainer = connect(mapStateToProps, mapDispatchToProps)(RoomGroup) -export default RoomContainer; +export default RoomContainer diff --git a/frontend/src/containers/app/map/TileContainer.js b/frontend/src/containers/app/map/TileContainer.js index 9e179924..6122be96 100644 --- a/frontend/src/containers/app/map/TileContainer.js +++ b/frontend/src/containers/app/map/TileContainer.js @@ -1,43 +1,43 @@ -import { connect } from "react-redux"; -import { goFromRoomToRack } from "../../../actions/interaction-level"; -import TileGroup from "../../../components/app/map/groups/TileGroup"; -import { getStateLoad } from "../../../util/simulation-load"; +import { connect } from 'react-redux' +import { goFromRoomToRack } from '../../../actions/interaction-level' +import TileGroup from '../../../components/app/map/groups/TileGroup' +import { getStateLoad } from '../../../util/simulation-load' const mapStateToProps = (state, ownProps) => { - const tile = state.objects.tile[ownProps.tileId]; - const inSimulation = state.currentExperimentId !== -1; + const tile = state.objects.tile[ownProps.tileId] + const inSimulation = state.currentExperimentId !== -1 - let roomLoad = undefined; - if (inSimulation) { - if ( - state.states.room[state.currentTick] && - state.states.room[state.currentTick][tile.roomId] - ) { - roomLoad = getStateLoad( - state.loadMetric, - state.states.room[state.currentTick][tile.roomId] - ); + let roomLoad = undefined + if (inSimulation) { + if ( + state.states.room[state.currentTick] && + state.states.room[state.currentTick][tile.roomId] + ) { + roomLoad = getStateLoad( + state.loadMetric, + state.states.room[state.currentTick][tile.roomId], + ) + } } - } - return { - interactionLevel: state.interactionLevel, - tile, - inSimulation, - roomLoad - }; -}; + return { + interactionLevel: state.interactionLevel, + tile, + inSimulation, + roomLoad, + } +} const mapDispatchToProps = dispatch => { - return { - onClick: tile => { - if (tile.objectType) { - dispatch(goFromRoomToRack(tile.id)); - } + return { + onClick: tile => { + if (tile.objectType) { + dispatch(goFromRoomToRack(tile.id)) + } + }, } - }; -}; +} -const TileContainer = connect(mapStateToProps, mapDispatchToProps)(TileGroup); +const TileContainer = connect(mapStateToProps, mapDispatchToProps)(TileGroup) -export default TileContainer; +export default TileContainer diff --git a/frontend/src/containers/app/map/WallContainer.js b/frontend/src/containers/app/map/WallContainer.js index 38192b05..b288a534 100644 --- a/frontend/src/containers/app/map/WallContainer.js +++ b/frontend/src/containers/app/map/WallContainer.js @@ -1,14 +1,14 @@ -import { connect } from "react-redux"; -import WallGroup from "../../../components/app/map/groups/WallGroup"; +import { connect } from 'react-redux' +import WallGroup from '../../../components/app/map/groups/WallGroup' const mapStateToProps = (state, ownProps) => { - return { - tiles: state.objects.room[ownProps.roomId].tileIds.map( - tileId => state.objects.tile[tileId] - ) - }; -}; + return { + tiles: state.objects.room[ownProps.roomId].tileIds.map( + tileId => state.objects.tile[tileId], + ), + } +} -const WallContainer = connect(mapStateToProps)(WallGroup); +const WallContainer = connect(mapStateToProps)(WallGroup) -export default WallContainer; +export default WallContainer diff --git a/frontend/src/containers/app/map/controls/ScaleIndicatorContainer.js b/frontend/src/containers/app/map/controls/ScaleIndicatorContainer.js index f075cde5..6e443479 100644 --- a/frontend/src/containers/app/map/controls/ScaleIndicatorContainer.js +++ b/frontend/src/containers/app/map/controls/ScaleIndicatorContainer.js @@ -1,14 +1,14 @@ -import { connect } from "react-redux"; -import ScaleIndicatorComponent from "../../../../components/app/map/controls/ScaleIndicatorComponent"; +import { connect } from 'react-redux' +import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent' const mapStateToProps = state => { - return { - scale: state.map.scale - }; -}; + return { + scale: state.map.scale, + } +} const ScaleIndicatorContainer = connect(mapStateToProps)( - ScaleIndicatorComponent -); + ScaleIndicatorComponent, +) -export default ScaleIndicatorContainer; +export default ScaleIndicatorContainer diff --git a/frontend/src/containers/app/map/controls/ZoomControlContainer.js b/frontend/src/containers/app/map/controls/ZoomControlContainer.js index 50910bd6..20811989 100644 --- a/frontend/src/containers/app/map/controls/ZoomControlContainer.js +++ b/frontend/src/containers/app/map/controls/ZoomControlContainer.js @@ -1,21 +1,21 @@ -import { connect } from "react-redux"; -import { zoomInOnCenter } from "../../../../actions/map"; -import ZoomControlComponent from "../../../../components/app/map/controls/ZoomControlComponent"; +import { connect } from 'react-redux' +import { zoomInOnCenter } from '../../../../actions/map' +import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent' const mapStateToProps = state => { - return { - mapScale: state.map.scale - }; -}; + return { + mapScale: state.map.scale, + } +} const mapDispatchToProps = dispatch => { - return { - zoomInOnCenter: zoomIn => dispatch(zoomInOnCenter(zoomIn)) - }; -}; + return { + zoomInOnCenter: zoomIn => dispatch(zoomInOnCenter(zoomIn)), + } +} const ZoomControlContainer = connect(mapStateToProps, mapDispatchToProps)( - ZoomControlComponent -); + ZoomControlComponent, +) -export default ZoomControlContainer; +export default ZoomControlContainer diff --git a/frontend/src/containers/app/map/layers/MapLayer.js b/frontend/src/containers/app/map/layers/MapLayer.js index cf971350..3c5ff8be 100644 --- a/frontend/src/containers/app/map/layers/MapLayer.js +++ b/frontend/src/containers/app/map/layers/MapLayer.js @@ -1,13 +1,13 @@ -import { connect } from "react-redux"; -import MapLayerComponent from "../../../../components/app/map/layers/MapLayerComponent"; +import { connect } from 'react-redux' +import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent' const mapStateToProps = state => { - return { - mapPosition: state.map.position, - mapScale: state.map.scale - }; -}; + return { + mapPosition: state.map.position, + mapScale: state.map.scale, + } +} -const MapLayer = connect(mapStateToProps)(MapLayerComponent); +const MapLayer = connect(mapStateToProps)(MapLayerComponent) -export default MapLayer; +export default MapLayer diff --git a/frontend/src/containers/app/map/layers/ObjectHoverLayer.js b/frontend/src/containers/app/map/layers/ObjectHoverLayer.js index 9b28575e..dc489e82 100644 --- a/frontend/src/containers/app/map/layers/ObjectHoverLayer.js +++ b/frontend/src/containers/app/map/layers/ObjectHoverLayer.js @@ -1,37 +1,37 @@ -import { connect } from "react-redux"; -import { addRackToTile } from "../../../../actions/topology/room"; -import ObjectHoverLayerComponent from "../../../../components/app/map/layers/ObjectHoverLayerComponent"; -import { findTileWithPosition } from "../../../../util/tile-calculations"; +import { connect } from 'react-redux' +import { addRackToTile } from '../../../../actions/topology/room' +import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent' +import { findTileWithPosition } from '../../../../util/tile-calculations' const mapStateToProps = state => { - return { - mapPosition: state.map.position, - mapScale: state.map.scale, - isEnabled: () => state.construction.inRackConstructionMode, - isValid: (x, y) => { - if (state.interactionLevel.mode !== "ROOM") { - return false; - } + return { + mapPosition: state.map.position, + mapScale: state.map.scale, + isEnabled: () => state.construction.inRackConstructionMode, + isValid: (x, y) => { + if (state.interactionLevel.mode !== 'ROOM') { + return false + } - const currentRoom = state.objects.room[state.interactionLevel.roomId]; - const tiles = currentRoom.tileIds.map( - tileId => state.objects.tile[tileId] - ); - const tile = findTileWithPosition(tiles, x, y); + const currentRoom = state.objects.room[state.interactionLevel.roomId] + const tiles = currentRoom.tileIds.map( + tileId => state.objects.tile[tileId], + ) + const tile = findTileWithPosition(tiles, x, y) - return !(tile === null || tile.objectType); + return !(tile === null || tile.objectType) + }, } - }; -}; +} const mapDispatchToProps = dispatch => { - return { - onClick: (x, y) => dispatch(addRackToTile(x, y)) - }; -}; + return { + onClick: (x, y) => dispatch(addRackToTile(x, y)), + } +} const ObjectHoverLayer = connect(mapStateToProps, mapDispatchToProps)( - ObjectHoverLayerComponent -); + ObjectHoverLayerComponent, +) -export default ObjectHoverLayer; +export default ObjectHoverLayer diff --git a/frontend/src/containers/app/map/layers/RoomHoverLayer.js b/frontend/src/containers/app/map/layers/RoomHoverLayer.js index 020102bf..b5a891ce 100644 --- a/frontend/src/containers/app/map/layers/RoomHoverLayer.js +++ b/frontend/src/containers/app/map/layers/RoomHoverLayer.js @@ -1,55 +1,55 @@ -import { connect } from "react-redux"; -import { toggleTileAtLocation } from "../../../../actions/topology/building"; -import RoomHoverLayerComponent from "../../../../components/app/map/layers/RoomHoverLayerComponent"; +import { connect } from 'react-redux' +import { toggleTileAtLocation } from '../../../../actions/topology/building' +import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent' import { - deriveValidNextTilePositions, - findPositionInPositions, - findPositionInRooms -} from "../../../../util/tile-calculations"; + deriveValidNextTilePositions, + findPositionInPositions, + findPositionInRooms, +} from '../../../../util/tile-calculations' const mapStateToProps = state => { - return { - mapPosition: state.map.position, - mapScale: state.map.scale, - isEnabled: () => state.construction.currentRoomInConstruction !== -1, - isValid: (x, y) => { - const newRoom = Object.assign( - {}, - state.objects.room[state.construction.currentRoomInConstruction] - ); - const oldRooms = Object.keys(state.objects.room) - .map(id => Object.assign({}, state.objects.room[id])) - .filter( - room => - state.objects.datacenter[state.currentDatacenterId].roomIds.indexOf( - room.id - ) !== -1 && room.id !== state.construction.currentRoomInConstruction - ); + return { + mapPosition: state.map.position, + mapScale: state.map.scale, + isEnabled: () => state.construction.currentRoomInConstruction !== -1, + isValid: (x, y) => { + const newRoom = Object.assign( + {}, + state.objects.room[state.construction.currentRoomInConstruction], + ) + const oldRooms = Object.keys(state.objects.room) + .map(id => Object.assign({}, state.objects.room[id])) + .filter( + room => + state.objects.datacenter[state.currentDatacenterId].roomIds.indexOf( + room.id, + ) !== -1 && room.id !== state.construction.currentRoomInConstruction, + ); - [...oldRooms, newRoom].forEach(room => { - room.tiles = room.tileIds.map(tileId => state.objects.tile[tileId]); - }); - if (newRoom.tileIds.length === 0) { - return findPositionInRooms(oldRooms, x, y) === -1; - } + [...oldRooms, newRoom].forEach(room => { + room.tiles = room.tileIds.map(tileId => state.objects.tile[tileId]) + }) + if (newRoom.tileIds.length === 0) { + return findPositionInRooms(oldRooms, x, y) === -1 + } - const validNextPositions = deriveValidNextTilePositions( - oldRooms, - newRoom.tiles - ); - return findPositionInPositions(validNextPositions, x, y) !== -1; + const validNextPositions = deriveValidNextTilePositions( + oldRooms, + newRoom.tiles, + ) + return findPositionInPositions(validNextPositions, x, y) !== -1 + }, } - }; -}; +} const mapDispatchToProps = dispatch => { - return { - onClick: (x, y) => dispatch(toggleTileAtLocation(x, y)) - }; -}; + return { + onClick: (x, y) => dispatch(toggleTileAtLocation(x, y)), + } +} const RoomHoverLayer = connect(mapStateToProps, mapDispatchToProps)( - RoomHoverLayerComponent -); + RoomHoverLayerComponent, +) -export default RoomHoverLayer; +export default RoomHoverLayer diff --git a/frontend/src/containers/app/sidebars/elements/LoadBarContainer.js b/frontend/src/containers/app/sidebars/elements/LoadBarContainer.js index 2e637f9a..5c423490 100644 --- a/frontend/src/containers/app/sidebars/elements/LoadBarContainer.js +++ b/frontend/src/containers/app/sidebars/elements/LoadBarContainer.js @@ -1,32 +1,32 @@ -import { connect } from "react-redux"; -import LoadBarComponent from "../../../../components/app/sidebars/elements/LoadBarComponent"; -import { getStateLoad } from "../../../../util/simulation-load"; +import { connect } from 'react-redux' +import LoadBarComponent from '../../../../components/app/sidebars/elements/LoadBarComponent' +import { getStateLoad } from '../../../../util/simulation-load' const mapStateToProps = (state, ownProps) => { - let percent = 0; - let enabled = false; + let percent = 0 + let enabled = false - const objectStates = state.states[ownProps.objectType]; - if ( - objectStates[state.currentTick] && - objectStates[state.currentTick][ownProps.objectId] - ) { - percent = Math.floor( - 100 * - getStateLoad( - state.loadMetric, - objectStates[state.currentTick][ownProps.objectId] + const objectStates = state.states[ownProps.objectType] + if ( + objectStates[state.currentTick] && + objectStates[state.currentTick][ownProps.objectId] + ) { + percent = Math.floor( + 100 * + getStateLoad( + state.loadMetric, + objectStates[state.currentTick][ownProps.objectId], + ), ) - ); - enabled = true; - } + enabled = true + } - return { - percent, - enabled - }; -}; + return { + percent, + enabled, + } +} -const LoadBarContainer = connect(mapStateToProps)(LoadBarComponent); +const LoadBarContainer = connect(mapStateToProps)(LoadBarComponent) -export default LoadBarContainer; +export default LoadBarContainer diff --git a/frontend/src/containers/app/sidebars/elements/LoadChartContainer.js b/frontend/src/containers/app/sidebars/elements/LoadChartContainer.js index 57bfec38..49962d57 100644 --- a/frontend/src/containers/app/sidebars/elements/LoadChartContainer.js +++ b/frontend/src/containers/app/sidebars/elements/LoadChartContainer.js @@ -1,31 +1,31 @@ -import { connect } from "react-redux"; -import LoadChartComponent from "../../../../components/app/sidebars/elements/LoadChartComponent"; -import { getStateLoad } from "../../../../util/simulation-load"; +import { connect } from 'react-redux' +import LoadChartComponent from '../../../../components/app/sidebars/elements/LoadChartComponent' +import { getStateLoad } from '../../../../util/simulation-load' const mapStateToProps = (state, ownProps) => { - const data = []; + const data = [] - if (state.lastSimulatedTick !== -1) { - const objectStates = state.states[ownProps.objectType]; - Object.keys(objectStates).forEach(tick => { - if (objectStates[tick][ownProps.objectId]) { - data.push({ - x: tick, - y: getStateLoad( - state.loadMetric, - objectStates[tick][ownProps.objectId] - ) - }); - } - }); - } + if (state.lastSimulatedTick !== -1) { + const objectStates = state.states[ownProps.objectType] + Object.keys(objectStates).forEach(tick => { + if (objectStates[tick][ownProps.objectId]) { + data.push({ + x: tick, + y: getStateLoad( + state.loadMetric, + objectStates[tick][ownProps.objectId], + ), + }) + } + }) + } - return { - data, - currentTick: state.currentTick - }; -}; + return { + data, + currentTick: state.currentTick, + } +} -const LoadChartContainer = connect(mapStateToProps)(LoadChartComponent); +const LoadChartContainer = connect(mapStateToProps)(LoadChartComponent) -export default LoadChartContainer; +export default LoadChartContainer diff --git a/frontend/src/containers/app/sidebars/simulation/ExperimentMetadataContainer.js b/frontend/src/containers/app/sidebars/simulation/ExperimentMetadataContainer.js index 25a0d9e9..06d0b88a 100644 --- a/frontend/src/containers/app/sidebars/simulation/ExperimentMetadataContainer.js +++ b/frontend/src/containers/app/sidebars/simulation/ExperimentMetadataContainer.js @@ -1,38 +1,38 @@ -import { connect } from "react-redux"; -import ExperimentMetadataComponent from "../../../../components/app/sidebars/simulation/ExperimentMetadataComponent"; +import { connect } from 'react-redux' +import ExperimentMetadataComponent from '../../../../components/app/sidebars/simulation/ExperimentMetadataComponent' const mapStateToProps = state => { - if (!state.objects.experiment[state.currentExperimentId]) { - return { - experimentName: "Loading experiment", - pathName: "", - traceName: "", - schedulerName: "" - }; - } + if (!state.objects.experiment[state.currentExperimentId]) { + return { + experimentName: 'Loading experiment', + pathName: '', + traceName: '', + schedulerName: '', + } + } - const path = - state.objects.path[ - state.objects.experiment[state.currentExperimentId].pathId - ]; - const pathName = path.name ? path.name : "Path " + path.id; + const path = + state.objects.path[ + state.objects.experiment[state.currentExperimentId].pathId + ] + const pathName = path.name ? path.name : 'Path ' + path.id - return { - experimentName: state.objects.experiment[state.currentExperimentId].name, - pathName, - traceName: - state.objects.trace[ - state.objects.experiment[state.currentExperimentId].traceId - ].name, - schedulerName: - state.objects.scheduler[ - state.objects.experiment[state.currentExperimentId].schedulerName - ].name - }; -}; + return { + experimentName: state.objects.experiment[state.currentExperimentId].name, + pathName, + traceName: + state.objects.trace[ + state.objects.experiment[state.currentExperimentId].traceId + ].name, + schedulerName: + state.objects.scheduler[ + state.objects.experiment[state.currentExperimentId].schedulerName + ].name, + } +} const ExperimentMetadataContainer = connect(mapStateToProps)( - ExperimentMetadataComponent -); + ExperimentMetadataComponent, +) -export default ExperimentMetadataContainer; +export default ExperimentMetadataContainer diff --git a/frontend/src/containers/app/sidebars/simulation/LoadMetricContainer.js b/frontend/src/containers/app/sidebars/simulation/LoadMetricContainer.js index 0c66b582..a8654698 100644 --- a/frontend/src/containers/app/sidebars/simulation/LoadMetricContainer.js +++ b/frontend/src/containers/app/sidebars/simulation/LoadMetricContainer.js @@ -1,12 +1,12 @@ -import { connect } from "react-redux"; -import LoadMetricComponent from "../../../../components/app/sidebars/simulation/LoadMetricComponent"; +import { connect } from 'react-redux' +import LoadMetricComponent from '../../../../components/app/sidebars/simulation/LoadMetricComponent' const mapStateToProps = state => { - return { - loadMetric: state.loadMetric - }; -}; + return { + loadMetric: state.loadMetric, + } +} -const LoadMetricContainer = connect(mapStateToProps)(LoadMetricComponent); +const LoadMetricContainer = connect(mapStateToProps)(LoadMetricComponent) -export default LoadMetricContainer; +export default LoadMetricContainer diff --git a/frontend/src/containers/app/sidebars/simulation/TaskContainer.js b/frontend/src/containers/app/sidebars/simulation/TaskContainer.js index 093d4266..c4c86284 100644 --- a/frontend/src/containers/app/sidebars/simulation/TaskContainer.js +++ b/frontend/src/containers/app/sidebars/simulation/TaskContainer.js @@ -1,26 +1,26 @@ -import { connect } from "react-redux"; -import TaskComponent from "../../../../components/app/sidebars/simulation/TaskComponent"; +import { connect } from 'react-redux' +import TaskComponent from '../../../../components/app/sidebars/simulation/TaskComponent' const mapStateToProps = (state, ownProps) => { - let flopsLeft = state.objects.task[ownProps.taskId].totalFlopCount; + let flopsLeft = state.objects.task[ownProps.taskId].totalFlopCount - if ( - state.states.task[state.currentTick] && - state.states.task[state.currentTick][ownProps.taskId] - ) { - flopsLeft = state.states.task[state.currentTick][ownProps.taskId].flopsLeft; - } else if ( - state.objects.task[ownProps.taskId].startTick < state.currentTick - ) { - flopsLeft = 0; - } + if ( + state.states.task[state.currentTick] && + state.states.task[state.currentTick][ownProps.taskId] + ) { + flopsLeft = state.states.task[state.currentTick][ownProps.taskId].flopsLeft + } else if ( + state.objects.task[ownProps.taskId].startTick < state.currentTick + ) { + flopsLeft = 0 + } - return { - task: state.objects.task[ownProps.taskId], - flopsLeft - }; -}; + return { + task: state.objects.task[ownProps.taskId], + flopsLeft, + } +} -const TaskContainer = connect(mapStateToProps)(TaskComponent); +const TaskContainer = connect(mapStateToProps)(TaskComponent) -export default TaskContainer; +export default TaskContainer diff --git a/frontend/src/containers/app/sidebars/simulation/TraceContainer.js b/frontend/src/containers/app/sidebars/simulation/TraceContainer.js index 682b6cc9..907c8874 100644 --- a/frontend/src/containers/app/sidebars/simulation/TraceContainer.js +++ b/frontend/src/containers/app/sidebars/simulation/TraceContainer.js @@ -1,25 +1,25 @@ -import { connect } from "react-redux"; -import TraceComponent from "../../../../components/app/sidebars/simulation/TraceComponent"; +import { connect } from 'react-redux' +import TraceComponent from '../../../../components/app/sidebars/simulation/TraceComponent' const mapStateToProps = state => { - if ( - !state.objects.experiment[state.currentExperimentId] || - !state.objects.trace[ - state.objects.experiment[state.currentExperimentId].traceId - ].jobIds - ) { - return { - jobs: [] - }; - } + if ( + !state.objects.experiment[state.currentExperimentId] || + !state.objects.trace[ + state.objects.experiment[state.currentExperimentId].traceId + ].jobIds + ) { + return { + jobs: [], + } + } - return { - jobs: state.objects.trace[ - state.objects.experiment[state.currentExperimentId].traceId - ].jobIds.map(id => state.objects.job[id]) - }; -}; + return { + jobs: state.objects.trace[ + state.objects.experiment[state.currentExperimentId].traceId + ].jobIds.map(id => state.objects.job[id]), + } +} -const TraceContainer = connect(mapStateToProps)(TraceComponent); +const TraceContainer = connect(mapStateToProps)(TraceComponent) -export default TraceContainer; +export default TraceContainer diff --git a/frontend/src/containers/app/sidebars/topology/TopologySidebar.js b/frontend/src/containers/app/sidebars/topology/TopologySidebar.js index 31c902fc..8e929d3d 100644 --- a/frontend/src/containers/app/sidebars/topology/TopologySidebar.js +++ b/frontend/src/containers/app/sidebars/topology/TopologySidebar.js @@ -1,12 +1,12 @@ -import { connect } from "react-redux"; -import TopologySidebarComponent from "../../../../components/app/sidebars/topology/TopologySidebarComponent"; +import { connect } from 'react-redux' +import TopologySidebarComponent from '../../../../components/app/sidebars/topology/TopologySidebarComponent' const mapStateToProps = state => { - return { - interactionLevel: state.interactionLevel - }; -}; + return { + interactionLevel: state.interactionLevel, + } +} -const TopologySidebar = connect(mapStateToProps)(TopologySidebarComponent); +const TopologySidebar = connect(mapStateToProps)(TopologySidebarComponent) -export default TopologySidebar; +export default TopologySidebar diff --git a/frontend/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js b/frontend/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js index da24b8f0..711b2b82 100644 --- a/frontend/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js +++ b/frontend/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js @@ -1,14 +1,15 @@ -import { connect } from "react-redux"; -import BuildingSidebarComponent from "../../../../../components/app/sidebars/topology/building/BuildingSidebarComponent"; +import { connect } from 'react-redux' +import BuildingSidebarComponent + from '../../../../../components/app/sidebars/topology/building/BuildingSidebarComponent' const mapStateToProps = state => { - return { - inSimulation: state.currentExperimentId !== -1 - }; -}; + return { + inSimulation: state.currentExperimentId !== -1, + } +} const BuildingSidebarContainer = connect(mapStateToProps)( - BuildingSidebarComponent -); + BuildingSidebarComponent, +) -export default BuildingSidebarContainer; +export default BuildingSidebarContainer diff --git a/frontend/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js b/frontend/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js index bb64cbb4..e1dfdc50 100644 --- a/frontend/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js +++ b/frontend/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js @@ -1,27 +1,28 @@ -import { connect } from "react-redux"; +import { connect } from 'react-redux' import { - cancelNewRoomConstruction, - finishNewRoomConstruction, - startNewRoomConstruction -} from "../../../../../actions/topology/building"; -import StartNewRoomConstructionComponent from "../../../../../components/app/sidebars/topology/building/NewRoomConstructionComponent"; + cancelNewRoomConstruction, + finishNewRoomConstruction, + startNewRoomConstruction, +} from '../../../../../actions/topology/building' +import StartNewRoomConstructionComponent + from '../../../../../components/app/sidebars/topology/building/NewRoomConstructionComponent' const mapStateToProps = state => { - return { - currentRoomInConstruction: state.construction.currentRoomInConstruction - }; -}; + return { + currentRoomInConstruction: state.construction.currentRoomInConstruction, + } +} const mapDispatchToProps = dispatch => { - return { - onStart: () => dispatch(startNewRoomConstruction()), - onFinish: () => dispatch(finishNewRoomConstruction()), - onCancel: () => dispatch(cancelNewRoomConstruction()) - }; -}; + return { + onStart: () => dispatch(startNewRoomConstruction()), + onFinish: () => dispatch(finishNewRoomConstruction()), + onCancel: () => dispatch(cancelNewRoomConstruction()), + } +} const NewRoomConstructionButton = connect(mapStateToProps, mapDispatchToProps)( - StartNewRoomConstructionComponent -); + StartNewRoomConstructionComponent, +) -export default NewRoomConstructionButton; +export default NewRoomConstructionButton diff --git a/frontend/src/containers/app/sidebars/topology/machine/BackToRackContainer.js b/frontend/src/containers/app/sidebars/topology/machine/BackToRackContainer.js index 885c533d..61cb79a8 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/BackToRackContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/BackToRackContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import { goDownOneInteractionLevel } from "../../../../../actions/interaction-level"; -import BackToRackComponent from "../../../../../components/app/sidebars/topology/machine/BackToRackComponent"; +import { connect } from 'react-redux' +import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' +import BackToRackComponent from '../../../../../components/app/sidebars/topology/machine/BackToRackComponent' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(goDownOneInteractionLevel()) - }; -}; + return { + onClick: () => dispatch(goDownOneInteractionLevel()), + } +} const BackToRackContainer = connect(undefined, mapDispatchToProps)( - BackToRackComponent -); + BackToRackComponent, +) -export default BackToRackContainer; +export default BackToRackContainer diff --git a/frontend/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js b/frontend/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js index f42c8ba7..2dfb0d46 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import { openDeleteMachineModal } from "../../../../../actions/modals/topology"; -import DeleteMachineComponent from "../../../../../components/app/sidebars/topology/machine/DeleteMachineComponent"; +import { connect } from 'react-redux' +import { openDeleteMachineModal } from '../../../../../actions/modals/topology' +import DeleteMachineComponent from '../../../../../components/app/sidebars/topology/machine/DeleteMachineComponent' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(openDeleteMachineModal()) - }; -}; + return { + onClick: () => dispatch(openDeleteMachineModal()), + } +} const DeleteMachineContainer = connect(undefined, mapDispatchToProps)( - DeleteMachineComponent -); + DeleteMachineComponent, +) -export default DeleteMachineContainer; +export default DeleteMachineContainer diff --git a/frontend/src/containers/app/sidebars/topology/machine/MachineNameContainer.js b/frontend/src/containers/app/sidebars/topology/machine/MachineNameContainer.js index 05d2bf80..5c29f85f 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/MachineNameContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/MachineNameContainer.js @@ -1,12 +1,12 @@ -import { connect } from "react-redux"; -import MachineNameComponent from "../../../../../components/app/sidebars/topology/machine/MachineNameComponent"; +import { connect } from 'react-redux' +import MachineNameComponent from '../../../../../components/app/sidebars/topology/machine/MachineNameComponent' const mapStateToProps = state => { - return { - position: state.interactionLevel.position - }; -}; + return { + position: state.interactionLevel.position, + } +} -const MachineNameContainer = connect(mapStateToProps)(MachineNameComponent); +const MachineNameContainer = connect(mapStateToProps)(MachineNameComponent) -export default MachineNameContainer; +export default MachineNameContainer diff --git a/frontend/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js b/frontend/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js index 7729385e..f5baee44 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js @@ -1,18 +1,18 @@ -import { connect } from "react-redux"; -import MachineSidebarComponent from "../../../../../components/app/sidebars/topology/machine/MachineSidebarComponent"; +import { connect } from 'react-redux' +import MachineSidebarComponent from '../../../../../components/app/sidebars/topology/machine/MachineSidebarComponent' const mapStateToProps = state => { - return { - inSimulation: state.currentExperimentId !== -1, - machineId: - state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].objectId - ].machineIds[state.interactionLevel.position - 1] - }; -}; + return { + inSimulation: state.currentExperimentId !== -1, + machineId: + state.objects.rack[ + state.objects.tile[state.interactionLevel.tileId].objectId + ].machineIds[state.interactionLevel.position - 1], + } +} const MachineSidebarContainer = connect(mapStateToProps)( - MachineSidebarComponent -); + MachineSidebarComponent, +) -export default MachineSidebarContainer; +export default MachineSidebarContainer diff --git a/frontend/src/containers/app/sidebars/topology/machine/UnitAddContainer.js b/frontend/src/containers/app/sidebars/topology/machine/UnitAddContainer.js index 0e5a6073..7ff06f4f 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/UnitAddContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/UnitAddContainer.js @@ -1,21 +1,21 @@ -import { connect } from "react-redux"; -import { addUnit } from "../../../../../actions/topology/machine"; -import UnitAddComponent from "../../../../../components/app/sidebars/topology/machine/UnitAddComponent"; +import { connect } from 'react-redux' +import { addUnit } from '../../../../../actions/topology/machine' +import UnitAddComponent from '../../../../../components/app/sidebars/topology/machine/UnitAddComponent' const mapStateToProps = (state, ownProps) => { - return { - units: Object.values(state.objects[ownProps.unitType]) - }; -}; + return { + units: Object.values(state.objects[ownProps.unitType]), + } +} const mapDispatchToProps = (dispatch, ownProps) => { - return { - onAdd: id => dispatch(addUnit(ownProps.unitType, id)) - }; -}; + return { + onAdd: id => dispatch(addUnit(ownProps.unitType, id)), + } +} const UnitAddContainer = connect(mapStateToProps, mapDispatchToProps)( - UnitAddComponent -); + UnitAddComponent, +) -export default UnitAddContainer; +export default UnitAddContainer diff --git a/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js b/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js index a919e8d3..1a01cad0 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js @@ -1,22 +1,22 @@ -import { connect } from "react-redux"; -import { deleteUnit } from "../../../../../actions/topology/machine"; -import UnitComponent from "../../../../../components/app/sidebars/topology/machine/UnitComponent"; +import { connect } from 'react-redux' +import { deleteUnit } from '../../../../../actions/topology/machine' +import UnitComponent from '../../../../../components/app/sidebars/topology/machine/UnitComponent' const mapStateToProps = (state, ownProps) => { - return { - unit: state.objects[ownProps.unitType][ownProps.unitId], - inSimulation: state.currentExperimentId !== -1 - }; -}; + return { + unit: state.objects[ownProps.unitType][ownProps.unitId], + inSimulation: state.currentExperimentId !== -1, + } +} const mapDispatchToProps = (dispatch, ownProps) => { - return { - onDelete: () => dispatch(deleteUnit(ownProps.unitType, ownProps.index)) - }; -}; + return { + onDelete: () => dispatch(deleteUnit(ownProps.unitType, ownProps.index)), + } +} const UnitContainer = connect(mapStateToProps, mapDispatchToProps)( - UnitComponent -); + UnitComponent, +) -export default UnitContainer; +export default UnitContainer diff --git a/frontend/src/containers/app/sidebars/topology/machine/UnitListContainer.js b/frontend/src/containers/app/sidebars/topology/machine/UnitListContainer.js index 6554b8f8..fce657d4 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/UnitListContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/UnitListContainer.js @@ -1,18 +1,18 @@ -import { connect } from "react-redux"; -import UnitListComponent from "../../../../../components/app/sidebars/topology/machine/UnitListComponent"; +import { connect } from 'react-redux' +import UnitListComponent from '../../../../../components/app/sidebars/topology/machine/UnitListComponent' const mapStateToProps = (state, ownProps) => { - return { - unitIds: - state.objects.machine[ - state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].objectId - ].machineIds[state.interactionLevel.position - 1] - ][ownProps.unitType + "Ids"], - inSimulation: state.currentExperimentId !== -1 - }; -}; + return { + unitIds: + state.objects.machine[ + state.objects.rack[ + state.objects.tile[state.interactionLevel.tileId].objectId + ].machineIds[state.interactionLevel.position - 1] + ][ownProps.unitType + 'Ids'], + inSimulation: state.currentExperimentId !== -1, + } +} -const UnitListContainer = connect(mapStateToProps)(UnitListComponent); +const UnitListContainer = connect(mapStateToProps)(UnitListComponent) -export default UnitListContainer; +export default UnitListContainer diff --git a/frontend/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js b/frontend/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js index 85d83877..3490cce6 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js @@ -1,12 +1,12 @@ -import { connect } from "react-redux"; -import UnitTabsComponent from "../../../../../components/app/sidebars/topology/machine/UnitTabsComponent"; +import { connect } from 'react-redux' +import UnitTabsComponent from '../../../../../components/app/sidebars/topology/machine/UnitTabsComponent' const mapStateToProps = state => { - return { - inSimulation: state.currentExperimentId !== -1 - }; -}; + return { + inSimulation: state.currentExperimentId !== -1, + } +} -const UnitTabsContainer = connect(mapStateToProps)(UnitTabsComponent); +const UnitTabsContainer = connect(mapStateToProps)(UnitTabsComponent) -export default UnitTabsContainer; +export default UnitTabsContainer diff --git a/frontend/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/frontend/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js index 1b1bb2b0..35b76d70 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import { goDownOneInteractionLevel } from "../../../../../actions/interaction-level"; -import BackToRoomComponent from "../../../../../components/app/sidebars/topology/rack/BackToRoomComponent"; +import { connect } from 'react-redux' +import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' +import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(goDownOneInteractionLevel()) - }; -}; + return { + onClick: () => dispatch(goDownOneInteractionLevel()), + } +} const BackToRoomContainer = connect(undefined, mapDispatchToProps)( - BackToRoomComponent -); + BackToRoomComponent, +) -export default BackToRoomContainer; +export default BackToRoomContainer diff --git a/frontend/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/frontend/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js index a54ceb23..b45a419b 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import { openDeleteRackModal } from "../../../../../actions/modals/topology"; -import DeleteRackComponent from "../../../../../components/app/sidebars/topology/rack/DeleteRackComponent"; +import { connect } from 'react-redux' +import { openDeleteRackModal } from '../../../../../actions/modals/topology' +import DeleteRackComponent from '../../../../../components/app/sidebars/topology/rack/DeleteRackComponent' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(openDeleteRackModal()) - }; -}; + return { + onClick: () => dispatch(openDeleteRackModal()), + } +} const DeleteRackContainer = connect(undefined, mapDispatchToProps)( - DeleteRackComponent -); + DeleteRackComponent, +) -export default DeleteRackContainer; +export default DeleteRackContainer diff --git a/frontend/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/frontend/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js index 527805a2..07439dc9 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js @@ -1,21 +1,21 @@ -import { connect } from "react-redux"; -import { addMachine } from "../../../../../actions/topology/rack"; -import EmptySlotComponent from "../../../../../components/app/sidebars/topology/rack/EmptySlotComponent"; +import { connect } from 'react-redux' +import { addMachine } from '../../../../../actions/topology/rack' +import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent' const mapStateToProps = state => { - return { - inSimulation: state.currentExperimentId !== -1 - }; -}; + return { + inSimulation: state.currentExperimentId !== -1, + } +} const mapDispatchToProps = (dispatch, ownProps) => { - return { - onAdd: () => dispatch(addMachine(ownProps.position)) - }; -}; + return { + onAdd: () => dispatch(addMachine(ownProps.position)), + } +} const EmptySlotContainer = connect(mapStateToProps, mapDispatchToProps)( - EmptySlotComponent -); + EmptySlotComponent, +) -export default EmptySlotContainer; +export default EmptySlotContainer diff --git a/frontend/src/containers/app/sidebars/topology/rack/MachineContainer.js b/frontend/src/containers/app/sidebars/topology/rack/MachineContainer.js index 8cd177e7..f205257e 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/MachineContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/MachineContainer.js @@ -1,40 +1,40 @@ -import { connect } from "react-redux"; -import { goFromRackToMachine } from "../../../../../actions/interaction-level"; -import MachineComponent from "../../../../../components/app/sidebars/topology/rack/MachineComponent"; -import { getStateLoad } from "../../../../../util/simulation-load"; +import { connect } from 'react-redux' +import { goFromRackToMachine } from '../../../../../actions/interaction-level' +import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent' +import { getStateLoad } from '../../../../../util/simulation-load' const mapStateToProps = (state, ownProps) => { - const machine = state.objects.machine[ownProps.machineId]; - const inSimulation = state.currentExperimentId !== -1; + const machine = state.objects.machine[ownProps.machineId] + const inSimulation = state.currentExperimentId !== -1 - let machineLoad = undefined; - if (inSimulation) { - if ( - state.states.machine[state.currentTick] && - state.states.machine[state.currentTick][machine.id] - ) { - machineLoad = getStateLoad( - state.loadMetric, - state.states.machine[state.currentTick][machine.id] - ); + let machineLoad = undefined + if (inSimulation) { + if ( + state.states.machine[state.currentTick] && + state.states.machine[state.currentTick][machine.id] + ) { + machineLoad = getStateLoad( + state.loadMetric, + state.states.machine[state.currentTick][machine.id], + ) + } } - } - return { - machine, - inSimulation, - machineLoad - }; -}; + return { + machine, + inSimulation, + machineLoad, + } +} const mapDispatchToProps = (dispatch, ownProps) => { - return { - onClick: () => dispatch(goFromRackToMachine(ownProps.position)) - }; -}; + return { + onClick: () => dispatch(goFromRackToMachine(ownProps.position)), + } +} const MachineContainer = connect(mapStateToProps, mapDispatchToProps)( - MachineComponent -); + MachineComponent, +) -export default MachineContainer; +export default MachineContainer diff --git a/frontend/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/frontend/src/containers/app/sidebars/topology/rack/MachineListContainer.js index b19a50ae..3a797ed5 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/MachineListContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/MachineListContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import MachineListComponent from "../../../../../components/app/sidebars/topology/rack/MachineListComponent"; +import { connect } from 'react-redux' +import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent' const mapStateToProps = state => { - return { - machineIds: - state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].objectId - ].machineIds - }; -}; + return { + machineIds: + state.objects.rack[ + state.objects.tile[state.interactionLevel.tileId].objectId + ].machineIds, + } +} -const MachineListContainer = connect(mapStateToProps)(MachineListComponent); +const MachineListContainer = connect(mapStateToProps)(MachineListComponent) -export default MachineListContainer; +export default MachineListContainer diff --git a/frontend/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/frontend/src/containers/app/sidebars/topology/rack/RackNameContainer.js index 8f364ca0..11173b82 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/RackNameContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/RackNameContainer.js @@ -1,24 +1,24 @@ -import { connect } from "react-redux"; -import { openEditRackNameModal } from "../../../../../actions/modals/topology"; -import RackNameComponent from "../../../../../components/app/sidebars/topology/rack/RackNameComponent"; +import { connect } from 'react-redux' +import { openEditRackNameModal } from '../../../../../actions/modals/topology' +import RackNameComponent from '../../../../../components/app/sidebars/topology/rack/RackNameComponent' const mapStateToProps = state => { - return { - rackName: - state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].objectId - ].name - }; -}; + return { + rackName: + state.objects.rack[ + state.objects.tile[state.interactionLevel.tileId].objectId + ].name, + } +} const mapDispatchToProps = dispatch => { - return { - onEdit: () => dispatch(openEditRackNameModal()) - }; -}; + return { + onEdit: () => dispatch(openEditRackNameModal()), + } +} const RackNameContainer = connect(mapStateToProps, mapDispatchToProps)( - RackNameComponent -); + RackNameComponent, +) -export default RackNameContainer; +export default RackNameContainer diff --git a/frontend/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/frontend/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js index 0a2bfdcc..89382ef0 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js @@ -1,13 +1,13 @@ -import { connect } from "react-redux"; -import RackSidebarComponent from "../../../../../components/app/sidebars/topology/rack/RackSidebarComponent"; +import { connect } from 'react-redux' +import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent' const mapStateToProps = state => { - return { - rackId: state.objects.tile[state.interactionLevel.tileId].objectId, - inSimulation: state.currentExperimentId !== -1 - }; -}; + return { + rackId: state.objects.tile[state.interactionLevel.tileId].objectId, + inSimulation: state.currentExperimentId !== -1, + } +} -const RackSidebarContainer = connect(mapStateToProps)(RackSidebarComponent); +const RackSidebarContainer = connect(mapStateToProps)(RackSidebarComponent) -export default RackSidebarContainer; +export default RackSidebarContainer diff --git a/frontend/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js b/frontend/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js index 02288b7b..bf4ecbb5 100644 --- a/frontend/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import { goDownOneInteractionLevel } from "../../../../../actions/interaction-level"; -import BackToBuildingComponent from "../../../../../components/app/sidebars/topology/room/BackToBuildingComponent"; +import { connect } from 'react-redux' +import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' +import BackToBuildingComponent from '../../../../../components/app/sidebars/topology/room/BackToBuildingComponent' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(goDownOneInteractionLevel()) - }; -}; + return { + onClick: () => dispatch(goDownOneInteractionLevel()), + } +} const BackToBuildingContainer = connect(undefined, mapDispatchToProps)( - BackToBuildingComponent -); + BackToBuildingComponent, +) -export default BackToBuildingContainer; +export default BackToBuildingContainer diff --git a/frontend/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/frontend/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js index 5223061d..0f699888 100644 --- a/frontend/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import { openDeleteRoomModal } from "../../../../../actions/modals/topology"; -import DeleteRoomComponent from "../../../../../components/app/sidebars/topology/room/DeleteRoomComponent"; +import { connect } from 'react-redux' +import { openDeleteRoomModal } from '../../../../../actions/modals/topology' +import DeleteRoomComponent from '../../../../../components/app/sidebars/topology/room/DeleteRoomComponent' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(openDeleteRoomModal()) - }; -}; + return { + onClick: () => dispatch(openDeleteRoomModal()), + } +} const DeleteRoomContainer = connect(undefined, mapDispatchToProps)( - DeleteRoomComponent -); + DeleteRoomComponent, +) -export default DeleteRoomContainer; +export default DeleteRoomContainer diff --git a/frontend/src/containers/app/sidebars/topology/room/EditRoomContainer.js b/frontend/src/containers/app/sidebars/topology/room/EditRoomContainer.js index 81052f54..29014022 100644 --- a/frontend/src/containers/app/sidebars/topology/room/EditRoomContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/EditRoomContainer.js @@ -1,26 +1,26 @@ -import { connect } from "react-redux"; +import { connect } from 'react-redux' import { - finishRoomEdit, - startRoomEdit -} from "../../../../../actions/topology/building"; -import EditRoomComponent from "../../../../../components/app/sidebars/topology/room/EditRoomComponent"; + finishRoomEdit, + startRoomEdit, +} from '../../../../../actions/topology/building' +import EditRoomComponent from '../../../../../components/app/sidebars/topology/room/EditRoomComponent' const mapStateToProps = state => { - return { - isEditing: state.construction.currentRoomInConstruction !== -1, - isInRackConstructionMode: state.construction.inRackConstructionMode - }; -}; + return { + isEditing: state.construction.currentRoomInConstruction !== -1, + isInRackConstructionMode: state.construction.inRackConstructionMode, + } +} const mapDispatchToProps = dispatch => { - return { - onEdit: () => dispatch(startRoomEdit()), - onFinish: () => dispatch(finishRoomEdit()) - }; -}; + return { + onEdit: () => dispatch(startRoomEdit()), + onFinish: () => dispatch(finishRoomEdit()), + } +} const EditRoomContainer = connect(mapStateToProps, mapDispatchToProps)( - EditRoomComponent -); + EditRoomComponent, +) -export default EditRoomContainer; +export default EditRoomContainer diff --git a/frontend/src/containers/app/sidebars/topology/room/RackConstructionContainer.js b/frontend/src/containers/app/sidebars/topology/room/RackConstructionContainer.js index c784d3ae..fe42647c 100644 --- a/frontend/src/containers/app/sidebars/topology/room/RackConstructionContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/RackConstructionContainer.js @@ -1,26 +1,26 @@ -import { connect } from "react-redux"; +import { connect } from 'react-redux' import { - startRackConstruction, - stopRackConstruction -} from "../../../../../actions/topology/room"; -import RackConstructionComponent from "../../../../../components/app/sidebars/topology/room/RackConstructionComponent"; + startRackConstruction, + stopRackConstruction, +} from '../../../../../actions/topology/room' +import RackConstructionComponent from '../../../../../components/app/sidebars/topology/room/RackConstructionComponent' const mapStateToProps = state => { - return { - inRackConstructionMode: state.construction.inRackConstructionMode, - isEditingRoom: state.construction.currentRoomInConstruction !== -1 - }; -}; + return { + inRackConstructionMode: state.construction.inRackConstructionMode, + isEditingRoom: state.construction.currentRoomInConstruction !== -1, + } +} const mapDispatchToProps = dispatch => { - return { - onStart: () => dispatch(startRackConstruction()), - onStop: () => dispatch(stopRackConstruction()) - }; -}; + return { + onStart: () => dispatch(startRackConstruction()), + onStop: () => dispatch(stopRackConstruction()), + } +} const RackConstructionContainer = connect(mapStateToProps, mapDispatchToProps)( - RackConstructionComponent -); + RackConstructionComponent, +) -export default RackConstructionContainer; +export default RackConstructionContainer diff --git a/frontend/src/containers/app/sidebars/topology/room/RoomNameContainer.js b/frontend/src/containers/app/sidebars/topology/room/RoomNameContainer.js index 36125521..dae7dcc0 100644 --- a/frontend/src/containers/app/sidebars/topology/room/RoomNameContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/RoomNameContainer.js @@ -1,21 +1,21 @@ -import { connect } from "react-redux"; -import { openEditRoomNameModal } from "../../../../../actions/modals/topology"; -import RoomNameComponent from "../../../../../components/app/sidebars/topology/room/RoomNameComponent"; +import { connect } from 'react-redux' +import { openEditRoomNameModal } from '../../../../../actions/modals/topology' +import RoomNameComponent from '../../../../../components/app/sidebars/topology/room/RoomNameComponent' const mapStateToProps = state => { - return { - roomName: state.objects.room[state.interactionLevel.roomId].name - }; -}; + return { + roomName: state.objects.room[state.interactionLevel.roomId].name, + } +} const mapDispatchToProps = dispatch => { - return { - onEdit: () => dispatch(openEditRoomNameModal()) - }; -}; + return { + onEdit: () => dispatch(openEditRoomNameModal()), + } +} const RoomNameContainer = connect(mapStateToProps, mapDispatchToProps)( - RoomNameComponent -); + RoomNameComponent, +) -export default RoomNameContainer; +export default RoomNameContainer diff --git a/frontend/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js b/frontend/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js index 38d5fb80..f940b282 100644 --- a/frontend/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js @@ -1,14 +1,14 @@ -import { connect } from "react-redux"; -import RoomSidebarComponent from "../../../../../components/app/sidebars/topology/room/RoomSidebarComponent"; +import { connect } from 'react-redux' +import RoomSidebarComponent from '../../../../../components/app/sidebars/topology/room/RoomSidebarComponent' const mapStateToProps = state => { - return { - roomId: state.interactionLevel.roomId, - roomType: state.objects.room[state.interactionLevel.roomId].roomType, - inSimulation: state.currentExperimentId !== -1 - }; -}; + return { + roomId: state.interactionLevel.roomId, + roomType: state.objects.room[state.interactionLevel.roomId].roomType, + inSimulation: state.currentExperimentId !== -1, + } +} -const RoomSidebarContainer = connect(mapStateToProps)(RoomSidebarComponent); +const RoomSidebarContainer = connect(mapStateToProps)(RoomSidebarComponent) -export default RoomSidebarContainer; +export default RoomSidebarContainer diff --git a/frontend/src/containers/app/sidebars/topology/room/RoomTypeContainer.js b/frontend/src/containers/app/sidebars/topology/room/RoomTypeContainer.js index 414852f1..de4c8c85 100644 --- a/frontend/src/containers/app/sidebars/topology/room/RoomTypeContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/RoomTypeContainer.js @@ -1,12 +1,12 @@ -import { connect } from "react-redux"; -import RoomTypeComponent from "../../../../../components/app/sidebars/topology/room/RoomTypeComponent"; +import { connect } from 'react-redux' +import RoomTypeComponent from '../../../../../components/app/sidebars/topology/room/RoomTypeComponent' const mapStateToProps = state => { - return { - roomType: state.objects.room[state.interactionLevel.roomId].roomType - }; -}; + return { + roomType: state.objects.room[state.interactionLevel.roomId].roomType, + } +} -const RoomNameContainer = connect(mapStateToProps)(RoomTypeComponent); +const RoomNameContainer = connect(mapStateToProps)(RoomTypeComponent) -export default RoomNameContainer; +export default RoomNameContainer diff --git a/frontend/src/containers/app/timeline/PlayButtonContainer.js b/frontend/src/containers/app/timeline/PlayButtonContainer.js index 4e3c3d81..e332f08b 100644 --- a/frontend/src/containers/app/timeline/PlayButtonContainer.js +++ b/frontend/src/containers/app/timeline/PlayButtonContainer.js @@ -1,27 +1,27 @@ -import { connect } from "react-redux"; +import { connect } from 'react-redux' import { - pauseSimulation, - playSimulation -} from "../../../actions/simulation/playback"; -import PlayButtonComponent from "../../../components/app/timeline/PlayButtonComponent"; + pauseSimulation, + playSimulation, +} from '../../../actions/simulation/playback' +import PlayButtonComponent from '../../../components/app/timeline/PlayButtonComponent' const mapStateToProps = state => { - return { - isPlaying: state.isPlaying, - currentTick: state.currentTick, - lastSimulatedTick: state.lastSimulatedTick - }; -}; + return { + isPlaying: state.isPlaying, + currentTick: state.currentTick, + lastSimulatedTick: state.lastSimulatedTick, + } +} const mapDispatchToProps = dispatch => { - return { - onPlay: () => dispatch(playSimulation()), - onPause: () => dispatch(pauseSimulation()) - }; -}; + return { + onPlay: () => dispatch(playSimulation()), + onPause: () => dispatch(pauseSimulation()), + } +} const PlayButtonContainer = connect(mapStateToProps, mapDispatchToProps)( - PlayButtonComponent -); + PlayButtonComponent, +) -export default PlayButtonContainer; +export default PlayButtonContainer diff --git a/frontend/src/containers/app/timeline/TimelineContainer.js b/frontend/src/containers/app/timeline/TimelineContainer.js index 74d37d58..4fcaaaaf 100644 --- a/frontend/src/containers/app/timeline/TimelineContainer.js +++ b/frontend/src/containers/app/timeline/TimelineContainer.js @@ -1,41 +1,41 @@ -import { connect } from "react-redux"; -import { pauseSimulation } from "../../../actions/simulation/playback"; -import { incrementTick } from "../../../actions/simulation/tick"; -import { setCurrentDatacenter } from "../../../actions/topology/building"; -import TimelineComponent from "../../../components/app/timeline/TimelineComponent"; +import { connect } from 'react-redux' +import { pauseSimulation } from '../../../actions/simulation/playback' +import { incrementTick } from '../../../actions/simulation/tick' +import { setCurrentDatacenter } from '../../../actions/topology/building' +import TimelineComponent from '../../../components/app/timeline/TimelineComponent' const mapStateToProps = state => { - let sections = []; - if (state.currentExperimentId !== -1) { - const sectionIds = - state.objects.path[ - state.objects.experiment[state.currentExperimentId].pathId - ].sectionIds; + 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]); + if (sectionIds) { + sections = sectionIds.map(sectionId => state.objects.section[sectionId]) + } } - } - return { - isPlaying: state.isPlaying, - currentTick: state.currentTick, - lastSimulatedTick: state.lastSimulatedTick, - currentDatacenterId: state.currentDatacenterId, - sections - }; -}; + return { + isPlaying: state.isPlaying, + currentTick: state.currentTick, + lastSimulatedTick: state.lastSimulatedTick, + currentDatacenterId: state.currentDatacenterId, + sections, + } +} const mapDispatchToProps = dispatch => { - return { - incrementTick: () => dispatch(incrementTick()), - pauseSimulation: () => dispatch(pauseSimulation()), - setCurrentDatacenter: id => dispatch(setCurrentDatacenter(id)) - }; -}; + return { + incrementTick: () => dispatch(incrementTick()), + pauseSimulation: () => dispatch(pauseSimulation()), + setCurrentDatacenter: id => dispatch(setCurrentDatacenter(id)), + } +} const TimelineContainer = connect(mapStateToProps, mapDispatchToProps)( - TimelineComponent -); + TimelineComponent, +) -export default TimelineContainer; +export default TimelineContainer diff --git a/frontend/src/containers/app/timeline/TimelineControlsContainer.js b/frontend/src/containers/app/timeline/TimelineControlsContainer.js index ac851b2e..92e03e6a 100644 --- a/frontend/src/containers/app/timeline/TimelineControlsContainer.js +++ b/frontend/src/containers/app/timeline/TimelineControlsContainer.js @@ -1,36 +1,36 @@ -import { connect } from "react-redux"; -import { goToTick } from "../../../actions/simulation/tick"; -import TimelineControlsComponent from "../../../components/app/timeline/TimelineControlsComponent"; +import { connect } from 'react-redux' +import { goToTick } from '../../../actions/simulation/tick' +import TimelineControlsComponent from '../../../components/app/timeline/TimelineControlsComponent' const mapStateToProps = state => { - let sectionTicks = []; - if (state.currentExperimentId !== -1) { - const sectionIds = - state.objects.path[ - state.objects.experiment[state.currentExperimentId].pathId - ].sectionIds; - if (sectionIds) { - sectionTicks = sectionIds - .filter(sectionId => state.objects.section[sectionId].startTick !== 0) - .map(sectionId => state.objects.section[sectionId].startTick); + let sectionTicks = [] + if (state.currentExperimentId !== -1) { + const sectionIds = + state.objects.path[ + state.objects.experiment[state.currentExperimentId].pathId + ].sectionIds + if (sectionIds) { + sectionTicks = sectionIds + .filter(sectionId => state.objects.section[sectionId].startTick !== 0) + .map(sectionId => state.objects.section[sectionId].startTick) + } } - } - return { - currentTick: state.currentTick, - lastSimulatedTick: state.lastSimulatedTick, - sectionTicks - }; -}; + return { + currentTick: state.currentTick, + lastSimulatedTick: state.lastSimulatedTick, + sectionTicks, + } +} const mapDispatchToProps = dispatch => { - return { - goToTick: tick => dispatch(goToTick(tick)) - }; -}; + return { + goToTick: tick => dispatch(goToTick(tick)), + } +} const TimelineControlsContainer = connect(mapStateToProps, mapDispatchToProps)( - TimelineControlsComponent -); + TimelineControlsComponent, +) -export default TimelineControlsContainer; +export default TimelineControlsContainer diff --git a/frontend/src/containers/app/timeline/TimelineLabelsContainer.js b/frontend/src/containers/app/timeline/TimelineLabelsContainer.js index 9d7f268d..192d21c3 100644 --- a/frontend/src/containers/app/timeline/TimelineLabelsContainer.js +++ b/frontend/src/containers/app/timeline/TimelineLabelsContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import TimelineLabelsComponent from "../../../components/app/timeline/TimelineLabelsComponent"; +import { connect } from 'react-redux' +import TimelineLabelsComponent from '../../../components/app/timeline/TimelineLabelsComponent' const mapStateToProps = state => { - return { - currentTick: state.currentTick, - lastSimulatedTick: state.lastSimulatedTick - }; -}; + return { + currentTick: state.currentTick, + lastSimulatedTick: state.lastSimulatedTick, + } +} const TimelineLabelsContainer = connect(mapStateToProps)( - TimelineLabelsComponent -); + TimelineLabelsComponent, +) -export default TimelineLabelsContainer; +export default TimelineLabelsContainer diff --git a/frontend/src/containers/auth/Login.js b/frontend/src/containers/auth/Login.js index 15af8e62..951f6b10 100644 --- a/frontend/src/containers/auth/Login.js +++ b/frontend/src/containers/auth/Login.js @@ -1,65 +1,63 @@ -import PropTypes from "prop-types"; -import React from "react"; -import GoogleLogin from "react-google-login"; -import { connect } from "react-redux"; -import { logIn } from "../../actions/auth"; +import PropTypes from 'prop-types' +import React from 'react' +import GoogleLogin from 'react-google-login' +import { connect } from 'react-redux' +import { logIn } from '../../actions/auth' class LoginContainer extends React.Component { - static propTypes = { - visible: PropTypes.bool.isRequired, - onLogin: PropTypes.func.isRequired - }; - - onAuthResponse(response) { - this.props.onLogin({ - email: response.getBasicProfile().getEmail(), - givenName: response.getBasicProfile().getGivenName(), - familyName: response.getBasicProfile().getFamilyName(), - googleId: response.googleId, - authToken: response.getAuthResponse().id_token, - expiresAt: response.getAuthResponse().expires_at - }); - } + static propTypes = { + visible: PropTypes.bool.isRequired, + onLogin: PropTypes.func.isRequired, + } - onAuthFailure(error) { - console.error(error); - } + onAuthResponse(response) { + this.props.onLogin({ + email: response.getBasicProfile().getEmail(), + givenName: response.getBasicProfile().getGivenName(), + familyName: response.getBasicProfile().getFamilyName(), + googleId: response.googleId, + authToken: response.getAuthResponse().id_token, + expiresAt: response.getAuthResponse().expires_at, + }) + } - render() { - if (!this.props.visible) { - return <span />; + onAuthFailure(error) { + console.error(error) } - return ( - <GoogleLogin - clientId={process.env.REACT_APP_OAUTH_CLIENT_ID} - onSuccess={this.onAuthResponse.bind(this)} - onFailure={this.onAuthFailure.bind(this)} - render={renderProps => ( - <span onClick={renderProps.onClick} className="login btn btn-primary"> - <span className="fa fa-google" /> Login with Google + render() { + if (!this.props.visible) { + return <span/> + } + + return ( + <GoogleLogin + clientId={process.env.REACT_APP_OAUTH_CLIENT_ID} + onSuccess={this.onAuthResponse.bind(this)} + onFailure={this.onAuthFailure.bind(this)} + render={renderProps => ( + <span onClick={renderProps.onClick} className="login btn btn-primary"> + <span className="fa fa-google"/> Login with Google </span> - )} - /> - ); - } + )} + > + </GoogleLogin> + ) + } } const mapStateToProps = (state, ownProps) => { - return { - visible: ownProps.visible - }; -}; + return { + visible: ownProps.visible, + } +} const mapDispatchToProps = dispatch => { - return { - onLogin: payload => dispatch(logIn(payload)) - }; -}; + return { + onLogin: payload => dispatch(logIn(payload)), + } +} -const Login = connect( - mapStateToProps, - mapDispatchToProps -)(LoginContainer); +const Login = connect(mapStateToProps, mapDispatchToProps)(LoginContainer) -export default Login; +export default Login diff --git a/frontend/src/containers/auth/Logout.js b/frontend/src/containers/auth/Logout.js index 918932f6..6e885fb1 100644 --- a/frontend/src/containers/auth/Logout.js +++ b/frontend/src/containers/auth/Logout.js @@ -1,13 +1,13 @@ -import { connect } from "react-redux"; -import { logOut } from "../../actions/auth"; -import LogoutButton from "../../components/navigation/LogoutButton"; +import { connect } from 'react-redux' +import { logOut } from '../../actions/auth' +import LogoutButton from '../../components/navigation/LogoutButton' const mapDispatchToProps = dispatch => { - return { - onLogout: () => dispatch(logOut()) - }; -}; + return { + onLogout: () => dispatch(logOut()), + } +} -const Logout = connect(undefined, mapDispatchToProps)(LogoutButton); +const Logout = connect(undefined, mapDispatchToProps)(LogoutButton) -export default Logout; +export default Logout diff --git a/frontend/src/containers/auth/ProfileName.js b/frontend/src/containers/auth/ProfileName.js index 21941bd2..8511a9b1 100644 --- a/frontend/src/containers/auth/ProfileName.js +++ b/frontend/src/containers/auth/ProfileName.js @@ -1,14 +1,14 @@ -import React from "react"; -import { connect } from "react-redux"; +import React from 'react' +import { connect } from 'react-redux' const mapStateToProps = state => { - return { - text: state.auth.givenName + " " + state.auth.familyName - }; -}; + return { + text: state.auth.givenName + ' ' + state.auth.familyName, + } +} -const SpanElement = ({ text }) => <span>{text}</span>; +const SpanElement = ({ text }) => <span>{text}</span> -const ProfileName = connect(mapStateToProps)(SpanElement); +const ProfileName = connect(mapStateToProps)(SpanElement) -export default ProfileName; +export default ProfileName diff --git a/frontend/src/containers/experiments/ExperimentListContainer.js b/frontend/src/containers/experiments/ExperimentListContainer.js index 53bb1dad..44fc8620 100644 --- a/frontend/src/containers/experiments/ExperimentListContainer.js +++ b/frontend/src/containers/experiments/ExperimentListContainer.js @@ -1,28 +1,28 @@ -import { connect } from "react-redux"; -import ExperimentListComponent from "../../components/experiments/ExperimentListComponent"; +import { connect } from 'react-redux' +import ExperimentListComponent from '../../components/experiments/ExperimentListComponent' const mapStateToProps = state => { - if ( - state.currentSimulationId === -1 || - !("experimentIds" in state.objects.simulation[state.currentSimulationId]) - ) { - return { - loading: true, - experimentIds: [] - }; - } + if ( + state.currentSimulationId === -1 || + !('experimentIds' in state.objects.simulation[state.currentSimulationId]) + ) { + return { + loading: true, + experimentIds: [], + } + } - const experimentIds = - state.objects.simulation[state.currentSimulationId].experimentIds; - if (experimentIds) { - return { - experimentIds - }; - } -}; + const experimentIds = + state.objects.simulation[state.currentSimulationId].experimentIds + if (experimentIds) { + return { + experimentIds, + } + } +} const ExperimentListContainer = connect(mapStateToProps)( - ExperimentListComponent -); + ExperimentListComponent, +) -export default ExperimentListContainer; +export default ExperimentListContainer diff --git a/frontend/src/containers/experiments/ExperimentRowContainer.js b/frontend/src/containers/experiments/ExperimentRowContainer.js index 96ebc3db..bec32617 100644 --- a/frontend/src/containers/experiments/ExperimentRowContainer.js +++ b/frontend/src/containers/experiments/ExperimentRowContainer.js @@ -1,30 +1,30 @@ -import { connect } from "react-redux"; -import { deleteExperiment } from "../../actions/experiments"; -import ExperimentRowComponent from "../../components/experiments/ExperimentRowComponent"; +import { connect } from 'react-redux' +import { deleteExperiment } from '../../actions/experiments' +import ExperimentRowComponent from '../../components/experiments/ExperimentRowComponent' const mapStateToProps = (state, ownProps) => { - const experiment = Object.assign( - {}, - state.objects.experiment[ownProps.experimentId] - ); - experiment.trace = state.objects.trace[experiment.traceId]; - experiment.scheduler = state.objects.scheduler[experiment.schedulerName]; - experiment.path = state.objects.path[experiment.pathId]; + const experiment = Object.assign( + {}, + state.objects.experiment[ownProps.experimentId], + ) + experiment.trace = state.objects.trace[experiment.traceId] + experiment.scheduler = state.objects.scheduler[experiment.schedulerName] + experiment.path = state.objects.path[experiment.pathId] - return { - experiment, - simulationId: state.currentSimulationId - }; -}; + return { + experiment, + simulationId: state.currentSimulationId, + } +} const mapDispatchToProps = dispatch => { - return { - onDelete: id => dispatch(deleteExperiment(id)) - }; -}; + return { + onDelete: id => dispatch(deleteExperiment(id)), + } +} const ExperimentRowContainer = connect(mapStateToProps, mapDispatchToProps)( - ExperimentRowComponent -); + ExperimentRowComponent, +) -export default ExperimentRowContainer; +export default ExperimentRowContainer diff --git a/frontend/src/containers/experiments/NewExperimentButtonContainer.js b/frontend/src/containers/experiments/NewExperimentButtonContainer.js index 60eb92a6..41895d8a 100644 --- a/frontend/src/containers/experiments/NewExperimentButtonContainer.js +++ b/frontend/src/containers/experiments/NewExperimentButtonContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import { openNewExperimentModal } from "../../actions/modals/experiments"; -import NewExperimentButtonComponent from "../../components/experiments/NewExperimentButtonComponent"; +import { connect } from 'react-redux' +import { openNewExperimentModal } from '../../actions/modals/experiments' +import NewExperimentButtonComponent from '../../components/experiments/NewExperimentButtonComponent' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(openNewExperimentModal()) - }; -}; + return { + onClick: () => dispatch(openNewExperimentModal()), + } +} const NewExperimentButtonContainer = connect(undefined, mapDispatchToProps)( - NewExperimentButtonComponent -); + NewExperimentButtonComponent, +) -export default NewExperimentButtonContainer; +export default NewExperimentButtonContainer diff --git a/frontend/src/containers/modals/DeleteMachineModal.js b/frontend/src/containers/modals/DeleteMachineModal.js index eba37833..02dfe8bb 100644 --- a/frontend/src/containers/modals/DeleteMachineModal.js +++ b/frontend/src/containers/modals/DeleteMachineModal.js @@ -1,37 +1,37 @@ -import React from "react"; -import { connect } from "react-redux"; -import { closeDeleteMachineModal } from "../../actions/modals/topology"; -import { deleteMachine } from "../../actions/topology/machine"; -import ConfirmationModal from "../../components/modals/ConfirmationModal"; +import React from 'react' +import { connect } from 'react-redux' +import { closeDeleteMachineModal } from '../../actions/modals/topology' +import { deleteMachine } from '../../actions/topology/machine' +import ConfirmationModal from '../../components/modals/ConfirmationModal' const DeleteMachineModalComponent = ({ visible, callback }) => ( - <ConfirmationModal - title="Delete this machine" - message="Are you sure you want to delete this machine?" - show={visible} - callback={callback} - /> -); + <ConfirmationModal + title="Delete this machine" + message="Are you sure you want to delete this machine?" + show={visible} + callback={callback} + /> +) const mapStateToProps = state => { - return { - visible: state.modals.deleteMachineModalVisible - }; -}; + return { + visible: state.modals.deleteMachineModalVisible, + } +} const mapDispatchToProps = dispatch => { - return { - callback: isConfirmed => { - if (isConfirmed) { - dispatch(deleteMachine()); - } - dispatch(closeDeleteMachineModal()); + return { + callback: isConfirmed => { + if (isConfirmed) { + dispatch(deleteMachine()) + } + dispatch(closeDeleteMachineModal()) + }, } - }; -}; +} const DeleteMachineModal = connect(mapStateToProps, mapDispatchToProps)( - DeleteMachineModalComponent -); + DeleteMachineModalComponent, +) -export default DeleteMachineModal; +export default DeleteMachineModal diff --git a/frontend/src/containers/modals/DeleteProfileModal.js b/frontend/src/containers/modals/DeleteProfileModal.js index 674e9408..7518c4ba 100644 --- a/frontend/src/containers/modals/DeleteProfileModal.js +++ b/frontend/src/containers/modals/DeleteProfileModal.js @@ -1,37 +1,37 @@ -import React from "react"; -import { connect } from "react-redux"; -import { closeDeleteProfileModal } from "../../actions/modals/profile"; -import { deleteCurrentUser } from "../../actions/users"; -import ConfirmationModal from "../../components/modals/ConfirmationModal"; +import React from 'react' +import { connect } from 'react-redux' +import { closeDeleteProfileModal } from '../../actions/modals/profile' +import { deleteCurrentUser } from '../../actions/users' +import ConfirmationModal from '../../components/modals/ConfirmationModal' const DeleteProfileModalComponent = ({ visible, callback }) => ( - <ConfirmationModal - title="Delete my account" - message="Are you sure you want to delete your OpenDC account?" - show={visible} - callback={callback} - /> -); + <ConfirmationModal + title="Delete my account" + message="Are you sure you want to delete your OpenDC account?" + show={visible} + callback={callback} + /> +) const mapStateToProps = state => { - return { - visible: state.modals.deleteProfileModalVisible - }; -}; + return { + visible: state.modals.deleteProfileModalVisible, + } +} const mapDispatchToProps = dispatch => { - return { - callback: isConfirmed => { - if (isConfirmed) { - dispatch(deleteCurrentUser()); - } - dispatch(closeDeleteProfileModal()); + return { + callback: isConfirmed => { + if (isConfirmed) { + dispatch(deleteCurrentUser()) + } + dispatch(closeDeleteProfileModal()) + }, } - }; -}; +} const DeleteProfileModal = connect(mapStateToProps, mapDispatchToProps)( - DeleteProfileModalComponent -); + DeleteProfileModalComponent, +) -export default DeleteProfileModal; +export default DeleteProfileModal diff --git a/frontend/src/containers/modals/DeleteRackModal.js b/frontend/src/containers/modals/DeleteRackModal.js index 41bacb37..a271522d 100644 --- a/frontend/src/containers/modals/DeleteRackModal.js +++ b/frontend/src/containers/modals/DeleteRackModal.js @@ -1,37 +1,37 @@ -import React from "react"; -import { connect } from "react-redux"; -import { closeDeleteRackModal } from "../../actions/modals/topology"; -import { deleteRack } from "../../actions/topology/rack"; -import ConfirmationModal from "../../components/modals/ConfirmationModal"; +import React from 'react' +import { connect } from 'react-redux' +import { closeDeleteRackModal } from '../../actions/modals/topology' +import { deleteRack } from '../../actions/topology/rack' +import ConfirmationModal from '../../components/modals/ConfirmationModal' const DeleteRackModalComponent = ({ visible, callback }) => ( - <ConfirmationModal - title="Delete this rack" - message="Are you sure you want to delete this rack?" - show={visible} - callback={callback} - /> -); + <ConfirmationModal + title="Delete this rack" + message="Are you sure you want to delete this rack?" + show={visible} + callback={callback} + /> +) const mapStateToProps = state => { - return { - visible: state.modals.deleteRackModalVisible - }; -}; + return { + visible: state.modals.deleteRackModalVisible, + } +} const mapDispatchToProps = dispatch => { - return { - callback: isConfirmed => { - if (isConfirmed) { - dispatch(deleteRack()); - } - dispatch(closeDeleteRackModal()); + return { + callback: isConfirmed => { + if (isConfirmed) { + dispatch(deleteRack()) + } + dispatch(closeDeleteRackModal()) + }, } - }; -}; +} const DeleteRackModal = connect(mapStateToProps, mapDispatchToProps)( - DeleteRackModalComponent -); + DeleteRackModalComponent, +) -export default DeleteRackModal; +export default DeleteRackModal diff --git a/frontend/src/containers/modals/DeleteRoomModal.js b/frontend/src/containers/modals/DeleteRoomModal.js index 339ff22c..71f2f040 100644 --- a/frontend/src/containers/modals/DeleteRoomModal.js +++ b/frontend/src/containers/modals/DeleteRoomModal.js @@ -1,37 +1,37 @@ -import React from "react"; -import { connect } from "react-redux"; -import { closeDeleteRoomModal } from "../../actions/modals/topology"; -import { deleteRoom } from "../../actions/topology/room"; -import ConfirmationModal from "../../components/modals/ConfirmationModal"; +import React from 'react' +import { connect } from 'react-redux' +import { closeDeleteRoomModal } from '../../actions/modals/topology' +import { deleteRoom } from '../../actions/topology/room' +import ConfirmationModal from '../../components/modals/ConfirmationModal' const DeleteRoomModalComponent = ({ visible, callback }) => ( - <ConfirmationModal - title="Delete this room" - message="Are you sure you want to delete this room?" - show={visible} - callback={callback} - /> -); + <ConfirmationModal + title="Delete this room" + message="Are you sure you want to delete this room?" + show={visible} + callback={callback} + /> +) const mapStateToProps = state => { - return { - visible: state.modals.deleteRoomModalVisible - }; -}; + return { + visible: state.modals.deleteRoomModalVisible, + } +} const mapDispatchToProps = dispatch => { - return { - callback: isConfirmed => { - if (isConfirmed) { - dispatch(deleteRoom()); - } - dispatch(closeDeleteRoomModal()); + return { + callback: isConfirmed => { + if (isConfirmed) { + dispatch(deleteRoom()) + } + dispatch(closeDeleteRoomModal()) + }, } - }; -}; +} const DeleteRoomModal = connect(mapStateToProps, mapDispatchToProps)( - DeleteRoomModalComponent -); + DeleteRoomModalComponent, +) -export default DeleteRoomModal; +export default DeleteRoomModal diff --git a/frontend/src/containers/modals/EditRackNameModal.js b/frontend/src/containers/modals/EditRackNameModal.js index 748e847b..e5c87e35 100644 --- a/frontend/src/containers/modals/EditRackNameModal.js +++ b/frontend/src/containers/modals/EditRackNameModal.js @@ -1,44 +1,44 @@ -import React from "react"; -import { connect } from "react-redux"; -import { closeEditRackNameModal } from "../../actions/modals/topology"; -import { editRackName } from "../../actions/topology/rack"; -import TextInputModal from "../../components/modals/TextInputModal"; +import React from 'react' +import { connect } from 'react-redux' +import { closeEditRackNameModal } from '../../actions/modals/topology' +import { editRackName } from '../../actions/topology/rack' +import TextInputModal from '../../components/modals/TextInputModal' const EditRackNameModalComponent = ({ visible, previousName, callback }) => ( - <TextInputModal - title="Edit rack name" - label="Rack name" - show={visible} - initialValue={previousName} - callback={callback} - /> -); + <TextInputModal + title="Edit rack name" + label="Rack name" + show={visible} + initialValue={previousName} + callback={callback} + /> +) const mapStateToProps = state => { - return { - visible: state.modals.editRackNameModalVisible, - previousName: - state.interactionLevel.mode === "RACK" - ? state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].objectId - ].name - : "" - }; -}; + return { + visible: state.modals.editRackNameModalVisible, + previousName: + state.interactionLevel.mode === 'RACK' + ? state.objects.rack[ + state.objects.tile[state.interactionLevel.tileId].objectId + ].name + : '', + } +} const mapDispatchToProps = dispatch => { - return { - callback: name => { - if (name) { - dispatch(editRackName(name)); - } - dispatch(closeEditRackNameModal()); + return { + callback: name => { + if (name) { + dispatch(editRackName(name)) + } + dispatch(closeEditRackNameModal()) + }, } - }; -}; +} const EditRackNameModal = connect(mapStateToProps, mapDispatchToProps)( - EditRackNameModalComponent -); + EditRackNameModalComponent, +) -export default EditRackNameModal; +export default EditRackNameModal diff --git a/frontend/src/containers/modals/EditRoomNameModal.js b/frontend/src/containers/modals/EditRoomNameModal.js index be6c547c..973216ac 100644 --- a/frontend/src/containers/modals/EditRoomNameModal.js +++ b/frontend/src/containers/modals/EditRoomNameModal.js @@ -1,42 +1,42 @@ -import React from "react"; -import { connect } from "react-redux"; -import { closeEditRoomNameModal } from "../../actions/modals/topology"; -import { editRoomName } from "../../actions/topology/room"; -import TextInputModal from "../../components/modals/TextInputModal"; +import React from 'react' +import { connect } from 'react-redux' +import { closeEditRoomNameModal } from '../../actions/modals/topology' +import { editRoomName } from '../../actions/topology/room' +import TextInputModal from '../../components/modals/TextInputModal' const EditRoomNameModalComponent = ({ visible, previousName, callback }) => ( - <TextInputModal - title="Edit room name" - label="Room name" - show={visible} - initialValue={previousName} - callback={callback} - /> -); + <TextInputModal + title="Edit room name" + label="Room name" + show={visible} + initialValue={previousName} + callback={callback} + /> +) const mapStateToProps = state => { - return { - visible: state.modals.editRoomNameModalVisible, - previousName: - state.interactionLevel.mode === "ROOM" - ? state.objects.room[state.interactionLevel.roomId].name - : "" - }; -}; + return { + visible: state.modals.editRoomNameModalVisible, + previousName: + state.interactionLevel.mode === 'ROOM' + ? state.objects.room[state.interactionLevel.roomId].name + : '', + } +} const mapDispatchToProps = dispatch => { - return { - callback: name => { - if (name) { - dispatch(editRoomName(name)); - } - dispatch(closeEditRoomNameModal()); + return { + callback: name => { + if (name) { + dispatch(editRoomName(name)) + } + dispatch(closeEditRoomNameModal()) + }, } - }; -}; +} const EditRoomNameModal = connect(mapStateToProps, mapDispatchToProps)( - EditRoomNameModalComponent -); + EditRoomNameModalComponent, +) -export default EditRoomNameModal; +export default EditRoomNameModal diff --git a/frontend/src/containers/modals/NewExperimentModal.js b/frontend/src/containers/modals/NewExperimentModal.js index c703c39a..db60f088 100644 --- a/frontend/src/containers/modals/NewExperimentModal.js +++ b/frontend/src/containers/modals/NewExperimentModal.js @@ -1,39 +1,39 @@ -import { connect } from "react-redux"; -import { addExperiment } from "../../actions/experiments"; -import { closeNewExperimentModal } from "../../actions/modals/experiments"; -import NewExperimentModalComponent from "../../components/modals/custom-components/NewExperimentModalComponent"; +import { connect } from 'react-redux' +import { addExperiment } from '../../actions/experiments' +import { closeNewExperimentModal } from '../../actions/modals/experiments' +import NewExperimentModalComponent from '../../components/modals/custom-components/NewExperimentModalComponent' const mapStateToProps = state => { - return { - show: state.modals.newExperimentModalVisible, - paths: Object.values(state.objects.path).filter( - path => path.simulationId === state.currentSimulationId - ), - traces: Object.values(state.objects.trace), - schedulers: Object.values(state.objects.scheduler) - }; -}; + return { + show: state.modals.newExperimentModalVisible, + paths: Object.values(state.objects.path).filter( + path => path.simulationId === state.currentSimulationId, + ), + traces: Object.values(state.objects.trace), + schedulers: Object.values(state.objects.scheduler), + } +} const mapDispatchToProps = dispatch => { - return { - callback: (name, pathId, traceId, schedulerName) => { - if (name) { - dispatch( - addExperiment({ - name, - pathId, - traceId, - schedulerName - }) - ); - } - dispatch(closeNewExperimentModal()); + return { + callback: (name, pathId, traceId, schedulerName) => { + if (name) { + dispatch( + addExperiment({ + name, + pathId, + traceId, + schedulerName, + }), + ) + } + dispatch(closeNewExperimentModal()) + }, } - }; -}; +} const NewExperimentModal = connect(mapStateToProps, mapDispatchToProps)( - NewExperimentModalComponent -); + NewExperimentModalComponent, +) -export default NewExperimentModal; +export default NewExperimentModal diff --git a/frontend/src/containers/modals/NewSimulationModal.js b/frontend/src/containers/modals/NewSimulationModal.js index 80789cd2..e95ac4b0 100644 --- a/frontend/src/containers/modals/NewSimulationModal.js +++ b/frontend/src/containers/modals/NewSimulationModal.js @@ -1,37 +1,37 @@ -import React from "react"; -import { connect } from "react-redux"; -import { closeNewSimulationModal } from "../../actions/modals/simulations"; -import { addSimulation } from "../../actions/simulations"; -import TextInputModal from "../../components/modals/TextInputModal"; +import React from 'react' +import { connect } from 'react-redux' +import { closeNewSimulationModal } from '../../actions/modals/simulations' +import { addSimulation } from '../../actions/simulations' +import TextInputModal from '../../components/modals/TextInputModal' const NewSimulationModalComponent = ({ visible, callback }) => ( - <TextInputModal - title="New Simulation" - label="Simulation title" - show={visible} - callback={callback} - /> -); + <TextInputModal + title="New Simulation" + label="Simulation title" + show={visible} + callback={callback} + /> +) const mapStateToProps = state => { - return { - visible: state.modals.newSimulationModalVisible - }; -}; + return { + visible: state.modals.newSimulationModalVisible, + } +} const mapDispatchToProps = dispatch => { - return { - callback: text => { - if (text) { - dispatch(addSimulation(text)); - } - dispatch(closeNewSimulationModal()); + return { + callback: text => { + if (text) { + dispatch(addSimulation(text)) + } + dispatch(closeNewSimulationModal()) + }, } - }; -}; +} const NewSimulationModal = connect(mapStateToProps, mapDispatchToProps)( - NewSimulationModalComponent -); + NewSimulationModalComponent, +) -export default NewSimulationModal; +export default NewSimulationModal diff --git a/frontend/src/containers/simulations/FilterLink.js b/frontend/src/containers/simulations/FilterLink.js index 2c5f4ed5..9eedd549 100644 --- a/frontend/src/containers/simulations/FilterLink.js +++ b/frontend/src/containers/simulations/FilterLink.js @@ -1,19 +1,19 @@ -import { connect } from "react-redux"; -import { setAuthVisibilityFilter } from "../../actions/simulations"; -import FilterButton from "../../components/simulations/FilterButton"; +import { connect } from 'react-redux' +import { setAuthVisibilityFilter } from '../../actions/simulations' +import FilterButton from '../../components/simulations/FilterButton' const mapStateToProps = (state, ownProps) => { - return { - active: state.simulationList.authVisibilityFilter === ownProps.filter - }; -}; + return { + active: state.simulationList.authVisibilityFilter === ownProps.filter, + } +} const mapDispatchToProps = (dispatch, ownProps) => { - return { - onClick: () => dispatch(setAuthVisibilityFilter(ownProps.filter)) - }; -}; + return { + onClick: () => dispatch(setAuthVisibilityFilter(ownProps.filter)), + } +} -const FilterLink = connect(mapStateToProps, mapDispatchToProps)(FilterButton); +const FilterLink = connect(mapStateToProps, mapDispatchToProps)(FilterButton) -export default FilterLink; +export default FilterLink diff --git a/frontend/src/containers/simulations/NewSimulationButtonContainer.js b/frontend/src/containers/simulations/NewSimulationButtonContainer.js index 3ea04d24..2d7c7385 100644 --- a/frontend/src/containers/simulations/NewSimulationButtonContainer.js +++ b/frontend/src/containers/simulations/NewSimulationButtonContainer.js @@ -1,15 +1,15 @@ -import { connect } from "react-redux"; -import { openNewSimulationModal } from "../../actions/modals/simulations"; -import NewSimulationButtonComponent from "../../components/simulations/NewSimulationButtonComponent"; +import { connect } from 'react-redux' +import { openNewSimulationModal } from '../../actions/modals/simulations' +import NewSimulationButtonComponent from '../../components/simulations/NewSimulationButtonComponent' const mapDispatchToProps = dispatch => { - return { - onClick: () => dispatch(openNewSimulationModal()) - }; -}; + return { + onClick: () => dispatch(openNewSimulationModal()), + } +} const NewSimulationButtonContainer = connect(undefined, mapDispatchToProps)( - NewSimulationButtonComponent -); + NewSimulationButtonComponent, +) -export default NewSimulationButtonContainer; +export default NewSimulationButtonContainer diff --git a/frontend/src/containers/simulations/SimulationActions.js b/frontend/src/containers/simulations/SimulationActions.js index 32243eff..6c662912 100644 --- a/frontend/src/containers/simulations/SimulationActions.js +++ b/frontend/src/containers/simulations/SimulationActions.js @@ -1,22 +1,23 @@ -import { connect } from "react-redux"; -import { deleteSimulation } from "../../actions/simulations"; -import SimulationActionButtons from "../../components/simulations/SimulationActionButtons"; +import { connect } from 'react-redux' +import { deleteSimulation } from '../../actions/simulations' +import SimulationActionButtons from '../../components/simulations/SimulationActionButtons' const mapStateToProps = (state, ownProps) => { - return { - simulationId: ownProps.simulationId - }; -}; + return { + simulationId: ownProps.simulationId, + } +} const mapDispatchToProps = dispatch => { - return { - onViewUsers: id => {}, // TODO implement user viewing - onDelete: id => dispatch(deleteSimulation(id)) - }; -}; + return { + onViewUsers: id => { + }, // TODO implement user viewing + onDelete: id => dispatch(deleteSimulation(id)), + } +} const SimulationActions = connect(mapStateToProps, mapDispatchToProps)( - SimulationActionButtons -); + SimulationActionButtons, +) -export default SimulationActions; +export default SimulationActions diff --git a/frontend/src/containers/simulations/VisibleSimulationAuthList.js b/frontend/src/containers/simulations/VisibleSimulationAuthList.js index ffc74d9e..f2b30542 100644 --- a/frontend/src/containers/simulations/VisibleSimulationAuthList.js +++ b/frontend/src/containers/simulations/VisibleSimulationAuthList.js @@ -1,42 +1,42 @@ -import { connect } from "react-redux"; -import SimulationList from "../../components/simulations/SimulationAuthList"; +import { connect } from 'react-redux' +import SimulationList from '../../components/simulations/SimulationAuthList' const getVisibleSimulationAuths = (simulationAuths, filter) => { - switch (filter) { - case "SHOW_ALL": - return simulationAuths; - case "SHOW_OWN": - return simulationAuths.filter( - simulationAuth => simulationAuth.authorizationLevel === "OWN" - ); - case "SHOW_SHARED": - return simulationAuths.filter( - simulationAuth => simulationAuth.authorizationLevel !== "OWN" - ); - default: - return simulationAuths; - } -}; - -const mapStateToProps = state => { - const denormalizedAuthorizations = state.simulationList.authorizationsOfCurrentUser.map( - authorizationIds => { - const authorization = state.objects.authorization[authorizationIds]; - authorization.user = state.objects.user[authorization.userId]; - authorization.simulation = - state.objects.simulation[authorization.simulationId]; - return authorization; + switch (filter) { + case 'SHOW_ALL': + return simulationAuths + case 'SHOW_OWN': + return simulationAuths.filter( + simulationAuth => simulationAuth.authorizationLevel === 'OWN', + ) + case 'SHOW_SHARED': + return simulationAuths.filter( + simulationAuth => simulationAuth.authorizationLevel !== 'OWN', + ) + default: + return simulationAuths } - ); +} - return { - authorizations: getVisibleSimulationAuths( - denormalizedAuthorizations, - state.simulationList.authVisibilityFilter +const mapStateToProps = state => { + const denormalizedAuthorizations = state.simulationList.authorizationsOfCurrentUser.map( + authorizationIds => { + const authorization = state.objects.authorization[authorizationIds] + authorization.user = state.objects.user[authorization.userId] + authorization.simulation = + state.objects.simulation[authorization.simulationId] + return authorization + }, ) - }; -}; -const VisibleSimulationAuthList = connect(mapStateToProps)(SimulationList); + return { + authorizations: getVisibleSimulationAuths( + denormalizedAuthorizations, + state.simulationList.authVisibilityFilter, + ), + } +} + +const VisibleSimulationAuthList = connect(mapStateToProps)(SimulationList) -export default VisibleSimulationAuthList; +export default VisibleSimulationAuthList diff --git a/frontend/src/index.js b/frontend/src/index.js index dad662c4..940a8dd7 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,21 +1,21 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import { Provider } from "react-redux"; -import { setupSocketConnection } from "./api/socket"; -import "./index.css"; -import registerServiceWorker from "./registerServiceWorker"; -import Routes from "./routes"; -import configureStore from "./store/configure-store"; +import React from 'react' +import ReactDOM from 'react-dom' +import { Provider } from 'react-redux' +import { setupSocketConnection } from './api/socket' +import './index.css' +import registerServiceWorker from './registerServiceWorker' +import Routes from './routes' +import configureStore from './store/configure-store' setupSocketConnection(() => { - const store = configureStore(); + const store = configureStore() - ReactDOM.render( - <Provider store={store}> - <Routes /> - </Provider>, - document.getElementById("root") - ); + ReactDOM.render( + <Provider store={store}> + <Routes/> + </Provider>, + document.getElementById('root'), + ) - registerServiceWorker(); -}); + registerServiceWorker() +}) diff --git a/frontend/src/index.sass b/frontend/src/index.sass index 248987ab..3e38a322 100644 --- a/frontend/src/index.sass +++ b/frontend/src/index.sass @@ -1,39 +1,39 @@ @import ./style-globals/_mixins.sass html, body, #root - margin: 0 - padding: 0 - width: 100% - height: 100% + margin: 0 + padding: 0 + width: 100% + height: 100% - font-family: Roboto, Helvetica, Verdana, sans-serif - background: #eee + font-family: Roboto, Helvetica, Verdana, sans-serif + background: #eee .full-height - position: relative - height: 100% + position: relative + height: 100% .page-container - padding-top: 60px + padding-top: 60px .text-page-container - padding-top: 80px - display: flex - flex-flow: column + padding-top: 80px + display: flex + flex-flow: column .vertically-expanding-container - flex: 1 1 auto - overflow-y: auto + flex: 1 1 auto + overflow-y: auto .bottom-btn-container - flex: 0 1 auto - padding: 20px 0 + flex: 0 1 auto + padding: 20px 0 .btn, .list-group-item-action - +clickable + +clickable .btn-circle - +border-radius(50%) + +border-radius(50%) a, a:hover - text-decoration: none + text-decoration: none diff --git a/frontend/src/pages/App.js b/frontend/src/pages/App.js index ad201e7d..c2b9bd51 100644 --- a/frontend/src/pages/App.js +++ b/frontend/src/pages/App.js @@ -1,125 +1,125 @@ -import PropTypes from "prop-types"; -import React from "react"; -import DocumentTitle from "react-document-title"; -import { connect } from "react-redux"; -import { ShortcutManager } from "react-shortcuts"; -import { openExperimentSucceeded } from "../actions/experiments"; -import { openSimulationSucceeded } from "../actions/simulations"; -import { resetCurrentDatacenter } from "../actions/topology/building"; -import ToolPanelComponent from "../components/app/map/controls/ToolPanelComponent"; -import LoadingScreen from "../components/app/map/LoadingScreen"; -import SimulationSidebarComponent from "../components/app/sidebars/simulation/SimulationSidebarComponent"; -import AppNavbar from "../components/navigation/AppNavbar"; -import ScaleIndicatorContainer from "../containers/app/map/controls/ScaleIndicatorContainer"; -import MapStage from "../containers/app/map/MapStage"; -import TopologySidebar from "../containers/app/sidebars/topology/TopologySidebar"; -import TimelineContainer from "../containers/app/timeline/TimelineContainer"; -import DeleteMachineModal from "../containers/modals/DeleteMachineModal"; -import DeleteRackModal from "../containers/modals/DeleteRackModal"; -import DeleteRoomModal from "../containers/modals/DeleteRoomModal"; -import EditRackNameModal from "../containers/modals/EditRackNameModal"; -import EditRoomNameModal from "../containers/modals/EditRoomNameModal"; -import KeymapConfiguration from "../shortcuts/keymap"; +import PropTypes from 'prop-types' +import React from 'react' +import DocumentTitle from 'react-document-title' +import { connect } from 'react-redux' +import { ShortcutManager } from 'react-shortcuts' +import { openExperimentSucceeded } from '../actions/experiments' +import { openSimulationSucceeded } from '../actions/simulations' +import { resetCurrentDatacenter } from '../actions/topology/building' +import ToolPanelComponent from '../components/app/map/controls/ToolPanelComponent' +import LoadingScreen from '../components/app/map/LoadingScreen' +import SimulationSidebarComponent from '../components/app/sidebars/simulation/SimulationSidebarComponent' +import AppNavbar from '../components/navigation/AppNavbar' +import ScaleIndicatorContainer from '../containers/app/map/controls/ScaleIndicatorContainer' +import MapStage from '../containers/app/map/MapStage' +import TopologySidebar from '../containers/app/sidebars/topology/TopologySidebar' +import TimelineContainer from '../containers/app/timeline/TimelineContainer' +import DeleteMachineModal from '../containers/modals/DeleteMachineModal' +import DeleteRackModal from '../containers/modals/DeleteRackModal' +import DeleteRoomModal from '../containers/modals/DeleteRoomModal' +import EditRackNameModal from '../containers/modals/EditRackNameModal' +import EditRoomNameModal from '../containers/modals/EditRoomNameModal' +import KeymapConfiguration from '../shortcuts/keymap' -const shortcutManager = new ShortcutManager(KeymapConfiguration); +const shortcutManager = new ShortcutManager(KeymapConfiguration) class AppComponent extends React.Component { - static propTypes = { - simulationId: PropTypes.number.isRequired, - inSimulation: PropTypes.bool, - experimentId: PropTypes.number, - simulationName: PropTypes.string - }; - static childContextTypes = { - shortcuts: PropTypes.object.isRequired - }; - - componentDidMount() { - this.props.resetCurrentDatacenter(); - if (this.props.inSimulation) { - this.props.openExperimentSucceeded( - this.props.simulationId, - this.props.experimentId - ); - return; + static propTypes = { + simulationId: PropTypes.string.isRequired, + inSimulation: PropTypes.bool, + experimentId: PropTypes.number, + simulationName: PropTypes.string, + } + static childContextTypes = { + shortcuts: PropTypes.object.isRequired, } - this.props.openSimulationSucceeded(this.props.simulationId); - } - getChildContext() { - return { - shortcuts: shortcutManager - }; - } + componentDidMount() { + this.props.resetCurrentDatacenter() + if (this.props.inSimulation) { + this.props.openExperimentSucceeded( + this.props.simulationId, + this.props.experimentId, + ) + return + } + this.props.openSimulationSucceeded(this.props.simulationId) + } - render() { - return ( - <DocumentTitle - title={ - this.props.simulationName - ? this.props.simulationName + " - OpenDC" - : "Simulation - OpenDC" + getChildContext() { + return { + shortcuts: shortcutManager, } - > - <div className="page-container full-height"> - <AppNavbar - simulationId={this.props.simulationId} - inSimulation={true} - fullWidth={true} - /> - {this.props.datacenterIsLoading ? ( - <div className="full-height d-flex align-items-center justify-content-center"> - <LoadingScreen /> - </div> - ) : ( - <div className="full-height"> - <MapStage /> - <ScaleIndicatorContainer /> - <ToolPanelComponent /> - <TopologySidebar /> - {this.props.inSimulation ? <TimelineContainer /> : undefined} - {this.props.inSimulation ? ( - <SimulationSidebarComponent /> - ) : ( - undefined - )} - </div> - )} - <EditRoomNameModal /> - <DeleteRoomModal /> - <EditRackNameModal /> - <DeleteRackModal /> - <DeleteMachineModal /> - </div> - </DocumentTitle> - ); - } + } + + render() { + return ( + <DocumentTitle + title={ + this.props.simulationName + ? this.props.simulationName + ' - OpenDC' + : 'Simulation - OpenDC' + } + > + <div className="page-container full-height"> + <AppNavbar + simulationId={this.props.simulationId} + inSimulation={true} + fullWidth={true} + /> + {this.props.datacenterIsLoading ? ( + <div className="full-height d-flex align-items-center justify-content-center"> + <LoadingScreen/> + </div> + ) : ( + <div className="full-height"> + <MapStage/> + <ScaleIndicatorContainer/> + <ToolPanelComponent/> + <TopologySidebar/> + {this.props.inSimulation ? <TimelineContainer/> : undefined} + {this.props.inSimulation ? ( + <SimulationSidebarComponent/> + ) : ( + undefined + )} + </div> + )} + <EditRoomNameModal/> + <DeleteRoomModal/> + <EditRackNameModal/> + <DeleteRackModal/> + <DeleteMachineModal/> + </div> + </DocumentTitle> + ) + } } const mapStateToProps = state => { - let simulationName = undefined; - if ( - state.currentSimulationId !== -1 && - state.objects.simulation[state.currentSimulationId] - ) { - simulationName = state.objects.simulation[state.currentSimulationId].name; - } + let simulationName = undefined + if ( + state.currentSimulationId !== -1 && + state.objects.simulation[state.currentSimulationId] + ) { + simulationName = state.objects.simulation[state.currentSimulationId].name + } - return { - datacenterIsLoading: state.currentDatacenterId === -1, - simulationName - }; -}; + return { + datacenterIsLoading: state.currentDatacenterId === -1, + simulationName, + } +} const mapDispatchToProps = dispatch => { - return { - resetCurrentDatacenter: () => dispatch(resetCurrentDatacenter()), - openSimulationSucceeded: id => dispatch(openSimulationSucceeded(id)), - openExperimentSucceeded: (simulationId, experimentId) => - dispatch(openExperimentSucceeded(simulationId, experimentId)) - }; -}; + return { + resetCurrentDatacenter: () => dispatch(resetCurrentDatacenter()), + openSimulationSucceeded: id => dispatch(openSimulationSucceeded(id)), + openExperimentSucceeded: (simulationId, experimentId) => + dispatch(openExperimentSucceeded(simulationId, experimentId)), + } +} -const App = connect(mapStateToProps, mapDispatchToProps)(AppComponent); +const App = connect(mapStateToProps, mapDispatchToProps)(AppComponent) -export default App; +export default App diff --git a/frontend/src/pages/Experiments.js b/frontend/src/pages/Experiments.js index 2f73cd7e..67e3fd77 100644 --- a/frontend/src/pages/Experiments.js +++ b/frontend/src/pages/Experiments.js @@ -1,75 +1,75 @@ -import PropTypes from "prop-types"; -import React from "react"; -import DocumentTitle from "react-document-title"; -import { connect } from "react-redux"; -import { fetchExperimentsOfSimulation } from "../actions/experiments"; -import { openSimulationSucceeded } from "../actions/simulations"; -import AppNavbar from "../components/navigation/AppNavbar"; -import ExperimentListContainer from "../containers/experiments/ExperimentListContainer"; -import NewExperimentButtonContainer from "../containers/experiments/NewExperimentButtonContainer"; -import NewExperimentModal from "../containers/modals/NewExperimentModal"; +import PropTypes from 'prop-types' +import React from 'react' +import DocumentTitle from 'react-document-title' +import { connect } from 'react-redux' +import { fetchExperimentsOfSimulation } from '../actions/experiments' +import { openSimulationSucceeded } from '../actions/simulations' +import AppNavbar from '../components/navigation/AppNavbar' +import ExperimentListContainer from '../containers/experiments/ExperimentListContainer' +import NewExperimentButtonContainer from '../containers/experiments/NewExperimentButtonContainer' +import NewExperimentModal from '../containers/modals/NewExperimentModal' class ExperimentsComponent extends React.Component { - static propTypes = { - simulationId: PropTypes.number.isRequired, - simulationName: PropTypes.string - }; + static propTypes = { + simulationId: PropTypes.string.isRequired, + simulationName: PropTypes.string, + } - componentDidMount() { - this.props.storeSimulationId(this.props.simulationId); - this.props.fetchExperimentsOfSimulation(this.props.simulationId); - } + componentDidMount() { + this.props.storeSimulationId(this.props.simulationId) + this.props.fetchExperimentsOfSimulation(this.props.simulationId) + } - render() { - return ( - <DocumentTitle - title={ - this.props.simulationName - ? "Experiments - " + this.props.simulationName + " - OpenDC" - : "Experiments - OpenDC" - } - > - <div className="full-height"> - <AppNavbar - simulationId={this.props.simulationId} - inSimulation={true} - fullWidth={true} - /> - <div className="container text-page-container full-height"> - <ExperimentListContainer /> - <NewExperimentButtonContainer /> - </div> - <NewExperimentModal /> - </div> - </DocumentTitle> - ); - } + render() { + return ( + <DocumentTitle + title={ + this.props.simulationName + ? 'Experiments - ' + this.props.simulationName + ' - OpenDC' + : 'Experiments - OpenDC' + } + > + <div className="full-height"> + <AppNavbar + simulationId={this.props.simulationId} + inSimulation={true} + fullWidth={true} + /> + <div className="container text-page-container full-height"> + <ExperimentListContainer/> + <NewExperimentButtonContainer/> + </div> + <NewExperimentModal/> + </div> + </DocumentTitle> + ) + } } const mapStateToProps = state => { - let simulationName = undefined; - if ( - state.currentSimulationId !== -1 && - state.objects.simulation[state.currentSimulationId] - ) { - simulationName = state.objects.simulation[state.currentSimulationId].name; - } + let simulationName = undefined + if ( + state.currentSimulationId !== -1 && + state.objects.simulation[state.currentSimulationId] + ) { + simulationName = state.objects.simulation[state.currentSimulationId].name + } - return { - simulationName - }; -}; + return { + simulationName, + } +} const mapDispatchToProps = dispatch => { - return { - storeSimulationId: id => dispatch(openSimulationSucceeded(id)), - fetchExperimentsOfSimulation: id => - dispatch(fetchExperimentsOfSimulation(id)) - }; -}; + return { + storeSimulationId: id => dispatch(openSimulationSucceeded(id)), + fetchExperimentsOfSimulation: id => + dispatch(fetchExperimentsOfSimulation(id)), + } +} const Experiments = connect(mapStateToProps, mapDispatchToProps)( - ExperimentsComponent -); + ExperimentsComponent, +) -export default Experiments; +export default Experiments diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js index f6479722..e69c2049 100644 --- a/frontend/src/pages/Home.js +++ b/frontend/src/pages/Home.js @@ -1,62 +1,62 @@ -import React from "react"; -import DocumentTitle from "react-document-title"; -import ContactSection from "../components/home/ContactSection"; -import IntroSection from "../components/home/IntroSection"; -import JumbotronHeader from "../components/home/JumbotronHeader"; -import ModelingSection from "../components/home/ModelingSection"; -import SimulationSection from "../components/home/SimulationSection"; -import StakeholderSection from "../components/home/StakeholderSection"; -import TeamSection from "../components/home/TeamSection"; -import TechnologiesSection from "../components/home/TechnologiesSection"; -import HomeNavbar from "../components/navigation/HomeNavbar"; -import jQuery from "../util/jquery"; -import "./Home.css"; +import React from 'react' +import DocumentTitle from 'react-document-title' +import ContactSection from '../components/home/ContactSection' +import IntroSection from '../components/home/IntroSection' +import JumbotronHeader from '../components/home/JumbotronHeader' +import ModelingSection from '../components/home/ModelingSection' +import SimulationSection from '../components/home/SimulationSection' +import StakeholderSection from '../components/home/StakeholderSection' +import TeamSection from '../components/home/TeamSection' +import TechnologiesSection from '../components/home/TechnologiesSection' +import HomeNavbar from '../components/navigation/HomeNavbar' +import jQuery from '../util/jquery' +import './Home.css' class Home extends React.Component { - state = { - scrollSpySetup: false - }; + state = { + scrollSpySetup: false, + } - componentDidMount() { - const scrollOffset = 60; - jQuery("#navbar") - .find("li a") - .click(function(e) { - if (jQuery(e.target).parents(".auth-links").length > 0) { - return; - } - e.preventDefault(); - jQuery(jQuery(this).attr("href"))[0].scrollIntoView(); - window.scrollBy(0, -scrollOffset); - }); + componentDidMount() { + const scrollOffset = 60 + jQuery('#navbar') + .find('li a') + .click(function(e) { + if (jQuery(e.target).parents('.auth-links').length > 0) { + return + } + e.preventDefault() + jQuery(jQuery(this).attr('href'))[0].scrollIntoView() + window.scrollBy(0, -scrollOffset) + }) - if (!this.state.scrollSpySetup) { - jQuery("body").scrollspy({ - target: "#navbar", - offset: scrollOffset - }); - this.setState({ scrollSpySetup: true }); + if (!this.state.scrollSpySetup) { + jQuery('body').scrollspy({ + target: '#navbar', + offset: scrollOffset, + }) + this.setState({ scrollSpySetup: true }) + } } - } - render() { - return ( - <div> - <HomeNavbar /> - <div className="body-wrapper page-container"> - <JumbotronHeader /> - <IntroSection /> - <StakeholderSection /> - <ModelingSection /> - <SimulationSection /> - <TechnologiesSection /> - <TeamSection /> - <ContactSection /> - <DocumentTitle title="OpenDC" /> - </div> - </div> - ); - } + render() { + return ( + <div> + <HomeNavbar/> + <div className="body-wrapper page-container"> + <JumbotronHeader/> + <IntroSection/> + <StakeholderSection/> + <ModelingSection/> + <SimulationSection/> + <TechnologiesSection/> + <TeamSection/> + <ContactSection/> + <DocumentTitle title="OpenDC"/> + </div> + </div> + ) + } } -export default Home; +export default Home diff --git a/frontend/src/pages/Home.sass b/frontend/src/pages/Home.sass index 9c812db2..79cb9698 100644 --- a/frontend/src/pages/Home.sass +++ b/frontend/src/pages/Home.sass @@ -1,9 +1,9 @@ .body-wrapper - position: relative - overflow-y: hidden + position: relative + overflow-y: hidden .intro-section, .modeling-section, .technologies-section - background-color: #fff + background-color: #fff .stakeholder-section, .simulation-section, .team-section - background-color: #f2f2f2 + background-color: #f2f2f2 diff --git a/frontend/src/pages/NotFound.js b/frontend/src/pages/NotFound.js index b344e923..959cceec 100644 --- a/frontend/src/pages/NotFound.js +++ b/frontend/src/pages/NotFound.js @@ -1,14 +1,14 @@ -import React from "react"; -import DocumentTitle from "react-document-title"; -import TerminalWindow from "../components/not-found/TerminalWindow"; -import "./NotFound.css"; +import React from 'react' +import DocumentTitle from 'react-document-title' +import TerminalWindow from '../components/not-found/TerminalWindow' +import './NotFound.css' const NotFound = () => ( - <DocumentTitle title="Page Not Found - OpenDC"> - <div className="not-found-backdrop"> - <TerminalWindow /> - </div> - </DocumentTitle> -); + <DocumentTitle title="Page Not Found - OpenDC"> + <div className="not-found-backdrop"> + <TerminalWindow/> + </div> + </DocumentTitle> +) -export default NotFound; +export default NotFound diff --git a/frontend/src/pages/NotFound.sass b/frontend/src/pages/NotFound.sass index 9457da01..59231f7a 100644 --- a/frontend/src/pages/NotFound.sass +++ b/frontend/src/pages/NotFound.sass @@ -1,11 +1,11 @@ .not-found-backdrop - position: absolute - left: 0 - top: 0 + position: absolute + left: 0 + top: 0 - margin: 0 - padding: 0 - width: 100% - height: 100% + margin: 0 + padding: 0 + width: 100% + height: 100% - background-image: linear-gradient(135deg, #00678a, #008fbf, #00A6D6) + background-image: linear-gradient(135deg, #00678a, #008fbf, #00A6D6) diff --git a/frontend/src/pages/Profile.js b/frontend/src/pages/Profile.js index 106ec97e..e6d2aa7b 100644 --- a/frontend/src/pages/Profile.js +++ b/frontend/src/pages/Profile.js @@ -1,40 +1,40 @@ -import React from "react"; -import DocumentTitle from "react-document-title"; -import { connect } from "react-redux"; -import { openDeleteProfileModal } from "../actions/modals/profile"; -import AppNavbar from "../components/navigation/AppNavbar"; -import DeleteProfileModal from "../containers/modals/DeleteProfileModal"; +import React from 'react' +import DocumentTitle from 'react-document-title' +import { connect } from 'react-redux' +import { openDeleteProfileModal } from '../actions/modals/profile' +import AppNavbar from '../components/navigation/AppNavbar' +import DeleteProfileModal from '../containers/modals/DeleteProfileModal' const ProfileContainer = ({ onDelete }) => ( - <DocumentTitle title="My Profile - OpenDC"> - <div className="full-height"> - <AppNavbar inSimulation={false} fullWidth={false} /> - <div className="container text-page-container full-height"> - <button - className="btn btn-danger mb-2 ml-auto mr-auto" - style={{ maxWidth: 300 }} - onClick={onDelete} - > - Delete my account on OpenDC - </button> - <p className="text-muted text-center"> - This does not delete your Google account, but simply disconnects it - from the OpenDC platform and deletes any simulation info that is - associated with you (simulations you own and any authorizations you - may have on other projects). - </p> - </div> - <DeleteProfileModal /> - </div> - </DocumentTitle> -); + <DocumentTitle title="My Profile - OpenDC"> + <div className="full-height"> + <AppNavbar inSimulation={false} fullWidth={false}/> + <div className="container text-page-container full-height"> + <button + className="btn btn-danger mb-2 ml-auto mr-auto" + style={{ maxWidth: 300 }} + onClick={onDelete} + > + Delete my account on OpenDC + </button> + <p className="text-muted text-center"> + This does not delete your Google account, but simply disconnects it + from the OpenDC platform and deletes any simulation info that is + associated with you (simulations you own and any authorizations you + may have on other projects). + </p> + </div> + <DeleteProfileModal/> + </div> + </DocumentTitle> +) const mapDispatchToProps = dispatch => { - return { - onDelete: () => dispatch(openDeleteProfileModal()) - }; -}; + return { + onDelete: () => dispatch(openDeleteProfileModal()), + } +} -const Profile = connect(undefined, mapDispatchToProps)(ProfileContainer); +const Profile = connect(undefined, mapDispatchToProps)(ProfileContainer) -export default Profile; +export default Profile diff --git a/frontend/src/pages/Simulations.js b/frontend/src/pages/Simulations.js index ecff8fe6..116eb1b2 100644 --- a/frontend/src/pages/Simulations.js +++ b/frontend/src/pages/Simulations.js @@ -1,46 +1,46 @@ -import React from "react"; -import DocumentTitle from "react-document-title"; -import { connect } from "react-redux"; -import { openNewSimulationModal } from "../actions/modals/simulations"; -import { fetchAuthorizationsOfCurrentUser } from "../actions/users"; -import AppNavbar from "../components/navigation/AppNavbar"; -import SimulationFilterPanel from "../components/simulations/FilterPanel"; -import NewSimulationModal from "../containers/modals/NewSimulationModal"; -import NewSimulationButtonContainer from "../containers/simulations/NewSimulationButtonContainer"; -import VisibleSimulationList from "../containers/simulations/VisibleSimulationAuthList"; +import React from 'react' +import DocumentTitle from 'react-document-title' +import { connect } from 'react-redux' +import { openNewSimulationModal } from '../actions/modals/simulations' +import { fetchAuthorizationsOfCurrentUser } from '../actions/users' +import AppNavbar from '../components/navigation/AppNavbar' +import SimulationFilterPanel from '../components/simulations/FilterPanel' +import NewSimulationModal from '../containers/modals/NewSimulationModal' +import NewSimulationButtonContainer from '../containers/simulations/NewSimulationButtonContainer' +import VisibleSimulationList from '../containers/simulations/VisibleSimulationAuthList' class SimulationsContainer extends React.Component { - componentDidMount() { - this.props.fetchAuthorizationsOfCurrentUser(); - } + componentDidMount() { + this.props.fetchAuthorizationsOfCurrentUser() + } - render() { - return ( - <DocumentTitle title="My Simulations - OpenDC"> - <div className="full-height"> - <AppNavbar inSimulation={false} fullWidth={false} /> - <div className="container text-page-container full-height"> - <SimulationFilterPanel /> - <VisibleSimulationList /> - <NewSimulationButtonContainer /> - </div> - <NewSimulationModal /> - </div> - </DocumentTitle> - ); - } + render() { + return ( + <DocumentTitle title="My Simulations - OpenDC"> + <div className="full-height"> + <AppNavbar inSimulation={false} fullWidth={false}/> + <div className="container text-page-container full-height"> + <SimulationFilterPanel/> + <VisibleSimulationList/> + <NewSimulationButtonContainer/> + </div> + <NewSimulationModal/> + </div> + </DocumentTitle> + ) + } } const mapDispatchToProps = dispatch => { - return { - fetchAuthorizationsOfCurrentUser: () => - dispatch(fetchAuthorizationsOfCurrentUser()), - openNewSimulationModal: () => dispatch(openNewSimulationModal()) - }; -}; + return { + fetchAuthorizationsOfCurrentUser: () => + dispatch(fetchAuthorizationsOfCurrentUser()), + openNewSimulationModal: () => dispatch(openNewSimulationModal()), + } +} const Simulations = connect(undefined, mapDispatchToProps)( - SimulationsContainer -); + SimulationsContainer, +) -export default Simulations; +export default Simulations diff --git a/frontend/src/reducers/auth.js b/frontend/src/reducers/auth.js index 635929d4..399a4b10 100644 --- a/frontend/src/reducers/auth.js +++ b/frontend/src/reducers/auth.js @@ -1,12 +1,12 @@ -import { LOG_IN_SUCCEEDED, LOG_OUT } from "../actions/auth"; +import { LOG_IN_SUCCEEDED, LOG_OUT } from '../actions/auth' export function auth(state = {}, action) { - switch (action.type) { - case LOG_IN_SUCCEEDED: - return action.payload; - case LOG_OUT: - return {}; - default: - return state; - } + switch (action.type) { + case LOG_IN_SUCCEEDED: + return action.payload + case LOG_OUT: + return {} + default: + return state + } } diff --git a/frontend/src/reducers/construction-mode.js b/frontend/src/reducers/construction-mode.js index b5e6e781..3b500b59 100644 --- a/frontend/src/reducers/construction-mode.js +++ b/frontend/src/reducers/construction-mode.js @@ -1,50 +1,46 @@ -import { combineReducers } from "redux"; -import { OPEN_EXPERIMENT_SUCCEEDED } from "../actions/experiments"; -import { GO_DOWN_ONE_INTERACTION_LEVEL } from "../actions/interaction-level"; +import { combineReducers } from 'redux' +import { OPEN_EXPERIMENT_SUCCEEDED } from '../actions/experiments' +import { GO_DOWN_ONE_INTERACTION_LEVEL } from '../actions/interaction-level' import { - CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED, - FINISH_NEW_ROOM_CONSTRUCTION, - FINISH_ROOM_EDIT, - START_NEW_ROOM_CONSTRUCTION_SUCCEEDED, - START_ROOM_EDIT -} from "../actions/topology/building"; -import { - DELETE_ROOM, - START_RACK_CONSTRUCTION, - STOP_RACK_CONSTRUCTION -} from "../actions/topology/room"; + CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED, + FINISH_NEW_ROOM_CONSTRUCTION, + FINISH_ROOM_EDIT, + START_NEW_ROOM_CONSTRUCTION_SUCCEEDED, + START_ROOM_EDIT, +} from '../actions/topology/building' +import { DELETE_ROOM, START_RACK_CONSTRUCTION, STOP_RACK_CONSTRUCTION } from '../actions/topology/room' export function currentRoomInConstruction(state = -1, action) { - switch (action.type) { - case START_NEW_ROOM_CONSTRUCTION_SUCCEEDED: - return action.roomId; - case START_ROOM_EDIT: - return action.roomId; - case CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED: - case FINISH_NEW_ROOM_CONSTRUCTION: - case OPEN_EXPERIMENT_SUCCEEDED: - case FINISH_ROOM_EDIT: - case DELETE_ROOM: - return -1; - default: - return state; - } + switch (action.type) { + case START_NEW_ROOM_CONSTRUCTION_SUCCEEDED: + return action.roomId + case START_ROOM_EDIT: + return action.roomId + case CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED: + case FINISH_NEW_ROOM_CONSTRUCTION: + case OPEN_EXPERIMENT_SUCCEEDED: + case FINISH_ROOM_EDIT: + case DELETE_ROOM: + return -1 + default: + return state + } } export function inRackConstructionMode(state = false, action) { - switch (action.type) { - case START_RACK_CONSTRUCTION: - return true; - case STOP_RACK_CONSTRUCTION: - case OPEN_EXPERIMENT_SUCCEEDED: - case GO_DOWN_ONE_INTERACTION_LEVEL: - return false; - default: - return state; - } + switch (action.type) { + case START_RACK_CONSTRUCTION: + return true + case STOP_RACK_CONSTRUCTION: + case OPEN_EXPERIMENT_SUCCEEDED: + case GO_DOWN_ONE_INTERACTION_LEVEL: + return false + default: + return state + } } export const construction = combineReducers({ - currentRoomInConstruction, - inRackConstructionMode -}); + currentRoomInConstruction, + inRackConstructionMode, +}) diff --git a/frontend/src/reducers/current-ids.js b/frontend/src/reducers/current-ids.js index 4e16630d..6a605d9f 100644 --- a/frontend/src/reducers/current-ids.js +++ b/frontend/src/reducers/current-ids.js @@ -1,28 +1,25 @@ -import { OPEN_EXPERIMENT_SUCCEEDED } from "../actions/experiments"; -import { OPEN_SIMULATION_SUCCEEDED } from "../actions/simulations"; -import { - RESET_CURRENT_DATACENTER, - SET_CURRENT_DATACENTER -} from "../actions/topology/building"; +import { OPEN_EXPERIMENT_SUCCEEDED } from '../actions/experiments' +import { OPEN_SIMULATION_SUCCEEDED } from '../actions/simulations' +import { RESET_CURRENT_DATACENTER, SET_CURRENT_DATACENTER } from '../actions/topology/building' export function currentDatacenterId(state = -1, action) { - switch (action.type) { - case SET_CURRENT_DATACENTER: - return action.datacenterId; - case RESET_CURRENT_DATACENTER: - return -1; - default: - return state; - } + switch (action.type) { + case SET_CURRENT_DATACENTER: + return action.datacenterId + case RESET_CURRENT_DATACENTER: + return -1 + default: + return state + } } export function currentSimulationId(state = -1, action) { - switch (action.type) { - case OPEN_SIMULATION_SUCCEEDED: - return action.id; - case OPEN_EXPERIMENT_SUCCEEDED: - return action.simulationId; - default: - return state; - } + switch (action.type) { + case OPEN_SIMULATION_SUCCEEDED: + return action.id + case OPEN_EXPERIMENT_SUCCEEDED: + return action.simulationId + default: + return state + } } diff --git a/frontend/src/reducers/index.js b/frontend/src/reducers/index.js index 6f4d0c94..a5b14f4a 100644 --- a/frontend/src/reducers/index.js +++ b/frontend/src/reducers/index.js @@ -1,37 +1,31 @@ -import { combineReducers } from "redux"; -import { auth } from "./auth"; -import { construction } from "./construction-mode"; -import { currentDatacenterId, currentSimulationId } from "./current-ids"; -import { interactionLevel } from "./interaction-level"; -import { map } from "./map"; -import { modals } from "./modals"; -import { objects } from "./objects"; -import { simulationList } from "./simulation-list"; -import { - currentExperimentId, - currentTick, - isPlaying, - lastSimulatedTick, - loadMetric -} from "./simulation-mode"; -import { states } from "./states"; +import { combineReducers } from 'redux' +import { auth } from './auth' +import { construction } from './construction-mode' +import { currentDatacenterId, currentSimulationId } from './current-ids' +import { interactionLevel } from './interaction-level' +import { map } from './map' +import { modals } from './modals' +import { objects } from './objects' +import { simulationList } from './simulation-list' +import { currentExperimentId, currentTick, isPlaying, lastSimulatedTick, loadMetric } from './simulation-mode' +import { states } from './states' const rootReducer = combineReducers({ - objects, - states, - modals, - simulationList, - construction, - map, - currentSimulationId, - currentDatacenterId, - currentExperimentId, - currentTick, - lastSimulatedTick, - loadMetric, - isPlaying, - interactionLevel, - auth -}); + objects, + states, + modals, + simulationList, + construction, + map, + currentSimulationId, + currentDatacenterId, + currentExperimentId, + currentTick, + lastSimulatedTick, + loadMetric, + isPlaying, + interactionLevel, + auth, +}) -export default rootReducer; +export default rootReducer diff --git a/frontend/src/reducers/interaction-level.js b/frontend/src/reducers/interaction-level.js index 581906c5..12d5d70e 100644 --- a/frontend/src/reducers/interaction-level.js +++ b/frontend/src/reducers/interaction-level.js @@ -1,59 +1,59 @@ -import { OPEN_EXPERIMENT_SUCCEEDED } from "../actions/experiments"; +import { OPEN_EXPERIMENT_SUCCEEDED } from '../actions/experiments' import { - GO_DOWN_ONE_INTERACTION_LEVEL, - GO_FROM_BUILDING_TO_ROOM, - GO_FROM_RACK_TO_MACHINE, - GO_FROM_ROOM_TO_RACK -} from "../actions/interaction-level"; -import { OPEN_SIMULATION_SUCCEEDED } from "../actions/simulations"; -import { SET_CURRENT_DATACENTER } from "../actions/topology/building"; + GO_DOWN_ONE_INTERACTION_LEVEL, + GO_FROM_BUILDING_TO_ROOM, + GO_FROM_RACK_TO_MACHINE, + GO_FROM_ROOM_TO_RACK, +} from '../actions/interaction-level' +import { OPEN_SIMULATION_SUCCEEDED } from '../actions/simulations' +import { SET_CURRENT_DATACENTER } from '../actions/topology/building' -export function interactionLevel(state = { mode: "BUILDING" }, action) { - switch (action.type) { - case OPEN_EXPERIMENT_SUCCEEDED: - case OPEN_SIMULATION_SUCCEEDED: - case SET_CURRENT_DATACENTER: - return { - mode: "BUILDING" - }; - case GO_FROM_BUILDING_TO_ROOM: - return { - mode: "ROOM", - roomId: action.roomId - }; - case GO_FROM_ROOM_TO_RACK: - return { - mode: "RACK", - roomId: state.roomId, - tileId: action.tileId - }; - case GO_FROM_RACK_TO_MACHINE: - return { - mode: "MACHINE", - roomId: state.roomId, - tileId: state.tileId, - position: action.position - }; - case GO_DOWN_ONE_INTERACTION_LEVEL: - if (state.mode === "ROOM") { - return { - mode: "BUILDING" - }; - } else if (state.mode === "RACK") { - return { - mode: "ROOM", - roomId: state.roomId - }; - } else if (state.mode === "MACHINE") { - return { - mode: "RACK", - roomId: state.roomId, - tileId: state.tileId - }; - } else { - return state; - } - default: - return state; - } +export function interactionLevel(state = { mode: 'BUILDING' }, action) { + switch (action.type) { + case OPEN_EXPERIMENT_SUCCEEDED: + case OPEN_SIMULATION_SUCCEEDED: + case SET_CURRENT_DATACENTER: + return { + mode: 'BUILDING', + } + case GO_FROM_BUILDING_TO_ROOM: + return { + mode: 'ROOM', + roomId: action.roomId, + } + case GO_FROM_ROOM_TO_RACK: + return { + mode: 'RACK', + roomId: state.roomId, + tileId: action.tileId, + } + case GO_FROM_RACK_TO_MACHINE: + return { + mode: 'MACHINE', + roomId: state.roomId, + tileId: state.tileId, + position: action.position, + } + case GO_DOWN_ONE_INTERACTION_LEVEL: + if (state.mode === 'ROOM') { + return { + mode: 'BUILDING', + } + } else if (state.mode === 'RACK') { + return { + mode: 'ROOM', + roomId: state.roomId, + } + } else if (state.mode === 'MACHINE') { + return { + mode: 'RACK', + roomId: state.roomId, + tileId: state.tileId, + } + } else { + return state + } + default: + return state + } } diff --git a/frontend/src/reducers/map.js b/frontend/src/reducers/map.js index b75dc051..de712c15 100644 --- a/frontend/src/reducers/map.js +++ b/frontend/src/reducers/map.js @@ -1,39 +1,35 @@ -import { combineReducers } from "redux"; -import { - SET_MAP_DIMENSIONS, - SET_MAP_POSITION, - SET_MAP_SCALE -} from "../actions/map"; +import { combineReducers } from 'redux' +import { SET_MAP_DIMENSIONS, SET_MAP_POSITION, SET_MAP_SCALE } from '../actions/map' export function position(state = { x: 0, y: 0 }, action) { - switch (action.type) { - case SET_MAP_POSITION: - return { x: action.x, y: action.y }; - default: - return state; - } + switch (action.type) { + case SET_MAP_POSITION: + return { x: action.x, y: action.y } + default: + return state + } } export function dimensions(state = { width: 600, height: 400 }, action) { - switch (action.type) { - case SET_MAP_DIMENSIONS: - return { width: action.width, height: action.height }; - default: - return state; - } + switch (action.type) { + case SET_MAP_DIMENSIONS: + return { width: action.width, height: action.height } + default: + return state + } } export function scale(state = 1, action) { - switch (action.type) { - case SET_MAP_SCALE: - return action.scale; - default: - return state; - } + switch (action.type) { + case SET_MAP_SCALE: + return action.scale + default: + return state + } } export const map = combineReducers({ - position, - dimensions, - scale -}); + position, + dimensions, + scale, +}) diff --git a/frontend/src/reducers/modals.js b/frontend/src/reducers/modals.js index 78527feb..04e9ab49 100644 --- a/frontend/src/reducers/modals.js +++ b/frontend/src/reducers/modals.js @@ -1,75 +1,66 @@ -import { combineReducers } from "redux"; -import { OPEN_EXPERIMENT_SUCCEEDED } from "../actions/experiments"; +import { combineReducers } from 'redux' +import { OPEN_EXPERIMENT_SUCCEEDED } from '../actions/experiments' +import { CLOSE_NEW_EXPERIMENT_MODAL, OPEN_NEW_EXPERIMENT_MODAL } from '../actions/modals/experiments' +import { CLOSE_DELETE_PROFILE_MODAL, OPEN_DELETE_PROFILE_MODAL } from '../actions/modals/profile' +import { CLOSE_NEW_SIMULATION_MODAL, OPEN_NEW_SIMULATION_MODAL } from '../actions/modals/simulations' import { - CLOSE_NEW_EXPERIMENT_MODAL, - OPEN_NEW_EXPERIMENT_MODAL -} from "../actions/modals/experiments"; -import { - CLOSE_DELETE_PROFILE_MODAL, - OPEN_DELETE_PROFILE_MODAL -} from "../actions/modals/profile"; -import { - CLOSE_NEW_SIMULATION_MODAL, - OPEN_NEW_SIMULATION_MODAL -} from "../actions/modals/simulations"; -import { - CLOSE_DELETE_MACHINE_MODAL, - CLOSE_DELETE_RACK_MODAL, - CLOSE_DELETE_ROOM_MODAL, - CLOSE_EDIT_RACK_NAME_MODAL, - CLOSE_EDIT_ROOM_NAME_MODAL, - OPEN_DELETE_MACHINE_MODAL, - OPEN_DELETE_RACK_MODAL, - OPEN_DELETE_ROOM_MODAL, - OPEN_EDIT_RACK_NAME_MODAL, - OPEN_EDIT_ROOM_NAME_MODAL -} from "../actions/modals/topology"; + CLOSE_DELETE_MACHINE_MODAL, + CLOSE_DELETE_RACK_MODAL, + CLOSE_DELETE_ROOM_MODAL, + CLOSE_EDIT_RACK_NAME_MODAL, + CLOSE_EDIT_ROOM_NAME_MODAL, + OPEN_DELETE_MACHINE_MODAL, + OPEN_DELETE_RACK_MODAL, + OPEN_DELETE_ROOM_MODAL, + OPEN_EDIT_RACK_NAME_MODAL, + OPEN_EDIT_ROOM_NAME_MODAL, +} from '../actions/modals/topology' function modal(openAction, closeAction) { - return function(state = false, action) { - switch (action.type) { - case openAction: - return true; - case closeAction: - case OPEN_EXPERIMENT_SUCCEEDED: - return false; - default: - return state; + return function(state = false, action) { + switch (action.type) { + case openAction: + return true + case closeAction: + case OPEN_EXPERIMENT_SUCCEEDED: + return false + default: + return state + } } - }; } export const modals = combineReducers({ - newSimulationModalVisible: modal( - OPEN_NEW_SIMULATION_MODAL, - CLOSE_NEW_SIMULATION_MODAL - ), - deleteProfileModalVisible: modal( - OPEN_DELETE_PROFILE_MODAL, - CLOSE_DELETE_PROFILE_MODAL - ), - editRoomNameModalVisible: modal( - OPEN_EDIT_ROOM_NAME_MODAL, - CLOSE_EDIT_ROOM_NAME_MODAL - ), - deleteRoomModalVisible: modal( - OPEN_DELETE_ROOM_MODAL, - CLOSE_DELETE_ROOM_MODAL - ), - editRackNameModalVisible: modal( - OPEN_EDIT_RACK_NAME_MODAL, - CLOSE_EDIT_RACK_NAME_MODAL - ), - deleteRackModalVisible: modal( - OPEN_DELETE_RACK_MODAL, - CLOSE_DELETE_RACK_MODAL - ), - deleteMachineModalVisible: modal( - OPEN_DELETE_MACHINE_MODAL, - CLOSE_DELETE_MACHINE_MODAL - ), - newExperimentModalVisible: modal( - OPEN_NEW_EXPERIMENT_MODAL, - CLOSE_NEW_EXPERIMENT_MODAL - ) -}); + newSimulationModalVisible: modal( + OPEN_NEW_SIMULATION_MODAL, + CLOSE_NEW_SIMULATION_MODAL, + ), + deleteProfileModalVisible: modal( + OPEN_DELETE_PROFILE_MODAL, + CLOSE_DELETE_PROFILE_MODAL, + ), + editRoomNameModalVisible: modal( + OPEN_EDIT_ROOM_NAME_MODAL, + CLOSE_EDIT_ROOM_NAME_MODAL, + ), + deleteRoomModalVisible: modal( + OPEN_DELETE_ROOM_MODAL, + CLOSE_DELETE_ROOM_MODAL, + ), + editRackNameModalVisible: modal( + OPEN_EDIT_RACK_NAME_MODAL, + CLOSE_EDIT_RACK_NAME_MODAL, + ), + deleteRackModalVisible: modal( + OPEN_DELETE_RACK_MODAL, + CLOSE_DELETE_RACK_MODAL, + ), + deleteMachineModalVisible: modal( + OPEN_DELETE_MACHINE_MODAL, + CLOSE_DELETE_MACHINE_MODAL, + ), + newExperimentModalVisible: modal( + OPEN_NEW_EXPERIMENT_MODAL, + CLOSE_NEW_EXPERIMENT_MODAL, + ), +}) diff --git a/frontend/src/reducers/objects.js b/frontend/src/reducers/objects.js index 99d91092..2e9644d0 100644 --- a/frontend/src/reducers/objects.js +++ b/frontend/src/reducers/objects.js @@ -1,80 +1,80 @@ -import { combineReducers } from "redux"; +import { combineReducers } from 'redux' import { - ADD_ID_TO_STORE_OBJECT_LIST_PROP, - ADD_PROP_TO_STORE_OBJECT, - ADD_TO_STORE, - REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP -} from "../actions/objects"; + ADD_ID_TO_STORE_OBJECT_LIST_PROP, + ADD_PROP_TO_STORE_OBJECT, + ADD_TO_STORE, + REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP, +} from '../actions/objects' export const objects = combineReducers({ - simulation: object("simulation"), - user: object("user"), - authorization: objectWithId("authorization", object => [ - object.userId, - object.simulationId - ]), - failureModel: object("failureModel"), - cpu: object("cpu"), - gpu: object("gpu"), - memory: object("memory"), - storage: object("storage"), - machine: object("machine"), - rack: object("rack"), - coolingItem: object("coolingItem"), - psu: object("psu"), - tile: object("tile"), - room: object("room"), - datacenter: object("datacenter"), - section: object("section"), - path: object("path"), - task: object("task"), - job: object("job"), - trace: object("trace"), - scheduler: object("scheduler"), - experiment: object("experiment") -}); + simulation: object('simulation'), + user: object('user'), + authorization: objectWithId('authorization', object => [ + object.userId, + object.simulationId, + ]), + failureModel: object('failureModel'), + cpu: object('cpu'), + gpu: object('gpu'), + memory: object('memory'), + storage: object('storage'), + machine: object('machine'), + rack: object('rack'), + coolingItem: object('coolingItem'), + psu: object('psu'), + tile: object('tile'), + room: object('room'), + datacenter: object('datacenter'), + section: object('section'), + path: object('path'), + task: object('task'), + job: object('job'), + trace: object('trace'), + scheduler: object('scheduler'), + experiment: object('experiment'), +}) function object(type) { - return objectWithId(type, object => object.id); + return objectWithId(type, object => object.id) } function objectWithId(type, getId) { - return (state = {}, action) => { - if (action.objectType !== type) { - return state; - } + return (state = {}, action) => { + if (action.objectType !== type) { + return state + } - if (action.type === ADD_TO_STORE) { - return Object.assign({}, state, { - [getId(action.object)]: action.object - }); - } else if (action.type === ADD_PROP_TO_STORE_OBJECT) { - return Object.assign({}, state, { - [action.objectId]: Object.assign( - {}, - state[action.objectId], - action.propObject - ) - }); - } else if (action.type === ADD_ID_TO_STORE_OBJECT_LIST_PROP) { - return Object.assign({}, state, { - [action.objectId]: Object.assign({}, state[action.objectId], { - [action.propName]: [ - ...state[action.objectId][action.propName], - action.id - ] - }) - }); - } else if (action.type === REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP) { - return Object.assign({}, state, { - [action.objectId]: Object.assign({}, state[action.objectId], { - [action.propName]: state[action.objectId][action.propName].filter( - id => id !== action.id - ) - }) - }); - } + if (action.type === ADD_TO_STORE) { + return Object.assign({}, state, { + [getId(action.object)]: action.object, + }) + } else if (action.type === ADD_PROP_TO_STORE_OBJECT) { + return Object.assign({}, state, { + [action.objectId]: Object.assign( + {}, + state[action.objectId], + action.propObject, + ), + }) + } else if (action.type === ADD_ID_TO_STORE_OBJECT_LIST_PROP) { + return Object.assign({}, state, { + [action.objectId]: Object.assign({}, state[action.objectId], { + [action.propName]: [ + ...state[action.objectId][action.propName], + action.id, + ], + }), + }) + } else if (action.type === REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP) { + return Object.assign({}, state, { + [action.objectId]: Object.assign({}, state[action.objectId], { + [action.propName]: state[action.objectId][action.propName].filter( + id => id !== action.id, + ), + }), + }) + } - return state; - }; + return state + } } diff --git a/frontend/src/reducers/simulation-list.js b/frontend/src/reducers/simulation-list.js index 9afa3586..78f3c4fe 100644 --- a/frontend/src/reducers/simulation-list.js +++ b/frontend/src/reducers/simulation-list.js @@ -1,34 +1,34 @@ -import { combineReducers } from "redux"; +import { combineReducers } from 'redux' import { - ADD_SIMULATION_SUCCEEDED, - DELETE_SIMULATION_SUCCEEDED, - SET_AUTH_VISIBILITY_FILTER -} from "../actions/simulations"; -import { FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED } from "../actions/users"; + ADD_SIMULATION_SUCCEEDED, + DELETE_SIMULATION_SUCCEEDED, + SET_AUTH_VISIBILITY_FILTER, +} from '../actions/simulations' +import { FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED } from '../actions/users' export function authorizationsOfCurrentUser(state = [], action) { - switch (action.type) { - case FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED: - return action.authorizationsOfCurrentUser; - case ADD_SIMULATION_SUCCEEDED: - return [...state, action.authorization]; - case DELETE_SIMULATION_SUCCEEDED: - return state.filter(authorization => authorization[1] !== action.id); - default: - return state; - } + switch (action.type) { + case FETCH_AUTHORIZATIONS_OF_CURRENT_USER_SUCCEEDED: + return action.authorizationsOfCurrentUser + case ADD_SIMULATION_SUCCEEDED: + return [...state, action.authorization] + case DELETE_SIMULATION_SUCCEEDED: + return state.filter(authorization => authorization[1] !== action.id) + default: + return state + } } -export function authVisibilityFilter(state = "SHOW_ALL", action) { - switch (action.type) { - case SET_AUTH_VISIBILITY_FILTER: - return action.filter; - default: - return state; - } +export function authVisibilityFilter(state = 'SHOW_ALL', action) { + switch (action.type) { + case SET_AUTH_VISIBILITY_FILTER: + return action.filter + default: + return state + } } export const simulationList = combineReducers({ - authorizationsOfCurrentUser, - authVisibilityFilter -}); + authorizationsOfCurrentUser, + authVisibilityFilter, +}) diff --git a/frontend/src/reducers/simulation-mode.js b/frontend/src/reducers/simulation-mode.js index 02041468..ea15ffa9 100644 --- a/frontend/src/reducers/simulation-mode.js +++ b/frontend/src/reducers/simulation-mode.js @@ -1,61 +1,58 @@ -import { OPEN_EXPERIMENT_SUCCEEDED } from "../actions/experiments"; -import { CHANGE_LOAD_METRIC } from "../actions/simulation/load-metric"; -import { SET_PLAYING } from "../actions/simulation/playback"; -import { - GO_TO_TICK, - SET_LAST_SIMULATED_TICK -} from "../actions/simulation/tick"; -import { OPEN_SIMULATION_SUCCEEDED } from "../actions/simulations"; +import { OPEN_EXPERIMENT_SUCCEEDED } from '../actions/experiments' +import { CHANGE_LOAD_METRIC } from '../actions/simulation/load-metric' +import { SET_PLAYING } from '../actions/simulation/playback' +import { GO_TO_TICK, SET_LAST_SIMULATED_TICK } from '../actions/simulation/tick' +import { OPEN_SIMULATION_SUCCEEDED } from '../actions/simulations' export function currentExperimentId(state = -1, action) { - switch (action.type) { - case OPEN_EXPERIMENT_SUCCEEDED: - return action.experimentId; - case OPEN_SIMULATION_SUCCEEDED: - return -1; - default: - return state; - } + switch (action.type) { + case OPEN_EXPERIMENT_SUCCEEDED: + return action.experimentId + case OPEN_SIMULATION_SUCCEEDED: + return -1 + default: + return state + } } export function currentTick(state = 0, action) { - switch (action.type) { - case GO_TO_TICK: - return action.tick; - case OPEN_EXPERIMENT_SUCCEEDED: - return 0; - default: - return state; - } + switch (action.type) { + case GO_TO_TICK: + return action.tick + case OPEN_EXPERIMENT_SUCCEEDED: + return 0 + default: + return state + } } -export function loadMetric(state = "LOAD", action) { - switch (action.type) { - case CHANGE_LOAD_METRIC: - return action.metric; - default: - return state; - } +export function loadMetric(state = 'LOAD', action) { + switch (action.type) { + case CHANGE_LOAD_METRIC: + return action.metric + default: + return state + } } export function isPlaying(state = false, action) { - switch (action.type) { - case SET_PLAYING: - return action.playing; - case OPEN_EXPERIMENT_SUCCEEDED: - return false; - default: - return state; - } + switch (action.type) { + case SET_PLAYING: + return action.playing + case OPEN_EXPERIMENT_SUCCEEDED: + return false + default: + return state + } } export function lastSimulatedTick(state = -1, action) { - switch (action.type) { - case SET_LAST_SIMULATED_TICK: - return action.tick; - case OPEN_EXPERIMENT_SUCCEEDED: - return -1; - default: - return state; - } + switch (action.type) { + case SET_LAST_SIMULATED_TICK: + return action.tick + case OPEN_EXPERIMENT_SUCCEEDED: + return -1 + default: + return state + } } diff --git a/frontend/src/reducers/states.js b/frontend/src/reducers/states.js index 793f7b7d..e4c2fd19 100644 --- a/frontend/src/reducers/states.js +++ b/frontend/src/reducers/states.js @@ -1,33 +1,33 @@ -import { combineReducers } from "redux"; -import { ADD_BATCH_TO_STATES } from "../actions/states"; +import { combineReducers } from 'redux' +import { ADD_BATCH_TO_STATES } from '../actions/states' export const states = combineReducers({ - task: objectStates("task"), - room: objectStates("room"), - rack: objectStates("rack"), - machine: objectStates("machine") -}); + task: objectStates('task'), + room: objectStates('room'), + rack: objectStates('rack'), + machine: objectStates('machine'), +}) function objectStates(type) { - return (state = {}, action) => { - if (action.objectType !== type) { - return state; - } + return (state = {}, action) => { + if (action.objectType !== type) { + return state + } - if (action.type === ADD_BATCH_TO_STATES) { - const batch = {}; - for (let i in action.objects) { - batch[action.objects[i].tick] = Object.assign( - {}, - state[action.objects[i].tick], - batch[action.objects[i].tick], - { [action.objects[i][action.objectType + "Id"]]: action.objects[i] } - ); - } + if (action.type === ADD_BATCH_TO_STATES) { + const batch = {} + for (let i in action.objects) { + batch[action.objects[i].tick] = Object.assign( + {}, + state[action.objects[i].tick], + batch[action.objects[i].tick], + { [action.objects[i][action.objectType + 'Id']]: action.objects[i] }, + ) + } - return Object.assign({}, state, batch); - } + return Object.assign({}, state, batch) + } - return state; - }; + return state + } } diff --git a/frontend/src/registerServiceWorker.js b/frontend/src/registerServiceWorker.js index 0fe89a23..32a116a6 100644 --- a/frontend/src/registerServiceWorker.js +++ b/frontend/src/registerServiceWorker.js @@ -9,100 +9,100 @@ // This link also includes instructions on opting out of this behavior. const isLocalhost = Boolean( - window.location.hostname === "localhost" || + window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. - window.location.hostname === "[::1]" || + window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/, + ), +) export default function register() { - if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 - return; - } + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location) + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return + } - window.addEventListener("load", () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js` - if (!isLocalhost) { - // Is not local host. Just register service worker - registerValidSW(swUrl); - } else { - // This is running on localhost. Lets check if a service worker still exists or not. - checkValidServiceWorker(swUrl); - } - }); - } + if (!isLocalhost) { + // Is not local host. Just register service worker + registerValidSW(swUrl) + } else { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl) + } + }) + } } function registerValidSW(swUrl) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - installingWorker.onstatechange = () => { - if (installingWorker.state === "installed") { - if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and - // the fresh content will have been added to the cache. - // It's the perfect time to display a "New content is - // available; please refresh." message in your web app. - console.log("New content is available; please refresh."); - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log("Content is cached for offline use."); + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.') + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.') + } + } + } } - } - }; - }; - }) - .catch(error => { - console.error("Error during service worker registration:", error); - }); + }) + .catch(error => { + console.error('Error during service worker registration:', error) + }) } function checkValidServiceWorker(swUrl) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - if ( - response.status === 404 || - response.headers.get("content-type").indexOf("javascript") === -1 - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl); - } - }) - .catch(() => { - console.log( - "No internet connection found. App is running in offline mode." - ); - }); + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload() + }) + }) + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl) + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.', + ) + }) } export function unregister() { - if ("serviceWorker" in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister() + }) + } } diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index f7523458..119cdb54 100644 --- a/frontend/src/routes/index.js +++ b/frontend/src/routes/index.js @@ -1,64 +1,64 @@ -import React from "react"; -import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom"; -import { userIsLoggedIn } from "../auth/index"; -import App from "../pages/App"; -import Experiments from "../pages/Experiments"; -import Home from "../pages/Home"; -import NotFound from "../pages/NotFound"; -import Profile from "../pages/Profile"; -import Simulations from "../pages/Simulations"; +import React from 'react' +import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom' +import { userIsLoggedIn } from '../auth/index' +import App from '../pages/App' +import Experiments from '../pages/Experiments' +import Home from '../pages/Home' +import NotFound from '../pages/NotFound' +import Profile from '../pages/Profile' +import Simulations from '../pages/Simulations' const ProtectedComponent = component => () => - userIsLoggedIn() ? component : <Redirect to="/" />; + userIsLoggedIn() ? component : <Redirect to="/"/> const AppComponent = ({ match }) => - userIsLoggedIn() ? ( - <App simulationId={parseInt(match.params.simulationId, 10)} /> - ) : ( - <Redirect to="/" /> - ); + userIsLoggedIn() ? ( + <App simulationId={parseInt(match.params.simulationId, 10)}/> + ) : ( + <Redirect to="/"/> + ) const ExperimentsComponent = ({ match }) => - userIsLoggedIn() ? ( - <Experiments simulationId={parseInt(match.params.simulationId, 10)} /> - ) : ( - <Redirect to="/" /> - ); + userIsLoggedIn() ? ( + <Experiments simulationId={parseInt(match.params.simulationId, 10)}/> + ) : ( + <Redirect to="/"/> + ) const SimulationComponent = ({ match }) => - userIsLoggedIn() ? ( - <App - simulationId={parseInt(match.params.simulationId, 10)} - inSimulation={true} - experimentId={parseInt(match.params.experimentId, 10)} - /> - ) : ( - <Redirect to="/" /> - ); + userIsLoggedIn() ? ( + <App + simulationId={parseInt(match.params.simulationId, 10)} + inSimulation={true} + experimentId={parseInt(match.params.experimentId, 10)} + /> + ) : ( + <Redirect to="/"/> + ) const Routes = () => ( - <BrowserRouter> - <Switch> - <Route exact path="/" component={Home} /> - <Route - exact - path="/simulations" - render={ProtectedComponent(<Simulations />)} - /> - <Route exact path="/simulations/:simulationId" component={AppComponent} /> - <Route - exact - path="/simulations/:simulationId/experiments" - component={ExperimentsComponent} - /> - <Route - exact - path="/simulations/:simulationId/experiments/:experimentId" - component={SimulationComponent} - /> - <Route exact path="/profile" render={ProtectedComponent(<Profile />)} /> - <Route path="/*" component={NotFound} /> - </Switch> - </BrowserRouter> -); + <BrowserRouter> + <Switch> + <Route exact path="/" component={Home}/> + <Route + exact + path="/simulations" + render={ProtectedComponent(<Simulations/>)} + /> + <Route exact path="/simulations/:simulationId" component={AppComponent}/> + <Route + exact + path="/simulations/:simulationId/experiments" + component={ExperimentsComponent} + /> + <Route + exact + path="/simulations/:simulationId/experiments/:experimentId" + component={SimulationComponent} + /> + <Route exact path="/profile" render={ProtectedComponent(<Profile/>)}/> + <Route path="/*" component={NotFound}/> + </Switch> + </BrowserRouter> +) -export default Routes; +export default Routes diff --git a/frontend/src/sagas/experiments.js b/frontend/src/sagas/experiments.js index d9c410f7..a361759b 100644 --- a/frontend/src/sagas/experiments.js +++ b/frontend/src/sagas/experiments.js @@ -1,183 +1,175 @@ -import { call, put, select, delay } from "redux-saga/effects"; -import { addPropToStoreObject, addToStore } from "../actions/objects"; -import { setLastSimulatedTick } from "../actions/simulation/tick"; -import { addBatchToStates } from "../actions/states"; +import { call, delay, put, select } from 'redux-saga/effects' +import { addPropToStoreObject, addToStore } from '../actions/objects' +import { setLastSimulatedTick } from '../actions/simulation/tick' +import { addBatchToStates } from '../actions/states' import { - deleteExperiment, - getAllMachineStates, - getAllRackStates, - getAllRoomStates, - getAllTaskStates, - getExperiment, - getLastSimulatedTick -} from "../api/routes/experiments"; -import { getTasksOfJob } from "../api/routes/jobs"; -import { - addExperiment, - getExperimentsOfSimulation, - getSimulation -} from "../api/routes/simulations"; -import { getJobsOfTrace } from "../api/routes/traces"; -import { - fetchAndStoreAllSchedulers, - fetchAndStoreAllTraces, - fetchAndStorePathsOfSimulation -} from "./objects"; -import { fetchAllDatacentersOfExperiment } from "./topology"; + deleteExperiment, + getAllMachineStates, + getAllRackStates, + getAllRoomStates, + getAllTaskStates, + getExperiment, + getLastSimulatedTick, +} from '../api/routes/experiments' +import { getTasksOfJob } from '../api/routes/jobs' +import { addExperiment, getExperimentsOfSimulation, getSimulation } from '../api/routes/simulations' +import { getJobsOfTrace } from '../api/routes/traces' +import { fetchAndStoreAllSchedulers, fetchAndStoreAllTraces, fetchAndStorePathsOfSimulation } from './objects' +import { fetchAllDatacentersOfExperiment } from './topology' export function* onOpenExperimentSucceeded(action) { - try { - const simulation = yield call(getSimulation, action.simulationId); - yield put(addToStore("simulation", simulation)); + try { + const simulation = yield call(getSimulation, action.simulationId) + yield put(addToStore('simulation', simulation)) - const experiment = yield call(getExperiment, action.experimentId); - yield put(addToStore("experiment", experiment)); + const experiment = yield call(getExperiment, action.experimentId) + yield put(addToStore('experiment', experiment)) - yield fetchExperimentSpecifications(); - yield fetchWorkloadOfTrace(experiment.traceId); + yield fetchExperimentSpecifications() + yield fetchWorkloadOfTrace(experiment.traceId) - yield fetchAllDatacentersOfExperiment(experiment); - yield startStateFetchLoop(action.experimentId); - } catch (error) { - console.error(error); - } + yield fetchAllDatacentersOfExperiment(experiment) + yield startStateFetchLoop(action.experimentId) + } catch (error) { + console.error(error) + } } function* startStateFetchLoop(experimentId) { - try { - while ((yield select(state => state.currentExperimentId)) !== -1) { - const lastSimulatedTick = (yield call(getLastSimulatedTick, experimentId)) - .lastSimulatedTick; - if ( - lastSimulatedTick !== (yield select(state => state.lastSimulatedTick)) - ) { - yield put(setLastSimulatedTick(lastSimulatedTick)); - - const taskStates = yield call(getAllTaskStates, experimentId); - const machineStates = yield call(getAllMachineStates, experimentId); - const rackStates = yield call(getAllRackStates, experimentId); - const roomStates = yield call(getAllRoomStates, experimentId); - - yield put(addBatchToStates("task", taskStates)); - yield put(addBatchToStates("machine", machineStates)); - yield put(addBatchToStates("rack", rackStates)); - yield put(addBatchToStates("room", roomStates)); - - yield delay(5000); - } else { - yield delay(10000); - } + try { + while ((yield select(state => state.currentExperimentId)) !== -1) { + const lastSimulatedTick = (yield call(getLastSimulatedTick, experimentId)) + .lastSimulatedTick + if ( + lastSimulatedTick !== (yield select(state => state.lastSimulatedTick)) + ) { + yield put(setLastSimulatedTick(lastSimulatedTick)) + + const taskStates = yield call(getAllTaskStates, experimentId) + const machineStates = yield call(getAllMachineStates, experimentId) + const rackStates = yield call(getAllRackStates, experimentId) + const roomStates = yield call(getAllRoomStates, experimentId) + + yield put(addBatchToStates('task', taskStates)) + yield put(addBatchToStates('machine', machineStates)) + yield put(addBatchToStates('rack', rackStates)) + yield put(addBatchToStates('room', roomStates)) + + yield delay(5000) + } else { + yield delay(10000) + } + } + } catch (error) { + console.error(error) } - } catch (error) { - console.error(error); - } } export function* onFetchExperimentsOfSimulation() { - try { - const currentSimulationId = yield select( - state => state.currentSimulationId - ); - - yield fetchExperimentSpecifications(); - const experiments = yield call( - getExperimentsOfSimulation, - currentSimulationId - ); - for (let i in experiments) { - yield put(addToStore("experiment", experiments[i])); + try { + const currentSimulationId = yield select( + state => state.currentSimulationId, + ) + + yield fetchExperimentSpecifications() + const experiments = yield call( + getExperimentsOfSimulation, + currentSimulationId, + ) + for (let i in experiments) { + yield put(addToStore('experiment', experiments[i])) + } + yield put( + addPropToStoreObject('simulation', currentSimulationId, { + experimentIds: experiments.map(experiment => experiment.id), + }), + ) + } catch (error) { + console.error(error) } - yield put( - addPropToStoreObject("simulation", currentSimulationId, { - experimentIds: experiments.map(experiment => experiment.id) - }) - ); - } catch (error) { - console.error(error); - } } function* fetchExperimentSpecifications() { - try { - const currentSimulationId = yield select( - state => state.currentSimulationId - ); - yield fetchAndStorePathsOfSimulation(currentSimulationId); - yield fetchAndStoreAllTraces(); - yield fetchAndStoreAllSchedulers(); - } catch (error) { - console.error(error); - } + try { + const currentSimulationId = yield select( + state => state.currentSimulationId, + ) + yield fetchAndStorePathsOfSimulation(currentSimulationId) + yield fetchAndStoreAllTraces() + yield fetchAndStoreAllSchedulers() + } catch (error) { + console.error(error) + } } function* fetchWorkloadOfTrace(traceId) { - try { - const jobs = yield call(getJobsOfTrace, traceId); - for (let i in jobs) { - const job = jobs[i]; - const tasks = yield call(getTasksOfJob, job.id); - job.taskIds = tasks.map(task => task.id); - for (let j in tasks) { - yield put(addToStore("task", tasks[j])); - } - yield put(addToStore("job", job)); + try { + const jobs = yield call(getJobsOfTrace, traceId) + for (let i in jobs) { + const job = jobs[i] + const tasks = yield call(getTasksOfJob, job.id) + job.taskIds = tasks.map(task => task.id) + for (let j in tasks) { + yield put(addToStore('task', tasks[j])) + } + yield put(addToStore('job', job)) + } + yield put( + addPropToStoreObject('trace', traceId, { + jobIds: jobs.map(job => job.id), + }), + ) + } catch (error) { + console.error(error) } - yield put( - addPropToStoreObject("trace", traceId, { - jobIds: jobs.map(job => job.id) - }) - ); - } catch (error) { - console.error(error); - } } export function* onAddExperiment(action) { - try { - const currentSimulationId = yield select( - state => state.currentSimulationId - ); - - const experiment = yield call( - addExperiment, - currentSimulationId, - Object.assign({}, action.experiment, { - id: -1, - simulationId: currentSimulationId - }) - ); - yield put(addToStore("experiment", experiment)); - - const experimentIds = yield select( - state => state.objects.simulation[currentSimulationId].experimentIds - ); - yield put( - addPropToStoreObject("simulation", currentSimulationId, { - experimentIds: experimentIds.concat([experiment.id]) - }) - ); - } catch (error) { - console.error(error); - } + try { + const currentSimulationId = yield select( + state => state.currentSimulationId, + ) + + const experiment = yield call( + addExperiment, + currentSimulationId, + Object.assign({}, action.experiment, { + id: -1, + simulationId: currentSimulationId, + }), + ) + yield put(addToStore('experiment', experiment)) + + const experimentIds = yield select( + state => state.objects.simulation[currentSimulationId].experimentIds, + ) + yield put( + addPropToStoreObject('simulation', currentSimulationId, { + experimentIds: experimentIds.concat([experiment.id]), + }), + ) + } catch (error) { + console.error(error) + } } export function* onDeleteExperiment(action) { - try { - yield call(deleteExperiment, action.id); - - const currentSimulationId = yield select( - state => state.currentSimulationId - ); - const experimentIds = yield select( - state => state.objects.simulation[currentSimulationId].experimentIds - ); - - yield put( - addPropToStoreObject("simulation", currentSimulationId, { - experimentIds: experimentIds.filter(id => id !== action.id) - }) - ); - } catch (error) { - console.error(error); - } + try { + yield call(deleteExperiment, action.id) + + const currentSimulationId = yield select( + state => state.currentSimulationId, + ) + const experimentIds = yield select( + state => state.objects.simulation[currentSimulationId].experimentIds, + ) + + yield put( + addPropToStoreObject('simulation', currentSimulationId, { + experimentIds: experimentIds.filter(id => id !== action.id), + }), + ) + } catch (error) { + console.error(error) + } } diff --git a/frontend/src/sagas/index.js b/frontend/src/sagas/index.js index 56c8f09b..d1de906f 100644 --- a/frontend/src/sagas/index.js +++ b/frontend/src/sagas/index.js @@ -1,106 +1,80 @@ -import { takeEvery } from "redux-saga/effects"; -import { LOG_IN } from "../actions/auth"; +import { takeEvery } from 'redux-saga/effects' +import { LOG_IN } from '../actions/auth' import { - ADD_EXPERIMENT, - DELETE_EXPERIMENT, - FETCH_EXPERIMENTS_OF_SIMULATION, - OPEN_EXPERIMENT_SUCCEEDED -} from "../actions/experiments"; -import { - ADD_SIMULATION, - DELETE_SIMULATION, - OPEN_SIMULATION_SUCCEEDED -} from "../actions/simulations"; -import { - ADD_TILE, - CANCEL_NEW_ROOM_CONSTRUCTION, - DELETE_TILE, - START_NEW_ROOM_CONSTRUCTION -} from "../actions/topology/building"; -import { - ADD_UNIT, - DELETE_MACHINE, - DELETE_UNIT -} from "../actions/topology/machine"; -import { - ADD_MACHINE, - DELETE_RACK, - EDIT_RACK_NAME -} from "../actions/topology/rack"; -import { - ADD_RACK_TO_TILE, - DELETE_ROOM, - EDIT_ROOM_NAME -} from "../actions/topology/room"; -import { - DELETE_CURRENT_USER, - FETCH_AUTHORIZATIONS_OF_CURRENT_USER -} from "../actions/users"; -import { - onAddExperiment, - onDeleteExperiment, - onFetchExperimentsOfSimulation, - onOpenExperimentSucceeded -} from "./experiments"; -import { onDeleteCurrentUser } from "./profile"; + ADD_EXPERIMENT, + DELETE_EXPERIMENT, + FETCH_EXPERIMENTS_OF_SIMULATION, + OPEN_EXPERIMENT_SUCCEEDED, +} from '../actions/experiments' +import { ADD_SIMULATION, DELETE_SIMULATION, OPEN_SIMULATION_SUCCEEDED } from '../actions/simulations' import { - onOpenSimulationSucceeded, - onSimulationAdd, - onSimulationDelete -} from "./simulations"; + ADD_TILE, + CANCEL_NEW_ROOM_CONSTRUCTION, + DELETE_TILE, + START_NEW_ROOM_CONSTRUCTION, +} from '../actions/topology/building' +import { ADD_UNIT, DELETE_MACHINE, DELETE_UNIT } from '../actions/topology/machine' +import { ADD_MACHINE, DELETE_RACK, EDIT_RACK_NAME } from '../actions/topology/rack' +import { ADD_RACK_TO_TILE, DELETE_ROOM, EDIT_ROOM_NAME } from '../actions/topology/room' +import { DELETE_CURRENT_USER, FETCH_AUTHORIZATIONS_OF_CURRENT_USER } from '../actions/users' import { - onAddMachine, - onAddRackToTile, - onAddTile, - onAddUnit, - onCancelNewRoomConstruction, - onDeleteMachine, - onDeleteRack, - onDeleteRoom, - onDeleteTile, - onDeleteUnit, - onEditRackName, - onEditRoomName, - onStartNewRoomConstruction -} from "./topology"; + onAddExperiment, + onDeleteExperiment, + onFetchExperimentsOfSimulation, + onOpenExperimentSucceeded, +} from './experiments' +import { onDeleteCurrentUser } from './profile' +import { onOpenSimulationSucceeded, onSimulationAdd, onSimulationDelete } from './simulations' import { - onFetchAuthorizationsOfCurrentUser, - onFetchLoggedInUser -} from "./users"; + onAddMachine, + onAddRackToTile, + onAddTile, + onAddUnit, + onCancelNewRoomConstruction, + onDeleteMachine, + onDeleteRack, + onDeleteRoom, + onDeleteTile, + onDeleteUnit, + onEditRackName, + onEditRoomName, + onStartNewRoomConstruction, +} from './topology' +import { onFetchAuthorizationsOfCurrentUser, onFetchLoggedInUser } from './users' export default function* rootSaga() { - yield takeEvery(LOG_IN, onFetchLoggedInUser); + yield takeEvery(LOG_IN, onFetchLoggedInUser) - yield takeEvery( - FETCH_AUTHORIZATIONS_OF_CURRENT_USER, - onFetchAuthorizationsOfCurrentUser - ); - yield takeEvery(ADD_SIMULATION, onSimulationAdd); - yield takeEvery(DELETE_SIMULATION, onSimulationDelete); + yield takeEvery( + FETCH_AUTHORIZATIONS_OF_CURRENT_USER, + onFetchAuthorizationsOfCurrentUser, + ) + yield takeEvery(ADD_SIMULATION, onSimulationAdd) + yield takeEvery(DELETE_SIMULATION, onSimulationDelete) - yield takeEvery(DELETE_CURRENT_USER, onDeleteCurrentUser); + yield takeEvery(DELETE_CURRENT_USER, onDeleteCurrentUser) - yield takeEvery(OPEN_SIMULATION_SUCCEEDED, onOpenSimulationSucceeded); - yield takeEvery(OPEN_EXPERIMENT_SUCCEEDED, onOpenExperimentSucceeded); + yield takeEvery(OPEN_SIMULATION_SUCCEEDED, onOpenSimulationSucceeded) + yield takeEvery(OPEN_EXPERIMENT_SUCCEEDED, onOpenExperimentSucceeded) - yield takeEvery(START_NEW_ROOM_CONSTRUCTION, onStartNewRoomConstruction); - yield takeEvery(CANCEL_NEW_ROOM_CONSTRUCTION, onCancelNewRoomConstruction); - yield takeEvery(ADD_TILE, onAddTile); - yield takeEvery(DELETE_TILE, onDeleteTile); - yield takeEvery(EDIT_ROOM_NAME, onEditRoomName); - yield takeEvery(DELETE_ROOM, onDeleteRoom); - yield takeEvery(EDIT_RACK_NAME, onEditRackName); - yield takeEvery(DELETE_RACK, onDeleteRack); - yield takeEvery(ADD_RACK_TO_TILE, onAddRackToTile); - yield takeEvery(ADD_MACHINE, onAddMachine); - yield takeEvery(DELETE_MACHINE, onDeleteMachine); - yield takeEvery(ADD_UNIT, onAddUnit); - yield takeEvery(DELETE_UNIT, onDeleteUnit); + yield takeEvery(START_NEW_ROOM_CONSTRUCTION, onStartNewRoomConstruction) + yield takeEvery(CANCEL_NEW_ROOM_CONSTRUCTION, onCancelNewRoomConstruction) + yield takeEvery(ADD_TILE, onAddTile) + yield takeEvery(DELETE_TILE, onDeleteTile) + yield takeEvery(EDIT_ROOM_NAME, onEditRoomName) + yield takeEvery(DELETE_ROOM, onDeleteRoom) + yield takeEvery(EDIT_RACK_NAME, onEditRackName) + yield takeEvery(DELETE_RACK, onDeleteRack) + yield takeEvery(ADD_RACK_TO_TILE, onAddRackToTile) + yield takeEvery(ADD_MACHINE, onAddMachine) + yield takeEvery(DELETE_MACHINE, onDeleteMachine) + yield takeEvery(ADD_UNIT, onAddUnit) + yield takeEvery(DELETE_UNIT, onDeleteUnit) - yield takeEvery( - FETCH_EXPERIMENTS_OF_SIMULATION, - onFetchExperimentsOfSimulation - ); - yield takeEvery(ADD_EXPERIMENT, onAddExperiment); - yield takeEvery(DELETE_EXPERIMENT, onDeleteExperiment); + yield takeEvery( + FETCH_EXPERIMENTS_OF_SIMULATION, + onFetchExperimentsOfSimulation, + ) + yield takeEvery(ADD_EXPERIMENT, onAddExperiment) + yield takeEvery(DELETE_EXPERIMENT, onDeleteExperiment) } diff --git a/frontend/src/sagas/objects.js b/frontend/src/sagas/objects.js index 3cfd43a6..faa75be2 100644 --- a/frontend/src/sagas/objects.js +++ b/frontend/src/sagas/objects.js @@ -1,140 +1,140 @@ -import { call, put, select } from "redux-saga/effects"; -import { addToStore } from "../actions/objects"; -import { getDatacenter, getRoomsOfDatacenter } from "../api/routes/datacenters"; -import { getPath, getSectionsOfPath } from "../api/routes/paths"; -import { getTilesOfRoom } from "../api/routes/rooms"; -import { getAllSchedulers } from "../api/routes/schedulers"; -import { getSection } from "../api/routes/sections"; -import { getPathsOfSimulation, getSimulation } from "../api/routes/simulations"; +import { call, put, select } from 'redux-saga/effects' +import { addToStore } from '../actions/objects' +import { getDatacenter, getRoomsOfDatacenter } from '../api/routes/datacenters' +import { getPath, getSectionsOfPath } from '../api/routes/paths' +import { getTilesOfRoom } from '../api/routes/rooms' +import { getAllSchedulers } from '../api/routes/schedulers' +import { getSection } from '../api/routes/sections' +import { getPathsOfSimulation, getSimulation } from '../api/routes/simulations' import { - getAllCPUs, - getAllGPUs, - getAllMemories, - getAllStorages, - getCoolingItem, - getCPU, - getFailureModel, - getGPU, - getMemory, - getPSU, - getStorage -} from "../api/routes/specifications"; -import { getMachinesOfRackByTile, getRackByTile } from "../api/routes/tiles"; -import { getAllTraces } from "../api/routes/traces"; -import { getUser } from "../api/routes/users"; + getAllCPUs, + getAllGPUs, + getAllMemories, + getAllStorages, + getCoolingItem, + getCPU, + getFailureModel, + getGPU, + getMemory, + getPSU, + getStorage, +} from '../api/routes/specifications' +import { getMachinesOfRackByTile, getRackByTile } from '../api/routes/tiles' +import { getAllTraces } from '../api/routes/traces' +import { getUser } from '../api/routes/users' export const OBJECT_SELECTORS = { - simulation: state => state.objects.simulation, - user: state => state.objects.user, - authorization: state => state.objects.authorization, - failureModel: state => state.objects.failureModel, - cpu: state => state.objects.cpu, - gpu: state => state.objects.gpu, - memory: state => state.objects.memory, - storage: state => state.objects.storage, - machine: state => state.objects.machine, - rack: state => state.objects.rack, - coolingItem: state => state.objects.coolingItem, - psu: state => state.objects.psu, - tile: state => state.objects.tile, - room: state => state.objects.room, - datacenter: state => state.objects.datacenter, - section: state => state.objects.section, - path: state => state.objects.path -}; + simulation: state => state.objects.simulation, + user: state => state.objects.user, + authorization: state => state.objects.authorization, + failureModel: state => state.objects.failureModel, + cpu: state => state.objects.cpu, + gpu: state => state.objects.gpu, + memory: state => state.objects.memory, + storage: state => state.objects.storage, + machine: state => state.objects.machine, + rack: state => state.objects.rack, + coolingItem: state => state.objects.coolingItem, + psu: state => state.objects.psu, + tile: state => state.objects.tile, + room: state => state.objects.room, + datacenter: state => state.objects.datacenter, + section: state => state.objects.section, + path: state => state.objects.path, +} function* fetchAndStoreObject(objectType, id, apiCall) { - const objectStore = yield select(OBJECT_SELECTORS[objectType]); - let object = objectStore[id]; - if (!object) { - object = yield apiCall; - yield put(addToStore(objectType, object)); - } - return object; + const objectStore = yield select(OBJECT_SELECTORS[objectType]) + let object = objectStore[id] + if (!object) { + object = yield apiCall + yield put(addToStore(objectType, object)) + } + return object } function* fetchAndStoreObjects(objectType, apiCall) { - const objects = yield apiCall; - for (let index in objects) { - yield put(addToStore(objectType, objects[index])); - } - return objects; + const objects = yield apiCall + for (let index in objects) { + yield put(addToStore(objectType, objects[index])) + } + return objects } export const fetchAndStoreSimulation = id => - fetchAndStoreObject("simulation", id, call(getSimulation, id)); + fetchAndStoreObject('simulation', id, call(getSimulation, id)) export const fetchAndStoreUser = id => - fetchAndStoreObject("user", id, call(getUser, id)); + fetchAndStoreObject('user', id, call(getUser, id)) export const fetchAndStoreFailureModel = id => - fetchAndStoreObject("failureModel", id, call(getFailureModel, id)); + fetchAndStoreObject('failureModel', id, call(getFailureModel, id)) export const fetchAndStoreAllCPUs = () => - fetchAndStoreObjects("cpu", call(getAllCPUs)); + fetchAndStoreObjects('cpu', call(getAllCPUs)) export const fetchAndStoreCPU = id => - fetchAndStoreObject("cpu", id, call(getCPU, id)); + fetchAndStoreObject('cpu', id, call(getCPU, id)) export const fetchAndStoreAllGPUs = () => - fetchAndStoreObjects("gpu", call(getAllGPUs)); + fetchAndStoreObjects('gpu', call(getAllGPUs)) export const fetchAndStoreGPU = id => - fetchAndStoreObject("gpu", id, call(getGPU, id)); + fetchAndStoreObject('gpu', id, call(getGPU, id)) export const fetchAndStoreAllMemories = () => - fetchAndStoreObjects("memory", call(getAllMemories)); + fetchAndStoreObjects('memory', call(getAllMemories)) export const fetchAndStoreMemory = id => - fetchAndStoreObject("memory", id, call(getMemory, id)); + fetchAndStoreObject('memory', id, call(getMemory, id)) export const fetchAndStoreAllStorages = () => - fetchAndStoreObjects("storage", call(getAllStorages)); + fetchAndStoreObjects('storage', call(getAllStorages)) export const fetchAndStoreStorage = id => - fetchAndStoreObject("storage", id, call(getStorage, id)); + fetchAndStoreObject('storage', id, call(getStorage, id)) export const fetchAndStoreMachinesOfTile = tileId => - fetchAndStoreObjects("machine", call(getMachinesOfRackByTile, tileId)); + fetchAndStoreObjects('machine', call(getMachinesOfRackByTile, tileId)) export const fetchAndStoreRackOnTile = (id, tileId) => - fetchAndStoreObject("rack", id, call(getRackByTile, tileId)); + fetchAndStoreObject('rack', id, call(getRackByTile, tileId)) export const fetchAndStoreCoolingItem = id => - fetchAndStoreObject("coolingItem", id, call(getCoolingItem, id)); + fetchAndStoreObject('coolingItem', id, call(getCoolingItem, id)) export const fetchAndStorePSU = id => - fetchAndStoreObject("psu", id, call(getPSU, id)); + fetchAndStoreObject('psu', id, call(getPSU, id)) export const fetchAndStoreTilesOfRoom = roomId => - fetchAndStoreObjects("tile", call(getTilesOfRoom, roomId)); + fetchAndStoreObjects('tile', call(getTilesOfRoom, roomId)) export const fetchAndStoreRoomsOfDatacenter = datacenterId => - fetchAndStoreObjects("room", call(getRoomsOfDatacenter, datacenterId)); + fetchAndStoreObjects('room', call(getRoomsOfDatacenter, datacenterId)) export const fetchAndStoreDatacenter = id => - fetchAndStoreObject("datacenter", id, call(getDatacenter, id)); + fetchAndStoreObject('datacenter', id, call(getDatacenter, id)) export const fetchAndStoreSection = id => - fetchAndStoreObject("section", id, call(getSection, id)); + fetchAndStoreObject('section', id, call(getSection, id)) export const fetchAndStoreSectionsOfPath = pathId => - fetchAndStoreObjects("section", call(getSectionsOfPath, pathId)); + fetchAndStoreObjects('section', call(getSectionsOfPath, pathId)) export const fetchAndStorePath = id => - fetchAndStoreObject("path", id, call(getPath, id)); + fetchAndStoreObject('path', id, call(getPath, id)) export const fetchAndStorePathsOfSimulation = simulationId => - fetchAndStoreObjects("path", call(getPathsOfSimulation, simulationId)); + fetchAndStoreObjects('path', call(getPathsOfSimulation, simulationId)) export const fetchAndStoreAllTraces = () => - fetchAndStoreObjects("trace", call(getAllTraces)); - -export const fetchAndStoreAllSchedulers = function*() { - const objects = yield call(getAllSchedulers); - for (let index in objects) { - objects[index].id = objects[index].name; - yield put(addToStore("scheduler", objects[index])); - } - return objects; -}; + fetchAndStoreObjects('trace', call(getAllTraces)) + +export const fetchAndStoreAllSchedulers = function* () { + const objects = yield call(getAllSchedulers) + for (let index in objects) { + objects[index].id = objects[index].name + yield put(addToStore('scheduler', objects[index])) + } + return objects +} diff --git a/frontend/src/sagas/profile.js b/frontend/src/sagas/profile.js index 31d4dd4f..e914ba56 100644 --- a/frontend/src/sagas/profile.js +++ b/frontend/src/sagas/profile.js @@ -1,12 +1,12 @@ -import { call, put } from "redux-saga/effects"; -import { deleteCurrentUserSucceeded } from "../actions/users"; -import { deleteUser } from "../api/routes/users"; +import { call, put } from 'redux-saga/effects' +import { deleteCurrentUserSucceeded } from '../actions/users' +import { deleteUser } from '../api/routes/users' export function* onDeleteCurrentUser(action) { - try { - yield call(deleteUser, action.userId); - yield put(deleteCurrentUserSucceeded()); - } catch (error) { - console.error(error); - } + try { + yield call(deleteUser, action.userId) + yield put(deleteCurrentUserSucceeded()) + } catch (error) { + console.error(error) + } } diff --git a/frontend/src/sagas/simulations.js b/frontend/src/sagas/simulations.js index 9df4e4b5..9e914b85 100644 --- a/frontend/src/sagas/simulations.js +++ b/frontend/src/sagas/simulations.js @@ -1,51 +1,44 @@ -import { call, put } from "redux-saga/effects"; -import { addToStore } from "../actions/objects"; -import { - addSimulationSucceeded, - deleteSimulationSucceeded -} from "../actions/simulations"; -import { - addSimulation, - deleteSimulation, - getSimulation -} from "../api/routes/simulations"; -import { fetchLatestDatacenter } from "./topology"; +import { call, put } from 'redux-saga/effects' +import { addToStore } from '../actions/objects' +import { addSimulationSucceeded, deleteSimulationSucceeded } from '../actions/simulations' +import { addSimulation, deleteSimulation, getSimulation } from '../api/routes/simulations' +import { fetchLatestDatacenter } from './topology' export function* onOpenSimulationSucceeded(action) { - try { - const simulation = yield call(getSimulation, action.id); - yield put(addToStore("simulation", simulation)); + try { + const simulation = yield call(getSimulation, action.id) + yield put(addToStore('simulation', simulation)) - yield fetchLatestDatacenter(action.id); - } catch (error) { - console.error(error); - } + yield fetchLatestDatacenter(action.id) + } catch (error) { + console.error(error) + } } export function* onSimulationAdd(action) { - try { - const simulation = yield call(addSimulation, { name: action.name }); - yield put(addToStore("simulation", simulation)); + try { + const simulation = yield call(addSimulation, { name: action.name }) + yield put(addToStore('simulation', simulation)) - const authorization = { - simulationId: simulation.id, - userId: action.userId, - authorizationLevel: "OWN" - }; - yield put(addToStore("authorization", authorization)); - yield put( - addSimulationSucceeded([authorization.userId, authorization.simulationId]) - ); - } catch (error) { - console.error(error); - } + const authorization = { + simulationId: simulation.id, + userId: action.userId, + authorizationLevel: 'OWN', + } + yield put(addToStore('authorization', authorization)) + yield put( + addSimulationSucceeded([authorization.userId, authorization.simulationId]), + ) + } catch (error) { + console.error(error) + } } export function* onSimulationDelete(action) { - try { - yield call(deleteSimulation, action.id); - yield put(deleteSimulationSucceeded(action.id)); - } catch (error) { - console.error(error); - } + try { + yield call(deleteSimulation, action.id) + yield put(deleteSimulationSucceeded(action.id)) + } catch (error) { + console.error(error) + } } diff --git a/frontend/src/sagas/topology.js b/frontend/src/sagas/topology.js index 13b4ed17..b38358a4 100644 --- a/frontend/src/sagas/topology.js +++ b/frontend/src/sagas/topology.js @@ -1,434 +1,434 @@ -import { call, put, select } from "redux-saga/effects"; -import { goDownOneInteractionLevel } from "../actions/interaction-level"; +import { call, put, select } from 'redux-saga/effects' +import { goDownOneInteractionLevel } from '../actions/interaction-level' import { - addIdToStoreObjectListProp, - addPropToStoreObject, - addToStore, - removeIdFromStoreObjectListProp -} from "../actions/objects"; + addIdToStoreObjectListProp, + addPropToStoreObject, + addToStore, + removeIdFromStoreObjectListProp, +} from '../actions/objects' import { - cancelNewRoomConstructionSucceeded, - setCurrentDatacenter, - startNewRoomConstructionSucceeded -} from "../actions/topology/building"; -import { addRoomToDatacenter } from "../api/routes/datacenters"; -import { addTileToRoom, deleteRoom, updateRoom } from "../api/routes/rooms"; + cancelNewRoomConstructionSucceeded, + setCurrentDatacenter, + startNewRoomConstructionSucceeded, +} from '../actions/topology/building' +import { addRoomToDatacenter } from '../api/routes/datacenters' +import { addTileToRoom, deleteRoom, updateRoom } from '../api/routes/rooms' import { - addMachineToRackOnTile, - addRackToTile, - deleteMachineInRackOnTile, - deleteRackFromTile, - deleteTile, - updateMachineInRackOnTile, - updateRackOnTile -} from "../api/routes/tiles"; + addMachineToRackOnTile, + addRackToTile, + deleteMachineInRackOnTile, + deleteRackFromTile, + deleteTile, + updateMachineInRackOnTile, + updateRackOnTile, +} from '../api/routes/tiles' import { - DEFAULT_RACK_POWER_CAPACITY, - DEFAULT_RACK_SLOT_CAPACITY, - MAX_NUM_UNITS_PER_MACHINE -} from "../components/app/map/MapConstants"; + DEFAULT_RACK_POWER_CAPACITY, + DEFAULT_RACK_SLOT_CAPACITY, + MAX_NUM_UNITS_PER_MACHINE, +} from '../components/app/map/MapConstants' import { - fetchAndStoreAllCPUs, - fetchAndStoreAllGPUs, - fetchAndStoreAllMemories, - fetchAndStoreAllStorages, - fetchAndStoreCoolingItem, - fetchAndStoreCPU, - fetchAndStoreDatacenter, - fetchAndStoreGPU, - fetchAndStoreMachinesOfTile, - fetchAndStoreMemory, - fetchAndStorePath, - fetchAndStorePathsOfSimulation, - fetchAndStorePSU, - fetchAndStoreRackOnTile, - fetchAndStoreRoomsOfDatacenter, - fetchAndStoreSectionsOfPath, - fetchAndStoreStorage, - fetchAndStoreTilesOfRoom -} from "./objects"; + fetchAndStoreAllCPUs, + fetchAndStoreAllGPUs, + fetchAndStoreAllMemories, + fetchAndStoreAllStorages, + fetchAndStoreCoolingItem, + fetchAndStoreCPU, + fetchAndStoreDatacenter, + fetchAndStoreGPU, + fetchAndStoreMachinesOfTile, + fetchAndStoreMemory, + fetchAndStorePath, + fetchAndStorePathsOfSimulation, + fetchAndStorePSU, + fetchAndStoreRackOnTile, + fetchAndStoreRoomsOfDatacenter, + fetchAndStoreSectionsOfPath, + fetchAndStoreStorage, + fetchAndStoreTilesOfRoom, +} from './objects' export function* fetchLatestDatacenter(simulationId) { - try { - const paths = yield fetchAndStorePathsOfSimulation(simulationId); - const latestPath = paths[paths.length - 1]; - const sections = yield fetchAndStoreSectionsOfPath(latestPath.id); - const latestSection = sections[sections.length - 1]; - yield fetchAllUnitSpecifications(); - yield fetchDatacenter(latestSection.datacenterId); - yield put(setCurrentDatacenter(latestSection.datacenterId)); - } catch (error) { - console.error(error); - } + try { + const paths = yield fetchAndStorePathsOfSimulation(simulationId) + const latestPath = paths[paths.length - 1] + const sections = yield fetchAndStoreSectionsOfPath(latestPath.id) + const latestSection = sections[sections.length - 1] + yield fetchAllUnitSpecifications() + yield fetchDatacenter(latestSection.datacenterId) + yield put(setCurrentDatacenter(latestSection.datacenterId)) + } catch (error) { + console.error(error) + } } export function* fetchAllDatacentersOfExperiment(experiment) { - try { - const path = yield fetchAndStorePath(experiment.pathId); - const sections = yield fetchAndStoreSectionsOfPath(path.id); - path.sectionIds = sections.map(section => section.id); - yield fetchAllUnitSpecifications(); - - for (let i in sections) { - yield fetchDatacenter(sections[i].datacenterId); + try { + const path = yield fetchAndStorePath(experiment.pathId) + const sections = yield fetchAndStoreSectionsOfPath(path.id) + path.sectionIds = sections.map(section => section.id) + yield fetchAllUnitSpecifications() + + for (let i in sections) { + yield fetchDatacenter(sections[i].datacenterId) + } + yield put(setCurrentDatacenter(sections[0].datacenterId)) + } catch (error) { + console.error(error) } - yield put(setCurrentDatacenter(sections[0].datacenterId)); - } catch (error) { - console.error(error); - } } function* fetchDatacenter(datacenterId) { - try { - yield fetchAndStoreDatacenter(datacenterId); - const rooms = yield fetchAndStoreRoomsOfDatacenter(datacenterId); - yield put( - addPropToStoreObject("datacenter", datacenterId, { - roomIds: rooms.map(room => room.id) - }) - ); - - for (let index in rooms) { - yield fetchRoom(rooms[index].id); + try { + yield fetchAndStoreDatacenter(datacenterId) + const rooms = yield fetchAndStoreRoomsOfDatacenter(datacenterId) + yield put( + addPropToStoreObject('datacenter', datacenterId, { + roomIds: rooms.map(room => room.id), + }), + ) + + for (let index in rooms) { + yield fetchRoom(rooms[index].id) + } + } catch (error) { + console.error(error) } - } catch (error) { - console.error(error); - } } function* fetchAllUnitSpecifications() { - try { - yield fetchAndStoreAllCPUs(); - yield fetchAndStoreAllGPUs(); - yield fetchAndStoreAllMemories(); - yield fetchAndStoreAllStorages(); - } catch (error) { - console.error(error); - } + try { + yield fetchAndStoreAllCPUs() + yield fetchAndStoreAllGPUs() + yield fetchAndStoreAllMemories() + yield fetchAndStoreAllStorages() + } catch (error) { + console.error(error) + } } function* fetchRoom(roomId) { - const tiles = yield fetchAndStoreTilesOfRoom(roomId); - yield put( - addPropToStoreObject("room", roomId, { - tileIds: tiles.map(tile => tile.id) - }) - ); - - for (let index in tiles) { - yield fetchTile(tiles[index]); - } + const tiles = yield fetchAndStoreTilesOfRoom(roomId) + yield put( + addPropToStoreObject('room', roomId, { + tileIds: tiles.map(tile => tile.id), + }), + ) + + for (let index in tiles) { + yield fetchTile(tiles[index]) + } } function* fetchTile(tile) { - if (!tile.objectType) { - return; - } - - switch (tile.objectType) { - case "RACK": - const rack = yield fetchAndStoreRackOnTile(tile.objectId, tile.id); - yield put(addPropToStoreObject("tile", tile.id, { rackId: rack.id })); - yield fetchMachinesOfRack(tile.id, rack); - break; - case "COOLING_ITEM": - const coolingItem = yield fetchAndStoreCoolingItem(tile.objectId); - yield put( - addPropToStoreObject("tile", tile.id, { coolingItemId: coolingItem.id }) - ); - break; - case "PSU": - const psu = yield fetchAndStorePSU(tile.objectId); - yield put(addPropToStoreObject("tile", tile.id, { psuId: psu.id })); - break; - default: - console.warn("Unknown rack type encountered while fetching tile objects"); - } + if (!tile.objectType) { + return + } + + switch (tile.objectType) { + case 'RACK': + const rack = yield fetchAndStoreRackOnTile(tile.objectId, tile.id) + yield put(addPropToStoreObject('tile', tile.id, { rackId: rack.id })) + yield fetchMachinesOfRack(tile.id, rack) + break + case 'COOLING_ITEM': + const coolingItem = yield fetchAndStoreCoolingItem(tile.objectId) + yield put( + addPropToStoreObject('tile', tile.id, { coolingItemId: coolingItem.id }), + ) + break + case 'PSU': + const psu = yield fetchAndStorePSU(tile.objectId) + yield put(addPropToStoreObject('tile', tile.id, { psuId: psu.id })) + break + default: + console.warn('Unknown rack type encountered while fetching tile objects') + } } function* fetchMachinesOfRack(tileId, rack) { - const machines = yield fetchAndStoreMachinesOfTile(tileId); - const machineIds = new Array(rack.capacity).fill(null); - machines.forEach(machine => (machineIds[machine.position - 1] = machine.id)); - - yield put(addPropToStoreObject("rack", rack.id, { machineIds })); - - for (let index in machines) { - for (let i in machines[index].cpuIds) { - yield fetchAndStoreCPU(machines[index].cpuIds[i]); - } - for (let i in machines[index].gpuIds) { - yield fetchAndStoreGPU(machines[index].gpuIds[i]); - } - for (let i in machines[index].memoryIds) { - yield fetchAndStoreMemory(machines[index].memoryIds[i]); - } - for (let i in machines[index].storageIds) { - yield fetchAndStoreStorage(machines[index].storageIds[i]); + const machines = yield fetchAndStoreMachinesOfTile(tileId) + const machineIds = new Array(rack.capacity).fill(null) + machines.forEach(machine => (machineIds[machine.position - 1] = machine.id)) + + yield put(addPropToStoreObject('rack', rack.id, { machineIds })) + + for (let index in machines) { + for (let i in machines[index].cpuIds) { + yield fetchAndStoreCPU(machines[index].cpuIds[i]) + } + for (let i in machines[index].gpuIds) { + yield fetchAndStoreGPU(machines[index].gpuIds[i]) + } + for (let i in machines[index].memoryIds) { + yield fetchAndStoreMemory(machines[index].memoryIds[i]) + } + for (let i in machines[index].storageIds) { + yield fetchAndStoreStorage(machines[index].storageIds[i]) + } } - } } export function* onStartNewRoomConstruction() { - try { - const datacenterId = yield select(state => state.currentDatacenterId); - const room = yield call(addRoomToDatacenter, { - id: -1, - datacenterId, - roomType: "SERVER" - }); - const roomWithEmptyTileList = Object.assign({}, room, { tileIds: [] }); - yield put(addToStore("room", roomWithEmptyTileList)); - yield put( - addIdToStoreObjectListProp("datacenter", datacenterId, "roomIds", room.id) - ); - yield put(startNewRoomConstructionSucceeded(room.id)); - } catch (error) { - console.error(error); - } + try { + const datacenterId = yield select(state => state.currentDatacenterId) + const room = yield call(addRoomToDatacenter, { + id: -1, + datacenterId, + roomType: 'SERVER', + }) + const roomWithEmptyTileList = Object.assign({}, room, { tileIds: [] }) + yield put(addToStore('room', roomWithEmptyTileList)) + yield put( + addIdToStoreObjectListProp('datacenter', datacenterId, 'roomIds', room.id), + ) + yield put(startNewRoomConstructionSucceeded(room.id)) + } catch (error) { + console.error(error) + } } export function* onCancelNewRoomConstruction() { - try { - const datacenterId = yield select(state => state.currentDatacenterId); - const roomId = yield select( - state => state.construction.currentRoomInConstruction - ); - yield call(deleteRoom, roomId); - yield put( - removeIdFromStoreObjectListProp( - "datacenter", - datacenterId, - "roomIds", - roomId - ) - ); - yield put(cancelNewRoomConstructionSucceeded()); - } catch (error) { - console.error(error); - } + try { + const datacenterId = yield select(state => state.currentDatacenterId) + const roomId = yield select( + state => state.construction.currentRoomInConstruction, + ) + yield call(deleteRoom, roomId) + yield put( + removeIdFromStoreObjectListProp( + 'datacenter', + datacenterId, + 'roomIds', + roomId, + ), + ) + yield put(cancelNewRoomConstructionSucceeded()) + } catch (error) { + console.error(error) + } } export function* onAddTile(action) { - try { - const roomId = yield select( - state => state.construction.currentRoomInConstruction - ); - const tile = yield call(addTileToRoom, { - roomId, - positionX: action.positionX, - positionY: action.positionY - }); - yield put(addToStore("tile", tile)); - yield put(addIdToStoreObjectListProp("room", roomId, "tileIds", tile.id)); - } catch (error) { - console.error(error); - } + try { + const roomId = yield select( + state => state.construction.currentRoomInConstruction, + ) + const tile = yield call(addTileToRoom, { + roomId, + positionX: action.positionX, + positionY: action.positionY, + }) + yield put(addToStore('tile', tile)) + yield put(addIdToStoreObjectListProp('room', roomId, 'tileIds', tile.id)) + } catch (error) { + console.error(error) + } } export function* onDeleteTile(action) { - try { - const roomId = yield select( - state => state.construction.currentRoomInConstruction - ); - yield call(deleteTile, action.tileId); - yield put( - removeIdFromStoreObjectListProp("room", roomId, "tileIds", action.tileId) - ); - } catch (error) { - console.error(error); - } + try { + const roomId = yield select( + state => state.construction.currentRoomInConstruction, + ) + yield call(deleteTile, action.tileId) + yield put( + removeIdFromStoreObjectListProp('room', roomId, 'tileIds', action.tileId), + ) + } catch (error) { + console.error(error) + } } export function* onEditRoomName(action) { - try { - const roomId = yield select(state => state.interactionLevel.roomId); - const room = Object.assign( - {}, - yield select(state => state.objects.room[roomId]) - ); - room.name = action.name; - yield call(updateRoom, room); - yield put(addPropToStoreObject("room", roomId, { name: action.name })); - } catch (error) { - console.error(error); - } + try { + const roomId = yield select(state => state.interactionLevel.roomId) + const room = Object.assign( + {}, + yield select(state => state.objects.room[roomId]), + ) + room.name = action.name + yield call(updateRoom, room) + yield put(addPropToStoreObject('room', roomId, { name: action.name })) + } catch (error) { + console.error(error) + } } export function* onDeleteRoom() { - try { - const datacenterId = yield select(state => state.currentDatacenterId); - const roomId = yield select(state => state.interactionLevel.roomId); - yield call(deleteRoom, roomId); - yield put(goDownOneInteractionLevel()); - yield put( - removeIdFromStoreObjectListProp( - "datacenter", - datacenterId, - "roomIds", - roomId - ) - ); - } catch (error) { - console.error(error); - } + try { + const datacenterId = yield select(state => state.currentDatacenterId) + const roomId = yield select(state => state.interactionLevel.roomId) + yield call(deleteRoom, roomId) + yield put(goDownOneInteractionLevel()) + yield put( + removeIdFromStoreObjectListProp( + 'datacenter', + datacenterId, + 'roomIds', + roomId, + ), + ) + } catch (error) { + console.error(error) + } } export function* onEditRackName(action) { - try { - const tileId = yield select(state => state.interactionLevel.tileId); - const rackId = yield select( - state => state.objects.tile[state.interactionLevel.tileId].objectId - ); - const rack = Object.assign( - {}, - yield select(state => state.objects.rack[rackId]) - ); - rack.name = action.name; - yield call(updateRackOnTile, tileId, rack); - yield put(addPropToStoreObject("rack", rackId, { name: action.name })); - } catch (error) { - console.error(error); - } + try { + const tileId = yield select(state => state.interactionLevel.tileId) + const rackId = yield select( + state => state.objects.tile[state.interactionLevel.tileId].objectId, + ) + const rack = Object.assign( + {}, + yield select(state => state.objects.rack[rackId]), + ) + rack.name = action.name + yield call(updateRackOnTile, tileId, rack) + yield put(addPropToStoreObject('rack', rackId, { name: action.name })) + } catch (error) { + console.error(error) + } } export function* onDeleteRack() { - try { - const tileId = yield select(state => state.interactionLevel.tileId); - yield call(deleteRackFromTile, tileId); - yield put(goDownOneInteractionLevel()); - yield put(addPropToStoreObject("tile", tileId, { objectType: undefined })); - yield put(addPropToStoreObject("tile", tileId, { objectId: undefined })); - } catch (error) { - console.error(error); - } + try { + const tileId = yield select(state => state.interactionLevel.tileId) + yield call(deleteRackFromTile, tileId) + yield put(goDownOneInteractionLevel()) + yield put(addPropToStoreObject('tile', tileId, { objectType: undefined })) + yield put(addPropToStoreObject('tile', tileId, { objectId: undefined })) + } catch (error) { + console.error(error) + } } export function* onAddRackToTile(action) { - try { - const rack = yield call(addRackToTile, action.tileId, { - id: -1, - name: "Rack", - capacity: DEFAULT_RACK_SLOT_CAPACITY, - powerCapacityW: DEFAULT_RACK_POWER_CAPACITY - }); - rack.machineIds = new Array(rack.capacity).fill(null); - yield put(addToStore("rack", rack)); - yield put( - addPropToStoreObject("tile", action.tileId, { objectId: rack.id }) - ); - yield put( - addPropToStoreObject("tile", action.tileId, { objectType: "RACK" }) - ); - } catch (error) { - console.error(error); - } + try { + const rack = yield call(addRackToTile, action.tileId, { + id: -1, + name: 'Rack', + capacity: DEFAULT_RACK_SLOT_CAPACITY, + powerCapacityW: DEFAULT_RACK_POWER_CAPACITY, + }) + rack.machineIds = new Array(rack.capacity).fill(null) + yield put(addToStore('rack', rack)) + yield put( + addPropToStoreObject('tile', action.tileId, { objectId: rack.id }), + ) + yield put( + addPropToStoreObject('tile', action.tileId, { objectType: 'RACK' }), + ) + } catch (error) { + console.error(error) + } } export function* onAddMachine(action) { - try { - const tileId = yield select(state => state.interactionLevel.tileId); - const rackId = yield select( - state => state.objects.tile[state.interactionLevel.tileId].objectId - ); - const rack = yield select(state => state.objects.rack[rackId]); - - const machine = yield call(addMachineToRackOnTile, tileId, { - id: -1, - rackId, - position: action.position, - tags: [], - cpuIds: [], - gpuIds: [], - memoryIds: [], - storageIds: [] - }); - yield put(addToStore("machine", machine)); - - const machineIds = [...rack.machineIds]; - machineIds[machine.position - 1] = machine.id; - yield put(addPropToStoreObject("rack", rackId, { machineIds })); - } catch (error) { - console.error(error); - } + try { + const tileId = yield select(state => state.interactionLevel.tileId) + const rackId = yield select( + state => state.objects.tile[state.interactionLevel.tileId].objectId, + ) + const rack = yield select(state => state.objects.rack[rackId]) + + const machine = yield call(addMachineToRackOnTile, tileId, { + id: -1, + rackId, + position: action.position, + tags: [], + cpuIds: [], + gpuIds: [], + memoryIds: [], + storageIds: [], + }) + yield put(addToStore('machine', machine)) + + const machineIds = [...rack.machineIds] + machineIds[machine.position - 1] = machine.id + yield put(addPropToStoreObject('rack', rackId, { machineIds })) + } catch (error) { + console.error(error) + } } export function* onDeleteMachine() { - try { - const tileId = yield select(state => state.interactionLevel.tileId); - const position = yield select(state => state.interactionLevel.position); - const rack = yield select( - state => state.objects.rack[state.objects.tile[tileId].objectId] - ); - yield call(deleteMachineInRackOnTile, tileId, position); - const machineIds = [...rack.machineIds]; - machineIds[position - 1] = null; - yield put(goDownOneInteractionLevel()); - yield put(addPropToStoreObject("rack", rack.id, { machineIds })); - } catch (error) { - console.error(error); - } + try { + const tileId = yield select(state => state.interactionLevel.tileId) + const position = yield select(state => state.interactionLevel.position) + const rack = yield select( + state => state.objects.rack[state.objects.tile[tileId].objectId], + ) + yield call(deleteMachineInRackOnTile, tileId, position) + const machineIds = [...rack.machineIds] + machineIds[position - 1] = null + yield put(goDownOneInteractionLevel()) + yield put(addPropToStoreObject('rack', rack.id, { machineIds })) + } catch (error) { + console.error(error) + } } export function* onAddUnit(action) { - try { - const tileId = yield select(state => state.interactionLevel.tileId); - const position = yield select(state => state.interactionLevel.position); - const machine = yield select( - state => - state.objects.machine[ - state.objects.rack[state.objects.tile[tileId].objectId].machineIds[ - position - 1 - ] - ] - ); - - if (machine[action.unitType + "Ids"].length >= MAX_NUM_UNITS_PER_MACHINE) { - return; + try { + const tileId = yield select(state => state.interactionLevel.tileId) + const position = yield select(state => state.interactionLevel.position) + const machine = yield select( + state => + state.objects.machine[ + state.objects.rack[state.objects.tile[tileId].objectId].machineIds[ + position - 1 + ] + ], + ) + + if (machine[action.unitType + 'Ids'].length >= MAX_NUM_UNITS_PER_MACHINE) { + return + } + + const units = [...machine[action.unitType + 'Ids'], action.id] + const updatedMachine = Object.assign({}, machine, { + [action.unitType + 'Ids']: units, + }) + + yield call(updateMachineInRackOnTile, tileId, position, updatedMachine) + + yield put( + addPropToStoreObject('machine', machine.id, { + [action.unitType + 'Ids']: units, + }), + ) + } catch (error) { + console.error(error) } - - const units = [...machine[action.unitType + "Ids"], action.id]; - const updatedMachine = Object.assign({}, machine, { - [action.unitType + "Ids"]: units - }); - - yield call(updateMachineInRackOnTile, tileId, position, updatedMachine); - - yield put( - addPropToStoreObject("machine", machine.id, { - [action.unitType + "Ids"]: units - }) - ); - } catch (error) { - console.error(error); - } } export function* onDeleteUnit(action) { - try { - const tileId = yield select(state => state.interactionLevel.tileId); - const position = yield select(state => state.interactionLevel.position); - const machine = yield select( - state => - state.objects.machine[ - state.objects.rack[state.objects.tile[tileId].objectId].machineIds[ - position - 1 - ] - ] - ); - const unitIds = machine[action.unitType + "Ids"].slice(); - unitIds.splice(action.index, 1); - const updatedMachine = Object.assign({}, machine, { - [action.unitType + "Ids"]: unitIds - }); - - yield call(updateMachineInRackOnTile, tileId, position, updatedMachine); - yield put( - addPropToStoreObject("machine", machine.id, { - [action.unitType + "Ids"]: unitIds - }) - ); - } catch (error) { - console.error(error); - } + try { + const tileId = yield select(state => state.interactionLevel.tileId) + const position = yield select(state => state.interactionLevel.position) + const machine = yield select( + state => + state.objects.machine[ + state.objects.rack[state.objects.tile[tileId].objectId].machineIds[ + position - 1 + ] + ], + ) + const unitIds = machine[action.unitType + 'Ids'].slice() + unitIds.splice(action.index, 1) + const updatedMachine = Object.assign({}, machine, { + [action.unitType + 'Ids']: unitIds, + }) + + yield call(updateMachineInRackOnTile, tileId, position, updatedMachine) + yield put( + addPropToStoreObject('machine', machine.id, { + [action.unitType + 'Ids']: unitIds, + }), + ) + } catch (error) { + console.error(error) + } } diff --git a/frontend/src/sagas/users.js b/frontend/src/sagas/users.js index 3825443a..fb5197d1 100644 --- a/frontend/src/sagas/users.js +++ b/frontend/src/sagas/users.js @@ -1,50 +1,51 @@ -import { call, put } from "redux-saga/effects"; -import { logInSucceeded } from "../actions/auth"; -import { addToStore } from "../actions/objects"; -import { fetchAuthorizationsOfCurrentUserSucceeded } from "../actions/users"; -import { performTokenSignIn } from "../api/routes/token-signin"; -import { addUser, getAuthorizationsByUser } from "../api/routes/users"; -import { saveAuthLocalStorage } from "../auth/index"; -import { fetchAndStoreSimulation, fetchAndStoreUser } from "./objects"; +import { call, put } from 'redux-saga/effects' +import { logInSucceeded } from '../actions/auth' +import { addToStore } from '../actions/objects' +import { fetchAuthorizationsOfCurrentUserSucceeded } from '../actions/users' +import { performTokenSignIn } from '../api/routes/token-signin' +import { addUser } from '../api/routes/users' +import { saveAuthLocalStorage } from '../auth/index' +import { fetchAndStoreSimulation, fetchAndStoreUser } from './objects' export function* onFetchLoggedInUser(action) { - try { - const tokenResponse = yield call( - performTokenSignIn, - action.payload.authToken - ); - let userId = tokenResponse.userId; - - if (tokenResponse.isNewUser) { - saveAuthLocalStorage({ authToken: action.payload.authToken }); - const newUser = yield call(addUser, action.payload); - userId = newUser.id; + try { + const tokenResponse = yield call( + performTokenSignIn, + action.payload.authToken, + ) + console.log(tokenResponse) + let userId = tokenResponse.userId + + if (tokenResponse.isNewUser) { + saveAuthLocalStorage({ authToken: action.payload.authToken }) + const newUser = yield call(addUser, action.payload) + userId = newUser._id + } + + yield put(logInSucceeded(Object.assign({ userId }, action.payload))) + } catch (error) { + console.error(error) } - - yield put(logInSucceeded(Object.assign({ userId }, action.payload))); - } catch (error) { - console.error(error); - } } export function* onFetchAuthorizationsOfCurrentUser(action) { - try { - const authorizations = yield call(getAuthorizationsByUser, action.userId); + try { + const user = yield call(fetchAndStoreUser, action.userId) - for (const authorization of authorizations) { - yield put(addToStore("authorization", authorization)); + for (const authorization of user.authorizations) { + yield put(addToStore('authorization', authorization)) - yield fetchAndStoreSimulation(authorization.simulationId); - yield fetchAndStoreUser(authorization.userId); - } + yield fetchAndStoreSimulation(authorization.simulationId) + yield fetchAndStoreUser(authorization.userId) + } - const authorizationIds = authorizations.map(authorization => [ - authorization.userId, - authorization.simulationId - ]); + const authorizationIds = user.authorizations.map(authorization => [ + authorization.userId, + authorization.simulationId, + ]) - yield put(fetchAuthorizationsOfCurrentUserSucceeded(authorizationIds)); - } catch (error) { - console.error(error); - } + yield put(fetchAuthorizationsOfCurrentUserSucceeded(authorizationIds)) + } catch (error) { + console.error(error) + } } diff --git a/frontend/src/shapes/index.js b/frontend/src/shapes/index.js index 5570ef34..4c63fdfe 100644 --- a/frontend/src/shapes/index.js +++ b/frontend/src/shapes/index.js @@ -1,188 +1,188 @@ -import PropTypes from "prop-types"; +import PropTypes from 'prop-types' -const Shapes = {}; +const Shapes = {} Shapes.User = PropTypes.shape({ - id: PropTypes.number.isRequired, - googleId: PropTypes.string.isRequired, - email: PropTypes.string.isRequired, - givenName: PropTypes.string.isRequired, - familyName: PropTypes.string.isRequired -}); + _id: PropTypes.string.isRequired, + googleId: PropTypes.string.isRequired, + email: PropTypes.string.isRequired, + givenName: PropTypes.string.isRequired, + familyName: PropTypes.string.isRequired, +}) Shapes.Simulation = PropTypes.shape({ - id: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, - datetimeCreated: PropTypes.string.isRequired, - datetimeLastEdited: PropTypes.string.isRequired -}); + _id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + datetimeCreated: PropTypes.string.isRequired, + datetimeLastEdited: PropTypes.string.isRequired, +}) Shapes.Authorization = PropTypes.shape({ - userId: PropTypes.number.isRequired, - user: Shapes.User, - simulationId: PropTypes.number.isRequired, - simulation: Shapes.Simulation, - authorizationLevel: PropTypes.string.isRequired -}); + userId: PropTypes.string.isRequired, + user: Shapes.User, + simulationId: PropTypes.string.isRequired, + simulation: Shapes.Simulation, + authorizationLevel: PropTypes.string.isRequired, +}) Shapes.FailureModel = PropTypes.shape({ - id: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, - rate: PropTypes.number.isRequired -}); + id: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + rate: PropTypes.number.isRequired, +}) Shapes.ProcessingUnit = PropTypes.shape({ - id: PropTypes.number.isRequired, - manufacturer: PropTypes.string.isRequired, - family: PropTypes.string.isRequired, - generation: PropTypes.string.isRequired, - model: PropTypes.string.isRequired, - clockRateMhz: PropTypes.number.isRequired, - numberOfCores: PropTypes.number.isRequired, - energyConsumptionW: PropTypes.number.isRequired, - failureModelId: PropTypes.number.isRequired, - failureModel: Shapes.FailureModel -}); + id: PropTypes.number.isRequired, + manufacturer: PropTypes.string.isRequired, + family: PropTypes.string.isRequired, + generation: PropTypes.string.isRequired, + model: PropTypes.string.isRequired, + clockRateMhz: PropTypes.number.isRequired, + numberOfCores: PropTypes.number.isRequired, + energyConsumptionW: PropTypes.number.isRequired, + failureModelId: PropTypes.number.isRequired, + failureModel: Shapes.FailureModel, +}) Shapes.StorageUnit = PropTypes.shape({ - id: PropTypes.number.isRequired, - manufacturer: PropTypes.string.isRequired, - family: PropTypes.string.isRequired, - generation: PropTypes.string.isRequired, - model: PropTypes.string.isRequired, - speedMbPerS: PropTypes.number.isRequired, - sizeMb: PropTypes.number.isRequired, - energyConsumptionW: PropTypes.number.isRequired, - failureModelId: PropTypes.number.isRequired, - failureModel: Shapes.FailureModel -}); + id: PropTypes.number.isRequired, + manufacturer: PropTypes.string.isRequired, + family: PropTypes.string.isRequired, + generation: PropTypes.string.isRequired, + model: PropTypes.string.isRequired, + speedMbPerS: PropTypes.number.isRequired, + sizeMb: PropTypes.number.isRequired, + energyConsumptionW: PropTypes.number.isRequired, + failureModelId: PropTypes.number.isRequired, + failureModel: Shapes.FailureModel, +}) Shapes.Machine = PropTypes.shape({ - id: PropTypes.number.isRequired, - rackId: PropTypes.number.isRequired, - position: PropTypes.number.isRequired, - cpuIds: PropTypes.arrayOf(PropTypes.number.isRequired), - cpus: PropTypes.arrayOf(Shapes.ProcessingUnit), - gpuIds: PropTypes.arrayOf(PropTypes.number.isRequired), - gpus: PropTypes.arrayOf(Shapes.ProcessingUnit), - memoryIds: PropTypes.arrayOf(PropTypes.number.isRequired), - memories: PropTypes.arrayOf(Shapes.StorageUnit), - storageIds: PropTypes.arrayOf(PropTypes.number.isRequired), - storages: PropTypes.arrayOf(Shapes.StorageUnit) -}); + id: PropTypes.number.isRequired, + rackId: PropTypes.number.isRequired, + position: PropTypes.number.isRequired, + cpuIds: PropTypes.arrayOf(PropTypes.number.isRequired), + cpus: PropTypes.arrayOf(Shapes.ProcessingUnit), + gpuIds: PropTypes.arrayOf(PropTypes.number.isRequired), + gpus: PropTypes.arrayOf(Shapes.ProcessingUnit), + memoryIds: PropTypes.arrayOf(PropTypes.number.isRequired), + memories: PropTypes.arrayOf(Shapes.StorageUnit), + storageIds: PropTypes.arrayOf(PropTypes.number.isRequired), + storages: PropTypes.arrayOf(Shapes.StorageUnit), +}) Shapes.Rack = PropTypes.shape({ - id: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, - capacity: PropTypes.number.isRequired, - powerCapacityW: PropTypes.number.isRequired, - machines: PropTypes.arrayOf(Shapes.Machine) -}); + id: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + capacity: PropTypes.number.isRequired, + powerCapacityW: PropTypes.number.isRequired, + machines: PropTypes.arrayOf(Shapes.Machine), +}) Shapes.CoolingItem = PropTypes.shape({ - id: PropTypes.number.isRequired, - energyConsumptionW: PropTypes.number.isRequired, - type: PropTypes.string.isRequired, - failureModelId: PropTypes.number.isRequired, - failureModel: Shapes.FailureModel -}); + id: PropTypes.number.isRequired, + energyConsumptionW: PropTypes.number.isRequired, + type: PropTypes.string.isRequired, + failureModelId: PropTypes.number.isRequired, + failureModel: Shapes.FailureModel, +}) Shapes.PSU = PropTypes.shape({ - id: PropTypes.number.isRequired, - energyKwh: PropTypes.number.isRequired, - type: PropTypes.string.isRequired, - failureModelId: PropTypes.number.isRequired, - failureModel: Shapes.FailureModel -}); + id: PropTypes.number.isRequired, + energyKwh: PropTypes.number.isRequired, + type: PropTypes.string.isRequired, + failureModelId: PropTypes.number.isRequired, + failureModel: Shapes.FailureModel, +}) Shapes.Tile = PropTypes.shape({ - id: PropTypes.number.isRequired, - roomId: PropTypes.number.isRequired, - positionX: PropTypes.number.isRequired, - positionY: PropTypes.number.isRequired, - objectId: PropTypes.number, - objectType: PropTypes.string, - rack: Shapes.Rack, - coolingItem: Shapes.CoolingItem, - psu: Shapes.PSU -}); + id: PropTypes.number.isRequired, + roomId: PropTypes.number.isRequired, + positionX: PropTypes.number.isRequired, + positionY: PropTypes.number.isRequired, + objectId: PropTypes.number, + objectType: PropTypes.string, + rack: Shapes.Rack, + coolingItem: Shapes.CoolingItem, + psu: Shapes.PSU, +}) Shapes.Room = PropTypes.shape({ - id: PropTypes.number.isRequired, - datacenterId: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, - roomType: PropTypes.string.isRequired, - tiles: PropTypes.arrayOf(Shapes.Tile) -}); + id: PropTypes.number.isRequired, + datacenterId: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + roomType: PropTypes.string.isRequired, + tiles: PropTypes.arrayOf(Shapes.Tile), +}) Shapes.Datacenter = PropTypes.shape({ - id: PropTypes.number.isRequired, - rooms: PropTypes.arrayOf(Shapes.Room) -}); + id: PropTypes.number.isRequired, + rooms: PropTypes.arrayOf(Shapes.Room), +}) Shapes.Section = PropTypes.shape({ - id: PropTypes.number.isRequired, - pathId: PropTypes.number.isRequired, - startTick: PropTypes.number.isRequired, - datacenterId: PropTypes.number.isRequired, - datacenter: Shapes.Datacenter -}); + id: PropTypes.number.isRequired, + pathId: PropTypes.number.isRequired, + startTick: PropTypes.number.isRequired, + datacenterId: PropTypes.number.isRequired, + datacenter: Shapes.Datacenter, +}) Shapes.Path = PropTypes.shape({ - id: PropTypes.number.isRequired, - simulationId: PropTypes.number.isRequired, - name: PropTypes.string, - datetimeCreated: PropTypes.string.isRequired, - sections: PropTypes.arrayOf(Shapes.Section) -}); + id: PropTypes.number.isRequired, + simulationId: PropTypes.number.isRequired, + name: PropTypes.string, + datetimeCreated: PropTypes.string.isRequired, + sections: PropTypes.arrayOf(Shapes.Section), +}) Shapes.Scheduler = PropTypes.shape({ - name: PropTypes.string.isRequired -}); + name: PropTypes.string.isRequired, +}) Shapes.Task = PropTypes.shape({ - id: PropTypes.number.isRequired, - jobId: PropTypes.number.isRequired, - startTick: PropTypes.number.isRequired, - totalFlopCount: PropTypes.number.isRequired -}); + id: PropTypes.number.isRequired, + jobId: PropTypes.number.isRequired, + startTick: PropTypes.number.isRequired, + totalFlopCount: PropTypes.number.isRequired, +}) Shapes.Job = PropTypes.shape({ - id: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, - traceId: PropTypes.number.isRequired, - taskIds: PropTypes.arrayOf(PropTypes.number) -}); + id: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + traceId: PropTypes.number.isRequired, + taskIds: PropTypes.arrayOf(PropTypes.number), +}) Shapes.Trace = PropTypes.shape({ - id: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, - jobIds: PropTypes.arrayOf(PropTypes.number) -}); + id: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + jobIds: PropTypes.arrayOf(PropTypes.number), +}) Shapes.Experiment = PropTypes.shape({ - id: PropTypes.number.isRequired, - simulationId: PropTypes.number.isRequired, - traceId: PropTypes.number.isRequired, - trace: Shapes.Trace, - pathId: PropTypes.number.isRequired, - path: Shapes.Path, - schedulerName: PropTypes.string.isRequired, - scheduler: Shapes.Scheduler, - name: PropTypes.string.isRequired -}); + id: PropTypes.number.isRequired, + simulationId: PropTypes.number.isRequired, + traceId: PropTypes.number.isRequired, + trace: Shapes.Trace, + pathId: PropTypes.number.isRequired, + path: Shapes.Path, + schedulerName: PropTypes.string.isRequired, + scheduler: Shapes.Scheduler, + name: PropTypes.string.isRequired, +}) Shapes.WallSegment = PropTypes.shape({ - startPosX: PropTypes.number.isRequired, - startPosY: PropTypes.number.isRequired, - isHorizontal: PropTypes.bool.isRequired, - length: PropTypes.number.isRequired -}); + startPosX: PropTypes.number.isRequired, + startPosY: PropTypes.number.isRequired, + isHorizontal: PropTypes.bool.isRequired, + length: PropTypes.number.isRequired, +}) Shapes.InteractionLevel = PropTypes.shape({ - mode: PropTypes.string.isRequired, - roomId: PropTypes.number, - rackId: PropTypes.bool -}); + mode: PropTypes.string.isRequired, + roomId: PropTypes.number, + rackId: PropTypes.bool, +}) -export default Shapes; +export default Shapes diff --git a/frontend/src/shortcuts/keymap.js b/frontend/src/shortcuts/keymap.js index 7bc24e83..797340d7 100644 --- a/frontend/src/shortcuts/keymap.js +++ b/frontend/src/shortcuts/keymap.js @@ -1,10 +1,10 @@ const KeymapConfiguration = { - MAP: { - MOVE_LEFT: ["a", "left"], - MOVE_RIGHT: ["d", "right"], - MOVE_UP: ["w", "up"], - MOVE_DOWN: ["s", "down"] - } -}; + MAP: { + MOVE_LEFT: ['a', 'left'], + MOVE_RIGHT: ['d', 'right'], + MOVE_UP: ['w', 'up'], + MOVE_DOWN: ['s', 'down'], + }, +} -export default KeymapConfiguration; +export default KeymapConfiguration diff --git a/frontend/src/store/configure-store.js b/frontend/src/store/configure-store.js index 29af25ab..f01b61bb 100644 --- a/frontend/src/store/configure-store.js +++ b/frontend/src/store/configure-store.js @@ -1,41 +1,38 @@ -import { applyMiddleware, compose, createStore } from "redux"; -import persistState from "redux-localstorage"; -import { createLogger } from "redux-logger"; -import createSagaMiddleware from "redux-saga"; -import thunk from "redux-thunk"; -import { authRedirectMiddleware } from "../auth/index"; -import rootReducer from "../reducers/index"; -import rootSaga from "../sagas/index"; -import { dummyMiddleware } from "./middlewares/dummy-middleware"; -import { viewportAdjustmentMiddleware } from "./middlewares/viewport-adjustment"; +import { applyMiddleware, compose, createStore } from 'redux' +import persistState from 'redux-localstorage' +import { createLogger } from 'redux-logger' +import createSagaMiddleware from 'redux-saga' +import thunk from 'redux-thunk' +import { authRedirectMiddleware } from '../auth/index' +import rootReducer from '../reducers/index' +import rootSaga from '../sagas/index' +import { dummyMiddleware } from './middlewares/dummy-middleware' +import { viewportAdjustmentMiddleware } from './middlewares/viewport-adjustment' -const sagaMiddleware = createSagaMiddleware(); +const sagaMiddleware = createSagaMiddleware() -let logger; -if (process.env.NODE_ENV !== "production") { - logger = createLogger(); +let logger +if (process.env.NODE_ENV !== 'production') { + logger = createLogger() } const middlewares = [ - process.env.NODE_ENV === "production" ? dummyMiddleware : logger, - thunk, - sagaMiddleware, - authRedirectMiddleware, - viewportAdjustmentMiddleware -]; + process.env.NODE_ENV === 'production' ? dummyMiddleware : logger, + thunk, + sagaMiddleware, + authRedirectMiddleware, + viewportAdjustmentMiddleware, +] -export let store = undefined; +export let store = undefined export default function configureStore() { - const configuredStore = createStore( - rootReducer, - compose( - persistState("auth"), - applyMiddleware(...middlewares) + const configuredStore = createStore( + rootReducer, + compose(persistState('auth'), applyMiddleware(...middlewares)), ) - ); - sagaMiddleware.run(rootSaga); - store = configuredStore; + sagaMiddleware.run(rootSaga) + store = configuredStore - return configuredStore; + return configuredStore } diff --git a/frontend/src/store/middlewares/dummy-middleware.js b/frontend/src/store/middlewares/dummy-middleware.js index 468b15d1..ed5670c5 100644 --- a/frontend/src/store/middlewares/dummy-middleware.js +++ b/frontend/src/store/middlewares/dummy-middleware.js @@ -1,3 +1,3 @@ export const dummyMiddleware = store => next => action => { - next(action); -}; + next(action) +} diff --git a/frontend/src/store/middlewares/viewport-adjustment.js b/frontend/src/store/middlewares/viewport-adjustment.js index 132391f3..0a074f61 100644 --- a/frontend/src/store/middlewares/viewport-adjustment.js +++ b/frontend/src/store/middlewares/viewport-adjustment.js @@ -1,90 +1,86 @@ +import { SET_MAP_DIMENSIONS, setMapPosition, setMapScale } from '../../actions/map' +import { SET_CURRENT_DATACENTER } from '../../actions/topology/building' import { - SET_MAP_DIMENSIONS, - setMapPosition, - setMapScale -} from "../../actions/map"; -import { SET_CURRENT_DATACENTER } from "../../actions/topology/building"; -import { - MAP_MAX_SCALE, - MAP_MIN_SCALE, - SIDEBAR_WIDTH, - TILE_SIZE_IN_PIXELS, - VIEWPORT_PADDING -} from "../../components/app/map/MapConstants"; -import { calculateRoomListBounds } from "../../util/tile-calculations"; + MAP_MAX_SCALE, + MAP_MIN_SCALE, + SIDEBAR_WIDTH, + TILE_SIZE_IN_PIXELS, + VIEWPORT_PADDING, +} from '../../components/app/map/MapConstants' +import { calculateRoomListBounds } from '../../util/tile-calculations' export const viewportAdjustmentMiddleware = store => next => action => { - const state = store.getState(); + const state = store.getState() - let datacenterId = -1; - let mapDimensions = {}; - if (action.type === SET_CURRENT_DATACENTER && action.datacenterId !== -1) { - datacenterId = action.datacenterId; - mapDimensions = state.map.dimensions; - } else if ( - action.type === SET_MAP_DIMENSIONS && - state.currentDatacenterId !== -1 - ) { - datacenterId = state.currentDatacenterId; - mapDimensions = { width: action.width, height: action.height }; - } + let datacenterId = -1 + let mapDimensions = {} + if (action.type === SET_CURRENT_DATACENTER && action.datacenterId !== -1) { + datacenterId = action.datacenterId + mapDimensions = state.map.dimensions + } else if ( + action.type === SET_MAP_DIMENSIONS && + state.currentDatacenterId !== -1 + ) { + datacenterId = state.currentDatacenterId + mapDimensions = { width: action.width, height: action.height } + } - if (datacenterId !== -1) { - const roomIds = state.objects.datacenter[datacenterId].roomIds; - const rooms = roomIds.map(id => Object.assign({}, state.objects.room[id])); - rooms.forEach( - room => - (room.tiles = room.tileIds.map(tileId => state.objects.tile[tileId])) - ); + if (datacenterId !== -1) { + const roomIds = state.objects.datacenter[datacenterId].roomIds + const rooms = roomIds.map(id => Object.assign({}, state.objects.room[id])) + rooms.forEach( + room => + (room.tiles = room.tileIds.map(tileId => state.objects.tile[tileId])), + ) - let hasNoTiles = true; - for (let i in rooms) { - if (rooms[i].tiles.length > 0) { - hasNoTiles = false; - break; - } - } + let hasNoTiles = true + for (let i in rooms) { + if (rooms[i].tiles.length > 0) { + hasNoTiles = false + break + } + } - if (!hasNoTiles) { - const viewportParams = calculateParametersToZoomInOnRooms( - rooms, - mapDimensions.width, - mapDimensions.height - ); - store.dispatch(setMapPosition(viewportParams.newX, viewportParams.newY)); - store.dispatch(setMapScale(viewportParams.newScale)); + if (!hasNoTiles) { + const viewportParams = calculateParametersToZoomInOnRooms( + rooms, + mapDimensions.width, + mapDimensions.height, + ) + store.dispatch(setMapPosition(viewportParams.newX, viewportParams.newY)) + store.dispatch(setMapScale(viewportParams.newScale)) + } } - } - next(action); -}; + next(action) +} function calculateParametersToZoomInOnRooms(rooms, mapWidth, mapHeight) { - const bounds = calculateRoomListBounds(rooms); - const newScale = calculateNewScale(bounds, mapWidth, mapHeight); + const bounds = calculateRoomListBounds(rooms) + const newScale = calculateNewScale(bounds, mapWidth, mapHeight) - // Coordinates of the center of the room, relative to the global origin of the map - const roomCenterCoordinates = { - x: bounds.center.x * TILE_SIZE_IN_PIXELS * newScale, - y: bounds.center.y * TILE_SIZE_IN_PIXELS * newScale - }; + // Coordinates of the center of the room, relative to the global origin of the map + const roomCenterCoordinates = { + x: bounds.center.x * TILE_SIZE_IN_PIXELS * newScale, + y: bounds.center.y * TILE_SIZE_IN_PIXELS * newScale, + } - const newX = -roomCenterCoordinates.x + mapWidth / 2; - const newY = -roomCenterCoordinates.y + mapHeight / 2; + const newX = -roomCenterCoordinates.x + mapWidth / 2 + const newY = -roomCenterCoordinates.y + mapHeight / 2 - return { newScale, newX, newY }; + return { newScale, newX, newY } } function calculateNewScale(bounds, mapWidth, mapHeight) { - const width = bounds.max.x - bounds.min.x; - const height = bounds.max.y - bounds.min.y; + const width = bounds.max.x - bounds.min.x + const height = bounds.max.y - bounds.min.y - const scaleX = - (mapWidth - 2 * SIDEBAR_WIDTH) / - (width * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING); - const scaleY = - mapHeight / (height * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING); - const newScale = Math.min(scaleX, scaleY); + const scaleX = + (mapWidth - 2 * SIDEBAR_WIDTH) / + (width * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING) + const scaleY = + mapHeight / (height * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING) + const newScale = Math.min(scaleX, scaleY) - return Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE); + return Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE) } diff --git a/frontend/src/style-globals/_mixins.sass b/frontend/src/style-globals/_mixins.sass index 4ac5a9bc..d0a8d1ac 100644 --- a/frontend/src/style-globals/_mixins.sass +++ b/frontend/src/style-globals/_mixins.sass @@ -1,21 +1,21 @@ =transition($property, $time) - -webkit-transition: $property $time - -moz-transition: $property $time - -o-transition: $property $time - transition: $property $time + -webkit-transition: $property $time + -moz-transition: $property $time + -o-transition: $property $time + transition: $property $time =user-select - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none =border-radius($length) - -webkit-border-radius: $length - -moz-border-radius: $length - border-radius: $length + -webkit-border-radius: $length + -moz-border-radius: $length + border-radius: $length /* General Button Abstractions */ =clickable - cursor: pointer - +user-select + cursor: pointer + +user-select diff --git a/frontend/src/util/authorizations.js b/frontend/src/util/authorizations.js index ef649c9c..4086b35d 100644 --- a/frontend/src/util/authorizations.js +++ b/frontend/src/util/authorizations.js @@ -1,11 +1,11 @@ export const AUTH_ICON_MAP = { - OWN: "home", - EDIT: "pencil", - VIEW: "eye" -}; + OWN: 'home', + EDIT: 'pencil', + VIEW: 'eye', +} export const AUTH_DESCRIPTION_MAP = { - OWN: "Own", - EDIT: "Can Edit", - VIEW: "Can View" -}; + OWN: 'Own', + EDIT: 'Can Edit', + VIEW: 'Can View', +} diff --git a/frontend/src/util/colors.js b/frontend/src/util/colors.js index 1e84e162..34468503 100644 --- a/frontend/src/util/colors.js +++ b/frontend/src/util/colors.js @@ -1,29 +1,29 @@ -export const GRID_COLOR = "rgba(0, 0, 0, 0.5)"; -export const BACKDROP_COLOR = "rgba(255, 255, 255, 1)"; -export const WALL_COLOR = "rgba(0, 0, 0, 1)"; +export const GRID_COLOR = 'rgba(0, 0, 0, 0.5)' +export const BACKDROP_COLOR = 'rgba(255, 255, 255, 1)' +export const WALL_COLOR = 'rgba(0, 0, 0, 1)' -export const ROOM_DEFAULT_COLOR = "rgba(150, 150, 150, 1)"; -export const ROOM_IN_CONSTRUCTION_COLOR = "rgba(51, 153, 255, 1)"; -export const ROOM_HOVER_VALID_COLOR = "rgba(51, 153, 255, 1)"; -export const ROOM_HOVER_INVALID_COLOR = "rgba(255, 102, 0, 1)"; -export const ROOM_NAME_COLOR = "rgba(245, 245, 245, 1)"; -export const ROOM_TYPE_COLOR = "rgba(245, 245, 245, 1)"; +export const ROOM_DEFAULT_COLOR = 'rgba(150, 150, 150, 1)' +export const ROOM_IN_CONSTRUCTION_COLOR = 'rgba(51, 153, 255, 1)' +export const ROOM_HOVER_VALID_COLOR = 'rgba(51, 153, 255, 1)' +export const ROOM_HOVER_INVALID_COLOR = 'rgba(255, 102, 0, 1)' +export const ROOM_NAME_COLOR = 'rgba(245, 245, 245, 1)' +export const ROOM_TYPE_COLOR = 'rgba(245, 245, 245, 1)' -export const TILE_PLUS_COLOR = "rgba(0, 0, 0, 1)"; +export const TILE_PLUS_COLOR = 'rgba(0, 0, 0, 1)' -export const OBJECT_BORDER_COLOR = "rgba(0, 0, 0, 1)"; +export const OBJECT_BORDER_COLOR = 'rgba(0, 0, 0, 1)' -export const RACK_BACKGROUND_COLOR = "rgba(170, 170, 170, 1)"; -export const RACK_SPACE_BAR_BACKGROUND_COLOR = "rgba(222, 235, 247, 0.6)"; -export const RACK_SPACE_BAR_FILL_COLOR = "rgba(91, 155, 213, 0.7)"; -export const RACK_ENERGY_BAR_BACKGROUND_COLOR = "rgba(255, 242, 204, 0.6)"; -export const RACK_ENERGY_BAR_FILL_COLOR = "rgba(244, 215, 0, 0.7)"; -export const COOLING_ITEM_BACKGROUND_COLOR = "rgba(40, 50, 230, 1)"; -export const PSU_BACKGROUND_COLOR = "rgba(230, 50, 60, 1)"; +export const RACK_BACKGROUND_COLOR = 'rgba(170, 170, 170, 1)' +export const RACK_SPACE_BAR_BACKGROUND_COLOR = 'rgba(222, 235, 247, 0.6)' +export const RACK_SPACE_BAR_FILL_COLOR = 'rgba(91, 155, 213, 0.7)' +export const RACK_ENERGY_BAR_BACKGROUND_COLOR = 'rgba(255, 242, 204, 0.6)' +export const RACK_ENERGY_BAR_FILL_COLOR = 'rgba(244, 215, 0, 0.7)' +export const COOLING_ITEM_BACKGROUND_COLOR = 'rgba(40, 50, 230, 1)' +export const PSU_BACKGROUND_COLOR = 'rgba(230, 50, 60, 1)' -export const GRAYED_OUT_AREA_COLOR = "rgba(0, 0, 0, 0.6)"; +export const GRAYED_OUT_AREA_COLOR = 'rgba(0, 0, 0, 0.6)' -export const SIM_LOW_COLOR = "rgba(197, 224, 180, 1)"; -export const SIM_MID_LOW_COLOR = "rgba(255, 230, 153, 1)"; -export const SIM_MID_HIGH_COLOR = "rgba(248, 203, 173, 1)"; -export const SIM_HIGH_COLOR = "rgba(249, 165, 165, 1)"; +export const SIM_LOW_COLOR = 'rgba(197, 224, 180, 1)' +export const SIM_MID_LOW_COLOR = 'rgba(255, 230, 153, 1)' +export const SIM_MID_HIGH_COLOR = 'rgba(248, 203, 173, 1)' +export const SIM_HIGH_COLOR = 'rgba(249, 165, 165, 1)' diff --git a/frontend/src/util/date-time.js b/frontend/src/util/date-time.js index 0b752600..d176ebef 100644 --- a/frontend/src/util/date-time.js +++ b/frontend/src/util/date-time.js @@ -7,7 +7,7 @@ * @returns {string} A human-friendly string version of that date and time. */ export function parseAndFormatDateTime(dateTimeString) { - return formatDateTime(parseDateTime(dateTimeString)); + return formatDateTime(parseDateTime(dateTimeString)) } /** @@ -19,7 +19,7 @@ export function parseAndFormatDateTime(dateTimeString) { * @returns {object} A Date object with the parsed date and time information as content. */ export function parseDateTime(dateTimeString) { - return new Date(dateTimeString + ".000Z"); + return new Date(dateTimeString + '.000Z') } /** @@ -29,34 +29,34 @@ export function parseDateTime(dateTimeString) { * @returns {string} A human-friendly string version of that date and time. */ export function formatDateTime(dateTime) { - let date; - const currentDate = new Date(); + let date + const currentDate = new Date() - date = - addPaddingToTwo(dateTime.getDay()) + - "/" + - addPaddingToTwo(dateTime.getMonth()) + - "/" + - addPaddingToTwo(dateTime.getFullYear()); + date = + addPaddingToTwo(dateTime.getDay()) + + '/' + + addPaddingToTwo(dateTime.getMonth()) + + '/' + + addPaddingToTwo(dateTime.getFullYear()) - if ( - dateTime.getFullYear() === currentDate.getFullYear() && - dateTime.getMonth() === currentDate.getMonth() - ) { - if (dateTime.getDate() === currentDate.getDate()) { - date = "Today"; - } else if (dateTime.getDate() === currentDate.getDate() - 1) { - date = "Yesterday"; + if ( + dateTime.getFullYear() === currentDate.getFullYear() && + dateTime.getMonth() === currentDate.getMonth() + ) { + if (dateTime.getDate() === currentDate.getDate()) { + date = 'Today' + } else if (dateTime.getDate() === currentDate.getDate() - 1) { + date = 'Yesterday' + } } - } - return ( - date + - ", " + - addPaddingToTwo(dateTime.getHours()) + - ":" + - addPaddingToTwo(dateTime.getMinutes()) - ); + return ( + date + + ', ' + + addPaddingToTwo(dateTime.getHours()) + + ':' + + addPaddingToTwo(dateTime.getMinutes()) + ) } /** @@ -66,27 +66,27 @@ export function formatDateTime(dateTime) { * @returns {string} A string representation of that amount of second, in the from of HH:MM:SS. */ export function convertSecondsToFormattedTime(seconds) { - if (seconds <= 0) { - return "0s"; - } + if (seconds <= 0) { + return '0s' + } - let hour = Math.floor(seconds / 3600); - let minute = Math.floor(seconds / 60) % 60; - let second = seconds % 60; + let hour = Math.floor(seconds / 3600) + let minute = Math.floor(seconds / 60) % 60 + let second = seconds % 60 - hour = isNaN(hour) ? 0 : hour; - minute = isNaN(minute) ? 0 : minute; - second = isNaN(second) ? 0 : second; + hour = isNaN(hour) ? 0 : hour + minute = isNaN(minute) ? 0 : minute + second = isNaN(second) ? 0 : second - if (hour === 0 && minute === 0) { - return second + "s"; - } else if (hour === 0) { - return minute + "m" + addPaddingToTwo(second) + "s"; - } else { - return ( - hour + "h" + addPaddingToTwo(minute) + "m" + addPaddingToTwo(second) + "s" - ); - } + if (hour === 0 && minute === 0) { + return second + 's' + } else if (hour === 0) { + return minute + 'm' + addPaddingToTwo(second) + 's' + } else { + return ( + hour + 'h' + addPaddingToTwo(minute) + 'm' + addPaddingToTwo(second) + 's' + ) + } } /** @@ -96,9 +96,9 @@ export function convertSecondsToFormattedTime(seconds) { * @returns {string} A string containing the padded integer. */ function addPaddingToTwo(integer) { - if (integer < 10) { - return "0" + integer.toString(); - } else { - return integer.toString(); - } + if (integer < 10) { + return '0' + integer.toString() + } else { + return integer.toString() + } } diff --git a/frontend/src/util/date-time.test.js b/frontend/src/util/date-time.test.js index 6c7a6b16..9274d4b7 100644 --- a/frontend/src/util/date-time.test.js +++ b/frontend/src/util/date-time.test.js @@ -1,35 +1,35 @@ -import { convertSecondsToFormattedTime, parseDateTime } from "./date-time"; +import { convertSecondsToFormattedTime, parseDateTime } from './date-time' -describe("date-time parsing", () => { - it("reads components properly", () => { - const dateString = "2017-09-27T20:55:01"; - const parsedDate = parseDateTime(dateString); +describe('date-time parsing', () => { + it('reads components properly', () => { + const dateString = '2017-09-27T20:55:01' + const parsedDate = parseDateTime(dateString) - expect(parsedDate.getUTCFullYear()).toEqual(2017); - expect(parsedDate.getUTCMonth()).toEqual(8); - expect(parsedDate.getUTCDate()).toEqual(27); - expect(parsedDate.getUTCHours()).toEqual(20); - expect(parsedDate.getUTCMinutes()).toEqual(55); - expect(parsedDate.getUTCSeconds()).toEqual(1); - }); -}); + expect(parsedDate.getUTCFullYear()).toEqual(2017) + expect(parsedDate.getUTCMonth()).toEqual(8) + expect(parsedDate.getUTCDate()).toEqual(27) + expect(parsedDate.getUTCHours()).toEqual(20) + expect(parsedDate.getUTCMinutes()).toEqual(55) + expect(parsedDate.getUTCSeconds()).toEqual(1) + }) +}) -describe("tick formatting", () => { - it("returns '0s' for numbers <= 0", () => { - expect(convertSecondsToFormattedTime(-1)).toEqual("0s"); - expect(convertSecondsToFormattedTime(0)).toEqual("0s"); - }); - it("returns only seconds for values under a minute", () => { - expect(convertSecondsToFormattedTime(1)).toEqual("1s"); - expect(convertSecondsToFormattedTime(59)).toEqual("59s"); - }); - it("returns seconds and minutes for values under an hour", () => { - expect(convertSecondsToFormattedTime(60)).toEqual("1m00s"); - expect(convertSecondsToFormattedTime(61)).toEqual("1m01s"); - expect(convertSecondsToFormattedTime(3599)).toEqual("59m59s"); - }); - it("returns full time for values over an hour", () => { - expect(convertSecondsToFormattedTime(3600)).toEqual("1h00m00s"); - expect(convertSecondsToFormattedTime(3601)).toEqual("1h00m01s"); - }); -}); +describe('tick formatting', () => { + it('returns \'0s\' for numbers <= 0', () => { + expect(convertSecondsToFormattedTime(-1)).toEqual('0s') + expect(convertSecondsToFormattedTime(0)).toEqual('0s') + }) + it('returns only seconds for values under a minute', () => { + expect(convertSecondsToFormattedTime(1)).toEqual('1s') + expect(convertSecondsToFormattedTime(59)).toEqual('59s') + }) + it('returns seconds and minutes for values under an hour', () => { + expect(convertSecondsToFormattedTime(60)).toEqual('1m00s') + expect(convertSecondsToFormattedTime(61)).toEqual('1m01s') + expect(convertSecondsToFormattedTime(3599)).toEqual('59m59s') + }) + it('returns full time for values over an hour', () => { + expect(convertSecondsToFormattedTime(3600)).toEqual('1h00m00s') + expect(convertSecondsToFormattedTime(3601)).toEqual('1h00m01s') + }) +}) diff --git a/frontend/src/util/jquery.js b/frontend/src/util/jquery.js index 12a64fc6..4976dd7d 100644 --- a/frontend/src/util/jquery.js +++ b/frontend/src/util/jquery.js @@ -3,6 +3,6 @@ * * This should be used instead of '$', to address ESLint warnings relating to undefined global variables. */ -const jQuery = window["$"]; +const jQuery = window['$'] -export default jQuery; +export default jQuery diff --git a/frontend/src/util/room-types.js b/frontend/src/util/room-types.js index 5cfe3887..ff69d013 100644 --- a/frontend/src/util/room-types.js +++ b/frontend/src/util/room-types.js @@ -1,7 +1,7 @@ export const ROOM_TYPE_TO_NAME_MAP = { - SERVER: "Server room", - HALLWAY: "Hallway", - OFFICE: "Office", - POWER: "Power room", - COOLING: "Cooling room" -}; + SERVER: 'Server room', + HALLWAY: 'Hallway', + OFFICE: 'Office', + POWER: 'Power room', + COOLING: 'Cooling room', +} diff --git a/frontend/src/util/simulation-load.js b/frontend/src/util/simulation-load.js index 95e17fed..40b65917 100644 --- a/frontend/src/util/simulation-load.js +++ b/frontend/src/util/simulation-load.js @@ -1,37 +1,32 @@ -import { - SIM_HIGH_COLOR, - SIM_LOW_COLOR, - SIM_MID_HIGH_COLOR, - SIM_MID_LOW_COLOR -} from "./colors"; +import { SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR } from './colors' export const LOAD_NAME_MAP = { - LOAD: "computational load", - TEMPERATURE: "temperature", - MEMORY: "memory use" -}; + LOAD: 'computational load', + TEMPERATURE: 'temperature', + MEMORY: 'memory use', +} export function convertLoadToSimulationColor(load) { - if (load <= 0.25) { - return SIM_LOW_COLOR; - } else if (load <= 0.5) { - return SIM_MID_LOW_COLOR; - } else if (load <= 0.75) { - return SIM_MID_HIGH_COLOR; - } else { - return SIM_HIGH_COLOR; - } + if (load <= 0.25) { + return SIM_LOW_COLOR + } else if (load <= 0.5) { + return SIM_MID_LOW_COLOR + } else if (load <= 0.75) { + return SIM_MID_HIGH_COLOR + } else { + return SIM_HIGH_COLOR + } } export function getStateLoad(loadMetric, state) { - switch (loadMetric) { - case "LOAD": - return state.loadFraction; - case "TEMPERATURE": - return state.temperatureC / 100.0; - case "MEMORY": - return state.inUseMemoryMb / 10000.0; - default: - return -1; - } + switch (loadMetric) { + case 'LOAD': + return state.loadFraction + case 'TEMPERATURE': + return state.temperatureC / 100.0 + case 'MEMORY': + return state.inUseMemoryMb / 10000.0 + default: + return -1 + } } diff --git a/frontend/src/util/tile-calculations.js b/frontend/src/util/tile-calculations.js index 95886eeb..3ef1cff6 100644 --- a/frontend/src/util/tile-calculations.js +++ b/frontend/src/util/tile-calculations.js @@ -1,261 +1,261 @@ export function deriveWallLocations(tiles) { - const { verticalWalls, horizontalWalls } = getWallSegments(tiles); - return mergeWallSegments(verticalWalls, horizontalWalls); + const { verticalWalls, horizontalWalls } = getWallSegments(tiles) + return mergeWallSegments(verticalWalls, horizontalWalls) } function getWallSegments(tiles) { - const verticalWalls = {}; - const horizontalWalls = {}; - - tiles.forEach(tile => { - const x = tile.positionX, - y = tile.positionY; - - for (let dX = -1; dX <= 1; dX++) { - for (let dY = -1; dY <= 1; dY++) { - if (Math.abs(dX) === Math.abs(dY)) { - continue; - } - - let doInsert = true; - for (let tileIndex in tiles) { - if ( - tiles[tileIndex].positionX === x + dX && - tiles[tileIndex].positionY === y + dY - ) { - doInsert = false; - break; - } - } - if (!doInsert) { - continue; + const verticalWalls = {} + const horizontalWalls = {} + + tiles.forEach(tile => { + const x = tile.positionX, + y = tile.positionY + + for (let dX = -1; dX <= 1; dX++) { + for (let dY = -1; dY <= 1; dY++) { + if (Math.abs(dX) === Math.abs(dY)) { + continue + } + + let doInsert = true + for (let tileIndex in tiles) { + if ( + tiles[tileIndex].positionX === x + dX && + tiles[tileIndex].positionY === y + dY + ) { + doInsert = false + break + } + } + if (!doInsert) { + continue + } + + if (dX === -1) { + if (verticalWalls[x] === undefined) { + verticalWalls[x] = [] + } + if (verticalWalls[x].indexOf(y) === -1) { + verticalWalls[x].push(y) + } + } else if (dX === 1) { + if (verticalWalls[x + 1] === undefined) { + verticalWalls[x + 1] = [] + } + if (verticalWalls[x + 1].indexOf(y) === -1) { + verticalWalls[x + 1].push(y) + } + } else if (dY === -1) { + if (horizontalWalls[y] === undefined) { + horizontalWalls[y] = [] + } + if (horizontalWalls[y].indexOf(x) === -1) { + horizontalWalls[y].push(x) + } + } else if (dY === 1) { + if (horizontalWalls[y + 1] === undefined) { + horizontalWalls[y + 1] = [] + } + if (horizontalWalls[y + 1].indexOf(x) === -1) { + horizontalWalls[y + 1].push(x) + } + } + } } + }) - if (dX === -1) { - if (verticalWalls[x] === undefined) { - verticalWalls[x] = []; - } - if (verticalWalls[x].indexOf(y) === -1) { - verticalWalls[x].push(y); - } - } else if (dX === 1) { - if (verticalWalls[x + 1] === undefined) { - verticalWalls[x + 1] = []; - } - if (verticalWalls[x + 1].indexOf(y) === -1) { - verticalWalls[x + 1].push(y); - } - } else if (dY === -1) { - if (horizontalWalls[y] === undefined) { - horizontalWalls[y] = []; - } - if (horizontalWalls[y].indexOf(x) === -1) { - horizontalWalls[y].push(x); - } - } else if (dY === 1) { - if (horizontalWalls[y + 1] === undefined) { - horizontalWalls[y + 1] = []; - } - if (horizontalWalls[y + 1].indexOf(x) === -1) { - horizontalWalls[y + 1].push(x); - } - } - } - } - }); - - return { verticalWalls, horizontalWalls }; + return { verticalWalls, horizontalWalls } } function mergeWallSegments(vertical, horizontal) { - const result = []; - const walls = [vertical, horizontal]; - - for (let i = 0; i < 2; i++) { - const wallList = walls[i]; - for (let a in wallList) { - a = parseInt(a, 10); - - wallList[a].sort((a, b) => { - return a - b; - }); - - let startPos = wallList[a][0]; - const isHorizontal = i === 1; - - if (wallList[a].length === 1) { - const startPosX = isHorizontal ? startPos : a; - const startPosY = isHorizontal ? a : startPos; - result.push({ - startPosX, - startPosY, - isHorizontal, - length: 1 - }); - } else { - let consecutiveCount = 1; - for (let b = 0; b < wallList[a].length - 1; b++) { - if (b + 1 === wallList[a].length - 1) { - if (wallList[a][b + 1] - wallList[a][b] > 1) { - const startPosX = isHorizontal ? startPos : a; - const startPosY = isHorizontal ? a : startPos; - result.push({ - startPosX, - startPosY, - isHorizontal, - length: consecutiveCount - }); - consecutiveCount = 0; - startPos = wallList[a][b + 1]; + const result = [] + const walls = [vertical, horizontal] + + for (let i = 0; i < 2; i++) { + const wallList = walls[i] + for (let a in wallList) { + a = parseInt(a, 10) + + wallList[a].sort((a, b) => { + return a - b + }) + + let startPos = wallList[a][0] + const isHorizontal = i === 1 + + if (wallList[a].length === 1) { + const startPosX = isHorizontal ? startPos : a + const startPosY = isHorizontal ? a : startPos + result.push({ + startPosX, + startPosY, + isHorizontal, + length: 1, + }) + } else { + let consecutiveCount = 1 + for (let b = 0; b < wallList[a].length - 1; b++) { + if (b + 1 === wallList[a].length - 1) { + if (wallList[a][b + 1] - wallList[a][b] > 1) { + const startPosX = isHorizontal ? startPos : a + const startPosY = isHorizontal ? a : startPos + result.push({ + startPosX, + startPosY, + isHorizontal, + length: consecutiveCount, + }) + consecutiveCount = 0 + startPos = wallList[a][b + 1] + } + const startPosX = isHorizontal ? startPos : a + const startPosY = isHorizontal ? a : startPos + result.push({ + startPosX, + startPosY, + isHorizontal, + length: consecutiveCount + 1, + }) + break + } else if (wallList[a][b + 1] - wallList[a][b] > 1) { + const startPosX = isHorizontal ? startPos : a + const startPosY = isHorizontal ? a : startPos + result.push({ + startPosX, + startPosY, + isHorizontal, + length: consecutiveCount, + }) + startPos = wallList[a][b + 1] + consecutiveCount = 0 + } + consecutiveCount++ + } } - const startPosX = isHorizontal ? startPos : a; - const startPosY = isHorizontal ? a : startPos; - result.push({ - startPosX, - startPosY, - isHorizontal, - length: consecutiveCount + 1 - }); - break; - } else if (wallList[a][b + 1] - wallList[a][b] > 1) { - const startPosX = isHorizontal ? startPos : a; - const startPosY = isHorizontal ? a : startPos; - result.push({ - startPosX, - startPosY, - isHorizontal, - length: consecutiveCount - }); - startPos = wallList[a][b + 1]; - consecutiveCount = 0; - } - consecutiveCount++; } - } } - } - return result; + return result } export function deriveValidNextTilePositions(rooms, selectedTiles) { - const result = [], - newPosition = { x: 0, y: 0 }; - let isSurroundingTile; - - selectedTiles.forEach(tile => { - const x = tile.positionX; - const y = tile.positionY; - result.push({ x, y }); - - for (let dX = -1; dX <= 1; dX++) { - for (let dY = -1; dY <= 1; dY++) { - if (Math.abs(dX) === Math.abs(dY)) { - continue; - } - - newPosition.x = x + dX; - newPosition.y = y + dY; - - isSurroundingTile = true; - for (let index in selectedTiles) { - if ( - selectedTiles[index].positionX === newPosition.x && - selectedTiles[index].positionY === newPosition.y - ) { - isSurroundingTile = false; - break; - } - } - - if ( - isSurroundingTile && - findPositionInRooms(rooms, newPosition.x, newPosition.y) === -1 - ) { - result.push({ x: newPosition.x, y: newPosition.y }); + const result = [], + newPosition = { x: 0, y: 0 } + let isSurroundingTile + + selectedTiles.forEach(tile => { + const x = tile.positionX + const y = tile.positionY + result.push({ x, y }) + + for (let dX = -1; dX <= 1; dX++) { + for (let dY = -1; dY <= 1; dY++) { + if (Math.abs(dX) === Math.abs(dY)) { + continue + } + + newPosition.x = x + dX + newPosition.y = y + dY + + isSurroundingTile = true + for (let index in selectedTiles) { + if ( + selectedTiles[index].positionX === newPosition.x && + selectedTiles[index].positionY === newPosition.y + ) { + isSurroundingTile = false + break + } + } + + if ( + isSurroundingTile && + findPositionInRooms(rooms, newPosition.x, newPosition.y) === -1 + ) { + result.push({ x: newPosition.x, y: newPosition.y }) + } + } } - } - } - }); + }) - return result; + return result } export function findPositionInPositions(positions, positionX, positionY) { - for (let i = 0; i < positions.length; i++) { - const position = positions[i]; - if (positionX === position.x && positionY === position.y) { - return i; + for (let i = 0; i < positions.length; i++) { + const position = positions[i] + if (positionX === position.x && positionY === position.y) { + return i + } } - } - return -1; + return -1 } export function findPositionInRooms(rooms, positionX, positionY) { - for (let i = 0; i < rooms.length; i++) { - const room = rooms[i]; - if (findPositionInTiles(room.tiles, positionX, positionY) !== -1) { - return i; + for (let i = 0; i < rooms.length; i++) { + const room = rooms[i] + if (findPositionInTiles(room.tiles, positionX, positionY) !== -1) { + return i + } } - } - return -1; + return -1 } function findPositionInTiles(tiles, positionX, positionY) { - let index = -1; + let index = -1 - for (let i = 0; i < tiles.length; i++) { - const tile = tiles[i]; - if (positionX === tile.positionX && positionY === tile.positionY) { - index = i; - break; + for (let i = 0; i < tiles.length; i++) { + const tile = tiles[i] + if (positionX === tile.positionX && positionY === tile.positionY) { + index = i + break + } } - } - return index; + return index } export function findTileWithPosition(tiles, positionX, positionY) { - for (let i = 0; i < tiles.length; i++) { - if (tiles[i].positionX === positionX && tiles[i].positionY === positionY) { - return tiles[i]; + for (let i = 0; i < tiles.length; i++) { + if (tiles[i].positionX === positionX && tiles[i].positionY === positionY) { + return tiles[i] + } } - } - return null; + return null } export function calculateRoomListBounds(rooms) { - const min = { x: Number.MAX_VALUE, y: Number.MAX_VALUE }; - const max = { x: -1, y: -1 }; - - rooms.forEach(room => { - room.tiles.forEach(tile => { - if (tile.positionX < min.x) { - min.x = tile.positionX; - } - if (tile.positionY < min.y) { - min.y = tile.positionY; - } - - if (tile.positionX > max.x) { - max.x = tile.positionX; - } - if (tile.positionY > max.y) { - max.y = tile.positionY; - } - }); - }); - - max.x++; - max.y++; - - const center = { - x: min.x + (max.x - min.x) / 2.0, - y: min.y + (max.y - min.y) / 2.0 - }; - - return { min, center, max }; + const min = { x: Number.MAX_VALUE, y: Number.MAX_VALUE } + const max = { x: -1, y: -1 } + + rooms.forEach(room => { + room.tiles.forEach(tile => { + if (tile.positionX < min.x) { + min.x = tile.positionX + } + if (tile.positionY < min.y) { + min.y = tile.positionY + } + + if (tile.positionX > max.x) { + max.x = tile.positionX + } + if (tile.positionY > max.y) { + max.y = tile.positionY + } + }) + }) + + max.x++ + max.y++ + + const center = { + x: min.x + (max.x - min.x) / 2.0, + y: min.y + (max.y - min.y) / 2.0, + } + + return { min, center, max } } diff --git a/frontend/src/util/timeline.js b/frontend/src/util/timeline.js index e20d5823..21258e23 100644 --- a/frontend/src/util/timeline.js +++ b/frontend/src/util/timeline.js @@ -1,19 +1,19 @@ export function convertTickToPercentage(tick, maxTick) { - if (maxTick === 0) { - return "0%"; - } else if (tick > maxTick) { - return maxTick / (maxTick + 1) * 100 + "%"; - } + if (maxTick === 0) { + return '0%' + } else if (tick > maxTick) { + return maxTick / (maxTick + 1) * 100 + '%' + } - return tick / (maxTick + 1) * 100 + "%"; + return tick / (maxTick + 1) * 100 + '%' } export function getDatacenterIdOfTick(tick, sections) { - for (let i in sections.reverse()) { - if (tick >= sections[i].startTick) { - return sections[i].datacenterId; + for (let i in sections.reverse()) { + if (tick >= sections[i].startTick) { + return sections[i].datacenterId + } } - } - return -1; + return -1 } diff --git a/mongodb/docker-compose.yml b/mongodb/docker-compose.yml deleted file mode 100644 index 87af4d6f..00000000 --- a/mongodb/docker-compose.yml +++ /dev/null @@ -1,31 +0,0 @@ -version: "3" -services: - mongo: - build: - context: ./ - restart: on-failure - environment: - MONGO_INITDB_ROOT_USERNAME: root - MONGO_INITDB_ROOT_PASSWORD: rootpassword - MONGO_INITDB_DATABASE: admin - OPENDC_DB: opendc - OPENDC_DB_USERNAME: opendc - OPENDC_DB_PASSWORD: opendcpassword - ports: - - 27017:27017 - # Uncomment for persistent deployment - #volumes: - # - mongo-volume:/data/db - - mongo-express: - image: mongo-express - restart: on-failure - ports: - - 8082:8081 - environment: - ME_CONFIG_MONGODB_ADMINUSERNAME: root - ME_CONFIG_MONGODB_ADMINPASSWORD: rootpassword - -volumes: - mongo-volume: - external: false diff --git a/mongodb/mongo-init-opendc-db.sh b/mongodb/mongo-init-opendc-db.sh index 5ff62f8b..cda4ec93 100644 --- a/mongodb/mongo-init-opendc-db.sh +++ b/mongodb/mongo-init-opendc-db.sh @@ -22,15 +22,6 @@ $MONGO_CMD --eval 'db.createCollection("prefabs");' echo 'Loading test data' -$MONGO_CMD --eval 'db.users.insertOne( - { - "googleId": "23483578932789231", - "email": "jorgos.andreadis@gmail.com", - "givenName": "Jorgos", - "familyName": "Andreadis", - "authorizations": [] - });' - $MONGO_CMD --eval 'db.prefabs.insertOne( { "type": "rack", diff --git a/web-server/main.py b/web-server/main.py index 412bf3f9..7f499b34 100644 --- a/web-server/main.py +++ b/web-server/main.py @@ -26,10 +26,11 @@ else: # Set up database if not testing if not TEST_MODE: - database.DB.initialize_database(user=os.environ['OPENDC_DB_USERNAME'], - password=os.environ['OPENDC_DB_PASSWORD'], - database=os.environ['OPENDC_DB'], - host='localhost') + database.DB.initialize_database( + user=os.environ['OPENDC_DB_USERNAME'], + password=os.environ['OPENDC_DB_PASSWORD'], + database=os.environ['OPENDC_DB'], + host=os.environ['OPENDC_DB_HOST'] if 'OPENDC_DB_HOST' in os.environ else 'localhost') # Set up the core app FLASK_CORE_APP = Flask(__name__, static_url_path='', static_folder=STATIC_ROOT) @@ -83,8 +84,8 @@ def sign_in(): data = {'isNewUser': user.obj is None} - if user is not None: - data['userId'] = user.id + if user.obj is not None: + data['userId'] = user.get_id() return jsonify(**data) @@ -151,10 +152,10 @@ def receive_message(message): """"Receive a SocketIO request""" (req, res) = _process_message(message) - print(f'Socket:\t{req.method} to `/{req.path}` resulted in {res.status["code"]}: {res.status["description"]}') + print(f'Socket: {req.method} to `/{req.path}` resulted in {res.status["code"]}: {res.status["description"]}') sys.stdout.flush() - flask_socketio.emit('res', res.to_JSON(), json=True) + flask_socketio.emit('response', res.to_JSON(), json=True) def _process_message(message): diff --git a/web-server/opendc/api/v2/simulations/simulationId/topologies/endpoint.py b/web-server/opendc/api/v2/simulations/simulationId/topologies/endpoint.py index ecf80353..09c84019 100644 --- a/web-server/opendc/api/v2/simulations/simulationId/topologies/endpoint.py +++ b/web-server/opendc/api/v2/simulations/simulationId/topologies/endpoint.py @@ -9,12 +9,7 @@ from opendc.util.database import Database def POST(request): """Add a new Topology to the specified simulation and return it""" - request.check_required_parameters(path={'simulationId': 'string'}, - body={ - 'topology': { - 'name': 'string' - } - }) + request.check_required_parameters(path={'simulationId': 'string'}, body={'topology': {'name': 'string'}}) simulation = Simulation.from_id(request.params_path['simulationId']) diff --git a/web-server/opendc/api/v2/topologies/topologyId/endpoint.py b/web-server/opendc/api/v2/topologies/topologyId/endpoint.py index a4f71ed6..84f20903 100644 --- a/web-server/opendc/api/v2/topologies/topologyId/endpoint.py +++ b/web-server/opendc/api/v2/topologies/topologyId/endpoint.py @@ -9,7 +9,7 @@ from opendc.util.rest import Response def GET(request): """Get this Topology.""" - request.check_required_parameters(path={'topologyId': 'int'}) + request.check_required_parameters(path={'topologyId': 'string'}) topology = Topology.from_id(request.params_path['topologyId']) @@ -21,7 +21,7 @@ def GET(request): def PUT(request): """Update this topology""" - request.check_required_parameters(path={'topologyId': 'int'}, body={'topology': {'name': 'string', 'rooms': {}}}) + request.check_required_parameters(path={'topologyId': 'string'}, body={'topology': {'name': 'string', 'rooms': {}}}) topology = Topology.from_id(request.params_path['topologyId']) topology.check_exists() @@ -38,7 +38,7 @@ def PUT(request): def DELETE(request): """Delete this topology""" - request.check_required_parameters(path={'topologyId': 'int'}) + request.check_required_parameters(path={'topologyId': 'string'}) topology = Topology.from_id(request.params_path['topologyId']) diff --git a/web-server/opendc/models/experiment.py b/web-server/opendc/models/experiment.py index ac606d64..36b5d415 100644 --- a/web-server/opendc/models/experiment.py +++ b/web-server/opendc/models/experiment.py @@ -21,4 +21,4 @@ class Experiment(Model): authorizations = list( filter(lambda x: str(x['simulationId']) == str(self.obj['simulationId']), user.obj['authorizations'])) if len(authorizations) == 0 or (edit_access and authorizations[0]['authorizationLevel'] == 'VIEW'): - raise ClientError(Response(403, "Forbidden from retrieving/editing experiment.")) + raise ClientError(Response(403, 'Forbidden from retrieving/editing experiment.')) diff --git a/web-server/opendc/models/model.py b/web-server/opendc/models/model.py index 1935638f..f42134bf 100644 --- a/web-server/opendc/models/model.py +++ b/web-server/opendc/models/model.py @@ -1,3 +1,5 @@ +from uuid import uuid4 + from opendc.util.database import DB from opendc.util.exceptions import ClientError from opendc.util.rest import Response @@ -23,7 +25,7 @@ class Model: def get_id(self): """Returns the ID of the enclosed object.""" - return self.obj['_id'] + return str(self.obj['_id']) def check_exists(self): """Raises an error if the enclosed object does not exist.""" @@ -35,12 +37,13 @@ class Model: self.obj[key] = value def insert(self): - """Inserts the enclosed object and updates the internal reference to the newly inserted object.""" - self.obj = DB.insert(self.obj, self.collection_name) + """Inserts the enclosed object and generates a UUID for it.""" + self.obj['_id'] = str(uuid4()) + DB.insert(self.obj, self.collection_name) def update(self): """Updates the enclosed object and updates the internal reference to the newly inserted object.""" - self.obj = DB.update(self.get_id(), self.obj, self.collection_name) + DB.update(self.get_id(), self.obj, self.collection_name) def delete(self): """Deletes the enclosed object in the database.""" diff --git a/web-server/opendc/models/simulation.py b/web-server/opendc/models/simulation.py index 86aa4726..9a2770cf 100644 --- a/web-server/opendc/models/simulation.py +++ b/web-server/opendc/models/simulation.py @@ -25,7 +25,7 @@ class Simulation(Model): def get_all_authorizations(self): """Get all user IDs having access to this simulation.""" return [ - user['_id'] for user in DB.fetch_all({'authorizations': { - 'simulationId': self.get_id() + str(user['_id']) for user in DB.fetch_all({'authorizations': { + 'simulationId': self.obj['_id'] }}, User.collection_name) ] |