Add GA event tracking for actions in trace view (jaegertracing#191)

* Track errors in GA w raven-js; TODO: tests, readme

Signed-off-by: Joe Farro <joef@uber.com>

* Include CSS selector with last error breadcrumb

Signed-off-by: Joe Farro <joef@uber.com>

* README for GA error tracking

Signed-off-by: Joe Farro <joef@uber.com>

* Misc cleanup

Signed-off-by: Joe Farro <joef@uber.com>

* README info on GA Application Tracking

Signed-off-by: Joe Farro <joef@uber.com>

* Misc fix to tracking README

Signed-off-by: Joe Farro <joef@uber.com>

* Misc cleanup to raven message conversion to GA

Signed-off-by: Joe Farro <joef@uber.com>

* Tests for tracking

Signed-off-by: Joe Farro <joef@uber.com>

* Apply prettier to markdown files

Signed-off-by: Joe Farro <joef@uber.com>

* Error tracking fn name fallback, CSS import order

Signed-off-by: Joe Farro <joef@uber.com>

* GA event tracking in trace view, tests are TODO

Signed-off-by: Joe Farro <joef@uber.com>

* Fix broken tests

Signed-off-by: Joe Farro <joef@uber.com>

* Tests for TracePage tracking

Signed-off-by: Joe Farro <joef@uber.com>

* Additional tests for trace GA event tracking

Signed-off-by: Joe Farro <joef@uber.com>

* Better names for tracking functions

Signed-off-by: Joe Farro <joef@uber.com>

* Make GA event tracking more concise (PR feedback)

Signed-off-by: Joe Farro <joef@uber.com>

* Revert the "more concise" changes

Signed-off-by: Joe Farro <joef@uber.com>

* Update changelog

Signed-off-by: Joe Farro <joef@uber.com>

Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>

Author: tiffon

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changes merged into master
 
+### [#191](https://github.com/jaegertracing/jaeger-ui/pull/191) Add GA event tracking for actions in trace view
+
+* Partially addresses [#157](https://github.com/jaegertracing/jaeger-ui/issues/157) - Enhanced Google Analytics integration
+
+### [#198](https://github.com/jaegertracing/jaeger-ui/pull/198) Use `<base>` and config webpack at runtime to allow path prefix
+
+* Fix [#42](https://github.com/jaegertracing/jaeger-ui/issues/42) - No support for Jaeger behind a reverse proxy
+
+### [#195](https://github.com/jaegertracing/jaeger-ui/pull/195) Handle Error stored in redux trace.traces
+
+* Fix [#166](https://github.com/jaegertracing/jaeger-ui/issues/166) - JS error on search page after viewing 404 trace
+
 ### [#192](https://github.com/jaegertracing/jaeger-ui/pull/192) Change fallback trace name to be more informative
 
 * Fix [#190](https://github.com/jaegertracing/jaeger-ui/issues/190) - Change `cannot-find-trace-name` to `trace-without-root-span`

src/components/TracePage/KeyboardShortcutsHelp.css

@@ -24,7 +24,6 @@ limitations under the License.
   border: 1px solid #e8e8e8;
   border-bottom: 1px solid #ddd;
   color: #000;
-  margin-right: 0.4em;
   font-family: monospace;
   padding: 0.25em 0.3em;
 }

src/components/TracePage/KeyboardShortcutsHelp.js

@@ -18,6 +18,7 @@ import React from 'react';
 import { Button, Modal, Table } from 'antd';
 
 import { kbdMappings } from './keyboard-shortcuts';
+import track from './KeyboardShortcutsHelp.track';
 
 import './KeyboardShortcutsHelp.css';
 
@@ -56,13 +57,14 @@ function convertKeys(keyConfig: string | string[]): string[][] {
 }
 
 function helpModal() {
+  track();
   const data = [];
   Object.keys(kbdMappings).forEach(title => {
     const keyConfigs = convertKeys(kbdMappings[title]);
     data.push(
       ...keyConfigs.map(config => ({
         key: String(config),
-        kbds: config.map(s => <kbd key={s}>{s}</kbd>),
+        kbds: <kbd>{config.join(' ')}</kbd>,
         description: descriptions[title],
       }))
     );

src/components/TracePage/KeyboardShortcutsHelp.track.js

@@ -0,0 +1,22 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { OPEN } from '../../utils/tracking/common';
+import { trackEvent } from '../../utils/tracking';
+
+const CATEGORY = 'jaeger/ux/trace/kbd-modal';
+
+export default trackEvent.bind(null, CATEGORY, OPEN);

src/components/TracePage/SpanGraph/ViewingLayer.js

@@ -28,7 +28,7 @@ import './ViewingLayer.css';
 type ViewingLayerProps = {
   height: number,
   numTicks: number,
-  updateViewRangeTime: (number, number) => void,
+  updateViewRangeTime: (number, number, ?string) => void,
   updateNextViewRangeTime: ViewRangeTimeUpdate => void,
   viewRange: ViewRange,
 };
@@ -188,7 +188,7 @@ export default class ViewingLayer extends React.PureComponent<ViewingLayerProps,
     const anchor = time.reframe ? time.reframe.anchor : value;
     const [start, end] = value < anchor ? [value, anchor] : [anchor, value];
     manager.resetBounds();
-    this.props.updateViewRangeTime(start, end);
+    this.props.updateViewRangeTime(start, end, 'minimap');
   };
 
   _handleScrubberEnterLeave = ({ type }: DraggingUpdate) => {
@@ -220,7 +220,7 @@ export default class ViewingLayer extends React.PureComponent<ViewingLayerProps,
     }
     manager.resetBounds();
     this.setState({ preventCursorLine: false });
-    this.props.updateViewRangeTime(...update);
+    this.props.updateViewRangeTime(update[0], update[1], 'minimap');
   };
 
   /**

src/components/TracePage/SpanGraph/ViewingLayer.test.js

@@ -141,7 +141,7 @@ describe('<SpanGraph>', () => {
           wrapper.instance()._handleReframeDragEnd({ manager, value });
           expect(manager.resetBounds.mock.calls).toEqual([[]]);
           const calls = props.updateViewRangeTime.mock.calls;
-          expect(calls).toEqual([[value, value]]);
+          expect(calls).toEqual([[value, value, 'minimap']]);
         });
 
         it('handles dragged left (anchor is greater)', () => {
@@ -154,7 +154,7 @@ describe('<SpanGraph>', () => {
 
           expect(manager.resetBounds.mock.calls).toEqual([[]]);
           const calls = props.updateViewRangeTime.mock.calls;
-          expect(calls).toEqual([[value, anchor]]);
+          expect(calls).toEqual([[value, anchor, 'minimap']]);
         });
 
         it('handles dragged right (anchor is less)', () => {
@@ -167,7 +167,7 @@ describe('<SpanGraph>', () => {
 
           expect(manager.resetBounds.mock.calls).toEqual([[]]);
           const calls = props.updateViewRangeTime.mock.calls;
-          expect(calls).toEqual([[anchor, value]]);
+          expect(calls).toEqual([[anchor, value, 'minimap']]);
         });
       });
     });
@@ -251,7 +251,7 @@ describe('<SpanGraph>', () => {
           instance._handleScrubberDragEnd(_case.dragUpdate);
           expect(wrapper.state('preventCursorLine')).toBe(false);
           expect(manager.resetBounds.mock.calls).toEqual([[]]);
-          expect(props.updateViewRangeTime).lastCalledWith(..._case.viewRangeUpdate);
+          expect(props.updateViewRangeTime).lastCalledWith(..._case.viewRangeUpdate, 'minimap');
         });
       });
     });

src/components/TracePage/TracePageHeader.js

@@ -22,6 +22,7 @@ import IoIosFilingOutline from 'react-icons/lib/io/ios-filing-outline';
 import { Link } from 'react-router-dom';
 
 import * as markers from './TracePageHeader.markers';
+import { trackAltViewOpen } from './TracePageHeader.track';
 import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
 import LabeledList from '../common/LabeledList';
 import { FALLBACK_TRACE_NAME } from '../../constants';
@@ -109,12 +110,22 @@ export default function TracePageHeader(props: TracePageHeaderProps) {
   const viewMenu = (
     <Menu>
       <Menu.Item>
-        <Link to={prefixUrl(`/api/traces/${traceID}`)} rel="noopener noreferrer" target="_blank">
+        <Link
+          to={prefixUrl(`/api/traces/${traceID}`)}
+          rel="noopener noreferrer"
+          target="_blank"
+          onClick={trackAltViewOpen}
+        >
           Trace JSON
         </Link>
       </Menu.Item>
       <Menu.Item>
-        <Link to={prefixUrl(`/api/traces/${traceID}?raw=true`)} rel="noopener noreferrer" target="_blank">
+        <Link
+          to={prefixUrl(`/api/traces/${traceID}?raw=true`)}
+          rel="noopener noreferrer"
+          target="_blank"
+          onClick={trackAltViewOpen}
+        >
           Trace JSON (unadjusted)
         </Link>
       </Menu.Item>

src/components/TracePage/TracePageHeader.track.js

@@ -0,0 +1,27 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { getToggleValue, OPEN } from '../../utils/tracking/common';
+import { trackEvent } from '../../utils/tracking';
+
+const CATEGORY_ALT_VIEW = 'jaeger/ux/trace/alt-view';
+const CATEGORY_SLIM_HEADER = 'jaeger/ux/trace/slim-header';
+
+// use a closure instead of bind to prevent forwarding any arguments to trackEvent()
+export const trackAltViewOpen = () => trackEvent(CATEGORY_ALT_VIEW, OPEN);
+
+export const trackSlimHeaderToggle = (isOpen: boolean) =>
+  trackEvent(CATEGORY_SLIM_HEADER, getToggleValue(isOpen));

src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.js

@@ -25,7 +25,7 @@ import KeyValuesTable from './KeyValuesTable';
 import './AccordianKeyValues.css';
 
 type AccordianKeyValuesProps = {
-  className: ?string,
+  className?: ?string,
   data: { key: string, value: any }[],
   highContrast?: boolean,
   isOpen: boolean,
@@ -86,5 +86,6 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
 }
 
 AccordianKeyValues.defaultProps = {
+  className: null,
   highContrast: false,
 };

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

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");