diff --git a/.flowconfig b/.flowconfig index d928c88e81..3aecbf5a94 100644 --- a/.flowconfig +++ b/.flowconfig @@ -8,6 +8,7 @@ [include] [libs] +./flow-typed/npm [options] diff --git a/flow-typed/npm/react-router-dom_v4.x.x.js b/flow-typed/npm/react-router-dom_v4.x.x.js new file mode 100644 index 0000000000..be0f5399a5 --- /dev/null +++ b/flow-typed/npm/react-router-dom_v4.x.x.js @@ -0,0 +1,148 @@ +// flow-typed signature: 4d8e947f2e396ef2f26ecbd1ed7f04ab +// flow-typed version: 97d98ab83e/react-router-dom_v4.x.x/flow_>=v0.53.x + +declare module 'react-router-dom' { + declare export class BrowserRouter extends React$Component<{ + basename?: string, + forceRefresh?: boolean, + getUserConfirmation?: GetUserConfirmation, + keyLength?: number, + children?: React$Node, + }> {} + + declare export class HashRouter extends React$Component<{ + basename?: string, + getUserConfirmation?: GetUserConfirmation, + hashType?: 'slash' | 'noslash' | 'hashbang', + children?: React$Node, + }> {} + + declare export class Link extends React$Component<{ + to: string | LocationShape, + replace?: boolean, + children?: React$Node, + }> {} + + declare export class NavLink extends React$Component<{ + to: string | LocationShape, + activeClassName?: string, + className?: string, + activeStyle?: Object, + style?: Object, + isActive?: (match: Match, location: Location) => boolean, + children?: React$Node, + exact?: boolean, + strict?: boolean, + }> {} + + // NOTE: Below are duplicated from react-router. If updating these, please + // update the react-router and react-router-native types as well. + declare export type Location = { + pathname: string, + search: string, + hash: string, + state?: any, + key?: string, + }; + + declare export type LocationShape = { + pathname?: string, + search?: string, + hash?: string, + state?: any, + }; + + declare export type HistoryAction = 'PUSH' | 'REPLACE' | 'POP'; + + declare export type RouterHistory = { + length: number, + location: Location, + action: HistoryAction, + listen(callback: (location: Location, action: HistoryAction) => void): () => void, + push(path: string | LocationShape, state?: any): void, + replace(path: string | LocationShape, state?: any): void, + go(n: number): void, + goBack(): void, + goForward(): void, + canGo?: (n: number) => boolean, + block(callback: (location: Location, action: HistoryAction) => boolean): void, + // createMemoryHistory + index?: number, + entries?: Array, + }; + + declare export type Match = { + params: { [key: string]: ?string }, + isExact: boolean, + path: string, + url: string, + }; + + declare export type ContextRouter = {| + history: RouterHistory, + location: Location, + match: Match, + |}; + + declare export type GetUserConfirmation = (message: string, callback: (confirmed: boolean) => void) => void; + + declare type StaticRouterContext = { + url?: string, + }; + + declare export class StaticRouter extends React$Component<{ + basename?: string, + location?: string | Location, + context: StaticRouterContext, + children?: React$Node, + }> {} + + declare export class MemoryRouter extends React$Component<{ + initialEntries?: Array, + initialIndex?: number, + getUserConfirmation?: GetUserConfirmation, + keyLength?: number, + children?: React$Node, + }> {} + + declare export class Router extends React$Component<{ + history: RouterHistory, + children?: React$Node, + }> {} + + declare export class Prompt extends React$Component<{ + message: string | ((location: Location) => string | true), + when?: boolean, + }> {} + + declare export class Redirect extends React$Component<{ + to: string | LocationShape, + push?: boolean, + }> {} + + declare export class Route extends React$Component<{ + component?: React$ComponentType<*>, + render?: (router: ContextRouter) => React$Node, + children?: React$ComponentType | React$Node, + path?: string, + exact?: boolean, + strict?: boolean, + }> {} + + declare export class Switch extends React$Component<{ + children?: React$Node, + }> {} + + declare export function withRouter

( + Component: React$ComponentType<{| ...ContextRouter, ...P |}> + ): React$ComponentType

; + + declare type MatchPathOptions = { + path?: string, + exact?: boolean, + sensitive?: boolean, + strict?: boolean, + }; + + declare export function matchPath(pathname: string, options?: MatchPathOptions | string): null | Match; +} diff --git a/package.json b/package.json index a6b079d43e..e17e689989 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "test": "react-scripts test --env=jsdom", "coverage": "npm run test -- --coverage", "lint": "npm run eslint && npm run prettier && npm run flow", - "eslint": "eslint .", + "eslint": "eslint src", "prettier": "prettier --single-quote --trailing-comma es5 --print-width 110 --write \"src/**/*.js\"", "flow": "flow; test $? -eq 0 -o $? -eq 2", "set-homepage": "json -I -f package.json -e 'this.homepage=process.env.HOMEPAGE'", diff --git a/src/components/App/Page.js b/src/components/App/Page.js index 1ba5f95b89..915901ce6b 100644 --- a/src/components/App/Page.js +++ b/src/components/App/Page.js @@ -23,34 +23,55 @@ 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 type { Config } from '../../types/config'; +import { trackPageView } from '../../utils/metrics'; import './Page.css'; -type JaegerUIPageProps = { +type PageProps = { + location: Location, children: React.Node, config: { data: Config }, }; -function JaegerUIPage({ config, children }: JaegerUIPageProps) { - const menu = config && config.data && config.data.menu; - return ( -

- - -
- {children} -
-
- ); +class Page extends React.Component { + 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, config } = this.props; + const menu = config && config.data && config.data.menu; + return ( +
+ + +
+ {children} +
+
+ ); + } } function mapStateToProps(state, ownProps) { const { config } = state; - const { children } = ownProps; - return { children, config }; + const { location } = state.routing; + return { ...ownProps, config, location }; } -export default connect(mapStateToProps)(JaegerUIPage); +export default connect(mapStateToProps)(Page); diff --git a/src/components/App/index.js b/src/components/App/index.js index edeaec38fe..c7432d56c8 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -20,7 +20,6 @@ import React, { Component } from 'react'; import createHistory from 'history/createBrowserHistory'; -import { metrics } from 'react-metrics'; import { Provider } from 'react-redux'; import { Route, Redirect, Switch } from 'react-router-dom'; import { ConnectedRouter } from 'react-router-redux'; @@ -35,19 +34,16 @@ import { ConnectedTracePage } from '../TracePage'; import { fetchConfig } from '../../actions/jaeger-api'; 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'; -const PageWithMetrics = metrics(metricConfig)(Page); - -const defaultHistory = createHistory(); +const history = createHistory(); export default class JaegerUIApp extends Component { constructor(props) { super(props); - this.store = configureStore(defaultHistory); + this.store = configureStore(history); JaegerAPI.apiRoot = DEFAULT_API_ROOT; this.store.dispatch(fetchConfig()); } @@ -55,8 +51,8 @@ export default class JaegerUIApp extends Component { render() { return ( - - + + @@ -66,7 +62,7 @@ export default class JaegerUIApp extends Component { - + ); diff --git a/src/components/SearchTracePage/TraceSearchForm.js b/src/components/SearchTracePage/TraceSearchForm.js index 393cb34bac..4766aad656 100644 --- a/src/components/SearchTracePage/TraceSearchForm.js +++ b/src/components/SearchTracePage/TraceSearchForm.js @@ -285,8 +285,8 @@ const mapDispatchToProps = dispatch => { minDuration, maxDuration, lookback, - traceIDs, } = fields; + // Note: traceID is ignored when the form is submitted store.set('lastSearch', { service, operation }); @@ -317,7 +317,6 @@ const mapDispatchToProps = dispatch => { tag: tagsToQuery(tags) || undefined, minDuration: minDuration || null, maxDuration: maxDuration || null, - traceID: traceIDsToQuery(traceIDs) || undefined, }); }, }; diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css index 972a9fab27..5d2896656f 100644 --- a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css +++ b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css @@ -38,7 +38,7 @@ THE SOFTWARE. width: 6px; background-image: linear-gradient(to right, rgba(25, 25, 25, 0.25), rgba(32, 32, 32, 0.0)); left: 100%; - z-index: 1; + z-index: -1; } .span-name-wrapper { diff --git a/src/index.js b/src/index.js index 66eb95124c..8419feb452 100644 --- a/src/index.js +++ b/src/index.js @@ -25,17 +25,19 @@ import { document } from 'global'; import 'basscss/css/basscss.css'; import JaegerUIApp from './components/App'; +import { init as initTracking } from './utils/metrics'; /* istanbul ignore if */ if (process.env.NODE_ENV === 'development') { require.ensure(['global/window', 'react-addons-perf'], require => { const window = require('global/window'); - /* eslint-disable import/no-extraneous-dependencies */ + // eslint-disable-next-line import/no-extraneous-dependencies window.Perf = require('react-addons-perf'); - /* eslint-enable import/no-extraneous-dependencies */ }); } +initTracking(); + const UI_ROOT_ID = 'jaeger-ui-root'; /* istanbul ignore if */ diff --git a/src/utils/metrics.js b/src/utils/metrics.js index 1e367df016..7af26b9bee 100644 --- a/src/utils/metrics.js +++ b/src/utils/metrics.js @@ -20,43 +20,14 @@ import ReactGA from 'react-ga'; -if (process.env.NODE_ENV === 'production' && process.env.REACT_APP_GA_TRACKING_ID) { - const GA_CODE = process.env.REACT_APP_GA_TRACKING_ID; - ReactGA.initialize(GA_CODE); +export function init() { + if (process.env.NODE_ENV === 'production' && process.env.REACT_APP_GA_TRACKING_ID) { + const GA_CODE = process.env.REACT_APP_GA_TRACKING_ID; + ReactGA.initialize(GA_CODE); + } } -const GoogleAnalytics = { - pageView(event, fields) { - ReactGA.set({ - page: fields.page, - }); - ReactGA.pageview(fields.pathname); - }, - track(eventName, params) { - ReactGA.event({ - category: params.page, - action: eventName, - label: params.label, - value: params.value, - }); - }, -}; - -export default { - enabled: process.env.NODE_ENV === 'production', - debug: process.env.NODE_ENV === 'development', - vendors: [ - { - name: 'Google Analytics', - api: GoogleAnalytics, - }, - ], - pageDefaults(routeState) { - const paths = routeState.pathname.substr(1).split('/'); - return { - pathname: routeState.pathname, - query: routeState.query, - page: !paths[0] ? 'landing' : paths[0], - }; - }, -}; +export function trackPageView(pathname, search) { + const pagePath = search ? `${pathname}?${search}` : pathname; + ReactGA.pageview(pagePath); +}