Google Analytics tracking moved to a higher level component

src/components/App/Page.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,27 +20,54 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 import Helmet from 'react-helmet';
+import { connect } from 'react-redux';
+import type { Location } from 'react-router-dom';
 
 import TopNav from './TopNav';
+import { trackPageView } from '../../utils/metrics';
 
 import './Page.css';
 
-export default function JaegerUIPage(props) {
-  const { children } = props;
-  return (
-    <section className="jaeger-ui-page" id="jaeger-ui">
-      <Helmet title="Jaeger UI" />
-      <TopNav />
-      <div className="jaeger-ui--content">
-        {children}
-      </div>
-    </section>
-  );
+type PageProps = {
+  location: Location,
+  children: React.Node,
+};
+
+class Page extends React.Component<PageProps> {
+  props: PageProps;
+
+  componentDidMount() {
+    const { pathname, search } = this.props.location;
+    trackPageView(pathname, search);
+  }
+
+  componentWillReceiveProps(nextProps: PageProps) {
+    const { pathname, search } = this.props.location;
+    const { pathname: nextPathname, search: nextSearch } = nextProps.location;
+    if (pathname !== nextPathname || search !== nextSearch) {
+      trackPageView(nextPathname, nextSearch);
+    }
+  }
+
+  render() {
+    const { children } = this.props;
+    return (
+      <section className="jaeger-ui-page" id="jaeger-ui">
+        <Helmet title="Jaeger UI" />
+        <TopNav />
+        <div className="jaeger-ui--content">
+          {children}
+        </div>
+      </section>
+    );
+  }
 }
 
-JaegerUIPage.propTypes = {
-  children: PropTypes.node,
-};
+function mapStateToProps(state, ownProps) {
+  const { location } = state.routing;
+  return { ...ownProps, location };
+}
+
+export default connect(mapStateToProps)(Page);

src/components/App/index.js

@@ -29,7 +29,6 @@ import 'semantic-ui-css/semantic.min.css';
 
 import Page from './Page';
 import NotFound from './NotFound';
-import trackedComponentEnahncer from './tracked-component-enhancer';
 import { ConnectedDependencyGraphPage } from '../DependencyGraph';
 import { ConnectedSearchTracePage } from '../SearchTracePage';
 import { ConnectedTracePage } from '../TracePage';
@@ -41,10 +40,6 @@ import './App.css';
 
 const defaultHistory = createHistory();
 
-const TrackedSearchPage = trackedComponentEnahncer(ConnectedSearchTracePage);
-const TrackedTracePage = trackedComponentEnahncer(ConnectedTracePage);
-const TrackedDependencyPage = trackedComponentEnahncer(ConnectedDependencyGraphPage);
-
 export default class JaegerUIApp extends Component {
   static get propTypes() {
     return {
@@ -73,9 +68,9 @@ export default class JaegerUIApp extends Component {
         <ConnectedRouter history={history}>
           <Page>
             <Switch>
-              <Route path={prefixUrl('/search')} component={TrackedSearchPage} />
-              <Route path={prefixUrl('/trace/:id')} component={TrackedTracePage} />
-              <Route path={prefixUrl('/dependencies')} component={TrackedDependencyPage} />
+              <Route path={prefixUrl('/search')} component={ConnectedSearchTracePage} />
+              <Route path={prefixUrl('/trace/:id')} component={ConnectedTracePage} />
+              <Route path={prefixUrl('/dependencies')} component={ConnectedDependencyGraphPage} />
               <Redirect exact path="/" to={prefixUrl('/search')} />
               <Redirect exact path={prefixUrl()} to={prefixUrl('/search')} />
               <Redirect exact path={prefixUrl('/')} to={prefixUrl('/search')} />