Skip to content

Commit 59f270c

Browse files
tiffontiffon
committed
Merge branch 'master' into milestone1/issue-61-trace-minimap-via-canvas
2 parents 4ab516e + d68662c commit 59f270c

File tree

10 files changed

+60
-71
lines changed

10 files changed

+60
-71
lines changed

‎src/components/TracePage/TraceTimelineViewer/ListView/__snapshots__/index.test.js.snap‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ ShallowWrapper {
4242
style={
4343
Object {
4444
"height": 2,
45-
"overflow": "hidden",
4645
"position": "absolute",
4746
"top": 0,
4847
}
@@ -53,7 +52,6 @@ ShallowWrapper {
5352
style={
5453
Object {
5554
"height": 4,
56-
"overflow": "hidden",
5755
"position": "absolute",
5856
"top": 2,
5957
}
@@ -66,7 +64,6 @@ ShallowWrapper {
6664
style={
6765
Object {
6866
"height": 6,
69-
"overflow": "hidden",
7067
"position": "absolute",
7168
"top": 6,
7269
}
@@ -79,7 +76,6 @@ ShallowWrapper {
7976
style={
8077
Object {
8178
"height": 8,
82-
"overflow": "hidden",
8379
"position": "absolute",
8480
"top": 12,
8581
}
@@ -92,7 +88,6 @@ ShallowWrapper {
9288
style={
9389
Object {
9490
"height": 10,
95-
"overflow": "hidden",
9691
"position": "absolute",
9792
"top": 20,
9893
}
@@ -138,7 +133,6 @@ ShallowWrapper {
138133
style={
139134
Object {
140135
"height": 2,
141-
"overflow": "hidden",
142136
"position": "absolute",
143137
"top": 0,
144138
}
@@ -149,7 +143,6 @@ ShallowWrapper {
149143
style={
150144
Object {
151145
"height": 4,
152-
"overflow": "hidden",
153146
"position": "absolute",
154147
"top": 2,
155148
}
@@ -162,7 +155,6 @@ ShallowWrapper {
162155
style={
163156
Object {
164157
"height": 6,
165-
"overflow": "hidden",
166158
"position": "absolute",
167159
"top": 6,
168160
}
@@ -175,7 +167,6 @@ ShallowWrapper {
175167
style={
176168
Object {
177169
"height": 8,
178-
"overflow": "hidden",
179170
"position": "absolute",
180171
"top": 12,
181172
}
@@ -188,7 +179,6 @@ ShallowWrapper {
188179
style={
189180
Object {
190181
"height": 10,
191-
"overflow": "hidden",
192182
"position": "absolute",
193183
"top": 20,
194184
}
@@ -402,7 +392,6 @@ ShallowWrapper {
402392
style={
403393
Object {
404394
"height": 2,
405-
"overflow": "hidden",
406395
"position": "absolute",
407396
"top": 0,
408397
}
@@ -413,7 +402,6 @@ ShallowWrapper {
413402
style={
414403
Object {
415404
"height": 4,
416-
"overflow": "hidden",
417405
"position": "absolute",
418406
"top": 2,
419407
}
@@ -426,7 +414,6 @@ ShallowWrapper {
426414
style={
427415
Object {
428416
"height": 6,
429-
"overflow": "hidden",
430417
"position": "absolute",
431418
"top": 6,
432419
}
@@ -439,7 +426,6 @@ ShallowWrapper {
439426
style={
440427
Object {
441428
"height": 8,
442-
"overflow": "hidden",
443429
"position": "absolute",
444430
"top": 12,
445431
}
@@ -452,7 +438,6 @@ ShallowWrapper {
452438
style={
453439
Object {
454440
"height": 10,
455-
"overflow": "hidden",
456441
"position": "absolute",
457442
"top": 20,
458443
}
@@ -498,7 +483,6 @@ ShallowWrapper {
498483
style={
499484
Object {
500485
"height": 2,
501-
"overflow": "hidden",
502486
"position": "absolute",
503487
"top": 0,
504488
}
@@ -509,7 +493,6 @@ ShallowWrapper {
509493
style={
510494
Object {
511495
"height": 4,
512-
"overflow": "hidden",
513496
"position": "absolute",
514497
"top": 2,
515498
}
@@ -522,7 +505,6 @@ ShallowWrapper {
522505
style={
523506
Object {
524507
"height": 6,
525-
"overflow": "hidden",
526508
"position": "absolute",
527509
"top": 6,
528510
}
@@ -535,7 +517,6 @@ ShallowWrapper {
535517
style={
536518
Object {
537519
"height": 8,
538-
"overflow": "hidden",
539520
"position": "absolute",
540521
"top": 12,
541522
}
@@ -548,7 +529,6 @@ ShallowWrapper {
548529
style={
549530
Object {
550531
"height": 10,
551-
"overflow": "hidden",
552532
"position": "absolute",
553533
"top": 20,
554534
}

‎src/components/TracePage/TraceTimelineViewer/ListView/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,7 @@ export default class ListView extends React.Component<ListViewProps> {
358358
// (likely not transferable to other contexts, and instead is specific to
359359
// how we have the items rendered)
360360
const measureSrc: Element = node.firstElementChild || node;
361-
const observed = measureSrc.scrollHeight;
361+
const observed = measureSrc.clientHeight;
362362
const known = this._knownHeights.get(itemKey);
363363
if (observed !== known) {
364364
this._knownHeights.set(itemKey, observed);
@@ -437,7 +437,6 @@ export default class ListView extends React.Component<ListViewProps> {
437437
position: 'absolute',
438438
top: this._yPositions.ys[i],
439439
height: this._yPositions.heights[i],
440-
overflow: 'hidden',
441440
};
442441
const itemKey = getKeyFromIndex(i);
443442
const attrs = { 'data-item-key': itemKey };

‎src/components/TracePage/TraceTimelineViewer/SpanBar.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ THE SOFTWARE.
2929
top: 0;
3030
overflow: hidden;
3131
opacity: 0.5;
32+
z-index: 0;
3233
}
3334

3435
.span-row.is-expanded .SpanBar--wrapper,

‎src/components/TracePage/TraceTimelineViewer/SpanBarRow.css‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,14 @@ THE SOFTWARE.
2121
*/
2222

2323
.span-name-column {
24-
background: #fafafa;
2524
position: relative;
2625
text-overflow: ellipsis;
2726
white-space: nowrap;
27+
z-index: 1;
2828
}
2929

30-
.span-row:hover .span-name-column {
31-
background: #f8f8f8;
32-
}
33-
34-
.span-row.is-expanded .span-name-column {
35-
background: #f0f0f0;
36-
outline: 1px solid #ddd;
30+
.span-name-column:hover {
31+
z-index: 1;
3732
}
3833

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

4944
.span-name-wrapper {
45+
background: #fafafa;
46+
border-right: 1px solid #bbb;
5047
overflow: hidden;
5148
text-overflow: ellipsis;
5249
}
5350

51+
.span-name-wrapper:hover {
52+
float: left;
53+
min-width: 100%;
54+
overflow: visible;
55+
}
56+
57+
.span-row:hover .span-name-wrapper {
58+
background: #f8f8f8;
59+
background: linear-gradient(90deg, #fafafa, #f8f8f8 75%, #eee);
60+
}
61+
62+
.span-row.is-expanded .span-name-wrapper {
63+
background: #f0f0f0;
64+
outline: 1px solid #ddd;
65+
}
66+
5467
.span-name {
55-
outline: none;
56-
color: #000;
5768
border-left: 4px solid;
69+
color: #000;
5870
cursor: pointer;
5971
display: inline;
60-
}
61-
.span-name.is-detail-expanded {
62-
display: inline-block;
72+
outline: none;
73+
padding-right: 0.25em;
6374
}
6475

6576
.endpoint-name {
@@ -87,6 +98,7 @@ THE SOFTWARE.
8798

8899
.span-row:hover .span-view {
89100
background-color: #f5f5f5;
101+
outline: 1px solid #ddd;
90102
}
91103

92104
.span-row.is-expanded .span-view {

‎src/components/TracePage/TraceTimelineViewer/SpanBarRow.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,6 @@ export default function SpanBarRow(props) {
5959
longLabel = `${label} | ${labelDetail}`;
6060
hintSide = 'right';
6161
}
62-
63-
let title = serviceName;
64-
if (rpc) {
65-
title += ` → ${rpc.serviceName}::${rpc.operationName}`;
66-
} else {
67-
title += `::${operationName}`;
68-
}
6962
return (
7063
<TimelineRow
7164
className={`
@@ -76,7 +69,7 @@ export default function SpanBarRow(props) {
7669
`}
7770
>
7871
<TimelineRow.Left className="span-name-column">
79-
<div className="span-name-wrapper" title={title}>
72+
<div className="span-name-wrapper">
8073
<SpanTreeOffset
8174
level={depth + 1}
8275
hasChildren={isParent}

‎src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ THE SOFTWARE.
2222

2323

2424
.detail-row-name-column {
25-
position: absolute;
26-
height: 100%;
25+
border-right: 1px solid #bbb;
2726
}
2827

2928
.detail-row-expanded-accent {
@@ -63,7 +62,7 @@ THE SOFTWARE.
6362
.detail-info-wrapper {
6463
background: #f5f5f5;
6564
border: 1px solid #d3d3d3;
66-
border-left-color: #bbb;
65+
border-left: none;
6766
border-top: 3px solid;
6867
box-shadow:
6968
inset 0 16px 20px -20px rgba(0,0,0,0.45),

‎src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,17 +58,15 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
5858
} = props;
5959
return (
6060
<TimelineRow className={`detail-row ${isFilteredOut ? 'is-filtered-out' : ''}`}>
61-
<TimelineRow.Left>
62-
<div className="detail-row-name-column">
63-
<SpanTreeOffset level={span.depth + 1} />
64-
<span>
65-
<span
66-
className="detail-row-expanded-accent"
67-
onClick={detailToggle}
68-
style={{ borderColor: color }}
69-
/>
70-
</span>
71-
</div>
61+
<TimelineRow.Left className="detail-row-name-column">
62+
<SpanTreeOffset level={span.depth + 1} />
63+
<span>
64+
<span
65+
className="detail-row-expanded-accent"
66+
onClick={detailToggle}
67+
style={{ borderColor: color }}
68+
/>
69+
</span>
7270
</TimelineRow.Left>
7371
<TimelineRow.Right>
7472
<div className="p2 detail-info-wrapper" style={{ borderTopColor: color }}>

‎src/components/TracePage/TraceTimelineViewer/Ticks.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,22 @@ export default function Ticks(props) {
2828

2929
return (
3030
<div>
31-
{ticks.map((tick, i) =>
32-
<div
33-
key={tick}
34-
className="span-row-tick"
35-
style={{
36-
left: `${tick * 100}%`,
37-
}}
38-
>
39-
{labels &&
40-
<span className={`span-row-tick-label ${tick >= 1 ? 'is-end-anchor' : ''}`}>
41-
{labels[i]}
42-
</span>}
43-
</div>
31+
{ticks.map(
32+
(tick, i) =>
33+
i
34+
? <div
35+
key={tick}
36+
className="span-row-tick"
37+
style={{
38+
left: `${tick * 100}%`,
39+
}}
40+
>
41+
{labels &&
42+
<span className={`span-row-tick-label ${tick >= 1 ? 'is-end-anchor' : ''}`}>
43+
{labels[i]}
44+
</span>}
45+
</div>
46+
: null
4447
)}
4548
</div>
4649
);

‎src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ THE SOFTWARE.
3030
z-index: 2;
3131
}
3232

33+
.VirtualizedTraceView--labelHeader {
34+
border-right: 1px solid #bbb;
35+
}
36+
3337
.VirtualizedTraceView--spans {
3438
padding-top: 40px;
3539
position: relative;

‎src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,7 @@ class VirtualizedTraceView extends React.PureComponent<VirtualizedTraceViewProps
344344
<div className="">
345345
<TimelineRow className="VirtualizedTraceView--headerRow">
346346
<TimelineRow.Left>
347-
<h3 className="m0 p1">Span Name</h3>
347+
<h3 className="m0 p1 VirtualizedTraceView--labelHeader">Service &amp; Operation</h3>
348348
</TimelineRow.Left>
349349
<TimelineRow.Right>
350350
<Ticks labels={ticks.map(tick => formatDuration(getDuationAtTick(tick)))} ticks={ticks} />

0 commit comments

Comments
 (0)