diff options
Diffstat (limited to 'frontend')
163 files changed, 1059 insertions, 1209 deletions
diff --git a/frontend/package.json b/frontend/package.json index 174b2f39..df47d11b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,11 +18,12 @@ "private": true, "proxy": "http://localhost:8082", "dependencies": { - "approximate-number": "~2.0.0", + "approximate-number": "^2.0.0", "classnames": "~2.2.5", "husky": "~4.2.5", "konva": "~6.0.0", "lint-staged": "~10.2.2", + "mathjs": "^7.1.0", "node-sass-chokidar": "~1.4.0", "npm-run-all": "~4.1.2", "prettier": "~2.0.5", @@ -37,6 +38,7 @@ "react-router-dom": "~5.1.2", "react-scripts": "~3.4.1", "react-shortcuts": "~2.1.0", + "recharts": "^1.8.5", "redux": "~4.0.5", "redux-localstorage": "~0.4.1", "redux-logger": "~3.0.6", @@ -54,7 +56,7 @@ ] }, "scripts": { - "format": "prettier --write src/**/*.js", + "format": "prettier --write src", "precommit": "lint-staged", "build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", diff --git a/frontend/src/actions/topology/building.js b/frontend/src/actions/topology/building.js index d6c53af9..72deda6f 100644 --- a/frontend/src/actions/topology/building.js +++ b/frontend/src/actions/topology/building.js @@ -1,11 +1,9 @@ export const SET_CURRENT_TOPOLOGY = 'SET_CURRENT_TOPOLOGY' export const START_NEW_ROOM_CONSTRUCTION = 'START_NEW_ROOM_CONSTRUCTION' -export const START_NEW_ROOM_CONSTRUCTION_SUCCEEDED = - 'START_NEW_ROOM_CONSTRUCTION_SUCCEEDED' +export const START_NEW_ROOM_CONSTRUCTION_SUCCEEDED = 'START_NEW_ROOM_CONSTRUCTION_SUCCEEDED' export const FINISH_NEW_ROOM_CONSTRUCTION = 'FINISH_NEW_ROOM_CONSTRUCTION' export const CANCEL_NEW_ROOM_CONSTRUCTION = 'CANCEL_NEW_ROOM_CONSTRUCTION' -export const CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED = - 'CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED' +export const CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED = 'CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED' export const START_ROOM_EDIT = 'START_ROOM_EDIT' export const FINISH_ROOM_EDIT = 'FINISH_ROOM_EDIT' export const ADD_TILE = 'ADD_TILE' @@ -34,9 +32,7 @@ export function startNewRoomConstructionSucceeded(roomId) { export function finishNewRoomConstruction() { return (dispatch, getState) => { const { objects, construction } = getState() - if ( - objects.room[construction.currentRoomInConstruction].tileIds.length === 0 - ) { + if (objects.room[construction.currentRoomInConstruction].tileIds.length === 0) { dispatch(cancelNewRoomConstruction()) return } @@ -79,8 +75,7 @@ export function toggleTileAtLocation(positionX, positionY) { return (dispatch, getState) => { const { objects, construction } = getState() - const tileIds = - objects.room[construction.currentRoomInConstruction].tileIds + const tileIds = objects.room[construction.currentRoomInConstruction].tileIds for (let index in tileIds) { if ( objects.tile[tileIds[index]].positionX === positionX && diff --git a/frontend/src/actions/topology/room.js b/frontend/src/actions/topology/room.js index 939b475a..52cba680 100644 --- a/frontend/src/actions/topology/room.js +++ b/frontend/src/actions/topology/room.js @@ -29,7 +29,7 @@ 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 tiles = currentRoom.tileIds.map((tileId) => objects.tile[tileId]) const tile = findTileWithPosition(tiles, positionX, positionY) if (tile !== null) { diff --git a/frontend/src/api/routes/token-signin.js b/frontend/src/api/routes/token-signin.js index 7cff093a..7553d043 100644 --- a/frontend/src/api/routes/token-signin.js +++ b/frontend/src/api/routes/token-signin.js @@ -1,7 +1,5 @@ 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/socket.js b/frontend/src/api/socket.js index 759c119e..96034021 100644 --- a/frontend/src/api/socket.js +++ b/frontend/src/api/socket.js @@ -6,9 +6,9 @@ let requestIdCounter = 0 const callbacks = {} export function setupSocketConnection(onConnect) { - const apiUrl = process.env.REACT_APP_API_URL || window.location.hostname + ':' + window.location.port; + const apiUrl = process.env.REACT_APP_API_URL || window.location.hostname + ':' + window.location.port - socket = io.connect(window.location.protocol + '//' + apiUrl); + socket = io.connect(window.location.protocol + '//' + apiUrl) socket.on('connect', onConnect) socket.on('response', onSocketResponse) } diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js index 03daa692..7efea9b0 100644 --- a/frontend/src/components/app/map/LoadingScreen.js +++ b/frontend/src/components/app/map/LoadingScreen.js @@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome' const LoadingScreen = () => ( <div className="display-4"> - <FontAwesome name="refresh" className="mr-4" spin/> + <FontAwesome name="refresh" className="mr-4" spin /> Loading your project... </div> ) diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js index 286920e2..0a970701 100644 --- a/frontend/src/components/app/map/MapConstants.js +++ b/frontend/src/components/app/map/MapConstants.js @@ -5,8 +5,7 @@ export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5 export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3 -export const OBJECT_SIZE_IN_PIXELS = - TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 +export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 export const GRID_LINE_WIDTH_IN_PIXELS = 2 export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8 diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js index f1c2b211..cecb34de 100644 --- a/frontend/src/components/app/map/MapStageComponent.js +++ b/frontend/src/components/app/map/MapStageComponent.js @@ -43,19 +43,12 @@ class MapStageComponent extends React.Component { } updateDimensions() { - this.props.setMapDimensions( - jQuery(window).width(), - jQuery(window).height() - NAVBAR_HEIGHT, - ) + 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, - ) + this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY) } updateMousePosition() { @@ -83,21 +76,14 @@ class MapStageComponent extends React.Component { } moveWithDelta(deltaX, deltaY) { - this.props.setMapPositionWithBoundsCheck( - this.props.mapPosition.x + deltaX, - this.props.mapPosition.y + 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" - > + <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body"> <Stage - ref={stage => { + ref={(stage) => { this.stage = stage }} width={this.props.mapDimensions.width} @@ -105,15 +91,9 @@ class MapStageComponent extends React.Component { 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} - /> + <MapLayer /> + <RoomHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} /> + <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} /> </Provider> </Stage> </Shortcuts> diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js index d166bcc8..8487f47b 100644 --- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js +++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js @@ -6,7 +6,7 @@ const ExportCanvasComponent = () => ( title="Export Canvas to PNG Image" onClick={() => window['exportCanvasToImage']()} > - <span className="fa fa-camera"/> + <span className="fa fa-camera" /> </button> ) diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js index daaf8ec6..54709482 100644 --- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js +++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js @@ -3,10 +3,7 @@ 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 }} - > + <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}> {TILE_SIZE_IN_METERS}m </div> ) diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js index e3bb1dbb..e0e4d554 100644 --- a/frontend/src/components/app/map/controls/ToolPanelComponent.js +++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js @@ -5,8 +5,8 @@ import './ToolPanelComponent.css' const ToolPanelComponent = () => ( <div className="tool-panel"> - <ZoomControlContainer/> - <ExportCanvasComponent/> + <ZoomControlContainer /> + <ExportCanvasComponent /> </div> ) diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js index bd6527a6..65944bea 100644 --- a/frontend/src/components/app/map/controls/ZoomControlComponent.js +++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js @@ -3,21 +3,21 @@ import React from 'react' const ZoomControlComponent = ({ zoomInOnCenter }) => { return ( <span> - <button - className="btn btn-default btn-circle btn-sm mr-1" - title="Zoom in" - onClick={() => zoomInOnCenter(true)} - > - <span className="fa fa-plus"/> - </button> - <button - className="btn btn-default btn-circle btn-sm mr-1" - title="Zoom out" - onClick={() => zoomInOnCenter(false)} - > - <span className="fa fa-minus"/> - </button> - </span> + <button + className="btn btn-default btn-circle btn-sm mr-1" + title="Zoom in" + onClick={() => zoomInOnCenter(true)} + > + <span className="fa fa-plus" /> + </button> + <button + className="btn btn-default btn-circle btn-sm mr-1" + title="Zoom out" + onClick={() => zoomInOnCenter(false)} + > + <span className="fa fa-minus" /> + </button> + </span> ) } diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js index 556d6a7b..8ccfe584 100644 --- a/frontend/src/components/app/map/elements/Backdrop.js +++ b/frontend/src/components/app/map/elements/Backdrop.js @@ -3,14 +3,6 @@ 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} - /> -) +const Backdrop = () => <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} /> export default Backdrop diff --git a/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js index 6e56e059..8c573a6f 100644 --- a/frontend/src/components/app/map/elements/RackFillBar.js +++ b/frontend/src/components/app/map/elements/RackFillBar.js @@ -21,27 +21,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => { 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 + (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 + (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight return ( <Group> @@ -50,22 +37,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => { y={startY} width={width} height={fullHeight} - fill={ - type === 'space' - ? RACK_SPACE_BAR_BACKGROUND_COLOR - : RACK_ENERGY_BAR_BACKGROUND_COLOR - } + 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 - } + fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR} /> <ImageComponent src={'/img/topology/rack-' + type + '-icon.png'} diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js index dd6e0beb..be3a00a8 100644 --- a/frontend/src/components/app/map/elements/TilePlusIcon.js +++ b/frontend/src/components/app/map/elements/TilePlusIcon.js @@ -10,16 +10,12 @@ const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => { 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, + 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, + pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale, pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, ], ] diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js index d1ba6157..8aa2aebf 100644 --- a/frontend/src/components/app/map/elements/WallSegment.js +++ b/frontend/src/components/app/map/elements/WallSegment.js @@ -22,14 +22,7 @@ const WallSegment = ({ wallSegment }) => { ] } - 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 = { diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js index 10554834..ebc00244 100644 --- a/frontend/src/components/app/map/groups/GridGroup.js +++ b/frontend/src/components/app/map/groups/GridGroup.js @@ -4,13 +4,13 @@ import { GRID_COLOR } from '../../../../util/colors' import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i) -const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ +const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [ 0, index * TILE_SIZE_IN_PIXELS, MAP_SIZE_IN_PIXELS, index * TILE_SIZE_IN_PIXELS, ]) -const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ +const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [ index * TILE_SIZE_IN_PIXELS, 0, index * TILE_SIZE_IN_PIXELS, @@ -19,9 +19,7 @@ const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ const GridGroup = () => ( <Group> - {HORIZONTAL_POINT_PAIRS.concat( - VERTICAL_POINT_PAIRS, - ).map((points, index) => ( + {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => ( <Line key={index} points={points} diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js index 5d4ee5e2..eb6dc24a 100644 --- a/frontend/src/components/app/map/groups/RackGroup.js +++ b/frontend/src/components/app/map/groups/RackGroup.js @@ -9,22 +9,10 @@ import TileObject from '../elements/TileObject' const RackGroup = ({ tile }) => { return ( <Group> - <TileObject - positionX={tile.positionX} - positionY={tile.positionY} - color={RACK_BACKGROUND_COLOR} - /> + <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} /> <Group> - <RackSpaceFillContainer - tileId={tile._id} - positionX={tile.positionX} - positionY={tile.positionY} - /> - <RackEnergyFillContainer - tileId={tile._id} - positionX={tile.positionX} - positionY={tile.positionY} - /> + <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} /> + <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} /> </Group> </Group> ) diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js index 4e3c7410..1fd54687 100644 --- a/frontend/src/components/app/map/groups/RoomGroup.js +++ b/frontend/src/components/app/map/groups/RoomGroup.js @@ -5,17 +5,12 @@ 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, - }) => { +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}/> + {room.tileIds.map((tileId) => ( + <TileContainer key={tileId} tileId={tileId} newTile={true} /> ))} </Group> ) @@ -25,26 +20,23 @@ const RoomGroup = ({ <Group onClick={onClick}> {(() => { if ( - (interactionLevel.mode === 'RACK' || - interactionLevel.mode === 'MACHINE') && + (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}/>, + .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}/>), + .filter((tileId) => tileId === interactionLevel.tileId) + .map((tileId) => <TileContainer key={tileId} tileId={tileId} />), ] } else { - return room.tileIds.map(tileId => ( - <TileContainer key={tileId} tileId={tileId}/> - )) + return room.tileIds.map((tileId) => <TileContainer key={tileId} tileId={tileId} />) } })()} - <WallContainer roomId={room._id}/> + <WallContainer roomId={room._id} /> </Group> ) } diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js index e984f05b..1e106823 100644 --- a/frontend/src/components/app/map/groups/TileGroup.js +++ b/frontend/src/components/app/map/groups/TileGroup.js @@ -9,7 +9,7 @@ import RoomTile from '../elements/RoomTile' const TileGroup = ({ tile, newTile, roomLoad, onClick }) => { let tileObject if (tile.rackId) { - tileObject = <RackContainer tile={tile}/> + tileObject = <RackContainer tile={tile} /> } else { tileObject = null } @@ -21,7 +21,7 @@ const TileGroup = ({ tile, newTile, roomLoad, onClick }) => { return ( <Group onClick={() => onClick(tile)}> - <RoomTile tile={tile} color={color}/> + <RoomTile tile={tile} color={color} /> {tileObject} </Group> ) diff --git a/frontend/src/components/app/map/groups/TopologyGroup.js b/frontend/src/components/app/map/groups/TopologyGroup.js index a40a1d41..6096fc8b 100644 --- a/frontend/src/components/app/map/groups/TopologyGroup.js +++ b/frontend/src/components/app/map/groups/TopologyGroup.js @@ -6,14 +6,14 @@ import Shapes from '../../../../shapes/index' const TopologyGroup = ({ topology, interactionLevel }) => { if (!topology) { - return <Group/> + return <Group /> } if (interactionLevel.mode === 'BUILDING') { return ( <Group> - {topology.roomIds.map(roomId => ( - <RoomContainer key={roomId} roomId={roomId}/> + {topology.roomIds.map((roomId) => ( + <RoomContainer key={roomId} roomId={roomId} /> ))} </Group> ) @@ -22,12 +22,16 @@ const TopologyGroup = ({ topology, interactionLevel }) => { return ( <Group> {topology.roomIds - .filter(roomId => roomId !== interactionLevel.roomId) - .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)} - {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null} + .filter((roomId) => roomId !== interactionLevel.roomId) + .map((roomId) => ( + <RoomContainer key={roomId} roomId={roomId} /> + ))} + {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null} {topology.roomIds - .filter(roomId => roomId === interactionLevel.roomId) - .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)} + .filter((roomId) => roomId === interactionLevel.roomId) + .map((roomId) => ( + <RoomContainer key={roomId} roomId={roomId} /> + ))} </Group> ) } diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js index 81c72d94..7b0f5ca0 100644 --- a/frontend/src/components/app/map/groups/WallGroup.js +++ b/frontend/src/components/app/map/groups/WallGroup.js @@ -9,7 +9,7 @@ const WallGroup = ({ tiles }) => { return ( <Group> {deriveWallLocations(tiles).map((wallSegment, index) => ( - <WallSegment key={index} wallSegment={wallSegment}/> + <WallSegment key={index} wallSegment={wallSegment} /> ))} </Group> ) diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js index 25c9c412..bead87de 100644 --- a/frontend/src/components/app/map/layers/HoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js @@ -26,18 +26,13 @@ class HoverLayerComponent extends React.Component { } const positionX = Math.floor( - (this.props.mouseX - this.props.mapPosition.x) / - (this.props.mapScale * TILE_SIZE_IN_PIXELS), + (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), + (this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS) ) - if ( - positionX !== this.state.positionX || - positionY !== this.state.positionY - ) { + if (positionX !== this.state.positionX || positionY !== this.state.positionY) { this.setState({ positionX, positionY, @@ -48,15 +43,11 @@ class HoverLayerComponent extends React.Component { render() { if (!this.props.isEnabled()) { - return <Layer/> + return <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 + 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}> @@ -66,16 +57,15 @@ class HoverLayerComponent extends React.Component { scale={this.props.mapScale} isValid={this.state.validity} onClick={() => - this.state.validity - ? this.props.onClick(this.state.positionX, this.state.positionY) - : undefined} + 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, - }) + pixelX, + pixelY, + scale: this.props.mapScale, + }) : undefined} </Layer> ) diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js index 940057f9..8ee14c9c 100644 --- a/frontend/src/components/app/map/layers/MapLayerComponent.js +++ b/frontend/src/components/app/map/layers/MapLayerComponent.js @@ -6,15 +6,10 @@ import GridGroup from '../groups/GridGroup' const MapLayerComponent = ({ mapPosition, mapScale }) => ( <Layer> - <Group - x={mapPosition.x} - y={mapPosition.y} - scaleX={mapScale} - scaleY={mapScale} - > - <Backdrop/> - <TopologyContainer/> - <GridGroup/> + <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}> + <Backdrop /> + <TopologyContainer /> + <GridGroup /> </Group> </Layer> ) diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js index 31689635..661fc255 100644 --- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js @@ -2,7 +2,7 @@ import React from 'react' import TilePlusIcon from '../elements/TilePlusIcon' import HoverLayerComponent from './HoverLayerComponent' -const ObjectHoverLayerComponent = props => ( +const ObjectHoverLayerComponent = (props) => ( <HoverLayerComponent {...props}> <TilePlusIcon {...props} /> </HoverLayerComponent> diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js index d3d5e9b2..887e2891 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' -const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} /> +const RoomHoverLayerComponent = (props) => <HoverLayerComponent {...props} /> export default RoomHoverLayerComponent diff --git a/frontend/src/components/app/results/MetricChartComponent.js b/frontend/src/components/app/results/MetricChartComponent.js new file mode 100644 index 00000000..29a4676a --- /dev/null +++ b/frontend/src/components/app/results/MetricChartComponent.js @@ -0,0 +1,67 @@ +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 MetricChartComponent = ({ 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') + } + + 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> +) + +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> +) + +export default MetricChartComponent diff --git a/frontend/src/components/app/results/PortfolioResultsComponent.js b/frontend/src/components/app/results/PortfolioResultsComponent.js new file mode 100644 index 00000000..8c778098 --- /dev/null +++ b/frontend/src/components/app/results/PortfolioResultsComponent.js @@ -0,0 +1,78 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Bar, BarChart, CartesianGrid, ErrorBar, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts' +import { AVAILABLE_METRICS, METRIC_NAMES } from '../../../util/available-metrics' +import { mean, std } from 'mathjs' +import Shapes from '../../../shapes/index' +import approx from 'approximate-number' + +const PortfolioResultsComponent = ({ portfolio, scenarios }) => { + if (!portfolio) { + return <div>Loading...</div> + } + + const nonFinishedScenarios = scenarios.filter((s) => s.simulation.state !== 'FINISHED') + + if (nonFinishedScenarios.length > 0) { + if (nonFinishedScenarios.every((s) => s.simulation.state === 'QUEUED' || s.simulation.state === 'RUNNING')) { + return ( + <div> + <h1>Simulation running...</h1> + <p>{nonFinishedScenarios.length} of the scenarios are still being simulated</p> + </div> + ) + } + if (nonFinishedScenarios.some((s) => s.simulation.state === 'FAILED')) { + return ( + <div> + <h1>Simulation failed.</h1> + <p> + Try again by creating a new scenario. Please contact the OpenDC team for support, if issues + persist. + </p> + </div> + ) + } + } + + const dataPerMetric = {} + + AVAILABLE_METRICS.forEach((metric) => { + dataPerMetric[metric] = scenarios.map((scenario) => ({ + name: scenario.name, + value: mean(scenario.results[metric]), + std: std(scenario.results[metric]), + })) + }) + + return ( + <div> + <h1>Portfolio: {portfolio.name}</h1> + <p>Repeats per Scenario: {portfolio.targets.repeatsPerScenario}</p> + <div className="row"> + {AVAILABLE_METRICS.map(metric => ( + <div className="col-6" key={metric}> + <h4>{METRIC_NAMES[metric]}</h4> + <ResponsiveContainer aspect={16 / 9} width="100%"> + <BarChart data={dataPerMetric[metric]}> + <CartesianGrid strokeDasharray="3 3"/> + <XAxis dataKey="name"/> + <YAxis tickFormatter={tick => approx(tick)}/> + <Tooltip/> + <Bar dataKey="value" fill="#8884d8"/> + <ErrorBar dataKey="std" width={4} strokeWidth={2} stroke="blue" direction="y"/> + </BarChart> + </ResponsiveContainer> + </div> + ))} + </div> + </div> + ) +} + +PortfolioResultsComponent.propTypes = { + portfolio: Shapes.Portfolio, + scenarios: PropTypes.arrayOf(Shapes.Scenario), +} + +export default PortfolioResultsComponent diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js index a47a67c0..e1760d5e 100644 --- a/frontend/src/components/app/sidebars/Sidebar.js +++ b/frontend/src/components/app/sidebars/Sidebar.js @@ -10,7 +10,7 @@ class Sidebar extends React.Component { } static defaultProps = { - collapsible: true + collapsible: true, } state = { @@ -25,17 +25,10 @@ class Sidebar extends React.Component { })} 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'} - /> + {(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'} - /> + <span className="fa fa-angle-right" title={this.props.isRight ? 'Collapse' : 'Expand'} /> )} </div> ) @@ -48,7 +41,7 @@ class Sidebar extends React.Component { className={classNames('sidebar p-3 h-100', { 'sidebar-right': this.props.isRight, })} - onWheel={e => e.stopPropagation()} + onWheel={(e) => e.stopPropagation()} > {this.props.children} {this.props.collapsible && collapseButton} diff --git a/frontend/src/components/app/sidebars/Sidebar.sass b/frontend/src/components/app/sidebars/Sidebar.sass index 02e8940d..b8e15716 100644 --- a/frontend/src/components/app/sidebars/Sidebar.sass +++ b/frontend/src/components/app/sidebars/Sidebar.sass @@ -27,7 +27,7 @@ position: absolute top: 0 left: 0 - width: 350px + width: $side-bar-width z-index: 100 background: white diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js deleted file mode 100644 index ae52891a..00000000 --- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js +++ /dev/null @@ -1,84 +0,0 @@ -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', - ) - } - - 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> -) - -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> -) - -export default LoadChartComponent diff --git a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js index a31f11cf..837666af 100644 --- a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js +++ b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js @@ -24,8 +24,11 @@ class PortfolioListComponent extends React.Component { <div className="pb-3"> <h2> Portfolios - <button className="btn btn-outline-primary float-right" onClick={this.props.onNewPortfolio.bind(this)}> - <FontAwesome name="plus"/> + <button + className="btn btn-outline-primary float-right" + onClick={this.props.onNewPortfolio.bind(this)} + > + <FontAwesome name="plus" /> </button> </h2> @@ -33,7 +36,11 @@ class PortfolioListComponent extends React.Component { <div key={portfolio._id}> <div className="row mb-1"> <div - className={'col-8 align-self-center ' + (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')}> + className={ + 'col-8 align-self-center ' + + (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '') + } + > {portfolio.name} </div> <div className="col-4 text-right"> @@ -48,7 +55,7 @@ class PortfolioListComponent extends React.Component { /> </div> </div> - <ScenarioListContainer portfolioId={portfolio._id}/> + <ScenarioListContainer portfolioId={portfolio._id} /> </div> ))} </div> diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js index b21b012b..aadc451e 100644 --- a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js +++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js @@ -3,11 +3,11 @@ import Sidebar from '../Sidebar' import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer' import PortfolioListContainer from '../../../../containers/app/sidebars/project/PortfolioListContainer' -const ProjectSidebarComponent = ({collapsible}) => ( - <Sidebar isRight={false} collapsible={collapsible}> - <TopologyListContainer/> - <PortfolioListContainer/> - </Sidebar> - ) +const ProjectSidebarComponent = ({ collapsible }) => ( + <Sidebar isRight={false} collapsible={collapsible}> + <TopologyListContainer /> + <PortfolioListContainer /> + </Sidebar> +) export default ProjectSidebarComponent diff --git a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js index 9d2e261e..f44ce77f 100644 --- a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js +++ b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js @@ -24,7 +24,12 @@ class ScenarioListComponent extends React.Component { <> {this.props.scenarios.map((scenario, idx) => ( <div key={scenario._id} className="row mb-1"> - <div className={'col-8 pl-5 align-self-center ' + (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')}> + <div + className={ + 'col-8 pl-5 align-self-center ' + + (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '') + } + > {scenario.name} </div> <div className="col-4 text-right"> @@ -35,14 +40,17 @@ class ScenarioListComponent extends React.Component { /> <span className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')} - onClick={() => idx !== 0 ? this.onDelete(scenario._id) : undefined} + onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)} /> </div> </div> ))} <div className="pl-4 mb-2"> - <div className="btn btn-outline-primary" onClick={() => this.props.onNewScenario(this.props.portfolioId)}> - <FontAwesome name="plus" className="mr-1"/> + <div + className="btn btn-outline-primary" + onClick={() => this.props.onNewScenario(this.props.portfolioId)} + > + <FontAwesome name="plus" className="mr-1" /> New scenario </div> </div> diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js index b8b41200..498ee26d 100644 --- a/frontend/src/components/app/sidebars/project/TopologyListComponent.js +++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js @@ -26,13 +26,18 @@ class TopologyListComponent extends React.Component { <h2> Topologies <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}> - <FontAwesome name="plus"/> + <FontAwesome name="plus" /> </button> </h2> {this.props.topologies.map((topology, idx) => ( <div key={topology._id} className="row mb-1"> - <div className={'col-8 align-self-center ' + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')}> + <div + className={ + 'col-8 align-self-center ' + + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '') + } + > {topology.name} </div> <div className="col-4 text-right"> @@ -42,7 +47,7 @@ class TopologyListComponent extends React.Component { /> <span className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')} - onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined} + onClick={() => (idx !== 0 ? this.onDelete(topology._id) : undefined)} /> </div> </div> diff --git a/frontend/src/components/app/sidebars/topology/NameComponent.js b/frontend/src/components/app/sidebars/topology/NameComponent.js index 1f3051d5..5fb0dc55 100644 --- a/frontend/src/components/app/sidebars/topology/NameComponent.js +++ b/frontend/src/components/app/sidebars/topology/NameComponent.js @@ -5,7 +5,7 @@ const NameComponent = ({ name, onEdit }) => ( <h2> {name} <button className="btn btn-outline-secondary float-right" onClick={onEdit}> - <FontAwesome name="pencil"/> + <FontAwesome name="pencil" /> </button> </h2> ) diff --git a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js index b1def94b..f5eee36b 100644 --- a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js @@ -10,16 +10,16 @@ const TopologySidebarComponent = ({ interactionLevel }) => { switch (interactionLevel.mode) { case 'BUILDING': - sidebarContent = <BuildingSidebarContainer/> + sidebarContent = <BuildingSidebarContainer /> break case 'ROOM': - sidebarContent = <RoomSidebarContainer/> + sidebarContent = <RoomSidebarContainer /> break case 'RACK': - sidebarContent = <RackSidebarContainer/> + sidebarContent = <RackSidebarContainer /> break case 'MACHINE': - sidebarContent = <MachineSidebarContainer/> + sidebarContent = <MachineSidebarContainer /> break default: sidebarContent = 'Missing Content' diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index 4cc87798..eea62f84 100644 --- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -1,12 +1,11 @@ import React from 'react' -import NewRoomConstructionContainer - from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer' +import NewRoomConstructionContainer from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer' const BuildingSidebarComponent = () => { return ( <div> <h2>Building</h2> - <NewRoomConstructionContainer/> + <NewRoomConstructionContainer /> </div> ) } diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js index 75b00c54..fd552c1e 100644 --- a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js @@ -1,15 +1,10 @@ import React from 'react' -const NewRoomConstructionComponent = ({ - onStart, - onFinish, - onCancel, - currentRoomInConstruction, - }) => { +const NewRoomConstructionComponent = ({ 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"/> + <span className="fa fa-plus mr-2" /> Construct a new room </div> ) @@ -17,11 +12,11 @@ const NewRoomConstructionComponent = ({ return ( <div> <div className="btn btn-primary btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2"/> + <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"/> + <span className="fa fa-times mr-2" /> Cancel construction </div> </div> diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js index d7ce24bc..70d522b2 100644 --- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js @@ -2,7 +2,7 @@ import React from 'react' const BackToRackComponent = ({ onClick }) => ( <div className="btn btn-secondary btn-block" onClick={onClick}> - <span className="fa fa-angle-left mr-2"/> + <span className="fa fa-angle-left mr-2" /> Back to rack </div> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js index b9aa6251..37820316 100644 --- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js @@ -2,7 +2,7 @@ import React from 'react' const DeleteMachineComponent = ({ onClick }) => ( <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2"/> + <span className="fa fa-trash mr-2" /> Delete this machine </div> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js index 70be6968..992383c4 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js @@ -1,7 +1,5 @@ import React from 'react' -const MachineNameComponent = ({ position }) => ( - <h2>Machine at slot {position}</h2> -) +const MachineNameComponent = ({ position }) => <h2>Machine at slot {position}</h2> 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 d78c20eb..02e7b8d4 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -7,10 +7,10 @@ import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/m const MachineSidebarComponent = ({ machineId }) => { return ( <div> - <MachineNameContainer/> - <BackToRackContainer/> - <DeleteMachineContainer/> - <UnitTabsContainer/> + <MachineNameContainer /> + <BackToRackContainer /> + <DeleteMachineContainer /> + <UnitTabsContainer /> </div> ) } diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js index 98238de7..d5ecbce3 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js @@ -11,11 +11,8 @@ class UnitAddComponent extends React.Component { 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 => ( + <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.name} </option> @@ -24,11 +21,9 @@ class UnitAddComponent extends React.Component { <button type="submit" className="btn btn-outline-primary" - onClick={() => - this.props.onAdd(this.unitSelect.value) - } + onClick={() => this.props.onAdd(this.unitSelect.value)} > - <span className="fa fa-plus mr-2"/> + <span className="fa fa-plus mr-2" /> Add </button> </div> diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index 3953347a..4816ca23 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -21,10 +21,7 @@ class UnitComponent extends React.Component { '<strong>Energy Cons.:</strong> <code>' + this.props.unit.energyConsumptionW + ' W</code>' - } else if ( - this.props.unitType === 'memory' || - this.props.unitType === 'storage' - ) { + } else if (this.props.unitType === 'memory' || this.props.unitType === 'storage') { unitInfo = '<strong>Speed:</strong> <code>' + this.props.unit.speedMbPerS + @@ -39,9 +36,7 @@ class UnitComponent extends React.Component { return ( <li className="d-flex list-group-item justify-content-between align-items-center"> - <span style={{ maxWidth: '60%' }}> - {this.props.unit.name} - </span> + <span style={{ maxWidth: '60%' }}>{this.props.unit.name}</span> <span> <span tabIndex="0" @@ -53,10 +48,7 @@ class UnitComponent extends React.Component { data-content={unitInfo} data-html="true" /> - <span - className="btn btn-outline-danger fa fa-trash" - onClick={this.props.onDelete} - /> + <span className="btn btn-outline-danger fa fa-trash" onClick={this.props.onDelete} /> </span> </li> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js index fcd3e03b..2ade0f6a 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -5,12 +5,7 @@ const UnitListComponent = ({ unitType, unitIds }) => ( <ul className="list-group mt-1"> {unitIds.length !== 0 ? ( unitIds.map((unitId, index) => ( - <UnitContainer - unitType={unitType} - unitId={unitId} - index={index} - key={index} - /> + <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index} /> )) ) : ( <div className="alert alert-info"> diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index c774036f..15c89ed5 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -6,12 +6,7 @@ const UnitTabsComponent = () => ( <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" - > + <a className="nav-link active" data-toggle="tab" href="#cpu-units" role="tab"> CPU </a> </li> @@ -21,42 +16,32 @@ const UnitTabsComponent = () => ( </a> </li> <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#memory-units" - role="tab" - > + <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" - > + <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"> - <UnitAddContainer unitType="cpu"/> - <UnitListContainer unitType="cpu"/> + <UnitAddContainer unitType="cpu" /> + <UnitListContainer unitType="cpu" /> </div> <div className="tab-pane" id="gpu-units" role="tabpanel"> - <UnitAddContainer unitType="gpu"/> - <UnitListContainer unitType="gpu"/> + <UnitAddContainer unitType="gpu" /> + <UnitListContainer unitType="gpu" /> </div> <div className="tab-pane" id="memory-units" role="tabpanel"> - <UnitAddContainer unitType="memory"/> - <UnitListContainer unitType="memory"/> + <UnitAddContainer unitType="memory" /> + <UnitListContainer unitType="memory" /> </div> <div className="tab-pane" id="storage-units" role="tabpanel"> - <UnitAddContainer unitType="storage"/> - <UnitListContainer unitType="storage"/> + <UnitAddContainer unitType="storage" /> + <UnitListContainer unitType="storage" /> </div> </div> </div> diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js index 345674d1..c14775bf 100644 --- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js @@ -2,7 +2,7 @@ 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"/> + <span className="fa fa-angle-left mr-2" /> Back to room </div> ) diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js index b1672764..23b0daac 100644 --- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js @@ -2,7 +2,7 @@ import React from 'react' const DeleteRackComponent = ({ onClick }) => ( <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2"/> + <span className="fa fa-trash mr-2" /> Delete this rack </div> ) diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index 03b44aa6..d7e30f1d 100644 --- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -2,11 +2,9 @@ import React from 'react' const EmptySlotComponent = ({ position, onAdd }) => ( <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> + <span className="badge badge-default badge-info mr-1 disabled">{position}</span> <button className="btn btn-outline-primary" onClick={onAdd}> - <span className="fa fa-plus mr-2"/> + <span className="fa fa-plus mr-2" /> Add machine </button> </li> diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js index cec3c912..caa3dc04 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -12,17 +12,9 @@ const UnitIcon = ({ id, type }) => ( </div> ) -const MachineComponent = ({ - position, - machine, - onClick, - }) => { +const MachineComponent = ({ position, machine, onClick }) => { const hasNoUnits = - machine.cpuIds.length + - machine.gpuIds.length + - machine.memoryIds.length + - machine.storageIds.length === - 0 + machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0 return ( <li @@ -32,33 +24,13 @@ const MachineComponent = ({ > <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 - )} + {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 - )} + <span className="badge badge-default badge-warning">Machine with no units</span> + ) : undefined} </div> </li> ) diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js index a381771c..aa7a4f8f 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -8,15 +8,9 @@ const MachineListComponent = ({ machineIds }) => { <ul className="list-group machine-list"> {machineIds.map((machineId, index) => { if (machineId === null) { - return <EmptySlotContainer key={index} position={index + 1}/> + return <EmptySlotContainer key={index} position={index + 1} /> } else { - return ( - <MachineContainer - key={index} - position={index + 1} - machineId={machineId} - /> - ) + return <MachineContainer key={index} position={index + 1} machineId={machineId} /> } })} </ul> diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js index 1888b69d..b701909a 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js @@ -1,8 +1,6 @@ import React from 'react' import NameComponent from '../NameComponent' -const RackNameComponent = ({ rackName, onEdit }) => ( - <NameComponent name={rackName} onEdit={onEdit}/> -) +const RackNameComponent = ({ rackName, onEdit }) => <NameComponent name={rackName} onEdit={onEdit} /> 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 23e8e743..c04e46d8 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -9,12 +9,12 @@ const RackSidebarComponent = () => { return ( <div className="rack-sidebar-container flex-column"> <div className="rack-sidebar-header-container"> - <RackNameContainer/> - <BackToRoomContainer/> - <DeleteRackContainer/> + <RackNameContainer /> + <BackToRoomContainer /> + <DeleteRackContainer /> </div> <div className="machine-list-container mt-2"> - <MachineListContainer/> + <MachineListContainer /> </div> </div> ) diff --git a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js index 7bd8c2f8..64c0a1f6 100644 --- a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js @@ -2,7 +2,7 @@ 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"/> + <span className="fa fa-angle-left mr-2" /> Back to building </div> ) diff --git a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js index 2be752b5..78417359 100644 --- a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js @@ -2,7 +2,7 @@ import React from 'react' const DeleteRoomComponent = ({ onClick }) => ( <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2"/> + <span className="fa fa-trash mr-2" /> Delete this room </div> ) diff --git a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js index 672a191f..857a646f 100644 --- a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js @@ -1,15 +1,10 @@ import classNames from 'classnames' import React from 'react' -const EditRoomComponent = ({ - onEdit, - onFinish, - isEditing, - isInRackConstructionMode, - }) => +const EditRoomComponent = ({ onEdit, onFinish, isEditing, isInRackConstructionMode }) => isEditing ? ( <div className="btn btn-info btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2"/> + <span className="fa fa-check mr-2" /> Finish editing room </div> ) : ( @@ -19,7 +14,7 @@ const EditRoomComponent = ({ })} onClick={() => (isInRackConstructionMode ? undefined : onEdit())} > - <span className="fa fa-pencil mr-2"/> + <span className="fa fa-pencil mr-2" /> Edit the tiles of this room </div> ) diff --git a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js index 42b7357b..44566f61 100644 --- a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js @@ -1,16 +1,11 @@ import classNames from 'classnames' import React from 'react' -const RackConstructionComponent = ({ - onStart, - onStop, - inRackConstructionMode, - isEditingRoom, - }) => { +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"/> + <span className="fa fa-times mr-2" /> Stop rack construction </div> ) @@ -23,7 +18,7 @@ const RackConstructionComponent = ({ })} onClick={() => (isEditingRoom ? undefined : onStart())} > - <span className="fa fa-plus mr-2"/> + <span className="fa fa-plus mr-2" /> Start rack construction </div> ) diff --git a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js index 409d2eef..d637828e 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js @@ -1,8 +1,6 @@ import React from 'react' import NameComponent from '../NameComponent' -const RoomNameComponent = ({ roomName, onEdit }) => ( - <NameComponent name={roomName} onEdit={onEdit}/> -) +const RoomNameComponent = ({ roomName, onEdit }) => <NameComponent name={roomName} onEdit={onEdit} /> 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 a23ac381..1bc6533e 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -8,11 +8,11 @@ import RoomNameContainer from '../../../../../containers/app/sidebars/topology/r const RoomSidebarComponent = () => { return ( <div> - <RoomNameContainer/> - <BackToBuildingContainer/> - <RackConstructionContainer/> - <EditRoomContainer/> - <DeleteRoomContainer/> + <RoomNameContainer /> + <BackToBuildingContainer /> + <RackConstructionContainer /> + <EditRoomContainer /> + <DeleteRoomContainer /> </div> ) } diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js index 1ac2202c..095fb939 100644 --- a/frontend/src/components/home/ContactSection.js +++ b/frontend/src/components/home/ContactSection.js @@ -8,54 +8,44 @@ const ContactSection = () => ( <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"/> + <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"/> + <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" - /> + <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" - > + <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer"> <strong>@Large Research Group</strong> - </a>. + </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{' '} + <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. + <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md">license</a> + </strong> + ). Sorry for the inconvenience. </div> </div> </ContentSection> diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js index d519e840..f7af4cd9 100644 --- a/frontend/src/components/home/JumbotronHeader.js +++ b/frontend/src/components/home/JumbotronHeader.js @@ -8,10 +8,8 @@ const JumbotronHeader = () => ( <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"/> + <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> diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js index cdbb5a44..60d372f2 100644 --- a/frontend/src/components/home/ModelingSection.js +++ b/frontend/src/components/home/ModelingSection.js @@ -13,9 +13,7 @@ const ModelingSection = () => ( <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>Add real-world CPU, GPU, memory, storage and network units to each node</li> <li>Select from diverse scheduling policies</li> </ul> </ScreenshotSection> diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js index fdb55020..d0ff54bd 100644 --- a/frontend/src/components/home/ScreenshotSection.js +++ b/frontend/src/components/home/ScreenshotSection.js @@ -3,26 +3,18 @@ import React from 'react' import ContentSection from './ContentSection' import './ScreenshotSection.css' -const ScreenshotSection = ({ - name, - title, - imageUrl, - caption, - imageIsRight, - children, - }) => ( +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 }, - )} + 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}/> + <img src={imageUrl} className="col-12 screenshot" alt={caption} /> <div className="row text-muted justify-content-center">{caption}</div> </div> </div> diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js index 0fa21c34..9852cbb8 100644 --- a/frontend/src/components/home/SimulationSection.js +++ b/frontend/src/components/home/SimulationSection.js @@ -12,10 +12,7 @@ const ModelingSection = () => ( <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>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> diff --git a/frontend/src/components/home/StakeholderSection.js b/frontend/src/components/home/StakeholderSection.js index e547ebe0..e5ed9683 100644 --- a/frontend/src/components/home/StakeholderSection.js +++ b/frontend/src/components/home/StakeholderSection.js @@ -18,23 +18,11 @@ const Stakeholder = ({ name, title, subtitle }) => ( 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" - /> + <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> ) diff --git a/frontend/src/components/home/TeamSection.js b/frontend/src/components/home/TeamSection.js index 6823797f..4b6f1e25 100644 --- a/frontend/src/components/home/TeamSection.js +++ b/frontend/src/components/home/TeamSection.js @@ -18,11 +18,7 @@ const TeamMember = ({ photoId, name, description }) => ( 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="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" /> <TeamMember photoId="gandreadis" name="Georgios Andreadis" @@ -46,11 +42,7 @@ const TeamSection = () => ( </div> <div className="text-center lead mt-3"> See{' '} - <a - target="_blank" - href="http://atlarge.science/opendc#team" - rel="noopener noreferrer" - > + <a target="_blank" href="http://atlarge.science/opendc#team" rel="noopener noreferrer"> atlarge.science/opendc </a>{' '} for the full team! diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js index 01d55937..c6013c71 100644 --- a/frontend/src/components/home/TechnologiesSection.js +++ b/frontend/src/components/home/TechnologiesSection.js @@ -6,33 +6,31 @@ 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"> - <span style={{ minWidth: 100 }}> - <FontAwesome name="window-maximize" className="mr-2"/> - <strong className="">Browser</strong> - </span> + <span style={{ minWidth: 100 }}> + <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 style={{ minWidth: 100 }}> - <FontAwesome name="television" className="mr-2"/> - <strong>Server</strong> - </span> - <span className="text-right"> - Python, Flask, FlaskSocketIO, OpenAPI - </span> + <span style={{ minWidth: 100 }}> + <FontAwesome name="television" className="mr-2" /> + <strong>Server</strong> + </span> + <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"> - <span style={{ minWidth: 100 }}> - <FontAwesome name="database" className="mr-2"/> - <strong>Database</strong> - </span> + <span style={{ minWidth: 100 }}> + <FontAwesome name="database" className="mr-2" /> + <strong>Database</strong> + </span> <span className="text-right">MongoDB</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"/> - <strong>Simulator</strong> - </span> + <span style={{ minWidth: 100 }}> + <FontAwesome name="cogs" className="mr-2" /> + <strong>Simulator</strong> + </span> <span className="text-right">Kotlin</span> </li> </ul> diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js index dd8cea8e..40656dc1 100644 --- a/frontend/src/components/modals/Modal.js +++ b/frontend/src/components/modals/Modal.js @@ -33,18 +33,15 @@ class Modal extends React.Component { // Trigger auto-focus jQuery('#' + this.id) - .on('shown.bs.modal', function() { - jQuery(this) - .find('input') - .first() - .focus() + .on('shown.bs.modal', function () { + jQuery(this).find('input').first().focus() }) .on('hide.bs.modal', () => { if (this.visible) { this.props.onCancel() } }) - .on('keydown', e => { + .on('keydown', (e) => { e.stopPropagation() }) } @@ -106,19 +103,12 @@ class Modal extends React.Component { </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)} - > + <button type="button" className="btn btn-secondary" onClick={this.onCancel.bind(this)}> Close </button> <button type="button" - className={classNames( - 'btn', - 'btn-' + this.props.submitButtonType, - )} + className={classNames('btn', 'btn-' + this.props.submitButtonType)} onClick={this.onSubmit.bind(this)} > {this.props.submitButtonText} diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js index 8d03e81f..d5edb60b 100644 --- a/frontend/src/components/modals/TextInputModal.js +++ b/frontend/src/components/modals/TextInputModal.js @@ -36,18 +36,14 @@ class TextInputModal extends React.Component { onCancel={this.onCancel.bind(this)} > <form - onSubmit={e => { + 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)} - /> + <input type="text" className="form-control" ref={(textInput) => (this.textInput = textInput)} /> </div> </form> </Modal> diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js index ace2d751..2d001302 100644 --- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js @@ -20,20 +20,17 @@ class NewPortfolioModalComponent extends React.Component { reset() { this.textInput.value = '' - AVAILABLE_METRICS.forEach(metric => { + AVAILABLE_METRICS.forEach((metric) => { this.metricCheckboxes[metric].checked = true }) this.repeatsInput.value = 1 } onSubmit() { - this.props.callback( - this.textInput.value, - { - enabledMetrics: AVAILABLE_METRICS.filter(metric => this.metricCheckboxes[metric].checked), - repeatsPerScenario: parseInt(this.repeatsInput.value), - }, - ) + this.props.callback(this.textInput.value, { + enabledMetrics: AVAILABLE_METRICS.filter((metric) => this.metricCheckboxes[metric].checked), + repeatsPerScenario: parseInt(this.repeatsInput.value), + }) this.reset() } @@ -51,7 +48,7 @@ class NewPortfolioModalComponent extends React.Component { onCancel={this.onCancel.bind(this)} > <form - onSubmit={e => { + onSubmit={(e) => { e.preventDefault() this.onSubmit() }} @@ -62,19 +59,19 @@ class NewPortfolioModalComponent extends React.Component { type="text" className="form-control" required - ref={textInput => (this.textInput = textInput)} + ref={(textInput) => (this.textInput = textInput)} /> </div> <h4>Targets</h4> <h5>Metrics</h5> <div className="form-group"> - {AVAILABLE_METRICS.map(metric => ( + {AVAILABLE_METRICS.map((metric) => ( <div className="form-check" key={metric}> <label className="form-check-label"> <input type="checkbox" className="form-check-input" - ref={checkbox => (this.metricCheckboxes[metric] = checkbox)} + ref={(checkbox) => (this.metricCheckboxes[metric] = checkbox)} /> <code>{metric}</code> </label> @@ -87,7 +84,7 @@ class NewPortfolioModalComponent extends React.Component { type="number" className="form-control" required - ref={repeatsInput => (this.repeatsInput = repeatsInput)} + ref={(repeatsInput) => (this.repeatsInput = repeatsInput)} /> </div> </form> diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js index 4c2df2f6..0bb4aeab 100644 --- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js @@ -36,13 +36,13 @@ class NewScenarioModalComponent extends React.Component { loadSamplingFraction: parseFloat(this.traceLoadInput.value), }, { - topologyId: this.topologySelect.value + topologyId: this.topologySelect.value, }, { failuresEnabled: this.failuresCheckbox.checked, performanceInterferenceEnabled: this.performanceInterferenceCheckbox.checked, schedulerName: this.schedulerSelect.value, - }, + } ) this.reset() } @@ -61,7 +61,7 @@ class NewScenarioModalComponent extends React.Component { onCancel={this.onCancel.bind(this)} > <form - onSubmit={e => { + onSubmit={(e) => { e.preventDefault() this.onSubmit() }} @@ -72,17 +72,14 @@ class NewScenarioModalComponent extends React.Component { type="text" className="form-control" required - ref={textInput => (this.textInput = textInput)} + ref={(textInput) => (this.textInput = textInput)} /> </div> <h4>Trace</h4> <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 => ( + <select className="form-control" ref={(traceSelect) => (this.traceSelect = traceSelect)}> + {this.props.traces.map((trace) => ( <option value={trace._id} key={trace._id}> {trace.name} </option> @@ -95,7 +92,7 @@ class NewScenarioModalComponent extends React.Component { type="number" className="form-control" required - ref={traceLoadInput => (this.traceLoadInput = traceLoadInput)} + ref={(traceLoadInput) => (this.traceLoadInput = traceLoadInput)} /> </div> <h4>Topology</h4> @@ -103,9 +100,9 @@ class NewScenarioModalComponent extends React.Component { <label className="form-control-label">Topology</label> <select className="form-control" - ref={topologySelect => (this.topologySelect = topologySelect)} + ref={(topologySelect) => (this.topologySelect = topologySelect)} > - {this.props.topologies.map(topology => ( + {this.props.topologies.map((topology) => ( <option value={topology._id} key={topology._id}> {topology.name} </option> @@ -118,7 +115,7 @@ class NewScenarioModalComponent extends React.Component { <input type="checkbox" className="form-check-input" - ref={failuresCheckbox => (this.failuresCheckbox = failuresCheckbox)} + ref={(failuresCheckbox) => (this.failuresCheckbox = failuresCheckbox)} /> <span className="ml-2">Enable failures</span> </label> @@ -128,7 +125,9 @@ class NewScenarioModalComponent extends React.Component { <input type="checkbox" className="form-check-input" - ref={performanceInterferenceCheckbox => (this.performanceInterferenceCheckbox = performanceInterferenceCheckbox)} + ref={(performanceInterferenceCheckbox) => + (this.performanceInterferenceCheckbox = performanceInterferenceCheckbox) + } /> <span className="ml-2">Enable performance interference</span> </label> @@ -137,9 +136,9 @@ class NewScenarioModalComponent extends React.Component { <label className="form-control-label">Scheduler</label> <select className="form-control" - ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)} + ref={(schedulerSelect) => (this.schedulerSelect = schedulerSelect)} > - {this.props.schedulers.map(scheduler => ( + {this.props.schedulers.map((scheduler) => ( <option value={scheduler.name} key={scheduler.name}> {scheduler.name} </option> diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js index a0d736a1..bbec9ebb 100644 --- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js @@ -31,10 +31,7 @@ class NewTopologyModalComponent extends React.Component { } onDuplicate() { - this.props.onCreateTopology( - this.textInput.value, - this.originTopology.value, - ) + this.props.onCreateTopology(this.textInput.value, this.originTopology.value) this.reset() } @@ -52,7 +49,7 @@ class NewTopologyModalComponent extends React.Component { onCancel={this.onCancel.bind(this)} > <form - onSubmit={e => { + onSubmit={(e) => { e.preventDefault() this.onSubmit() }} @@ -63,7 +60,7 @@ class NewTopologyModalComponent extends React.Component { type="text" className="form-control" required - ref={textInput => (this.textInput = textInput)} + ref={(textInput) => (this.textInput = textInput)} /> </div> <div className="form-group"> @@ -71,12 +68,12 @@ class NewTopologyModalComponent extends React.Component { <select className="form-control" disabled - ref={originTopology => (this.originTopology = originTopology)} + ref={(originTopology) => (this.originTopology = originTopology)} > <option value={-1} key={-1}> None - start from scratch </option> - {this.props.topologies.map(topology => ( + {this.props.topologies.map((topology) => ( <option value={topology._id} key={topology._id}> {topology.name} </option> diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js index 10a2b92c..293049e1 100644 --- a/frontend/src/components/navigation/AppNavbarComponent.js +++ b/frontend/src/components/navigation/AppNavbarComponent.js @@ -8,7 +8,7 @@ const AppNavbarComponent = ({ project, fullWidth }) => ( <Navbar fullWidth={fullWidth}> <NavItem route="/projects"> <Link className="nav-link" title="My Projects" to="/projects"> - <FontAwesome name="list" className="mr-2"/> + <FontAwesome name="list" className="mr-2" /> My Projects </Link> </NavItem> @@ -18,9 +18,7 @@ const AppNavbarComponent = ({ project, fullWidth }) => ( <span>{project.name}</span> </Link> </NavItem> - ) : ( - undefined - )} + ) : undefined} </Navbar> ) diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js index 4e3f3869..798d1b97 100644 --- a/frontend/src/components/navigation/HomeNavbar.js +++ b/frontend/src/components/navigation/HomeNavbar.js @@ -12,12 +12,12 @@ const ScrollNavItem = ({ id, name }) => ( const HomeNavbar = () => ( <Navbar fullWidth={false}> - <ScrollNavItem id="#stakeholders" name="Stakeholders"/> - <ScrollNavItem id="#modeling" name="Modeling"/> - <ScrollNavItem id="#project" name="Project"/> - <ScrollNavItem id="#technologies" name="Technologies"/> - <ScrollNavItem id="#team" name="Team"/> - <ScrollNavItem id="#contact" name="Contact"/> + <ScrollNavItem id="#stakeholders" name="Stakeholders" /> + <ScrollNavItem id="#modeling" name="Modeling" /> + <ScrollNavItem id="#project" name="Project" /> + <ScrollNavItem id="#technologies" name="Technologies" /> + <ScrollNavItem id="#team" name="Team" /> + <ScrollNavItem id="#contact" name="Contact" /> </Navbar> ) diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js index 905e1ae9..e3de2ec7 100644 --- a/frontend/src/components/navigation/LogoutButton.js +++ b/frontend/src/components/navigation/LogoutButton.js @@ -5,7 +5,7 @@ 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"/> + <FontAwesome name="power-off" size="lg" /> </Link> ) diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js index 0ef19ecb..b1f1f7ae 100644 --- a/frontend/src/components/navigation/Navbar.js +++ b/frontend/src/components/navigation/Navbar.js @@ -9,10 +9,8 @@ import './Navbar.css' export const NAVBAR_HEIGHT = 60 -export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />) -export const LoggedInSection = withRouter(props => ( - <LoggedInSectionWithoutRoute {...props} /> -)) +export const NavItem = withRouter((props) => <NavItemWithoutRoute {...props} />) +export const LoggedInSection = withRouter((props) => <LoggedInSectionWithoutRoute {...props} />) const GitHubLink = () => ( <a @@ -20,19 +18,12 @@ const GitHubLink = () => ( className="ml-2 mr-3 text-dark" style={{ position: 'relative', top: 7 }} > - <span className="fa fa-github fa-2x"/> + <span className="fa fa-github fa-2x" /> </a> ) const NavItemWithoutRoute = ({ route, location, children }) => ( - <li - className={classNames( - 'nav-item clickable', - location.pathname === route ? 'active' : undefined, - )} - > - {children} - </li> + <li className={classNames('nav-item clickable', location.pathname === route ? 'active' : undefined)}>{children}</li> ) const LoggedInSectionWithoutRoute = ({ location }) => ( @@ -48,28 +39,25 @@ const LoggedInSectionWithoutRoute = ({ location }) => ( ) : ( <NavItem route="/profile" key="profile"> <Link className="nav-link" title="My Profile" to="/profile"> - <ProfileName/> + <ProfileName /> </Link> </NavItem> ), <NavItem route="logout" key="logout"> - <Logout/> + <Logout /> </NavItem>, ] ) : ( <NavItem route="login"> - <GitHubLink/> - <Login visible={true}/> + <GitHubLink /> + <Login visible={true} /> </NavItem> )} </ul> ) const Navbar = ({ fullWidth, children }) => ( - <nav - className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" - id="navbar" - > + <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" @@ -80,20 +68,15 @@ const Navbar = ({ fullWidth, children }) => ( aria-expanded="false" aria-label="Toggle navigation" > - <span className="navbar-toggler-icon"/> + <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 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/> + <LoggedInSection /> </div> </div> </nav> diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js index 9e9cd29c..6783d6a8 100644 --- a/frontend/src/components/not-found/CodeBlock.js +++ b/frontend/src/components/not-found/CodeBlock.js @@ -12,8 +12,7 @@ const CodeBlock = () => { const charList = textBlock.split('') // Binary representation of the string "OpenDC!" ;) - const binaryString = - '01001111011100000110010101101110010001000100001100100001' + const binaryString = '01001111011100000110010101101110010001000100001100100001' let binaryIndex = 0 for (let i = 0; i < charList.length; i++) { @@ -23,12 +22,7 @@ const CodeBlock = () => { } } - return ( - <div - className="code-block" - dangerouslySetInnerHTML={{ __html: textBlock }} - /> - ) + return <div className="code-block" dangerouslySetInnerHTML={{ __html: textBlock }} /> } export default CodeBlock diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js index b629d14c..490fd4c7 100644 --- a/frontend/src/components/not-found/TerminalWindow.js +++ b/frontend/src/components/not-found/TerminalWindow.js @@ -9,18 +9,22 @@ const TerminalWindow = () => ( <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/> + $ 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/> + <CodeBlock /> <div className="sub-title"> - Got lost?<BlinkingCursor/> + Got lost? + <BlinkingCursor /> </div> <Link to="/" className="home-btn"> - <span className="fa fa-home"/> GET ME BACK TO OPENDC + <span className="fa fa-home" /> GET ME BACK TO OPENDC </Link> </div> </div> diff --git a/frontend/src/components/projects/NewProjectButtonComponent.js b/frontend/src/components/projects/NewProjectButtonComponent.js index 3ddef5e5..312671c6 100644 --- a/frontend/src/components/projects/NewProjectButtonComponent.js +++ b/frontend/src/components/projects/NewProjectButtonComponent.js @@ -4,7 +4,7 @@ import React from 'react' const NewProjectButtonComponent = ({ onClick }) => ( <div className="bottom-btn-container"> <div className="btn btn-primary float-right" onClick={onClick}> - <span className="fa fa-plus mr-2"/> + <span className="fa fa-plus mr-2" /> New Project </div> </div> diff --git a/frontend/src/components/projects/ProjectActionButtons.js b/frontend/src/components/projects/ProjectActionButtons.js index 456dd6b6..1c76cc7f 100644 --- a/frontend/src/components/projects/ProjectActionButtons.js +++ b/frontend/src/components/projects/ProjectActionButtons.js @@ -4,26 +4,18 @@ import { Link } from 'react-router-dom' const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => ( <td className="text-right"> - <Link - to={'/projects/' + projectId} - className="btn btn-outline-primary btn-sm mr-2" - title="Open this project" - > - <span className="fa fa-play"/> + <Link to={'/projects/' + projectId} className="btn btn-outline-primary btn-sm mr-2" title="Open this project"> + <span className="fa fa-play" /> </Link> <div className="btn btn-outline-success btn-sm disabled mr-2" title="View and edit collaborators (not supported currently)" onClick={() => onViewUsers(projectId)} > - <span className="fa fa-users"/> + <span className="fa fa-users" /> </div> - <div - className="btn btn-outline-danger btn-sm" - title="Delete this project" - onClick={() => onDelete(projectId)} - > - <span className="fa fa-trash"/> + <div className="btn btn-outline-danger btn-sm" title="Delete this project" onClick={() => onDelete(projectId)}> + <span className="fa fa-trash" /> </div> </td> ) diff --git a/frontend/src/components/projects/ProjectAuthList.js b/frontend/src/components/projects/ProjectAuthList.js index 5a2c6695..8eb4f93b 100644 --- a/frontend/src/components/projects/ProjectAuthList.js +++ b/frontend/src/components/projects/ProjectAuthList.js @@ -8,27 +8,23 @@ const ProjectAuthList = ({ authorizations }) => { <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 projects here yet...</strong> Add some with the 'New - Project' button! + <span className="info-icon fa fa-question-circle mr-2" /> + <strong>No projects here yet...</strong> Add some with the 'New Project' button! </div> ) : ( <table className="table table-striped"> <thead> - <tr> - <th>Project name</th> - <th>Last edited</th> - <th>Access rights</th> - <th/> - </tr> + <tr> + <th>Project name</th> + <th>Last edited</th> + <th>Access rights</th> + <th /> + </tr> </thead> <tbody> - {authorizations.map(authorization => ( - <ProjectAuthRow - projectAuth={authorization} - key={authorization.project._id} - /> - ))} + {authorizations.map((authorization) => ( + <ProjectAuthRow projectAuth={authorization} key={authorization.project._id} /> + ))} </tbody> </table> )} diff --git a/frontend/src/components/projects/ProjectAuthRow.js b/frontend/src/components/projects/ProjectAuthRow.js index be9de6e0..3f904061 100644 --- a/frontend/src/components/projects/ProjectAuthRow.js +++ b/frontend/src/components/projects/ProjectAuthRow.js @@ -8,20 +8,12 @@ import { parseAndFormatDateTime } from '../../util/date-time' const ProjectAuthRow = ({ projectAuth }) => ( <tr> <td className="pt-3">{projectAuth.project.name}</td> + <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td> <td className="pt-3"> - {parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)} - </td> - <td className="pt-3"> - <span - className={classNames( - 'fa', - 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], - 'mr-2', - )} - /> + <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], 'mr-2')} /> {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]} </td> - <ProjectActions projectId={projectAuth.project._id}/> + <ProjectActions projectId={projectAuth.project._id} /> </tr> ) diff --git a/frontend/src/containers/app/map/GrayContainer.js b/frontend/src/containers/app/map/GrayContainer.js index 4ae3beac..9e4a6969 100644 --- a/frontend/src/containers/app/map/GrayContainer.js +++ b/frontend/src/containers/app/map/GrayContainer.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux' import { goDownOneInteractionLevel } from '../../../actions/interaction-level' import GrayLayer from '../../../components/app/map/elements/GrayLayer' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: () => dispatch(goDownOneInteractionLevel()), } diff --git a/frontend/src/containers/app/map/MapStage.js b/frontend/src/containers/app/map/MapStage.js index f749e85a..23c920b6 100644 --- a/frontend/src/containers/app/map/MapStage.js +++ b/frontend/src/containers/app/map/MapStage.js @@ -2,26 +2,21 @@ import { connect } from 'react-redux' import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../actions/map' import MapStageComponent from '../../../components/app/map/MapStageComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { mapPosition: state.map.position, mapDimensions: state.map.dimensions, } } -const mapDispatchToProps = dispatch => { +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)), + 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, -) +const MapStage = connect(mapStateToProps, mapDispatchToProps)(MapStageComponent) export default MapStage diff --git a/frontend/src/containers/app/map/RackEnergyFillContainer.js b/frontend/src/containers/app/map/RackEnergyFillContainer.js index d5989839..53746271 100644 --- a/frontend/src/containers/app/map/RackEnergyFillContainer.js +++ b/frontend/src/containers/app/map/RackEnergyFillContainer.js @@ -5,27 +5,13 @@ const mapStateToProps = (state, ownProps) => { let energyConsumptionTotal = 0 const rack = state.objects.rack[state.objects.tile[ownProps.tileId].rackId] const machineIds = rack.machineIds - machineIds.forEach(machineId => { + 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), - ) + 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)) } }) diff --git a/frontend/src/containers/app/map/RackSpaceFillContainer.js b/frontend/src/containers/app/map/RackSpaceFillContainer.js index 8110b1fb..0509a5a5 100644 --- a/frontend/src/containers/app/map/RackSpaceFillContainer.js +++ b/frontend/src/containers/app/map/RackSpaceFillContainer.js @@ -2,12 +2,10 @@ 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].rackId].machineIds + const machineIds = state.objects.rack[state.objects.tile[ownProps.tileId].rackId].machineIds return { type: 'space', - fillFraction: - machineIds.filter(id => id !== null).length / machineIds.length, + fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length, } } diff --git a/frontend/src/containers/app/map/TileContainer.js b/frontend/src/containers/app/map/TileContainer.js index ddef097c..04d6c8d6 100644 --- a/frontend/src/containers/app/map/TileContainer.js +++ b/frontend/src/containers/app/map/TileContainer.js @@ -11,9 +11,9 @@ const mapStateToProps = (state, ownProps) => { } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - onClick: tile => { + onClick: (tile) => { if (tile.rackId) { dispatch(goFromRoomToRack(tile._id)) } diff --git a/frontend/src/containers/app/map/TopologyContainer.js b/frontend/src/containers/app/map/TopologyContainer.js index 6f14d6cd..de43a151 100644 --- a/frontend/src/containers/app/map/TopologyContainer.js +++ b/frontend/src/containers/app/map/TopologyContainer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import TopologyGroup from '../../../components/app/map/groups/TopologyGroup' -const mapStateToProps = state => { +const mapStateToProps = (state) => { if (state.currentTopologyId === '-1') { return {} } diff --git a/frontend/src/containers/app/map/WallContainer.js b/frontend/src/containers/app/map/WallContainer.js index b288a534..67f8a242 100644 --- a/frontend/src/containers/app/map/WallContainer.js +++ b/frontend/src/containers/app/map/WallContainer.js @@ -3,9 +3,7 @@ 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], - ), + tiles: state.objects.room[ownProps.roomId].tileIds.map((tileId) => state.objects.tile[tileId]), } } diff --git a/frontend/src/containers/app/map/controls/ScaleIndicatorContainer.js b/frontend/src/containers/app/map/controls/ScaleIndicatorContainer.js index 6e443479..fa3b9d22 100644 --- a/frontend/src/containers/app/map/controls/ScaleIndicatorContainer.js +++ b/frontend/src/containers/app/map/controls/ScaleIndicatorContainer.js @@ -1,14 +1,12 @@ import { connect } from 'react-redux' import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { scale: state.map.scale, } } -const ScaleIndicatorContainer = connect(mapStateToProps)( - ScaleIndicatorComponent, -) +const ScaleIndicatorContainer = connect(mapStateToProps)(ScaleIndicatorComponent) export default ScaleIndicatorContainer diff --git a/frontend/src/containers/app/map/controls/ZoomControlContainer.js b/frontend/src/containers/app/map/controls/ZoomControlContainer.js index 20811989..ddc68cc7 100644 --- a/frontend/src/containers/app/map/controls/ZoomControlContainer.js +++ b/frontend/src/containers/app/map/controls/ZoomControlContainer.js @@ -2,20 +2,18 @@ import { connect } from 'react-redux' import { zoomInOnCenter } from '../../../../actions/map' import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { mapScale: state.map.scale, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - zoomInOnCenter: zoomIn => dispatch(zoomInOnCenter(zoomIn)), + zoomInOnCenter: (zoomIn) => dispatch(zoomInOnCenter(zoomIn)), } } -const ZoomControlContainer = connect(mapStateToProps, mapDispatchToProps)( - ZoomControlComponent, -) +const ZoomControlContainer = connect(mapStateToProps, mapDispatchToProps)(ZoomControlComponent) export default ZoomControlContainer diff --git a/frontend/src/containers/app/map/layers/MapLayer.js b/frontend/src/containers/app/map/layers/MapLayer.js index 3c5ff8be..8596cb9c 100644 --- a/frontend/src/containers/app/map/layers/MapLayer.js +++ b/frontend/src/containers/app/map/layers/MapLayer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { mapPosition: state.map.position, mapScale: state.map.scale, diff --git a/frontend/src/containers/app/map/layers/ObjectHoverLayer.js b/frontend/src/containers/app/map/layers/ObjectHoverLayer.js index 4619c0b8..a4927862 100644 --- a/frontend/src/containers/app/map/layers/ObjectHoverLayer.js +++ b/frontend/src/containers/app/map/layers/ObjectHoverLayer.js @@ -3,7 +3,7 @@ import { addRackToTile } from '../../../../actions/topology/room' import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent' import { findTileWithPosition } from '../../../../util/tile-calculations' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { mapPosition: state.map.position, mapScale: state.map.scale, @@ -14,9 +14,7 @@ const mapStateToProps = state => { } const currentRoom = state.objects.room[state.interactionLevel.roomId] - const tiles = currentRoom.tileIds.map( - tileId => state.objects.tile[tileId], - ) + const tiles = currentRoom.tileIds.map((tileId) => state.objects.tile[tileId]) const tile = findTileWithPosition(tiles, x, y) return !(tile === null || tile.rackId) @@ -24,14 +22,12 @@ const mapStateToProps = state => { } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: (x, y) => dispatch(addRackToTile(x, y)), } } -const ObjectHoverLayer = connect(mapStateToProps, mapDispatchToProps)( - ObjectHoverLayerComponent, -) +const ObjectHoverLayer = connect(mapStateToProps, mapDispatchToProps)(ObjectHoverLayerComponent) export default ObjectHoverLayer diff --git a/frontend/src/containers/app/map/layers/RoomHoverLayer.js b/frontend/src/containers/app/map/layers/RoomHoverLayer.js index 2c886c2f..66404f9e 100644 --- a/frontend/src/containers/app/map/layers/RoomHoverLayer.js +++ b/frontend/src/containers/app/map/layers/RoomHoverLayer.js @@ -7,49 +7,40 @@ import { findPositionInRooms, } from '../../../../util/tile-calculations' -const mapStateToProps = state => { +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 newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction]) const oldRooms = Object.keys(state.objects.room) - .map(id => Object.assign({}, state.objects.room[id])) + .map((id) => Object.assign({}, state.objects.room[id])) .filter( - room => - state.objects.topology[state.currentTopologyId].roomIds.indexOf( - room._id, - ) !== -1 && room._id !== state.construction.currentRoomInConstruction, - ); + (room) => + state.objects.topology[state.currentTopologyId].roomIds.indexOf(room._id) !== -1 && + room._id !== state.construction.currentRoomInConstruction + ) - [...oldRooms, newRoom].forEach(room => { - room.tiles = room.tileIds.map(tileId => state.objects.tile[tileId]) + ;[...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, - ) + const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles) return findPositionInPositions(validNextPositions, x, y) !== -1 }, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: (x, y) => dispatch(toggleTileAtLocation(x, y)), } } -const RoomHoverLayer = connect(mapStateToProps, mapDispatchToProps)( - RoomHoverLayerComponent, -) +const RoomHoverLayer = connect(mapStateToProps, mapDispatchToProps)(RoomHoverLayerComponent) export default RoomHoverLayer diff --git a/frontend/src/containers/app/results/PortfolioResultsContainer.js b/frontend/src/containers/app/results/PortfolioResultsContainer.js new file mode 100644 index 00000000..a3fdbf57 --- /dev/null +++ b/frontend/src/containers/app/results/PortfolioResultsContainer.js @@ -0,0 +1,22 @@ +import { connect } from 'react-redux' +import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent' + +const mapStateToProps = state => { + if (state.currentPortfolioId === '-1' + || !state.objects.portfolio[state.currentPortfolioId] + || state.objects.portfolio[state.currentPortfolioId].scenarioIds.map(scenarioId => state.objects.scenario[scenarioId]).some(s => s === undefined)) { + return { + portfolio: undefined, + scenarios: [], + } + } + + return { + portfolio: state.objects.portfolio[state.currentPortfolioId], + scenarios: state.objects.portfolio[state.currentPortfolioId].scenarioIds.map(scenarioId => state.objects.scenario[scenarioId]), + } +} + +const PortfolioResultsContainer = connect(mapStateToProps)(PortfolioResultsComponent) + +export default PortfolioResultsContainer diff --git a/frontend/src/containers/app/sidebars/elements/LoadChartContainer.js b/frontend/src/containers/app/sidebars/elements/LoadChartContainer.js index 61f95932..b9717ac3 100644 --- a/frontend/src/containers/app/sidebars/elements/LoadChartContainer.js +++ b/frontend/src/containers/app/sidebars/elements/LoadChartContainer.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux' -import LoadChartComponent from '../../../../components/app/sidebars/elements/LoadChartComponent' +import MetricChartComponent from '../../../../components/app/results/MetricChartComponent' const mapStateToProps = (state, ownProps) => { const data = [] @@ -10,6 +10,6 @@ const mapStateToProps = (state, ownProps) => { } } -const LoadChartContainer = connect(mapStateToProps)(LoadChartComponent) +const LoadChartContainer = connect(mapStateToProps)(MetricChartComponent) export default LoadChartContainer diff --git a/frontend/src/containers/app/sidebars/project/PortfolioListContainer.js b/frontend/src/containers/app/sidebars/project/PortfolioListContainer.js index d32a5c60..b32c8b1d 100644 --- a/frontend/src/containers/app/sidebars/project/PortfolioListContainer.js +++ b/frontend/src/containers/app/sidebars/project/PortfolioListContainer.js @@ -6,11 +6,11 @@ import { openNewPortfolioModal } from '../../../../actions/modals/portfolios' import { getState } from '../../../../util/state-utils' import { setCurrentTopology } from '../../../../actions/topology/building' -const mapStateToProps = state => { - let portfolios = state.objects.project[state.currentProjectId] ? state.objects.project[state.currentProjectId].portfolioIds.map(t => ( - state.objects.portfolio[t] - )) : [] - if (portfolios.filter(t => !t).length > 0) { +const mapStateToProps = (state) => { + let portfolios = state.objects.project[state.currentProjectId] + ? state.objects.project[state.currentProjectId].portfolioIds.map((t) => state.objects.portfolio[t]) + : [] + if (portfolios.filter((t) => !t).length > 0) { portfolios = [] } @@ -40,8 +40,6 @@ const mapDispatchToProps = (dispatch, ownProps) => { } } -const PortfolioListContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)( - PortfolioListComponent, -)) +const PortfolioListContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)(PortfolioListComponent)) export default PortfolioListContainer diff --git a/frontend/src/containers/app/sidebars/project/ProjectSidebarContainer.js b/frontend/src/containers/app/sidebars/project/ProjectSidebarContainer.js index 3951c24a..49001099 100644 --- a/frontend/src/containers/app/sidebars/project/ProjectSidebarContainer.js +++ b/frontend/src/containers/app/sidebars/project/ProjectSidebarContainer.js @@ -1,10 +1,10 @@ import React from 'react' import { withRouter } from 'react-router-dom' import ProjectSidebarComponent from '../../../../components/app/sidebars/project/ProjectSidebarComponent' +import { isCollapsible } from '../../../../util/sidebar-space' const ProjectSidebarContainer = withRouter(({ location, ...props }) => ( - <ProjectSidebarComponent - collapsible={location.pathname.indexOf('portfolios') === -1 && location.pathname.indexOf('scenarios') === -1} {...props}/> + <ProjectSidebarComponent collapsible={isCollapsible(location)} {...props} /> )) export default ProjectSidebarContainer diff --git a/frontend/src/containers/app/sidebars/project/ScenarioListContainer.js b/frontend/src/containers/app/sidebars/project/ScenarioListContainer.js index 2fd56d2b..415e2792 100644 --- a/frontend/src/containers/app/sidebars/project/ScenarioListContainer.js +++ b/frontend/src/containers/app/sidebars/project/ScenarioListContainer.js @@ -5,10 +5,10 @@ import { deleteScenario, setCurrentScenario } from '../../../../actions/scenario import { setCurrentPortfolio } from '../../../../actions/portfolios' const mapStateToProps = (state, ownProps) => { - let scenarios = state.objects.portfolio[ownProps.portfolioId] ? state.objects.portfolio[ownProps.portfolioId].scenarioIds.map(t => ( - state.objects.scenario[t] - )) : [] - if (scenarios.filter(t => !t).length > 0) { + let scenarios = state.objects.portfolio[ownProps.portfolioId] + ? state.objects.portfolio[ownProps.portfolioId].scenarioIds.map((t) => state.objects.scenario[t]) + : [] + if (scenarios.filter((t) => !t).length > 0) { scenarios = [] } @@ -19,7 +19,7 @@ const mapStateToProps = (state, ownProps) => { } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onNewScenario: (currentPortfolioId) => { dispatch(setCurrentPortfolio(currentPortfolioId)) @@ -30,16 +30,12 @@ const mapDispatchToProps = dispatch => { }, onDeleteScenario: (id) => { if (id) { - dispatch( - deleteScenario(id), - ) + dispatch(deleteScenario(id)) } }, } } -const ScenarioListContainer = connect(mapStateToProps, mapDispatchToProps)( - ScenarioListComponent, -) +const ScenarioListContainer = connect(mapStateToProps, mapDispatchToProps)(ScenarioListComponent) export default ScenarioListContainer diff --git a/frontend/src/containers/app/sidebars/project/TopologyListContainer.js b/frontend/src/containers/app/sidebars/project/TopologyListContainer.js index 6905c7c5..f65982ef 100644 --- a/frontend/src/containers/app/sidebars/project/TopologyListContainer.js +++ b/frontend/src/containers/app/sidebars/project/TopologyListContainer.js @@ -6,18 +6,17 @@ import { withRouter } from 'react-router-dom' import { getState } from '../../../../util/state-utils' import { deleteScenario } from '../../../../actions/scenarios' -const mapStateToProps = state => { - let topologies = state.objects.project[state.currentProjectId] ? state.objects.project[state.currentProjectId].topologyIds.map(t => ( - state.objects.topology[t] - )) : [] - if (topologies.filter(t => !t).length > 0) { +const mapStateToProps = (state) => { + let topologies = state.objects.project[state.currentProjectId] + ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t]) + : [] + if (topologies.filter((t) => !t).length > 0) { topologies = [] } return { currentTopologyId: state.currentTopologyId, topologies, - } } @@ -42,8 +41,6 @@ const mapDispatchToProps = (dispatch, ownProps) => { } } -const TopologyListContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)( - TopologyListComponent, -)) +const TopologyListContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)(TopologyListComponent)) export default TopologyListContainer diff --git a/frontend/src/containers/app/sidebars/topology/TopologySidebarContainer.js b/frontend/src/containers/app/sidebars/topology/TopologySidebarContainer.js index f9bc10bf..fe7c02fd 100644 --- a/frontend/src/containers/app/sidebars/topology/TopologySidebarContainer.js +++ b/frontend/src/containers/app/sidebars/topology/TopologySidebarContainer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import TopologySidebarComponent from '../../../../components/app/sidebars/topology/TopologySidebarComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { interactionLevel: state.interactionLevel, } diff --git a/frontend/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js b/frontend/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js index e1dfdc50..ea9e9e60 100644 --- a/frontend/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js +++ b/frontend/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js @@ -4,16 +4,15 @@ import { finishNewRoomConstruction, startNewRoomConstruction, } from '../../../../../actions/topology/building' -import StartNewRoomConstructionComponent - from '../../../../../components/app/sidebars/topology/building/NewRoomConstructionComponent' +import StartNewRoomConstructionComponent from '../../../../../components/app/sidebars/topology/building/NewRoomConstructionComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { currentRoomInConstruction: state.construction.currentRoomInConstruction, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onStart: () => dispatch(startNewRoomConstruction()), onFinish: () => dispatch(finishNewRoomConstruction()), @@ -21,8 +20,6 @@ const mapDispatchToProps = dispatch => { } } -const NewRoomConstructionButton = connect(mapStateToProps, mapDispatchToProps)( - StartNewRoomConstructionComponent, -) +const NewRoomConstructionButton = connect(mapStateToProps, mapDispatchToProps)(StartNewRoomConstructionComponent) 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 61cb79a8..24287ab0 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/BackToRackContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/BackToRackContainer.js @@ -2,14 +2,12 @@ import { connect } from 'react-redux' import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' import BackToRackComponent from '../../../../../components/app/sidebars/topology/machine/BackToRackComponent' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: () => dispatch(goDownOneInteractionLevel()), } } -const BackToRackContainer = connect(undefined, mapDispatchToProps)( - BackToRackComponent, -) +const BackToRackContainer = connect(undefined, mapDispatchToProps)(BackToRackComponent) 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 2dfb0d46..65e683e6 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js @@ -2,14 +2,12 @@ import { connect } from 'react-redux' import { openDeleteMachineModal } from '../../../../../actions/modals/topology' import DeleteMachineComponent from '../../../../../components/app/sidebars/topology/machine/DeleteMachineComponent' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: () => dispatch(openDeleteMachineModal()), } } -const DeleteMachineContainer = connect(undefined, mapDispatchToProps)( - DeleteMachineComponent, -) +const DeleteMachineContainer = connect(undefined, mapDispatchToProps)(DeleteMachineComponent) 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 5c29f85f..1cf35b05 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/MachineNameContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/MachineNameContainer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import MachineNameComponent from '../../../../../components/app/sidebars/topology/machine/MachineNameComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { position: state.interactionLevel.position, } diff --git a/frontend/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js b/frontend/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js index 868f26da..b04e3118 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js @@ -1,17 +1,15 @@ import { connect } from 'react-redux' import MachineSidebarComponent from '../../../../../components/app/sidebars/topology/machine/MachineSidebarComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { machineId: - state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].rackId - ].machineIds[state.interactionLevel.position - 1], + state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds[ + state.interactionLevel.position - 1 + ], } } -const MachineSidebarContainer = connect(mapStateToProps)( - MachineSidebarComponent, -) +const MachineSidebarContainer = connect(mapStateToProps)(MachineSidebarComponent) 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 7ff06f4f..29e48016 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/UnitAddContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/UnitAddContainer.js @@ -10,12 +10,10 @@ const mapStateToProps = (state, ownProps) => { const mapDispatchToProps = (dispatch, ownProps) => { return { - onAdd: id => dispatch(addUnit(ownProps.unitType, id)), + onAdd: (id) => dispatch(addUnit(ownProps.unitType, id)), } } -const UnitAddContainer = connect(mapStateToProps, mapDispatchToProps)( - UnitAddComponent, -) +const UnitAddContainer = connect(mapStateToProps, mapDispatchToProps)(UnitAddComponent) 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 bd629564..a028ebce 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js @@ -14,8 +14,6 @@ const mapDispatchToProps = (dispatch, ownProps) => { } } -const UnitContainer = connect(mapStateToProps, mapDispatchToProps)( - UnitComponent, -) +const UnitContainer = connect(mapStateToProps, mapDispatchToProps)(UnitComponent) 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 e3ad77fd..f382ff74 100644 --- a/frontend/src/containers/app/sidebars/topology/machine/UnitListContainer.js +++ b/frontend/src/containers/app/sidebars/topology/machine/UnitListContainer.js @@ -5,10 +5,10 @@ const mapStateToProps = (state, ownProps) => { return { unitIds: state.objects.machine[ - state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].rackId - ].machineIds[state.interactionLevel.position - 1] - ][ownProps.unitType + 'Ids'], + state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds[ + state.interactionLevel.position - 1 + ] + ][ownProps.unitType + 'Ids'], } } diff --git a/frontend/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/frontend/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js index 35b76d70..58c3b082 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js @@ -2,14 +2,12 @@ import { connect } from 'react-redux' import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: () => dispatch(goDownOneInteractionLevel()), } } -const BackToRoomContainer = connect(undefined, mapDispatchToProps)( - BackToRoomComponent, -) +const BackToRoomContainer = connect(undefined, mapDispatchToProps)(BackToRoomComponent) 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 b45a419b..8229a359 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js @@ -2,14 +2,12 @@ import { connect } from 'react-redux' import { openDeleteRackModal } from '../../../../../actions/modals/topology' import DeleteRackComponent from '../../../../../components/app/sidebars/topology/rack/DeleteRackComponent' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: () => dispatch(openDeleteRackModal()), } } -const DeleteRackContainer = connect(undefined, mapDispatchToProps)( - DeleteRackComponent, -) +const DeleteRackContainer = connect(undefined, mapDispatchToProps)(DeleteRackComponent) 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 ab287bac..cf341da9 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js @@ -8,8 +8,6 @@ const mapDispatchToProps = (dispatch, ownProps) => { } } -const EmptySlotContainer = connect(undefined, mapDispatchToProps)( - EmptySlotComponent, -) +const EmptySlotContainer = connect(undefined, mapDispatchToProps)(EmptySlotComponent) 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 6b0f0a04..fe12827d 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/MachineContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/MachineContainer.js @@ -14,8 +14,6 @@ const mapDispatchToProps = (dispatch, ownProps) => { } } -const MachineContainer = connect(mapStateToProps, mapDispatchToProps)( - MachineComponent, -) +const MachineContainer = connect(mapStateToProps, mapDispatchToProps)(MachineComponent) 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 3898d119..bc5a285a 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/MachineListContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/MachineListContainer.js @@ -1,12 +1,9 @@ import { connect } from 'react-redux' import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { - machineIds: - state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].rackId - ].machineIds, + machineIds: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds, } } diff --git a/frontend/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/frontend/src/containers/app/sidebars/topology/rack/RackNameContainer.js index 4d8e8936..504dbc61 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/RackNameContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/RackNameContainer.js @@ -2,23 +2,18 @@ import { connect } from 'react-redux' import { openEditRackNameModal } from '../../../../../actions/modals/topology' import RackNameComponent from '../../../../../components/app/sidebars/topology/rack/RackNameComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { - rackName: - state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].rackId - ].name, + rackName: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onEdit: () => dispatch(openEditRackNameModal()), } } -const RackNameContainer = connect(mapStateToProps, mapDispatchToProps)( - RackNameComponent, -) +const RackNameContainer = connect(mapStateToProps, mapDispatchToProps)(RackNameComponent) 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 d9be1e8b..453d7e41 100644 --- a/frontend/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js +++ b/frontend/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { rackId: state.objects.tile[state.interactionLevel.tileId].rackId, } diff --git a/frontend/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js b/frontend/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js index bf4ecbb5..4c1ab99d 100644 --- a/frontend/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js @@ -2,14 +2,12 @@ import { connect } from 'react-redux' import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' import BackToBuildingComponent from '../../../../../components/app/sidebars/topology/room/BackToBuildingComponent' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: () => dispatch(goDownOneInteractionLevel()), } } -const BackToBuildingContainer = connect(undefined, mapDispatchToProps)( - BackToBuildingComponent, -) +const BackToBuildingContainer = connect(undefined, mapDispatchToProps)(BackToBuildingComponent) 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 0f699888..636fa5c5 100644 --- a/frontend/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js @@ -2,14 +2,12 @@ import { connect } from 'react-redux' import { openDeleteRoomModal } from '../../../../../actions/modals/topology' import DeleteRoomComponent from '../../../../../components/app/sidebars/topology/room/DeleteRoomComponent' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: () => dispatch(openDeleteRoomModal()), } } -const DeleteRoomContainer = connect(undefined, mapDispatchToProps)( - DeleteRoomComponent, -) +const DeleteRoomContainer = connect(undefined, mapDispatchToProps)(DeleteRoomComponent) 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 227938fa..d17a45d1 100644 --- a/frontend/src/containers/app/sidebars/topology/room/EditRoomContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/EditRoomContainer.js @@ -2,22 +2,20 @@ import { connect } from 'react-redux' import { finishRoomEdit, startRoomEdit } from '../../../../../actions/topology/building' import EditRoomComponent from '../../../../../components/app/sidebars/topology/room/EditRoomComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { isEditing: state.construction.currentRoomInConstruction !== '-1', isInRackConstructionMode: state.construction.inRackConstructionMode, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onEdit: () => dispatch(startRoomEdit()), onFinish: () => dispatch(finishRoomEdit()), } } -const EditRoomContainer = connect(mapStateToProps, mapDispatchToProps)( - EditRoomComponent, -) +const EditRoomContainer = connect(mapStateToProps, mapDispatchToProps)(EditRoomComponent) 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 17a30d20..cd8319de 100644 --- a/frontend/src/containers/app/sidebars/topology/room/RackConstructionContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/RackConstructionContainer.js @@ -2,22 +2,20 @@ import { connect } from 'react-redux' import { startRackConstruction, stopRackConstruction } from '../../../../../actions/topology/room' import RackConstructionComponent from '../../../../../components/app/sidebars/topology/room/RackConstructionComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { inRackConstructionMode: state.construction.inRackConstructionMode, isEditingRoom: state.construction.currentRoomInConstruction !== '-1', } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onStart: () => dispatch(startRackConstruction()), onStop: () => dispatch(stopRackConstruction()), } } -const RackConstructionContainer = connect(mapStateToProps, mapDispatchToProps)( - RackConstructionComponent, -) +const RackConstructionContainer = connect(mapStateToProps, mapDispatchToProps)(RackConstructionComponent) 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 dae7dcc0..cab16016 100644 --- a/frontend/src/containers/app/sidebars/topology/room/RoomNameContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/RoomNameContainer.js @@ -2,20 +2,18 @@ import { connect } from 'react-redux' import { openEditRoomNameModal } from '../../../../../actions/modals/topology' import RoomNameComponent from '../../../../../components/app/sidebars/topology/room/RoomNameComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { roomName: state.objects.room[state.interactionLevel.roomId].name, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onEdit: () => dispatch(openEditRoomNameModal()), } } -const RoomNameContainer = connect(mapStateToProps, mapDispatchToProps)( - RoomNameComponent, -) +const RoomNameContainer = connect(mapStateToProps, mapDispatchToProps)(RoomNameComponent) 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 a95e290d..8c3ca8ab 100644 --- a/frontend/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js +++ b/frontend/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import RoomSidebarComponent from '../../../../../components/app/sidebars/topology/room/RoomSidebarComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { roomId: state.interactionLevel.roomId, } diff --git a/frontend/src/containers/auth/Login.js b/frontend/src/containers/auth/Login.js index deb9a654..2f9726bf 100644 --- a/frontend/src/containers/auth/Login.js +++ b/frontend/src/containers/auth/Login.js @@ -27,7 +27,7 @@ class LoginContainer extends React.Component { render() { if (!this.props.visible) { - return <span/> + return <span /> } return ( @@ -35,13 +35,12 @@ class LoginContainer extends React.Component { clientId={process.env.REACT_APP_OAUTH_CLIENT_ID} onSuccess={this.onAuthResponse.bind(this)} onFailure={this.onAuthFailure.bind(this)} - render={renderProps => ( + render={(renderProps) => ( <span onClick={renderProps.onClick} className="login btn btn-primary"> - <span className="fa fa-google"/> Login with Google + <span className="fa fa-google" /> Login with Google </span> )} - > - </GoogleLogin> + ></GoogleLogin> ) } } @@ -52,9 +51,9 @@ const mapStateToProps = (state, ownProps) => { } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - onLogin: payload => dispatch(logIn(payload)), + onLogin: (payload) => dispatch(logIn(payload)), } } diff --git a/frontend/src/containers/auth/Logout.js b/frontend/src/containers/auth/Logout.js index 6e885fb1..22400381 100644 --- a/frontend/src/containers/auth/Logout.js +++ b/frontend/src/containers/auth/Logout.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux' import { logOut } from '../../actions/auth' import LogoutButton from '../../components/navigation/LogoutButton' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onLogout: () => dispatch(logOut()), } diff --git a/frontend/src/containers/auth/ProfileName.js b/frontend/src/containers/auth/ProfileName.js index 8511a9b1..06da75ab 100644 --- a/frontend/src/containers/auth/ProfileName.js +++ b/frontend/src/containers/auth/ProfileName.js @@ -1,7 +1,7 @@ import React from 'react' import { connect } from 'react-redux' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { text: state.auth.givenName + ' ' + state.auth.familyName, } diff --git a/frontend/src/containers/modals/DeleteMachineModal.js b/frontend/src/containers/modals/DeleteMachineModal.js index 02dfe8bb..f30febdb 100644 --- a/frontend/src/containers/modals/DeleteMachineModal.js +++ b/frontend/src/containers/modals/DeleteMachineModal.js @@ -13,15 +13,15 @@ const DeleteMachineModalComponent = ({ visible, callback }) => ( /> ) -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { visible: state.modals.deleteMachineModalVisible, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - callback: isConfirmed => { + callback: (isConfirmed) => { if (isConfirmed) { dispatch(deleteMachine()) } @@ -30,8 +30,6 @@ const mapDispatchToProps = dispatch => { } } -const DeleteMachineModal = connect(mapStateToProps, mapDispatchToProps)( - DeleteMachineModalComponent, -) +const DeleteMachineModal = connect(mapStateToProps, mapDispatchToProps)(DeleteMachineModalComponent) export default DeleteMachineModal diff --git a/frontend/src/containers/modals/DeleteProfileModal.js b/frontend/src/containers/modals/DeleteProfileModal.js index 7518c4ba..e7c4014d 100644 --- a/frontend/src/containers/modals/DeleteProfileModal.js +++ b/frontend/src/containers/modals/DeleteProfileModal.js @@ -13,15 +13,15 @@ const DeleteProfileModalComponent = ({ visible, callback }) => ( /> ) -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { visible: state.modals.deleteProfileModalVisible, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - callback: isConfirmed => { + callback: (isConfirmed) => { if (isConfirmed) { dispatch(deleteCurrentUser()) } @@ -30,8 +30,6 @@ const mapDispatchToProps = dispatch => { } } -const DeleteProfileModal = connect(mapStateToProps, mapDispatchToProps)( - DeleteProfileModalComponent, -) +const DeleteProfileModal = connect(mapStateToProps, mapDispatchToProps)(DeleteProfileModalComponent) export default DeleteProfileModal diff --git a/frontend/src/containers/modals/DeleteRackModal.js b/frontend/src/containers/modals/DeleteRackModal.js index a271522d..0cb22a7e 100644 --- a/frontend/src/containers/modals/DeleteRackModal.js +++ b/frontend/src/containers/modals/DeleteRackModal.js @@ -13,15 +13,15 @@ const DeleteRackModalComponent = ({ visible, callback }) => ( /> ) -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { visible: state.modals.deleteRackModalVisible, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - callback: isConfirmed => { + callback: (isConfirmed) => { if (isConfirmed) { dispatch(deleteRack()) } @@ -30,8 +30,6 @@ const mapDispatchToProps = dispatch => { } } -const DeleteRackModal = connect(mapStateToProps, mapDispatchToProps)( - DeleteRackModalComponent, -) +const DeleteRackModal = connect(mapStateToProps, mapDispatchToProps)(DeleteRackModalComponent) export default DeleteRackModal diff --git a/frontend/src/containers/modals/DeleteRoomModal.js b/frontend/src/containers/modals/DeleteRoomModal.js index 71f2f040..1f6eef92 100644 --- a/frontend/src/containers/modals/DeleteRoomModal.js +++ b/frontend/src/containers/modals/DeleteRoomModal.js @@ -13,15 +13,15 @@ const DeleteRoomModalComponent = ({ visible, callback }) => ( /> ) -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { visible: state.modals.deleteRoomModalVisible, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - callback: isConfirmed => { + callback: (isConfirmed) => { if (isConfirmed) { dispatch(deleteRoom()) } @@ -30,8 +30,6 @@ const mapDispatchToProps = dispatch => { } } -const DeleteRoomModal = connect(mapStateToProps, mapDispatchToProps)( - DeleteRoomModalComponent, -) +const DeleteRoomModal = connect(mapStateToProps, mapDispatchToProps)(DeleteRoomModalComponent) export default DeleteRoomModal diff --git a/frontend/src/containers/modals/EditRackNameModal.js b/frontend/src/containers/modals/EditRackNameModal.js index fb7727f1..9128f449 100644 --- a/frontend/src/containers/modals/EditRackNameModal.js +++ b/frontend/src/containers/modals/EditRackNameModal.js @@ -14,21 +14,19 @@ const EditRackNameModalComponent = ({ visible, previousName, callback }) => ( /> ) -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { visible: state.modals.editRackNameModalVisible, previousName: state.interactionLevel.mode === 'RACK' - ? state.objects.rack[ - state.objects.tile[state.interactionLevel.tileId].rackId - ].name + ? state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name : '', } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - callback: name => { + callback: (name) => { if (name) { dispatch(editRackName(name)) } @@ -37,8 +35,6 @@ const mapDispatchToProps = dispatch => { } } -const EditRackNameModal = connect(mapStateToProps, mapDispatchToProps)( - EditRackNameModalComponent, -) +const EditRackNameModal = connect(mapStateToProps, mapDispatchToProps)(EditRackNameModalComponent) export default EditRackNameModal diff --git a/frontend/src/containers/modals/EditRoomNameModal.js b/frontend/src/containers/modals/EditRoomNameModal.js index 973216ac..8032a5d1 100644 --- a/frontend/src/containers/modals/EditRoomNameModal.js +++ b/frontend/src/containers/modals/EditRoomNameModal.js @@ -14,19 +14,17 @@ const EditRoomNameModalComponent = ({ visible, previousName, callback }) => ( /> ) -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { visible: state.modals.editRoomNameModalVisible, previousName: - state.interactionLevel.mode === 'ROOM' - ? state.objects.room[state.interactionLevel.roomId].name - : '', + state.interactionLevel.mode === 'ROOM' ? state.objects.room[state.interactionLevel.roomId].name : '', } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - callback: name => { + callback: (name) => { if (name) { dispatch(editRoomName(name)) } @@ -35,8 +33,6 @@ const mapDispatchToProps = dispatch => { } } -const EditRoomNameModal = connect(mapStateToProps, mapDispatchToProps)( - EditRoomNameModalComponent, -) +const EditRoomNameModal = connect(mapStateToProps, mapDispatchToProps)(EditRoomNameModalComponent) export default EditRoomNameModal diff --git a/frontend/src/containers/modals/NewPortfolioModal.js b/frontend/src/containers/modals/NewPortfolioModal.js index 5c4644d5..6cf12d8e 100644 --- a/frontend/src/containers/modals/NewPortfolioModal.js +++ b/frontend/src/containers/modals/NewPortfolioModal.js @@ -3,21 +3,21 @@ import NewPortfolioModalComponent from '../../components/modals/custom-component import { addPortfolio } from '../../actions/portfolios' import { closeNewPortfolioModal } from '../../actions/modals/portfolios' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { show: state.modals.newPortfolioModalVisible, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { callback: (name, targets) => { if (name) { dispatch( addPortfolio({ name, - targets - }), + targets, + }) ) } dispatch(closeNewPortfolioModal()) @@ -25,8 +25,6 @@ const mapDispatchToProps = dispatch => { } } -const NewPortfolioModal = connect(mapStateToProps, mapDispatchToProps)( - NewPortfolioModalComponent, -) +const NewPortfolioModal = connect(mapStateToProps, mapDispatchToProps)(NewPortfolioModalComponent) export default NewPortfolioModal diff --git a/frontend/src/containers/modals/NewProjectModal.js b/frontend/src/containers/modals/NewProjectModal.js index 1d0ebbbc..d306dc45 100644 --- a/frontend/src/containers/modals/NewProjectModal.js +++ b/frontend/src/containers/modals/NewProjectModal.js @@ -5,23 +5,18 @@ import { addProject } from '../../actions/projects' import TextInputModal from '../../components/modals/TextInputModal' const NewProjectModalComponent = ({ visible, callback }) => ( - <TextInputModal - title="New Project" - label="Project title" - show={visible} - callback={callback} - /> + <TextInputModal title="New Project" label="Project title" show={visible} callback={callback} /> ) -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { visible: state.modals.newProjectModalVisible, } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - callback: text => { + callback: (text) => { if (text) { dispatch(addProject(text)) } @@ -30,8 +25,6 @@ const mapDispatchToProps = dispatch => { } } -const NewProjectModal = connect(mapStateToProps, mapDispatchToProps)( - NewProjectModalComponent, -) +const NewProjectModal = connect(mapStateToProps, mapDispatchToProps)(NewProjectModalComponent) export default NewProjectModal diff --git a/frontend/src/containers/modals/NewScenarioModal.js b/frontend/src/containers/modals/NewScenarioModal.js index 0b273ed0..6a87d697 100644 --- a/frontend/src/containers/modals/NewScenarioModal.js +++ b/frontend/src/containers/modals/NewScenarioModal.js @@ -3,11 +3,12 @@ import NewScenarioModalComponent from '../../components/modals/custom-components import { addScenario } from '../../actions/scenarios' import { closeNewScenarioModal } from '../../actions/modals/scenarios' -const mapStateToProps = state => { - let topologies = state.currentProjectId !== '-1' ? state.objects.project[state.currentProjectId].topologyIds.map(t => ( - state.objects.topology[t] - )) : [] - if (topologies.filter(t => !t).length > 0) { +const mapStateToProps = (state) => { + let topologies = + state.currentProjectId !== '-1' + ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t]) + : [] + if (topologies.filter((t) => !t).length > 0) { topologies = [] } @@ -20,7 +21,7 @@ const mapStateToProps = state => { } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { callback: (name, portfolioId, trace, topology, operational) => { if (name) { @@ -31,7 +32,7 @@ const mapDispatchToProps = dispatch => { trace, topology, operational, - }), + }) ) } dispatch(closeNewScenarioModal()) @@ -39,8 +40,6 @@ const mapDispatchToProps = dispatch => { } } -const NewScenarioModal = connect(mapStateToProps, mapDispatchToProps)( - NewScenarioModalComponent, -) +const NewScenarioModal = connect(mapStateToProps, mapDispatchToProps)(NewScenarioModalComponent) export default NewScenarioModal diff --git a/frontend/src/containers/modals/NewTopologyModal.js b/frontend/src/containers/modals/NewTopologyModal.js index 282f0db9..99c42367 100644 --- a/frontend/src/containers/modals/NewTopologyModal.js +++ b/frontend/src/containers/modals/NewTopologyModal.js @@ -3,11 +3,11 @@ import NewTopologyModalComponent from '../../components/modals/custom-components import { closeNewTopologyModal } from '../../actions/modals/topology' import { addTopology } from '../../actions/topologies' -const mapStateToProps = state => { - let topologies = state.objects.project[state.currentProjectId] ? state.objects.project[state.currentProjectId].topologyIds.map(t => ( - state.objects.topology[t] - )) : [] - if (topologies.filter(t => !t).length > 0) { +const mapStateToProps = (state) => { + let topologies = state.objects.project[state.currentProjectId] + ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t]) + : [] + if (topologies.filter((t) => !t).length > 0) { topologies = [] } @@ -17,22 +17,18 @@ const mapStateToProps = state => { } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onCreateTopology: (name) => { if (name) { - dispatch( - addTopology({ name, rooms: [] }), - ) + dispatch(addTopology({ name, rooms: [] })) } dispatch(closeNewTopologyModal()) }, onDuplicateTopology: (name) => { if (name) { // TODO different handling here - dispatch( - addTopology({ name, rooms: [] }), - ) + dispatch(addTopology({ name, rooms: [] })) } dispatch(closeNewTopologyModal()) }, @@ -42,8 +38,6 @@ const mapDispatchToProps = dispatch => { } } -const NewTopologyModal = connect(mapStateToProps, mapDispatchToProps)( - NewTopologyModalComponent, -) +const NewTopologyModal = connect(mapStateToProps, mapDispatchToProps)(NewTopologyModalComponent) export default NewTopologyModal diff --git a/frontend/src/containers/navigation/AppNavbarContainer.js b/frontend/src/containers/navigation/AppNavbarContainer.js index bba44d77..845d54e1 100644 --- a/frontend/src/containers/navigation/AppNavbarContainer.js +++ b/frontend/src/containers/navigation/AppNavbarContainer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import AppNavbarComponent from '../../components/navigation/AppNavbarComponent' -const mapStateToProps = state => { +const mapStateToProps = (state) => { return { project: state.currentProjectId !== '-1' ? state.objects.project[state.currentProjectId] : undefined, } diff --git a/frontend/src/containers/projects/NewProjectButtonContainer.js b/frontend/src/containers/projects/NewProjectButtonContainer.js index f1d83ea3..ffd4a4a3 100644 --- a/frontend/src/containers/projects/NewProjectButtonContainer.js +++ b/frontend/src/containers/projects/NewProjectButtonContainer.js @@ -2,14 +2,12 @@ import { connect } from 'react-redux' import { openNewProjectModal } from '../../actions/modals/projects' import NewProjectButtonComponent from '../../components/projects/NewProjectButtonComponent' -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { onClick: () => dispatch(openNewProjectModal()), } } -const NewProjectButtonContainer = connect(undefined, mapDispatchToProps)( - NewProjectButtonComponent, -) +const NewProjectButtonContainer = connect(undefined, mapDispatchToProps)(NewProjectButtonComponent) export default NewProjectButtonContainer diff --git a/frontend/src/containers/projects/ProjectActions.js b/frontend/src/containers/projects/ProjectActions.js index b9f9a534..8bcbb7fd 100644 --- a/frontend/src/containers/projects/ProjectActions.js +++ b/frontend/src/containers/projects/ProjectActions.js @@ -8,16 +8,13 @@ const mapStateToProps = (state, ownProps) => { } } -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = (dispatch) => { return { - onViewUsers: id => { - }, // TODO implement user viewing - onDelete: id => dispatch(deleteProject(id)), + onViewUsers: (id) => {}, // TODO implement user viewing + onDelete: (id) => dispatch(deleteProject(id)), } } -const ProjectActions = connect(mapStateToProps, mapDispatchToProps)( - ProjectActionButtons, -) +const ProjectActions = connect(mapStateToProps, mapDispatchToProps)(ProjectActionButtons) export default ProjectActions diff --git a/frontend/src/containers/projects/VisibleProjectAuthList.js b/frontend/src/containers/projects/VisibleProjectAuthList.js index b7ef6d24..f0010540 100644 --- a/frontend/src/containers/projects/VisibleProjectAuthList.js +++ b/frontend/src/containers/projects/VisibleProjectAuthList.js @@ -6,34 +6,24 @@ const getVisibleProjectAuths = (projectAuths, filter) => { case 'SHOW_ALL': return projectAuths case 'SHOW_OWN': - return projectAuths.filter( - projectAuth => projectAuth.authorizationLevel === 'OWN', - ) + return projectAuths.filter((projectAuth) => projectAuth.authorizationLevel === 'OWN') case 'SHOW_SHARED': - return projectAuths.filter( - projectAuth => projectAuth.authorizationLevel !== 'OWN', - ) + return projectAuths.filter((projectAuth) => projectAuth.authorizationLevel !== 'OWN') default: return projectAuths } } -const mapStateToProps = state => { - const denormalizedAuthorizations = state.projectList.authorizationsOfCurrentUser.map( - authorizationIds => { - const authorization = state.objects.authorization[authorizationIds] - authorization.user = state.objects.user[authorization.userId] - authorization.project = - state.objects.project[authorization.projectId] - return authorization - }, - ) +const mapStateToProps = (state) => { + const denormalizedAuthorizations = state.projectList.authorizationsOfCurrentUser.map((authorizationIds) => { + const authorization = state.objects.authorization[authorizationIds] + authorization.user = state.objects.user[authorization.userId] + authorization.project = state.objects.project[authorization.projectId] + return authorization + }) return { - authorizations: getVisibleProjectAuths( - denormalizedAuthorizations, - state.projectList.authVisibilityFilter, - ), + authorizations: getVisibleProjectAuths(denormalizedAuthorizations, state.projectList.authVisibilityFilter), } } diff --git a/frontend/src/index.js b/frontend/src/index.js index a81a4bc2..c49e0b68 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -11,8 +11,8 @@ setupSocketConnection(() => { ReactDOM.render( <Provider store={store}> - <Routes/> + <Routes /> </Provider>, - document.getElementById('root'), + document.getElementById('root') ) }) diff --git a/frontend/src/index.sass b/frontend/src/index.sass index b37e200c..ca12f874 100644 --- a/frontend/src/index.sass +++ b/frontend/src/index.sass @@ -1,4 +1,5 @@ @import ./style-globals/_mixins.sass +@import ./style-globals/_variables.sass html, body, #root margin: 0 @@ -37,3 +38,7 @@ html, body, #root a, a:hover text-decoration: none + +.app-page-container + padding-left: $side-bar-width + 15px + padding-top: 15px diff --git a/frontend/src/pages/App.js b/frontend/src/pages/App.js index 3ccae29d..078ad51a 100644 --- a/frontend/src/pages/App.js +++ b/frontend/src/pages/App.js @@ -22,6 +22,7 @@ import ProjectSidebarContainer from '../containers/app/sidebars/project/ProjectS import { openScenarioSucceeded } from '../actions/scenarios' import NewPortfolioModal from '../containers/modals/NewPortfolioModal' import NewScenarioModal from '../containers/modals/NewScenarioModal' +import PortfolioResultsContainer from '../containers/app/results/PortfolioResultsContainer' const shortcutManager = new ShortcutManager(KeymapConfiguration) @@ -55,28 +56,28 @@ class AppComponent extends React.Component { render() { const constructionElements = this.props.topologyIsLoading ? ( <div className="full-height d-flex align-items-center justify-content-center"> - <LoadingScreen/> + <LoadingScreen /> </div> ) : ( <div className="full-height"> - <MapStage/> - <ScaleIndicatorContainer/> - <ToolPanelComponent/> - <ProjectSidebarContainer/> - <TopologySidebarContainer/> + <MapStage /> + <ScaleIndicatorContainer /> + <ToolPanelComponent /> + <ProjectSidebarContainer /> + <TopologySidebarContainer /> </div> ) const portfolioElements = ( - <div className="full-height"> - <ProjectSidebarContainer/> - <h2>Portfolio loading</h2> + <div className="full-height app-page-container"> + <ProjectSidebarContainer /> + <PortfolioResultsContainer/> </div> ) const scenarioElements = ( - <div className="full-height"> - <ProjectSidebarContainer/> + <div className="full-height app-page-container"> + <ProjectSidebarContainer /> <h2>Scenario loading</h2> </div> ) @@ -86,23 +87,20 @@ class AppComponent extends React.Component { title={this.props.projectName ? this.props.projectName + ' - OpenDC' : 'Simulation - OpenDC'} > <div className="page-container full-height"> - <AppNavbarContainer fullWidth={true}/> - {this.props.scenarioId ? ( - scenarioElements - ) : (this.props.portfolioId ? ( - portfolioElements - ) : ( - constructionElements - ) - )} - <NewTopologyModal/> - <NewPortfolioModal/> - <NewScenarioModal/> - <EditRoomNameModal/> - <DeleteRoomModal/> - <EditRackNameModal/> - <DeleteRackModal/> - <DeleteMachineModal/> + <AppNavbarContainer fullWidth={true} /> + {this.props.scenarioId + ? scenarioElements + : this.props.portfolioId + ? portfolioElements + : constructionElements} + <NewTopologyModal /> + <NewPortfolioModal /> + <NewScenarioModal /> + <EditRoomNameModal /> + <DeleteRoomModal /> + <EditRackNameModal /> + <DeleteRackModal /> + <DeleteMachineModal /> </div> </DocumentTitle> ) @@ -125,7 +123,8 @@ const mapDispatchToProps = (dispatch) => { return { openProjectSucceeded: (projectId) => dispatch(openProjectSucceeded(projectId)), openPortfolioSucceeded: (projectId, portfolioId) => dispatch(openPortfolioSucceeded(projectId, portfolioId)), - openScenarioSucceeded: (projectId, portfolioId, scenarioId) => dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId)), + openScenarioSucceeded: (projectId, portfolioId, scenarioId) => + dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId)), } } diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js index e69c2049..1bdfc5c7 100644 --- a/frontend/src/pages/Home.js +++ b/frontend/src/pages/Home.js @@ -21,7 +21,7 @@ class Home extends React.Component { const scrollOffset = 60 jQuery('#navbar') .find('li a') - .click(function(e) { + .click(function (e) { if (jQuery(e.target).parents('.auth-links').length > 0) { return } @@ -42,17 +42,17 @@ class Home extends React.Component { render() { return ( <div> - <HomeNavbar/> + <HomeNavbar /> <div className="body-wrapper page-container"> - <JumbotronHeader/> - <IntroSection/> - <StakeholderSection/> - <ModelingSection/> - <SimulationSection/> - <TechnologiesSection/> - <TeamSection/> - <ContactSection/> - <DocumentTitle title="OpenDC"/> + <JumbotronHeader /> + <IntroSection /> + <StakeholderSection /> + <ModelingSection /> + <SimulationSection /> + <TechnologiesSection /> + <TeamSection /> + <ContactSection /> + <DocumentTitle title="OpenDC" /> </div> </div> ) diff --git a/frontend/src/pages/NotFound.js b/frontend/src/pages/NotFound.js index 959cceec..f72c7d01 100644 --- a/frontend/src/pages/NotFound.js +++ b/frontend/src/pages/NotFound.js @@ -6,7 +6,7 @@ import './NotFound.css' const NotFound = () => ( <DocumentTitle title="Page Not Found - OpenDC"> <div className="not-found-backdrop"> - <TerminalWindow/> + <TerminalWindow /> </div> </DocumentTitle> ) diff --git a/frontend/src/pages/Profile.js b/frontend/src/pages/Profile.js index 527dc721..0d94b519 100644 --- a/frontend/src/pages/Profile.js +++ b/frontend/src/pages/Profile.js @@ -8,18 +8,18 @@ import AppNavbarContainer from '../containers/navigation/AppNavbarContainer' const ProfileContainer = ({ onDelete }) => ( <DocumentTitle title="My Profile - OpenDC"> <div className="full-height"> - <AppNavbarContainer fullWidth={false}/> + <AppNavbarContainer 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 project info that is associated with you (projects you own and any authorizations - you may have on other projects). + deletes any project info that is associated with you (projects you own and any authorizations you + may have on other projects). </p> </div> - <DeleteProfileModal/> + <DeleteProfileModal /> </div> </DocumentTitle> ) diff --git a/frontend/src/pages/Projects.js b/frontend/src/pages/Projects.js index f4af10c3..bb54aaa5 100644 --- a/frontend/src/pages/Projects.js +++ b/frontend/src/pages/Projects.js @@ -18,13 +18,13 @@ class ProjectsContainer extends React.Component { return ( <DocumentTitle title="My Projects - OpenDC"> <div className="full-height"> - <AppNavbarContainer fullWidth={false}/> + <AppNavbarContainer fullWidth={false} /> <div className="container text-page-container full-height"> - <ProjectFilterPanel/> - <VisibleProjectList/> - <NewProjectButtonContainer/> + <ProjectFilterPanel /> + <VisibleProjectList /> + <NewProjectButtonContainer /> </div> - <NewProjectModal/> + <NewProjectModal /> </div> </DocumentTitle> ) diff --git a/frontend/src/reducers/modals.js b/frontend/src/reducers/modals.js index 2fd71a5b..a7656373 100644 --- a/frontend/src/reducers/modals.js +++ b/frontend/src/reducers/modals.js @@ -19,7 +19,7 @@ import { CLOSE_NEW_PORTFOLIO_MODAL, OPEN_NEW_PORTFOLIO_MODAL } from '../actions/ import { CLOSE_NEW_SCENARIO_MODAL, OPEN_NEW_SCENARIO_MODAL } from '../actions/modals/scenarios' function modal(openAction, closeAction) { - return function(state = false, action) { + return function (state = false, action) { switch (action.type) { case openAction: return true diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index 96f615b1..4291a046 100644 --- a/frontend/src/routes/index.js +++ b/frontend/src/routes/index.js @@ -7,7 +7,7 @@ import NotFound from '../pages/NotFound' import Profile from '../pages/Profile' import Projects from '../pages/Projects' -const ProtectedComponent = (component) => () => (userIsLoggedIn() ? component : <Redirect to="/"/>) +const ProtectedComponent = (component) => () => (userIsLoggedIn() ? component : <Redirect to="/" />) const AppComponent = ({ match }) => userIsLoggedIn() ? ( <App @@ -15,18 +15,24 @@ const AppComponent = ({ match }) => portfolioId={match.params.portfolioId} scenarioId={match.params.scenarioId} /> - ) : <Redirect to="/"/> + ) : ( + <Redirect to="/" /> + ) const Routes = () => ( <BrowserRouter> <Switch> - <Route exact path="/" component={Home}/> - <Route exact path="/projects" render={ProtectedComponent(<Projects/>)}/> - <Route exact path="/projects/:projectId" component={AppComponent}/> - <Route exact path="/projects/:projectId/portfolios/:portfolioId" component={AppComponent}/> - <Route exact path="/projects/:projectId/portfolios/:portfolioId/scenarios/:scenarioId" component={AppComponent}/> - <Route exact path="/profile" render={ProtectedComponent(<Profile/>)}/> - <Route path="/*" component={NotFound}/> + <Route exact path="/" component={Home} /> + <Route exact path="/projects" render={ProtectedComponent(<Projects />)} /> + <Route exact path="/projects/:projectId" component={AppComponent} /> + <Route exact path="/projects/:projectId/portfolios/:portfolioId" component={AppComponent} /> + <Route + exact + path="/projects/:projectId/portfolios/:portfolioId/scenarios/:scenarioId" + component={AppComponent} + /> + <Route exact path="/profile" render={ProtectedComponent(<Profile />)} /> + <Route path="/*" component={NotFound} /> </Switch> </BrowserRouter> ) diff --git a/frontend/src/sagas/index.js b/frontend/src/sagas/index.js index daae8d8c..9f6c4809 100644 --- a/frontend/src/sagas/index.js +++ b/frontend/src/sagas/index.js @@ -1,10 +1,6 @@ import { takeEvery } from 'redux-saga/effects' import { LOG_IN } from '../actions/auth' -import { - ADD_PORTFOLIO, - DELETE_PORTFOLIO, - OPEN_PORTFOLIO_SUCCEEDED, UPDATE_PORTFOLIO, -} from '../actions/portfolios' +import { ADD_PORTFOLIO, DELETE_PORTFOLIO, OPEN_PORTFOLIO_SUCCEEDED, UPDATE_PORTFOLIO } from '../actions/portfolios' import { ADD_PROJECT, DELETE_PROJECT, OPEN_PROJECT_SUCCEEDED } from '../actions/projects' import { ADD_TILE, @@ -16,12 +12,7 @@ import { ADD_UNIT, DELETE_MACHINE, DELETE_UNIT } from '../actions/topology/machi 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 { - onAddPortfolio, - onDeletePortfolio, - onOpenPortfolioSucceeded, - onUpdatePortfolio, -} from './portfolios' +import { onAddPortfolio, onDeletePortfolio, onOpenPortfolioSucceeded, onUpdatePortfolio } from './portfolios' import { onDeleteCurrentUser } from './profile' import { onOpenProjectSucceeded, onProjectAdd, onProjectDelete } from './projects' import { diff --git a/frontend/src/sagas/objects.js b/frontend/src/sagas/objects.js index 17b28d02..1dbc7903 100644 --- a/frontend/src/sagas/objects.js +++ b/frontend/src/sagas/objects.js @@ -96,7 +96,7 @@ export const fetchAndStoreTopology = function* (id) { const filledSlots = new Array(fullRack.capacity).fill(null) fullRack.machines.forEach( - (machine) => (filledSlots[machine.position - 1] = machine._id), + (machine) => (filledSlots[machine.position - 1] = machine._id) ) let rack = (({ _id, name, capacity, powerCapacityW }) => ({ _id, @@ -165,21 +165,21 @@ export const updateTopologyOnServer = function* (id) { rack: !tileStore[tileId].rackId ? undefined : { - _id: rackStore[tileStore[tileId].rackId]._id, - name: rackStore[tileStore[tileId].rackId].name, - capacity: rackStore[tileStore[tileId].rackId].capacity, - powerCapacityW: rackStore[tileStore[tileId].rackId].powerCapacityW, - machines: rackStore[tileStore[tileId].rackId].machineIds - .filter((m) => m !== null) - .map((machineId) => ({ - _id: machineId, - position: machineStore[machineId].position, - cpus: machineStore[machineId].cpuIds.map((id) => cpuStore[id]), - gpus: machineStore[machineId].gpuIds.map((id) => gpuStore[id]), - memories: machineStore[machineId].memoryIds.map((id) => memoryStore[id]), - storages: machineStore[machineId].storageIds.map((id) => storageStore[id]), - })), - }, + _id: rackStore[tileStore[tileId].rackId]._id, + name: rackStore[tileStore[tileId].rackId].name, + capacity: rackStore[tileStore[tileId].rackId].capacity, + powerCapacityW: rackStore[tileStore[tileId].rackId].powerCapacityW, + machines: rackStore[tileStore[tileId].rackId].machineIds + .filter((m) => m !== null) + .map((machineId) => ({ + _id: machineId, + position: machineStore[machineId].position, + cpus: machineStore[machineId].cpuIds.map((id) => cpuStore[id]), + gpus: machineStore[machineId].gpuIds.map((id) => gpuStore[id]), + memories: machineStore[machineId].memoryIds.map((id) => memoryStore[id]), + storages: machineStore[machineId].storageIds.map((id) => storageStore[id]), + })), + }, })), })), } diff --git a/frontend/src/sagas/portfolios.js b/frontend/src/sagas/portfolios.js index cda1be9b..3c004282 100644 --- a/frontend/src/sagas/portfolios.js +++ b/frontend/src/sagas/portfolios.js @@ -62,7 +62,7 @@ export function* onAddPortfolio(action) { Object.assign({}, action.portfolio, { projectId: currentProjectId, scenarioIds: [], - }), + }) ) yield put(addToStore('portfolio', portfolio)) @@ -70,7 +70,7 @@ export function* onAddPortfolio(action) { yield put( addPropToStoreObject('project', currentProjectId, { portfolioIds: portfolioIds.concat([portfolio._id]), - }), + }) ) } catch (error) { console.error(error) @@ -79,11 +79,7 @@ export function* onAddPortfolio(action) { export function* onUpdatePortfolio(action) { try { - const portfolio = yield call( - updatePortfolio, - action.portfolio._id, - action.portfolio, - ) + const portfolio = yield call(updatePortfolio, action.portfolio._id, action.portfolio) yield put(addToStore('portfolio', portfolio)) } catch (error) { console.error(error) @@ -100,7 +96,7 @@ export function* onDeletePortfolio(action) { yield put( addPropToStoreObject('project', currentProjectId, { portfolioIds: portfolioIds.filter((id) => id !== action.id), - }), + }) ) } catch (error) { console.error(error) diff --git a/frontend/src/sagas/scenarios.js b/frontend/src/sagas/scenarios.js index 48b1e9be..3ecc3fc4 100644 --- a/frontend/src/sagas/scenarios.js +++ b/frontend/src/sagas/scenarios.js @@ -23,18 +23,14 @@ export function* onOpenScenarioSucceeded(action) { export function* onAddScenario(action) { try { - const scenario = yield call( - addScenario, - action.scenario.portfolioId, - action.scenario, - ) + const scenario = yield call(addScenario, action.scenario.portfolioId, action.scenario) yield put(addToStore('scenario', scenario)) const scenarioIds = yield select((state) => state.objects.portfolio[action.scenario.portfolioId].scenarioIds) yield put( addPropToStoreObject('portfolio', action.scenario.portfolioId, { scenarioIds: scenarioIds.concat([scenario._id]), - }), + }) ) } catch (error) { console.error(error) @@ -43,11 +39,7 @@ export function* onAddScenario(action) { export function* onUpdateScenario(action) { try { - const scenario = yield call( - updateScenario, - action.scenario._id, - action.scenario, - ) + const scenario = yield call(updateScenario, action.scenario._id, action.scenario) yield put(addToStore('scenario', scenario)) } catch (error) { console.error(error) @@ -64,7 +56,7 @@ export function* onDeleteScenario(action) { yield put( addPropToStoreObject('scenario', currentPortfolioId, { scenarioIds: scenarioIds.filter((id) => id !== action.id), - }), + }) ) } catch (error) { console.error(error) diff --git a/frontend/src/sagas/topology.js b/frontend/src/sagas/topology.js index e915f9ff..14c1ed2d 100644 --- a/frontend/src/sagas/topology.js +++ b/frontend/src/sagas/topology.js @@ -44,7 +44,7 @@ export function* onAddTopology(action) { addTopology, Object.assign({}, action.topology, { projectId: currentProjectId, - }), + }) ) yield fetchAndStoreTopology(topology._id) @@ -52,7 +52,7 @@ export function* onAddTopology(action) { yield put( addPropToStoreObject('project', currentProjectId, { topologyIds: topologyIds.concat([topology._id]), - }), + }) ) yield put(setCurrentTopology(topology._id)) } catch (error) { @@ -74,7 +74,7 @@ export function* onDeleteTopology(action) { yield put( addPropToStoreObject('project', currentProjectId, { topologyIds: topologyIds.filter((id) => id !== action.id), - }), + }) ) } catch (error) { console.error(error) @@ -258,7 +258,7 @@ export function* onAddUnit(action) { const position = yield select((state) => state.interactionLevel.position) const machine = yield select( (state) => - state.objects.machine[state.objects.rack[state.objects.tile[tileId].rackId].machineIds[position - 1]], + state.objects.machine[state.objects.rack[state.objects.tile[tileId].rackId].machineIds[position - 1]] ) if (machine[action.unitType + 'Ids'].length >= MAX_NUM_UNITS_PER_MACHINE) { @@ -269,7 +269,7 @@ export function* onAddUnit(action) { yield put( addPropToStoreObject('machine', machine._id, { [action.unitType + 'Ids']: units, - }), + }) ) yield updateTopologyOnServer(topologyId) } catch (error) { @@ -284,7 +284,7 @@ export function* onDeleteUnit(action) { const position = yield select((state) => state.interactionLevel.position) const machine = yield select( (state) => - state.objects.machine[state.objects.rack[state.objects.tile[tileId].rackId].machineIds[position - 1]], + state.objects.machine[state.objects.rack[state.objects.tile[tileId].rackId].machineIds[position - 1]] ) const unitIds = machine[action.unitType + 'Ids'].slice() unitIds.splice(action.index, 1) @@ -292,7 +292,7 @@ export function* onDeleteUnit(action) { yield put( addPropToStoreObject('machine', machine._id, { [action.unitType + 'Ids']: unitIds, - }), + }) ) yield updateTopologyOnServer(topologyId) } catch (error) { diff --git a/frontend/src/shapes/index.js b/frontend/src/shapes/index.js index 8296055a..9fab6f5d 100644 --- a/frontend/src/shapes/index.js +++ b/frontend/src/shapes/index.js @@ -129,6 +129,7 @@ Shapes.Scenario = PropTypes.shape({ schedulerName: PropTypes.string.isRequired, scheduler: Shapes.Scheduler, }).isRequired, + results: PropTypes.object, }) Shapes.WallSegment = PropTypes.shape({ diff --git a/frontend/src/store/middlewares/dummy-middleware.js b/frontend/src/store/middlewares/dummy-middleware.js index ed5670c5..5ba35691 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 => { +export const dummyMiddleware = (store) => (next) => (action) => { next(action) } diff --git a/frontend/src/store/middlewares/viewport-adjustment.js b/frontend/src/store/middlewares/viewport-adjustment.js index 84f2a3e9..b4472c54 100644 --- a/frontend/src/store/middlewares/viewport-adjustment.js +++ b/frontend/src/store/middlewares/viewport-adjustment.js @@ -9,7 +9,7 @@ import { } from '../../components/app/map/MapConstants' import { calculateRoomListBounds } from '../../util/tile-calculations' -export const viewportAdjustmentMiddleware = store => next => action => { +export const viewportAdjustmentMiddleware = (store) => (next) => (action) => { const state = store.getState() let topologyId = '-1' @@ -17,21 +17,15 @@ export const viewportAdjustmentMiddleware = store => next => action => { if (action.type === SET_CURRENT_TOPOLOGY && action.topologyId !== '-1') { topologyId = action.topologyId mapDimensions = state.map.dimensions - } else if ( - action.type === SET_MAP_DIMENSIONS && - state.currentTopologyId !== '-1' - ) { + } else if (action.type === SET_MAP_DIMENSIONS && state.currentTopologyId !== '-1') { topologyId = state.currentTopologyId mapDimensions = { width: action.width, height: action.height } } if (topologyId !== '-1') { const roomIds = state.objects.topology[topologyId].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])), - ) + 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) { @@ -42,11 +36,7 @@ export const viewportAdjustmentMiddleware = store => next => action => { } if (!hasNoTiles) { - const viewportParams = calculateParametersToZoomInOnRooms( - rooms, - mapDimensions.width, - mapDimensions.height, - ) + const viewportParams = calculateParametersToZoomInOnRooms(rooms, mapDimensions.width, mapDimensions.height) store.dispatch(setMapPosition(viewportParams.newX, viewportParams.newY)) store.dispatch(setMapScale(viewportParams.newScale)) } @@ -75,11 +65,8 @@ function calculateNewScale(bounds, mapWidth, mapHeight) { 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 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) diff --git a/frontend/src/style-globals/_variables.sass b/frontend/src/style-globals/_variables.sass index 00c2b479..7553caa0 100644 --- a/frontend/src/style-globals/_variables.sass +++ b/frontend/src/style-globals/_variables.sass @@ -6,7 +6,7 @@ $side-menu-width: 350px $color-indicator-width: 140px $global-padding: 30px -$side-bar-width: 250px +$side-bar-width: 350px $navbar-height: 50px $navbar-padding: 10px diff --git a/frontend/src/util/available-metrics.js b/frontend/src/util/available-metrics.js index c8035ddd..6522a849 100644 --- a/frontend/src/util/available-metrics.js +++ b/frontend/src/util/available-metrics.js @@ -1,4 +1,33 @@ export const AVAILABLE_METRICS = [ - 'granted-cpu', - 'overcommitted-cpu', + 'total_overcommitted_burst', + 'total_granted_burst', + 'total_requested_burst', + 'total_interfered_burst', + 'total_power_draw', + 'mean_cpu_usage', + 'mean_cpu_demand', + 'mean_num_deployed_images', + 'max_num_deployed_images', + 'total_failure_vm_slices', + 'total_vms_submitted', + 'total_vms_queued', + 'total_vms_finished', + 'total_vms_failed', ] + +export const METRIC_NAMES = { + total_overcommitted_burst: 'Overcomm. CPU Cycles [MFLOP]', + total_granted_burst: 'Granted CPU Cycles [MFLOP]', + total_requested_burst: 'Requested CPU Cycles [MFLOP]', + total_interfered_burst: 'Interfered CPU Cycles [MFLOP]', + total_power_draw: 'Total Power Consumption [Wh]', + mean_cpu_usage: 'Mean Host CPU Usage [MHz]', + mean_cpu_demand: 'Mean Host CPU Demand [MHz]', + mean_num_deployed_images: 'Mean Num. Deployed Images Per Host', + max_num_deployed_images: 'Max. Num. Deployed Images Per Host', + total_failure_vm_slices: 'Total Num. Failed VM Slices', + total_vms_submitted: 'Total Num. VMs Submitted', + total_vms_queued: 'Max. Num. VMs Queued', + total_vms_finished: 'Max. Num. VMs Finished', + total_vms_failed: 'Max. Num. VMs Failed', +} diff --git a/frontend/src/util/date-time.test.js b/frontend/src/util/date-time.test.js index 9274d4b7..3d95eba6 100644 --- a/frontend/src/util/date-time.test.js +++ b/frontend/src/util/date-time.test.js @@ -15,7 +15,7 @@ describe('date-time parsing', () => { }) describe('tick formatting', () => { - it('returns \'0s\' for numbers <= 0', () => { + it("returns '0s' for numbers <= 0", () => { expect(convertSecondsToFormattedTime(-1)).toEqual('0s') expect(convertSecondsToFormattedTime(0)).toEqual('0s') }) diff --git a/frontend/src/util/sidebar-space.js b/frontend/src/util/sidebar-space.js new file mode 100644 index 00000000..ef09d40a --- /dev/null +++ b/frontend/src/util/sidebar-space.js @@ -0,0 +1,2 @@ +export const isCollapsible = (location) => + location.pathname.indexOf('portfolios') === -1 && location.pathname.indexOf('scenarios') === -1 diff --git a/frontend/src/util/state-utils.js b/frontend/src/util/state-utils.js index ba248c60..e5b695c3 100644 --- a/frontend/src/util/state-utils.js +++ b/frontend/src/util/state-utils.js @@ -1,5 +1,6 @@ -export const getState = (dispatch) => new Promise((resolve) => { - dispatch((dispatch, getState) => { - resolve(getState()) +export const getState = (dispatch) => + new Promise((resolve) => { + dispatch((dispatch, getState) => { + resolve(getState()) + }) }) -}) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 2859e4e0..3fb3b729 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1985,7 +1985,7 @@ anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" -approximate-number@~2.0.0: +approximate-number@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/approximate-number/-/approximate-number-2.0.0.tgz#43c7fbfbbb0070a412131d65581f868b24d1eb29" integrity sha1-Q8f7+7sAcKQSEx1lWB+GiyTR6yk= @@ -2378,6 +2378,11 @@ backo2@1.0.2: resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947" integrity sha1-MasayLEpNjRj41s+u2n038+6eUc= +balanced-match@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838" + integrity sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg= + balanced-match@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" @@ -2954,7 +2959,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@~2.2.5: +classnames@^2.2.5, classnames@~2.2.5: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== @@ -3152,6 +3157,11 @@ compare-versions@^3.6.0: resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62" integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA== +complex.js@^2.0.11: + version "2.0.11" + resolved "https://registry.yarnpkg.com/complex.js/-/complex.js-2.0.11.tgz#09a873fbf15ffd8c18c9c2201ccef425c32b8bf1" + integrity sha512-6IArJLApNtdg1P1dFtn3dnyzoZBEF0MwMnrfF1exSBRpZYoy4yieMkpZhQDC0uwctw48vii0CFVyHfpgZ/DfGw== + component-bind@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1" @@ -3313,7 +3323,7 @@ core-js-pure@^3.0.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813" integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA== -core-js@^2.4.0: +core-js@^2.4.0, core-js@^2.6.10: version "2.6.11" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== @@ -3692,7 +3702,7 @@ d3-format@1: resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.4.tgz#356925f28d0fd7c7983bfad593726fce46844030" integrity sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw== -d3-interpolate@1, d3-interpolate@^1.1.1: +d3-interpolate@1, d3-interpolate@^1.1.1, d3-interpolate@^1.3.0: version "1.4.0" resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987" integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA== @@ -3717,6 +3727,18 @@ d3-scale@^1.0.0: d3-time "1" d3-time-format "2" +d3-scale@^2.1.0: + version "2.2.2" + resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.2.2.tgz#4e880e0b2745acaaddd3ede26a9e908a9e17b81f" + integrity sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw== + dependencies: + d3-array "^1.2.0" + d3-collection "1" + d3-format "1" + d3-interpolate "1" + d3-time "1" + d3-time-format "2" + d3-shape@^1.0.0, d3-shape@^1.2.0: version "1.3.7" resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7" @@ -3808,6 +3830,16 @@ decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0: resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= +decimal.js-light@^2.4.1: + version "2.5.0" + resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.0.tgz#ca7faf504c799326df94b0ab920424fdfc125348" + integrity sha512-b3VJCbd2hwUpeRGG3Toob+CRo8W22xplipNhP3tN7TSVB/cyMX71P1vM2Xjc9H74uV6dS2hDDmo/rHq8L87Upg== + +decimal.js@^10.2.0: + version "10.2.0" + resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.0.tgz#39466113a9e036111d02f82489b5fd6b0b5ed231" + integrity sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw== + decode-uri-component@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" @@ -4019,6 +4051,13 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-helpers@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" + integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== + dependencies: + "@babel/runtime" "^7.1.2" + dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -4305,6 +4344,11 @@ escape-html@~1.0.3: resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg= +escape-latex@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/escape-latex/-/escape-latex-1.2.0.tgz#07c03818cf7dac250cce517f4fda1b001ef2bca1" + integrity sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw== + escape-string-regexp@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344" @@ -5005,6 +5049,11 @@ forwarded@~0.1.2: resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ= +fraction.js@^4.0.12: + version "4.0.12" + resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.12.tgz#0526d47c65a5fb4854df78bc77f7bec708d7b8c3" + integrity sha512-8Z1K0VTG4hzYY7kA/1sj4/r1/RWLBD3xwReT/RCrUCbzPszjNQCCsy3ktkU/eaEqX3MYa4pY37a52eiBlPMlhA== + fragment-cache@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19" @@ -6271,6 +6320,11 @@ istanbul-reports@^2.2.6: dependencies: html-escaper "^2.0.0" +javascript-natural-sort@^0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59" + integrity sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k= + jest-changed-files@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039" @@ -7079,6 +7133,11 @@ lodash._reinterpolate@^3.0.0: resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0= +lodash.debounce@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -7104,6 +7163,11 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "^3.0.0" +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" @@ -7114,6 +7178,11 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== +lodash@~4.17.4: + version "4.17.19" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b" + integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ== + log-symbols@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920" @@ -7224,6 +7293,25 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +math-expression-evaluator@^1.2.14: + version "1.2.22" + resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz#c14dcb3d8b4d150e5dcea9c68c8dad80309b0d5e" + integrity sha512-L0j0tFVZBQQLeEjmWOvDLoRciIY8gQGWahvkztXUal8jH8R5Rlqo9GCvgqvXcy9LQhEWdQCVvzqAbxgYNt4blQ== + +mathjs@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/mathjs/-/mathjs-7.1.0.tgz#83226e336b8b258b046a139865373e667db94afb" + integrity sha512-Km6PO2UR+COs5mru5auKQKi84GKBryuL5JDdKeAxAi0QV8mH/qwpZKLnzrycxBacQ/X/4Z4Kn+gtYc5gEeWsDQ== + dependencies: + complex.js "^2.0.11" + decimal.js "^10.2.0" + escape-latex "^1.2.0" + fraction.js "^4.0.12" + javascript-natural-sort "^0.7.1" + seed-random "^2.2.0" + tiny-emitter "^2.1.0" + typed-function "^2.0.0" + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" @@ -9345,7 +9433,7 @@ querystringify@^2.1.1: resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e" integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA== -raf@^3.4.1: +raf@^3.4.0, raf@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== @@ -9480,6 +9568,11 @@ react-konva@~16.13.0-2: react-reconciler "^0.25.1" scheduler "^0.19.1" +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-reconciler@^0.25.1: version "0.25.1" resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.25.1.tgz#f9814d59d115e1210762287ce987801529363aaa" @@ -9501,6 +9594,16 @@ react-redux@~7.2.0: prop-types "^15.7.2" react-is "^16.9.0" +react-resize-detector@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-2.3.0.tgz#57bad1ae26a28a62a2ddb678ba6ffdf8fa2b599c" + integrity sha512-oCAddEWWeFWYH5FAcHdBYcZjAw9fMzRUK9sWSx6WvSSOPVRxcHd5zTIGy/mOus+AhN/u6T4TMiWxvq79PywnJQ== + dependencies: + lodash.debounce "^4.0.8" + lodash.throttle "^4.1.1" + prop-types "^15.6.0" + resize-observer-polyfill "^1.5.0" + react-router-dom@~5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18" @@ -9609,6 +9712,26 @@ react-side-effect@^1.0.2: dependencies: shallowequal "^1.0.1" +react-smooth@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-1.0.5.tgz#94ae161d7951cdd893ccb7099d031d342cb762ad" + integrity sha512-eW057HT0lFgCKh8ilr0y2JaH2YbNcuEdFpxyg7Gf/qDKk9hqGMyXryZJ8iMGJEuKH0+wxS0ccSsBBB3W8yCn8w== + dependencies: + lodash "~4.17.4" + prop-types "^15.6.0" + raf "^3.4.0" + react-transition-group "^2.5.0" + +react-transition-group@^2.5.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" + integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== + dependencies: + dom-helpers "^3.4.0" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-lifecycles-compat "^3.0.4" + react@~16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" @@ -9714,6 +9837,30 @@ realpath-native@^1.1.0: dependencies: util.promisify "^1.0.0" +recharts-scale@^0.4.2: + version "0.4.3" + resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.3.tgz#040b4f638ed687a530357292ecac880578384b59" + integrity sha512-t8p5sccG9Blm7c1JQK/ak9O8o95WGhNXD7TXg/BW5bYbVlr6eCeRBNpgyigD4p6pSSMehC5nSvBUPj6F68rbFA== + dependencies: + decimal.js-light "^2.4.1" + +recharts@^1.8.5: + version "1.8.5" + resolved "https://registry.yarnpkg.com/recharts/-/recharts-1.8.5.tgz#ca94a3395550946334a802e35004ceb2583fdb12" + integrity sha512-tM9mprJbXVEBxjM7zHsIy6Cc41oO/pVYqyAsOHLxlJrbNBuLs0PHB3iys2M+RqCF0//k8nJtZF6X6swSkWY3tg== + dependencies: + classnames "^2.2.5" + core-js "^2.6.10" + d3-interpolate "^1.3.0" + d3-scale "^2.1.0" + d3-shape "^1.2.0" + lodash "^4.17.5" + prop-types "^15.6.0" + react-resize-detector "^2.3.0" + react-smooth "^1.0.5" + recharts-scale "^0.4.2" + reduce-css-calc "^1.3.0" + recursive-readdir@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f" @@ -9729,6 +9876,22 @@ redent@^1.0.0: indent-string "^2.1.0" strip-indent "^1.0.1" +reduce-css-calc@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716" + integrity sha1-dHyRTgSWFKTJz7umKYca0dKSdxY= + dependencies: + balanced-match "^0.4.2" + math-expression-evaluator "^1.2.14" + reduce-function-call "^1.0.1" + +reduce-function-call@^1.0.1: + version "1.0.3" + resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.3.tgz#60350f7fb252c0a67eb10fd4694d16909971300f" + integrity sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ== + dependencies: + balanced-match "^1.0.0" + redux-localstorage@~0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/redux-localstorage/-/redux-localstorage-0.4.1.tgz#faf6d719c581397294d811473ffcedee065c933c" @@ -9946,6 +10109,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +resize-observer-polyfill@^1.5.0: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" @@ -10204,6 +10372,11 @@ scss-tokenizer@^0.2.3: js-base64 "^2.1.8" source-map "^0.4.2" +seed-random@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/seed-random/-/seed-random-2.2.0.tgz#2a9b19e250a817099231a5b99a4daf80b7fbed54" + integrity sha1-KpsZ4lCoFwmSMaW5mk2vgLf77VQ= + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -11144,6 +11317,11 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +tiny-emitter@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" + integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== + tiny-invariant@^1.0.2: version "1.1.0" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" @@ -11319,6 +11497,11 @@ type@^2.0.0: resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3" integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow== +typed-function@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/typed-function/-/typed-function-2.0.0.tgz#15ab3825845138a8b1113bd89e60cd6a435739e8" + integrity sha512-Hhy1Iwo/e4AtLZNK10ewVVcP2UEs408DS35ubP825w/YgSBK1KVLwALvvIG4yX75QJrxjCpcWkzkVRB0BwwYlA== + typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" |