Skip to content

Commit

Permalink
Open span detail log items on log marker click
Browse files Browse the repository at this point in the history 
Signed-off-by: Joe Farro <joef@uber.com>
  • Loading branch information
@tiffon
tiffon committed Jan 13, 2019
1 parent c5432e1 commit 0137034
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 25 deletions.
59 changes: 37 additions & 22 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { onlyUpdateForKeys, compose, withState, withProps } from 'recompose';
import AccordianLogs from './SpanDetail/AccordianLogs';

import type { ViewedBoundsFunctionType } from './utils';
import type { Span } from '../../../types/trace';
import type { Span, Log } from '../../../types/trace';

import './SpanBar.css';

Expand All @@ -32,6 +32,7 @@ type SpanBarProps = {
hintSide: string,
label: string,
onClick: (SyntheticMouseEvent<any>) => void,
onDetailLogItemsOpen: (Log[]) => void,
viewEnd: number,
viewStart: number,
getViewedBounds: ViewedBoundsFunctionType,
Expand Down Expand Up @@ -59,6 +60,7 @@ function SpanBar(props: SpanBarProps) {
label,
hintSide,
onClick,
onDetailLogItemsOpen,
setLongLabel,
setShortLabel,
rpc,
Expand Down Expand Up @@ -90,27 +92,40 @@ function SpanBar(props: SpanBarProps) {
_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={traceStartTime}
/>
}
>
<div className="SpanBar--logMarker" style={{ left: toPercent(v[0].view.start) }} />
</Popover>
))}
).map(v => {
const logs = v.map(item => item.log);
return (
<Popover
key={v[0].view.start}
arrowPointAtCenter
overlayClassName="SpanBar--logHint"
placement="topLeft"
onClick={event => {
event.stopPropagation();
console.log('po[pover', event);
onDetailLogItemsOpen(logs);
}}
content={
<AccordianLogs
onClick={event => {
event.stopPropagation();
console.log('acc', event);
onDetailLogItemsOpen(logs);
}}
logs={logs}
linksGetter={null}
isOpen
openedItems={new Set([])}
onToggle={() => {}}
onItemToggle={() => {}}
timestamp={traceStartTime}
/>
}
>
<div className="SpanBar--logMarker" style={{ left: toPercent(v[0].view.start) }} />
</Popover>
);
})}
</div>
{rpc && (
<div
Expand Down
8 changes: 7 additions & 1 deletion packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import SpanBar from './SpanBar';
import Ticks from './Ticks';

import type { ViewedBoundsFunctionType } from './utils';
import type { Span } from '../../../types/trace';
import type { Span, Log } from '../../../types/trace';

import './SpanBarRow.css';

Expand All @@ -36,6 +36,7 @@ type SpanBarRowProps = {
isChildrenExpanded: boolean,
isDetailExpanded: boolean,
isMatchingFilter: boolean,
onDetailLogItemsOpen: (string, Log[]) => void,
onDetailToggled: string => void,
onChildrenToggled: string => void,
numTicks: number,
Expand Down Expand Up @@ -72,6 +73,10 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
this.props.onDetailToggled(this.props.span.spanID);
};

_detailLogItemsOpen = (logItems: Log[]) => {
this.props.onDetailLogItemsOpen(this.props.span.spanID, logItems);
};

_childrenToggle = () => {
this.props.onChildrenToggled(this.props.span.spanID);
};
Expand Down Expand Up @@ -161,6 +166,7 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
viewStart={viewStart}
viewEnd={viewEnd}
getViewedBounds={getViewedBounds}
onDetailLogItemsOpen={this._detailLogItemsOpen}
color={color}
shortLabel={label}
longLabel={longLabel}
Expand Down
9 changes: 7 additions & 2 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,18 @@ type AccordianLogsProps = {
isOpen: boolean,
linksGetter: ?(KeyValuePair[], number) => Link[],
logs: Log[],
onClick?: ?Function,
onItemToggle: Log => void,
onToggle: () => void,
openedItems: Set<Log>,
timestamp: number,
};

export default function AccordianLogs(props: AccordianLogsProps) {
const { isOpen, linksGetter, logs, openedItems, onItemToggle, onToggle, timestamp } = props;
const { isOpen, onClick, linksGetter, logs, openedItems, onItemToggle, onToggle, timestamp } = props;

return (
<div className="AccordianLogs">
<div className="AccordianLogs" onClick={onClick} role="button">
<a
className={`AccordianLogs--header ${isOpen ? 'is-open' : ''}`}
aria-checked={isOpen}
Expand Down Expand Up @@ -74,3 +75,7 @@ export default function AccordianLogs(props: AccordianLogsProps) {
</div>
);
}

AccordianLogs.defaultProps = {
onClick: undefined,
};
3 changes: 3 additions & 0 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ type VirtualizedTraceViewProps = {
childrenToggle: string => void,
currentViewRangeTime: [number, number],
detailLogItemToggle: (string, Log) => void,
detailLogItemsOpen: (string, Log[]) => void,
detailLogsToggle: string => void,
detailProcessToggle: string => void,
detailStates: Map<string, ?DetailState>,
Expand Down Expand Up @@ -274,6 +275,7 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
childrenToggle,
detailStates,
detailToggle,
detailLogItemsOpen,
findMatchesIDs,
spanNameColumnWidth,
trace,
Expand Down Expand Up @@ -314,6 +316,7 @@ export class VirtualizedTraceViewImpl extends React.PureComponent<VirtualizedTra
isMatchingFilter={isMatchingFilter}
numTicks={NUM_TICKS}
onDetailToggled={detailToggle}
onDetailLogItemsOpen={detailLogItemsOpen}
onChildrenToggled={childrenToggle}
rpc={rpc}
showErrorIcon={showErrorIcon}
Expand Down
40 changes: 40 additions & 0 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/duck.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export const actionTypes = generateActionTypes('@jaeger-ui/trace-timeline-viewer
'DETAIL_PROCESS_TOGGLE',
'DETAIL_LOGS_TOGGLE',
'DETAIL_LOG_ITEM_TOGGLE',
'DETAIL_LOG_ITEMS_OPEN',
'EXPAND_ALL',
'EXPAND_ONE',
'REMOVE_HOVER_INDENT_GUIDE_ID',
Expand All @@ -73,6 +74,7 @@ const fullActions = createActions({
[actionTypes.DETAIL_PROCESS_TOGGLE]: spanID => ({ spanID }),
[actionTypes.DETAIL_LOGS_TOGGLE]: spanID => ({ spanID }),
[actionTypes.DETAIL_LOG_ITEM_TOGGLE]: (spanID, logItem) => ({ logItem, spanID }),
[actionTypes.DETAIL_LOG_ITEMS_OPEN]: (spanID, logItems) => ({ logItems, spanID }),
[actionTypes.ADD_HOVER_INDENT_GUIDE_ID]: spanID => ({ spanID }),
[actionTypes.REMOVE_HOVER_INDENT_GUIDE_ID]: spanID => ({ spanID }),
});
Expand Down Expand Up @@ -211,6 +213,43 @@ function detailLogItemToggle(state, { payload }) {
return { ...state, detailStates };
}

function detailLogItemsOpen(state, { payload }) {
const { spanID, logItems } = payload;
// const logsToOpen = new Set(logItems);
const detailStates = new Map(state.detailStates);
// const isOpening = !detailStates.has(spanID);
const detailState = new DetailState(detailStates.get(spanID));
detailStates.set(spanID, detailState);
detailState.logs.isOpen = true;
detailState.logs.openedItems = new Set(logItems);

// if (isOpening) {
// detailState = detailState.toggleLogs();
// }
// logItems.forEach(logItem => {
// if (isOpening || !detailState.logs.openedItems.has(logItem)) {
// detailState = detailState.toggleLogItem(logItem);
// }
// });
detailStates.set(spanID, detailState);
return { ...state, detailStates };

// if (detailStates.has(spanID)) {
// detailState = detailStates.get(spanID);
// // detailStates.delete(spanID);
// } else {
// detailState = new DetailState();
// }
// detailStates.set(spanID, detailState);
// return { ...state, detailStates };
// const { spanID, logItem } = payload;
// const old = state.detailStates.get(spanID);
// const detailState = old.toggleLogItem(logItem);
// const detailStates = new Map(state.detailStates);
// detailStates.set(spanID, detailState);
// return { ...state, detailStates };
}

function addHoverIndentGuideId(state, { payload }) {
const { spanID } = payload;
const newHoverIndentGuideIds = new Set(state.hoverIndentGuideIds);
Expand Down Expand Up @@ -241,6 +280,7 @@ export default handleActions(
[actionTypes.DETAIL_PROCESS_TOGGLE]: detailProcessToggle,
[actionTypes.DETAIL_LOGS_TOGGLE]: detailLogsToggle,
[actionTypes.DETAIL_LOG_ITEM_TOGGLE]: detailLogItemToggle,
[actionTypes.DETAIL_LOG_ITEMS_OPEN]: detailLogItemsOpen,
[actionTypes.ADD_HOVER_INDENT_GUIDE_ID]: addHoverIndentGuideId,
[actionTypes.REMOVE_HOVER_INDENT_GUIDE_ID]: removeHoverIndentGuideId,
},
Expand Down

0 comments on commit 0137034

Please sign in to comment.