Spans Table View

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

@@ -26,6 +26,7 @@ describe('AltViewOptions', () => {
   let trackJsonView;
   let trackRawJsonView;
   let trackStatisticsView;
+  let trackTraceSpansView;
 
   let wrapper;
   const getLink = text => {
@@ -36,7 +37,7 @@ describe('AltViewOptions', () => {
       if (link.children().text() === text) return link;
     }
     const links2 = menu.find('a');
-    for (let i = 0; i < links.length; i++) {
+    for (let i = 0; i < links2.length; i++) {
       const link = links2.at(i);
       if (link.children().text() === text) return link;
     }
@@ -55,6 +56,7 @@ describe('AltViewOptions', () => {
     trackJsonView = jest.spyOn(track, 'trackJsonView');
     trackRawJsonView = jest.spyOn(track, 'trackRawJsonView');
     trackStatisticsView = jest.spyOn(track, 'trackStatisticsView');
+    trackTraceSpansView = jest.spyOn(track, 'trackTraceSpansView');
   });
 
   beforeEach(() => {
@@ -78,6 +80,7 @@ describe('AltViewOptions', () => {
     expect(trackJsonView).toHaveBeenCalledTimes(1);
     expect(trackGanttView).not.toHaveBeenCalled();
     expect(trackGraphView).not.toHaveBeenCalled();
+    expect(trackTraceSpansView).not.toHaveBeenCalled();
   });
 
   it('track dropdown menu', () => {
@@ -99,11 +102,19 @@ describe('AltViewOptions', () => {
         onTraceViewChangeArg: ETraceViewType.TraceTimelineViewer,
         propViewType: ETraceViewType.TraceStatisticsView,
       },
+      {
+        link: 'Trace Spans Table',
+        trackFn: trackTraceSpansView,
+        onTraceViewChangeArg: ETraceViewType.TraceSpansView,
+        propViewType: ETraceViewType.TraceTimelineViewer,
+      },
     ];
 
     viewInteractions.forEach(({ link, trackFn, propViewType }, i) => {
       if (propViewType) {
-        wrapper.setProps({ viewType: propViewType });
+        wrapper.setProps({
+          viewType: propViewType,
+        });
       }
       expect(props.onTraceViewChange).toHaveBeenCalledTimes(i);
       expect(trackFn).not.toHaveBeenCalled();

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

@@ -21,6 +21,7 @@ import {
   trackGanttView,
   trackGraphView,
   trackStatisticsView,
+  trackTraceSpansView,
   trackJsonView,
   trackRawJsonView,
 } from './TracePageHeader.track';
@@ -46,6 +47,10 @@ const MENU_ITEMS = [
     viewType: ETraceViewType.TraceStatistics,
     label: 'Trace Statistics',
   },
+  {
+    viewType: ETraceViewType.TraceSpansView,
+    label: 'Trace Spans Table',
+  },
 ];
 
 export default function AltViewOptions(props: Props) {
@@ -58,6 +63,8 @@ export default function AltViewOptions(props: Props) {
       trackGraphView();
     } else if (item === ETraceViewType.TraceStatistics) {
       trackStatisticsView();
+    } else if (item === ETraceViewType.TraceSpansView) {
+      trackTraceSpansView();
     }
     onTraceViewChange(item);
   };

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

@@ -25,13 +25,15 @@ export const ACTION_GRAPH = 'graph';
 export const ACTION_JSON = 'json';
 export const ACTION_RAW_JSON = 'rawJson';
 export const ACTION_STATISTICS = 'traceStatistics';
+export const ACTION_TRACE_SPANS_VIEW = 'tracesSpansView';
 
 // 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 trackTraceSpansView = () => trackEvent(CATEGORY_ALT_VIEW, ACTION_TRACE_SPANS_VIEW);
 
 export const trackSlimHeaderToggle = (isOpen: boolean) =>
   trackEvent(CATEGORY_SLIM_HEADER, getToggleValue(isOpen));

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

@@ -27,6 +27,14 @@ exports[`AltViewOptions renders correctly 1`] = `
           Trace Statistics
         </a>
       </MenuItem>
+      <MenuItem>
+        <a
+          onClick={[Function]}
+          role="button"
+        >
+          Trace Spans Table
+        </a>
+      </MenuItem>
       <MenuItem>
         <ForwardRef
           onClick={[MockFunction]}

packages/jaeger-ui/src/components/TracePage/TraceSpanView/index.css

@@ -0,0 +1,45 @@
+/*
+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.
+*/
+
+.title--TraceSpanView {
+  width: 100%;
+  padding-top: 0.3%;
+  padding-bottom: 0.3%;
+  padding-left: 0.4%;
+  background: rgb(236, 236, 236);
+  margin-bottom: 0%;
+}
+
+.DetailTraceTableTbody--TraceStatistics {
+  border-bottom: 1px solid rgb(204, 204, 204);
+}
+
+.ant-select-dropdown--multiple {
+  z-index: 9999;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.span-table .ant-dropdown {
+  width: 20%;
+  z-index: 1;
+}
+
+.search-box {
+  padding: 8px;
+  background-color: white;
+  width: 80%;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}

packages/jaeger-ui/src/components/TracePage/TraceSpanView/index.test.js

@@ -0,0 +1,71 @@
+// Copyright (c) 2018 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.
+
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import TraceSpanView from './index';
+import transformTraceData from '../../../model/transform-trace-data';
+
+const testTrace = require('../TraceStatistics/tableValuesTestTrace/testTrace.json');
+
+const transformedTrace = transformTraceData(testTrace);
+
+describe('<TraceSpanView>', () => {
+  let wrapper;
+  let defaultProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      trace: transformedTrace,
+      uiFind: undefined,
+      uiFindVertexKeys: undefined,
+    };
+
+    wrapper = mount(<TraceSpanView {...defaultProps} />);
+  });
+
+  it('does not explode', () => {
+    expect(wrapper).toBeDefined();
+    expect(wrapper.find('.title--TraceSpanView').length).toBe(1);
+    expect(wrapper.find('.span-view-table').length).toBe(2);
+    expect(wrapper.find('table').length).toBe(1);
+    expect(wrapper.find('colgroup').length).toBe(1);
+    expect(wrapper.find('Pagination').length).toBe(2);
+
+    expect(wrapper.find('Button').length).toBe(1);
+    expect(wrapper.find('.ant-form-item-control').length).toBe(3);
+  });
+  it('Should change value when onChange was called', () => {
+    const event = ['service2'];
+    wrapper = shallow(<TraceSpanView {...defaultProps} />);
+    wrapper.find('.serviceNameDD Select').simulate('change', event);
+    expect(wrapper.state('selectedServiceName')).toEqual(['service2']);
+  });
+  it('Should change value when onChange OperatioName DDwas called', () => {
+    const event = ['op2', 'op3'];
+    wrapper = shallow(<TraceSpanView {...defaultProps} />);
+    wrapper.find('.operationNameDD Select').simulate('change', event);
+    expect(wrapper.state('selectedOperationName')).toEqual(['op2', 'op3']);
+  });
+  it('check handler', () => {
+    const instance = wrapper.instance();
+
+    expect(instance.state.serviceNamesList).toBeDefined();
+    expect(instance.state.serviceNamesList.length).toBe(2);
+    expect(instance.state.serviceNamesList).toEqual(['service1', 'service2']);
+    expect(instance.state.operationNamesList).toBeDefined();
+    expect(instance.state.operationNamesList.length).toBe(6);
+    expect(instance.state.operationNamesList).toEqual(['op1', 'op2', 'op3', 'op4', 'op6', 'op7']);
+  });
+});