diff options
Diffstat (limited to 'frontend/src/components')
39 files changed, 205 insertions, 602 deletions
diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js index 1fd470fc..03daa692 100644 --- a/frontend/src/components/app/map/LoadingScreen.js +++ b/frontend/src/components/app/map/LoadingScreen.js @@ -4,7 +4,7 @@ import FontAwesome from 'react-fontawesome' const LoadingScreen = () => ( <div className="display-4"> <FontAwesome name="refresh" className="mr-4" spin/> - Loading your topology... + Loading your project... </div> ) diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js index 6de939a9..5d4ee5e2 100644 --- a/frontend/src/components/app/map/groups/RackGroup.js +++ b/frontend/src/components/app/map/groups/RackGroup.js @@ -4,23 +4,17 @@ import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFi 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) - } - +const RackGroup = ({ tile }) => { return ( <Group> <TileObject positionX={tile.positionX} positionY={tile.positionY} - color={color} + color={RACK_BACKGROUND_COLOR} /> - <Group opacity={inSimulation ? 0.3 : 1}> + <Group> <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js index 54f4ae17..e984f05b 100644 --- a/frontend/src/components/app/map/groups/TileGroup.js +++ b/frontend/src/components/app/map/groups/TileGroup.js @@ -4,10 +4,9 @@ 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 }) => { +const TileGroup = ({ tile, newTile, roomLoad, onClick }) => { let tileObject if (tile.rackId) { tileObject = <RackContainer tile={tile}/> @@ -18,8 +17,6 @@ const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => { let color = ROOM_DEFAULT_COLOR if (newTile) { color = ROOM_IN_CONSTRUCTION_COLOR - } else if (inSimulation && roomLoad >= 0) { - color = convertLoadToSimulationColor(roomLoad) } return ( diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js deleted file mode 100644 index 01005085..00000000 --- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js +++ /dev/null @@ -1,22 +0,0 @@ -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> - </div> -) - -export default LoadBarComponent diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js new file mode 100644 index 00000000..d6e39ff6 --- /dev/null +++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js @@ -0,0 +1,12 @@ +import React from 'react' +import Sidebar from '../Sidebar' +import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer' + +const ProjectSidebarComponent = () => ( + <Sidebar isRight={false}> + <TopologyListContainer/> + <h2>Portfolios</h2> + </Sidebar> + ) + +export default ProjectSidebarComponent diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js new file mode 100644 index 00000000..98615711 --- /dev/null +++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js @@ -0,0 +1,63 @@ +import PropTypes from 'prop-types' +import React from 'react' +import Shapes from '../../../../shapes' +import FontAwesome from 'react-fontawesome' + +class TopologyListComponent extends React.Component { + static propTypes = { + show: PropTypes.bool.isRequired, + topologies: PropTypes.arrayOf(Shapes.Topology), + currentTopologyId: PropTypes.string, + onChooseTopology: PropTypes.func.isRequired, + onNewTopology: PropTypes.func.isRequired, + onDeleteTopology: PropTypes.func.isRequired, + } + + onChoose(id) { + this.props.onChooseTopology(id) + } + + onDuplicate() { + this.props.onNewTopology( + this.textInput.value, + this.originTopology.value, + ) + } + + onDelete(id) { + this.props.onDeleteTopology(id) + } + + render() { + return ( + <div className="pb-3"> + <h2> + Topologies + <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}> + <FontAwesome name="plus"/> + </button> + </h2> + + {this.props.topologies.map((topology, idx) => ( + <div key={topology._id} className="row mb-1"> + <div className={'col-8 align-self-center ' + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')}> + {topology.name} + </div> + <div className="col-4 text-right"> + <span + className="btn btn-outline-primary mr-1 fa fa-play" + onClick={() => this.onChoose(topology._id)} + /> + <span + className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')} + onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined} + /> + </div> + </div> + ))} + </div> + ) + } +} + +export default TopologyListComponent diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js deleted file mode 100644 index 30990a13..00000000 --- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' - -const ExperimentMetadataComponent = ({ - experimentName, - topologyName, - traceName, - schedulerName, - }) => ( - <div> - <h2>{experimentName}</h2> - <p> - Topology: <strong>{topologyName}</strong> - </p> - <p> - Trace: <strong>{traceName}</strong> - </p> - <p> - Scheduler: <strong>{schedulerName}</strong> - </p> - </div> -) - -export default ExperimentMetadataComponent diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js deleted file mode 100644 index 6ee6a3b9..00000000 --- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js +++ /dev/null @@ -1,35 +0,0 @@ -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%" - /> - <span - className="btn btn-secondary" - style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }} - title="75-100%" - /> - </div> - </div> -) - -export default LoadMetricComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js deleted file mode 100644 index dba75eb2..00000000 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer' -import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer' -import Sidebar from '../Sidebar' -import './SimulationSidebarComponent.css' - -const SimulationSidebarComponent = () => { - return ( - <Sidebar isRight={false}> - <div className="simulation-sidebar-container flex-column"> - <ExperimentMetadataContainer/> - <LoadMetricContainer/> - </div> - </Sidebar> - ) -} - -export default SimulationSidebarComponent diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass deleted file mode 100644 index 6490cf8d..00000000 --- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass +++ /dev/null @@ -1,8 +0,0 @@ -.simulation-sidebar-container - display: flex - height: 100% - max-height: 100% - -.trace-container - flex: 1 - overflow-y: scroll diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js index 00965c18..4cc87798 100644 --- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js @@ -2,18 +2,11 @@ import React from 'react' import NewRoomConstructionContainer from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer' -const BuildingSidebarComponent = ({ inSimulation }) => { +const BuildingSidebarComponent = () => { 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/> - )} + <NewRoomConstructionContainer/> </div> ) } diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index 66c8c84f..d78c20eb 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -1,24 +1,15 @@ 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 }) => { +const MachineSidebarComponent = ({ machineId }) => { return ( <div> <MachineNameContainer/> <BackToRackContainer/> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="machine" objectId={machineId}/> - <LoadChartContainer objectType="machine" objectId={machineId}/> - </div> - ) : ( - <DeleteMachineContainer/> - )} + <DeleteMachineContainer/> <UnitTabsContainer/> </div> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index bde6d444..3953347a 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -53,14 +53,10 @@ class UnitComponent extends React.Component { data-content={unitInfo} data-html="true" /> - {this.props.inSimulation ? ( - undefined - ) : ( - <span - className="btn btn-outline-danger fa fa-trash" - onClick={this.props.onDelete} - /> - )} + <span + className="btn btn-outline-danger fa fa-trash" + onClick={this.props.onDelete} + /> </span> </li> ) diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js index da65da23..fcd3e03b 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,7 +1,7 @@ import React from 'react' import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer' -const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( +const UnitListComponent = ({ unitType, unitIds }) => ( <ul className="list-group mt-1"> {unitIds.length !== 0 ? ( unitIds.map((unitId, index) => ( @@ -14,13 +14,9 @@ const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( )) ) : ( <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> - )} + <span> + <strong>No units...</strong> Add some with the menu above! + </span> </div> )} </ul> diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index df7eeb77..c774036f 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -2,7 +2,7 @@ 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 }) => ( +const UnitTabsComponent = () => ( <div> <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> <li className="nav-item"> @@ -43,19 +43,19 @@ const UnitTabsComponent = ({ inSimulation }) => ( </ul> <div className="tab-content"> <div className="tab-pane active" id="cpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>} + <UnitAddContainer unitType="cpu"/> <UnitListContainer unitType="cpu"/> </div> <div className="tab-pane" id="gpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>} + <UnitAddContainer unitType="gpu"/> <UnitListContainer unitType="gpu"/> </div> <div className="tab-pane" id="memory-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>} + <UnitAddContainer unitType="memory"/> <UnitListContainer unitType="memory"/> </div> <div className="tab-pane" id="storage-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>} + <UnitAddContainer unitType="storage"/> <UnitListContainer unitType="storage"/> </div> </div> diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js index f182a78c..03b44aa6 100644 --- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js @@ -1,18 +1,14 @@ import React from 'react' -const EmptySlotComponent = ({ position, onAdd, inSimulation }) => ( +const EmptySlotComponent = ({ position, onAdd }) => ( <li className="list-group-item d-flex justify-content-between align-items-center"> <span className="badge badge-default badge-info mr-1 disabled"> {position} </span> - {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> - )} + <button className="btn btn-outline-primary" onClick={onAdd}> + <span className="fa fa-plus mr-2"/> + Add machine + </button> </li> ) diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js index b4204136..cec3c912 100644 --- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -1,6 +1,5 @@ import React from 'react' import Shapes from '../../../../../shapes' -import { convertLoadToSimulationColor } from '../../../../../util/simulation-load' const UnitIcon = ({ id, type }) => ( <div> @@ -16,14 +15,8 @@ const UnitIcon = ({ id, type }) => ( 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 + @@ -35,7 +28,7 @@ const MachineComponent = ({ <li className="d-flex list-group-item list-group-item-action justify-content-between align-items-center" onClick={onClick} - style={{ backgroundColor: color }} + style={{ backgroundColor: 'white' }} > <span className="badge badge-default badge-info mr-1">{position}</span> <div className="d-inline-flex"> diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js index 47d99254..23e8e743 100644 --- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js @@ -1,28 +1,17 @@ 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 }) => { +const RackSidebarComponent = () => { 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> - )} + <DeleteRackContainer/> </div> <div className="machine-list-container mt-2"> <MachineListContainer/> diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js index d8a805cb..a23ac381 100644 --- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js @@ -1,29 +1,18 @@ 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' -const RoomSidebarComponent = ({ roomId, inSimulation }) => { +const RoomSidebarComponent = () => { return ( <div> <RoomNameContainer/> <BackToBuildingContainer/> - {inSimulation ? ( - <div> - <LoadBarContainer objectType="room" objectId={roomId}/> - <LoadChartContainer objectType="room" objectId={roomId}/> - </div> - ) : ( - <div> - <RackConstructionContainer/> - <EditRoomContainer/> - <DeleteRoomContainer/> - </div> - )} + <RackConstructionContainer/> + <EditRoomContainer/> + <DeleteRoomContainer/> </div> ) } diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js deleted file mode 100644 index 7968c68d..00000000 --- a/frontend/src/components/app/timeline/PlayButtonComponent.js +++ /dev/null @@ -1,30 +0,0 @@ -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> -) - -export default PlayButtonComponent diff --git a/frontend/src/components/app/timeline/Timeline.sass b/frontend/src/components/app/timeline/Timeline.sass deleted file mode 100644 index 2d2cb979..00000000 --- a/frontend/src/components/app/timeline/Timeline.sass +++ /dev/null @@ -1,116 +0,0 @@ -@import ../../../style-globals/_variables.sass -@import ../../../style-globals/_mixins.sass - -$container-size: 500px -$play-btn-size: 40px -$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 - - pointer-events: none - -.timeline-container - display: inline-block - margin: 0 auto - text-align: left - - width: $container-size - -.timeline-labels - display: block - height: 25px - line-height: 25px - - div - display: inline-block - - .start-time-label - margin-left: $play-btn-size - $border-width - padding-left: 4px - - .end-time-label - padding-right: 4px - float: right - -.timeline-controls - display: flex - border: $timeline-border - overflow: hidden - - pointer-events: all - - +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 - - font-size: 16pt - background: #333 - color: #eee - - +transition(background, $transition-length) - +user-select - +clickable - - .play-btn:hover - background: #656565 - - .play-btn:active - background: #000 - - .timeline - position: relative - flex: 1 - height: $play-btn-size - line-height: $play-btn-size - float: right - - background: $blue-light - - z-index: 500 - - div - +transition(all, $transition-length) - - .time-marker - position: absolute - top: 0 - left: 0 - - width: 6px - height: 100% - - background: $blue-very-dark - - +border-radius(2px) - - z-index: 503 - - pointer-events: none - - .section-marker - position: absolute - top: 0 - left: 0 - - width: 3px - height: 100% - - background: #222222 - - z-index: 504 - - pointer-events: none diff --git a/frontend/src/components/app/timeline/TimelineComponent.js b/frontend/src/components/app/timeline/TimelineComponent.js deleted file mode 100644 index c183c0e8..00000000 --- a/frontend/src/components/app/timeline/TimelineComponent.js +++ /dev/null @@ -1,37 +0,0 @@ -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 - } - - if (this.props.currentTick < this.props.lastSimulatedTick) { - this.props.incrementTick() - } else { - this.props.pauseSimulation() - } - }, 1000) - } - - componentWillUnmount() { - clearInterval(this.interval) - } - - render() { - return ( - <div className="timeline-bar"> - <div className="timeline-container"> - <TimelineLabelsContainer/> - <TimelineControlsContainer/> - </div> - </div> - ) - } -} - -export default TimelineComponent diff --git a/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js deleted file mode 100644 index 01911aff..00000000 --- a/frontend/src/components/app/timeline/TimelineControlsComponent.js +++ /dev/null @@ -1,36 +0,0 @@ -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) - } - - 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, - ), - }} - /> - </div> - </div> - ) - } -} - -export default TimelineControlsComponent diff --git a/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js deleted file mode 100644 index 55818d24..00000000 --- a/frontend/src/components/app/timeline/TimelineLabelsComponent.js +++ /dev/null @@ -1,15 +0,0 @@ -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> - <div className="end-time-label"> - {convertSecondsToFormattedTime(lastSimulatedTick)} - </div> - </div> -) - -export default TimelineLabelsComponent diff --git a/frontend/src/components/experiments/ExperimentRowComponent.js b/frontend/src/components/experiments/ExperimentRowComponent.js index 880d7e31..c6ae1ba4 100644 --- a/frontend/src/components/experiments/ExperimentRowComponent.js +++ b/frontend/src/components/experiments/ExperimentRowComponent.js @@ -3,7 +3,7 @@ import React from 'react' import { Link } from 'react-router-dom' import Shapes from '../../shapes/index' -const ExperimentRowComponent = ({ experiment, simulationId, onDelete }) => ( +const ExperimentRowComponent = ({ experiment, projectId, onDelete }) => ( <tr> <td className="pt-3">{experiment.name}</td> <td className="pt-3">{experiment.topology.name}</td> @@ -11,7 +11,7 @@ const ExperimentRowComponent = ({ experiment, simulationId, onDelete }) => ( <td className="pt-3">{experiment.scheduler.name}</td> <td className="text-right"> <Link - to={'/simulations/' + simulationId + '/experiments/' + experiment._id} + to={'/projects/' + projectId + '/experiments/' + experiment._id} className="btn btn-outline-primary btn-sm mr-2" title="Open this experiment" > @@ -30,7 +30,7 @@ const ExperimentRowComponent = ({ experiment, simulationId, onDelete }) => ( ExperimentRowComponent.propTypes = { experiment: Shapes.Experiment.isRequired, - simulationId: PropTypes.string.isRequired, + projectId: PropTypes.string.isRequired, } export default ExperimentRowComponent diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js index 13d8ca02..01d55937 100644 --- a/frontend/src/components/home/TechnologiesSection.js +++ b/frontend/src/components/home/TechnologiesSection.js @@ -26,7 +26,7 @@ const TechnologiesSection = () => ( <FontAwesome name="database" className="mr-2"/> <strong>Database</strong> </span> - <span className="text-right">MariaDB</span> + <span className="text-right">MongoDB</span> </li> <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger"> <span style={{ minWidth: 100 }}> diff --git a/frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js index 22ef4585..a0d736a1 100644 --- a/frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js @@ -3,15 +3,12 @@ import React from 'react' import Shapes from '../../../shapes' import Modal from '../Modal' -class ChangeTopologyModalComponent extends React.Component { +class NewTopologyModalComponent extends React.Component { static propTypes = { show: PropTypes.bool.isRequired, topologies: PropTypes.arrayOf(Shapes.Topology), - currentTopologyId: PropTypes.string, - onChooseTopology: PropTypes.func.isRequired, onCreateTopology: PropTypes.func.isRequired, onDuplicateTopology: PropTypes.func.isRequired, - onDeleteTopology: PropTypes.func.isRequired, onCancel: PropTypes.func.isRequired, } @@ -28,11 +25,6 @@ class ChangeTopologyModalComponent extends React.Component { } } - onChoose(id) { - this.props.onChooseTopology(id) - this.reset() - } - onCreate() { this.props.onCreateTopology(this.textInput.value) this.reset() @@ -46,11 +38,6 @@ class ChangeTopologyModalComponent extends React.Component { this.reset() } - onDelete(id) { - this.props.onDeleteTopology(id) - this.reset() - } - onCancel() { this.props.onCancel() this.reset() @@ -59,37 +46,11 @@ class ChangeTopologyModalComponent extends React.Component { render() { return ( <Modal - title="Change Topology" + title="New Topology" show={this.props.show} onSubmit={this.onSubmit.bind(this)} onCancel={this.onCancel.bind(this)} > - <div> - {this.props.topologies.map((topology, idx) => ( - <div key={topology._id} className="row mb-1"> - <div className="col-6"> - <em>{topology._id === this.props.currentTopologyId ? 'Active: ' : ''}</em> - {topology.name} - </div> - <div className="col-6 text-right"> - <span - className="btn btn-primary mr-1" - onClick={() => this.onChoose(topology._id)} - > - Choose - </span> - <span - className={'btn btn-danger ' + (idx === 0 ? 'disabled' : '')} - onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined} - > - Delete - </span> - </div> - </div> - ))} - </div> - - <h5 className="pt-3 pt-1">New Topology</h5> <form onSubmit={e => { e.preventDefault() @@ -128,4 +89,4 @@ class ChangeTopologyModalComponent extends React.Component { } } -export default ChangeTopologyModalComponent +export default NewTopologyModalComponent diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js deleted file mode 100644 index 15f08b5f..00000000 --- a/frontend/src/components/navigation/AppNavbar.js +++ /dev/null @@ -1,54 +0,0 @@ -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, onViewTopologies }) => ( - <Navbar fullWidth={fullWidth}> - <NavItem route="/simulations"> - <Link className="nav-link" title="My Simulations" to="/simulations"> - <FontAwesome name="list" className="mr-2"/> - My Simulations - </Link> - </NavItem> - {inSimulation ? ( - <> - <NavItem route={'/simulations/' + simulationId}> - <Link - className="nav-link" - title="Construction" - to={'/simulations/' + simulationId} - > - <FontAwesome name="industry" className="mr-2"/> - Construction - </Link> - </NavItem> - <NavItem route="topologies"> - <span - className="nav-link" - title="Topologies" - onClick={onViewTopologies} - > - <FontAwesome name="server" className="mr-2"/> - Topologies - </span> - </NavItem> - <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 - )} - </Navbar> -) - -export default AppNavbar diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js new file mode 100644 index 00000000..10a2b92c --- /dev/null +++ b/frontend/src/components/navigation/AppNavbarComponent.js @@ -0,0 +1,27 @@ +import React from 'react' +import FontAwesome from 'react-fontawesome' +import { Link } from 'react-router-dom' +import Navbar, { NavItem } from './Navbar' +import './Navbar.css' + +const AppNavbarComponent = ({ project, fullWidth }) => ( + <Navbar fullWidth={fullWidth}> + <NavItem route="/projects"> + <Link className="nav-link" title="My Projects" to="/projects"> + <FontAwesome name="list" className="mr-2"/> + My Projects + </Link> + </NavItem> + {project ? ( + <NavItem> + <Link className="nav-link" title="Current Project" to={`/projects/${project._id}`}> + <span>{project.name}</span> + </Link> + </NavItem> + ) : ( + undefined + )} + </Navbar> +) + +export default AppNavbarComponent diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js index 5bb6721d..4e3f3869 100644 --- a/frontend/src/components/navigation/HomeNavbar.js +++ b/frontend/src/components/navigation/HomeNavbar.js @@ -14,7 +14,7 @@ const HomeNavbar = () => ( <Navbar fullWidth={false}> <ScrollNavItem id="#stakeholders" name="Stakeholders"/> <ScrollNavItem id="#modeling" name="Modeling"/> - <ScrollNavItem id="#simulation" name="Simulation"/> + <ScrollNavItem id="#project" name="Project"/> <ScrollNavItem id="#technologies" name="Technologies"/> <ScrollNavItem id="#team" name="Team"/> <ScrollNavItem id="#contact" name="Contact"/> diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js index b47f1f94..0ef19ecb 100644 --- a/frontend/src/components/navigation/Navbar.js +++ b/frontend/src/components/navigation/Navbar.js @@ -40,9 +40,9 @@ const LoggedInSectionWithoutRoute = ({ location }) => ( {userIsLoggedIn() ? ( [ location.pathname === '/' ? ( - <NavItem route="/simulations" key="simulations"> - <Link className="nav-link" title="My Simulations" to="/simulations"> - My Simulations + <NavItem route="/projects" key="projects"> + <Link className="nav-link" title="My Projects" to="/projects"> + My Projects </Link> </NavItem> ) : ( diff --git a/frontend/src/components/simulations/FilterButton.js b/frontend/src/components/projects/FilterButton.js index 664f9b46..664f9b46 100644 --- a/frontend/src/components/simulations/FilterButton.js +++ b/frontend/src/components/projects/FilterButton.js diff --git a/frontend/src/components/simulations/FilterPanel.js b/frontend/src/components/projects/FilterPanel.js index cbc3bf6a..0970f573 100644 --- a/frontend/src/components/simulations/FilterPanel.js +++ b/frontend/src/components/projects/FilterPanel.js @@ -1,11 +1,11 @@ import React from 'react' -import FilterLink from '../../containers/simulations/FilterLink' +import FilterLink from '../../containers/projects/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_ALL">All Projects</FilterLink> + <FilterLink filter="SHOW_OWN">My Projects</FilterLink> <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink> </div> ) diff --git a/frontend/src/components/simulations/FilterPanel.sass b/frontend/src/components/projects/FilterPanel.sass index f71cf6c8..f71cf6c8 100644 --- a/frontend/src/components/simulations/FilterPanel.sass +++ b/frontend/src/components/projects/FilterPanel.sass diff --git a/frontend/src/components/simulations/NewSimulationButtonComponent.js b/frontend/src/components/projects/NewProjectButtonComponent.js index d07a6419..3ddef5e5 100644 --- a/frontend/src/components/simulations/NewSimulationButtonComponent.js +++ b/frontend/src/components/projects/NewProjectButtonComponent.js @@ -1,17 +1,17 @@ import PropTypes from 'prop-types' import React from 'react' -const NewSimulationButtonComponent = ({ onClick }) => ( +const NewProjectButtonComponent = ({ onClick }) => ( <div className="bottom-btn-container"> <div className="btn btn-primary float-right" onClick={onClick}> <span className="fa fa-plus mr-2"/> - New Simulation + New Project </div> </div> ) -NewSimulationButtonComponent.propTypes = { +NewProjectButtonComponent.propTypes = { onClick: PropTypes.func.isRequired, } -export default NewSimulationButtonComponent +export default NewProjectButtonComponent diff --git a/frontend/src/components/simulations/SimulationActionButtons.js b/frontend/src/components/projects/ProjectActionButtons.js index 3395cdeb..456dd6b6 100644 --- a/frontend/src/components/simulations/SimulationActionButtons.js +++ b/frontend/src/components/projects/ProjectActionButtons.js @@ -2,36 +2,36 @@ import PropTypes from 'prop-types' import React from 'react' import { Link } from 'react-router-dom' -const SimulationActionButtons = ({ simulationId, onViewUsers, onDelete }) => ( +const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => ( <td className="text-right"> <Link - to={'/simulations/' + simulationId} + to={'/projects/' + projectId} className="btn btn-outline-primary btn-sm mr-2" - title="Open this simulation" + title="Open this project" > <span className="fa fa-play"/> </Link> <div className="btn btn-outline-success btn-sm disabled mr-2" title="View and edit collaborators (not supported currently)" - onClick={() => onViewUsers(simulationId)} + onClick={() => onViewUsers(projectId)} > <span className="fa fa-users"/> </div> <div className="btn btn-outline-danger btn-sm" - title="Delete this simulation" - onClick={() => onDelete(simulationId)} + title="Delete this project" + onClick={() => onDelete(projectId)} > <span className="fa fa-trash"/> </div> </td> ) -SimulationActionButtons.propTypes = { - simulationId: PropTypes.string.isRequired, +ProjectActionButtons.propTypes = { + projectId: PropTypes.string.isRequired, onViewUsers: PropTypes.func, onDelete: PropTypes.func, } -export default SimulationActionButtons +export default ProjectActionButtons diff --git a/frontend/src/components/simulations/SimulationAuthList.js b/frontend/src/components/projects/ProjectAuthList.js index c760d08f..5a2c6695 100644 --- a/frontend/src/components/simulations/SimulationAuthList.js +++ b/frontend/src/components/projects/ProjectAuthList.js @@ -1,22 +1,22 @@ import PropTypes from 'prop-types' import React from 'react' import Shapes from '../../shapes/index' -import SimulationAuthRow from './SimulationAuthRow' +import ProjectAuthRow from './ProjectAuthRow' -const SimulationAuthList = ({ authorizations }) => { +const ProjectAuthList = ({ 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! + <strong>No projects here yet...</strong> Add some with the 'New + Project' button! </div> ) : ( <table className="table table-striped"> <thead> <tr> - <th>Simulation name</th> + <th>Project name</th> <th>Last edited</th> <th>Access rights</th> <th/> @@ -24,9 +24,9 @@ const SimulationAuthList = ({ authorizations }) => { </thead> <tbody> {authorizations.map(authorization => ( - <SimulationAuthRow - simulationAuth={authorization} - key={authorization.simulation._id} + <ProjectAuthRow + projectAuth={authorization} + key={authorization.project._id} /> ))} </tbody> @@ -36,8 +36,8 @@ const SimulationAuthList = ({ authorizations }) => { ) } -SimulationAuthList.propTypes = { +ProjectAuthList.propTypes = { authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired, } -export default SimulationAuthList +export default ProjectAuthList diff --git a/frontend/src/components/projects/ProjectAuthRow.js b/frontend/src/components/projects/ProjectAuthRow.js new file mode 100644 index 00000000..be9de6e0 --- /dev/null +++ b/frontend/src/components/projects/ProjectAuthRow.js @@ -0,0 +1,32 @@ +import classNames from 'classnames' +import React from 'react' +import ProjectActions from '../../containers/projects/ProjectActions' +import Shapes from '../../shapes/index' +import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations' +import { parseAndFormatDateTime } from '../../util/date-time' + +const ProjectAuthRow = ({ projectAuth }) => ( + <tr> + <td className="pt-3">{projectAuth.project.name}</td> + <td className="pt-3"> + {parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)} + </td> + <td className="pt-3"> + <span + className={classNames( + 'fa', + 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], + 'mr-2', + )} + /> + {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]} + </td> + <ProjectActions projectId={projectAuth.project._id}/> + </tr> +) + +ProjectAuthRow.propTypes = { + projectAuth: Shapes.Authorization.isRequired, +} + +export default ProjectAuthRow diff --git a/frontend/src/components/simulations/SimulationAuthRow.js b/frontend/src/components/simulations/SimulationAuthRow.js deleted file mode 100644 index 0e9c36da..00000000 --- a/frontend/src/components/simulations/SimulationAuthRow.js +++ /dev/null @@ -1,32 +0,0 @@ -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"> - <span - className={classNames( - 'fa', - 'fa-' + AUTH_ICON_MAP[simulationAuth.authorizationLevel], - 'mr-2', - )} - /> - {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]} - </td> - <SimulationActions simulationId={simulationAuth.simulation._id}/> - </tr> -) - -SimulationAuthRow.propTypes = { - simulationAuth: Shapes.Authorization.isRequired, -} - -export default SimulationAuthRow |