diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/index.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/index.js index ead13feacb..2333a2d4cd 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/index.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/index.js @@ -391,10 +391,11 @@ export default class ListView extends React.Component { const { dataLength, getKeyFromIndex, initialDraw, itemRenderer, viewBuffer, viewBufferMin } = this.props; const heightGetter = this._getHeight; const items = []; - let start; let end; + this._yPositions.profileData(dataLength); + if (!this._wrapperElm) { start = 0; end = (initialDraw < dataLength ? initialDraw : dataLength) - 1; @@ -417,7 +418,6 @@ export default class ListView extends React.Component { } } - this._yPositions.profileData(dataLength); this._yPositions.calcHeights(end, heightGetter, start || -1); this._startIndexDrawn = start; this._endIndexDrawn = end; diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css index 6be2e0d87a..c5e0db9792 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css @@ -15,9 +15,14 @@ limitations under the License. */ .TimelineCollapser { - float: right; - margin: 0 0.8rem 0 0; - display: inline-block; + align-items: center; + display: flex; + flex: none; + justify-content: center; +} + +.TimelineCollapser--tooltipTitle { + white-space: pre; } .TimelineCollapser--btn, diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.js index 2e905d72d5..1e954488ce 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.js @@ -15,7 +15,6 @@ // limitations under the License. import React from 'react'; - import { Tooltip, Icon } from 'antd'; import './TimelineCollapser.css'; @@ -27,22 +26,38 @@ type CollapserProps = { onExpandAll: () => void, }; -export default function TimelineCollapser(props: CollapserProps) { - const { onExpandAll, onExpandOne, onCollapseAll, onCollapseOne } = props; - return ( - - - - - - - - - - - - - - - ); +function getTitle(value: string) { + return {value}; +} + +export default class TimelineCollapser extends React.PureComponent { + props: CollapserProps; + containerRef: { current: HTMLDivElement | null }; + + constructor(props: CollapserProps) { + super(props); + this.containerRef = React.createRef(); + } + + getContainer = () => this.containerRef.current; + + render() { + const { onExpandAll, onExpandOne, onCollapseAll, onCollapseOne } = this.props; + return ( +
+ + + + + + + + + + + + +
+ ); + } } diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css index 45eb9c5c2d..da1281ac0c 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css @@ -19,16 +19,15 @@ limitations under the License. border-bottom: 1px solid #d8d8d8; height: 38px; line-height: 38px; - overflow: hidden; position: fixed; width: 100%; - z-index: 2; + z-index: 4; } .TimelineHeaderRow--title { - display: inline-block; + flex: 1; overflow: hidden; - margin: 0 0 0 0.5rem; + margin: 0; text-overflow: ellipsis; white-space: nowrap; } diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js index 9c0a1e922a..053ed052af 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js @@ -56,7 +56,7 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) { const [viewStart, viewEnd] = viewRangeTime.current; return ( - +

Service & Operation

?Set) = (textFilter: string) => { + filterSpans = (textFilter: string) => { const spans = this.props.trace && this.props.trace.data && this.props.trace.data.spans; if (!spans) return null; @@ -258,7 +258,9 @@ export class TracePageImpl extends React.PureComponent isTextInKeyValues(log.fields)) || isTextInKeyValues(span.process.tags); - return new Set(spans.filter(isSpanAMatch).map((span: Span) => span.spanID)); + // declare as const because need to disambiguate the type + const rv: Set = new Set(spans.filter(isSpanAMatch).map((span: Span) => span.spanID)); + return rv; }; updateTextFilter = (textFilter: string) => {