Support URL prefix via homepage in package.json

package.json

@@ -4,6 +4,7 @@
   "main": "src/index.js",
   "license": "MIT",
   "proxy": "http://localhost:16686",
+  "homepage": null,
   "devDependencies": {
     "babel-eslint": "^7.2.3",
     "enzyme": "^2.9.1",

src/api/jaeger.js

@@ -22,6 +22,8 @@ import fetch from 'isomorphic-fetch';
 import moment from 'moment';
 import queryString from 'query-string';
 
+import prefixUrl from '../utils/prefix-url';
+
 function getJSON(url, query) {
   return fetch(`${url}${query ? `?${queryString.stringify(query)}` : ''}`, {
     credentials: 'include',
@@ -42,12 +44,11 @@ function getJSON(url, query) {
           }
         );
     }
-
     return response.json();
   });
 }
 
-export const DEFAULT_API_ROOT = '/api/';
+export const DEFAULT_API_ROOT = prefixUrl('/api/');
 export const DEFAULT_DEPENDENCY_LOOKBACK = moment.duration(1, 'weeks').asMilliseconds();
 
 const JaegerAPI = {

src/api/jaeger.test.js

@@ -23,14 +23,12 @@ import JaegerAPI from './jaeger';
 
 const generatedTraces = traceGenerator.traces({ traces: 5 });
 jest.mock('isomorphic-fetch', () =>
-  jest.fn(
-    () =>
-      new Promise(resolve =>
-        resolve({
-          status: 200,
-          data: () => Promise.resolve({ data: null }),
-        })
-      )
+  jest.fn(() =>
+    Promise.resolve({
+      status: 200,
+      data: () => Promise.resolve({ data: null }),
+      json: () => Promise.resolve({ data: null }),
+    })
   )
 );
 

src/components/App/NotFound.js

@@ -22,6 +22,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import prefixUrl from '../../utils/prefix-url';
+
 export default function NotFound({ error }) {
   return (
     <section className="ui container">
@@ -41,7 +43,7 @@ export default function NotFound({ error }) {
             </p>
           </div>}
         <div className="ui center aligned basic segment">
-          <Link to="/">
+          <Link to={prefixUrl('/')}>
             {'Back home'}
           </Link>
         </div>

src/components/App/TopNav.js

@@ -22,26 +22,27 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import TraceIDSearchInput from './TraceIDSearchInput';
+import prefixUrl from '../../utils/prefix-url';
 
 import './TopNav.css';
 
 const NAV_LINKS = [
   {
     key: 'dependencies',
-    to: '/dependencies',
+    to: prefixUrl('/dependencies'),
     text: 'Dependencies',
   },
   {
     key: 'search',
-    to: '/search',
+    to: prefixUrl('/search'),
     text: 'Search',
   },
 ];
 
 export default function TopNav() {
   return (
     <nav className="ui top inverted menu jaeger-ui--topnav">
-      <Link to="/" className="header item">
+      <Link to={prefixUrl('/')} className="header item">
         {'Jaeger UI'}
       </Link>
 

src/components/App/index.js

@@ -18,25 +18,25 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import createHistory from 'history/createBrowserHistory';
+import PropTypes from 'prop-types';
+import { metrics } from 'react-metrics';
 import { Provider } from 'react-redux';
 import { Route, Redirect, Switch } from 'react-router-dom';
-import createHistory from 'history/createBrowserHistory';
 import { ConnectedRouter } from 'react-router-redux';
-import { metrics } from 'react-metrics';
 
 import 'semantic-ui-css/semantic.min.css';
 
-import configureStore from '../../utils/configure-store';
-import JaegerAPI, { DEFAULT_API_ROOT } from '../../api/jaeger';
-
 import Page from './Page';
 import NotFound from './NotFound';
-import { ConnectedTracePage } from '../TracePage';
-import { ConnectedSearchTracePage } from '../SearchTracePage';
 import { ConnectedDependencyGraphPage } from '../DependencyGraph';
+import { ConnectedSearchTracePage } from '../SearchTracePage';
+import { ConnectedTracePage } from '../TracePage';
+import JaegerAPI, { DEFAULT_API_ROOT } from '../../api/jaeger';
+import configureStore from '../../utils/configure-store';
 import metricConfig from '../../utils/metrics';
+import prefixUrl from '../../utils/prefix-url';
 
 import './App.css';
 
@@ -67,17 +67,18 @@ export default class JaegerUIApp extends Component {
   render() {
     const { history } = this.props;
     const store = configureStore(history);
-
     return (
       <Provider store={store}>
         <ConnectedRouter history={history}>
           <PageWithMetrics>
             <Switch>
-              <Route path="/search" component={ConnectedSearchTracePage} />
-              <Route path="/trace/:id" component={ConnectedTracePage} />
-              <Route path="/dependencies" component={ConnectedDependencyGraphPage} />
-              <Redirect exact path="/" to="/search" />
-              <Route path="*" component={NotFound} />
+              <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')} />
+              <Route component={NotFound} />
             </Switch>
           </PageWithMetrics>
         </ConnectedRouter>

src/components/SearchTracePage/index.js

@@ -37,6 +37,7 @@ import * as orderBy from '../../model/order-by';
 import { sortTraces, getTraceSummaries } from '../../model/search';
 import { getPercentageOfDuration } from '../../utils/date';
 import getLastXformCacher from '../../utils/get-last-xform-cacher';
+import prefixUrl from '../../utils/prefix-url';
 
 /**
  * Contains the dropdown to sort and filter trace search results
@@ -147,7 +148,7 @@ export default class SearchTracePage extends Component {
                 <ul className="list-reset">
                   {traceResults.map(trace =>
                     <li key={trace.traceID} className="my1">
-                      <Link to={`/trace/${trace.traceID}`}>
+                      <Link to={prefixUrl(`/trace/${trace.traceID}`)}>
                         <TraceSearchResult
                           trace={trace}
                           durationPercent={getPercentageOfDuration(trace.duration, maxTraceDuration)}

src/components/TracePage/TraceTimelineViewer/get-filtered-spans.js

@@ -0,0 +1,29 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// 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 { filterSpansForText } from '../../../selectors/span';
+
+export default function getFilteredSpans(trace, text) {
+  const matches = filterSpansForText({
+    text,
+    spans: trace.spans,
+  });
+  return new Set(matches.map(span => span.spanID));
+}

src/components/TracePage/TraceTimelineViewer/index.js

@@ -21,25 +21,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-import { filterSpansForText } from '../../../selectors/span';
+import getFilteredSpans from './get-filtered-spans';
 import TraceView from './TraceView';
 import { getPositionInRange } from './utils';
 
 import './grid.css';
 import './index.css';
 
-// TODO: Move some styles to css
-// TODO: Clean up component names and move to seperate files.
 // TODO: Add unit tests
-// TODO: unify transforms and utils
-
-function getFilteredSpans(trace, text) {
-  const matches = filterSpansForText({
-    text,
-    spans: trace.spans,
-  });
-  return new Set(matches.map(span => span.spanID));
-}
 
 export default class TraceTimelineViewer extends Component {
   constructor(props) {
@@ -60,12 +49,12 @@ export default class TraceTimelineViewer extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { textFilter } = nextProps;
-    if (textFilter === this.props.textFilter) {
+    const { xformedTrace, textFilter } = nextProps;
+    if (textFilter === this.props.textFilter && xformedTrace === this.props.xformedTrace) {
       return;
     }
     const filteredSpans = textFilter ? getFilteredSpans(nextProps.xformedTrace, textFilter) : null;
-    this.setState({ filteredSpans });
+    this.setState({ filteredSpans, trace: xformedTrace });
   }
 
   toggleSpanCollapse(spanID) {

src/components/TracePage/TraceTimelineViewer/index.test.js

@@ -0,0 +1,45 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// 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 React from 'react';
+import { shallow } from 'enzyme';
+
+import TraceTimelineViewer from './index';
+import { transformTrace } from './transforms';
+import traceGenerator from '../../../demo/trace-generators';
+
+describe('<TraceTimelineViewer>', () => {
+  const trace = traceGenerator.trace({});
+  const props = {
+    textFilter: null,
+    timeRangeFilter: [0, 1],
+    xformedTrace: transformTrace(trace),
+  };
+
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<TraceTimelineViewer {...props} />);
+  });
+
+  it('it does not explode', () => {
+    expect(wrapper).toBeDefined();
+  });
+});

src/middlewares/index.js

@@ -24,6 +24,7 @@ import { change } from 'redux-form';
 import { replace } from 'react-router-redux';
 
 import { searchTraces, fetchServiceOperations } from '../actions/jaeger-api';
+import prefixUrl from '../utils/prefix-url';
 
 /**
  * Middleware to load "operations" for a particular service.
@@ -42,15 +43,10 @@ export const loadOperationsForServiceMiddleware = store => next => action => {
 };
 
 export const historyUpdateMiddleware = store => next => action => {
-  switch (action.type) {
-    case `${searchTraces}`: {
-      store.dispatch(replace(`/search?${queryString.stringify(action.meta.query)}`));
-      break;
-    }
-    default:
-      break;
+  if (action.type === String(searchTraces)) {
+    const url = prefixUrl(`/search?${queryString.stringify(action.meta.query)}`);
+    store.dispatch(replace(url));
   }
-
   next(action);
 };
 

src/utils/prefix-url.js

@@ -0,0 +1,61 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// 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 { homepage } from '../../package.json';
+
+// strip the domain, first slash and trailing slash (if present)
+const rx = new RegExp('^(?:https?://[^/]+)?/?(.*?)/?$', 'i');
+let prefix = '';
+
+/**
+ * Generate the URL prefix from `value` and use it for all subsequent calls to
+ * `prefixUrl()`. All of the following `value` parameters result in the prefix
+ * `"/some/prefix"` (although, the first is the preferred form).
+ *
+ * - `"/some/prefix"`
+ * - `"some/prefix"`
+ * - `"/some/prefix/"`
+ * - `"http://my.example.com/some/prefix"`
+ * - `"https://my.example.com/some/prefix/"`
+ *
+ * Note: This function has a side effect of setting the default URL prefix
+ * applied via the file's default explort.
+ *
+ * @param {?string} value The value to derive the URL prefix from.
+ * @return {string} The resultant prefix.
+ */
+export function deriveAndSetPrefix(value) {
+  prefix = value ? value.replace(rx, '/$1') : '';
+  return prefix;
+}
+
+deriveAndSetPrefix(homepage);
+
+/**
+ * Add the URL prefix, derived from `homepage` in `package.json`, to the URL
+ * argument. The domain is stripped from `homepage` before being added.
+ *
+ * @param {string} value The URL to have the prefix added to.
+ * @return {string} The resultant URL.
+ */
+export default function prefixUrl(value) {
+  const s = value == null ? '' : String(value);
+  return prefix + s;
+}