diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/containers/app')
32 files changed, 433 insertions, 158 deletions
diff --git a/opendc-web/opendc-web-ui/src/containers/app/App.js b/opendc-web/opendc-web-ui/src/containers/app/App.js new file mode 100644 index 00000000..ec9714ce --- /dev/null +++ b/opendc-web/opendc-web-ui/src/containers/app/App.js @@ -0,0 +1,111 @@ +/* + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import PropTypes from 'prop-types' +import React, { useEffect } from 'react' +import Head from 'next/head' +import { HotKeys } from 'react-hotkeys' +import { useDispatch, useSelector } from 'react-redux' +import { openPortfolioSucceeded } from '../../redux/actions/portfolios' +import { openProjectSucceeded } from '../../redux/actions/projects' +import ToolPanelComponent from '../../components/app/map/controls/ToolPanelComponent' +import LoadingScreen from '../../components/app/map/LoadingScreen' +import ScaleIndicatorContainer from '../../containers/app/map/controls/ScaleIndicatorContainer' +import MapStage from '../../containers/app/map/MapStage' +import TopologySidebarContainer from '../../containers/app/sidebars/topology/TopologySidebarContainer' +import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer' +import ProjectSidebarContainer from '../../containers/app/sidebars/project/ProjectSidebarContainer' +import { openScenarioSucceeded } from '../../redux/actions/scenarios' +import PortfolioResultsContainer from '../../containers/app/results/PortfolioResultsContainer' +import { KeymapConfiguration } from '../../hotkeys' +import { useRequireAuth } from '../../auth' +import { useActiveProject } from '../../data/project' + +const App = ({ projectId, portfolioId, scenarioId }) => { + useRequireAuth() + + const projectName = useActiveProject()?.name + const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1') + + const dispatch = useDispatch() + useEffect(() => { + if (scenarioId) { + dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId)) + } else if (portfolioId) { + dispatch(openPortfolioSucceeded(projectId, portfolioId)) + } else { + dispatch(openProjectSucceeded(projectId)) + } + }, [projectId, portfolioId, scenarioId, dispatch]) + + const constructionElements = topologyIsLoading ? ( + <div className="full-height d-flex align-items-center justify-content-center"> + <LoadingScreen /> + </div> + ) : ( + <div className="full-height"> + <MapStage /> + <ScaleIndicatorContainer /> + <ToolPanelComponent /> + <ProjectSidebarContainer /> + <TopologySidebarContainer /> + </div> + ) + + const portfolioElements = ( + <div className="full-height app-page-container"> + <ProjectSidebarContainer /> + <div className="container-fluid full-height"> + <PortfolioResultsContainer /> + </div> + </div> + ) + + const scenarioElements = ( + <div className="full-height app-page-container"> + <ProjectSidebarContainer /> + <div className="container-fluid full-height"> + <h2>Scenario loading</h2> + </div> + </div> + ) + + const title = projectName ? projectName + ' - OpenDC' : 'Simulation - OpenDC' + + return ( + <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="page-container full-height"> + <Head> + <title>{title}</title> + </Head> + <AppNavbarContainer fullWidth={true} /> + {scenarioId ? scenarioElements : portfolioId ? portfolioElements : constructionElements} + </HotKeys> + ) +} + +App.propTypes = { + projectId: PropTypes.string.isRequired, + portfolioId: PropTypes.string, + scenarioId: PropTypes.string, +} + +export default App diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js index 651b3459..bac24c8b 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch } from 'react-redux' -import { goDownOneInteractionLevel } from '../../../actions/interaction-level' +import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level' import GrayLayer from '../../../components/app/map/elements/GrayLayer' const GrayContainer = () => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js index 61d123e8..91ceb35d 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js @@ -1,14 +1,17 @@ import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../actions/map' +import { useDispatch } from 'react-redux' +import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../redux/actions/map' import MapStageComponent from '../../../components/app/map/MapStageComponent' +import { useMapDimensions, useMapPosition } from '../../../data/map' const MapStage = () => { - const { position, dimensions } = useSelector((state) => state.map) + const position = useMapPosition() + const dimensions = useMapDimensions() const dispatch = useDispatch() const zoomInOnPositionA = (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y)) const setMapPositionWithBoundsCheckA = (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y)) const setMapDimensionsA = (width, height) => dispatch(setMapDimensions(width, height)) + return ( <MapStageComponent mapPosition={position} diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js index 877233fc..52d48317 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { goFromBuildingToRoom } from '../../../actions/interaction-level' +import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level' import RoomGroup from '../../../components/app/map/groups/RoomGroup' const RoomContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js index ad7301a7..f97e89a1 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { goFromRoomToRack } from '../../../actions/interaction-level' +import { goFromRoomToRack } from '../../../redux/actions/interaction-level' import TileGroup from '../../../components/app/map/groups/TileGroup' const TileContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js index 612ca41c..e7ab3c72 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js @@ -1,11 +1,10 @@ import React from 'react' import { useSelector } from 'react-redux' import TopologyGroup from '../../../components/app/map/groups/TopologyGroup' +import { useActiveTopology } from '../../../data/topology' const TopologyContainer = () => { - const topology = useSelector( - (state) => state.currentTopologyId !== '-1' && state.objects.topology[state.currentTopologyId] - ) + const topology = useActiveTopology() const interactionLevel = useSelector((state) => state.interactionLevel) return <TopologyGroup topology={topology} interactionLevel={interactionLevel} /> diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js index e9d58b9f..a10eea22 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js @@ -1,9 +1,9 @@ import React from 'react' -import { useSelector } from 'react-redux' import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent' +import { useMapScale } from '../../../../data/map' const ScaleIndicatorContainer = (props) => { - const scale = useSelector((state) => state.map.scale) + const scale = useMapScale() return <ScaleIndicatorComponent {...props} scale={scale} /> } diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js index a18dfd5b..a39c6077 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js @@ -1,11 +1,12 @@ import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { zoomInOnCenter } from '../../../../actions/map' +import { useDispatch } from 'react-redux' +import { zoomInOnCenter } from '../../../../redux/actions/map' import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent' +import { useMapScale } from '../../../../data/map' const ZoomControlContainer = () => { const dispatch = useDispatch() - const scale = useSelector((state) => state.map.scale) + const scale = useMapScale() return <ZoomControlComponent mapScale={scale} zoomInOnCenter={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))} /> } diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js index 5f701b4b..633ebcc7 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js @@ -1,9 +1,10 @@ import React from 'react' -import { useSelector } from 'react-redux' import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent' +import { useMapPosition, useMapScale } from '../../../../data/map' const MapLayer = (props) => { - const { position, scale } = useSelector((state) => state.map) + const position = useMapPosition() + const scale = useMapScale() return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} /> } diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js index cefdf35c..8e934a01 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { addRackToTile } from '../../../../actions/topology/room' +import { addRackToTile } from '../../../../redux/actions/topology/room' import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent' import { findTileWithPosition } from '../../../../util/tile-calculations' diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js index 2717d890..1bfadb6d 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { toggleTileAtLocation } from '../../../../actions/topology/building' +import { toggleTileAtLocation } from '../../../../redux/actions/topology/building' import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent' import { deriveValidNextTilePositions, diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js index 86f465b6..a36997ff 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js @@ -1,34 +1,23 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { useHistory } from 'react-router-dom' +import React, { useState } from 'react' +import { useDispatch } from 'react-redux' +import { useRouter } from 'next/router' import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent' -import { deletePortfolio, setCurrentPortfolio } from '../../../../actions/portfolios' -import { openNewPortfolioModal } from '../../../../actions/modals/portfolios' +import { addPortfolio, deletePortfolio, setCurrentPortfolio } from '../../../../redux/actions/portfolios' import { getState } from '../../../../util/state-utils' -import { setCurrentTopology } from '../../../../actions/topology/building' +import { setCurrentTopology } from '../../../../redux/actions/topology/building' +import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent' +import { useActivePortfolio, useActiveProject, usePortfolios } from '../../../../data/project' -const PortfolioListContainer = (props) => { - const state = useSelector((state) => { - let portfolios = state.objects.project[state.currentProjectId] - ? state.objects.project[state.currentProjectId].portfolioIds.map((t) => state.objects.portfolio[t]) - : [] - if (portfolios.filter((t) => !t).length > 0) { - portfolios = [] - } - - return { - currentProjectId: state.currentProjectId, - currentPortfolioId: state.currentPortfolioId, - portfolios, - } - }) +const PortfolioListContainer = () => { + const currentProjectId = useActiveProject()?._id + const currentPortfolioId = useActivePortfolio()?._id + const portfolios = usePortfolios(currentProjectId) const dispatch = useDispatch() - const history = useHistory() + const [isVisible, setVisible] = useState(false) + const router = useRouter() const actions = { - onNewPortfolio: () => { - dispatch(openNewPortfolioModal()) - }, + onNewPortfolio: () => setVisible(true), onChoosePortfolio: (portfolioId) => { dispatch(setCurrentPortfolio(portfolioId)) }, @@ -37,11 +26,32 @@ const PortfolioListContainer = (props) => { const state = await getState(dispatch) dispatch(deletePortfolio(id)) dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0])) - history.push(`/projects/${state.currentProjectId}`) + router.push(`/projects/${state.currentProjectId}`) } }, } - return <PortfolioListComponent {...props} {...state} {...actions} /> + const callback = (name, targets) => { + if (name) { + dispatch( + addPortfolio({ + name, + targets, + }) + ) + } + setVisible(false) + } + return ( + <> + <PortfolioListComponent + currentProjectId={currentProjectId} + currentPortfolioId={currentPortfolioId} + portfolios={portfolios} + {...actions} + /> + <NewPortfolioModalComponent callback={callback} show={isVisible} /> + </> + ) } export default PortfolioListContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js index 35e6c52b..06c7f0f7 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js @@ -1,11 +1,11 @@ import React from 'react' -import { useLocation } from 'react-router-dom' +import { useRouter } from 'next/router' import ProjectSidebarComponent from '../../../../components/app/sidebars/project/ProjectSidebarComponent' import { isCollapsible } from '../../../../util/sidebar-space' const ProjectSidebarContainer = (props) => { - const location = useLocation() - return <ProjectSidebarComponent collapsible={isCollapsible(location)} {...props} /> + const router = useRouter() + return <ProjectSidebarComponent collapsible={isCollapsible(router)} {...props} /> } export default ProjectSidebarContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js index 18d0735e..e1be51dc 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js @@ -1,28 +1,27 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' +import React, { useState } from 'react' +import { useDispatch } from 'react-redux' import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent' -import { openNewScenarioModal } from '../../../../actions/modals/scenarios' -import { deleteScenario, setCurrentScenario } from '../../../../actions/scenarios' -import { setCurrentPortfolio } from '../../../../actions/portfolios' +import { addScenario, deleteScenario, setCurrentScenario } from '../../../../redux/actions/scenarios' +import { setCurrentPortfolio } from '../../../../redux/actions/portfolios' +import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent' +import { useProjectTopologies } from '../../../../data/topology' +import { useActiveScenario, useActiveProject, useScenarios } from '../../../../data/project' +import { useSchedulers, useTraces } from '../../../../data/experiments' -const ScenarioListContainer = ({ portfolioId, children }) => { - const currentProjectId = useSelector((state) => state.currentProjectId) - const currentScenarioId = useSelector((state) => state.currentScenarioId) - const scenarios = useSelector((state) => { - let scenarios = state.objects.portfolio[portfolioId] - ? state.objects.portfolio[portfolioId].scenarioIds.map((t) => state.objects.scenario[t]) - : [] - if (scenarios.filter((t) => !t).length > 0) { - scenarios = [] - } - - return scenarios - }) +const ScenarioListContainer = ({ portfolioId }) => { + const currentProjectId = useActiveProject()?._id + const currentScenarioId = useActiveScenario()?._id + const scenarios = useScenarios(portfolioId) + const topologies = useProjectTopologies() + const traces = useTraces() + const schedulers = useSchedulers() const dispatch = useDispatch() + const [isVisible, setVisible] = useState(false) + const onNewScenario = (currentPortfolioId) => { dispatch(setCurrentPortfolio(currentPortfolioId)) - dispatch(openNewScenarioModal()) + setVisible(true) } const onChooseScenario = (portfolioId, scenarioId) => { dispatch(setCurrentScenario(portfolioId, scenarioId)) @@ -32,17 +31,43 @@ const ScenarioListContainer = ({ portfolioId, children }) => { dispatch(deleteScenario(id)) } } + const callback = (name, portfolioId, trace, topology, operational) => { + if (name) { + dispatch( + addScenario({ + portfolioId, + name, + trace, + topology, + operational, + }) + ) + } + + setVisible(false) + } return ( - <ScenarioListComponent - portfolioId={portfolioId} - currentProjectId={currentProjectId} - currentScenarioId={currentScenarioId} - scenarios={scenarios} - onNewScenario={onNewScenario} - onChooseScenario={onChooseScenario} - onDeleteScenario={onDeleteScenario} - /> + <> + <ScenarioListComponent + portfolioId={portfolioId} + currentProjectId={currentProjectId} + currentScenarioId={currentScenarioId} + scenarios={scenarios} + onNewScenario={onNewScenario} + onChooseScenario={onChooseScenario} + onDeleteScenario={onDeleteScenario} + /> + <NewScenarioModalComponent + show={isVisible} + currentPortfolioId={portfolioId} + currentPortfolioScenarioIds={scenarios.map((s) => s._id)} + traces={traces} + schedulers={schedulers} + topologies={topologies} + callback={callback} + /> + </> ) } diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js index 954284a6..266ca495 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js @@ -1,53 +1,64 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' +import React, { useState } from 'react' +import { useDispatch } from 'react-redux' import TopologyListComponent from '../../../../components/app/sidebars/project/TopologyListComponent' -import { setCurrentTopology } from '../../../../actions/topology/building' -import { openNewTopologyModal } from '../../../../actions/modals/topology' -import { useHistory } from 'react-router-dom' +import { setCurrentTopology } from '../../../../redux/actions/topology/building' +import { useRouter } from 'next/router' import { getState } from '../../../../util/state-utils' -import { deleteTopology } from '../../../../actions/topologies' +import { addTopology, deleteTopology } from '../../../../redux/actions/topologies' +import NewTopologyModalComponent from '../../../../components/modals/custom-components/NewTopologyModalComponent' +import { useActiveTopology, useProjectTopologies } from '../../../../data/topology' const TopologyListContainer = () => { const dispatch = useDispatch() - const history = useHistory() - - const topologies = useSelector((state) => { - let topologies = state.objects.project[state.currentProjectId] - ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t]) - : [] - if (topologies.filter((t) => !t).length > 0) { - topologies = [] - } - - return topologies - }) - const currentTopologyId = useSelector((state) => state.currentTopologyId) + const router = useRouter() + const topologies = useProjectTopologies() + const currentTopologyId = useActiveTopology()?._id + const [isVisible, setVisible] = useState(false) const onChooseTopology = async (id) => { dispatch(setCurrentTopology(id)) const state = await getState(dispatch) - history.push(`/projects/${state.currentProjectId}`) - } - const onNewTopology = () => { - dispatch(openNewTopologyModal()) + router.push(`/projects/${state.currentProjectId}`) } const onDeleteTopology = async (id) => { if (id) { const state = await getState(dispatch) dispatch(deleteTopology(id)) dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0])) - history.push(`/projects/${state.currentProjectId}`) + router.push(`/projects/${state.currentProjectId}`) + } + } + const onCreateTopology = (name) => { + if (name) { + dispatch(addTopology(name, undefined)) + } + setVisible(false) + } + const onDuplicateTopology = (name, id) => { + if (name) { + dispatch(addTopology(name, id)) } + setVisible(false) } + const onCancel = () => setVisible(false) return ( - <TopologyListComponent - topologies={topologies} - currentTopologyId={currentTopologyId} - onChooseTopology={onChooseTopology} - onNewTopology={onNewTopology} - onDeleteTopology={onDeleteTopology} - /> + <> + <TopologyListComponent + topologies={topologies} + currentTopologyId={currentTopologyId} + onChooseTopology={onChooseTopology} + onNewTopology={() => setVisible(true)} + onDeleteTopology={onDeleteTopology} + /> + <NewTopologyModalComponent + show={isVisible} + topologies={topologies} + onCreateTopology={onCreateTopology} + onDuplicateTopology={onDuplicateTopology} + onCancel={onCancel} + /> + </> ) } diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js index ea36539c..96f42a44 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js @@ -4,7 +4,7 @@ import { cancelNewRoomConstruction, finishNewRoomConstruction, startNewRoomConstruction, -} from '../../../../../actions/topology/building' +} from '../../../../../redux/actions/topology/building' import StartNewRoomConstructionComponent from '../../../../../components/app/sidebars/topology/building/NewRoomConstructionComponent' const NewRoomConstructionButton = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js index 46862472..ea250767 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch } from 'react-redux' -import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' +import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level' import BackToRackComponent from '../../../../../components/app/sidebars/topology/machine/BackToRackComponent' const BackToRackContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js index 1510a436..54e406f4 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js @@ -1,11 +1,34 @@ -import React from 'react' +import React, { useState } from 'react' import { useDispatch } from 'react-redux' -import { openDeleteMachineModal } from '../../../../../actions/modals/topology' -import DeleteMachineComponent from '../../../../../components/app/sidebars/topology/machine/DeleteMachineComponent' +import ConfirmationModal from '../../../../../components/modals/ConfirmationModal' +import { deleteMachine } from '../../../../../redux/actions/topology/machine' +import { Button } from 'reactstrap' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faTrash } from '@fortawesome/free-solid-svg-icons' -const DeleteMachineContainer = (props) => { +const DeleteMachineContainer = () => { const dispatch = useDispatch() - return <DeleteMachineComponent {...props} onClick={() => dispatch(openDeleteMachineModal())} /> + const [isVisible, setVisible] = useState(false) + const callback = (isConfirmed) => { + if (isConfirmed) { + dispatch(deleteMachine()) + } + setVisible(false) + } + return ( + <> + <Button color="danger" outline block onClick={() => setVisible(true)}> + <FontAwesomeIcon icon={faTrash} className="mr-2" /> + Delete this machine + </Button> + <ConfirmationModal + title="Delete this machine" + message="Are you sure you want to delete this machine?" + show={isVisible} + callback={callback} + /> + </> + ) } export default DeleteMachineContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js index 6f4285b2..9cbb32c5 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js @@ -1,10 +1,9 @@ import React from 'react' import { useSelector } from 'react-redux' -import MachineNameComponent from '../../../../../components/app/sidebars/topology/machine/MachineNameComponent' -const MachineNameContainer = (props) => { +const MachineNameContainer = () => { const position = useSelector((state) => state.interactionLevel.position) - return <MachineNameComponent {...props} position={position} /> + return <h2>Machine at slot {position}</h2> } export default MachineNameContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js index 3795cdff..0f85aa76 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { addUnit } from '../../../../../actions/topology/machine' +import { addUnit } from '../../../../../redux/actions/topology/machine' import UnitAddComponent from '../../../../../components/app/sidebars/topology/machine/UnitAddComponent' const UnitAddContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js index 3d24859e..acb16a21 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { deleteUnit } from '../../../../../actions/topology/machine' +import { deleteUnit } from '../../../../../redux/actions/topology/machine' import UnitComponent from '../../../../../components/app/sidebars/topology/machine/UnitComponent' const UnitContainer = ({ unitId, unitType }) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js index 3708e33e..c2a0fc48 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch } from 'react-redux' -import { addPrefab } from '../../../../../actions/prefabs' +import { addPrefab } from '../../../../../redux/actions/prefabs' import AddPrefabComponent from '../../../../../components/app/sidebars/topology/rack/AddPrefabComponent' const AddPrefabContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js index 93bb749f..a98728a6 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch } from 'react-redux' -import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' +import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level' import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent' const BackToRoomContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js index de46e491..4463530e 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js @@ -1,11 +1,34 @@ -import React from 'react' +import React, { useState } from 'react' import { useDispatch } from 'react-redux' -import { openDeleteRackModal } from '../../../../../actions/modals/topology' -import DeleteRackComponent from '../../../../../components/app/sidebars/topology/rack/DeleteRackComponent' +import ConfirmationModal from '../../../../../components/modals/ConfirmationModal' +import { deleteRack } from '../../../../../redux/actions/topology/rack' +import { Button } from 'reactstrap' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faTrash } from '@fortawesome/free-solid-svg-icons' -const DeleteRackContainer = (props) => { +const DeleteRackContainer = () => { const dispatch = useDispatch() - return <DeleteRackComponent {...props} onClick={() => dispatch(openDeleteRackModal())} /> + const [isVisible, setVisible] = useState(false) + const callback = (isConfirmed) => { + if (isConfirmed) { + dispatch(deleteRack()) + } + setVisible(false) + } + return ( + <> + <Button color="danger" outline block onClick={() => setVisible(true)}> + <FontAwesomeIcon icon={faTrash} className="mr-2" /> + Delete this rack + </Button> + <ConfirmationModal + title="Delete this rack" + message="Are you sure you want to delete this rack?" + show={isVisible} + callback={callback} + /> + </> + ) } export default DeleteRackContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js index 5bb2c784..2134e411 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch } from 'react-redux' -import { addMachine } from '../../../../../actions/topology/rack' +import { addMachine } from '../../../../../redux/actions/topology/rack' import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent' const EmptySlotContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js index 149b4d18..7d8e32c1 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { goFromRackToMachine } from '../../../../../actions/interaction-level' +import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level' import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent' const MachineContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js index 7dfdb473..eaa1e78e 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js @@ -1,14 +1,33 @@ -import React from 'react' +import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { openEditRackNameModal } from '../../../../../actions/modals/topology' -import RackNameComponent from '../../../../../components/app/sidebars/topology/rack/RackNameComponent' +import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent' +import TextInputModal from '../../../../../components/modals/TextInputModal' +import { editRackName } from '../../../../../redux/actions/topology/rack' -const RackNameContainer = (props) => { +const RackNameContainer = () => { + const [isVisible, setVisible] = useState(false) const rackName = useSelector( (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name ) const dispatch = useDispatch() - return <RackNameComponent {...props} rackName={rackName} onEdit={() => dispatch(openEditRackNameModal())} /> + const callback = (name) => { + if (name) { + dispatch(editRackName(name)) + } + setVisible(false) + } + return ( + <> + <NameComponent name={rackName} onEdit={() => setVisible(true)} /> + <TextInputModal + title="Edit rack name" + label="Rack name" + show={isVisible} + initialValue={rackName} + callback={callback} + /> + </> + ) } export default RackNameContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js index a48bf0a7..9fa1e95f 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch } from 'react-redux' -import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' +import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level' import BackToBuildingComponent from '../../../../../components/app/sidebars/topology/room/BackToBuildingComponent' const BackToBuildingContainer = () => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js index 6a80e9b0..0fbbb036 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js @@ -1,12 +1,34 @@ -import React from 'react' +import React, { useState } from 'react' import { useDispatch } from 'react-redux' -import { openDeleteRoomModal } from '../../../../../actions/modals/topology' -import DeleteRoomComponent from '../../../../../components/app/sidebars/topology/room/DeleteRoomComponent' +import { Button } from 'reactstrap' +import ConfirmationModal from '../../../../../components/modals/ConfirmationModal' +import { deleteRoom } from '../../../../../redux/actions/topology/room' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faTrash } from '@fortawesome/free-solid-svg-icons' -const DeleteRoomContainer = (props) => { +const DeleteRoomContainer = () => { const dispatch = useDispatch() - const onClick = () => dispatch(openDeleteRoomModal()) - return <DeleteRoomComponent {...props} onClick={onClick} /> + const [isVisible, setVisible] = useState(false) + const callback = (isConfirmed) => { + if (isConfirmed) { + dispatch(deleteRoom()) + } + setVisible(false) + } + return ( + <> + <Button color="danger" outline block onClick={() => setVisible(true)}> + <FontAwesomeIcon icon={faTrash} className="mr-2" /> + Delete this room + </Button> + <ConfirmationModal + title="Delete this room" + message="Are you sure you want to delete this room?" + show={isVisible} + callback={callback} + /> + </> + ) } export default DeleteRoomContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js index 37027fc5..ec4f586b 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js @@ -1,9 +1,11 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { finishRoomEdit, startRoomEdit } from '../../../../../actions/topology/building' -import EditRoomComponent from '../../../../../components/app/sidebars/topology/room/EditRoomComponent' +import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building' +import { Button } from 'reactstrap' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faCheck, faPencilAlt } from '@fortawesome/free-solid-svg-icons' -const EditRoomContainer = (props) => { +const EditRoomContainer = () => { const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1') const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode) @@ -11,14 +13,22 @@ const EditRoomContainer = (props) => { const onEdit = () => dispatch(startRoomEdit()) const onFinish = () => dispatch(finishRoomEdit()) - return ( - <EditRoomComponent - {...props} - onEdit={onEdit} - onFinish={onFinish} - isEditing={isEditing} - isInRackConstructionMode={isInRackConstructionMode} - /> + return isEditing ? ( + <Button color="info" outline block onClick={onFinish}> + <FontAwesomeIcon icon={faCheck} className="mr-2" /> + Finish editing room + </Button> + ) : ( + <Button + color="info" + outline + block + disabled={isInRackConstructionMode} + onClick={() => (isInRackConstructionMode ? undefined : onEdit())} + > + <FontAwesomeIcon icon={faPencilAlt} className="mr-2" /> + Edit the tiles of this room + </Button> ) } diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js index 726e9d37..79584e98 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { startRackConstruction, stopRackConstruction } from '../../../../../actions/topology/room' +import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room' import RackConstructionComponent from '../../../../../components/app/sidebars/topology/room/RackConstructionComponent' const RackConstructionContainer = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js index 1f53aeb6..3b35a849 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js @@ -1,13 +1,31 @@ -import React from 'react' +import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { openEditRoomNameModal } from '../../../../../actions/modals/topology' -import RoomNameComponent from '../../../../../components/app/sidebars/topology/room/RoomNameComponent' +import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent' +import TextInputModal from '../../../../../components/modals/TextInputModal' +import { editRoomName } from '../../../../../redux/actions/topology/room' -const RoomNameContainer = (props) => { +const RoomNameContainer = () => { + const [isVisible, setVisible] = useState(false) const roomName = useSelector((state) => state.objects.room[state.interactionLevel.roomId].name) const dispatch = useDispatch() - const onEdit = () => dispatch(openEditRoomNameModal()) - return <RoomNameComponent {...props} onEdit={onEdit} roomName={roomName} /> + const callback = (name) => { + if (name) { + dispatch(editRoomName(name)) + } + setVisible(false) + } + return ( + <> + <NameComponent name={roomName} onEdit={() => setVisible(true)} /> + <TextInputModal + title="Edit room name" + label="Room name" + show={isVisible} + initialValue={roomName} + callback={callback} + /> + </> + ) } export default RoomNameContainer |