Refactor trace detail (#53)

Top level tasks

- Maintenance of tests
- Cleanup unused vars, imports
- Refine utils
- Many styles will be moved to CSS

SpanGraph

- Fix #49 - Span position in graph doesn't not match its position in the
  detail
- Ticks in span graph made to match trace detail (in number and
  formatting)
- Span graph refactored to trim down files and DOM elements
- Styling adjustments

TracePageHeader

- `trace` prop removed
- Added props for various title values instead of deriving them from
  `trace`

Trace Detail

- Several components split out into separate files
- `transformTrace` to use already created span tree to determine span
  depth
- Fix #59 - "Span Name" to "Service & Operation"

Span Bar / Detail

- Fix uber/jaeger#326: extraneous scrollbars in trace views
- Fix #55: Some tags were not being rendered due to clashing keys
  (observed in a log message)
- Tall content scrolls via entire table instead of single table cell
- Horizontal scrolling for wide content (e.g. long log values) (Fix #58)
- Full width of the header is clickable for tags, process, and logs
  headers (instead of header text, only)
- Service and endpoint are shown on mouseover anywhere in span bar row
- Label on span bars no longer off-screen
- Clip or hide span bars when zoomed in (instead of flush left)
- Add shadow to left / right boundary when span bar view is clipped
- Darkened span name column to differentiate from span bar section
- Span detail left column color coded by service
- Clicking span detail left column collapses detail
- Clicking anywhere left of parent span name toggles children visibility
- Prevent collision of logs in log entries table

SearchTracePage

- Scatterplot dots are sized based on number of spans
- Scatterplot dots mouseover shows trace name

Misc

- Several TraceTimelineViewer / utils removed
- `TreeNode` `.walk()` method can now be used to calculate the depth,
  avoiding use of less efficient `.getPath()`
- Removed several `console.error` warnings caused by React key issues
- `yarn upgrade --latest`
- Removed `react-sticky`
- Fix #42 - Support URL prefix via homepage in package.json


Commits

* Update prettier and wrap at 110 instead of 80

* WIP commit for refactoring trace detail view

* WIP refactor trace detail, split out css, start fixing tests

* WIP refactor trace detail, tests working again

* WIP refactor trace, yarn upgrade

Sub-page scrolling used for trace detail (TODO: revert this). This lays
the ground work for using react-virtualized, but unfortunately has major
perf issues, hence the TODO: revert.

yarn upgrade --latest. Notable changes:

- Removed react-sticky
- react-router v4
- react-vis CSS needed to be included via a sym-link

Misc tweaks:

- Styling adjusted on trace mini-map
- Scatterplot dots are sized based on number of spans
- Scatterplot dots mouseover shows trace name

* WIP refactor trace, test maintenance

* remove unused import

* add license to css files

* Revert sub-page scrolling for trace detail

* Support URL prefix via homepage in package.json

* Prevent collision of logs in log entries table

* Add comments to new utils

* Fix #59 - "Span Name" to "Service & Operation"

* Fix unreleased regression - ellipsis on span name

Add back the styling that adds an ellipsis to truncated span name text.

* Address PR comment on search results scatter plot

https://github.com/uber/jaeger-ui/pull/53#discussion_r134313013

* Misc cleanup from PR comment

https://github.com/uber/jaeger-ui/pull/53#discussion_r134314020

* PR comment - Remove ms and use nano seconds

https://github.com/uber/jaeger-ui/pull/53#discussion_r134316418

* PR comment - Adjust export, relates to recompose

https://github.com/uber/jaeger-ui/pull/53#discussion_r134318188

* PR comment - Comment getTraceSpanIdsAsTree()

https://github.com/uber/jaeger-ui/pull/53#discussion_r134321990

.eslintrc

@@ -21,6 +21,7 @@
     /* jsx */
     "jsx-a11y/no-static-element-interactions": 1,
     "jsx-a11y/href-no-hash": 0,
+    "jsx-a11y/label-has-for": 0,
 
     /* react */
     "react/jsx-filename-extension": 0,

.flowconfig

@@ -1,6 +1,9 @@
 [ignore]
+# node_module packages that have a .flowconfig in conflict with this file
 .*/node_modules/fbjs/.*
 .*/node_modules/uber-licence/.*
+.*/node_modules/redux-form/.*
+.*/node_modules/react-motion/.*
 
 [include]
 

package.json

@@ -4,67 +4,67 @@
   "main": "src/index.js",
   "license": "MIT",
   "proxy": "http://localhost:16686",
+  "homepage": null,
   "devDependencies": {
-    "babel-eslint": "^7.1.1",
-    "enzyme": "^2.4.1",
-    "eslint": "^3.16.1",
-    "eslint-config-airbnb": "^14.1.0",
-    "eslint-config-prettier": "^1.5.0",
-    "eslint-config-react-app": "^0.6.2",
-    "eslint-plugin-flowtype": "^2.21.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "7.1.0",
-    "husky": "^0.13.3",
-    "lint-staged": "^3.4.0",
+    "babel-eslint": "^7.2.3",
+    "enzyme": "^2.9.1",
+    "eslint": "^4.5.0",
+    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-prettier": "^2.3.0",
+    "eslint-config-react-app": "^2.0.0",
+    "eslint-plugin-flowtype": "^2.35.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.2.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^4.0.3",
     "prettier": "^1.5.3",
-    "react-scripts": "^0.9.5",
-    "sets-equal": "^1.0.0",
-    "sinon": "^1.17.5",
+    "react-scripts": "^1.0.11",
+    "react-test-renderer": "^15.6.1",
+    "sinon": "^3.2.1",
     "uber-licence": "^3.1.1"
   },
   "dependencies": {
     "basscss": "^8.0.3",
-    "chance": "^1.0.4",
-    "cytoscape": "^2.7.13",
-    "cytoscape-dagre": "^1.3.0",
-    "d3-scale": "^1.0.4",
+    "chance": "^1.0.10",
+    "classnames": "^2.2.5",
+    "cytoscape": "^3.2.1",
+    "cytoscape-dagre": "^2.0.0",
+    "d3-scale": "^1.0.6",
     "dagre": "^0.7.4",
-    "flow-bin": "^0.36.0",
-    "fuzzy": "^0.1.1",
-    "global": "^4.3.0",
+    "flow-bin": "^0.53.1",
+    "fuzzy": "^0.1.3",
+    "global": "^4.3.2",
+    "history": "^4.6.3",
     "is-promise": "^2.1.0",
     "isomorphic-fetch": "^2.2.1",
-    "json-markup": "^1.0.0",
-    "lodash": "^4.17.2",
-    "moment": "^2.14.1",
+    "json-markup": "^1.1.0",
+    "lodash": "^4.17.4",
+    "moment": "^2.18.1",
     "prop-types": "^15.5.10",
-    "query-string": "^4.2.3",
-    "react": "^15.5.0",
-    "react-addons-perf": "^15.4.1",
-    "react-addons-shallow-compare": "^15.3.2",
-    "react-addons-test-utils": "^15.3.1",
+    "query-string": "^5.0.0",
+    "react": "^15.6.1",
+    "react-addons-perf": "^15.4.2",
     "react-dimensions": "^1.3.0",
-    "react-dom": "^15.5.0",
-    "react-ga": "^2.1.2",
-    "react-helmet": "^3.1.0",
-    "react-metrics": "^2.2.3",
-    "react-redux": "^4.4.5",
-    "react-router": "^2.7.0",
-    "react-router-redux": "^4.0.5",
-    "react-sticky": "^5.0.5",
-    "react-vis": "^0.6.4",
-    "react-vis-force": "^0.1.3",
-    "recompose": "^0.20.2",
-    "redux": "^3.5.2",
-    "redux-actions": "^0.11.0",
-    "redux-async-middleware": "0.0.0",
-    "redux-form": "6.3.2",
-    "redux-promise-middleware": "^4.0.0",
-    "reselect": "^2.5.3",
-    "semantic-ui-css": "^2.2.4",
-    "semantic-ui-react": "^0.58.1",
-    "store": "^1.3.20"
+    "react-dom": "^15.6.1",
+    "react-ga": "^2.2.0",
+    "react-helmet": "^5.1.3",
+    "react-metrics": "^2.3.2",
+    "react-redux": "^5.0.6",
+    "react-router-dom": "^4.1.2",
+    "react-router-redux": "5.0.0-alpha.6",
+    "react-vis": "^1.7.2",
+    "react-vis-force": "^0.3.1",
+    "recompose": "^0.25.0",
+    "redux": "^3.7.2",
+    "redux-actions": "^2.2.1",
+    "redux-async-middleware": "^0.0.0",
+    "redux-form": "^7.0.3",
+    "redux-promise-middleware": "^4.3.0",
+    "reselect": "^3.0.1",
+    "semantic-ui-css": "^2.2.12",
+    "semantic-ui-react": "^0.71.4",
+    "store": "^2.0.12"
   },
   "scripts": {
     "start": "react-scripts start",

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/App.css

@@ -1,21 +1,37 @@
+/*
+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.
+*/
+
+#jaeger-ui-root {
+  height: 100%;
+}
+
 a {
   color: #11939A;
 }
+
 a:hover {
   color: #00474E;
   cursor: pointer;
 }
-.jaeger-ui--content {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-}
-
-.ui.menu.jaeger-ui--topnav {
-  border-radius: 0;
-  z-index: 1000;
-  padding: 5px;
-}
 
 .clearfix:after {
    content: " ";
@@ -53,10 +69,6 @@ a:hover {
   overflow-x: scroll;
 }
 
-.overflow-x::-webkit-scrollbar {
-  display: none;
-}
-
 .ui.compact.table td {
   padding: 0.1em 0.5em;
 }

src/components/App/NotFound.js

@@ -20,7 +20,9 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
+
+import prefixUrl from '../../utils/prefix-url';
 
 export default function NotFound({ error }) {
   return (
@@ -37,11 +39,11 @@ export default function NotFound({ error }) {
         {error &&
           <div className="ui red message">
             <p>
-              {error.toString()}
+              {String(error)}
             </p>
           </div>}
         <div className="ui center aligned basic segment">
-          <Link to="/">
+          <Link to={prefixUrl('/')}>
             {'Back home'}
           </Link>
         </div>

src/components/App/Page.css

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+.jaeger-ui-page {
+  height: 100%;
+}
+
+.jaeger-ui--content {
+  height: 100%;
+  padding-top: 50px;
+}

src/components/App/Page.js

@@ -21,26 +21,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
-import { Sticky, StickyContainer } from 'react-sticky';
 
 import TopNav from './TopNav';
 
+import './Page.css';
+
 export default function JaegerUIPage({ children }) {
   return (
-    <section id="jaeger-ui">
-      <StickyContainer>
-        <Helmet title="Jaeger UI" />
-        <Sticky topOffset={0} stickyStyle={{ zIndex: 1000 }}>
-          <TopNav />
-        </Sticky>
-        <div className="jaeger-ui--content">
-          {children}
-        </div>
-      </StickyContainer>
+    <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.any,
+  children: PropTypes.node,
 };

src/components/App/TopNav.css

@@ -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.
+*/
+
+.ui.menu.jaeger-ui--topnav {
+  border-radius: 0;
+  padding: 5px;
+  position: fixed;
+  width: 100%;
+  z-index: 1000;
+}

src/components/App/TopNav.js

@@ -19,26 +19,30 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import { Link } from 'react-router';
+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>