Add GA event tracking for actions in trace view

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,26 @@
+// @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 { trackEvent } from '../../utils/tracking';
+
+const context = 'jaeger/ux/trace/kbd-modal';
+
+export default function trackKbdHelpModal() {
+  trackEvent({
+    category: context,
+    action: '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

@@ -21,6 +21,7 @@ import IoChevronRight from 'react-icons/lib/io/chevron-right';
 import { Link } from 'react-router-dom';
 
 import * as markers from './TracePageHeader.markers';
+import { trackAltView } from './TracePageHeader.track';
 import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
 import LabeledList from '../common/LabeledList';
 import { FALLBACK_TRACE_NAME } from '../../constants';
@@ -104,12 +105,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={trackAltView}
+        >
           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={trackAltView}
+        >
           Trace JSON (unadjusted)
         </Link>
       </Menu.Item>

src/components/TracePage/TracePageHeader.track.js

@@ -0,0 +1,34 @@
+// @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 { trackEvent } from '../../utils/tracking';
+
+const altViewCtx = 'jaeger/ux/trace/alt-view';
+export const slimHeaderCtx = 'jaeger/ux/trace/slim-header';
+
+export function trackAltView() {
+  trackEvent({
+    category: altViewCtx,
+    action: 'open',
+  });
+}
+
+export function trackSlimHeader(isOpen: boolean) {
+  trackEvent({
+    category: slimHeaderCtx,
+    action: isOpen ? 'open' : 'close',
+  });
+}

src/components/TracePage/TraceTimelineViewer/SpanBarRow.track.js

@@ -0,0 +1,42 @@
+// @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 type { Store } from 'redux';
+
+import { actionTypes as types } from './duck';
+import { trackEvent } from '../../../utils/tracking';
+
+const context = 'jaeger/ux/trace/timeline/parent';
+
+function trackParent(store: Store, action: any) {
+  const st = store.getState();
+  const { spanID } = action.payload;
+  const traceID = st.traceTimeline.traceID;
+  const isHidden = st.traceTimeline.childrenHiddenIDs.has(spanID);
+  const span = st.trace.traces[traceID].spans.find(sp => sp.spanID === spanID);
+  if (span) {
+    trackEvent({
+      category: context,
+      action: isHidden ? 'open' : 'close',
+      value: span.depth,
+    });
+  }
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export const middlewareHooks = {
+  [types.CHILDREN_TOGGLE]: trackParent,
+};

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");

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

@@ -0,0 +1,71 @@
+// @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 { actionTypes as types } from '../duck';
+import { trackEvent } from '../../../../utils/tracking';
+
+const baseContext = 'jaeger/ux/trace/timeline';
+
+// export for tests
+export const tagsContext = `${baseContext}/tags`;
+export const processContext = `${baseContext}/process`;
+export const logsContext = `${baseContext}/logs`;
+export const logsItemContext = `${baseContext}/logs/item`;
+
+function getCmd(isOpen: boolean) {
+  return isOpen ? 'open' : 'close';
+}
+
+function logs(isOpen: boolean) {
+  trackEvent({
+    category: logsContext,
+    action: getCmd(isOpen),
+  });
+}
+
+function logsItem(isOpen: boolean) {
+  trackEvent({
+    category: logsItemContext,
+    action: getCmd(isOpen),
+  });
+}
+
+function process(isOpen: boolean) {
+  trackEvent({
+    category: processContext,
+    action: getCmd(isOpen),
+  });
+}
+
+function tags(isOpen: boolean) {
+  trackEvent({
+    category: tagsContext,
+    action: getCmd(isOpen),
+  });
+}
+
+const getDetail = (store, action) => store.getState().traceTimeline.detailStates.get(action.payload.spanID);
+
+export const middlewareHooks = {
+  [types.DETAIL_TAGS_TOGGLE]: (store, action) => tags(!getDetail(store, action).isTagsOpen),
+  [types.DETAIL_PROCESS_TOGGLE]: (store, action) => process(!getDetail(store, action).isProcessOpen),
+  [types.DETAIL_LOGS_TOGGLE]: (store, action) => logs(!getDetail(store, action).logs.isOpen),
+  [types.DETAIL_LOG_ITEM_TOGGLE]: (store, action) => {
+    const detail = getDetail(store, action);
+    const { logItem } = action.payload;
+    logsItem(!detail.logs.openedItems.has(logItem));
+  },
+};