Skip to content

Commit

Permalink
Mouseover span name shows full text in timeline (jaegertracing#71)
Browse files Browse the repository at this point in the history 
Signed-off-by: vvvprabhakar <[email protected]>
  • Loading branch information
@tiffon
tiffon authored Sep 14, 2017
1 parent e28ba7c commit bc7f28d
Show file tree
Hide file tree
Showing 10 changed files with 60 additions and 71 deletions.
20 changes: 0 additions & 20 deletions src/components/TracePage/TraceTimelineViewer/ListView/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ ShallowWrapper {
style={
Object {
"height": 2,
"overflow": "hidden",
"position": "absolute",
"top": 0,
}
Expand All @@ -53,7 +52,6 @@ ShallowWrapper {
style={
Object {
"height": 4,
"overflow": "hidden",
"position": "absolute",
"top": 2,
}
Expand All @@ -66,7 +64,6 @@ ShallowWrapper {
style={
Object {
"height": 6,
"overflow": "hidden",
"position": "absolute",
"top": 6,
}
Expand All @@ -79,7 +76,6 @@ ShallowWrapper {
style={
Object {
"height": 8,
"overflow": "hidden",
"position": "absolute",
"top": 12,
}
Expand All @@ -92,7 +88,6 @@ ShallowWrapper {
style={
Object {
"height": 10,
"overflow": "hidden",
"position": "absolute",
"top": 20,
}
Expand Down Expand Up @@ -138,7 +133,6 @@ ShallowWrapper {
style={
Object {
"height": 2,
"overflow": "hidden",
"position": "absolute",
"top": 0,
}
Expand All @@ -149,7 +143,6 @@ ShallowWrapper {
style={
Object {
"height": 4,
"overflow": "hidden",
"position": "absolute",
"top": 2,
}
Expand All @@ -162,7 +155,6 @@ ShallowWrapper {
style={
Object {
"height": 6,
"overflow": "hidden",
"position": "absolute",
"top": 6,
}
Expand All @@ -175,7 +167,6 @@ ShallowWrapper {
style={
Object {
"height": 8,
"overflow": "hidden",
"position": "absolute",
"top": 12,
}
Expand All @@ -188,7 +179,6 @@ ShallowWrapper {
style={
Object {
"height": 10,
"overflow": "hidden",
"position": "absolute",
"top": 20,
}
Expand Down Expand Up @@ -402,7 +392,6 @@ ShallowWrapper {
style={
Object {
"height": 2,
"overflow": "hidden",
"position": "absolute",
"top": 0,
}
Expand All @@ -413,7 +402,6 @@ ShallowWrapper {
style={
Object {
"height": 4,
"overflow": "hidden",
"position": "absolute",
"top": 2,
}
Expand All @@ -426,7 +414,6 @@ ShallowWrapper {
style={
Object {
"height": 6,
"overflow": "hidden",
"position": "absolute",
"top": 6,
}
Expand All @@ -439,7 +426,6 @@ ShallowWrapper {
style={
Object {
"height": 8,
"overflow": "hidden",
"position": "absolute",
"top": 12,
}
Expand All @@ -452,7 +438,6 @@ ShallowWrapper {
style={
Object {
"height": 10,
"overflow": "hidden",
"position": "absolute",
"top": 20,
}
Expand Down Expand Up @@ -498,7 +483,6 @@ ShallowWrapper {
style={
Object {
"height": 2,
"overflow": "hidden",
"position": "absolute",
"top": 0,
}
Expand All @@ -509,7 +493,6 @@ ShallowWrapper {
style={
Object {
"height": 4,
"overflow": "hidden",
"position": "absolute",
"top": 2,
}
Expand All @@ -522,7 +505,6 @@ ShallowWrapper {
style={
Object {
"height": 6,
"overflow": "hidden",
"position": "absolute",
"top": 6,
}
Expand All @@ -535,7 +517,6 @@ ShallowWrapper {
style={
Object {
"height": 8,
"overflow": "hidden",
"position": "absolute",
"top": 12,
}
Expand All @@ -548,7 +529,6 @@ ShallowWrapper {
style={
Object {
"height": 10,
"overflow": "hidden",
"position": "absolute",
"top": 20,
}
Expand Down
3 changes: 1 addition & 2 deletions src/components/TracePage/TraceTimelineViewer/ListView/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ export default class ListView extends React.Component<ListViewProps> {
// (likely not transferable to other contexts, and instead is specific to
// how we have the items rendered)
const measureSrc: Element = node.firstElementChild || node;
const observed = measureSrc.scrollHeight;
const observed = measureSrc.clientHeight;
const known = this._knownHeights.get(itemKey);
if (observed !== known) {
this._knownHeights.set(itemKey, observed);
Expand Down Expand Up @@ -437,7 +437,6 @@ export default class ListView extends React.Component<ListViewProps> {
position: 'absolute',
top: this._yPositions.ys[i],
height: this._yPositions.heights[i],
overflow: 'hidden',
};
const itemKey = getKeyFromIndex(i);
const attrs = { 'data-item-key': itemKey };
Expand Down
1 change: 1 addition & 0 deletions src/components/TracePage/TraceTimelineViewer/SpanBar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ THE SOFTWARE.
top: 0;
overflow: hidden;
opacity: 0.5;
z-index: 0;
}

.span-row.is-expanded .SpanBar--wrapper,
Expand Down
38 changes: 25 additions & 13 deletions src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,14 @@ THE SOFTWARE.
*/

.span-name-column {
background: #fafafa;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1;
}

.span-row:hover .span-name-column {
background: #f8f8f8;
}

.span-row.is-expanded .span-name-column {
background: #f0f0f0;
outline: 1px solid #ddd;
.span-name-column:hover {
z-index: 1;
}

.span-row.clipping-left .span-name-column::before {
Expand All @@ -47,19 +42,35 @@ THE SOFTWARE.
}

.span-name-wrapper {
background: #fafafa;
border-right: 1px solid #bbb;
overflow: hidden;
text-overflow: ellipsis;
}

.span-name-wrapper:hover {
float: left;
min-width: 100%;
overflow: visible;
}

.span-row:hover .span-name-wrapper {
background: #f8f8f8;
background: linear-gradient(90deg, #fafafa, #f8f8f8 75%, #eee);
}

.span-row.is-expanded .span-name-wrapper {
background: #f0f0f0;
outline: 1px solid #ddd;
}

.span-name {
outline: none;
color: #000;
border-left: 4px solid;
color: #000;
cursor: pointer;
display: inline;
}
.span-name.is-detail-expanded {
display: inline-block;
outline: none;
padding-right: 0.25em;
}

.endpoint-name {
Expand Down Expand Up @@ -87,6 +98,7 @@ THE SOFTWARE.

.span-row:hover .span-view {
background-color: #f5f5f5;
outline: 1px solid #ddd;
}

.span-row.is-expanded .span-view {
Expand Down
9 changes: 1 addition & 8 deletions src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,6 @@ export default function SpanBarRow(props) {
longLabel = `${label} | ${labelDetail}`;
hintSide = 'right';
}

let title = serviceName;
if (rpc) {
title += ` → ${rpc.serviceName}::${rpc.operationName}`;
} else {
title += `::${operationName}`;
}
return (
<TimelineRow
className={`
Expand All @@ -76,7 +69,7 @@ export default function SpanBarRow(props) {
`}
>
<TimelineRow.Left className="span-name-column">
<div className="span-name-wrapper" title={title}>
<div className="span-name-wrapper">
<SpanTreeOffset
level={depth + 1}
hasChildren={isParent}
Expand Down
5 changes: 2 additions & 3 deletions src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ THE SOFTWARE.


.detail-row-name-column {
position: absolute;
height: 100%;
border-right: 1px solid #bbb;
}

.detail-row-expanded-accent {
Expand Down Expand Up @@ -63,7 +62,7 @@ THE SOFTWARE.
.detail-info-wrapper {
background: #f5f5f5;
border: 1px solid #d3d3d3;
border-left-color: #bbb;
border-left: none;
border-top: 3px solid;
box-shadow:
inset 0 16px 20px -20px rgba(0,0,0,0.45),
Expand Down
20 changes: 9 additions & 11 deletions src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,15 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
} = props;
return (
<TimelineRow className={`detail-row ${isFilteredOut ? 'is-filtered-out' : ''}`}>
<TimelineRow.Left>
<div className="detail-row-name-column">
<SpanTreeOffset level={span.depth + 1} />
<span>
<span
className="detail-row-expanded-accent"
onClick={detailToggle}
style={{ borderColor: color }}
/>
</span>
</div>
<TimelineRow.Left className="detail-row-name-column">
<SpanTreeOffset level={span.depth + 1} />
<span>
<span
className="detail-row-expanded-accent"
onClick={detailToggle}
style={{ borderColor: color }}
/>
</span>
</TimelineRow.Left>
<TimelineRow.Right>
<div className="p2 detail-info-wrapper" style={{ borderTopColor: color }}>
Expand Down
29 changes: 16 additions & 13 deletions src/components/TracePage/TraceTimelineViewer/Ticks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,22 @@ export default function Ticks(props) {

return (
<div>
{ticks.map((tick, i) =>
<div
key={tick}
className="span-row-tick"
style={{
left: `${tick * 100}%`,
}}
>
{labels &&
<span className={`span-row-tick-label ${tick >= 1 ? 'is-end-anchor' : ''}`}>
{labels[i]}
</span>}
</div>
{ticks.map(
(tick, i) =>
i
? <div
key={tick}
className="span-row-tick"
style={{
left: `${tick * 100}%`,
}}
>
{labels &&
<span className={`span-row-tick-label ${tick >= 1 ? 'is-end-anchor' : ''}`}>
{labels[i]}
</span>}
</div>
: null
)}
</div>
);
Expand Down
4 changes: 4 additions & 0 deletions src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ THE SOFTWARE.
z-index: 2;
}

.VirtualizedTraceView--labelHeader {
border-right: 1px solid #bbb;
}

.VirtualizedTraceView--spans {
padding-top: 40px;
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,7 +344,7 @@ class VirtualizedTraceView extends React.PureComponent<VirtualizedTraceViewProps
<div className="">
<TimelineRow className="VirtualizedTraceView--headerRow">
<TimelineRow.Left>
<h3 className="m0 p1">Span Name</h3>
<h3 className="m0 p1 VirtualizedTraceView--labelHeader">Service &amp; Operation</h3>
</TimelineRow.Left>
<TimelineRow.Right>
<Ticks
Expand Down

0 comments on commit bc7f28d

Please sign in to comment.