diff options
Diffstat (limited to 'frontend/src/components/app')
54 files changed, 298 insertions, 466 deletions
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/PortfolioResultsComponent.js b/frontend/src/components/app/results/PortfolioResultsComponent.js new file mode 100644 index 00000000..286dd48c --- /dev/null +++ b/frontend/src/components/app/results/PortfolioResultsComponent.js @@ -0,0 +1,89 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts' +import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_UNITS } 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]), + errorX: std(scenario.results[metric]), + })) + }) + + return ( + <div className="full-height" style={{ overflowY: 'scroll', overflowX: 'hidden' }}> + <h2>Portfolio: {portfolio.name}</h2> + <p>Repeats per Scenario: {portfolio.targets.repeatsPerScenario}</p> + <div className="row"> + {AVAILABLE_METRICS.map((metric) => ( + <div className="col-6 mb-2" key={metric}> + <h4>{METRIC_NAMES[metric]}</h4> + <ResponsiveContainer aspect={16 / 9} width="100%"> + <ComposedChart data={dataPerMetric[metric]} margin={{ bottom: 15 }} layout="vertical"> + <CartesianGrid strokeDasharray="3 3" /> + <XAxis + tickFormatter={(tick) => approx(tick)} + label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }} + type="number" + /> + <YAxis dataKey="name" type="category" /> + <Bar dataKey="value" fill="#3399FF" isAnimationActive={false} /> + <Scatter dataKey="value" opacity={0} isAnimationActive={false}> + <ErrorBar + dataKey="errorX" + width={10} + strokeWidth={3} + stroke="#FF6600" + direction="x" + /> + </Scatter> + </ComposedChart> + </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..b000b9e2 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,10 +36,14 @@ 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-7 align-self-center ' + + (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '') + } + > {portfolio.name} </div> - <div className="col-4 text-right"> + <div className="col-5 text-right"> <Link className="btn btn-outline-primary mr-1 fa fa-play" to={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`} @@ -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..4789315e 100644 --- a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js +++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js @@ -3,11 +3,13 @@ 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}> + <div className="h-100 overflow-auto container-fluid"> + <TopologyListContainer /> + <PortfolioListContainer /> + </div> + </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..e775a663 100644 --- a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js +++ b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js @@ -24,25 +24,33 @@ 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-7 pl-5 align-self-center ' + + (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '') + } + > {scenario.name} </div> - <div className="col-4 text-right"> + <div className="col-5 text-right"> <Link - className="btn btn-outline-primary mr-1 fa fa-play" + className="btn btn-outline-primary mr-1 fa fa-play disabled" to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`} onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)} /> <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..2f42f7e4 100644 --- a/frontend/src/components/app/sidebars/project/TopologyListComponent.js +++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js @@ -26,23 +26,28 @@ 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-7 align-self-center ' + + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '') + } + > {topology.name} </div> - <div className="col-4 text-right"> + <div className="col-5 text-right"> <span className="btn btn-outline-primary mr-1 fa fa-play" onClick={() => this.onChoose(topology._id)} /> <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> ) } |