From f119fc78dda4d1e828dde04f378a63a93e3a0a7e Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Thu, 2 Jul 2020 18:39:28 +0200
Subject: Add current progress on frontend port

---
 frontend/src/pages/App.js         | 66 +++++++++++++++++----------------------
 frontend/src/pages/Experiments.js | 30 ++++++------------
 frontend/src/pages/Home.js        | 22 ++++++-------
 frontend/src/pages/NotFound.js    |  2 +-
 frontend/src/pages/Profile.js     | 19 +++++------
 frontend/src/pages/Simulations.js | 19 +++++------
 6 files changed, 66 insertions(+), 92 deletions(-)

(limited to 'frontend/src/pages')

diff --git a/frontend/src/pages/App.js b/frontend/src/pages/App.js
index c2b9bd51..3034f7ff 100644
--- a/frontend/src/pages/App.js
+++ b/frontend/src/pages/App.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { ShortcutManager } from 'react-shortcuts'
 import { openExperimentSucceeded } from '../actions/experiments'
 import { openSimulationSucceeded } from '../actions/simulations'
-import { resetCurrentDatacenter } from '../actions/topology/building'
+import { resetCurrentTopology } from '../actions/topology/building'
 import ToolPanelComponent from '../components/app/map/controls/ToolPanelComponent'
 import LoadingScreen from '../components/app/map/LoadingScreen'
 import SimulationSidebarComponent from '../components/app/sidebars/simulation/SimulationSidebarComponent'
@@ -20,6 +20,8 @@ import DeleteRoomModal from '../containers/modals/DeleteRoomModal'
 import EditRackNameModal from '../containers/modals/EditRackNameModal'
 import EditRoomNameModal from '../containers/modals/EditRoomNameModal'
 import KeymapConfiguration from '../shortcuts/keymap'
+import ChangeTopologyModal from '../containers/modals/ChangeTopologyModal'
+import { openChangeTopologyModal } from '../actions/modals/topology'
 
 const shortcutManager = new ShortcutManager(KeymapConfiguration)
 
@@ -29,18 +31,16 @@ class AppComponent extends React.Component {
         inSimulation: PropTypes.bool,
         experimentId: PropTypes.number,
         simulationName: PropTypes.string,
+        onViewTopologies: PropTypes.func,
     }
     static childContextTypes = {
         shortcuts: PropTypes.object.isRequired,
     }
 
     componentDidMount() {
-        this.props.resetCurrentDatacenter()
+        // TODO this.props.resetCurrentTopology()
         if (this.props.inSimulation) {
-            this.props.openExperimentSucceeded(
-                this.props.simulationId,
-                this.props.experimentId,
-            )
+            this.props.openExperimentSucceeded(this.props.simulationId, this.props.experimentId)
             return
         }
         this.props.openSimulationSucceeded(this.props.simulationId)
@@ -55,66 +55,58 @@ class AppComponent extends React.Component {
     render() {
         return (
             <DocumentTitle
-                title={
-                    this.props.simulationName
-                        ? this.props.simulationName + ' - OpenDC'
-                        : 'Simulation - OpenDC'
-                }
+                title={this.props.simulationName ? this.props.simulationName + ' - OpenDC' : 'Simulation - OpenDC'}
             >
                 <div className="page-container full-height">
                     <AppNavbar
                         simulationId={this.props.simulationId}
                         inSimulation={true}
                         fullWidth={true}
+                        onViewTopologies={this.props.onViewTopologies}
                     />
-                    {this.props.datacenterIsLoading ? (
+                    {this.props.topologyIsLoading ? (
                         <div className="full-height d-flex align-items-center justify-content-center">
-                            <LoadingScreen/>
+                            <LoadingScreen />
                         </div>
                     ) : (
                         <div className="full-height">
-                            <MapStage/>
-                            <ScaleIndicatorContainer/>
-                            <ToolPanelComponent/>
-                            <TopologySidebar/>
-                            {this.props.inSimulation ? <TimelineContainer/> : undefined}
-                            {this.props.inSimulation ? (
-                                <SimulationSidebarComponent/>
-                            ) : (
-                                undefined
-                            )}
+                            <MapStage />
+                            <ScaleIndicatorContainer />
+                            <ToolPanelComponent />
+                            <TopologySidebar />
+                            {this.props.inSimulation ? <TimelineContainer /> : undefined}
+                            {this.props.inSimulation ? <SimulationSidebarComponent /> : undefined}
                         </div>
                     )}
-                    <EditRoomNameModal/>
-                    <DeleteRoomModal/>
-                    <EditRackNameModal/>
-                    <DeleteRackModal/>
-                    <DeleteMachineModal/>
+                    <ChangeTopologyModal />
+                    <EditRoomNameModal />
+                    <DeleteRoomModal />
+                    <EditRackNameModal />
+                    <DeleteRackModal />
+                    <DeleteMachineModal />
                 </div>
             </DocumentTitle>
         )
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
     let simulationName = undefined
-    if (
-        state.currentSimulationId !== -1 &&
-        state.objects.simulation[state.currentSimulationId]
-    ) {
+    if (state.currentSimulationId !== -1 && state.objects.simulation[state.currentSimulationId]) {
         simulationName = state.objects.simulation[state.currentSimulationId].name
     }
 
     return {
-        datacenterIsLoading: state.currentDatacenterId === -1,
+        topologyIsLoading: state.currentTopologyId === -1,
         simulationName,
     }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
     return {
-        resetCurrentDatacenter: () => dispatch(resetCurrentDatacenter()),
-        openSimulationSucceeded: id => dispatch(openSimulationSucceeded(id)),
+        resetCurrentTopology: () => dispatch(resetCurrentTopology()),
+        openSimulationSucceeded: (id) => dispatch(openSimulationSucceeded(id)),
+        onViewTopologies: () => dispatch(openChangeTopologyModal()),
         openExperimentSucceeded: (simulationId, experimentId) =>
             dispatch(openExperimentSucceeded(simulationId, experimentId)),
     }
diff --git a/frontend/src/pages/Experiments.js b/frontend/src/pages/Experiments.js
index 67e3fd77..97e63f44 100644
--- a/frontend/src/pages/Experiments.js
+++ b/frontend/src/pages/Experiments.js
@@ -30,28 +30,21 @@ class ExperimentsComponent extends React.Component {
                 }
             >
                 <div className="full-height">
-                    <AppNavbar
-                        simulationId={this.props.simulationId}
-                        inSimulation={true}
-                        fullWidth={true}
-                    />
+                    <AppNavbar simulationId={this.props.simulationId} inSimulation={true} fullWidth={true} />
                     <div className="container text-page-container full-height">
-                        <ExperimentListContainer/>
-                        <NewExperimentButtonContainer/>
+                        <ExperimentListContainer />
+                        <NewExperimentButtonContainer />
                     </div>
-                    <NewExperimentModal/>
+                    <NewExperimentModal />
                 </div>
             </DocumentTitle>
         )
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
     let simulationName = undefined
-    if (
-        state.currentSimulationId !== -1 &&
-        state.objects.simulation[state.currentSimulationId]
-    ) {
+    if (state.currentSimulationId !== -1 && state.objects.simulation[state.currentSimulationId]) {
         simulationName = state.objects.simulation[state.currentSimulationId].name
     }
 
@@ -60,16 +53,13 @@ const mapStateToProps = state => {
     }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
     return {
-        storeSimulationId: id => dispatch(openSimulationSucceeded(id)),
-        fetchExperimentsOfSimulation: id =>
-            dispatch(fetchExperimentsOfSimulation(id)),
+        storeSimulationId: (id) => dispatch(openSimulationSucceeded(id)),
+        fetchExperimentsOfSimulation: (id) => dispatch(fetchExperimentsOfSimulation(id)),
     }
 }
 
-const Experiments = connect(mapStateToProps, mapDispatchToProps)(
-    ExperimentsComponent,
-)
+const Experiments = connect(mapStateToProps, mapDispatchToProps)(ExperimentsComponent)
 
 export default Experiments
diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
index e69c2049..1bdfc5c7 100644
--- a/frontend/src/pages/Home.js
+++ b/frontend/src/pages/Home.js
@@ -21,7 +21,7 @@ class Home extends React.Component {
         const scrollOffset = 60
         jQuery('#navbar')
             .find('li a')
-            .click(function(e) {
+            .click(function (e) {
                 if (jQuery(e.target).parents('.auth-links').length > 0) {
                     return
                 }
@@ -42,17 +42,17 @@ class Home extends React.Component {
     render() {
         return (
             <div>
-                <HomeNavbar/>
+                <HomeNavbar />
                 <div className="body-wrapper page-container">
-                    <JumbotronHeader/>
-                    <IntroSection/>
-                    <StakeholderSection/>
-                    <ModelingSection/>
-                    <SimulationSection/>
-                    <TechnologiesSection/>
-                    <TeamSection/>
-                    <ContactSection/>
-                    <DocumentTitle title="OpenDC"/>
+                    <JumbotronHeader />
+                    <IntroSection />
+                    <StakeholderSection />
+                    <ModelingSection />
+                    <SimulationSection />
+                    <TechnologiesSection />
+                    <TeamSection />
+                    <ContactSection />
+                    <DocumentTitle title="OpenDC" />
                 </div>
             </div>
         )
diff --git a/frontend/src/pages/NotFound.js b/frontend/src/pages/NotFound.js
index 959cceec..f72c7d01 100644
--- a/frontend/src/pages/NotFound.js
+++ b/frontend/src/pages/NotFound.js
@@ -6,7 +6,7 @@ import './NotFound.css'
 const NotFound = () => (
     <DocumentTitle title="Page Not Found - OpenDC">
         <div className="not-found-backdrop">
-            <TerminalWindow/>
+            <TerminalWindow />
         </div>
     </DocumentTitle>
 )
diff --git a/frontend/src/pages/Profile.js b/frontend/src/pages/Profile.js
index e6d2aa7b..45b48247 100644
--- a/frontend/src/pages/Profile.js
+++ b/frontend/src/pages/Profile.js
@@ -8,28 +8,23 @@ import DeleteProfileModal from '../containers/modals/DeleteProfileModal'
 const ProfileContainer = ({ onDelete }) => (
     <DocumentTitle title="My Profile - OpenDC">
         <div className="full-height">
-            <AppNavbar inSimulation={false} fullWidth={false}/>
+            <AppNavbar inSimulation={false} fullWidth={false} />
             <div className="container text-page-container full-height">
-                <button
-                    className="btn btn-danger mb-2 ml-auto mr-auto"
-                    style={{ maxWidth: 300 }}
-                    onClick={onDelete}
-                >
+                <button className="btn btn-danger mb-2 ml-auto mr-auto" style={{ maxWidth: 300 }} onClick={onDelete}>
                     Delete my account on OpenDC
                 </button>
                 <p className="text-muted text-center">
-                    This does not delete your Google account, but simply disconnects it
-                    from the OpenDC platform and deletes any simulation info that is
-                    associated with you (simulations you own and any authorizations you
-                    may have on other projects).
+                    This does not delete your Google account, but simply disconnects it from the OpenDC platform and
+                    deletes any simulation info that is associated with you (simulations you own and any authorizations
+                    you may have on other projects).
                 </p>
             </div>
-            <DeleteProfileModal/>
+            <DeleteProfileModal />
         </div>
     </DocumentTitle>
 )
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
     return {
         onDelete: () => dispatch(openDeleteProfileModal()),
     }
diff --git a/frontend/src/pages/Simulations.js b/frontend/src/pages/Simulations.js
index 116eb1b2..ce2386fd 100644
--- a/frontend/src/pages/Simulations.js
+++ b/frontend/src/pages/Simulations.js
@@ -18,29 +18,26 @@ class SimulationsContainer extends React.Component {
         return (
             <DocumentTitle title="My Simulations - OpenDC">
                 <div className="full-height">
-                    <AppNavbar inSimulation={false} fullWidth={false}/>
+                    <AppNavbar inSimulation={false} fullWidth={false} />
                     <div className="container text-page-container full-height">
-                        <SimulationFilterPanel/>
-                        <VisibleSimulationList/>
-                        <NewSimulationButtonContainer/>
+                        <SimulationFilterPanel />
+                        <VisibleSimulationList />
+                        <NewSimulationButtonContainer />
                     </div>
-                    <NewSimulationModal/>
+                    <NewSimulationModal />
                 </div>
             </DocumentTitle>
         )
     }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
     return {
-        fetchAuthorizationsOfCurrentUser: () =>
-            dispatch(fetchAuthorizationsOfCurrentUser()),
+        fetchAuthorizationsOfCurrentUser: () => dispatch(fetchAuthorizationsOfCurrentUser()),
         openNewSimulationModal: () => dispatch(openNewSimulationModal()),
     }
 }
 
-const Simulations = connect(undefined, mapDispatchToProps)(
-    SimulationsContainer,
-)
+const Simulations = connect(undefined, mapDispatchToProps)(SimulationsContainer)
 
 export default Simulations
-- 
cgit v1.2.3