Log Markers on Spans

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.css

@@ -66,3 +66,35 @@ limitations under the License.
 .span-row:hover .SpanBar--label {
   color: #000;
 }
+
+.SpanBar--logMarker {
+  background-color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  height: 60%;
+  min-width: 1px;
+  position: absolute;
+  top: 20%;
+}
+
+.SpanBar--logMarker:hover {
+  background-color: #000;
+}
+
+.SpanBar--logMarker::before,
+.SpanBar--logMarker::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  border: 1px solid transparent;
+}
+
+.SpanBar--logMarker::after {
+  left: 0;
+}
+
+/* Tweak the popover aesthetics - unfortunate but necessary */
+.SpanBar--logHint .ant-popover-inner-content {
+  padding: 0.25rem;
+}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.js

@@ -15,7 +15,13 @@
 // limitations under the License.
 
 import React from 'react';
+import { Popover } from 'antd';
+import _groupBy from 'lodash/groupBy';
+import _values from 'lodash/values';
+
 import { onlyUpdateForKeys, compose, withState, withProps } from 'recompose';
+import type { Span, Trace } from '../../../types/trace';
+import AccordianLogs from './SpanDetail/AccordianLogs';
 
 import './SpanBar.css';
 
@@ -26,21 +32,37 @@ type SpanBarProps = {
   onClick: (SyntheticMouseEvent<any>) => void,
   viewEnd: number,
   viewStart: number,
+  getViewedBounds: (number, number) => { start: number, end: number },
   rpc: {
     viewStart: number,
     viewEnd: number,
     color: string,
   },
   setLongLabel: () => void,
   setShortLabel: () => void,
+  trace: Trace,
+  span: Span,
 };
 
 function toPercent(value: number) {
   return `${value * 100}%`;
 }
 
 function SpanBar(props: SpanBarProps) {
-  const { viewEnd, viewStart, color, label, hintSide, onClick, setLongLabel, setShortLabel, rpc } = props;
+  const {
+    viewEnd,
+    viewStart,
+    getViewedBounds,
+    color,
+    label,
+    hintSide,
+    onClick,
+    setLongLabel,
+    setShortLabel,
+    rpc,
+    trace,
+    span,
+  } = props;
 
   return (
     <div
@@ -61,6 +83,33 @@ function SpanBar(props: SpanBarProps) {
       >
         <div className={`SpanBar--label is-${hintSide}`}>{label}</div>
       </div>
+      <div>
+        {_values(
+          _groupBy(span.logs.map(l => ({ view: getViewedBounds(l.timestamp, l.timestamp), log: l })), v =>
+            Math.floor(v.view.start * 100)
+          )
+        ).map(v => (
+          <Popover
+            key={v[0].view.start}
+            arrowPointAtCenter
+            overlayClassName="SpanBar--logHint"
+            placement="topLeft"
+            content={
+              <AccordianLogs
+                logs={v.map(l => l.log)}
+                linksGetter={null}
+                isOpen
+                openedItems={new Set([])}
+                onToggle={() => {}}
+                onItemToggle={() => {}}
+                timestamp={trace.startTime}
+              />
+            }
+          >
+            <div className="SpanBar--logMarker" style={{ left: toPercent(v[0].view.start) }} />
+          </Popover>
+        ))}
+      </div>
       {rpc && (
         <div
           className="SpanBar--rpc"

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.test.js

@@ -14,6 +14,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
+import { Popover } from 'antd';
 
 import SpanBar from './SpanBar';
 
@@ -28,11 +29,42 @@ describe('<SpanBar>', () => {
     hintSide: 'right',
     viewEnd: 1,
     viewStart: 0,
+    getViewedBounds: s => {
+      // Log entries
+      if (s === 10) {
+        return { start: 0.1, end: 0.1 };
+      } else if (s === 20) {
+        return { start: 0.2, end: 0.2 };
+      }
+      return { error: 'error' };
+    },
     rpc: {
       viewStart: 0.25,
       viewEnd: 0.75,
       color: '#000',
     },
+    trace: {
+      startTime: 0,
+    },
+    span: {
+      logs: [
+        {
+          timestamp: 10,
+          fields: [{ key: 'message', value: 'oh the log message' }, { key: 'something', value: 'else' }],
+        },
+        {
+          timestamp: 10,
+          fields: [
+            { key: 'message', value: 'oh the second log message' },
+            { key: 'something', value: 'different' },
+          ],
+        },
+        {
+          timestamp: 20,
+          fields: [{ key: 'message', value: 'oh the next log message' }, { key: 'more', value: 'stuff' }],
+        },
+      ],
+    },
   };
 
   it('renders without exploding', () => {
@@ -46,4 +78,10 @@ describe('<SpanBar>', () => {
     onMouseOut();
     expect(labelElm.text()).toBe(shortLabel);
   });
+
+  it('log markers count', () => {
+    // 3 log entries, two grouped together with the same timestamp
+    const wrapper = mount(<SpanBar {...props} />);
+    expect(wrapper.find(Popover).length).toEqual(2);
+  });
 });

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js

@@ -24,7 +24,7 @@ import SpanTreeOffset from './SpanTreeOffset';
 import SpanBar from './SpanBar';
 import Ticks from './Ticks';
 
-import type { Span } from '../../../types/trace';
+import type { Span, Trace } from '../../../types/trace';
 
 import './SpanBarRow.css';
 
@@ -46,9 +46,9 @@ type SpanBarRowProps = {
     serviceName: string,
   },
   showErrorIcon: boolean,
+  getViewedBounds: (number, number) => { start: number, end: number },
+  trace: Trace,
   span: Span,
-  viewEnd: number,
-  viewStart: number,
 };
 
 /**
@@ -86,12 +86,15 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
       numTicks,
       rpc,
       showErrorIcon,
+      getViewedBounds,
+      trace,
       span,
-      viewEnd,
-      viewStart,
     } = this.props;
     const { duration, hasChildren: isParent, operationName, process: { serviceName } } = span;
     const label = formatDuration(duration);
+    const viewBounds = getViewedBounds(span.startTime, span.startTime + span.duration);
+    const viewStart = viewBounds.start;
+    const viewEnd = viewBounds.end;
 
     const labelDetail = `${serviceName}::${operationName}`;
     let longLabel;
@@ -103,6 +106,7 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
       longLabel = `${label} | ${labelDetail}`;
       hintSide = 'right';
     }
+
     return (
       <TimelineRow
         className={`
@@ -155,10 +159,13 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
             rpc={rpc}
             viewStart={viewStart}
             viewEnd={viewEnd}
+            getViewedBounds={getViewedBounds}
             color={color}
             shortLabel={label}
             longLabel={longLabel}
             hintSide={hintSide}
+            trace={trace}
+            span={span}
           />
         </TimelineRow.Cell>
       </TimelineRow>

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.test.js

@@ -41,16 +41,16 @@ describe('<SpanBarRow>', () => {
       serviceName: 'rpc-service-name',
     },
     showErrorIcon: false,
+    getViewedBounds: () => ({ start: 0, end: 1 }),
     span: {
       duration: 'test-duration',
       hasChildren: true,
       process: {
         serviceName: 'service-name',
       },
       spanID,
+      logs: [],
     },
-    viewEnd: 1,
-    viewStart: 0,
   };
 
   let wrapper;

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.css

@@ -16,6 +16,7 @@ limitations under the License.
 
 .AccordianLogs {
   border: 1px solid #d8d8d8;
+  position: relative;
 }
 
 .AccordianLogs--header {

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js

@@ -24,7 +24,7 @@ import ListView from './ListView';
 import SpanBarRow from './SpanBarRow';
 import DetailState from './SpanDetail/DetailState';
 import SpanDetailRow from './SpanDetailRow';
-import { findServerChildSpan, getViewedBounds, isErrorSpan, spanContainsErredSpan } from './utils';
+import { createViewedBoundsFunc, findServerChildSpan, isErrorSpan, spanContainsErredSpan } from './utils';
 import getLinks from '../../../model/link-patterns';
 import type { Accessors } from '../ScrollManager';
 import type { Log, Span, Trace, KeyValuePair } from '../../../types/trace';
@@ -125,13 +125,21 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
   clippingCssClasses: string;
   listView: ?ListView;
   rowStates: RowState[];
+  getViewedBounds: (number, number) => { start: number, end: number };
 
   constructor(props: VirtualizedTraceViewProps) {
     super(props);
     // keep "prop derivations" on the instance instead of calculating in
     // `.render()` to avoid recalculating in every invocation of `.renderRow()`
     const { currentViewRangeTime, childrenHiddenIDs, detailStates, trace } = props;
     this.clippingCssClasses = getCssClasses(currentViewRangeTime);
+    const [zoomStart, zoomEnd] = currentViewRangeTime;
+    this.getViewedBounds = createViewedBoundsFunc({
+      min: trace.startTime,
+      max: trace.endTime,
+      viewStart: zoomStart,
+      viewEnd: zoomEnd,
+    });
     this.rowStates = generateRowStates(trace.spans, childrenHiddenIDs, detailStates);
 
     const { setTrace } = props;
@@ -157,6 +165,13 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
     }
     if (currentViewRangeTime !== nextViewRangeTime) {
       this.clippingCssClasses = getCssClasses(nextViewRangeTime);
+      const [zoomStart, zoomEnd] = nextViewRangeTime;
+      this.getViewedBounds = createViewedBoundsFunc({
+        min: trace.startTime,
+        max: trace.endTime,
+        viewStart: zoomStart,
+        viewEnd: zoomEnd,
+      });
     }
     if (this.listView && registerAccessors !== nextRegisterAccessors) {
       nextRegisterAccessors(this.getAccessors());
@@ -255,14 +270,12 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
     const {
       childrenHiddenIDs,
       childrenToggle,
-      currentViewRangeTime,
       detailStates,
       detailToggle,
       findMatchesIDs,
       spanNameColumnWidth,
       trace,
     } = this.props;
-    const [zoomStart, zoomEnd] = currentViewRangeTime;
     // to avert flow error
     if (!trace) {
       return null;
@@ -272,28 +285,13 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
     const isDetailExpanded = detailStates.has(spanID);
     const isMatchingFilter = Boolean(findMatchesIDs) && findMatchesIDs.has(spanID);
     const showErrorIcon = isErrorSpan(span) || (isCollapsed && spanContainsErredSpan(trace.spans, spanIndex));
-    const viewBounds = getViewedBounds({
-      min: trace.startTime,
-      max: trace.endTime,
-      start: span.startTime,
-      end: span.startTime + span.duration,
-      viewStart: zoomStart,
-      viewEnd: zoomEnd,
-    });
 
     // Check for direct child "server" span if the span is a "client" span.
     let rpc = null;
     if (isCollapsed) {
       const rpcSpan = findServerChildSpan(trace.spans.slice(spanIndex));
       if (rpcSpan) {
-        const rpcViewBounds = getViewedBounds({
-          min: trace.startTime,
-          max: trace.endTime,
-          start: rpcSpan.startTime,
-          end: rpcSpan.startTime + rpcSpan.duration,
-          viewStart: zoomStart,
-          viewEnd: zoomEnd,
-        });
+        const rpcViewBounds = this.getViewedBounds(rpcSpan.startTime, rpcSpan.startTime + rpcSpan.duration);
         rpc = {
           color: colorGenerator.getColorByKey(rpcSpan.process.serviceName),
           operationName: rpcSpan.operationName,
@@ -317,9 +315,9 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
           onChildrenToggled={childrenToggle}
           rpc={rpc}
           showErrorIcon={showErrorIcon}
+          getViewedBounds={this.getViewedBounds}
+          trace={trace}
           span={span}
-          viewEnd={viewBounds.end}
-          viewStart={viewBounds.start}
         />
       </div>
     );