Implement dynamic web page document title change

8 files changed, 113 insertions, 62 deletions

diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js
index 9598513a..743b1f3c 100644
--- a/src/components/simulations/SimulationActionButtons.js
+++ b/src/components/simulations/SimulationActionButtons.js
@@ -13,7 +13,7 @@ const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
         </Link>
         <div
             className="btn btn-outline-success btn-sm mr-2"
-            title="View and edit collaborators"
+            title="View and edit collaborators (not supported yet)"
             onClick={() => onViewUsers(simulationId)}
         >
             <span className="fa fa-users"/>
diff --git a/src/components/timeline/Timeline.sass b/src/components/timeline/Timeline.sass
index ca1cc524..bfb1a4d7 100644
--- a/src/components/timeline/Timeline.sass
+++ b/src/components/timeline/Timeline.sass
@@ -45,6 +45,8 @@ $timeline-border: $border-width solid $gray-semi-dark
   border: $timeline-border
   overflow: hidden
 
+  pointer-events: all
+
   +border-radius($standard-border-radius)
 
   .play-btn
diff --git a/src/pages/App.js b/src/pages/App.js
index 8e74bfa5..8f46156b 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
+import DocumentTitle from "react-document-title";
 import {connect} from "react-redux";
 import {ShortcutManager} from "react-shortcuts";
 import {openExperimentSucceeded} from "../actions/experiments";
@@ -27,6 +28,7 @@ class AppComponent extends React.Component {
         simulationId: PropTypes.number.isRequired,
         inSimulation: PropTypes.bool,
         experimentId: PropTypes.number,
+        simulationName: PropTypes.string,
     };
     static childContextTypes = {
         shortcuts: PropTypes.object.isRequired
@@ -49,40 +51,50 @@ class AppComponent extends React.Component {
 
     render() {
         return (
-            <div className="page-container full-height">
-                <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
-                {this.props.datacenterIsLoading ?
-                    <div className="full-height d-flex align-items-center justify-content-center">
-                        <LoadingScreen/>
-                    </div> :
-                    <div className="full-height">
-                        <MapStage/>
-                        <ScaleIndicatorContainer/>
-                        <ToolPanelComponent/>
-                        <TopologySidebar/>
-                        {this.props.inSimulation ?
-                            <TimelineContainer/> :
-                            undefined
-                        }
-                        {this.props.inSimulation ?
-                            <SimulationSidebarComponent/> :
-                            undefined
-                        }
-                    </div>
-                }
-                <EditRoomNameModal/>
-                <DeleteRoomModal/>
-                <EditRackNameModal/>
-                <DeleteRackModal/>
-                <DeleteMachineModal/>
-            </div>
+            <DocumentTitle
+                title={this.props.simulationName ? this.props.simulationName + " - OpenDC" : "Simulation - OpenDC"}
+            >
+                <div className="page-container full-height">
+                    <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
+                    {this.props.datacenterIsLoading ?
+                        <div className="full-height d-flex align-items-center justify-content-center">
+                            <LoadingScreen/>
+                        </div> :
+                        <div className="full-height">
+                            <MapStage/>
+                            <ScaleIndicatorContainer/>
+                            <ToolPanelComponent/>
+                            <TopologySidebar/>
+                            {this.props.inSimulation ?
+                                <TimelineContainer/> :
+                                undefined
+                            }
+                            {this.props.inSimulation ?
+                                <SimulationSidebarComponent/> :
+                                undefined
+                            }
+                        </div>
+                    }
+                    <EditRoomNameModal/>
+                    <DeleteRoomModal/>
+                    <EditRackNameModal/>
+                    <DeleteRackModal/>
+                    <DeleteMachineModal/>
+                </div>
+            </DocumentTitle>
         );
     }
 }
 
 const mapStateToProps = state => {
+    let simulationName = undefined;
+    if (state.currentSimulationId !== -1 && state.objects.simulation[state.currentSimulationId]) {
+        simulationName = state.objects.simulation[state.currentSimulationId].name;
+    }
+
     return {
         datacenterIsLoading: state.currentDatacenterId === -1,
+        simulationName,
     };
 };
 
diff --git a/src/pages/Experiments.js b/src/pages/Experiments.js
index 71b9cfc9..5985de45 100644
--- a/src/pages/Experiments.js
+++ b/src/pages/Experiments.js
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
+import DocumentTitle from "react-document-title";
 import {connect} from "react-redux";
 import {fetchExperimentsOfSimulation} from "../actions/experiments";
 import {openSimulationSucceeded} from "../actions/simulations";
@@ -11,6 +12,7 @@ import NewExperimentModal from "../containers/modals/NewExperimentModal";
 class ExperimentsComponent extends React.Component {
     static propTypes = {
         simulationId: PropTypes.number.isRequired,
+        simulationName: PropTypes.string,
     };
 
     componentDidMount() {
@@ -20,18 +22,35 @@ class ExperimentsComponent extends React.Component {
 
     render() {
         return (
-            <div className="full-height">
-                <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
-                <div className="container text-page-container full-height">
-                    <ExperimentListContainer/>
-                    <NewExperimentButtonContainer/>
+            <DocumentTitle
+                title={this.props.simulationName ?
+                    "Experiments - " + this.props.simulationName + " - OpenDC" :
+                    "Experiments - OpenDC"}
+            >
+                <div className="full-height">
+                    <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
+                    <div className="container text-page-container full-height">
+                        <ExperimentListContainer/>
+                        <NewExperimentButtonContainer/>
+                    </div>
+                    <NewExperimentModal/>
                 </div>
-                <NewExperimentModal/>
-            </div>
+            </DocumentTitle>
         );
     }
 }
 
+const mapStateToProps = state => {
+    let simulationName = undefined;
+    if (state.currentSimulationId !== -1 && state.objects.simulation[state.currentSimulationId]) {
+        simulationName = state.objects.simulation[state.currentSimulationId].name;
+    }
+
+    return {
+        simulationName,
+    };
+};
+
 const mapDispatchToProps = dispatch => {
     return {
         storeSimulationId: id => dispatch(openSimulationSucceeded(id)),
@@ -40,7 +59,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 const Experiments = connect(
-    undefined,
+    mapStateToProps,
     mapDispatchToProps
 )(ExperimentsComponent);
 
diff --git a/src/pages/Home.js b/src/pages/Home.js
index b0936502..1486f422 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -12,6 +12,10 @@ import jQuery from "../util/jquery";
 import "./Home.css";
 
 class Home extends React.Component {
+    state = {
+        scrollSpySetup: false,
+    };
+
     componentDidMount() {
         const scrollOffset = 60;
         jQuery("#navbar").find("li a").click(function (e) {
@@ -22,10 +26,14 @@ class Home extends React.Component {
             jQuery(jQuery(this).attr('href'))[0].scrollIntoView();
             window.scrollBy(0, -scrollOffset);
         });
-        jQuery("body").scrollspy({
-            target: "#navbar",
-            offset: scrollOffset
-        });
+
+        if (!this.state.scrollSpySetup) {
+            jQuery("body").scrollspy({
+                target: "#navbar",
+                offset: scrollOffset
+            });
+            this.setState({scrollSpySetup: true});
+        }
     }
 
     render() {
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
index 51141c3e..4120e285 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -1,11 +1,14 @@
 import React from 'react';
+import DocumentTitle from "react-document-title";
 import TerminalWindow from "../components/not-found/TerminalWindow";
 import './NotFound.css';
 
 const NotFound = () => (
-    <div className="not-found-backdrop">
-        <TerminalWindow/>
-    </div>
+    <DocumentTitle title="Page Not Found - OpenDC">
+        <div className="not-found-backdrop">
+            <TerminalWindow/>
+        </div>
+    </DocumentTitle>
 );
 
 export default NotFound;
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index c8805c6f..6d09dc89 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -1,22 +1,26 @@
 import React from 'react';
+import DocumentTitle from "react-document-title";
 import {connect} from "react-redux";
 import {openDeleteProfileModal} from "../actions/modals/profile";
 import AppNavbar from "../components/navigation/AppNavbar";
 import DeleteProfileModal from "../containers/modals/DeleteProfileModal";
 
 const ProfileContainer = ({onDelete}) => (
-    <div className="full-height">
-        <AppNavbar inSimulation={false}/>
-        <div className="container text-page-container full-height">
-            <button className="btn btn-danger" onClick={onDelete}>Delete my account on OpenDC</button>
-            <p>
-                This does not delete your Google account, it simply disconnects it from the OpenDC app and deletes any
-                simulation info that is associated with you (simulations you own, and any authorizations you may
-                have on other projects).
-            </p>
+    <DocumentTitle title="My Profile - OpenDC">
+        <div className="full-height">
+            <AppNavbar inSimulation={false}/>
+            <div className="container text-page-container full-height">
+                <button className="btn btn-danger" onClick={onDelete}>Delete my account on OpenDC</button>
+                <p>
+                    This does not delete your Google account, it simply disconnects it from the OpenDC app 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/>
         </div>
-        <DeleteProfileModal/>
-    </div>
+    </DocumentTitle>
 );
 
 const mapDispatchToProps = dispatch => {
diff --git a/src/pages/Simulations.js b/src/pages/Simulations.js
index d06fe43d..5ca48435 100644
--- a/src/pages/Simulations.js
+++ b/src/pages/Simulations.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import DocumentTitle from "react-document-title";
 import {connect} from "react-redux";
 import {openNewSimulationModal} from "../actions/modals/simulations";
 import {fetchAuthorizationsOfCurrentUser} from "../actions/users";
@@ -15,15 +16,17 @@ class SimulationsContainer extends React.Component {
 
     render() {
         return (
-            <div className="full-height">
-                <AppNavbar inSimulation={false}/>
-                <div className="container text-page-container full-height">
-                    <SimulationFilterPanel/>
-                    <VisibleSimulationList/>
-                    <NewSimulationButtonContainer/>
+            <DocumentTitle title="My Simulations - OpenDC">
+                <div className="full-height">
+                    <AppNavbar inSimulation={false}/>
+                    <div className="container text-page-container full-height">
+                        <SimulationFilterPanel/>
+                        <VisibleSimulationList/>
+                        <NewSimulationButtonContainer/>
+                    </div>
+                    <NewSimulationModal/>
                 </div>
-                <NewSimulationModal/>
-            </div>
+            </DocumentTitle>
         );
     }
 }