diff options
Diffstat (limited to 'frontend/src/components')
110 files changed, 3039 insertions, 3067 deletions
diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js index 9f379e0b..ca159982 100644 --- a/frontend/src/components/app/map/LoadingScreen.js +++ b/frontend/src/components/app/map/LoadingScreen.js @@ -1,11 +1,11 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; +import React from 'react' +import FontAwesome from 'react-fontawesome' const LoadingScreen = () => ( - <div className="display-4"> - <FontAwesome name="refresh" className="mr-4" spin /> - Loading your datacenter... - </div> -); + <div className="display-4"> + <FontAwesome name="refresh" className="mr-4" spin/> + Loading your datacenter... + </div> +) -export default LoadingScreen; +export default LoadingScreen diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js index 32438b5e..286920e2 100644 --- a/frontend/src/components/app/map/MapConstants.js +++ b/frontend/src/components/app/map/MapConstants.js @@ -1,29 +1,29 @@ -export const MAP_SIZE = 50; -export const TILE_SIZE_IN_PIXELS = 100; -export const TILE_SIZE_IN_METERS = 0.5; -export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS; +export const MAP_SIZE = 50 +export const TILE_SIZE_IN_PIXELS = 100 +export const TILE_SIZE_IN_METERS = 0.5 +export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS -export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5; -export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3; +export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5 +export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3 export const OBJECT_SIZE_IN_PIXELS = - TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2; + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 -export const GRID_LINE_WIDTH_IN_PIXELS = 2; -export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8; -export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12; -export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10; +export const GRID_LINE_WIDTH_IN_PIXELS = 2 +export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8 +export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12 +export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10 -export const SIDEBAR_WIDTH = 350; -export const VIEWPORT_PADDING = 50; +export const SIDEBAR_WIDTH = 350 +export const VIEWPORT_PADDING = 50 -export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3; -export const RACK_FILL_ICON_OPACITY = 0.8; +export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3 +export const RACK_FILL_ICON_OPACITY = 0.8 -export const MAP_MOVE_PIXELS_PER_EVENT = 20; -export const MAP_SCALE_PER_EVENT = 1.1; -export const MAP_MIN_SCALE = 0.5; -export const MAP_MAX_SCALE = 1.5; +export const MAP_MOVE_PIXELS_PER_EVENT = 20 +export const MAP_SCALE_PER_EVENT = 1.1 +export const MAP_MIN_SCALE = 0.5 +export const MAP_MAX_SCALE = 1.5 -export const MAX_NUM_UNITS_PER_MACHINE = 4; -export const DEFAULT_RACK_SLOT_CAPACITY = 42; -export const DEFAULT_RACK_POWER_CAPACITY = 10000; +export const MAX_NUM_UNITS_PER_MACHINE = 4 +export const DEFAULT_RACK_SLOT_CAPACITY = 42 +export const DEFAULT_RACK_POWER_CAPACITY = 10000 diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js index 67b3349c..455604e4 100644 --- a/frontend/src/components/app/map/MapStageComponent.js +++ b/frontend/src/components/app/map/MapStageComponent.js @@ -1,126 +1,126 @@ -import React from "react"; -import { Stage } from "react-konva"; -import { Shortcuts } from "react-shortcuts"; -import MapLayer from "../../../containers/app/map/layers/MapLayer"; -import ObjectHoverLayer from "../../../containers/app/map/layers/ObjectHoverLayer"; -import RoomHoverLayer from "../../../containers/app/map/layers/RoomHoverLayer"; -import jQuery from "../../../util/jquery"; -import { NAVBAR_HEIGHT } from "../../navigation/Navbar"; -import { MAP_MOVE_PIXELS_PER_EVENT } from "./MapConstants"; -import { Provider } from "react-redux"; -import { store } from "../../../store/configure-store"; +import React from 'react' +import { Stage } from 'react-konva' +import { Shortcuts } from 'react-shortcuts' +import MapLayer from '../../../containers/app/map/layers/MapLayer' +import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLayer' +import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer' +import jQuery from '../../../util/jquery' +import { NAVBAR_HEIGHT } from '../../navigation/Navbar' +import { MAP_MOVE_PIXELS_PER_EVENT } from './MapConstants' +import { Provider } from 'react-redux' +import { store } from '../../../store/configure-store' class MapStageComponent extends React.Component { - state = { - mouseX: 0, - mouseY: 0 - }; + state = { + mouseX: 0, + mouseY: 0, + } - constructor(props) { - super(props); + constructor(props) { + super(props) - this.updateDimensions = this.updateDimensions.bind(this); - this.updateScale = this.updateScale.bind(this); - } + this.updateDimensions = this.updateDimensions.bind(this) + this.updateScale = this.updateScale.bind(this) + } - componentWillMount() { - this.updateDimensions(); - } + componentWillMount() { + this.updateDimensions() + } - componentDidMount() { - window.addEventListener("resize", this.updateDimensions); - window.addEventListener("wheel", this.updateScale); + componentDidMount() { + window.addEventListener('resize', this.updateDimensions) + window.addEventListener('wheel', this.updateScale) - window["exportCanvasToImage"] = () => { - const download = document.createElement("a"); - download.href = this.stage.getStage().toDataURL(); - download.download = "opendc-canvas-export-" + Date.now() + ".png"; - download.click(); - }; - } + window['exportCanvasToImage'] = () => { + const download = document.createElement('a') + download.href = this.stage.getStage().toDataURL() + download.download = 'opendc-canvas-export-' + Date.now() + '.png' + download.click() + } + } - componentWillUnmount() { - window.removeEventListener("resize", this.updateDimensions); - window.removeEventListener("wheel", this.updateScale); - } + componentWillUnmount() { + window.removeEventListener('resize', this.updateDimensions) + window.removeEventListener('wheel', this.updateScale) + } - updateDimensions() { - this.props.setMapDimensions( - jQuery(window).width(), - jQuery(window).height() - NAVBAR_HEIGHT - ); - } + updateDimensions() { + this.props.setMapDimensions( + jQuery(window).width(), + jQuery(window).height() - NAVBAR_HEIGHT, + ) + } - updateScale(e) { - e.preventDefault(); - this.props.zoomInOnPosition( - e.deltaY < 0, - this.state.mouseX, - this.state.mouseY - ); - } + updateScale(e) { + e.preventDefault() + this.props.zoomInOnPosition( + e.deltaY < 0, + this.state.mouseX, + this.state.mouseY, + ) + } - updateMousePosition() { - const mousePos = this.stage.getStage().getPointerPosition(); - this.setState({ mouseX: mousePos.x, mouseY: mousePos.y }); - } + updateMousePosition() { + const mousePos = this.stage.getStage().getPointerPosition() + this.setState({ mouseX: mousePos.x, mouseY: mousePos.y }) + } - handleShortcuts(action) { - switch (action) { - case "MOVE_LEFT": - this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0); - break; - case "MOVE_RIGHT": - this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0); - break; - case "MOVE_UP": - this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT); - break; - case "MOVE_DOWN": - this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT); - break; - default: - break; + handleShortcuts(action) { + switch (action) { + case 'MOVE_LEFT': + this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0) + break + case 'MOVE_RIGHT': + this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0) + break + case 'MOVE_UP': + this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT) + break + case 'MOVE_DOWN': + this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT) + break + default: + break + } } - } - moveWithDelta(deltaX, deltaY) { - this.props.setMapPositionWithBoundsCheck( - this.props.mapPosition.x + deltaX, - this.props.mapPosition.y + deltaY - ); - } + moveWithDelta(deltaX, deltaY) { + this.props.setMapPositionWithBoundsCheck( + this.props.mapPosition.x + deltaX, + this.props.mapPosition.y + deltaY, + ) + } - render() { - return ( - <Shortcuts - name="MAP" - handler={this.handleShortcuts.bind(this)} - targetNodeSelector="body" - > - <Stage - ref={stage => { - this.stage = stage; - }} - width={this.props.mapDimensions.width} - height={this.props.mapDimensions.height} - onMouseMove={this.updateMousePosition.bind(this)} - > - <Provider store={store}> - <MapLayer /> - <RoomHoverLayer - mouseX={this.state.mouseX} - mouseY={this.state.mouseY} - /> - <ObjectHoverLayer - mouseX={this.state.mouseX} - mouseY={this.state.mouseY} - /> - </Provider> - </Stage> - </Shortcuts> - ); - } + render() { + return ( + <Shortcuts + name="MAP" + handler={this.handleShortcuts.bind(this)} + targetNodeSelector="body" + > + <Stage + ref={stage => { + this.stage = stage + }} + width={this.props.mapDimensions.width} + height={this.props.mapDimensions.height} + onMouseMove={this.updateMousePosition.bind(this)} + > + <Provider store={store}> + <MapLayer/> + <RoomHoverLayer + mouseX={this.state.mouseX} + mouseY={this.state.mouseY} + /> + <ObjectHoverLayer + mouseX={this.state.mouseX} + mouseY={this.state.mouseY} + /> + </Provider> + </Stage> + </Shortcuts> + ) + } } -export default MapStageComponent; +export default MapStageComponent diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js index ee934f21..d166bcc8 100644 --- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js +++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js @@ -1,13 +1,13 @@ -import React from "react"; +import React from 'react' const ExportCanvasComponent = () => ( - <button - className="btn btn-success btn-circle btn-sm" - title="Export Canvas to PNG Image" - onClick={() => window["exportCanvasToImage"]()} - > - <span className="fa fa-camera" /> - </button> -); + <button + className="btn btn-success btn-circle btn-sm" + title="Export Canvas to PNG Image" + onClick={() => window['exportCanvasToImage']()} + > + <span className="fa fa-camera"/> + </button> +) -export default ExportCanvasComponent; +export default ExportCanvasComponent diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js index b7b5cc36..daaf8ec6 100644 --- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js +++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js @@ -1,14 +1,14 @@ -import React from "react"; -import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from "../MapConstants"; -import "./ScaleIndicatorComponent.css"; +import React from 'react' +import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants' +import './ScaleIndicatorComponent.css' const ScaleIndicatorComponent = ({ scale }) => ( - <div - className="scale-indicator" - style={{ width: TILE_SIZE_IN_PIXELS * scale }} - > - {TILE_SIZE_IN_METERS}m - </div> -); + <div + className="scale-indicator" + style={{ width: TILE_SIZE_IN_PIXELS * scale }} + > + {TILE_SIZE_IN_METERS}m + </div> +) -export default ScaleIndicatorComponent; +export default ScaleIndicatorComponent diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass index f2d2b55b..03a72c99 100644 --- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass +++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass @@ -1,9 +1,9 @@ .scale-indicator - position: absolute - right: 10px - bottom: 10px - z-index: 50 + position: absolute + right: 10px + bottom: 10px + z-index: 50 - border: solid 2px #212529 - border-top: none - border-left: none + border: solid 2px #212529 + border-top: none + border-left: none diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js index 605e9887..e3bb1dbb 100644 --- a/frontend/src/components/app/map/controls/ToolPanelComponent.js +++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js @@ -1,13 +1,13 @@ -import React from "react"; -import ZoomControlContainer from "../../../../containers/app/map/controls/ZoomControlContainer"; -import ExportCanvasComponent from "./ExportCanvasComponent"; -import "./ToolPanelComponent.css"; +import React from 'react' +import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer' +import ExportCanvasComponent from './ExportCanvasComponent' +import './ToolPanelComponent.css' const ToolPanelComponent = () => ( - <div className="tool-panel"> - <ZoomControlContainer /> - <ExportCanvasComponent /> - </div> -); + <div className="tool-panel"> + <ZoomControlContainer/> + <ExportCanvasComponent/> + </div> +) -export default ToolPanelComponent; +export default ToolPanelComponent diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.sass b/frontend/src/components/app/map/controls/ToolPanelComponent.sass index 996712b3..8b27d24a 100644 --- a/frontend/src/components/app/map/controls/ToolPanelComponent.sass +++ b/frontend/src/components/app/map/controls/ToolPanelComponent.sass @@ -1,5 +1,5 @@ .tool-panel - position: absolute - left: 10px - bottom: 10px - z-index: 50 + position: absolute + left: 10px + bottom: 10px + z-index: 50 diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js index e1b7491e..bd6527a6 100644 --- a/frontend/src/components/app/map/controls/ZoomControlComponent.js +++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js @@ -1,24 +1,24 @@ -import React from "react"; +import React from 'react' const ZoomControlComponent = ({ zoomInOnCenter }) => { - return ( - <span> + return ( + <span> <button - className="btn btn-default btn-circle btn-sm mr-1" - title="Zoom in" - onClick={() => zoomInOnCenter(true)} + className="btn btn-default btn-circle btn-sm mr-1" + title="Zoom in" + onClick={() => zoomInOnCenter(true)} > - <span className="fa fa-plus" /> + <span className="fa fa-plus"/> </button> <button - className="btn btn-default btn-circle btn-sm mr-1" - title="Zoom out" - onClick={() => zoomInOnCenter(false)} + className="btn btn-default btn-circle btn-sm mr-1" + title="Zoom out" + onClick={() => zoomInOnCenter(false)} > - <span className="fa fa-minus" /> + <span className="fa fa-minus"/> </button> </span> - ); -}; + ) +} -export default ZoomControlComponent; +export default ZoomControlComponent diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js index 57414463..556d6a7b 100644 --- a/frontend/src/components/app/map/elements/Backdrop.js +++ b/frontend/src/components/app/map/elements/Backdrop.js @@ -1,16 +1,16 @@ -import React from "react"; -import { Rect } from "react-konva"; -import { BACKDROP_COLOR } from "../../../../util/colors"; -import { MAP_SIZE_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Rect } from 'react-konva' +import { BACKDROP_COLOR } from '../../../../util/colors' +import { MAP_SIZE_IN_PIXELS } from '../MapConstants' const Backdrop = () => ( - <Rect - x={0} - y={0} - width={MAP_SIZE_IN_PIXELS} - height={MAP_SIZE_IN_PIXELS} - fill={BACKDROP_COLOR} - /> -); + <Rect + x={0} + y={0} + width={MAP_SIZE_IN_PIXELS} + height={MAP_SIZE_IN_PIXELS} + fill={BACKDROP_COLOR} + /> +) -export default Backdrop; +export default Backdrop diff --git a/frontend/src/components/app/map/elements/GrayLayer.js b/frontend/src/components/app/map/elements/GrayLayer.js index 28fadd8a..c54a34ad 100644 --- a/frontend/src/components/app/map/elements/GrayLayer.js +++ b/frontend/src/components/app/map/elements/GrayLayer.js @@ -1,17 +1,17 @@ -import React from "react"; -import { Rect } from "react-konva"; -import { GRAYED_OUT_AREA_COLOR } from "../../../../util/colors"; -import { MAP_SIZE_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Rect } from 'react-konva' +import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors' +import { MAP_SIZE_IN_PIXELS } from '../MapConstants' const GrayLayer = ({ onClick }) => ( - <Rect - x={0} - y={0} - width={MAP_SIZE_IN_PIXELS} - height={MAP_SIZE_IN_PIXELS} - fill={GRAYED_OUT_AREA_COLOR} - onClick={onClick} - /> -); + <Rect + x={0} + y={0} + width={MAP_SIZE_IN_PIXELS} + height={MAP_SIZE_IN_PIXELS} + fill={GRAYED_OUT_AREA_COLOR} + onClick={onClick} + /> +) -export default GrayLayer; +export default GrayLayer diff --git a/frontend/src/components/app/map/elements/HoverTile.js b/frontend/src/components/app/map/elements/HoverTile.js index 42e6547c..912229c4 100644 --- a/frontend/src/components/app/map/elements/HoverTile.js +++ b/frontend/src/components/app/map/elements/HoverTile.js @@ -1,30 +1,27 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Rect } from "react-konva"; -import { - ROOM_HOVER_INVALID_COLOR, - ROOM_HOVER_VALID_COLOR -} from "../../../../util/colors"; -import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; +import PropTypes from 'prop-types' +import React from 'react' +import { Rect } from 'react-konva' +import { ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR } from '../../../../util/colors' +import { TILE_SIZE_IN_PIXELS } from '../MapConstants' const HoverTile = ({ pixelX, pixelY, isValid, scale, onClick }) => ( - <Rect - x={pixelX} - y={pixelY} - scaleX={scale} - scaleY={scale} - width={TILE_SIZE_IN_PIXELS} - height={TILE_SIZE_IN_PIXELS} - fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR} - onClick={onClick} - /> -); + <Rect + x={pixelX} + y={pixelY} + scaleX={scale} + scaleY={scale} + width={TILE_SIZE_IN_PIXELS} + height={TILE_SIZE_IN_PIXELS} + fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR} + onClick={onClick} + /> +) HoverTile.propTypes = { - pixelX: PropTypes.number.isRequired, - pixelY: PropTypes.number.isRequired, - isValid: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired -}; + pixelX: PropTypes.number.isRequired, + pixelY: PropTypes.number.isRequired, + isValid: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, +} -export default HoverTile; +export default HoverTile diff --git a/frontend/src/components/app/map/elements/ImageComponent.js b/frontend/src/components/app/map/elements/ImageComponent.js index cf41ddfe..2b5c569f 100644 --- a/frontend/src/components/app/map/elements/ImageComponent.js +++ b/frontend/src/components/app/map/elements/ImageComponent.js @@ -1,48 +1,48 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Image } from "react-konva"; +import PropTypes from 'prop-types' +import React from 'react' +import { Image } from 'react-konva' class ImageComponent extends React.Component { - static imageCaches = {}; - static propTypes = { - src: PropTypes.string.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - opacity: PropTypes.number.isRequired - }; - - state = { - image: null - }; + static imageCaches = {} + static propTypes = { + src: PropTypes.string.isRequired, + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + opacity: PropTypes.number.isRequired, + } - componentDidMount() { - if (ImageComponent.imageCaches[this.props.src]) { - this.setState({ image: ImageComponent.imageCaches[this.props.src] }); - return; + state = { + image: null, } - const image = new window.Image(); - image.src = this.props.src; - image.onload = () => { - this.setState({ image }); - ImageComponent.imageCaches[this.props.src] = image; - }; - } + componentDidMount() { + if (ImageComponent.imageCaches[this.props.src]) { + this.setState({ image: ImageComponent.imageCaches[this.props.src] }) + return + } - render() { - return ( - <Image - image={this.state.image} - x={this.props.x} - y={this.props.y} - width={this.props.width} - height={this.props.height} - opacity={this.props.opacity} - /> - ); - } + const image = new window.Image() + image.src = this.props.src + image.onload = () => { + this.setState({ image }) + ImageComponent.imageCaches[this.props.src] = image + } + } + + render() { + return ( + <Image + image={this.state.image} + x={this.props.x} + y={this.props.y} + width={this.props.width} + height={this.props.height} + opacity={this.props.opacity} + /> + ) + } } -export default ImageComponent; +export default ImageComponent diff --git a/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js index 43701d97..6e56e059 100644 --- a/frontend/src/components/app/map/elements/RackFillBar.js +++ b/frontend/src/components/app/map/elements/RackFillBar.js @@ -1,89 +1,89 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group, Rect } from "react-konva"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group, Rect } from 'react-konva' import { - RACK_ENERGY_BAR_BACKGROUND_COLOR, - RACK_ENERGY_BAR_FILL_COLOR, - RACK_SPACE_BAR_BACKGROUND_COLOR, - RACK_SPACE_BAR_FILL_COLOR -} from "../../../../util/colors"; + RACK_ENERGY_BAR_BACKGROUND_COLOR, + RACK_ENERGY_BAR_FILL_COLOR, + RACK_SPACE_BAR_BACKGROUND_COLOR, + RACK_SPACE_BAR_FILL_COLOR, +} from '../../../../util/colors' import { - OBJECT_BORDER_WIDTH_IN_PIXELS, - OBJECT_MARGIN_IN_PIXELS, - RACK_FILL_ICON_OPACITY, - RACK_FILL_ICON_WIDTH, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; -import ImageComponent from "./ImageComponent"; + OBJECT_BORDER_WIDTH_IN_PIXELS, + OBJECT_MARGIN_IN_PIXELS, + RACK_FILL_ICON_OPACITY, + RACK_FILL_ICON_WIDTH, + TILE_SIZE_IN_PIXELS, +} from '../MapConstants' +import ImageComponent from './ImageComponent' const RackFillBar = ({ positionX, positionY, type, fillFraction }) => { - const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2; - const x = - positionX * TILE_SIZE_IN_PIXELS + - OBJECT_MARGIN_IN_PIXELS + - (type === "space" - ? halfOfObjectBorderWidth - : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS)); - const startY = - positionY * TILE_SIZE_IN_PIXELS + - OBJECT_MARGIN_IN_PIXELS + - halfOfObjectBorderWidth; - const width = - 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - - halfOfObjectBorderWidth; - const fullHeight = - TILE_SIZE_IN_PIXELS - - OBJECT_MARGIN_IN_PIXELS * 2 - - OBJECT_BORDER_WIDTH_IN_PIXELS; + const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2 + const x = + positionX * TILE_SIZE_IN_PIXELS + + OBJECT_MARGIN_IN_PIXELS + + (type === 'space' + ? halfOfObjectBorderWidth + : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS)) + const startY = + positionY * TILE_SIZE_IN_PIXELS + + OBJECT_MARGIN_IN_PIXELS + + halfOfObjectBorderWidth + const width = + 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - + halfOfObjectBorderWidth + const fullHeight = + TILE_SIZE_IN_PIXELS - + OBJECT_MARGIN_IN_PIXELS * 2 - + OBJECT_BORDER_WIDTH_IN_PIXELS - const fractionHeight = fillFraction * fullHeight; - const fractionY = - (positionY + 1) * TILE_SIZE_IN_PIXELS - - OBJECT_MARGIN_IN_PIXELS - - halfOfObjectBorderWidth - - fractionHeight; + const fractionHeight = fillFraction * fullHeight + const fractionY = + (positionY + 1) * TILE_SIZE_IN_PIXELS - + OBJECT_MARGIN_IN_PIXELS - + halfOfObjectBorderWidth - + fractionHeight - return ( - <Group> - <Rect - x={x} - y={startY} - width={width} - height={fullHeight} - fill={ - type === "space" - ? RACK_SPACE_BAR_BACKGROUND_COLOR - : RACK_ENERGY_BAR_BACKGROUND_COLOR - } - /> - <Rect - x={x} - y={fractionY} - width={width} - height={fractionHeight} - fill={ - type === "space" - ? RACK_SPACE_BAR_FILL_COLOR - : RACK_ENERGY_BAR_FILL_COLOR - } - /> - <ImageComponent - src={"/img/topology/rack-" + type + "-icon.png"} - x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5} - y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5} - width={RACK_FILL_ICON_WIDTH} - height={RACK_FILL_ICON_WIDTH} - opacity={RACK_FILL_ICON_OPACITY} - /> - </Group> - ); -}; + return ( + <Group> + <Rect + x={x} + y={startY} + width={width} + height={fullHeight} + fill={ + type === 'space' + ? RACK_SPACE_BAR_BACKGROUND_COLOR + : RACK_ENERGY_BAR_BACKGROUND_COLOR + } + /> + <Rect + x={x} + y={fractionY} + width={width} + height={fractionHeight} + fill={ + type === 'space' + ? RACK_SPACE_BAR_FILL_COLOR + : RACK_ENERGY_BAR_FILL_COLOR + } + /> + <ImageComponent + src={'/img/topology/rack-' + type + '-icon.png'} + x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5} + y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5} + width={RACK_FILL_ICON_WIDTH} + height={RACK_FILL_ICON_WIDTH} + opacity={RACK_FILL_ICON_OPACITY} + /> + </Group> + ) +} RackFillBar.propTypes = { - positionX: PropTypes.number.isRequired, - positionY: PropTypes.number.isRequired, - type: PropTypes.string.isRequired, - fillFraction: PropTypes.number.isRequired -}; + positionX: PropTypes.number.isRequired, + positionY: PropTypes.number.isRequired, + type: PropTypes.string.isRequired, + fillFraction: PropTypes.number.isRequired, +} -export default RackFillBar; +export default RackFillBar diff --git a/frontend/src/components/app/map/elements/RoomTile.js b/frontend/src/components/app/map/elements/RoomTile.js index 71c3bf15..43bf918e 100644 --- a/frontend/src/components/app/map/elements/RoomTile.js +++ b/frontend/src/components/app/map/elements/RoomTile.js @@ -1,20 +1,20 @@ -import React from "react"; -import { Rect } from "react-konva"; -import Shapes from "../../../../shapes/index"; -import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Rect } from 'react-konva' +import Shapes from '../../../../shapes/index' +import { TILE_SIZE_IN_PIXELS } from '../MapConstants' const RoomTile = ({ tile, color }) => ( - <Rect - x={tile.positionX * TILE_SIZE_IN_PIXELS} - y={tile.positionY * TILE_SIZE_IN_PIXELS} - width={TILE_SIZE_IN_PIXELS} - height={TILE_SIZE_IN_PIXELS} - fill={color} - /> -); + <Rect + x={tile.positionX * TILE_SIZE_IN_PIXELS} + y={tile.positionY * TILE_SIZE_IN_PIXELS} + width={TILE_SIZE_IN_PIXELS} + height={TILE_SIZE_IN_PIXELS} + fill={color} + /> +) RoomTile.propTypes = { - tile: Shapes.Tile -}; + tile: Shapes.Tile, +} -export default RoomTile; +export default RoomTile diff --git a/frontend/src/components/app/map/elements/TileObject.js b/frontend/src/components/app/map/elements/TileObject.js index c1b631db..9e87cc82 100644 --- a/frontend/src/components/app/map/elements/TileObject.js +++ b/frontend/src/components/app/map/elements/TileObject.js @@ -1,29 +1,25 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Rect } from "react-konva"; -import { OBJECT_BORDER_COLOR } from "../../../../util/colors"; -import { - OBJECT_BORDER_WIDTH_IN_PIXELS, - OBJECT_MARGIN_IN_PIXELS, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; +import PropTypes from 'prop-types' +import React from 'react' +import { Rect } from 'react-konva' +import { OBJECT_BORDER_COLOR } from '../../../../util/colors' +import { OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' const TileObject = ({ positionX, positionY, color }) => ( - <Rect - x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} - y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} - width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} - height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} - fill={color} - stroke={OBJECT_BORDER_COLOR} - strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS} - /> -); + <Rect + x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} + y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} + width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} + height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} + fill={color} + stroke={OBJECT_BORDER_COLOR} + strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS} + /> +) TileObject.propTypes = { - positionX: PropTypes.number.isRequired, - positionY: PropTypes.number.isRequired, - color: PropTypes.string.isRequired -}; + positionX: PropTypes.number.isRequired, + positionY: PropTypes.number.isRequired, + color: PropTypes.string.isRequired, +} -export default TileObject; +export default TileObject diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js index 06377152..dd6e0beb 100644 --- a/frontend/src/components/app/map/elements/TilePlusIcon.js +++ b/frontend/src/components/app/map/elements/TilePlusIcon.js @@ -1,52 +1,48 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group, Line } from "react-konva"; -import { TILE_PLUS_COLOR } from "../../../../util/colors"; -import { - TILE_PLUS_MARGIN_IN_PIXELS, - TILE_PLUS_WIDTH_IN_PIXELS, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group, Line } from 'react-konva' +import { TILE_PLUS_COLOR } from '../../../../util/colors' +import { TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => { - const linePoints = [ - [ - pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelY + - TILE_SIZE_IN_PIXELS * mapScale - - TILE_PLUS_MARGIN_IN_PIXELS * mapScale - ], - [ - pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelX + - TILE_SIZE_IN_PIXELS * mapScale - - TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale + const linePoints = [ + [ + pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelY + + TILE_SIZE_IN_PIXELS * mapScale - + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + ], + [ + pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelX + + TILE_SIZE_IN_PIXELS * mapScale - + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + ], ] - ]; - return ( - <Group> - {linePoints.map((points, index) => ( - <Line - key={index} - points={points} - lineCap="round" - stroke={TILE_PLUS_COLOR} - strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale} - listening={false} - /> - ))} - </Group> - ); -}; + return ( + <Group> + {linePoints.map((points, index) => ( + <Line + key={index} + points={points} + lineCap="round" + stroke={TILE_PLUS_COLOR} + strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale} + listening={false} + /> + ))} + </Group> + ) +} TilePlusIcon.propTypes = { - pixelX: PropTypes.number, - pixelY: PropTypes.number, - mapScale: PropTypes.number -}; + pixelX: PropTypes.number, + pixelY: PropTypes.number, + mapScale: PropTypes.number, +} -export default TilePlusIcon; +export default TilePlusIcon diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js index c5011656..d1ba6157 100644 --- a/frontend/src/components/app/map/elements/WallSegment.js +++ b/frontend/src/components/app/map/elements/WallSegment.js @@ -1,39 +1,39 @@ -import React from "react"; -import { Line } from "react-konva"; -import Shapes from "../../../../shapes/index"; -import { WALL_COLOR } from "../../../../util/colors"; -import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Line } from 'react-konva' +import Shapes from '../../../../shapes/index' +import { WALL_COLOR } from '../../../../util/colors' +import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from '../MapConstants' const WallSegment = ({ wallSegment }) => { - let points; - if (wallSegment.isHorizontal) { - points = [ - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS, - (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS - ]; - } else { - points = [ - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS, - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS - ]; - } + let points + if (wallSegment.isHorizontal) { + points = [ + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS, + (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS, + ] + } else { + points = [ + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS, + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS, + ] + } - return ( - <Line - points={points} - lineCap="round" - stroke={WALL_COLOR} - strokeWidth={WALL_WIDTH_IN_PIXELS} - /> - ); -}; + return ( + <Line + points={points} + lineCap="round" + stroke={WALL_COLOR} + strokeWidth={WALL_WIDTH_IN_PIXELS} + /> + ) +} WallSegment.propTypes = { - wallSegment: Shapes.WallSegment -}; + wallSegment: Shapes.WallSegment, +} -export default WallSegment; +export default WallSegment diff --git a/frontend/src/components/app/map/groups/DatacenterGroup.js b/frontend/src/components/app/map/groups/DatacenterGroup.js index 51e32db6..3d3b9702 100644 --- a/frontend/src/components/app/map/groups/DatacenterGroup.js +++ b/frontend/src/components/app/map/groups/DatacenterGroup.js @@ -1,40 +1,40 @@ -import React from "react"; -import { Group } from "react-konva"; -import GrayContainer from "../../../../containers/app/map/GrayContainer"; -import RoomContainer from "../../../../containers/app/map/RoomContainer"; -import Shapes from "../../../../shapes/index"; +import React from 'react' +import { Group } from 'react-konva' +import GrayContainer from '../../../../containers/app/map/GrayContainer' +import RoomContainer from '../../../../containers/app/map/RoomContainer' +import Shapes from '../../../../shapes/index' const DatacenterGroup = ({ datacenter, interactionLevel }) => { - if (!datacenter) { - return <Group />; - } + if (!datacenter) { + return <Group/> + } - if (interactionLevel.mode === "BUILDING") { - return ( - <Group> - {datacenter.roomIds.map(roomId => ( - <RoomContainer key={roomId} roomId={roomId} /> - ))} - </Group> - ); - } + if (interactionLevel.mode === 'BUILDING') { + return ( + <Group> + {datacenter.roomIds.map(roomId => ( + <RoomContainer key={roomId} roomId={roomId}/> + ))} + </Group> + ) + } - return ( - <Group> - {datacenter.roomIds - .filter(roomId => roomId !== interactionLevel.roomId) - .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)} - {interactionLevel.mode === "ROOM" ? <GrayContainer /> : null} - {datacenter.roomIds - .filter(roomId => roomId === interactionLevel.roomId) - .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)} - </Group> - ); -}; + return ( + <Group> + {datacenter.roomIds + .filter(roomId => roomId !== interactionLevel.roomId) + .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)} + {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null} + {datacenter.roomIds + .filter(roomId => roomId === interactionLevel.roomId) + .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)} + </Group> + ) +} DatacenterGroup.propTypes = { - datacenter: Shapes.Datacenter, - interactionLevel: Shapes.InteractionLevel -}; + datacenter: Shapes.Datacenter, + interactionLevel: Shapes.InteractionLevel, +} -export default DatacenterGroup; +export default DatacenterGroup diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js index bbb1eb68..10554834 100644 --- a/frontend/src/components/app/map/groups/GridGroup.js +++ b/frontend/src/components/app/map/groups/GridGroup.js @@ -1,41 +1,36 @@ -import React from "react"; -import { Group, Line } from "react-konva"; -import { GRID_COLOR } from "../../../../util/colors"; -import { - GRID_LINE_WIDTH_IN_PIXELS, - MAP_SIZE, - MAP_SIZE_IN_PIXELS, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; +import React from 'react' +import { Group, Line } from 'react-konva' +import { GRID_COLOR } from '../../../../util/colors' +import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' -const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i); +const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i) const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ - 0, - index * TILE_SIZE_IN_PIXELS, - MAP_SIZE_IN_PIXELS, - index * TILE_SIZE_IN_PIXELS -]); + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS, + index * TILE_SIZE_IN_PIXELS, +]) const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ - index * TILE_SIZE_IN_PIXELS, - 0, - index * TILE_SIZE_IN_PIXELS, - MAP_SIZE_IN_PIXELS -]); + index * TILE_SIZE_IN_PIXELS, + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS, +]) const GridGroup = () => ( - <Group> - {HORIZONTAL_POINT_PAIRS.concat( - VERTICAL_POINT_PAIRS - ).map((points, index) => ( - <Line - key={index} - points={points} - stroke={GRID_COLOR} - strokeWidth={GRID_LINE_WIDTH_IN_PIXELS} - listening={false} - /> - ))} - </Group> -); + <Group> + {HORIZONTAL_POINT_PAIRS.concat( + VERTICAL_POINT_PAIRS, + ).map((points, index) => ( + <Line + key={index} + points={points} + stroke={GRID_COLOR} + strokeWidth={GRID_LINE_WIDTH_IN_PIXELS} + listening={false} + /> + ))} + </Group> +) -export default GridGroup; +export default GridGroup diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js index 69d6ac10..708dcf69 100644 --- a/frontend/src/components/app/map/groups/RackGroup.js +++ b/frontend/src/components/app/map/groups/RackGroup.js @@ -1,43 +1,43 @@ -import React from "react"; -import { Group } from "react-konva"; -import RackEnergyFillContainer from "../../../../containers/app/map/RackEnergyFillContainer"; -import RackSpaceFillContainer from "../../../../containers/app/map/RackSpaceFillContainer"; -import Shapes from "../../../../shapes/index"; -import { RACK_BACKGROUND_COLOR } from "../../../../util/colors"; -import { convertLoadToSimulationColor } from "../../../../util/simulation-load"; -import TileObject from "../elements/TileObject"; +import React from 'react' +import { Group } from 'react-konva' +import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFillContainer' +import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer' +import Shapes from '../../../../shapes/index' +import { RACK_BACKGROUND_COLOR } from '../../../../util/colors' +import { convertLoadToSimulationColor } from '../../../../util/simulation-load' +import TileObject from '../elements/TileObject' const RackGroup = ({ tile, inSimulation, rackLoad }) => { - let color = RACK_BACKGROUND_COLOR; - if (inSimulation && rackLoad >= 0) { - color = convertLoadToSimulationColor(rackLoad); - } + let color = RACK_BACKGROUND_COLOR + if (inSimulation && rackLoad >= 0) { + color = convertLoadToSimulationColor(rackLoad) + } - return ( - <Group> - <TileObject - positionX={tile.positionX} - positionY={tile.positionY} - color={color} - /> - <Group opacity={inSimulation ? 0.3 : 1}> - <RackSpaceFillContainer - tileId={tile.id} - positionX={tile.positionX} - positionY={tile.positionY} - /> - <RackEnergyFillContainer - tileId={tile.id} - positionX={tile.positionX} - positionY={tile.positionY} - /> - </Group> - </Group> - ); -}; + return ( + <Group> + <TileObject + positionX={tile.positionX} + positionY={tile.positionY} + color={color} + /> + <Group opacity={inSimulation ? 0.3 : 1}> + <RackSpaceFillContainer + tileId={tile.id} + positionX={tile.positionX} + positionY={tile.positionY} + /> + <RackEnergyFillContainer + tileId={tile.id} + positionX={tile.positionX} + positionY={tile.positionY} + /> + </Group> + </Group> + ) +} RackGroup.propTypes = { - tile: Shapes.Tile -}; + tile: Shapes.Tile, +} -export default RackGroup; +export default RackGroup diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js index c8f0d3db..230e3c9b 100644 --- a/frontend/src/components/app/map/groups/RoomGroup.js +++ b/frontend/src/components/app/map/groups/RoomGroup.js @@ -1,56 +1,56 @@ -import React from "react"; -import { Group } from "react-konva"; -import GrayContainer from "../../../../containers/app/map/GrayContainer"; -import TileContainer from "../../../../containers/app/map/TileContainer"; -import WallContainer from "../../../../containers/app/map/WallContainer"; -import Shapes from "../../../../shapes/index"; +import React from 'react' +import { Group } from 'react-konva' +import GrayContainer from '../../../../containers/app/map/GrayContainer' +import TileContainer from '../../../../containers/app/map/TileContainer' +import WallContainer from '../../../../containers/app/map/WallContainer' +import Shapes from '../../../../shapes/index' const RoomGroup = ({ - room, - interactionLevel, - currentRoomInConstruction, - onClick -}) => { - if (currentRoomInConstruction === room.id) { - return ( - <Group onClick={onClick}> - {room.tileIds.map(tileId => ( - <TileContainer key={tileId} tileId={tileId} newTile={true} /> - ))} - </Group> - ); - } + room, + interactionLevel, + currentRoomInConstruction, + onClick, + }) => { + if (currentRoomInConstruction === room.id) { + return ( + <Group onClick={onClick}> + {room.tileIds.map(tileId => ( + <TileContainer key={tileId} tileId={tileId} newTile={true}/> + ))} + </Group> + ) + } - return ( - <Group onClick={onClick}> - {(() => { - if ( - (interactionLevel.mode === "RACK" || - interactionLevel.mode === "MACHINE") && - interactionLevel.roomId === room.id - ) { - return [ - room.tileIds - .filter(tileId => tileId !== interactionLevel.tileId) - .map(tileId => <TileContainer key={tileId} tileId={tileId} />), - <GrayContainer key={-1} />, - room.tileIds - .filter(tileId => tileId === interactionLevel.tileId) - .map(tileId => <TileContainer key={tileId} tileId={tileId} />) - ]; - } else { - return room.tileIds.map(tileId => ( - <TileContainer key={tileId} tileId={tileId} /> - )); - } - })()} - <WallContainer roomId={room.id} /> - </Group> - ); -}; + return ( + <Group onClick={onClick}> + {(() => { + if ( + (interactionLevel.mode === 'RACK' || + interactionLevel.mode === 'MACHINE') && + interactionLevel.roomId === room.id + ) { + return [ + room.tileIds + .filter(tileId => tileId !== interactionLevel.tileId) + .map(tileId => <TileContainer key={tileId} tileId={tileId}/>), + <GrayContainer key={-1}/>, + room.tileIds + .filter(tileId => tileId === interactionLevel.tileId) + .map(tileId => <TileContainer key={tileId} tileId={tileId}/>), + ] + } else { + return room.tileIds.map(tileId => ( + <TileContainer key={tileId} tileId={tileId}/> + )) + } + })()} + <WallContainer roomId={room.id}/> + </Group> + ) +} RoomGroup.propTypes = { - room: Shapes.Room -}; + room: Shapes.Room, +} -export default RoomGroup; +export default RoomGroup diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js index 8f3953d7..49e2e52b 100644 --- a/frontend/src/components/app/map/groups/TileGroup.js +++ b/frontend/src/components/app/map/groups/TileGroup.js @@ -1,43 +1,40 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group } from "react-konva"; -import RackContainer from "../../../../containers/app/map/RackContainer"; -import Shapes from "../../../../shapes/index"; -import { - ROOM_DEFAULT_COLOR, - ROOM_IN_CONSTRUCTION_COLOR -} from "../../../../util/colors"; -import { convertLoadToSimulationColor } from "../../../../util/simulation-load"; -import RoomTile from "../elements/RoomTile"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group } from 'react-konva' +import RackContainer from '../../../../containers/app/map/RackContainer' +import Shapes from '../../../../shapes/index' +import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors' +import { convertLoadToSimulationColor } from '../../../../util/simulation-load' +import RoomTile from '../elements/RoomTile' const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => { - let tileObject; - switch (tile.objectType) { - case "RACK": - tileObject = <RackContainer tile={tile} />; - break; - default: - tileObject = null; - } + let tileObject + switch (tile.objectType) { + case 'RACK': + tileObject = <RackContainer tile={tile}/> + break + default: + tileObject = null + } - let color = ROOM_DEFAULT_COLOR; - if (newTile) { - color = ROOM_IN_CONSTRUCTION_COLOR; - } else if (inSimulation && roomLoad >= 0) { - color = convertLoadToSimulationColor(roomLoad); - } + let color = ROOM_DEFAULT_COLOR + if (newTile) { + color = ROOM_IN_CONSTRUCTION_COLOR + } else if (inSimulation && roomLoad >= 0) { + color = convertLoadToSimulationColor(roomLoad) + } - return ( - <Group onClick={() => onClick(tile)}> - <RoomTile tile={tile} color={color} /> - {tileObject} - </Group> - ); -}; + return ( + <Group onClick={() => onClick(tile)}> + <RoomTile tile={tile} color={color}/> + {tileObject} + </Group> + ) +} TileGroup.propTypes = { - tile: Shapes.Tile, - newTile: PropTypes.bool -}; + tile: Shapes.Tile, + newTile: PropTypes.bool, +} -export default TileGroup; +export default TileGroup diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js index 43de66e8..81c72d94 100644 --- a/frontend/src/components/app/map/groups/WallGroup.js +++ b/frontend/src/components/app/map/groups/WallGroup.js @@ -1,22 +1,22 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group } from "react-konva"; -import Shapes from "../../../../shapes/index"; -import { deriveWallLocations } from "../../../../util/tile-calculations"; -import WallSegment from "../elements/WallSegment"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group } from 'react-konva' +import Shapes from '../../../../shapes/index' +import { deriveWallLocations } from '../../../../util/tile-calculations' +import WallSegment from '../elements/WallSegment' const WallGroup = ({ tiles }) => { - return ( - <Group> - {deriveWallLocations(tiles).map((wallSegment, index) => ( - <WallSegment key={index} wallSegment={wallSegment} /> - ))} - </Group> - ); -}; + return ( + <Group> + {deriveWallLocations(tiles).map((wallSegment, index) => ( + <WallSegment key={index} wallSegment={wallSegment}/> + ))} + </Group> + ) +} WallGroup.propTypes = { - tiles: PropTypes.arrayOf(Shapes.Tile).isRequired -}; + tiles: PropTypes.arrayOf(Shapes.Tile).isRequired, +} -export default WallGroup; +export default WallGroup diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js index c39532f1..25c9c412 100644 --- a/frontend/src/components/app/map/layers/HoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js @@ -1,85 +1,85 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Layer } from "react-konva"; -import HoverTile from "../elements/HoverTile"; -import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; +import PropTypes from 'prop-types' +import React from 'react' +import { Layer } from 'react-konva' +import HoverTile from '../elements/HoverTile' +import { TILE_SIZE_IN_PIXELS } from '../MapConstants' class HoverLayerComponent extends React.Component { - static propTypes = { - mouseX: PropTypes.number.isRequired, - mouseY: PropTypes.number.isRequired, - mapPosition: PropTypes.object.isRequired, - mapScale: PropTypes.number.isRequired, - isEnabled: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }; - - state = { - positionX: -1, - positionY: -1, - validity: false - }; + static propTypes = { + mouseX: PropTypes.number.isRequired, + mouseY: PropTypes.number.isRequired, + mapPosition: PropTypes.object.isRequired, + mapScale: PropTypes.number.isRequired, + isEnabled: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + } - componentDidUpdate() { - if (!this.props.isEnabled()) { - return; + state = { + positionX: -1, + positionY: -1, + validity: false, } - const positionX = Math.floor( - (this.props.mouseX - this.props.mapPosition.x) / - (this.props.mapScale * TILE_SIZE_IN_PIXELS) - ); - const positionY = Math.floor( - (this.props.mouseY - this.props.mapPosition.y) / - (this.props.mapScale * TILE_SIZE_IN_PIXELS) - ); + componentDidUpdate() { + if (!this.props.isEnabled()) { + return + } - if ( - positionX !== this.state.positionX || - positionY !== this.state.positionY - ) { - this.setState({ - positionX, - positionY, - validity: this.props.isValid(positionX, positionY) - }); - } - } + const positionX = Math.floor( + (this.props.mouseX - this.props.mapPosition.x) / + (this.props.mapScale * TILE_SIZE_IN_PIXELS), + ) + const positionY = Math.floor( + (this.props.mouseY - this.props.mapPosition.y) / + (this.props.mapScale * TILE_SIZE_IN_PIXELS), + ) - render() { - if (!this.props.isEnabled()) { - return <Layer />; + if ( + positionX !== this.state.positionX || + positionY !== this.state.positionY + ) { + this.setState({ + positionX, + positionY, + validity: this.props.isValid(positionX, positionY), + }) + } } - const pixelX = - this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + - this.props.mapPosition.x; - const pixelY = - this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + - this.props.mapPosition.y; + render() { + if (!this.props.isEnabled()) { + return <Layer/> + } - return ( - <Layer opacity={0.6}> - <HoverTile - pixelX={pixelX} - pixelY={pixelY} - scale={this.props.mapScale} - isValid={this.state.validity} - onClick={() => - this.state.validity - ? this.props.onClick(this.state.positionX, this.state.positionY) - : undefined} - /> - {this.props.children - ? React.cloneElement(this.props.children, { - pixelX, - pixelY, - scale: this.props.mapScale - }) - : undefined} - </Layer> - ); - } + const pixelX = + this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + + this.props.mapPosition.x + const pixelY = + this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + + this.props.mapPosition.y + + return ( + <Layer opacity={0.6}> + <HoverTile + pixelX={pixelX} + pixelY={pixelY} + scale={this.props.mapScale} + isValid={this.state.validity} + onClick={() => + this.state.validity + ? this.props.onClick(this.state.positionX, this.state.positionY) + : undefined} + /> + {this.props.children + ? React.cloneElement(this.props.children, { + pixelX, + pixelY, + scale: this.props.mapScale, + }) + : undefined} + </Layer> + ) + } } -export default HoverLayerComponent; +export default HoverLayerComponent diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js index 6ad3cb88..1a31f2b9 100644 --- a/frontend/src/components/app/map/layers/MapLayerComponent.js +++ b/frontend/src/components/app/map/layers/MapLayerComponent.js @@ -1,22 +1,22 @@ -import React from "react"; -import { Group, Layer } from "react-konva"; -import DatacenterContainer from "../../../../containers/app/map/DatacenterContainer"; -import Backdrop from "../elements/Backdrop"; -import GridGroup from "../groups/GridGroup"; +import React from 'react' +import { Group, Layer } from 'react-konva' +import DatacenterContainer from '../../../../containers/app/map/DatacenterContainer' +import Backdrop from '../elements/Backdrop' +import GridGroup from '../groups/GridGroup' const MapLayerComponent = ({ mapPosition, mapScale }) => ( - <Layer> - <Group - x={mapPosition.x} - y={mapPosition.y} - scaleX={mapScale} - scaleY={mapScale} - > - <Backdrop /> - <DatacenterContainer /> - <GridGroup /> - </Group> - </Layer> -); + <Layer> + <Group + x={mapPosition.x} + y={mapPosition.y} + scaleX={mapScale} + scaleY={mapScale} + > + <Backdrop/> + <DatacenterContainer/> + <GridGroup/> + </Group> + </Layer> +) -export default MapLayerComponent; +export default MapLayerComponent diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js index e7342d3c..31689635 100644 --- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js @@ -1,11 +1,11 @@ -import React from "react"; -import TilePlusIcon from "../elements/TilePlusIcon"; -import HoverLayerComponent from "./HoverLayerComponent"; +import React from 'react' +import TilePlusIcon from '../elements/TilePlusIcon' +import HoverLayerComponent from './HoverLayerComponent' const ObjectHoverLayerComponent = props => ( - <HoverLayerComponent {...props}> - <TilePlusIcon {...props} /> - </HoverLayerComponent> -); + <HoverLayerComponent {...props}> + <TilePlusIcon {...props} /> + </HoverLayerComponent> +) -export default ObjectHoverLayerComponent; +export default ObjectHoverLayerComponent diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js index feea5ae5..d3d5e9b2 100644 --- a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js @@ -1,6 +1,6 @@ -import React from "react"; -import HoverLayerComponent from "./HoverLayerComponent"; +import React from 'react' +import HoverLayerComponent from './HoverLayerComponent' -const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} />; +const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} /> -export default RoomHoverLayerComponent; +export default RoomHoverLayerComponent diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js index 33dbe011..7ba8639a 100644 --- a/frontend/src/components/app/sidebars/Sidebar.js +++ b/frontend/src/components/app/sidebars/Sidebar.js @@ -1,50 +1,50 @@ -import classNames from "classnames"; -import React from "react"; -import "./Sidebar.css"; +import classNames from 'classnames' +import React from 'react' +import './Sidebar.css' class Sidebar extends React.Component { - state = { - collapsed: false - }; + state = { + collapsed: false, + } - render() { - const collapseButton = ( - <div - className={classNames("sidebar-collapse-button", { - "sidebar-collapse-button-right": this.props.isRight - })} - onClick={() => this.setState({ collapsed: !this.state.collapsed })} - > - {(this.state.collapsed && this.props.isRight) || - (!this.state.collapsed && !this.props.isRight) ? ( - <span - className="fa fa-angle-left" - title={this.props.isRight ? "Expand" : "Collapse"} - /> - ) : ( - <span - className="fa fa-angle-right" - title={this.props.isRight ? "Collapse" : "Expand"} - /> - )} - </div> - ); + render() { + const collapseButton = ( + <div + className={classNames('sidebar-collapse-button', { + 'sidebar-collapse-button-right': this.props.isRight, + })} + onClick={() => this.setState({ collapsed: !this.state.collapsed })} + > + {(this.state.collapsed && this.props.isRight) || + (!this.state.collapsed && !this.props.isRight) ? ( + <span + className="fa fa-angle-left" + title={this.props.isRight ? 'Expand' : 'Collapse'} + /> + ) : ( + <span + className="fa fa-angle-right" + title={this.props.isRight ? 'Collapse' : 'Expand'} + /> + )} + </div> + ) - if (this.state.collapsed) { - return collapseButton; + if (this.state.collapsed) { + return collapseButton + } + return ( + <div + className={classNames('sidebar p-3 h-100', { + 'sidebar-right': this.props.isRight, + })} + onWheel={e => e.stopPropagation()} + > + {this.props.children} + {collapseButton} + </div> + ) } - return ( - <div - className={classNames("sidebar p-3 h-100", { - "sidebar-right": this.props.isRight - })} - onWheel={e => e.stopPropagation()} - > - {this.props.children} - {collapseButton} - </div> - ); - } } -export default Sidebar; +export default Sidebar diff --git a/frontend/src/components/app/sidebars/Sidebar.sass b/frontend/src/components/app/sidebars/Sidebar.sass index 4d0e5f1e..02e8940d 100644 --- a/frontend/src/components/app/sidebars/Sidebar.sass +++ b/frontend/src/components/app/sidebars/Sidebar.sass @@ -2,49 +2,49 @@ @import ../../../style-globals/_mixins.sass .sidebar-collapse-button - position: absolute - left: 5px - top: 5px - padding: 5px 7px + position: absolute + left: 5px + top: 5px + padding: 5px 7px - background: white - border: solid 1px $gray-semi-light - z-index: 99 + background: white + border: solid 1px $gray-semi-light + z-index: 99 - +clickable - +border-radius(5px) - +transition(background, 200ms) + +clickable + +border-radius(5px) + +transition(background, 200ms) - &.sidebar-collapse-button-right - left: auto - right: 5px - top: 5px + &.sidebar-collapse-button-right + left: auto + right: 5px + top: 5px - &:hover - background: #eeeeee + &:hover + background: #eeeeee .sidebar - position: absolute - top: 0 - left: 0 - width: 350px + position: absolute + top: 0 + left: 0 + width: 350px - z-index: 100 - background: white + z-index: 100 + background: white - border-right: $gray-semi-dark 1px solid + border-right: $gray-semi-dark 1px solid - .sidebar-collapse-button - left: auto - right: -25px + .sidebar-collapse-button + left: auto + right: -25px .sidebar-right - left: auto - right: 0 + left: auto + right: 0 - border-left: $gray-semi-dark 1px solid - border-right: none + border-left: $gray-semi-dark 1px solid + border-right: none - .sidebar-collapse-button-right - left: -25px - right: auto + .sidebar-collapse-button-right + left: -25px + right: auto diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js index 8c9b164b..01005085 100644 --- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js +++ b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js @@ -1,22 +1,22 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const LoadBarComponent = ({ percent, disabled }) => ( - <div className="mt-1"> - <strong>Current load</strong> - <div className={classNames("progress", { disabled })}> - <div - className="progress-bar" - role="progressbar" - aria-valuenow={percent} - aria-valuemin="0" - aria-valuemax="100" - style={{ width: percent + "%" }} - > - {percent}% - </div> + <div className="mt-1"> + <strong>Current load</strong> + <div className={classNames('progress', { disabled })}> + <div + className="progress-bar" + role="progressbar" + aria-valuenow={percent} + aria-valuemin="0" + aria-valuemax="100" + style={{ width: percent + '%' }} + > + {percent}% + </div> + </div> </div> - </div> -); +) -export default LoadBarComponent; +export default LoadBarComponent diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js index 5f0d40cb..ae52891a 100644 --- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js +++ b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js @@ -1,90 +1,84 @@ -import React from "react"; -import ReactDOM from "react-dom/server"; -import SvgSaver from "svgsaver"; -import { - VictoryAxis, - VictoryChart, - VictoryLabel, - VictoryLine, - VictoryScatter -} from "victory"; -import { convertSecondsToFormattedTime } from "../../../../util/date-time"; +import React from 'react' +import ReactDOM from 'react-dom/server' +import SvgSaver from 'svgsaver' +import { VictoryAxis, VictoryChart, VictoryLabel, VictoryLine, VictoryScatter } from 'victory' +import { convertSecondsToFormattedTime } from '../../../../util/date-time' const LoadChartComponent = ({ data, currentTick }) => { - const onExport = () => { - const div = document.createElement("div"); - div.innerHTML = ReactDOM.renderToString( - <VictoryChartComponent - data={data} - currentTick={currentTick} - showCurrentTick={false} - /> - ); - div.firstChild.style = - "font-family: Roboto, Arial, sans-serif; font-size: 10pt;"; - const svgSaver = new SvgSaver(); - svgSaver.asSvg( - div.firstChild, - "opendc-chart-export-" + Date.now() + ".svg" - ); - }; + const onExport = () => { + const div = document.createElement('div') + div.innerHTML = ReactDOM.renderToString( + <VictoryChartComponent + data={data} + currentTick={currentTick} + showCurrentTick={false} + />, + ) + div.firstChild.style = + 'font-family: Roboto, Arial, sans-serif; font-size: 10pt;' + const svgSaver = new SvgSaver() + svgSaver.asSvg( + div.firstChild, + 'opendc-chart-export-' + Date.now() + '.svg', + ) + } - return ( - <div className="mt-1" style={{ position: "relative" }}> - <strong>Load over time</strong> - <VictoryChartComponent - data={data} - currentTick={currentTick} - showCurrentTick={true} - /> - <ExportChartComponent onExport={onExport} /> - </div> - ); -}; + return ( + <div className="mt-1" style={{ position: 'relative' }}> + <strong>Load over time</strong> + <VictoryChartComponent + data={data} + currentTick={currentTick} + showCurrentTick={true} + /> + <ExportChartComponent onExport={onExport}/> + </div> + ) +} const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => ( - <VictoryChart - height={250} - padding={{ top: 10, bottom: 50, left: 50, right: 50 }} - > - <VictoryAxis - tickFormat={tick => convertSecondsToFormattedTime(tick)} - fixLabelOverlap={true} - label="Simulated Time" - /> - <VictoryAxis dependentAxis label="Load" /> - <VictoryLine data={data} /> - <VictoryScatter data={data} /> - {showCurrentTick ? ( - <VictoryLine - labelComponent={ - <VictoryLabel renderInPortal angle={90} dy={-5} dx={60} /> - } - data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]} - labels={point => - point.y === 1 - ? "Current tick : " + convertSecondsToFormattedTime(currentTick) - : ""} - style={{ - data: { stroke: "#00A6D6", strokeWidth: 4 }, - labels: { fill: "#00A6D6" } - }} - /> - ) : ( - undefined - )} - </VictoryChart> -); + <VictoryChart + height={250} + padding={{ top: 10, bottom: 50, left: 50, right: 50 }} + > + <VictoryAxis + tickFormat={tick => convertSecondsToFormattedTime(tick)} + fixLabelOverlap={true} + label="Simulated Time" + /> + <VictoryAxis dependentAxis label="Load"/> + <VictoryLine data={data}/> + <VictoryScatter data={data}/> + {showCurrentTick ? ( + <VictoryLine + labelComponent={ + <VictoryLabel renderInPortal angle={90} dy={-5} dx={60}/> + } + data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]} + labels={point => + point.y === 1 + ? 'Current tick : ' + convertSecondsToFormattedTime(currentTick) + : ''} + style={{ + data: { stroke: '#00A6D6', strokeWidth: 4 }, + labels: { fill: '#00A6D6' }, + }} + /> + ) : ( + undefined + )} + </VictoryChart> +) const ExportChartComponent = ({ onExport }) => ( - <button - className="btn btn-success btn-circle btn-sm" - title="Export Chart to PNG Image" - onClick={onExport} - style={{ position: "absolute", top: 0, right: 0 }} - > - <span className="fa fa-camera" /> - </button> -); + <button + className="btn btn-success btn-circle btn-sm" + title="Export Chart to PNG Image" + onClick={onExport} + style={{ position: 'absolute', top: 0, right: 0 }} + > + <span className="fa fa-camera"/> + </button> +) -export default LoadChartComponent; +export default LoadChartComponent diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js index bc563dab..54a8b5e9 100644 --- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js +++ b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js @@ -1,23 +1,23 @@ -import React from "react"; +import React from 'react' const ExperimentMetadataComponent = ({ - experimentName, - pathName, - traceName, - schedulerName -}) => ( - <div> - <h2>{experimentName}</h2> - <p> - Path: <strong>{pathName}</strong> - </p> - <p> - Trace: <strong>{traceName}</strong> - </p> - <p> - Scheduler: <strong>{schedulerName}</strong> - </p> - </div> -); + experimentName, + pathName, + traceName, + schedulerName, + }) => ( + <div> + <h2>{experimentName}</h2> + <p> + Path: <strong>{pathName}</strong> + </p> + <p> + Trace: <strong>{traceName}</strong> + </p> + <p> + Scheduler: <strong>{schedulerName}</strong> + </p> + </div> +) -export default ExperimentMetadataComponent; +export default ExperimentMetadataComponent diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js index 3e4cf810..6ee6a3b9 100644 --- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js +++ b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js @@ -1,40 +1,35 @@ -import React from "react"; -import { - SIM_HIGH_COLOR, - SIM_LOW_COLOR, - SIM_MID_HIGH_COLOR, - SIM_MID_LOW_COLOR -} from "../../../../util/colors"; -import { LOAD_NAME_MAP } from "../../../../util/simulation-load"; +import React from 'react' +import { SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR } from '../../../../util/colors' +import { LOAD_NAME_MAP } from '../../../../util/simulation-load' const LoadMetricComponent = ({ loadMetric }) => ( - <div> <div> - Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong> - </div> - <div className="btn-group mb-2" style={{ display: "flex" }}> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }} - title="0-25%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }} - title="25-50%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }} - title="50-75%" - /> + <div> + Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong> + </div> + <div className="btn-group mb-2" style={{ display: 'flex' }}> <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }} - title="75-100%" + className="btn btn-secondary" + style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }} + title="0-25%" /> + <span + className="btn btn-secondary" + style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }} + title="25-50%" + /> + <span + className="btn btn-secondary" + style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }} + title="50-75%" + /> + <span + className="btn btn-secondary" + style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }} + title="75-100%" + /> + </div> </div> - </div> -); +) -export default LoadMetricComponent; +export default LoadMetricComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js index 08dbb29a..6e89c40e 100644 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js +++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js @@ -1,22 +1,22 @@ -import React from "react"; -import ExperimentMetadataContainer from "../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer"; -import LoadMetricContainer from "../../../../containers/app/sidebars/simulation/LoadMetricContainer"; -import TraceContainer from "../../../../containers/app/sidebars/simulation/TraceContainer"; -import Sidebar from "../Sidebar"; -import "./SimulationSidebarComponent.css"; +import React from 'react' +import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer' +import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer' +import TraceContainer from '../../../../containers/app/sidebars/simulation/TraceContainer' +import Sidebar from '../Sidebar' +import './SimulationSidebarComponent.css' const SimulationSidebarComponent = () => { - return ( - <Sidebar isRight={false}> - <div className="simulation-sidebar-container flex-column"> - <ExperimentMetadataContainer /> - <LoadMetricContainer /> - <div className="trace-container"> - <TraceContainer /> - </div> - </div> - </Sidebar> - ); -}; + return ( + <Sidebar isRight={false}> + <div className="simulation-sidebar-container flex-column"> + <ExperimentMetadataContainer/> + <LoadMetricContainer/> + <div className="trace-container"> + <TraceContainer/> + </div> + </div> + </Sidebar> + ) +} -export default SimulationSidebarComponent; +export default SimulationSidebarComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass index 82af97fa..6490cf8d 100644 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass +++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass @@ -1,8 +1,8 @@ .simulation-sidebar-container - display: flex - height: 100% - max-height: 100% + display: flex + height: 100% + max-height: 100% .trace-container - flex: 1 - overflow-y: scroll + flex: 1 + overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/simulation/TaskComponent.js b/frontend/src/components/app/sidebars/simulation/TaskComponent.js index bd917cc9..94617086 100644 --- a/frontend/src/components/app/sidebars/simulation/TaskComponent.js +++ b/frontend/src/components/app/sidebars/simulation/TaskComponent.js @@ -1,58 +1,58 @@ -import approx from "approximate-number"; -import classNames from "classnames"; -import React from "react"; -import { convertSecondsToFormattedTime } from "../../../../util/date-time"; +import approx from 'approximate-number' +import classNames from 'classnames' +import React from 'react' +import { convertSecondsToFormattedTime } from '../../../../util/date-time' const TaskComponent = ({ task, flopsLeft }) => { - let icon; - let progressBarContent; - let percent; - let infoTitle; + let icon + let progressBarContent + let percent + let infoTitle - if (flopsLeft === task.totalFlopCount) { - icon = "hourglass-half"; - progressBarContent = ""; - percent = 0; - infoTitle = "Not submitted yet"; - } else if (flopsLeft > 0) { - icon = "refresh"; - progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP"; - percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount; - infoTitle = - progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)"; - } else { - icon = "check"; - progressBarContent = "Completed"; - percent = 100; - infoTitle = "Completed"; - } + if (flopsLeft === task.totalFlopCount) { + icon = 'hourglass-half' + progressBarContent = '' + percent = 0 + infoTitle = 'Not submitted yet' + } else if (flopsLeft > 0) { + icon = 'refresh' + progressBarContent = approx(task.totalFlopCount - flopsLeft) + ' FLOP' + percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount + infoTitle = + progressBarContent + ' (' + Math.round(percent * 10) / 10 + '%)' + } else { + icon = 'check' + progressBarContent = 'Completed' + percent = 100 + infoTitle = 'Completed' + } - return ( - <li className="list-group-item flex-column align-items-start"> - <div className="d-flex w-100 justify-content-between"> - <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5> - <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small> - </div> - <div title={infoTitle} style={{ display: "flex" }}> + return ( + <li className="list-group-item flex-column align-items-start"> + <div className="d-flex w-100 justify-content-between"> + <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5> + <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small> + </div> + <div title={infoTitle} style={{ display: 'flex' }}> <span - className={classNames("fa", "fa-" + icon)} - style={{ width: "20px" }} + className={classNames('fa', 'fa-' + icon)} + style={{ width: '20px' }} /> - <div className="progress" style={{ flexGrow: 1 }}> - <div - className="progress-bar" - role="progressbar" - aria-valuenow={percent} - aria-valuemin="0" - aria-valuemax="100" - style={{ width: percent + "%" }} - > - {progressBarContent} - </div> - </div> - </div> - </li> - ); -}; + <div className="progress" style={{ flexGrow: 1 }}> + <div + className="progress-bar" + role="progressbar" + aria-valuenow={percent} + aria-valuemin="0" + aria-valuemax="100" + style={{ width: percent + '%' }} + > + {progressBarContent} + </div> + </div> + </div> + </li> + ) +} -export default TaskComponent; +export default TaskComponent diff --git a/frontend/src/components/app/sidebars/simulation/TraceComponent.js b/frontend/src/components/app/sidebars/simulation/TraceComponent.js index 2b6559b4..1292219b 100644 --- a/frontend/src/components/app/sidebars/simulation/TraceComponent.js +++ b/frontend/src/components/app/sidebars/simulation/TraceComponent.js @@ -1,20 +1,20 @@ -import React from "react"; -import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer"; +import React from 'react' +import TaskContainer from '../../../../containers/app/sidebars/simulation/TaskContainer' const TraceComponent = ({ jobs }) => ( - <div> - <h3>Trace</h3> - {jobs.map(job => ( - <div key={job.id}> - <h4>Job: {job.name}</h4> - <ul className="list-group"> - {job.taskIds.map(taskId => ( - <TaskContainer taskId={taskId} key={taskId} /> - ))} - </ul> - </div> - ))} - </div> -); + <div> + <h3>Trace</h3> + {jobs.map(job => ( + <div key={job.id}> + <h4>Job: {job.name}</h4> + <ul className="list-group"> + {job.taskIds.map(taskId => ( + <TaskContainer taskId={taskId} key={taskId}/> + ))} + </ul> + </div> + ))} + </div> +) -export default TraceComponent; +export default TraceComponent diff --git a/frontend/src/components/app/sidebars/topology/NameComponent.js b/frontend/src/components/app/sidebars/topology/NameComponent.js index 805538b3..1f3051d5 100644 --- a/frontend/src/components/app/sidebars/topology/NameComponent.js +++ b/frontend/src/components/app/sidebars/topology/NameComponent.js @@ -1,13 +1,13 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; +import React from 'react' +import FontAwesome from 'react-fontawesome' const NameComponent = ({ name, onEdit }) => ( - <h2> - {name} - <button className="btn btn-outline-secondary float-right" onClick={onEdit}> - <FontAwesome name="pencil" /> - </button> - </h2> -); + <h2> + {name} + <button className="btn btn-outline-secondary float-right" onClick={onEdit}> + <FontAwesome name="pencil"/> + </button> + </h2> +) -export default NameComponent; +export default NameComponent diff --git a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js index 81e510a1..b1def94b 100644 --- a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js @@ -1,31 +1,31 @@ -import React from "react"; -import BuildingSidebarContainer from "../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer"; -import MachineSidebarContainer from "../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer"; -import RackSidebarContainer from "../../../../containers/app/sidebars/topology/rack/RackSidebarContainer"; -import RoomSidebarContainer from "../../../../containers/app/sidebars/topology/room/RoomSidebarContainer"; -import Sidebar from "../Sidebar"; +import React from 'react' +import BuildingSidebarContainer from '../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer' +import MachineSidebarContainer from '../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer' +import RackSidebarContainer from '../../../../containers/app/sidebars/topology/rack/RackSidebarContainer' +import RoomSidebarContainer from '../../../../containers/app/sidebars/topology/room/RoomSidebarContainer' +import Sidebar from '../Sidebar' const TopologySidebarComponent = ({ interactionLevel }) => { - let sidebarContent; + let sidebarContent - switch (interactionLevel.mode) { - case "BUILDING": - sidebarContent = <BuildingSidebarContainer />; - break; - case "ROOM": - sidebarContent = <RoomSidebarContainer />; - break; - case "RACK": - sidebarContent = <RackSidebarContainer />; - break; - case "MACHINE": - sidebarContent = <MachineSidebarContainer />; - break; - default: - sidebarContent = "Missing Content"; - } + switch (interactionLevel.mode) { + case 'BUILDING': + sidebarContent = <BuildingSidebarContainer/> + break + case 'ROOM': + sidebarContent = <RoomSidebarContainer/> + break + case 'RACK': + sidebarContent = <RackSidebarContainer/> + break + case 'MACHINE': + sidebarContent = <MachineSidebarContainer/> + break + default: + sidebarContent = 'Missing Content' + } - return <Sidebar isRight={true}>{sidebarContent}</Sidebar>; -}; + return <Sidebar isRight={true}>{sidebarContent}</Sidebar> +} -export default TopologySidebarComponent; +export default TopologySidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index f16c19f0..00965c18 100644 --- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -1,20 +1,21 @@ -import React from "react"; -import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer"; +import React from 'react' +import NewRoomConstructionContainer + from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer' const BuildingSidebarComponent = ({ inSimulation }) => { - return ( - <div> - <h2>Building</h2> - {inSimulation ? ( - <div className="alert alert-info"> - <span className="fa fa-info-circle mr-2" /> - <strong>Click on individual rooms</strong> to see their stats! + return ( + <div> + <h2>Building</h2> + {inSimulation ? ( + <div className="alert alert-info"> + <span className="fa fa-info-circle mr-2"/> + <strong>Click on individual rooms</strong> to see their stats! + </div> + ) : ( + <NewRoomConstructionContainer/> + )} </div> - ) : ( - <NewRoomConstructionContainer /> - )} - </div> - ); -}; + ) +} -export default BuildingSidebarComponent; +export default BuildingSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js index 7b049642..362483bf 100644 --- a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js @@ -1,31 +1,31 @@ -import React from "react"; +import React from 'react' const NewRoomConstructionComponent = ({ - onStart, - onFinish, - onCancel, - currentRoomInConstruction -}) => { - if (currentRoomInConstruction === -1) { + onStart, + onFinish, + onCancel, + currentRoomInConstruction, + }) => { + if (currentRoomInConstruction === -1) { + return ( + <div className="btn btn-outline-primary btn-block" onClick={onStart}> + <span className="fa fa-plus mr-2"/> + Construct a new room + </div> + ) + } return ( - <div className="btn btn-outline-primary btn-block" onClick={onStart}> - <span className="fa fa-plus mr-2" /> - Construct a new room - </div> - ); - } - return ( - <div> - <div className="btn btn-primary btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2" /> - Finalize new room - </div> - <div className="btn btn-default btn-block" onClick={onCancel}> - <span className="fa fa-times mr-2" /> - Cancel construction - </div> - </div> - ); -}; + <div> + <div className="btn btn-primary btn-block" onClick={onFinish}> + <span className="fa fa-check mr-2"/> + Finalize new room + </div> + <div className="btn btn-default btn-block" onClick={onCancel}> + <span className="fa fa-times mr-2"/> + Cancel construction + </div> + </div> + ) +} -export default NewRoomConstructionComponent; +export default NewRoomConstructionComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js index 7f56aca0..d7ce24bc 100644 --- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToRackComponent = ({ onClick }) => ( - <div className="btn btn-secondary btn-block" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to rack - </div> -); + <div className="btn btn-secondary btn-block" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to rack + </div> +) -export default BackToRackComponent; +export default BackToRackComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js index d8774bf9..b9aa6251 100644 --- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteMachineComponent = ({ onClick }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this machine - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this machine + </div> +) -export default DeleteMachineComponent; +export default DeleteMachineComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js index 0ad8b79c..70be6968 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react' const MachineNameComponent = ({ position }) => ( - <h2>Machine at slot {position}</h2> -); + <h2>Machine at slot {position}</h2> +) -export default MachineNameComponent; +export default MachineNameComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index 5ccaf25c..66c8c84f 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -1,27 +1,27 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToRackContainer from "../../../../../containers/app/sidebars/topology/machine/BackToRackContainer"; -import DeleteMachineContainer from "../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer"; -import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer"; -import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer' +import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer' +import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer' +import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer' const MachineSidebarComponent = ({ inSimulation, machineId }) => { - return ( - <div> - <MachineNameContainer /> - <BackToRackContainer /> - {inSimulation ? ( + return ( <div> - <LoadBarContainer objectType="machine" objectId={machineId} /> - <LoadChartContainer objectType="machine" objectId={machineId} /> + <MachineNameContainer/> + <BackToRackContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="machine" objectId={machineId}/> + <LoadChartContainer objectType="machine" objectId={machineId}/> + </div> + ) : ( + <DeleteMachineContainer/> + )} + <UnitTabsContainer/> </div> - ) : ( - <DeleteMachineContainer /> - )} - <UnitTabsContainer /> - </div> - ); -}; + ) +} -export default MachineSidebarComponent; +export default MachineSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js index 0c903228..57e219fd 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js @@ -1,46 +1,46 @@ -import PropTypes from "prop-types"; -import React from "react"; +import PropTypes from 'prop-types' +import React from 'react' class UnitAddComponent extends React.Component { - static propTypes = { - units: PropTypes.array.isRequired, - onAdd: PropTypes.func.isRequired - }; + static propTypes = { + units: PropTypes.array.isRequired, + onAdd: PropTypes.func.isRequired, + } - render() { - return ( - <div className="form-inline"> - <div className="form-group w-100"> - <select - className="form-control w-75 mr-1" - ref={unitSelect => (this.unitSelect = unitSelect)} - > - {this.props.units.map(unit => ( - <option value={unit.id} key={unit.id}> - {unit.manufacturer + - " " + - unit.family + - " " + - unit.model + - " " + - unit.generation} - </option> - ))} - </select> - <button - type="submit" - className="btn btn-outline-primary" - onClick={() => - this.props.onAdd(parseInt(this.unitSelect.value, 10)) - } - > - <span className="fa fa-plus mr-2" /> - Add - </button> - </div> - </div> - ); - } + render() { + return ( + <div className="form-inline"> + <div className="form-group w-100"> + <select + className="form-control w-75 mr-1" + ref={unitSelect => (this.unitSelect = unitSelect)} + > + {this.props.units.map(unit => ( + <option value={unit.id} key={unit.id}> + {unit.manufacturer + + ' ' + + unit.family + + ' ' + + unit.model + + ' ' + + unit.generation} + </option> + ))} + </select> + <button + type="submit" + className="btn btn-outline-primary" + onClick={() => + this.props.onAdd(parseInt(this.unitSelect.value, 10)) + } + > + <span className="fa fa-plus mr-2"/> + Add + </button> + </div> + </div> + ) + } } -export default UnitAddComponent; +export default UnitAddComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index 7c27043d..93ac1cdd 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -1,78 +1,78 @@ -import React from "react"; -import jQuery from "../../../../../util/jquery"; +import React from 'react' +import jQuery from '../../../../../util/jquery' class UnitComponent extends React.Component { - componentDidMount() { - jQuery(".unit-info-popover").popover({ - trigger: "focus" - }); - } - - render() { - let unitInfo; - if (this.props.unitType === "cpu" || this.props.unitType === "gpu") { - unitInfo = - "<strong>Clockrate:</strong> <code>" + - this.props.unit.clockRateMhz + - " MHz</code><br/>" + - "<strong>Num. Cores:</strong> <code>" + - this.props.unit.numberOfCores + - "</code><br/>" + - "<strong>Energy Cons.:</strong> <code>" + - this.props.unit.energyConsumptionW + - " W</code>"; - } else if ( - this.props.unitType === "memory" || - this.props.unitType === "storage" - ) { - unitInfo = - "<strong>Speed:</strong> <code>" + - this.props.unit.speedMbPerS + - " Mb/s</code><br/>" + - "<strong>Size:</strong> <code>" + - this.props.unit.sizeMb + - " MB</code><br/>" + - "<strong>Energy Cons.:</strong> <code> " + - this.props.unit.energyConsumptionW + - " W</code>"; + componentDidMount() { + jQuery('.unit-info-popover').popover({ + trigger: 'focus', + }) } - return ( - <li className="d-flex list-group-item justify-content-between align-items-center"> - <span style={{ maxWidth: "60%" }}> + render() { + let unitInfo + if (this.props.unitType === 'cpu' || this.props.unitType === 'gpu') { + unitInfo = + '<strong>Clockrate:</strong> <code>' + + this.props.unit.clockRateMhz + + ' MHz</code><br/>' + + '<strong>Num. Cores:</strong> <code>' + + this.props.unit.numberOfCores + + '</code><br/>' + + '<strong>Energy Cons.:</strong> <code>' + + this.props.unit.energyConsumptionW + + ' W</code>' + } else if ( + this.props.unitType === 'memory' || + this.props.unitType === 'storage' + ) { + unitInfo = + '<strong>Speed:</strong> <code>' + + this.props.unit.speedMbPerS + + ' Mb/s</code><br/>' + + '<strong>Size:</strong> <code>' + + this.props.unit.sizeMb + + ' MB</code><br/>' + + '<strong>Energy Cons.:</strong> <code> ' + + this.props.unit.energyConsumptionW + + ' W</code>' + } + + return ( + <li className="d-flex list-group-item justify-content-between align-items-center"> + <span style={{ maxWidth: '60%' }}> {this.props.unit.manufacturer + - " " + - this.props.unit.family + - " " + - this.props.unit.model + - " " + - this.props.unit.generation} + ' ' + + this.props.unit.family + + ' ' + + this.props.unit.model + + ' ' + + this.props.unit.generation} </span> - <span> + <span> <span - tabIndex="0" - className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle" - role="button" - data-toggle="popover" - data-trigger="focus" - title="Unit information" - data-content={unitInfo} - data-html="true" + tabIndex="0" + className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle" + role="button" + data-toggle="popover" + data-trigger="focus" + title="Unit information" + data-content={unitInfo} + data-html="true" /> - {this.props.inSimulation ? ( - undefined - ) : ( - <span - className="btn btn-outline-danger" - onClick={this.props.onDelete} - > - <span className="fa fa-trash" /> + {this.props.inSimulation ? ( + undefined + ) : ( + <span + className="btn btn-outline-danger" + onClick={this.props.onDelete} + > + <span className="fa fa-trash"/> </span> - )} + )} </span> - </li> - ); - } + </li> + ) + } } -export default UnitComponent; +export default UnitComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js index 38df806b..31d4db51 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,29 +1,29 @@ -import React from "react"; -import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer"; +import React from 'react' +import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer' const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( - <ul className="list-group mt-1"> - {unitIds.length !== 0 ? ( - unitIds.map((unitId, index) => ( - <UnitContainer - unitType={unitType} - unitId={unitId} - index={index} - key={index} - /> - )) - ) : ( - <div className="alert alert-info"> - {inSimulation ? ( - <strong>No units of this type in this machine</strong> + <ul className="list-group mt-1"> + {unitIds.length !== 0 ? ( + unitIds.map((unitId, index) => ( + <UnitContainer + unitType={unitType} + unitId={unitId} + index={index} + key={index} + /> + )) ) : ( - <span> + <div className="alert alert-info"> + {inSimulation ? ( + <strong>No units of this type in this machine</strong> + ) : ( + <span> <strong>No units...</strong> Add some with the menu above! </span> + )} + </div> )} - </div> - )} - </ul> -); + </ul> +) -export default UnitListComponent; +export default UnitListComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index 0683c796..df7eeb77 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -1,65 +1,65 @@ -import React from "react"; -import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer"; -import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer"; +import React from 'react' +import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer' +import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer' const UnitTabsComponent = ({ inSimulation }) => ( - <div> - <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> - <li className="nav-item"> - <a - className="nav-link active" - data-toggle="tab" - href="#cpu-units" - role="tab" - > - CPU - </a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> - GPU - </a> - </li> - <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#memory-units" - role="tab" - > - Memory - </a> - </li> - <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#storage-units" - role="tab" - > - Storage - </a> - </li> - </ul> - <div className="tab-content"> - <div className="tab-pane active" id="cpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="cpu" />} - <UnitListContainer unitType="cpu" /> - </div> - <div className="tab-pane" id="gpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="gpu" />} - <UnitListContainer unitType="gpu" /> - </div> - <div className="tab-pane" id="memory-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="memory" />} - <UnitListContainer unitType="memory" /> - </div> - <div className="tab-pane" id="storage-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="storage" />} - <UnitListContainer unitType="storage" /> - </div> + <div> + <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> + <li className="nav-item"> + <a + className="nav-link active" + data-toggle="tab" + href="#cpu-units" + role="tab" + > + CPU + </a> + </li> + <li className="nav-item"> + <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> + GPU + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#memory-units" + role="tab" + > + Memory + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#storage-units" + role="tab" + > + Storage + </a> + </li> + </ul> + <div className="tab-content"> + <div className="tab-pane active" id="cpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>} + <UnitListContainer unitType="cpu"/> + </div> + <div className="tab-pane" id="gpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>} + <UnitListContainer unitType="gpu"/> + </div> + <div className="tab-pane" id="memory-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>} + <UnitListContainer unitType="memory"/> + </div> + <div className="tab-pane" id="storage-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>} + <UnitListContainer unitType="storage"/> + </div> + </div> </div> - </div> -); +) -export default UnitTabsComponent; +export default UnitTabsComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js index 6bcf4088..345674d1 100644 --- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToRoomComponent = ({ onClick }) => ( - <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to room - </div> -); + <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to room + </div> +) -export default BackToRoomComponent; +export default BackToRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js index d8aa7634..b1672764 100644 --- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteRackComponent = ({ onClick }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this rack - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this rack + </div> +) -export default DeleteRackComponent; +export default DeleteRackComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index d86f9fee..f182a78c 100644 --- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,19 +1,19 @@ -import React from "react"; +import React from 'react' const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( - <li className="list-group-item d-flex justify-content-between align-items-center"> + <li className="list-group-item d-flex justify-content-between align-items-center"> <span className="badge badge-default badge-info mr-1 disabled"> {position} </span> - {inSimulation ? ( - <span className="badge badge-default badge-success">Empty Slot</span> - ) : ( - <button className="btn btn-outline-primary" onClick={onAdd}> - <span className="fa fa-plus mr-2" /> - Add machine - </button> - )} - </li> -); + {inSimulation ? ( + <span className="badge badge-default badge-success">Empty Slot</span> + ) : ( + <button className="btn btn-outline-primary" onClick={onAdd}> + <span className="fa fa-plus mr-2"/> + Add machine + </button> + )} + </li> +) -export default EmptySlotComponent; +export default EmptySlotComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js index 2521f4a2..0a1d1065 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,78 +1,78 @@ -import React from "react"; -import Shapes from "../../../../../shapes"; -import { convertLoadToSimulationColor } from "../../../../../util/simulation-load"; +import React from 'react' +import Shapes from '../../../../../shapes' +import { convertLoadToSimulationColor } from '../../../../../util/simulation-load' const UnitIcon = ({ id, type }) => ( - <div> - <img - src={"/img/topology/" + id + "-icon.png"} - alt={"Machine contains " + type + " units"} - className="img-fluid ml-1" - style={{ maxHeight: "35px" }} - /> - </div> -); + <div> + <img + src={'/img/topology/' + id + '-icon.png'} + alt={'Machine contains ' + type + ' units'} + className="img-fluid ml-1" + style={{ maxHeight: '35px' }} + /> + </div> +) const MachineComponent = ({ - position, - machine, - inSimulation, - machineLoad, - onClick -}) => { - let color = "white"; - if (inSimulation && machineLoad >= 0) { - color = convertLoadToSimulationColor(machineLoad); - } - const hasNoUnits = - machine.cpuIds.length + - machine.gpuIds.length + - machine.memoryIds.length + - machine.storageIds.length === - 0; + position, + machine, + inSimulation, + machineLoad, + onClick, + }) => { + let color = 'white' + if (inSimulation && machineLoad >= 0) { + color = convertLoadToSimulationColor(machineLoad) + } + const hasNoUnits = + machine.cpuIds.length + + machine.gpuIds.length + + machine.memoryIds.length + + machine.storageIds.length === + 0 - return ( - <li - className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" - onClick={onClick} - style={{ backgroundColor: color }} - > - <span className="badge badge-default badge-info mr-1">{position}</span> - <div className="d-inline-flex"> - {machine.cpuIds.length > 0 ? ( - <UnitIcon id="cpu" type="CPU" /> - ) : ( - undefined - )} - {machine.gpuIds.length > 0 ? ( - <UnitIcon id="gpu" type="GPU" /> - ) : ( - undefined - )} - {machine.memoryIds.length > 0 ? ( - <UnitIcon id="memory" type="memory" /> - ) : ( - undefined - )} - {machine.storageIds.length > 0 ? ( - <UnitIcon id="storage" type="storage" /> - ) : ( - undefined - )} - {hasNoUnits ? ( - <span className="badge badge-default badge-warning"> + return ( + <li + className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" + onClick={onClick} + style={{ backgroundColor: color }} + > + <span className="badge badge-default badge-info mr-1">{position}</span> + <div className="d-inline-flex"> + {machine.cpuIds.length > 0 ? ( + <UnitIcon id="cpu" type="CPU"/> + ) : ( + undefined + )} + {machine.gpuIds.length > 0 ? ( + <UnitIcon id="gpu" type="GPU"/> + ) : ( + undefined + )} + {machine.memoryIds.length > 0 ? ( + <UnitIcon id="memory" type="memory"/> + ) : ( + undefined + )} + {machine.storageIds.length > 0 ? ( + <UnitIcon id="storage" type="storage"/> + ) : ( + undefined + )} + {hasNoUnits ? ( + <span className="badge badge-default badge-warning"> Machine with no units </span> - ) : ( - undefined - )} - </div> - </li> - ); -}; + ) : ( + undefined + )} + </div> + </li> + ) +} MachineComponent.propTypes = { - machine: Shapes.Machine -}; + machine: Shapes.Machine, +} -export default MachineComponent; +export default MachineComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js index d5521557..a381771c 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js @@ -1,26 +1,26 @@ -import React from "react"; -import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer"; -import MachineContainer from "../../../../../containers/app/sidebars/topology/rack/MachineContainer"; -import "./MachineListComponent.css"; +import React from 'react' +import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer' +import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer' +import './MachineListComponent.css' const MachineListComponent = ({ machineIds }) => { - return ( - <ul className="list-group machine-list"> - {machineIds.map((machineId, index) => { - if (machineId === null) { - return <EmptySlotContainer key={index} position={index + 1} />; - } else { - return ( - <MachineContainer - key={index} - position={index + 1} - machineId={machineId} - /> - ); - } - })} - </ul> - ); -}; + return ( + <ul className="list-group machine-list"> + {machineIds.map((machineId, index) => { + if (machineId === null) { + return <EmptySlotContainer key={index} position={index + 1}/> + } else { + return ( + <MachineContainer + key={index} + position={index + 1} + machineId={machineId} + /> + ) + } + })} + </ul> + ) +} -export default MachineListComponent; +export default MachineListComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass index bbcfe696..11b82c93 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass +++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass @@ -1,2 +1,2 @@ .machine-list li - min-height: 64px + min-height: 64px diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js index 5e095823..1888b69d 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import NameComponent from "../NameComponent"; +import React from 'react' +import NameComponent from '../NameComponent' const RackNameComponent = ({ rackName, onEdit }) => ( - <NameComponent name={rackName} onEdit={onEdit} /> -); + <NameComponent name={rackName} onEdit={onEdit}/> +) -export default RackNameComponent; +export default RackNameComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index f832b9b9..47d99254 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -1,34 +1,34 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToRoomContainer from "../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer"; -import DeleteRackContainer from "../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer"; -import MachineListContainer from "../../../../../containers/app/sidebars/topology/rack/MachineListContainer"; -import RackNameContainer from "../../../../../containers/app/sidebars/topology/rack/RackNameContainer"; -import "./RackSidebarComponent.css"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToRoomContainer from '../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer' +import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer' +import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer' +import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer' +import './RackSidebarComponent.css' const RackSidebarComponent = ({ inSimulation, rackId }) => { - return ( - <div className="rack-sidebar-container flex-column"> - <div className="rack-sidebar-header-container"> - <RackNameContainer /> - <BackToRoomContainer /> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="rack" objectId={rackId} /> - <LoadChartContainer objectType="rack" objectId={rackId} /> - </div> - ) : ( - <div> - <DeleteRackContainer /> - </div> - )} - </div> - <div className="machine-list-container mt-2"> - <MachineListContainer /> - </div> - </div> - ); -}; + return ( + <div className="rack-sidebar-container flex-column"> + <div className="rack-sidebar-header-container"> + <RackNameContainer/> + <BackToRoomContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="rack" objectId={rackId}/> + <LoadChartContainer objectType="rack" objectId={rackId}/> + </div> + ) : ( + <div> + <DeleteRackContainer/> + </div> + )} + </div> + <div className="machine-list-container mt-2"> + <MachineListContainer/> + </div> + </div> + ) +} -export default RackSidebarComponent; +export default RackSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass index 822804bc..29fec02a 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass @@ -1,11 +1,11 @@ .rack-sidebar-container - display: flex - height: 100% - max-height: 100% + display: flex + height: 100% + max-height: 100% .rack-sidebar-header-container - flex: 0 + flex: 0 .machine-list-container - flex: 1 - overflow-y: scroll + flex: 1 + overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js index 0409dbdd..7bd8c2f8 100644 --- a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToBuildingComponent = ({ onClick }) => ( - <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to building - </div> -); + <div className="btn btn-secondary btn-block mb-2" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to building + </div> +) -export default BackToBuildingComponent; +export default BackToBuildingComponent diff --git a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js index 3e3b3b36..2be752b5 100644 --- a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteRoomComponent = ({ onClick }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this room - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this room + </div> +) -export default DeleteRoomComponent; +export default DeleteRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js index c3b9f0ad..672a191f 100644 --- a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js @@ -1,27 +1,27 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const EditRoomComponent = ({ - onEdit, - onFinish, - isEditing, - isInRackConstructionMode -}) => - isEditing ? ( - <div className="btn btn-info btn-block" onClick={onFinish}> - <span className="fa fa-check mr-2" /> - Finish editing room - </div> - ) : ( - <div - className={classNames("btn btn-outline-info btn-block", { - disabled: isInRackConstructionMode - })} - onClick={() => (isInRackConstructionMode ? undefined : onEdit())} - > - <span className="fa fa-pencil mr-2" /> - Edit the tiles of this room - </div> - ); + onEdit, + onFinish, + isEditing, + isInRackConstructionMode, + }) => + isEditing ? ( + <div className="btn btn-info btn-block" onClick={onFinish}> + <span className="fa fa-check mr-2"/> + Finish editing room + </div> + ) : ( + <div + className={classNames('btn btn-outline-info btn-block', { + disabled: isInRackConstructionMode, + })} + onClick={() => (isInRackConstructionMode ? undefined : onEdit())} + > + <span className="fa fa-pencil mr-2"/> + Edit the tiles of this room + </div> + ) -export default EditRoomComponent; +export default EditRoomComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js index 06b8a2aa..42b7357b 100644 --- a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js @@ -1,32 +1,32 @@ -import classNames from "classnames"; -import React from "react"; +import classNames from 'classnames' +import React from 'react' const RackConstructionComponent = ({ - onStart, - onStop, - inRackConstructionMode, - isEditingRoom -}) => { - if (inRackConstructionMode) { - return ( - <div className="btn btn-primary btn-block" onClick={onStop}> - <span className="fa fa-times mr-2" /> - Stop rack construction - </div> - ); - } + onStart, + onStop, + inRackConstructionMode, + isEditingRoom, + }) => { + if (inRackConstructionMode) { + return ( + <div className="btn btn-primary btn-block" onClick={onStop}> + <span className="fa fa-times mr-2"/> + Stop rack construction + </div> + ) + } - return ( - <div - className={classNames("btn btn-outline-primary btn-block", { - disabled: isEditingRoom - })} - onClick={() => (isEditingRoom ? undefined : onStart())} - > - <span className="fa fa-plus mr-2" /> - Start rack construction - </div> - ); -}; + return ( + <div + className={classNames('btn btn-outline-primary btn-block', { + disabled: isEditingRoom, + })} + onClick={() => (isEditingRoom ? undefined : onStart())} + > + <span className="fa fa-plus mr-2"/> + Start rack construction + </div> + ) +} -export default RackConstructionComponent; +export default RackConstructionComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js index 11b88edd..409d2eef 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import NameComponent from "../NameComponent"; +import React from 'react' +import NameComponent from '../NameComponent' const RoomNameComponent = ({ roomName, onEdit }) => ( - <NameComponent name={roomName} onEdit={onEdit} /> -); + <NameComponent name={roomName} onEdit={onEdit}/> +) -export default RoomNameComponent; +export default RoomNameComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js index 275f9624..d9865744 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -1,38 +1,38 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToBuildingContainer from "../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer"; -import DeleteRoomContainer from "../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer"; -import EditRoomContainer from "../../../../../containers/app/sidebars/topology/room/EditRoomContainer"; -import RackConstructionContainer from "../../../../../containers/app/sidebars/topology/room/RackConstructionContainer"; -import RoomNameContainer from "../../../../../containers/app/sidebars/topology/room/RoomNameContainer"; -import RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToBuildingContainer from '../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer' +import DeleteRoomContainer from '../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer' +import EditRoomContainer from '../../../../../containers/app/sidebars/topology/room/EditRoomContainer' +import RackConstructionContainer from '../../../../../containers/app/sidebars/topology/room/RackConstructionContainer' +import RoomNameContainer from '../../../../../containers/app/sidebars/topology/room/RoomNameContainer' +import RoomTypeContainer from '../../../../../containers/app/sidebars/topology/room/RoomTypeContainer' const RoomSidebarComponent = ({ roomId, roomType, inSimulation }) => { - let allowedObjects; - if (!inSimulation && roomType === "SERVER") { - allowedObjects = <RackConstructionContainer />; - } + let allowedObjects + if (!inSimulation && roomType === 'SERVER') { + allowedObjects = <RackConstructionContainer/> + } - return ( - <div> - <RoomNameContainer /> - <RoomTypeContainer /> - <BackToBuildingContainer /> - {inSimulation ? ( + return ( <div> - <LoadBarContainer objectType="room" objectId={roomId} /> - <LoadChartContainer objectType="room" objectId={roomId} /> + <RoomNameContainer/> + <RoomTypeContainer/> + <BackToBuildingContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="room" objectId={roomId}/> + <LoadChartContainer objectType="room" objectId={roomId}/> + </div> + ) : ( + <div> + {allowedObjects} + <EditRoomContainer/> + <DeleteRoomContainer/> + </div> + )} </div> - ) : ( - <div> - {allowedObjects} - <EditRoomContainer /> - <DeleteRoomContainer /> - </div> - )} - </div> - ); -}; + ) +} -export default RoomSidebarComponent; +export default RoomSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js index 46d91c2c..b662307c 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js @@ -1,8 +1,8 @@ -import React from "react"; -import { ROOM_TYPE_TO_NAME_MAP } from "../../../../../util/room-types"; +import React from 'react' +import { ROOM_TYPE_TO_NAME_MAP } from '../../../../../util/room-types' const RoomTypeComponent = ({ roomType }) => ( - <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p> -); + <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p> +) -export default RoomTypeComponent; +export default RoomTypeComponent diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js index 1a9b0ced..7968c68d 100644 --- a/frontend/src/components/app/timeline/PlayButtonComponent.js +++ b/frontend/src/components/app/timeline/PlayButtonComponent.js @@ -1,30 +1,30 @@ -import React from "react"; +import React from 'react' const PlayButtonComponent = ({ - isPlaying, - currentTick, - lastSimulatedTick, - onPlay, - onPause -}) => ( - <div - className="play-btn" - onClick={() => { - if (isPlaying) { - onPause(); - } else { - if (currentTick !== lastSimulatedTick) { - onPlay(); - } - } - }} - > - {isPlaying ? ( - <span className="fa fa-pause" /> - ) : ( - <span className="fa fa-play" /> - )} - </div> -); + isPlaying, + currentTick, + lastSimulatedTick, + onPlay, + onPause, + }) => ( + <div + className="play-btn" + onClick={() => { + if (isPlaying) { + onPause() + } else { + if (currentTick !== lastSimulatedTick) { + onPlay() + } + } + }} + > + {isPlaying ? ( + <span className="fa fa-pause"/> + ) : ( + <span className="fa fa-play"/> + )} + </div> +) -export default PlayButtonComponent; +export default PlayButtonComponent diff --git a/frontend/src/components/app/timeline/Timeline.sass b/frontend/src/components/app/timeline/Timeline.sass index 4c99a218..2d2cb979 100644 --- a/frontend/src/components/app/timeline/Timeline.sass +++ b/frontend/src/components/app/timeline/Timeline.sass @@ -7,110 +7,110 @@ $border-width: 1px $timeline-border: $border-width solid $gray-semi-dark .timeline-bar - display: block - position: absolute - left: 0 - bottom: 20px - width: 100% - text-align: center - z-index: 2000 + display: block + position: absolute + left: 0 + bottom: 20px + width: 100% + text-align: center + z-index: 2000 - pointer-events: none + pointer-events: none .timeline-container - display: inline-block - margin: 0 auto - text-align: left + display: inline-block + margin: 0 auto + text-align: left - width: $container-size + width: $container-size .timeline-labels - display: block - height: 25px - line-height: 25px + display: block + height: 25px + line-height: 25px - div - display: inline-block + div + display: inline-block - .start-time-label - margin-left: $play-btn-size - $border-width - padding-left: 4px + .start-time-label + margin-left: $play-btn-size - $border-width + padding-left: 4px - .end-time-label - padding-right: 4px - float: right + .end-time-label + padding-right: 4px + float: right .timeline-controls - display: flex - border: $timeline-border - overflow: hidden + display: flex + border: $timeline-border + overflow: hidden - pointer-events: all + pointer-events: all - +border-radius($standard-border-radius) + +border-radius($standard-border-radius) - .play-btn - width: $play-btn-size - height: $play-btn-size + $border-width - line-height: $play-btn-size + $border-width - text-align: center - float: left - margin-top: -$border-width + .play-btn + width: $play-btn-size + height: $play-btn-size + $border-width + line-height: $play-btn-size + $border-width + text-align: center + float: left + margin-top: -$border-width - font-size: 16pt - background: #333 - color: #eee + font-size: 16pt + background: #333 + color: #eee - +transition(background, $transition-length) - +user-select - +clickable + +transition(background, $transition-length) + +user-select + +clickable - .play-btn:hover - background: #656565 + .play-btn:hover + background: #656565 - .play-btn:active - background: #000 + .play-btn:active + background: #000 - .timeline - position: relative - flex: 1 - height: $play-btn-size - line-height: $play-btn-size - float: right + .timeline + position: relative + flex: 1 + height: $play-btn-size + line-height: $play-btn-size + float: right - background: $blue-light + background: $blue-light - z-index: 500 + z-index: 500 - div - +transition(all, $transition-length) + div + +transition(all, $transition-length) - .time-marker - position: absolute - top: 0 - left: 0 + .time-marker + position: absolute + top: 0 + left: 0 - width: 6px - height: 100% + width: 6px + height: 100% - background: $blue-very-dark + background: $blue-very-dark - +border-radius(2px) + +border-radius(2px) - z-index: 503 + z-index: 503 - pointer-events: none + pointer-events: none - .section-marker - position: absolute - top: 0 - left: 0 + .section-marker + position: absolute + top: 0 + left: 0 - width: 3px - height: 100% + width: 3px + height: 100% - background: #222222 + background: #222222 - z-index: 504 + z-index: 504 - pointer-events: none + pointer-events: none diff --git a/frontend/src/components/app/timeline/TimelineComponent.js b/frontend/src/components/app/timeline/TimelineComponent.js index 0f88b8f4..c183c0e8 100644 --- a/frontend/src/components/app/timeline/TimelineComponent.js +++ b/frontend/src/components/app/timeline/TimelineComponent.js @@ -1,37 +1,37 @@ -import React from "react"; -import TimelineControlsContainer from "../../../containers/app/timeline/TimelineControlsContainer"; -import TimelineLabelsContainer from "../../../containers/app/timeline/TimelineLabelsContainer"; -import "./Timeline.css"; +import React from 'react' +import TimelineControlsContainer from '../../../containers/app/timeline/TimelineControlsContainer' +import TimelineLabelsContainer from '../../../containers/app/timeline/TimelineLabelsContainer' +import './Timeline.css' class TimelineComponent extends React.Component { - componentDidMount() { - this.interval = setInterval(() => { - if (!this.props.isPlaying) { - return; - } + componentDidMount() { + this.interval = setInterval(() => { + if (!this.props.isPlaying) { + return + } - if (this.props.currentTick < this.props.lastSimulatedTick) { - this.props.incrementTick(); - } else { - this.props.pauseSimulation(); - } - }, 1000); - } + if (this.props.currentTick < this.props.lastSimulatedTick) { + this.props.incrementTick() + } else { + this.props.pauseSimulation() + } + }, 1000) + } - componentWillUnmount() { - clearInterval(this.interval); - } + componentWillUnmount() { + clearInterval(this.interval) + } - render() { - return ( - <div className="timeline-bar"> - <div className="timeline-container"> - <TimelineLabelsContainer /> - <TimelineControlsContainer /> - </div> - </div> - ); - } + render() { + return ( + <div className="timeline-bar"> + <div className="timeline-container"> + <TimelineLabelsContainer/> + <TimelineControlsContainer/> + </div> + </div> + ) + } } -export default TimelineComponent; +export default TimelineComponent diff --git a/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js index f3d55154..5412b1f5 100644 --- a/frontend/src/components/app/timeline/TimelineControlsComponent.js +++ b/frontend/src/components/app/timeline/TimelineControlsComponent.js @@ -1,49 +1,49 @@ -import React from "react"; -import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer"; -import { convertTickToPercentage } from "../../../util/timeline"; +import React from 'react' +import PlayButtonContainer from '../../../containers/app/timeline/PlayButtonContainer' +import { convertTickToPercentage } from '../../../util/timeline' class TimelineControlsComponent extends React.Component { - onTimelineClick(e) { - const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth; - const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1)); - this.props.goToTick(tick); - } + onTimelineClick(e) { + const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth + const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1)) + this.props.goToTick(tick) + } - render() { - return ( - <div className="timeline-controls"> - <PlayButtonContainer /> - <div - className="timeline" - ref={timeline => (this.timeline = timeline)} - onClick={this.onTimelineClick.bind(this)} - > - <div - className="time-marker" - style={{ - left: convertTickToPercentage( - this.props.currentTick, - this.props.lastSimulatedTick - ) - }} - /> - {this.props.sectionTicks.map(sectionTick => ( - <div - key={sectionTick} - className="section-marker" - style={{ - left: convertTickToPercentage( - sectionTick, - this.props.lastSimulatedTick - ) - }} - title="Topology changes at this tick" - /> - ))} - </div> - </div> - ); - } + render() { + return ( + <div className="timeline-controls"> + <PlayButtonContainer/> + <div + className="timeline" + ref={timeline => (this.timeline = timeline)} + onClick={this.onTimelineClick.bind(this)} + > + <div + className="time-marker" + style={{ + left: convertTickToPercentage( + this.props.currentTick, + this.props.lastSimulatedTick, + ), + }} + /> + {this.props.sectionTicks.map(sectionTick => ( + <div + key={sectionTick} + className="section-marker" + style={{ + left: convertTickToPercentage( + sectionTick, + this.props.lastSimulatedTick, + ), + }} + title="Topology changes at this tick" + /> + ))} + </div> + </div> + ) + } } -export default TimelineControlsComponent; +export default TimelineControlsComponent diff --git a/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js index 6943a86f..55818d24 100644 --- a/frontend/src/components/app/timeline/TimelineLabelsComponent.js +++ b/frontend/src/components/app/timeline/TimelineLabelsComponent.js @@ -1,15 +1,15 @@ -import React from "react"; -import { convertSecondsToFormattedTime } from "../../../util/date-time"; +import React from 'react' +import { convertSecondsToFormattedTime } from '../../../util/date-time' const TimelineLabelsComponent = ({ currentTick, lastSimulatedTick }) => ( - <div className="timeline-labels"> - <div className="start-time-label"> - {convertSecondsToFormattedTime(currentTick)} + <div className="timeline-labels"> + <div className="start-time-label"> + {convertSecondsToFormattedTime(currentTick)} + </div> + <div className="end-time-label"> + {convertSecondsToFormattedTime(lastSimulatedTick)} + </div> </div> - <div className="end-time-label"> - {convertSecondsToFormattedTime(lastSimulatedTick)} - </div> - </div> -); +) -export default TimelineLabelsComponent; +export default TimelineLabelsComponent diff --git a/frontend/src/components/experiments/ExperimentListComponent.js b/frontend/src/components/experiments/ExperimentListComponent.js index 2f7106e5..55a7ff6d 100644 --- a/frontend/src/components/experiments/ExperimentListComponent.js +++ b/frontend/src/components/experiments/ExperimentListComponent.js @@ -1,59 +1,59 @@ -import PropTypes from "prop-types"; -import React from "react"; -import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer"; +import PropTypes from 'prop-types' +import React from 'react' +import ExperimentRowContainer from '../../containers/experiments/ExperimentRowContainer' const ExperimentListComponent = ({ experimentIds, loading }) => { - let alert; + let alert - if (loading) { - alert = ( - <div className="alert alert-success"> - <span className="fa fa-refresh fa-spin mr-2" /> - <strong>Loading Experiments...</strong> - </div> - ); - } else if (experimentIds.length === 0 && !loading) { - alert = ( - <div className="alert alert-info"> - <span className="fa fa-question-circle mr-2" /> - <strong>No experiments here yet...</strong> Add some with the button - below! - </div> - ); - } + if (loading) { + alert = ( + <div className="alert alert-success"> + <span className="fa fa-refresh fa-spin mr-2"/> + <strong>Loading Experiments...</strong> + </div> + ) + } else if (experimentIds.length === 0 && !loading) { + alert = ( + <div className="alert alert-info"> + <span className="fa fa-question-circle mr-2"/> + <strong>No experiments here yet...</strong> Add some with the button + below! + </div> + ) + } - return ( - <div className="vertically-expanding-container"> - {alert ? ( - alert - ) : ( - <table className="table table-striped"> - <thead> - <tr> - <th>Name</th> - <th>Path</th> - <th>Trace</th> - <th>Scheduler</th> - <th /> - </tr> - </thead> - <tbody> - {experimentIds.map(experimentId => ( - <ExperimentRowContainer - experimentId={experimentId} - key={experimentId} - /> - ))} - </tbody> - </table> - )} - </div> - ); -}; + return ( + <div className="vertically-expanding-container"> + {alert ? ( + alert + ) : ( + <table className="table table-striped"> + <thead> + <tr> + <th>Name</th> + <th>Path</th> + <th>Trace</th> + <th>Scheduler</th> + <th/> + </tr> + </thead> + <tbody> + {experimentIds.map(experimentId => ( + <ExperimentRowContainer + experimentId={experimentId} + key={experimentId} + /> + ))} + </tbody> + </table> + )} + </div> + ) +} ExperimentListComponent.propTypes = { - experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired, - loading: PropTypes.bool -}; + experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired, + loading: PropTypes.bool, +} -export default ExperimentListComponent; +export default ExperimentListComponent diff --git a/frontend/src/components/experiments/ExperimentRowComponent.js b/frontend/src/components/experiments/ExperimentRowComponent.js index e71c6a00..8a2638a7 100644 --- a/frontend/src/components/experiments/ExperimentRowComponent.js +++ b/frontend/src/components/experiments/ExperimentRowComponent.js @@ -1,40 +1,40 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Link } from "react-router-dom"; -import Shapes from "../../shapes/index"; +import PropTypes from 'prop-types' +import React from 'react' +import { Link } from 'react-router-dom' +import Shapes from '../../shapes/index' const ExperimentRowComponent = ({ experiment, simulationId, onDelete }) => ( - <tr> - <td className="pt-3">{experiment.name}</td> - <td className="pt-3"> - {experiment.path.name - ? experiment.path.name - : "Path " + experiment.path.id} - </td> - <td className="pt-3">{experiment.trace.name}</td> - <td className="pt-3">{experiment.scheduler.name}</td> - <td className="text-right"> - <Link - to={"/simulations/" + simulationId + "/experiments/" + experiment.id} - className="btn btn-outline-primary btn-sm mr-2" - title="Open this experiment" - > - <span className="fa fa-play" /> - </Link> - <div - className="btn btn-outline-danger btn-sm" - title="Delete this experiment" - onClick={() => onDelete(experiment.id)} - > - <span className="fa fa-trash" /> - </div> - </td> - </tr> -); + <tr> + <td className="pt-3">{experiment.name}</td> + <td className="pt-3"> + {experiment.path.name + ? experiment.path.name + : 'Path ' + experiment.path.id} + </td> + <td className="pt-3">{experiment.trace.name}</td> + <td className="pt-3">{experiment.scheduler.name}</td> + <td className="text-right"> + <Link + to={'/simulations/' + simulationId + '/experiments/' + experiment.id} + className="btn btn-outline-primary btn-sm mr-2" + title="Open this experiment" + > + <span className="fa fa-play"/> + </Link> + <div + className="btn btn-outline-danger btn-sm" + title="Delete this experiment" + onClick={() => onDelete(experiment.id)} + > + <span className="fa fa-trash"/> + </div> + </td> + </tr> +) ExperimentRowComponent.propTypes = { - experiment: Shapes.Experiment.isRequired, - simulationId: PropTypes.number.isRequired -}; + experiment: Shapes.Experiment.isRequired, + simulationId: PropTypes.string.isRequired, +} -export default ExperimentRowComponent; +export default ExperimentRowComponent diff --git a/frontend/src/components/experiments/NewExperimentButtonComponent.js b/frontend/src/components/experiments/NewExperimentButtonComponent.js index 651172e3..2902825d 100644 --- a/frontend/src/components/experiments/NewExperimentButtonComponent.js +++ b/frontend/src/components/experiments/NewExperimentButtonComponent.js @@ -1,17 +1,17 @@ -import PropTypes from "prop-types"; -import React from "react"; +import PropTypes from 'prop-types' +import React from 'react' const NewExperimentButtonComponent = ({ onClick }) => ( - <div className="bottom-btn-container"> - <div className="btn btn-primary float-right" onClick={onClick}> - <span className="fa fa-plus mr-2" /> - New Experiment + <div className="bottom-btn-container"> + <div className="btn btn-primary float-right" onClick={onClick}> + <span className="fa fa-plus mr-2"/> + New Experiment + </div> </div> - </div> -); +) NewExperimentButtonComponent.propTypes = { - onClick: PropTypes.func.isRequired -}; + onClick: PropTypes.func.isRequired, +} -export default NewExperimentButtonComponent; +export default NewExperimentButtonComponent diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js index f6c9c5d8..1ac2202c 100644 --- a/frontend/src/components/home/ContactSection.js +++ b/frontend/src/components/home/ContactSection.js @@ -1,64 +1,64 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; -import "./ContactSection.css"; -import ContentSection from "./ContentSection"; +import React from 'react' +import FontAwesome from 'react-fontawesome' +import './ContactSection.css' +import ContentSection from './ContentSection' const ContactSection = () => ( - <ContentSection name="contact" title="Contact"> - <div className="row justify-content-center"> - <div className="col-4"> - <a href="https://github.com/atlarge-research/opendc"> - <FontAwesome name="github" size="3x" className="mb-2" /> - <div className="w-100" /> - atlarge-research/opendc - </a> - </div> - <div className="col-4"> - <a href="mailto:opendc@atlarge-research.com"> - <FontAwesome name="envelope" size="3x" className="mb-2" /> - <div className="w-100" /> - opendc@atlarge-research.com - </a> - </div> - </div> - <div className="row"> - <div className="col text-center"> - <img - src="img/tudelft-icon.png" - className="img-fluid tudelft-icon" - alt="TU Delft" - /> - </div> - </div> - <div className="row"> - <div className="col text-center"> - A project by the - <a - href="http://atlarge.science" - target="_blank" - rel="noopener noreferrer" - > - <strong>@Large Research Group</strong> - </a>. - </div> - </div> - <div className="row"> - <div className="col text-center disclaimer mt-5 small"> - <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" /> - <br /> - OpenDC is an experimental tool. Your data may get lost, overwritten, or - otherwise become unavailable. - <br /> - The OpenDC authors should in no way be liable in the event this happens - (see our{" "} - <strong> - <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt"> - license - </a> - </strong>). Sorry for the inconvenience. - </div> - </div> - </ContentSection> -); + <ContentSection name="contact" title="Contact"> + <div className="row justify-content-center"> + <div className="col-4"> + <a href="https://github.com/atlarge-research/opendc"> + <FontAwesome name="github" size="3x" className="mb-2"/> + <div className="w-100"/> + atlarge-research/opendc + </a> + </div> + <div className="col-4"> + <a href="mailto:opendc@atlarge-research.com"> + <FontAwesome name="envelope" size="3x" className="mb-2"/> + <div className="w-100"/> + opendc@atlarge-research.com + </a> + </div> + </div> + <div className="row"> + <div className="col text-center"> + <img + src="img/tudelft-icon.png" + className="img-fluid tudelft-icon" + alt="TU Delft" + /> + </div> + </div> + <div className="row"> + <div className="col text-center"> + A project by the + <a + href="http://atlarge.science" + target="_blank" + rel="noopener noreferrer" + > + <strong>@Large Research Group</strong> + </a>. + </div> + </div> + <div className="row"> + <div className="col text-center disclaimer mt-5 small"> + <FontAwesome name="exclamation-triangle" size="2x" className="mr-2"/> + <br/> + OpenDC is an experimental tool. Your data may get lost, overwritten, or + otherwise become unavailable. + <br/> + The OpenDC authors should in no way be liable in the event this happens + (see our{' '} + <strong> + <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md"> + license + </a> + </strong>). Sorry for the inconvenience. + </div> + </div> + </ContentSection> +) -export default ContactSection; +export default ContactSection diff --git a/frontend/src/components/home/ContactSection.sass b/frontend/src/components/home/ContactSection.sass index 2cde7391..997f8d98 100644 --- a/frontend/src/components/home/ContactSection.sass +++ b/frontend/src/components/home/ContactSection.sass @@ -1,15 +1,15 @@ .contact-section - background-color: #444 - color: #ddd - - a + background-color: #444 color: #ddd - a:hover - color: #fff + a + color: #ddd + + a:hover + color: #fff - .tudelft-icon - height: 100px + .tudelft-icon + height: 100px - .disclaimer - color: #cccccc + .disclaimer + color: #cccccc diff --git a/frontend/src/components/home/ContentSection.js b/frontend/src/components/home/ContentSection.js index 2e24ee10..ba2e4ec3 100644 --- a/frontend/src/components/home/ContentSection.js +++ b/frontend/src/components/home/ContentSection.js @@ -1,19 +1,19 @@ -import classNames from "classnames"; -import PropTypes from "prop-types"; -import React from "react"; -import "./ContentSection.css"; +import classNames from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' +import './ContentSection.css' const ContentSection = ({ name, title, children }) => ( - <div id={name} className={classNames(name + "-section", "content-section")}> - <div className="container"> - <h1>{title}</h1> - {children} + <div id={name} className={classNames(name + '-section', 'content-section')}> + <div className="container"> + <h1>{title}</h1> + {children} + </div> </div> - </div> -); +) ContentSection.propTypes = { - name: PropTypes.string.isRequired -}; + name: PropTypes.string.isRequired, +} -export default ContentSection; +export default ContentSection diff --git a/frontend/src/components/home/ContentSection.sass b/frontend/src/components/home/ContentSection.sass index 67541179..a4c8bd66 100644 --- a/frontend/src/components/home/ContentSection.sass +++ b/frontend/src/components/home/ContentSection.sass @@ -1,9 +1,9 @@ @import ../../style-globals/_variables.sass .content-section - padding-top: 50px - padding-bottom: 100px - text-align: center + padding-top: 50px + padding-bottom: 150px + text-align: center - h1 - margin-bottom: 30px + h1 + margin-bottom: 30px diff --git a/frontend/src/components/home/IntroSection.js b/frontend/src/components/home/IntroSection.js index 59f5face..a799272a 100644 --- a/frontend/src/components/home/IntroSection.js +++ b/frontend/src/components/home/IntroSection.js @@ -1,40 +1,40 @@ -import React from "react"; +import React from 'react' const IntroSection = () => ( - <section id="intro" className="intro-section"> - <div className="container pt-5 pb-3"> - <div className="row justify-content-center"> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> - <h4>The datacenter (DC) industry...</h4> - <ul> - <li>Is worth over $15 bn, and growing</li> - <li>Has many hard-to-grasp concepts</li> - <li>Needs to become accessible to many</li> - </ul> + <section id="intro" className="intro-section"> + <div className="container pt-5 pb-3"> + <div className="row justify-content-center"> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <h4>The datacenter (DC) industry...</h4> + <ul> + <li>Is worth over $15 bn, and growing</li> + <li>Has many hard-to-grasp concepts</li> + <li>Needs to become accessible to many</li> + </ul> + </div> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <img + src="img/datacenter-drawing.png" + className="col-12 img-fluid" + alt="Schematic top-down view of a datacenter" + /> + <p className="col-12 figure-caption text-center"> + <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif"> + Image source + </a> + </p> + </div> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <h4>OpenDC provides...</h4> + <ul> + <li>Collaborative online DC modeling</li> + <li>Diverse and effective DC simulation</li> + <li>Exploratory DC performance feedback</li> + </ul> + </div> + </div> </div> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> - <img - src="img/datacenter-drawing.png" - className="col-12 img-fluid" - alt="Schematic top-down view of a datacenter" - /> - <p className="col-12 figure-caption text-center"> - <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif"> - Image source - </a> - </p> - </div> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> - <h4>OpenDC provides...</h4> - <ul> - <li>Collaborative online DC modeling</li> - <li>Diverse and effective DC simulation</li> - <li>Exploratory DC performance feedback</li> - </ul> - </div> - </div> - </div> - </section> -); + </section> +) -export default IntroSection; +export default IntroSection diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js index 8a5312b3..d519e840 100644 --- a/frontend/src/components/home/JumbotronHeader.js +++ b/frontend/src/components/home/JumbotronHeader.js @@ -1,20 +1,20 @@ -import React from "react"; -import "./JumbotronHeader.css"; +import React from 'react' +import './JumbotronHeader.css' const JumbotronHeader = () => ( - <section className="jumbotron-header"> - <div className="container"> - <div className="jumbotron text-center"> - <h1> - Open<span className="dc">DC</span> - </h1> - <p className="lead"> - Collaborative Datacenter Simulation and Exploration for Everybody - </p> - <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" /> - </div> - </div> - </section> -); + <section className="jumbotron-header"> + <div className="container"> + <div className="jumbotron text-center"> + <h1> + Open<span className="dc">DC</span> + </h1> + <p className="lead"> + Collaborative Datacenter Simulation and Exploration for Everybody + </p> + <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC"/> + </div> + </div> + </section> +) -export default JumbotronHeader; +export default JumbotronHeader diff --git a/frontend/src/components/home/JumbotronHeader.sass b/frontend/src/components/home/JumbotronHeader.sass index b88b79f7..1b6a89fd 100644 --- a/frontend/src/components/home/JumbotronHeader.sass +++ b/frontend/src/components/home/JumbotronHeader.sass @@ -1,24 +1,24 @@ .jumbotron-header - background: #00A6D6 + background: #00A6D6 .jumbotron - background-color: inherit - margin-bottom: 0 + background-color: inherit + margin-bottom: 0 - padding-top: 120px - padding-bottom: 120px + padding-top: 120px + padding-bottom: 120px - img - max-width: 110px + img + max-width: 110px - h1 - color: #fff - font-size: 4.5em + h1 + color: #fff + font-size: 4.5em - .dc - color: #fff - font-weight: bold + .dc + color: #fff + font-weight: bold - .lead - color: #fff - font-size: 1.4em + .lead + color: #fff + font-size: 1.4em diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js index 17834b0b..cdbb5a44 100644 --- a/frontend/src/components/home/ModelingSection.js +++ b/frontend/src/components/home/ModelingSection.js @@ -1,24 +1,24 @@ -import React from "react"; -import ScreenshotSection from "./ScreenshotSection"; +import React from 'react' +import ScreenshotSection from './ScreenshotSection' const ModelingSection = () => ( - <ScreenshotSection - name="modeling" - title="Datacenter Modeling" - imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG" - caption="Building a datacenter in OpenDC" - imageIsRight={true} - > - <h3>Collaboratively...</h3> - <ul> - <li>Model DC layout, and room locations and types</li> - <li>Place racks in rooms and nodes in racks</li> - <li> - Add real-world CPU, GPU, memory, storage and network units to each node - </li> - <li>Select from diverse scheduling policies</li> - </ul> - </ScreenshotSection> -); + <ScreenshotSection + name="modeling" + title="Datacenter Modeling" + imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG" + caption="Building a datacenter in OpenDC" + imageIsRight={true} + > + <h3>Collaboratively...</h3> + <ul> + <li>Model DC layout, and room locations and types</li> + <li>Place racks in rooms and nodes in racks</li> + <li> + Add real-world CPU, GPU, memory, storage and network units to each node + </li> + <li>Select from diverse scheduling policies</li> + </ul> + </ScreenshotSection> +) -export default ModelingSection; +export default ModelingSection diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js index 42b8ac77..fdb55020 100644 --- a/frontend/src/components/home/ScreenshotSection.js +++ b/frontend/src/components/home/ScreenshotSection.js @@ -1,32 +1,32 @@ -import classNames from "classnames"; -import React from "react"; -import ContentSection from "./ContentSection"; -import "./ScreenshotSection.css"; +import classNames from 'classnames' +import React from 'react' +import ContentSection from './ContentSection' +import './ScreenshotSection.css' const ScreenshotSection = ({ - name, - title, - imageUrl, - caption, - imageIsRight, - children -}) => ( - <ContentSection name={name} title={title}> - <div className="row"> - <div - className={classNames( - "col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left", - { "order-1": !imageIsRight } - )} - > - {children} - </div> - <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12"> - <img src={imageUrl} className="col-12 screenshot" alt={caption} /> - <div className="row text-muted justify-content-center">{caption}</div> - </div> - </div> - </ContentSection> -); + name, + title, + imageUrl, + caption, + imageIsRight, + children, + }) => ( + <ContentSection name={name} title={title}> + <div className="row"> + <div + className={classNames( + 'col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left', + { 'order-1': !imageIsRight }, + )} + > + {children} + </div> + <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12"> + <img src={imageUrl} className="col-12 screenshot" alt={caption}/> + <div className="row text-muted justify-content-center">{caption}</div> + </div> + </div> + </ContentSection> +) -export default ScreenshotSection; +export default ScreenshotSection diff --git a/frontend/src/components/home/ScreenshotSection.sass b/frontend/src/components/home/ScreenshotSection.sass index a349ad48..2f454cb4 100644 --- a/frontend/src/components/home/ScreenshotSection.sass +++ b/frontend/src/components/home/ScreenshotSection.sass @@ -1,5 +1,5 @@ .screenshot - outline: 2px black solid - padding-left: 0 - padding-right: 0 - margin-bottom: 5px + outline: 2px black solid + padding-left: 0 + padding-right: 0 + margin-bottom: 5px diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js index 3961e549..0fa21c34 100644 --- a/frontend/src/components/home/SimulationSection.js +++ b/frontend/src/components/home/SimulationSection.js @@ -1,25 +1,25 @@ -import React from "react"; -import ScreenshotSection from "./ScreenshotSection"; +import React from 'react' +import ScreenshotSection from './ScreenshotSection' const ModelingSection = () => ( - <ScreenshotSection - name="simulation" - title="Datacenter Simulation" - imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG" - caption="Running an experiment in OpenDC" - imageIsRight={false} - > - <h3>Working with OpenDC:</h3> - <ul> - <li>Seamlessly switch between construction and simulation modes</li> - <li> - Choose one of several predefined workloads (Big Data, Bag of Tasks, - Hadoop, etc.) - </li> - <li>Play, pause, and skip around the informative simulation timeline</li> - <li>Visualize and demo live</li> - </ul> - </ScreenshotSection> -); + <ScreenshotSection + name="simulation" + title="Datacenter Simulation" + imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG" + caption="Running an experiment in OpenDC" + imageIsRight={false} + > + <h3>Working with OpenDC:</h3> + <ul> + <li>Seamlessly switch between construction and simulation modes</li> + <li> + Choose one of several predefined workloads (Big Data, Bag of Tasks, + Hadoop, etc.) + </li> + <li>Play, pause, and skip around the informative simulation timeline</li> + <li>Visualize and demo live</li> + </ul> + </ScreenshotSection> +) -export default ModelingSection; +export default ModelingSection diff --git a/frontend/src/components/home/StakeholderSection.js b/frontend/src/components/home/StakeholderSection.js index 6d25fd86..e547ebe0 100644 --- a/frontend/src/components/home/StakeholderSection.js +++ b/frontend/src/components/home/StakeholderSection.js @@ -1,42 +1,42 @@ -import React from "react"; -import ContentSection from "./ContentSection"; +import React from 'react' +import ContentSection from './ContentSection' const Stakeholder = ({ name, title, subtitle }) => ( - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6"> - <img - src={"img/stakeholders/" + name + ".png"} - className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" - alt={title} - /> - <div className="text-center mt-2"> - <h4>{title}</h4> - <p>{subtitle}</p> + <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6"> + <img + src={'img/stakeholders/' + name + '.png'} + className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" + alt={title} + /> + <div className="text-center mt-2"> + <h4>{title}</h4> + <p>{subtitle}</p> + </div> </div> - </div> -); +) const StakeholderSection = () => ( - <ContentSection name="stakeholders" title="Stakeholders"> - <div className="row justify-content-center"> - <Stakeholder - name="Manager" - title="Managers" - subtitle="Seeing is deciding" - /> - <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" /> - <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" /> - <Stakeholder - name="Researcher" - title="Researchers" - subtitle="Understand & design" - /> - <Stakeholder - name="Student" - title="Students" - subtitle="Grasp complex concepts" - /> - </div> - </ContentSection> -); + <ContentSection name="stakeholders" title="Stakeholders"> + <div className="row justify-content-center"> + <Stakeholder + name="Manager" + title="Managers" + subtitle="Seeing is deciding" + /> + <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts"/> + <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune"/> + <Stakeholder + name="Researcher" + title="Researchers" + subtitle="Understand & design" + /> + <Stakeholder + name="Student" + title="Students" + subtitle="Grasp complex concepts" + /> + </div> + </ContentSection> +) -export default StakeholderSection; +export default StakeholderSection diff --git a/frontend/src/components/home/TeamSection.js b/frontend/src/components/home/TeamSection.js index b86655b4..2b7bb69d 100644 --- a/frontend/src/components/home/TeamSection.js +++ b/frontend/src/components/home/TeamSection.js @@ -1,56 +1,57 @@ -import React from "react"; -import ContentSection from "./ContentSection"; +import React from 'react' +import ContentSection from './ContentSection' const TeamMember = ({ photoId, name, description }) => ( - <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center"> - <img - src={"img/portraits/" + photoId + ".png"} - className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2" - alt={name} - /> - <div className="col-12"> - <h4>{name}</h4> - <div className="team-member-description">{description}</div> + <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center"> + <img + src={'img/portraits/' + photoId + '.png'} + className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2" + alt={name} + /> + <div className="col-12"> + <h4>{name}</h4> + <div className="team-member-description">{description}</div> + </div> </div> - </div> -); +) const TeamSection = () => ( - <ContentSection name="team" title="Core Team"> - <div className="row justify-content-center"> - <TeamMember - photoId="aiosup" - name="Prof. dr. ir. Alexandru Iosup" - description="Project Lead" - /> - <TeamMember - photoId="gandreadis" - name="Georgios Andreadis" - description="Technology Lead and Software Engineer responsible for the frontend web application" - /> - <TeamMember - photoId="fmastenbroek" - name="Fabian Mastenbroek" - description="Software Engineer responsible for the datacenter simulator" - /> - <TeamMember - photoId="loverweel" - name="Leon Overweel" - description="Software Engineer responsible for the web server, database, and API specification" - /> - </div> - <div className="text-center lead mt-3"> - See{" "} - <a - target="_blank" - href="http://atlarge.science/opendc#team" - rel="noopener noreferrer" - > - atlarge.science/opendc - </a>{" "} - for the full team! - </div> - </ContentSection> -); + <ContentSection name="team" title="Core Team"> + <div className="row justify-content-center"> + <TeamMember + photoId="aiosup" + name="Prof. dr. ir. Alexandru Iosup" + description="Project Lead" + /> + <TeamMember + photoId="loverweel" + name="Leon Overweel" + description="Product Lead and Software Engineer responsible for the web server, database, and + API specification" + /> + <TeamMember + photoId="gandreadis" + name="Georgios Andreadis" + description="Software Engineer responsible for the frontend web application" + /> + <TeamMember + photoId="fmastenbroek" + name="Fabian Mastenbroek" + description="Software Engineer responsible for the datacenter simulator" + /> + </div> + <div className="text-center lead mt-3"> + See{' '} + <a + target="_blank" + href="http://atlarge.science/opendc#team" + rel="noopener noreferrer" + > + atlarge.science/opendc + </a>{' '} + for the full team! + </div> + </ContentSection> +) -export default TeamSection; +export default TeamSection diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js index fdcfc522..13d8ca02 100644 --- a/frontend/src/components/home/TechnologiesSection.js +++ b/frontend/src/components/home/TechnologiesSection.js @@ -1,42 +1,42 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; -import ContentSection from "./ContentSection"; +import React from 'react' +import FontAwesome from 'react-fontawesome' +import ContentSection from './ContentSection' const TechnologiesSection = () => ( - <ContentSection name="technologies" title="Technologies"> - <ul className="list-group text-left"> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary"> + <ContentSection name="technologies" title="Technologies"> + <ul className="list-group text-left"> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary"> <span style={{ minWidth: 100 }}> - <FontAwesome name="window-maximize" className="mr-2" /> + <FontAwesome name="window-maximize" className="mr-2"/> <strong className="">Browser</strong> </span> - <span className="text-right">JavaScript, React, Redux, Konva</span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning"> + <span className="text-right">JavaScript, React, Redux, Konva</span> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning"> <span style={{ minWidth: 100 }}> - <FontAwesome name="television" className="mr-2" /> + <FontAwesome name="television" className="mr-2"/> <strong>Server</strong> </span> - <span className="text-right"> + <span className="text-right"> Python, Flask, FlaskSocketIO, OpenAPI </span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success"> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success"> <span style={{ minWidth: 100 }}> - <FontAwesome name="database" className="mr-2" /> + <FontAwesome name="database" className="mr-2"/> <strong>Database</strong> </span> - <span className="text-right">MariaDB</span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger"> + <span className="text-right">MariaDB</span> + </li> + <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger"> <span style={{ minWidth: 100 }}> - <FontAwesome name="cogs" className="mr-2" /> + <FontAwesome name="cogs" className="mr-2"/> <strong>Simulator</strong> </span> - <span className="text-right">Kotlin</span> - </li> - </ul> - </ContentSection> -); + <span className="text-right">Kotlin</span> + </li> + </ul> + </ContentSection> +) -export default TechnologiesSection; +export default TechnologiesSection diff --git a/frontend/src/components/modals/ConfirmationModal.js b/frontend/src/components/modals/ConfirmationModal.js index abdce5ac..589047dc 100644 --- a/frontend/src/components/modals/ConfirmationModal.js +++ b/frontend/src/components/modals/ConfirmationModal.js @@ -1,37 +1,37 @@ -import PropTypes from "prop-types"; -import React from "react"; -import Modal from "./Modal"; +import PropTypes from 'prop-types' +import React from 'react' +import Modal from './Modal' class ConfirmationModal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - message: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - callback: PropTypes.func.isRequired - }; + static propTypes = { + title: PropTypes.string.isRequired, + message: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + callback: PropTypes.func.isRequired, + } - onConfirm() { - this.props.callback(true); - } + onConfirm() { + this.props.callback(true) + } - onCancel() { - this.props.callback(false); - } + onCancel() { + this.props.callback(false) + } - render() { - return ( - <Modal - title={this.props.title} - show={this.props.show} - onSubmit={this.onConfirm.bind(this)} - onCancel={this.onCancel.bind(this)} - submitButtonType="danger" - submitButtonText="Confirm" - > - {this.props.message} - </Modal> - ); - } + render() { + return ( + <Modal + title={this.props.title} + show={this.props.show} + onSubmit={this.onConfirm.bind(this)} + onCancel={this.onCancel.bind(this)} + submitButtonType="danger" + submitButtonText="Confirm" + > + {this.props.message} + </Modal> + ) + } } -export default ConfirmationModal; +export default ConfirmationModal diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js index 19337db8..ec6080f2 100644 --- a/frontend/src/components/modals/Modal.js +++ b/frontend/src/components/modals/Modal.js @@ -1,132 +1,132 @@ -import classNames from "classnames"; -import PropTypes from "prop-types"; -import React from "react"; -import jQuery from "../../util/jquery"; +import classNames from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' +import jQuery from '../../util/jquery' class Modal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, - submitButtonType: PropTypes.string, - submitButtonText: PropTypes.string - }; - static defaultProps = { - submitButtonType: "primary", - submitButtonText: "Save" - }; - static idCounter = 0; + static propTypes = { + title: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, + submitButtonType: PropTypes.string, + submitButtonText: PropTypes.string, + } + static defaultProps = { + submitButtonType: 'primary', + submitButtonText: 'Save', + } + static idCounter = 0 - // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate - // 'close' triggers) - visible = false; + // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate + // 'close' triggers) + visible = false - constructor(props) { - super(props); - this.id = "modal-" + Modal.idCounter++; - } + constructor(props) { + super(props) + this.id = 'modal-' + Modal.idCounter++ + } - componentDidMount() { - this.visible = this.props.show; - this.openOrCloseModal(); + componentDidMount() { + this.visible = this.props.show + this.openOrCloseModal() - // Trigger auto-focus - jQuery("#" + this.id) - .on("shown.bs.modal", function() { - jQuery(this) - .find("input") - .first() - .focus(); - }) - .on("hide.bs.modal", () => { - if (this.visible) { - this.props.onCancel(); - } - }) - .on("keydown", e => { - e.stopPropagation(); - }); - } + // Trigger auto-focus + jQuery('#' + this.id) + .on('shown.bs.modal', function() { + jQuery(this) + .find('input') + .first() + .focus() + }) + .on('hide.bs.modal', () => { + if (this.visible) { + this.props.onCancel() + } + }) + .on('keydown', e => { + e.stopPropagation() + }) + } - componentDidUpdate() { - this.visible = this.props.show; - this.openOrCloseModal(); - } + componentDidUpdate() { + this.visible = this.props.show + this.openOrCloseModal() + } - onSubmit() { - if (this.visible) { - this.props.onSubmit(); - this.visible = false; - this.closeModal(); + onSubmit() { + if (this.visible) { + this.props.onSubmit() + this.visible = false + this.closeModal() + } } - } - onCancel() { - if (this.visible) { - this.props.onCancel(); - this.visible = false; - this.closeModal(); + onCancel() { + if (this.visible) { + this.props.onCancel() + this.visible = false + this.closeModal() + } } - } - openModal() { - jQuery("#" + this.id).modal("show"); - } + openModal() { + jQuery('#' + this.id).modal('show') + } - closeModal() { - jQuery("#" + this.id).modal("hide"); - } + closeModal() { + jQuery('#' + this.id).modal('hide') + } - openOrCloseModal() { - if (this.visible) { - this.openModal(); - } else { - this.closeModal(); + openOrCloseModal() { + if (this.visible) { + this.openModal() + } else { + this.closeModal() + } } - } - render() { - return ( - <div className="modal fade" id={this.id} role="dialog"> - <div className="modal-dialog" role="document"> - <div className="modal-content"> - <div className="modal-header"> - <h5 className="modal-title">{this.props.title}</h5> - <button - type="button" - className="close" - onClick={this.onCancel.bind(this)} - aria-label="Close" - > - <span>×</span> - </button> + render() { + return ( + <div className="modal fade" id={this.id} role="dialog"> + <div className="modal-dialog" role="document"> + <div className="modal-content"> + <div className="modal-header"> + <h5 className="modal-title">{this.props.title}</h5> + <button + type="button" + className="close" + onClick={this.onCancel.bind(this)} + aria-label="Close" + > + <span>×</span> + </button> + </div> + <div className="modal-body">{this.props.children}</div> + <div className="modal-footer"> + <button + type="button" + className="btn btn-secondary" + onClick={this.onCancel.bind(this)} + > + Close + </button> + <button + type="button" + className={classNames( + 'btn', + 'btn-' + this.props.submitButtonType, + )} + onClick={this.onSubmit.bind(this)} + > + {this.props.submitButtonText} + </button> + </div> + </div> + </div> </div> - <div className="modal-body">{this.props.children}</div> - <div className="modal-footer"> - <button - type="button" - className="btn btn-secondary" - onClick={this.onCancel.bind(this)} - > - Close - </button> - <button - type="button" - className={classNames( - "btn", - "btn-" + this.props.submitButtonType - )} - onClick={this.onSubmit.bind(this)} - > - {this.props.submitButtonText} - </button> - </div> - </div> - </div> - </div> - ); - } + ) + } } -export default Modal; +export default Modal diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js index cc16f8e1..8d03e81f 100644 --- a/frontend/src/components/modals/TextInputModal.js +++ b/frontend/src/components/modals/TextInputModal.js @@ -1,58 +1,58 @@ -import PropTypes from "prop-types"; -import React from "react"; -import Modal from "./Modal"; +import PropTypes from 'prop-types' +import React from 'react' +import Modal from './Modal' class TextInputModal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - callback: PropTypes.func.isRequired, - initialValue: PropTypes.string - }; + static propTypes = { + title: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + callback: PropTypes.func.isRequired, + initialValue: PropTypes.string, + } - componentDidUpdate() { - if (this.props.initialValue) { - this.textInput.value = this.props.initialValue; + componentDidUpdate() { + if (this.props.initialValue) { + this.textInput.value = this.props.initialValue + } } - } - onSubmit() { - this.props.callback(this.textInput.value); - this.textInput.value = ""; - } + onSubmit() { + this.props.callback(this.textInput.value) + this.textInput.value = '' + } - onCancel() { - this.props.callback(undefined); - this.textInput.value = ""; - } + onCancel() { + this.props.callback(undefined) + this.textInput.value = '' + } - render() { - return ( - <Modal - title={this.props.title} - show={this.props.show} - onSubmit={this.onSubmit.bind(this)} - onCancel={this.onCancel.bind(this)} - > - <form - onSubmit={e => { - e.preventDefault(); - this.onSubmit(); - }} - > - <div className="form-group"> - <label className="form-control-label">{this.props.label}</label> - <input - type="text" - className="form-control" - ref={textInput => (this.textInput = textInput)} - /> - </div> - </form> - </Modal> - ); - } + render() { + return ( + <Modal + title={this.props.title} + show={this.props.show} + onSubmit={this.onSubmit.bind(this)} + onCancel={this.onCancel.bind(this)} + > + <form + onSubmit={e => { + e.preventDefault() + this.onSubmit() + }} + > + <div className="form-group"> + <label className="form-control-label">{this.props.label}</label> + <input + type="text" + className="form-control" + ref={textInput => (this.textInput = textInput)} + /> + </div> + </form> + </Modal> + ) + } } -export default TextInputModal; +export default TextInputModal diff --git a/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js b/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js index e356fe96..143109ff 100644 --- a/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js @@ -1,104 +1,104 @@ -import PropTypes from "prop-types"; -import React from "react"; -import Shapes from "../../../shapes"; -import Modal from "../Modal"; +import PropTypes from 'prop-types' +import React from 'react' +import Shapes from '../../../shapes' +import Modal from '../Modal' class NewExperimentModalComponent extends React.Component { - static propTypes = { - show: PropTypes.bool.isRequired, - paths: PropTypes.arrayOf(Shapes.Path), - schedulers: PropTypes.arrayOf(Shapes.Scheduler), - traces: PropTypes.arrayOf(Shapes.Trace), - callback: PropTypes.func.isRequired - }; + static propTypes = { + show: PropTypes.bool.isRequired, + paths: PropTypes.arrayOf(Shapes.Path), + schedulers: PropTypes.arrayOf(Shapes.Scheduler), + traces: PropTypes.arrayOf(Shapes.Trace), + callback: PropTypes.func.isRequired, + } - reset() { - this.textInput.value = ""; - this.pathSelect.selectedIndex = 0; - this.traceSelect.selectedIndex = 0; - this.schedulerSelect.selectedIndex = 0; - } + reset() { + this.textInput.value = '' + this.pathSelect.selectedIndex = 0 + this.traceSelect.selectedIndex = 0 + this.schedulerSelect.selectedIndex = 0 + } - onSubmit() { - this.props.callback( - this.textInput.value, - parseInt(this.pathSelect.value, 10), - parseInt(this.traceSelect.value, 10), - this.schedulerSelect.value - ); - this.reset(); - } + onSubmit() { + this.props.callback( + this.textInput.value, + parseInt(this.pathSelect.value, 10), + parseInt(this.traceSelect.value, 10), + this.schedulerSelect.value, + ) + this.reset() + } - onCancel() { - this.props.callback(undefined); - this.reset(); - } + onCancel() { + this.props.callback(undefined) + this.reset() + } - render() { - return ( - <Modal - title="New Experiment" - show={this.props.show} - onSubmit={this.onSubmit.bind(this)} - onCancel={this.onCancel.bind(this)} - > - <form - onSubmit={e => { - e.preventDefault(); - this.onSubmit(); - }} - > - <div className="form-group"> - <label className="form-control-label">Name</label> - <input - type="text" - className="form-control" - ref={textInput => (this.textInput = textInput)} - /> - </div> - <div className="form-group"> - <label className="form-control-label">Path</label> - <select - className="form-control" - ref={pathSelect => (this.pathSelect = pathSelect)} + render() { + return ( + <Modal + title="New Experiment" + show={this.props.show} + onSubmit={this.onSubmit.bind(this)} + onCancel={this.onCancel.bind(this)} > - {this.props.paths.map(path => ( - <option value={path.id} key={path.id}> - {path.name ? path.name : "Path " + path.id} - </option> - ))} - </select> - </div> - <div className="form-group"> - <label className="form-control-label">Trace</label> - <select - className="form-control" - ref={traceSelect => (this.traceSelect = traceSelect)} - > - {this.props.traces.map(trace => ( - <option value={trace.id} key={trace.id}> - {trace.name} - </option> - ))} - </select> - </div> - <div className="form-group"> - <label className="form-control-label">Scheduler</label> - <select - className="form-control" - ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)} - > - {this.props.schedulers.map(scheduler => ( - <option value={scheduler.name} key={scheduler.name}> - {scheduler.name} - </option> - ))} - </select> - </div> - </form> - </Modal> - ); - } + <form + onSubmit={e => { + e.preventDefault() + this.onSubmit() + }} + > + <div className="form-group"> + <label className="form-control-label">Name</label> + <input + type="text" + className="form-control" + ref={textInput => (this.textInput = textInput)} + /> + </div> + <div className="form-group"> + <label className="form-control-label">Path</label> + <select + className="form-control" + ref={pathSelect => (this.pathSelect = pathSelect)} + > + {this.props.paths.map(path => ( + <option value={path.id} key={path.id}> + {path.name ? path.name : 'Path ' + path.id} + </option> + ))} + </select> + </div> + <div className="form-group"> + <label className="form-control-label">Trace</label> + <select + className="form-control" + ref={traceSelect => (this.traceSelect = traceSelect)} + > + {this.props.traces.map(trace => ( + <option value={trace.id} key={trace.id}> + {trace.name} + </option> + ))} + </select> + </div> + <div className="form-group"> + <label className="form-control-label">Scheduler</label> + <select + className="form-control" + ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)} + > + {this.props.schedulers.map(scheduler => ( + <option value={scheduler.name} key={scheduler.name}> + {scheduler.name} + </option> + ))} + </select> + </div> + </form> + </Modal> + ) + } } -export default NewExperimentModalComponent; +export default NewExperimentModalComponent diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js index 1a35f85d..451bb6a3 100644 --- a/frontend/src/components/navigation/AppNavbar.js +++ b/frontend/src/components/navigation/AppNavbar.js @@ -1,56 +1,56 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; -import { Link } from "react-router-dom"; -import Navbar, { NavItem } from "./Navbar"; -import "./Navbar.css"; +import React from 'react' +import FontAwesome from 'react-fontawesome' +import { Link } from 'react-router-dom' +import Navbar, { NavItem } from './Navbar' +import './Navbar.css' const AppNavbar = ({ simulationId, inSimulation, fullWidth }) => ( - <Navbar fullWidth={fullWidth}> - {inSimulation ? ( - <NavItem route={"/simulations/" + simulationId}> - <Link - className="nav-link" - title="Construction" - to={"/simulations/" + simulationId} - > - <FontAwesome name="industry" className="mr-2" /> - Construction - </Link> - </NavItem> - ) : ( - undefined - )} - {inSimulation ? ( - <NavItem route={"/simulations/" + simulationId + "/experiments"}> - <Link - className="nav-link" - title="Experiments" - to={"/simulations/" + simulationId + "/experiments"} - > - <FontAwesome name="play" className="mr-2" /> - Experiments - </Link> - </NavItem> - ) : ( - undefined - )} - <NavItem route="/simulations"> - <Link className="nav-link" title="My Simulations" to="/simulations"> - <FontAwesome name="list" className="mr-2" /> - My Simulations - </Link> - </NavItem> - <NavItem route="email"> - <a - className="nav-link" - title="Support" - href="mailto:opendc@atlarge-research.com" - > - <FontAwesome name="envelope" className="mr-2" /> - Support - </a> - </NavItem> - </Navbar> -); + <Navbar fullWidth={fullWidth}> + {inSimulation ? ( + <NavItem route={'/simulations/' + simulationId}> + <Link + className="nav-link" + title="Construction" + to={'/simulations/' + simulationId} + > + <FontAwesome name="industry" className="mr-2"/> + Construction + </Link> + </NavItem> + ) : ( + undefined + )} + {inSimulation ? ( + <NavItem route={'/simulations/' + simulationId + '/experiments'}> + <Link + className="nav-link" + title="Experiments" + to={'/simulations/' + simulationId + '/experiments'} + > + <FontAwesome name="play" className="mr-2"/> + Experiments + </Link> + </NavItem> + ) : ( + undefined + )} + <NavItem route="/simulations"> + <Link className="nav-link" title="My Simulations" to="/simulations"> + <FontAwesome name="list" className="mr-2"/> + My Simulations + </Link> + </NavItem> + <NavItem route="email"> + <a + className="nav-link" + title="Support" + href="mailto:opendc@atlarge-research.com" + > + <FontAwesome name="envelope" className="mr-2"/> + Support + </a> + </NavItem> + </Navbar> +) -export default AppNavbar; +export default AppNavbar diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js index 5d08bf3c..5bb6721d 100644 --- a/frontend/src/components/navigation/HomeNavbar.js +++ b/frontend/src/components/navigation/HomeNavbar.js @@ -1,24 +1,24 @@ -import React from "react"; -import Navbar from "./Navbar"; -import "./Navbar.css"; +import React from 'react' +import Navbar from './Navbar' +import './Navbar.css' const ScrollNavItem = ({ id, name }) => ( - <li className="nav-item"> - <a className="nav-link" href={id}> - {name} - </a> - </li> -); + <li className="nav-item"> + <a className="nav-link" href={id}> + {name} + </a> + </li> +) const HomeNavbar = () => ( - <Navbar fullWidth={false}> - <ScrollNavItem id="#stakeholders" name="Stakeholders" /> - <ScrollNavItem id="#modeling" name="Modeling" /> - <ScrollNavItem id="#simulation" name="Simulation" /> - <ScrollNavItem id="#technologies" name="Technologies" /> - <ScrollNavItem id="#team" name="Team" /> - <ScrollNavItem id="#contact" name="Contact" /> - </Navbar> -); + <Navbar fullWidth={false}> + <ScrollNavItem id="#stakeholders" name="Stakeholders"/> + <ScrollNavItem id="#modeling" name="Modeling"/> + <ScrollNavItem id="#simulation" name="Simulation"/> + <ScrollNavItem id="#technologies" name="Technologies"/> + <ScrollNavItem id="#team" name="Team"/> + <ScrollNavItem id="#contact" name="Contact"/> + </Navbar> +) -export default HomeNavbar; +export default HomeNavbar diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js index 800a3da8..905e1ae9 100644 --- a/frontend/src/components/navigation/LogoutButton.js +++ b/frontend/src/components/navigation/LogoutButton.js @@ -1,16 +1,16 @@ -import PropTypes from "prop-types"; -import React from "react"; -import FontAwesome from "react-fontawesome"; -import { Link } from "react-router-dom"; +import PropTypes from 'prop-types' +import React from 'react' +import FontAwesome from 'react-fontawesome' +import { Link } from 'react-router-dom' const LogoutButton = ({ onLogout }) => ( - <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}> - <FontAwesome name="power-off" size="lg" /> - </Link> -); + <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}> + <FontAwesome name="power-off" size="lg"/> + </Link> +) LogoutButton.propTypes = { - onLogout: PropTypes.func.isRequired -}; + onLogout: PropTypes.func.isRequired, +} -export default LogoutButton; +export default LogoutButton diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js index 44458949..d22f637e 100644 --- a/frontend/src/components/navigation/Navbar.js +++ b/frontend/src/components/navigation/Navbar.js @@ -1,102 +1,102 @@ -import classNames from "classnames"; -import React from "react"; -import { Link, withRouter } from "react-router-dom"; -import { userIsLoggedIn } from "../../auth/index"; -import Login from "../../containers/auth/Login"; -import Logout from "../../containers/auth/Logout"; -import ProfileName from "../../containers/auth/ProfileName"; -import "./Navbar.css"; +import classNames from 'classnames' +import React from 'react' +import { Link, withRouter } from 'react-router-dom' +import { userIsLoggedIn } from '../../auth/index' +import Login from '../../containers/auth/Login' +import Logout from '../../containers/auth/Logout' +import ProfileName from '../../containers/auth/ProfileName' +import './Navbar.css' -export const NAVBAR_HEIGHT = 60; +export const NAVBAR_HEIGHT = 60 -export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />); +export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />) export const LoggedInSection = withRouter(props => ( - <LoggedInSectionWithoutRoute {...props} /> -)); + <LoggedInSectionWithoutRoute {...props} /> +)) const GitHubLink = () => ( - <a - href="https://github.com/atlarge-research/opendc" - className="ml-2 mr-3 text-dark" - style={{ position: "relative", top: 7 }} - > - <span className="fa fa-github fa-2x" /> - </a> -); + <a + href="https://github.com/atlarge-research/opendc" + className="ml-2 mr-3 text-dark" + style={{ position: 'relative', top: 7 }} + > + <span className="fa fa-github fa-2x"/> + </a> +) const NavItemWithoutRoute = ({ route, location, children }) => ( - <li - className={classNames( - "nav-item", - location.pathname === route ? "active" : undefined - )} - > - {children} - </li> -); + <li + className={classNames( + 'nav-item', + location.pathname === route ? 'active' : undefined, + )} + > + {children} + </li> +) const LoggedInSectionWithoutRoute = ({ location }) => ( - <ul className="navbar-nav auth-links"> - {userIsLoggedIn() ? ( - [ - location.pathname === "/" ? ( - <NavItem route="/simulations" key="simulations"> - <Link className="nav-link" title="My Simulations" to="/simulations"> - My Simulations - </Link> - </NavItem> + <ul className="navbar-nav auth-links"> + {userIsLoggedIn() ? ( + [ + location.pathname === '/' ? ( + <NavItem route="/simulations" key="simulations"> + <Link className="nav-link" title="My Simulations" to="/simulations"> + My Simulations + </Link> + </NavItem> + ) : ( + <NavItem route="/profile" key="profile"> + <Link className="nav-link" title="My Profile" to="/profile"> + <ProfileName/> + </Link> + </NavItem> + ), + <NavItem route="logout" key="logout"> + <Logout/> + </NavItem>, + ] ) : ( - <NavItem route="/profile" key="profile"> - <Link className="nav-link" title="My Profile" to="/profile"> - <ProfileName /> - </Link> - </NavItem> - ), - <NavItem route="logout" key="logout"> - <Logout /> - </NavItem> - ] - ) : ( - <NavItem route="login"> - <GitHubLink /> - <Login visible={true} /> - </NavItem> - )} - </ul> -); + <NavItem route="login"> + <GitHubLink/> + <Login visible={true}/> + </NavItem> + )} + </ul> +) const Navbar = ({ fullWidth, children }) => ( - <nav - className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" - id="navbar" - > - <div className={fullWidth ? "container-fluid" : "container"}> - <button - className="navbar-toggler navbar-toggler-right" - type="button" - data-toggle="collapse" - data-target="#navbarSupportedContent" - aria-controls="navbarSupportedContent" - aria-expanded="false" - aria-label="Toggle navigation" - > - <span className="navbar-toggler-icon" /> - </button> - <Link - className="navbar-brand opendc-brand" - to="/" - title="OpenDC" - onClick={() => window.scrollTo(0, 0)} - > - <img src="/img/logo.png" alt="OpenDC" /> - </Link> + <nav + className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" + id="navbar" + > + <div className={fullWidth ? 'container-fluid' : 'container'}> + <button + className="navbar-toggler navbar-toggler-right" + type="button" + data-toggle="collapse" + data-target="#navbarSupportedContent" + aria-controls="navbarSupportedContent" + aria-expanded="false" + aria-label="Toggle navigation" + > + <span className="navbar-toggler-icon"/> + </button> + <Link + className="navbar-brand opendc-brand" + to="/" + title="OpenDC" + onClick={() => window.scrollTo(0, 0)} + > + <img src="/img/logo.png" alt="OpenDC"/> + </Link> - <div className="collapse navbar-collapse" id="navbarSupportedContent"> - <ul className="navbar-nav mr-auto">{children}</ul> - <LoggedInSection /> - </div> - </div> - </nav> -); + <div className="collapse navbar-collapse" id="navbarSupportedContent"> + <ul className="navbar-nav mr-auto">{children}</ul> + <LoggedInSection/> + </div> + </div> + </nav> +) -export default Navbar; +export default Navbar diff --git a/frontend/src/components/navigation/Navbar.sass b/frontend/src/components/navigation/Navbar.sass index 94c52936..a270bc6b 100644 --- a/frontend/src/components/navigation/Navbar.sass +++ b/frontend/src/components/navigation/Navbar.sass @@ -2,28 +2,28 @@ @import ../../style-globals/_variables.sass .navbar - border-top: $blue 3px solid - border-bottom: $gray-semi-dark 1px solid - color: $gray-very-dark - background: #fafafb + border-top: $blue 3px solid + border-bottom: $gray-semi-dark 1px solid + color: $gray-very-dark + background: #fafafb .opendc-brand - display: inline-block - color: $gray-very-dark + display: inline-block + color: $gray-very-dark - +transition(background, $transition-length) + +transition(background, $transition-length) - img - position: relative - bottom: 3px - display: inline-block - width: 30px + img + position: relative + bottom: 3px + display: inline-block + width: 30px .login - height: 40px - background: $blue - border: none - +clickable + height: 40px + background: $blue + border: none + +clickable - &:hover - background: $blue-dark + &:hover + background: $blue-dark diff --git a/frontend/src/components/not-found/BlinkingCursor.js b/frontend/src/components/not-found/BlinkingCursor.js index eea89e7b..bc2d2366 100644 --- a/frontend/src/components/not-found/BlinkingCursor.js +++ b/frontend/src/components/not-found/BlinkingCursor.js @@ -1,6 +1,6 @@ -import React from "react"; -import "./BlinkingCursor.css"; +import React from 'react' +import './BlinkingCursor.css' -const BlinkingCursor = () => <span className="blinking-cursor">_</span>; +const BlinkingCursor = () => <span className="blinking-cursor">_</span> -export default BlinkingCursor; +export default BlinkingCursor diff --git a/frontend/src/components/not-found/BlinkingCursor.sass b/frontend/src/components/not-found/BlinkingCursor.sass index 6be1476d..ad91df85 100644 --- a/frontend/src/components/not-found/BlinkingCursor.sass +++ b/frontend/src/components/not-found/BlinkingCursor.sass @@ -1,35 +1,35 @@ .blinking-cursor - -webkit-animation: 1s blink step-end infinite - -moz-animation: 1s blink step-end infinite - -o-animation: 1s blink step-end infinite - animation: 1s blink step-end infinite + -webkit-animation: 1s blink step-end infinite + -moz-animation: 1s blink step-end infinite + -o-animation: 1s blink step-end infinite + animation: 1s blink step-end infinite @keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 @-moz-keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 @-webkit-keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 @-ms-keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 @-o-keyframes blink - from, to - color: #eeeeee - 50% - color: #333333 + from, to + color: #eeeeee + 50% + color: #333333 diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js index 46dc4402..9e9cd29c 100644 --- a/frontend/src/components/not-found/CodeBlock.js +++ b/frontend/src/components/not-found/CodeBlock.js @@ -1,34 +1,34 @@ -import React from "react"; -import "./CodeBlock.css"; +import React from 'react' +import './CodeBlock.css' const CodeBlock = () => { - const textBlock = - " oo oooo oo <br/>" + - " oo oo oo oo <br/>" + - " oo oo oo oo <br/>" + - " oooooo oo oo oooooo <br/>" + - " oo oo oo oo <br/>" + - " oo oooo oo <br/>"; - const charList = textBlock.split(""); + const textBlock = + ' oo oooo oo <br/>' + + ' oo oo oo oo <br/>' + + ' oo oo oo oo <br/>' + + ' oooooo oo oo oooooo <br/>' + + ' oo oo oo oo <br/>' + + ' oo oooo oo <br/>' + const charList = textBlock.split('') - // Binary representation of the string "OpenDC!" ;) - const binaryString = - "01001111011100000110010101101110010001000100001100100001"; + // Binary representation of the string "OpenDC!" ;) + const binaryString = + '01001111011100000110010101101110010001000100001100100001' - let binaryIndex = 0; - for (let i = 0; i < charList.length; i++) { - if (charList[i] === "o") { - charList[i] = binaryString[binaryIndex]; - binaryIndex++; + let binaryIndex = 0 + for (let i = 0; i < charList.length; i++) { + if (charList[i] === 'o') { + charList[i] = binaryString[binaryIndex] + binaryIndex++ + } } - } - return ( - <div - className="code-block" - dangerouslySetInnerHTML={{ __html: textBlock }} - /> - ); -}; + return ( + <div + className="code-block" + dangerouslySetInnerHTML={{ __html: textBlock }} + /> + ) +} -export default CodeBlock; +export default CodeBlock diff --git a/frontend/src/components/not-found/CodeBlock.sass b/frontend/src/components/not-found/CodeBlock.sass index 51a3d3d0..e452f917 100644 --- a/frontend/src/components/not-found/CodeBlock.sass +++ b/frontend/src/components/not-found/CodeBlock.sass @@ -1,3 +1,3 @@ .code-block - white-space: pre-wrap - margin-top: 60px + white-space: pre-wrap + margin-top: 60px diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js index c6b8b78b..b629d14c 100644 --- a/frontend/src/components/not-found/TerminalWindow.js +++ b/frontend/src/components/not-found/TerminalWindow.js @@ -1,29 +1,29 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import BlinkingCursor from "./BlinkingCursor"; -import CodeBlock from "./CodeBlock"; -import "./TerminalWindow.css"; +import React from 'react' +import { Link } from 'react-router-dom' +import BlinkingCursor from './BlinkingCursor' +import CodeBlock from './CodeBlock' +import './TerminalWindow.css' const TerminalWindow = () => ( - <div className="terminal-window"> - <div className="terminal-header">Terminal -- bash</div> - <div className="terminal-body"> - <div className="segfault"> - $ status<br /> - opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4<br - /> - opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4<br /> - opendc[4270]: STDERR Page does not exist<br /> - </div> - <CodeBlock /> - <div className="sub-title"> - Got lost?<BlinkingCursor /> - </div> - <Link to="/" className="home-btn"> - <span className="fa fa-home" /> GET ME BACK TO OPENDC - </Link> + <div className="terminal-window"> + <div className="terminal-header">Terminal -- bash</div> + <div className="terminal-body"> + <div className="segfault"> + $ status<br/> + opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4<br + /> + opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4<br/> + opendc[4270]: STDERR Page does not exist<br/> + </div> + <CodeBlock/> + <div className="sub-title"> + Got lost?<BlinkingCursor/> + </div> + <Link to="/" className="home-btn"> + <span className="fa fa-home"/> GET ME BACK TO OPENDC + </Link> + </div> </div> - </div> -); +) -export default TerminalWindow; +export default TerminalWindow diff --git a/frontend/src/components/not-found/TerminalWindow.sass b/frontend/src/components/not-found/TerminalWindow.sass index 4f51a77f..7f05335a 100644 --- a/frontend/src/components/not-found/TerminalWindow.sass +++ b/frontend/src/components/not-found/TerminalWindow.sass @@ -1,70 +1,70 @@ .terminal-window - width: 600px - height: 400px - display: block + width: 600px + height: 400px + display: block - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 + position: absolute + top: 0 + bottom: 0 + left: 0 + right: 0 - margin: auto + margin: auto - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - cursor: default + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + cursor: default - overflow: hidden + overflow: hidden - box-shadow: 5px 5px 20px #444444 + box-shadow: 5px 5px 20px #444444 .terminal-header - font-family: monospace - background: #cccccc - color: #444444 - height: 30px - line-height: 30px - padding-left: 10px + font-family: monospace + background: #cccccc + color: #444444 + height: 30px + line-height: 30px + padding-left: 10px - border-top-left-radius: 7px - border-top-right-radius: 7px + border-top-left-radius: 7px + border-top-right-radius: 7px .terminal-body - font-family: monospace - text-align: center - background-color: #333333 - color: #eeeeee - padding: 10px + font-family: monospace + text-align: center + background-color: #333333 + color: #eeeeee + padding: 10px - height: 100% + height: 100% .segfault - text-align: left + text-align: left .sub-title - margin-top: 20px + margin-top: 20px .home-btn - margin-top: 10px - padding: 5px - display: inline-block - border: 1px solid #eeeeee - color: #eeeeee - text-decoration: none - cursor: pointer + margin-top: 10px + padding: 5px + display: inline-block + border: 1px solid #eeeeee + color: #eeeeee + text-decoration: none + cursor: pointer - -webkit-transition: all 200ms - -moz-transition: all 200ms - -o-transition: all 200ms - transition: all 200ms + -webkit-transition: all 200ms + -moz-transition: all 200ms + -o-transition: all 200ms + transition: all 200ms .home-btn:hover - background: #eeeeee - color: #333333 + background: #eeeeee + color: #333333 .home-btn:active - background: #333333 - color: #eeeeee + background: #333333 + color: #eeeeee diff --git a/frontend/src/components/simulations/FilterButton.js b/frontend/src/components/simulations/FilterButton.js index aa41f180..664f9b46 100644 --- a/frontend/src/components/simulations/FilterButton.js +++ b/frontend/src/components/simulations/FilterButton.js @@ -1,24 +1,24 @@ -import classNames from "classnames"; -import PropTypes from "prop-types"; -import React from "react"; +import classNames from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' const FilterButton = ({ active, children, onClick }) => ( - <button - className={classNames("btn btn-secondary", { active: active })} - onClick={() => { - if (!active) { - onClick(); - } - }} - > - {children} - </button> -); + <button + className={classNames('btn btn-secondary', { active: active })} + onClick={() => { + if (!active) { + onClick() + } + }} + > + {children} + </button> +) FilterButton.propTypes = { - active: PropTypes.bool.isRequired, - children: PropTypes.node.isRequired, - onClick: PropTypes.func.isRequired -}; + active: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, + onClick: PropTypes.func.isRequired, +} -export default FilterButton; +export default FilterButton diff --git a/frontend/src/components/simulations/FilterPanel.js b/frontend/src/components/simulations/FilterPanel.js index 836c0842..cbc3bf6a 100644 --- a/frontend/src/components/simulations/FilterPanel.js +++ b/frontend/src/components/simulations/FilterPanel.js @@ -1,13 +1,13 @@ -import React from "react"; -import FilterLink from "../../containers/simulations/FilterLink"; -import "./FilterPanel.css"; +import React from 'react' +import FilterLink from '../../containers/simulations/FilterLink' +import './FilterPanel.css' const FilterPanel = () => ( - <div className="btn-group filter-panel mb-2"> - <FilterLink filter="SHOW_ALL">All Simulations</FilterLink> - <FilterLink filter="SHOW_OWN">My Simulations</FilterLink> - <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink> - </div> -); + <div className="btn-group filter-panel mb-2"> + <FilterLink filter="SHOW_ALL">All Simulations</FilterLink> + <FilterLink filter="SHOW_OWN">My Simulations</FilterLink> + <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink> + </div> +) -export default FilterPanel; +export default FilterPanel diff --git a/frontend/src/components/simulations/FilterPanel.sass b/frontend/src/components/simulations/FilterPanel.sass index e10e4746..f71cf6c8 100644 --- a/frontend/src/components/simulations/FilterPanel.sass +++ b/frontend/src/components/simulations/FilterPanel.sass @@ -1,5 +1,5 @@ .filter-panel - display: flex + display: flex - button - flex: 1 !important + button + flex: 1 !important diff --git a/frontend/src/components/simulations/NewSimulationButtonComponent.js b/frontend/src/components/simulations/NewSimulationButtonComponent.js index 7e12d30f..d07a6419 100644 --- a/frontend/src/components/simulations/NewSimulationButtonComponent.js +++ b/frontend/src/components/simulations/NewSimulationButtonComponent.js @@ -1,17 +1,17 @@ -import PropTypes from "prop-types"; -import React from "react"; +import PropTypes from 'prop-types' +import React from 'react' const NewSimulationButtonComponent = ({ onClick }) => ( - <div className="bottom-btn-container"> - <div className="btn btn-primary float-right" onClick={onClick}> - <span className="fa fa-plus mr-2" /> - New Simulation + <div className="bottom-btn-container"> + <div className="btn btn-primary float-right" onClick={onClick}> + <span className="fa fa-plus mr-2"/> + New Simulation + </div> </div> - </div> -); +) NewSimulationButtonComponent.propTypes = { - onClick: PropTypes.func.isRequired -}; + onClick: PropTypes.func.isRequired, +} -export default NewSimulationButtonComponent; +export default NewSimulationButtonComponent diff --git a/frontend/src/components/simulations/SimulationActionButtons.js b/frontend/src/components/simulations/SimulationActionButtons.js index 46f4f159..6d2e5831 100644 --- a/frontend/src/components/simulations/SimulationActionButtons.js +++ b/frontend/src/components/simulations/SimulationActionButtons.js @@ -1,37 +1,37 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Link } from "react-router-dom"; +import PropTypes from 'prop-types' +import React from 'react' +import { Link } from 'react-router-dom' const SimulationActionButtons = ({ simulationId, onViewUsers, onDelete }) => ( - <td className="text-right"> - <Link - to={"/simulations/" + simulationId} - className="btn btn-outline-primary btn-sm mr-2" - title="Open this simulation" - > - <span className="fa fa-play" /> - </Link> - <div - className="btn btn-outline-success btn-sm disabled mr-2" - title="View and edit collaborators (not supported yet)" - onClick={() => onViewUsers(simulationId)} - > - <span className="fa fa-users" /> - </div> - <div - className="btn btn-outline-danger btn-sm" - title="Delete this simulation" - onClick={() => onDelete(simulationId)} - > - <span className="fa fa-trash" /> - </div> - </td> -); + <td className="text-right"> + <Link + to={'/simulations/' + simulationId} + className="btn btn-outline-primary btn-sm mr-2" + title="Open this simulation" + > + <span className="fa fa-play"/> + </Link> + <div + className="btn btn-outline-success btn-sm disabled mr-2" + title="View and edit collaborators (not supported yet)" + onClick={() => onViewUsers(simulationId)} + > + <span className="fa fa-users"/> + </div> + <div + className="btn btn-outline-danger btn-sm" + title="Delete this simulation" + onClick={() => onDelete(simulationId)} + > + <span className="fa fa-trash"/> + </div> + </td> +) SimulationActionButtons.propTypes = { - simulationId: PropTypes.number.isRequired, - onViewUsers: PropTypes.func, - onDelete: PropTypes.func -}; + simulationId: PropTypes.number.isRequired, + onViewUsers: PropTypes.func, + onDelete: PropTypes.func, +} -export default SimulationActionButtons; +export default SimulationActionButtons diff --git a/frontend/src/components/simulations/SimulationAuthList.js b/frontend/src/components/simulations/SimulationAuthList.js index f29dc96d..dce7fb5c 100644 --- a/frontend/src/components/simulations/SimulationAuthList.js +++ b/frontend/src/components/simulations/SimulationAuthList.js @@ -1,43 +1,43 @@ -import PropTypes from "prop-types"; -import React from "react"; -import Shapes from "../../shapes/index"; -import SimulationAuthRow from "./SimulationAuthRow"; +import PropTypes from 'prop-types' +import React from 'react' +import Shapes from '../../shapes/index' +import SimulationAuthRow from './SimulationAuthRow' const SimulationAuthList = ({ authorizations }) => { - return ( - <div className="vertically-expanding-container"> - {authorizations.length === 0 ? ( - <div className="alert alert-info"> - <span className="info-icon fa fa-question-circle mr-2" /> - <strong>No simulations here yet...</strong> Add some with the 'New - Simulation' button! + return ( + <div className="vertically-expanding-container"> + {authorizations.length === 0 ? ( + <div className="alert alert-info"> + <span className="info-icon fa fa-question-circle mr-2"/> + <strong>No simulations here yet...</strong> Add some with the 'New + Simulation' button! + </div> + ) : ( + <table className="table table-striped"> + <thead> + <tr> + <th>Simulation name</th> + <th>Last edited</th> + <th>Access rights</th> + <th/> + </tr> + </thead> + <tbody> + {authorizations.map(authorization => ( + <SimulationAuthRow + simulationAuth={authorization} + key={authorization.simulation.id} + /> + ))} + </tbody> + </table> + )} </div> - ) : ( - <table className="table table-striped"> - <thead> - <tr> - <th>Simulation name</th> - <th>Last edited</th> - <th>Access rights</th> - <th /> - </tr> - </thead> - <tbody> - {authorizations.map(authorization => ( - <SimulationAuthRow - simulationAuth={authorization} - key={authorization.simulation.id} - /> - ))} - </tbody> - </table> - )} - </div> - ); -}; + ) +} SimulationAuthList.propTypes = { - authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired -}; + authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired, +} -export default SimulationAuthList; +export default SimulationAuthList diff --git a/frontend/src/components/simulations/SimulationAuthRow.js b/frontend/src/components/simulations/SimulationAuthRow.js index b638fbce..b647db69 100644 --- a/frontend/src/components/simulations/SimulationAuthRow.js +++ b/frontend/src/components/simulations/SimulationAuthRow.js @@ -1,32 +1,32 @@ -import classNames from "classnames"; -import React from "react"; -import SimulationActions from "../../containers/simulations/SimulationActions"; -import Shapes from "../../shapes/index"; -import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from "../../util/authorizations"; -import { parseAndFormatDateTime } from "../../util/date-time"; +import classNames from 'classnames' +import React from 'react' +import SimulationActions from '../../containers/simulations/SimulationActions' +import Shapes from '../../shapes/index' +import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations' +import { parseAndFormatDateTime } from '../../util/date-time' const SimulationAuthRow = ({ simulationAuth }) => ( - <tr> - <td className="pt-3">{simulationAuth.simulation.name}</td> - <td className="pt-3"> - {parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)} - </td> - <td className="pt-3"> + <tr> + <td className="pt-3">{simulationAuth.simulation.name}</td> + <td className="pt-3"> + {parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)} + </td> + <td className="pt-3"> <span - className={classNames( - "fa", - "fa-" + AUTH_ICON_MAP[simulationAuth.authorizationLevel], - "mr-2" - )} + className={classNames( + 'fa', + 'fa-' + AUTH_ICON_MAP[simulationAuth.authorizationLevel], + 'mr-2', + )} /> - {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]} - </td> - <SimulationActions simulationId={simulationAuth.simulation.id} /> - </tr> -); + {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]} + </td> + <SimulationActions simulationId={simulationAuth.simulation.id}/> + </tr> +) SimulationAuthRow.propTypes = { - simulationAuth: Shapes.Authorization.isRequired -}; + simulationAuth: Shapes.Authorization.isRequired, +} -export default SimulationAuthRow; +export default SimulationAuthRow |