Skip to content

Commit

Permalink
Merge branch 'master' into milestone1/issue-63-left-column-adjustable…
Browse files Browse the repository at this point in the history 
…-in-trace-detail
  • Loading branch information
@tiffon
tiffon committed Sep 14, 2017
2 parents dc8f2d4 + d68662c commit 41eaff4
Show file tree
Hide file tree
Showing 7 changed files with 39 additions and 61 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;
overflow: hidden;
text-overflow: ellipsis;
}

.span-name-wrapper:hover {
border-right: 1px solid #bbb;
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 @@ -60,13 +60,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 @@ -77,7 +70,7 @@ export default function SpanBarRow(props) {
`}
>
<TimelineRow.Cell className="span-name-column" width={columnDivision}>
<div className="span-name-wrapper" title={title}>
<div className="span-name-wrapper">
<SpanTreeOffset
level={depth + 1}
hasChildren={isParent}
Expand Down
11 changes: 3 additions & 8 deletions src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,11 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/


.detail-row-name-column {
position: absolute;
height: 100%;
}

.detail-row-expanded-accent {
cursor: pointer;
position: absolute;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}

Expand Down Expand Up @@ -63,7 +58,7 @@ THE SOFTWARE.
.detail-info-wrapper {
background: #f5f5f5;
border: 1px solid #d3d3d3;
border-left-color: #bbb;
border-left: 1px solid #bbb;
border-top: 3px solid;
box-shadow:
inset 0 16px 20px -20px rgba(0,0,0,0.45),
Expand Down
18 changes: 8 additions & 10 deletions src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,16 +61,14 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
return (
<TimelineRow className={`detail-row ${isFilteredOut ? 'is-filtered-out' : ''}`}>
<TimelineRow.Cell width={columnDivision}>
<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>
<SpanTreeOffset level={span.depth + 1} />
<span>
<span
className="detail-row-expanded-accent"
onClick={detailToggle}
style={{ borderColor: color }}
/>
</span>
</TimelineRow.Cell>
<TimelineRow.Cell width={1 - columnDivision}>
<div className="p2 detail-info-wrapper" style={{ borderTopColor: color }}>
Expand Down

0 comments on commit 41eaff4

Please sign in to comment.