Make left column adjustable in trace detail

src/components/TracePage/TraceTimelineViewer/SpanBar.js

@@ -60,17 +60,17 @@ function SpanBar(props) {
 }
 
 SpanBar.propTypes = {
+  color: PropTypes.string.isRequired,
+  hintSide: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  viewEnd: PropTypes.number.isRequired,
+  viewStart: PropTypes.number.isRequired,
   rpc: PropTypes.shape({
     viewStart: PropTypes.number,
     viewEnd: PropTypes.number,
     color: PropTypes.string,
   }),
-  viewStart: PropTypes.number.isRequired,
-  viewEnd: PropTypes.number.isRequired,
-  color: PropTypes.string.isRequired,
-  hintSide: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
   setLongLabel: PropTypes.func,
   setShortLabel: PropTypes.func,
 };

src/components/TracePage/TraceTimelineViewer/SpanBarRow.css

@@ -43,12 +43,12 @@ THE SOFTWARE.
 
 .span-name-wrapper {
   background: #fafafa;
-  border-right: 1px solid #bbb;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .span-name-wrapper:hover {
+  border-right: 1px solid #bbb;
   float: left;
   min-width: 100%;
   overflow: visible;

src/components/TracePage/TraceTimelineViewer/SpanBarRow.js

@@ -32,6 +32,7 @@ export default function SpanBarRow(props) {
   const {
     className,
     color,
+    columnDivision,
     depth,
     isChildrenExpanded,
     isDetailExapnded,
@@ -40,11 +41,11 @@ export default function SpanBarRow(props) {
     label,
     onDetailToggled,
     onChildrenToggled,
+    numTicks,
     operationName,
     rpc,
     serviceName,
     showErrorIcon,
-    ticks,
     viewEnd,
     viewStart,
   } = props;
@@ -68,7 +69,7 @@ export default function SpanBarRow(props) {
         ${isFilteredOut ? 'is-filtered-out' : ''}
       `}
     >
-      <TimelineRow.Left className="span-name-column">
+      <TimelineRow.Cell className="span-name-column" width={columnDivision}>
         <div className="span-name-wrapper">
           <SpanTreeOffset
             level={depth + 1}
@@ -101,9 +102,14 @@ export default function SpanBarRow(props) {
             </span>
           </a>
         </div>
-      </TimelineRow.Left>
-      <TimelineRow.Right className="span-view" style={{ cursor: 'pointer' }} onClick={onDetailToggled}>
-        <Ticks ticks={ticks} />
+      </TimelineRow.Cell>
+      <TimelineRow.Cell
+        className="span-view"
+        style={{ cursor: 'pointer' }}
+        width={1 - columnDivision}
+        onClick={onDetailToggled}
+      >
+        <Ticks numTicks={numTicks} />
         <SpanBar
           rpc={rpc}
           viewStart={viewStart}
@@ -113,14 +119,15 @@ export default function SpanBarRow(props) {
           longLabel={longLabel}
           hintSide={hintSide}
         />
-      </TimelineRow.Right>
+      </TimelineRow.Cell>
     </TimelineRow>
   );
 }
 
 SpanBarRow.propTypes = {
   className: PropTypes.string,
   color: PropTypes.string.isRequired,
+  columnDivision: PropTypes.number.isRequired,
   depth: PropTypes.number.isRequired,
   isChildrenExpanded: PropTypes.bool.isRequired,
   isDetailExapnded: PropTypes.bool.isRequired,
@@ -130,6 +137,7 @@ SpanBarRow.propTypes = {
   onDetailToggled: PropTypes.func.isRequired,
   onChildrenToggled: PropTypes.func.isRequired,
   operationName: PropTypes.string.isRequired,
+  numTicks: PropTypes.number.isRequired,
   rpc: PropTypes.shape({
     viewStart: PropTypes.number,
     viewEnd: PropTypes.number,
@@ -139,7 +147,6 @@ SpanBarRow.propTypes = {
   }),
   serviceName: PropTypes.string.isRequired,
   showErrorIcon: PropTypes.bool.isRequired,
-  ticks: PropTypes.arrayOf(PropTypes.number).isRequired,
   viewEnd: PropTypes.number.isRequired,
   viewStart: PropTypes.number.isRequired,
 };

src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css

@@ -20,15 +20,11 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-
-.detail-row-name-column {
-  border-right: 1px solid #bbb;
-}
-
 .detail-row-expanded-accent {
   cursor: pointer;
-  position: absolute;
   height: 100%;
+  overflow: hidden;
+  position: absolute;
   width: 100%;
 }
 
@@ -62,7 +58,7 @@ THE SOFTWARE.
 .detail-info-wrapper {
   background: #f5f5f5;
   border: 1px solid #d3d3d3;
-  border-left: none;
+  border-left: 1px solid #bbb;
   border-top: 3px solid;
   box-shadow:
     inset 0 16px 20px -20px rgba(0,0,0,0.45),

src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js

@@ -32,6 +32,7 @@ import './SpanDetailRow.css';
 
 type SpanDetailRowProps = {
   color: string,
+  columnDivision: number,
   detailState: DetailState,
   detailToggle: string => void,
   isFilteredOut: boolean,
@@ -46,6 +47,7 @@ type SpanDetailRowProps = {
 export default function SpanDetailRow(props: SpanDetailRowProps) {
   const {
     color,
+    columnDivision,
     detailState,
     detailToggle,
     isFilteredOut,
@@ -58,7 +60,7 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
   } = props;
   return (
     <TimelineRow className={`detail-row ${isFilteredOut ? 'is-filtered-out' : ''}`}>
-      <TimelineRow.Left className="detail-row-name-column">
+      <TimelineRow.Cell width={columnDivision}>
         <SpanTreeOffset level={span.depth + 1} />
         <span>
           <span
@@ -67,8 +69,8 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
             style={{ borderColor: color }}
           />
         </span>
-      </TimelineRow.Left>
-      <TimelineRow.Right>
+      </TimelineRow.Cell>
+      <TimelineRow.Cell width={1 - columnDivision}>
         <div className="p2 detail-info-wrapper" style={{ borderTopColor: color }}>
           <SpanDetail
             detailState={detailState}
@@ -80,7 +82,7 @@ export default function SpanDetailRow(props: SpanDetailRowProps) {
             traceStartTime={traceStartTime}
           />
         </div>
-      </TimelineRow.Right>
+      </TimelineRow.Cell>
     </TimelineRow>
   );
 }

src/components/TracePage/TraceTimelineViewer/Ticks.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,42 +20,52 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
+
+import { formatDuration } from './utils';
 
 import './Ticks.css';
 
-export default function Ticks(props) {
-  const { labels, ticks } = props;
+type TicksProps = {
+  endTime: number,
+  numTicks: number,
+  showLabels?: boolean,
+  startTime: number,
+};
+
+export default function Ticks(props: TicksProps) {
+  const { endTime, numTicks, showLabels, startTime } = props;
 
+  let labels: string[];
+  if (showLabels) {
+    labels = [];
+    const viewingDuration = endTime - startTime;
+    for (let i = 0; i < numTicks; i++) {
+      const durationAtTick = startTime + i / (numTicks - 1) * viewingDuration;
+      labels.push(formatDuration(durationAtTick));
+    }
+  }
+  const ticks: React.Node[] = [];
+  for (let i = 0; i < numTicks; i++) {
+    const portion = i / (numTicks - 1);
+    ticks.push(
+      <div
+        key={portion}
+        className="span-row-tick"
+        style={{
+          left: `${portion * 100}%`,
+        }}
+      >
+        {labels &&
+          <span className={`span-row-tick-label ${portion >= 1 ? 'is-end-anchor' : ''}`}>
+            {labels[i]}
+          </span>}
+      </div>
+    );
+  }
   return (
     <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
-      )}
+      {ticks}
     </div>
   );
 }
-
-Ticks.propTypes = {
-  ticks: PropTypes.arrayOf(PropTypes.number).isRequired,
-  labels: PropTypes.arrayOf(PropTypes.string),
-};
-
-Ticks.defaultProps = {
-  labels: null,
-};