Added view for showing detailed trace statistics (jaegertracing#506)

* Added view for showing detailed trace statistics
* Reworked trace statistics ui
* review included
* feedback added
Signed-off-by: Philip Dengler <philip.dengler@novatec-gmbh.de>

* Handle merge conflict, clean up AltViewOptions style
Signed-off-by: Everett Ross <reverett@uber.com>

Co-authored-by: Philip <philip.dengler@student-reutlingen.de>
Co-authored-by: Everett Ross <reverett@uber.com>

packages/jaeger-ui/src/components/DeepDependencies/Header/index.test.js

@@ -20,7 +20,7 @@ import MdVisibilityOff from 'react-icons/lib/md/visibility-off';
 
 import Header from './index';
 import HopsSelector from './HopsSelector';
-import NameSelector from './NameSelector';
+import NameSelector from '../../common/NameSelector';
 import * as track from '../index.track';
 
 describe('<Header>', () => {

packages/jaeger-ui/src/components/DeepDependencies/Header/index.tsx

@@ -18,7 +18,7 @@ import MdVisibility from 'react-icons/lib/md/visibility';
 import MdVisibilityOff from 'react-icons/lib/md/visibility-off';
 
 import HopsSelector from './HopsSelector';
-import NameSelector from './NameSelector';
+import NameSelector from '../../common/NameSelector';
 import LayoutSettings from './LayoutSettings';
 import { trackFilter, trackHeaderSetOperation, trackShowMatches } from '../index.track';
 import UiFindInput from '../../common/UiFindInput';

packages/jaeger-ui/src/components/QualityMetrics/Header.tsx

@@ -16,7 +16,7 @@ import * as React from 'react';
 import { InputNumber } from 'antd';
 import _debounce from 'lodash/debounce';
 
-import NameSelector from '../DeepDependencies/Header/NameSelector';
+import NameSelector from '../common/NameSelector';
 
 import './Header.css';
 

packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.css

@@ -0,0 +1,23 @@
+/*
+Copyright (c) 2020 The Jaeger Authors.
+
+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.
+*/
+
+.AltViewOptions {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  height: 32px;
+  line-height: 30px;
+  margin-right: 1rem;
+  padding: 0 8px;
+}

packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.test.js

@@ -14,17 +14,18 @@
 
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { Button, Dropdown } from 'antd';
+import { Dropdown } from 'antd';
 import { Link } from 'react-router-dom';
-
 import AltViewOptions from './AltViewOptions';
 import * as track from './TracePageHeader.track';
+import { ETraceViewType } from '../types';
 
 describe('AltViewOptions', () => {
   let trackGanttView;
   let trackGraphView;
   let trackJsonView;
   let trackRawJsonView;
+  let trackStatisticsView;
 
   let wrapper;
   const getLink = text => {
@@ -34,21 +35,26 @@ describe('AltViewOptions', () => {
       const link = links.at(i);
       if (link.children().text() === text) return link;
     }
-    const link = menu.find('a');
-    if (link.children().text() === text) return link;
+    const links2 = menu.find('a');
+    for (let i = 0; i < links.length; i++) {
+      const link = links2.at(i);
+      if (link.children().text() === text) return link;
+    }
     throw new Error(`Could not find "${text}"`);
   };
+
   const props = {
-    traceGraphView: true,
+    viewType: ETraceViewType.TraceTimelineViewer,
     traceID: 'test trace ID',
-    onTraceGraphViewClicked: jest.fn(),
+    onTraceViewChange: jest.fn(),
   };
 
   beforeAll(() => {
     trackGanttView = jest.spyOn(track, 'trackGanttView');
     trackGraphView = jest.spyOn(track, 'trackGraphView');
     trackJsonView = jest.spyOn(track, 'trackJsonView');
     trackRawJsonView = jest.spyOn(track, 'trackRawJsonView');
+    trackStatisticsView = jest.spyOn(track, 'trackStatisticsView');
   });
 
   beforeEach(() => {
@@ -74,33 +80,39 @@ describe('AltViewOptions', () => {
     expect(trackGraphView).not.toHaveBeenCalled();
   });
 
-  it('toggles and tracks toggle', () => {
-    expect(trackGanttView).not.toHaveBeenCalled();
-    expect(props.onTraceGraphViewClicked).not.toHaveBeenCalled();
-    getLink('Trace Timeline').simulate('click');
-    expect(trackGanttView).toHaveBeenCalledTimes(1);
-    expect(props.onTraceGraphViewClicked).toHaveBeenCalledTimes(1);
+  it('track dropdown menu', () => {
+    const viewInteractions = [
+      {
+        link: 'Trace Graph',
+        trackFn: trackGraphView,
+        onTraceViewChangeArg: ETraceViewType.TraceGraph,
+      },
+      {
+        link: 'Trace Statistics',
+        trackFn: trackStatisticsView,
+        onTraceViewChangeArg: ETraceViewType.TraceStatisticsView,
+        propViewType: ETraceViewType.TraceGraph,
+      },
+      {
+        link: 'Trace Timeline',
+        trackFn: trackGanttView,
+        onTraceViewChangeArg: ETraceViewType.TraceTimelineViewer,
+        propViewType: ETraceViewType.TraceStatisticsView,
+      },
+    ];
 
-    wrapper.setProps({ traceGraphView: false });
-    expect(trackGraphView).not.toHaveBeenCalled();
-    getLink('Trace Graph').simulate('click');
-    expect(trackGraphView).toHaveBeenCalledTimes(1);
-    expect(props.onTraceGraphViewClicked).toHaveBeenCalledTimes(2);
-
-    wrapper.setProps({ traceGraphView: true });
-    expect(trackGanttView).toHaveBeenCalledTimes(1);
-    wrapper.find(Button).simulate('click');
-    expect(trackGanttView).toHaveBeenCalledTimes(2);
-    expect(props.onTraceGraphViewClicked).toHaveBeenCalledTimes(3);
-
-    wrapper.setProps({ traceGraphView: false });
-    expect(trackGraphView).toHaveBeenCalledTimes(1);
-    wrapper.find(Button).simulate('click');
-    expect(trackGraphView).toHaveBeenCalledTimes(2);
-    expect(props.onTraceGraphViewClicked).toHaveBeenCalledTimes(4);
+    viewInteractions.forEach(({ link, trackFn, propViewType }, i) => {
+      if (propViewType) {
+        wrapper.setProps({ viewType: propViewType });
+      }
+      expect(props.onTraceViewChange).toHaveBeenCalledTimes(i);
+      expect(trackFn).not.toHaveBeenCalled();
 
-    expect(trackGanttView).toHaveBeenCalledTimes(2);
-    expect(trackJsonView).not.toHaveBeenCalled();
-    expect(trackRawJsonView).not.toHaveBeenCalled();
+      getLink(link).simulate('click');
+      expect(props.onTraceViewChange).toHaveBeenCalledTimes(i + 1);
+      viewInteractions.forEach(({ trackFn: fn }, j) => {
+        expect(fn).toHaveBeenCalledTimes(j <= i ? 1 : 0);
+      });
+    });
   });
 });

packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx

@@ -13,32 +13,64 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Button, Dropdown, Icon, Menu } from 'antd';
+import { Dropdown, Icon, Menu } from 'antd';
 import { Link } from 'react-router-dom';
+import './AltViewOptions.css';
 
-import { trackGanttView, trackGraphView, trackJsonView, trackRawJsonView } from './TracePageHeader.track';
+import {
+  trackGanttView,
+  trackGraphView,
+  trackStatisticsView,
+  trackJsonView,
+  trackRawJsonView,
+} from './TracePageHeader.track';
 import prefixUrl from '../../../utils/prefix-url';
+import { ETraceViewType } from '../types';
 
 type Props = {
-  onTraceGraphViewClicked: () => void;
-  traceGraphView: boolean;
+  onTraceViewChange: (viewType: ETraceViewType) => void;
   traceID: string;
+  viewType: ETraceViewType;
 };
 
+const MENU_ITEMS = [
+  {
+    viewType: ETraceViewType.TraceTimelineViewer,
+    label: 'Trace Timeline',
+  },
+  {
+    viewType: ETraceViewType.TraceGraph,
+    label: 'Trace Graph',
+  },
+  {
+    viewType: ETraceViewType.TraceStatistics,
+    label: 'Trace Statistics',
+  },
+];
+
 export default function AltViewOptions(props: Props) {
-  const { onTraceGraphViewClicked, traceGraphView, traceID } = props;
-  const handleToggleView = () => {
-    if (traceGraphView) trackGanttView();
-    else trackGraphView();
-    onTraceGraphViewClicked();
+  const { onTraceViewChange, viewType, traceID } = props;
+
+  const handleSelectView = (item: ETraceViewType) => {
+    if (item === ETraceViewType.TraceTimelineViewer) {
+      trackGanttView();
+    } else if (item === ETraceViewType.TraceGraph) {
+      trackGraphView();
+    } else if (item === ETraceViewType.TraceStatistics) {
+      trackStatisticsView();
+    }
+    onTraceViewChange(item);
   };
+
   const menu = (
     <Menu>
-      <Menu.Item>
-        <a onClick={handleToggleView} role="button">
-          {traceGraphView ? 'Trace Timeline' : 'Trace Graph'}
-        </a>
-      </Menu.Item>
+      {MENU_ITEMS.filter(item => item.viewType !== viewType).map(item => (
+        <Menu.Item key={item.viewType}>
+          <a onClick={() => handleSelectView(item.viewType)} role="button">
+            {item.label}
+          </a>
+        </Menu.Item>
+      ))}
       <Menu.Item>
         <Link
           to={prefixUrl(`/api/traces/${traceID}?prettyPrint=true`)}
@@ -61,11 +93,15 @@ export default function AltViewOptions(props: Props) {
       </Menu.Item>
     </Menu>
   );
+
+  const currentItem = MENU_ITEMS.find(item => item.viewType === viewType);
+  const dropdownText = currentItem ? currentItem.label : 'Alternate Views';
   return (
     <Dropdown overlay={menu}>
-      <Button className="ub-mr2" htmlType="button" onClick={handleToggleView}>
-        Alternate Views <Icon type="down" />
-      </Button>
+      <div className="AltViewOptions">
+        {`${dropdownText} `}
+        <Icon type="down" />
+      </div>
     </Dropdown>
   );
 }

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.track.tsx

@@ -24,12 +24,14 @@ export const ACTION_GANTT = 'gantt';
 export const ACTION_GRAPH = 'graph';
 export const ACTION_JSON = 'json';
 export const ACTION_RAW_JSON = 'rawJson';
+export const ACTION_STATISTICS = 'traceStatistics';
 
 // use a closure instead of bind to prevent forwarding any arguments to trackEvent()
 export const trackGanttView = () => trackEvent(CATEGORY_ALT_VIEW, ACTION_GANTT);
 export const trackGraphView = () => trackEvent(CATEGORY_ALT_VIEW, ACTION_GRAPH);
 export const trackJsonView = () => trackEvent(CATEGORY_ALT_VIEW, ACTION_JSON);
 export const trackRawJsonView = () => trackEvent(CATEGORY_ALT_VIEW, ACTION_RAW_JSON);
+export const trackStatisticsView = () => trackEvent(CATEGORY_ALT_VIEW, ACTION_STATISTICS);
 
 export const trackSlimHeaderToggle = (isOpen: boolean) =>
   trackEvent(CATEGORY_SLIM_HEADER, getToggleValue(isOpen));

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx

@@ -26,7 +26,7 @@ import AltViewOptions from './AltViewOptions';
 import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
 import SpanGraph from './SpanGraph';
 import TracePageSearchBar from './TracePageSearchBar';
-import { TUpdateViewRangeTimeFunction, IViewRange, ViewRangeTimeUpdate } from '../types';
+import { TUpdateViewRangeTimeFunction, IViewRange, ViewRangeTimeUpdate, ETraceViewType } from '../types';
 import LabeledList from '../../common/LabeledList';
 import NewWindowIcon from '../../common/NewWindowIcon';
 import TraceName from '../../common/TraceName';
@@ -49,7 +49,7 @@ type TracePageHeaderEmbedProps = {
   nextResult: () => void;
   onArchiveClicked: () => void;
   onSlimViewClicked: () => void;
-  onTraceGraphViewClicked: () => void;
+  onTraceViewChange: (viewType: ETraceViewType) => void;
   prevResult: () => void;
   resultCount: number;
   showArchiveButton: boolean;
@@ -60,7 +60,7 @@ type TracePageHeaderEmbedProps = {
   textFilter: string | TNil;
   toSearch: string | null;
   trace: Trace;
-  traceGraphView: boolean;
+  viewType: ETraceViewType;
   updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
   updateViewRangeTime: TUpdateViewRangeTimeFunction;
   viewRange: IViewRange;
@@ -117,7 +117,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
     nextResult,
     onArchiveClicked,
     onSlimViewClicked,
-    onTraceGraphViewClicked,
+    onTraceViewChange,
     prevResult,
     resultCount,
     showArchiveButton,
@@ -128,7 +128,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
     textFilter,
     toSearch,
     trace,
-    traceGraphView,
+    viewType,
     updateNextViewRangeTime,
     updateViewRangeTime,
     viewRange,
@@ -187,15 +187,11 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
           ref={forwardedRef}
           resultCount={resultCount}
           textFilter={textFilter}
-          navigable={!traceGraphView}
+          navigable={viewType === ETraceViewType.TraceTimelineViewer}
         />
         {showShortcutsHelp && <KeyboardShortcutsHelp className="ub-m2" />}
         {showViewOptions && (
-          <AltViewOptions
-            onTraceGraphViewClicked={onTraceGraphViewClicked}
-            traceGraphView={traceGraphView}
-            traceID={trace.traceID}
-          />
+          <AltViewOptions onTraceViewChange={onTraceViewChange} traceID={trace.traceID} viewType={viewType} />
         )}
         {showArchiveButton && (
           <Button className="ub-mr2 ub-flex ub-items-center" htmlType="button" onClick={onArchiveClicked}>

packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap

@@ -16,7 +16,15 @@ exports[`AltViewOptions renders correctly 1`] = `
           onClick={[Function]}
           role="button"
         >
-          Trace Timeline
+          Trace Graph
+        </a>
+      </MenuItem>
+      <MenuItem>
+        <a
+          onClick={[Function]}
+          role="button"
+        >
+          Trace Statistics
         </a>
       </MenuItem>
       <MenuItem>
@@ -46,19 +54,13 @@ exports[`AltViewOptions renders correctly 1`] = `
   placement="bottomLeft"
   prefixCls="ant-dropdown"
 >
-  <Button
-    block={false}
-    className="ub-mr2"
-    ghost={false}
-    htmlType="button"
-    loading={false}
-    onClick={[Function]}
-    prefixCls="ant-btn"
+  <div
+    className="AltViewOptions"
   >
-    Alternate Views 
+    Trace Timeline 
     <Icon
       type="down"
     />
-  </Button>
+  </div>
 </Dropdown>
 `;