diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/containers')
52 files changed, 520 insertions, 581 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 diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js index 54605775..d8083d89 100644 --- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js +++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js @@ -1,44 +1,20 @@ import React from 'react' -import GoogleLogin from 'react-google-login' -import { useDispatch } from 'react-redux' -import { logIn } from '../../actions/auth' -import config from '../../config' +import { Button } from 'reactstrap' +import { useAuth } from '../../auth' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faSignInAlt } from '@fortawesome/free-solid-svg-icons' -const Login = (props) => { - const { visible } = props - const dispatch = useDispatch() - - const onLogin = (payload) => dispatch(logIn(payload)) - const onAuthResponse = (response) => { - onLogin({ - email: response.getBasicProfile().getEmail(), - givenName: response.getBasicProfile().getGivenName(), - familyName: response.getBasicProfile().getFamilyName(), - googleId: response.googleId, - authToken: response.getAuthResponse().id_token, - expiresAt: response.getAuthResponse().expires_at, - }) - } - const onAuthFailure = (error) => { - // TODO Show error alert - console.error(error) - } +function Login({ visible, className }) { + const { loginWithRedirect } = useAuth() if (!visible) { return <span /> } return ( - <GoogleLogin - clientId={config.OAUTH_CLIENT_ID} - onSuccess={onAuthResponse} - onFailure={onAuthFailure} - render={(renderProps) => ( - <span onClick={renderProps.onClick} className="login btn btn-primary"> - <span className="fa fa-google" /> Login with Google - </span> - )} - /> + <Button color="primary" onClick={() => loginWithRedirect()} className={className}> + <FontAwesomeIcon icon={faSignInAlt} /> Sign In + </Button> ) } diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js index 66f0f6db..37705c5d 100644 --- a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js +++ b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js @@ -1,11 +1,10 @@ import React from 'react' -import { useDispatch } from 'react-redux' -import { logOut } from '../../actions/auth' import LogoutButton from '../../components/navigation/LogoutButton' +import { useAuth } from '../../auth' const Logout = (props) => { - const dispatch = useDispatch() - return <LogoutButton {...props} onLogout={() => dispatch(logOut())} /> + const { logout } = useAuth() + return <LogoutButton {...props} onLogout={() => logout({ returnTo: window.location.origin })} /> } export default Logout diff --git a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js index 291c0068..70f5b884 100644 --- a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js +++ b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js @@ -1,9 +1,9 @@ import React from 'react' -import { useSelector } from 'react-redux' +import { useAuth } from '../../auth' function ProfileName() { - const name = useSelector((state) => `${state.auth.givenName} ${state.auth.familyName}`) - return <span>{name}</span> + const { isLoading, user } = useAuth() + return isLoading ? <span>Loading...</span> : <span>{user.name}</span> } export default ProfileName diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js deleted file mode 100644 index 33b2612f..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeDeleteMachineModal } from '../../actions/modals/topology' -import { deleteMachine } from '../../actions/topology/machine' -import ConfirmationModal from '../../components/modals/ConfirmationModal' - -const DeleteMachineModal = () => { - const dispatch = useDispatch() - const callback = (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteMachine()) - } - dispatch(closeDeleteMachineModal()) - } - const visible = useSelector((state) => state.modals.deleteMachineModalVisible) - return ( - <ConfirmationModal - title="Delete this machine" - message="Are you sure you want to delete this machine?" - show={visible} - callback={callback} - /> - ) -} - -export default DeleteMachineModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js deleted file mode 100644 index 93a38642..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeDeleteProfileModal } from '../../actions/modals/profile' -import { deleteCurrentUser } from '../../actions/users' -import ConfirmationModal from '../../components/modals/ConfirmationModal' - -const DeleteProfileModal = () => { - const visible = useSelector((state) => state.modals.deleteProfileModalVisible) - - const dispatch = useDispatch() - const callback = (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteCurrentUser()) - } - dispatch(closeDeleteProfileModal()) - } - return ( - <ConfirmationModal - title="Delete my account" - message="Are you sure you want to delete your OpenDC account?" - show={visible} - callback={callback} - /> - ) -} - -export default DeleteProfileModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js deleted file mode 100644 index ca76fd04..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeDeleteRackModal } from '../../actions/modals/topology' -import { deleteRack } from '../../actions/topology/rack' -import ConfirmationModal from '../../components/modals/ConfirmationModal' - -const DeleteRackModal = (props) => { - const visible = useSelector((state) => state.modals.deleteRackModalVisible) - const dispatch = useDispatch() - const callback = (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteRack()) - } - dispatch(closeDeleteRackModal()) - } - return ( - <ConfirmationModal - title="Delete this rack" - message="Are you sure you want to delete this rack?" - show={visible} - callback={callback} - {...props} - /> - ) -} - -export default DeleteRackModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js deleted file mode 100644 index 9a7be6a6..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeDeleteRoomModal } from '../../actions/modals/topology' -import { deleteRoom } from '../../actions/topology/room' -import ConfirmationModal from '../../components/modals/ConfirmationModal' - -const DeleteRoomModal = (props) => { - const visible = useSelector((state) => state.modals.deleteRoomModalVisible) - - const dispatch = useDispatch() - const callback = (isConfirmed) => { - if (isConfirmed) { - dispatch(deleteRoom()) - } - dispatch(closeDeleteRoomModal()) - } - return ( - <ConfirmationModal - title="Delete this room" - message="Are you sure you want to delete this room?" - show={visible} - callback={callback} - {...props} - /> - ) -} - -export default DeleteRoomModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js b/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js deleted file mode 100644 index edb57217..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeEditRackNameModal } from '../../actions/modals/topology' -import { editRackName } from '../../actions/topology/rack' -import TextInputModal from '../../components/modals/TextInputModal' - -const EditRackNameModal = (props) => { - const { visible, previousName } = useSelector((state) => { - return { - visible: state.modals.editRackNameModalVisible, - previousName: - state.interactionLevel.mode === 'RACK' - ? state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name - : '', - } - }) - - const dispatch = useDispatch() - const callback = (name) => { - if (name) { - dispatch(editRackName(name)) - } - dispatch(closeEditRackNameModal()) - } - return ( - <TextInputModal - title="Edit rack name" - label="Rack name" - show={visible} - initialValue={previousName} - callback={callback} - {...props} - /> - ) -} - -export default EditRackNameModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js b/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js deleted file mode 100644 index a804c0b0..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeEditRoomNameModal } from '../../actions/modals/topology' -import { editRoomName } from '../../actions/topology/room' -import TextInputModal from '../../components/modals/TextInputModal' - -const EditRoomNameModal = (props) => { - const visible = useSelector((state) => state.modals.editRoomNameModalVisible) - const previousName = useSelector((state) => - state.interactionLevel.mode === 'ROOM' ? state.objects.room[state.interactionLevel.roomId].name : '' - ) - - const dispatch = useDispatch() - const callback = (name) => { - if (name) { - dispatch(editRoomName(name)) - } - dispatch(closeEditRoomNameModal()) - } - return ( - <TextInputModal - title="Edit room name" - label="Room name" - show={visible} - initialValue={previousName} - callback={callback} - {...props} - /> - ) -} -export default EditRoomNameModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js deleted file mode 100644 index b364ed4c..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeNewPortfolioModal } from '../../actions/modals/portfolios' -import NewPortfolioModalComponent from '../../components/modals/custom-components/NewPortfolioModalComponent' -import { addPortfolio } from '../../actions/portfolios' - -const NewPortfolioModal = (props) => { - const show = useSelector((state) => state.modals.newPortfolioModalVisible) - const dispatch = useDispatch() - const callback = (name, targets) => { - if (name) { - dispatch( - addPortfolio({ - name, - targets, - }) - ) - } - dispatch(closeNewPortfolioModal()) - } - return <NewPortfolioModalComponent {...props} callback={callback} show={show} /> -} - -export default NewPortfolioModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js deleted file mode 100644 index e63ba76b..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { closeNewProjectModal } from '../../actions/modals/projects' -import { addProject } from '../../actions/projects' -import TextInputModal from '../../components/modals/TextInputModal' - -const NewProjectModal = (props) => { - const visible = useSelector((state) => state.modals.newProjectModalVisible) - const dispatch = useDispatch() - const callback = (text) => { - if (text) { - dispatch(addProject(text)) - } - dispatch(closeNewProjectModal()) - } - return <TextInputModal title="New Project" label="Project title" show={visible} callback={callback} {...props} /> -} - -export default NewProjectModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js deleted file mode 100644 index b588b4bc..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import NewScenarioModalComponent from '../../components/modals/custom-components/NewScenarioModalComponent' -import { addScenario } from '../../actions/scenarios' -import { closeNewScenarioModal } from '../../actions/modals/scenarios' - -const NewScenarioModal = (props) => { - const topologies = useSelector(({ currentProjectId, objects }) => { - console.log(currentProjectId, objects) - - if (currentProjectId === '-1' || !objects.project[currentProjectId]) { - return [] - } - - const topologies = objects.project[currentProjectId].topologyIds.map((t) => objects.topology[t]) - - if (topologies.filter((t) => !t).length > 0) { - return [] - } - - return topologies - }) - const state = useSelector((state) => { - return { - show: state.modals.newScenarioModalVisible, - currentPortfolioId: state.currentPortfolioId, - currentPortfolioScenarioIds: - state.currentPortfolioId !== '-1' && state.objects.portfolio[state.currentPortfolioId] - ? state.objects.portfolio[state.currentPortfolioId].scenarioIds - : [], - traces: Object.values(state.objects.trace), - schedulers: Object.values(state.objects.scheduler), - } - }) - - const dispatch = useDispatch() - const callback = (name, portfolioId, trace, topology, operational) => { - if (name) { - dispatch( - addScenario({ - portfolioId, - name, - trace, - topology, - operational, - }) - ) - } - dispatch(closeNewScenarioModal()) - } - - return <NewScenarioModalComponent {...props} {...state} topologies={topologies} callback={callback} /> -} - -export default NewScenarioModal diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js deleted file mode 100644 index 2f81706e..00000000 --- a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import NewTopologyModalComponent from '../../components/modals/custom-components/NewTopologyModalComponent' -import { closeNewTopologyModal } from '../../actions/modals/topology' -import { addTopology } from '../../actions/topologies' - -const NewTopologyModal = () => { - const show = useSelector((state) => state.modals.changeTopologyModalVisible) - 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 dispatch = useDispatch() - const onCreateTopology = (name) => { - if (name) { - dispatch(addTopology(name, undefined)) - } - dispatch(closeNewTopologyModal()) - } - const onDuplicateTopology = (name, id) => { - if (name) { - dispatch(addTopology(name, id)) - } - dispatch(closeNewTopologyModal()) - } - const onCancel = () => { - dispatch(closeNewTopologyModal()) - } - - return ( - <NewTopologyModalComponent - show={show} - topologies={topologies} - onCreateTopology={onCreateTopology} - onDuplicateTopology={onDuplicateTopology} - onCancel={onCancel} - /> - ) -} - -export default NewTopologyModal diff --git a/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js b/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js index 42a44345..6742bc26 100644 --- a/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js @@ -1,11 +1,9 @@ import React from 'react' -import { useSelector } from 'react-redux' import AppNavbarComponent from '../../components/navigation/AppNavbarComponent' +import { useActiveProject } from '../../data/project' const AppNavbarContainer = (props) => { - const project = useSelector((state) => - state.currentProjectId !== '-1' ? state.objects.project[state.currentProjectId] : undefined - ) + const project = useActiveProject() return <AppNavbarComponent {...props} project={project} /> } diff --git a/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js b/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js deleted file mode 100644 index 26f95c55..00000000 --- a/opendc-web/opendc-web-ui/src/containers/projects/FilterLink.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { setAuthVisibilityFilter } from '../../actions/projects' -import FilterButton from '../../components/projects/FilterButton' - -const FilterLink = (props) => { - const active = useSelector((state) => state.projectList.authVisibilityFilter === props.filter) - const dispatch = useDispatch() - - return <FilterButton {...props} onClick={() => dispatch(setAuthVisibilityFilter(props.filter))} active={active} /> -} - -export default FilterLink diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js deleted file mode 100644 index b8f6fef5..00000000 --- a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectButtonContainer.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import { useDispatch } from 'react-redux' -import { openNewProjectModal } from '../../actions/modals/projects' -import NewProjectButtonComponent from '../../components/projects/NewProjectButtonComponent' - -const NewProjectButtonContainer = (props) => { - const dispatch = useDispatch() - return <NewProjectButtonComponent {...props} onClick={() => dispatch(openNewProjectModal())} /> -} - -export default NewProjectButtonContainer diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js new file mode 100644 index 00000000..e03b5c07 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js @@ -0,0 +1,35 @@ +import React, { useState } from 'react' +import { useDispatch } from 'react-redux' +import { addProject } from '../../redux/actions/projects' +import TextInputModal from '../../components/modals/TextInputModal' +import { Button } from 'reactstrap' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faPlus } from '@fortawesome/free-solid-svg-icons' + +/** + * A container for creating a new project. + */ +const NewProjectContainer = () => { + const [isVisible, setVisible] = useState(false) + const dispatch = useDispatch() + const callback = (text) => { + if (text) { + dispatch(addProject(text)) + } + setVisible(false) + } + + return ( + <> + <div className="bottom-btn-container"> + <Button color="primary" className="float-right" onClick={() => setVisible(true)}> + <FontAwesomeIcon icon={faPlus} className="mr-2" /> + New Project + </Button> + </div> + <TextInputModal title="New Project" label="Project title" show={isVisible} callback={callback} /> + </> + ) +} + +export default NewProjectContainer diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js index a13034e9..bdb422dc 100644 --- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js +++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch } from 'react-redux' -import { deleteProject } from '../../actions/projects' +import { deleteProject } from '../../redux/actions/projects' import ProjectActionButtons from '../../components/projects/ProjectActionButtons' const ProjectActions = (props) => { diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js new file mode 100644 index 00000000..6632a8b5 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js @@ -0,0 +1,34 @@ +import React from 'react' +import PropTypes from 'prop-types' +import ProjectList from '../../components/projects/ProjectList' +import { useAuth } from '../../auth' +import { useProjects } from '../../data/project' + +const getVisibleProjects = (projects, filter, userId) => { + switch (filter) { + case 'SHOW_ALL': + return projects + case 'SHOW_OWN': + return projects.filter((project) => + project.authorizations.some((a) => a.userId === userId && a.level === 'OWN') + ) + case 'SHOW_SHARED': + return projects.filter((project) => + project.authorizations.some((a) => a.userId === userId && a.level !== 'OWN') + ) + default: + return projects + } +} + +const ProjectListContainer = ({ filter }) => { + const { user } = useAuth() + const projects = useProjects() + return <ProjectList projects={getVisibleProjects(projects, filter, user?.sub)} /> +} + +ProjectListContainer.propTypes = { + filter: PropTypes.string.isRequired, +} + +export default ProjectListContainer diff --git a/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js b/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js deleted file mode 100644 index b869775c..00000000 --- a/opendc-web/opendc-web-ui/src/containers/projects/VisibleProjectAuthList.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { useSelector } from 'react-redux' -import ProjectList from '../../components/projects/ProjectAuthList' - -const getVisibleProjectAuths = (projectAuths, filter) => { - switch (filter) { - case 'SHOW_ALL': - return projectAuths - case 'SHOW_OWN': - return projectAuths.filter((projectAuth) => projectAuth.authorizationLevel === 'OWN') - case 'SHOW_SHARED': - return projectAuths.filter((projectAuth) => projectAuth.authorizationLevel !== 'OWN') - default: - return projectAuths - } -} - -const VisibleProjectAuthList = (props) => { - const authorizations = useSelector((state) => { - const denormalizedAuthorizations = state.projectList.authorizationsOfCurrentUser.map((authorizationIds) => { - const authorization = state.objects.authorization[authorizationIds] - authorization.user = state.objects.user[authorization.userId] - authorization.project = state.objects.project[authorization.projectId] - return authorization - }) - - return getVisibleProjectAuths(denormalizedAuthorizations, state.projectList.authVisibilityFilter) - }) - return <ProjectList {...props} authorizations={authorizations} /> -} - -export default VisibleProjectAuthList |