Virtualized traced results list

Signed-off-by: Ruben Vargas <[email protected]>
jaegertracing · Mar 10, 2019 · f19f71c · f19f71c
1 parent 2a179bf
commit f19f71c
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 74 deletions.
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.js
@@ -48,7 +48,7 @@ export default class DiffSelection extends React.PureComponent<Props> {
       </Button>
     );
     return (
-      <div className={`DiffSelection ${traces.length ? 'is-non-empty' : ''} ub-mb3`}>
+      <div className={`DiffSelection ${traces.length ? 'is-non-empty' : ''}`}>
         {traces.length > 0 && (
           <div className="DiffSelection--selectedItems">
             {traces.map(fetchedTrace => {

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.js
@@ -60,55 +60,57 @@ export default class ResultItem extends React.PureComponent<Props> {
     const numSpans = spans.length;
     const numErredSpans = spans.filter(sp => sp.tags.some(isErrorTag)).length;
     return (
-      <div className="ResultItem">
-        <ResultItemTitle
-          duration={duration}
-          durationPercent={durationPercent}
-          isInDiffCohort={isInDiffCohort}
-          linkTo={linkTo}
-          toggleComparison={toggleComparison}
-          traceID={traceID}
-          traceName={traceName}
-          disableComparision={disableComparision}
-        />
-        <Link to={linkTo}>
-          <Row>
-            <Col span={4} className="ub-p2">
-              <Tag className="ub-m1" data-test={markers.NUM_SPANS}>
-                {numSpans} Span{numSpans > 1 && 's'}
-              </Tag>
-              {Boolean(numErredSpans) && (
-                <Tag className="ub-m1" color="red">
-                  {numErredSpans} Error{numErredSpans > 1 && 's'}
+      <div className="ub-pt3">
+        <div className="ResultItem">
+          <ResultItemTitle
+            duration={duration}
+            durationPercent={durationPercent}
+            isInDiffCohort={isInDiffCohort}
+            linkTo={linkTo}
+            toggleComparison={toggleComparison}
+            traceID={traceID}
+            traceName={traceName}
+            disableComparision={disableComparision}
+          />
+          <Link to={linkTo}>
+            <Row>
+              <Col span={4} className="ub-p2">
+                <Tag className="ub-m1" data-test={markers.NUM_SPANS}>
+                  {numSpans} Span{numSpans > 1 && 's'}
                 </Tag>
-              )}
-            </Col>
-            <Col span={16} className="ub-p2">
-              <ul className="ub-list-reset" data-test={markers.SERVICE_TAGS}>
-                {sortBy(services, s => s.name).map(service => {
-                  const { name, numberOfSpans: count } = service;
-                  return (
-                    <li key={name} className="ub-inline-block ub-m1">
-                      <Tag
-                        className="ResultItem--serviceTag"
-                        style={{ borderLeftColor: colorGenerator.getColorByKey(name) }}
-                      >
-                        {name} ({count})
-                      </Tag>
-                    </li>
-                  );
-                })}
-              </ul>
-            </Col>
-            <Col span={4} className="ub-p3 ub-tx-right-align">
-              {formatRelativeDate(startTime / 1000)}
-              <Divider type="vertical" />
-              {timeStr.slice(0, -3)}&nbsp;{timeStr.slice(-2)}
-              <br />
-              <small>{fromNow}</small>
-            </Col>
-          </Row>
-        </Link>
+                {Boolean(numErredSpans) && (
+                  <Tag className="ub-m1" color="red">
+                    {numErredSpans} Error{numErredSpans > 1 && 's'}
+                  </Tag>
+                )}
+              </Col>
+              <Col span={16} className="ub-p2">
+                <ul className="ub-list-reset" data-test={markers.SERVICE_TAGS}>
+                  {sortBy(services, s => s.name).map(service => {
+                    const { name, numberOfSpans: count } = service;
+                    return (
+                      <li key={name} className="ub-inline-block ub-m1">
+                        <Tag
+                          className="ResultItem--serviceTag"
+                          style={{ borderLeftColor: colorGenerator.getColorByKey(name) }}
+                        >
+                          {name} ({count})
+                        </Tag>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </Col>
+              <Col span={4} className="ub-p3 ub-tx-right-align">
+                {formatRelativeDate(startTime / 1000)}
+                <Divider type="vertical" />
+                {timeStr.slice(0, -3)}&nbsp;{timeStr.slice(-2)}
+                <br />
+                <small>{fromNow}</small>
+              </Col>
+            </Row>
+          </Link>
+        </div>
       </div>
     );
   }

diff --git a/...-ui/src/components/SearchTracePage/SearchResults/__snapshots__/DiffSelection.test.js.snap b/...-ui/src/components/SearchTracePage/SearchResults/__snapshots__/DiffSelection.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`DiffSelection renders a trace as expected 1`] = `
 <div
-  className="DiffSelection is-non-empty ub-mb3"
+  className="DiffSelection is-non-empty"
 >
   <div
     className="DiffSelection--selectedItems"
@@ -48,7 +48,7 @@ exports[`DiffSelection renders a trace as expected 1`] = `
 
 exports[`DiffSelection renders multiple traces as expected 1`] = `
 <div
-  className="DiffSelection is-non-empty ub-mb3"
+  className="DiffSelection is-non-empty"
 >
   <div
     className="DiffSelection--selectedItems"

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js
@@ -36,6 +36,7 @@ import type { FetchedTrace } from '../../../types';
 import type { SearchQuery } from '../../../types/search';
 
 import './index.css';
+import ListView from '../../common/ListView';
 
 type SearchResultsProps = {
   cohortAddTrace: string => void,
@@ -83,9 +84,16 @@ export const sortFormSelector = formValueSelector('traceResultsSort');
 
 export default class SearchResults extends React.PureComponent<SearchResultsProps> {
   props: SearchResultsProps;
-
   static defaultProps = { skipMessage: false };
 
+  constructor(props) {
+    super(props);
+    const { queryOfResults, diffCohort } = this.props;
+    const searchUrl = getUrl(stripEmbeddedState(queryOfResults));
+    const cohortIds = new Set(diffCohort.map(datum => datum.id));
+    this.state = { searchUrl, cohortIds };
+  }
+
   toggleComparison = (traceID: string, remove: boolean) => {
     const { cohortAddTrace, cohortRemoveTrace } = this.props;
     if (remove) {
@@ -95,14 +103,43 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
     }
   };
 
+  getKeyFromIndex = (index: number) => this.props.traces[index].traceID;
+
+  getIndexFromKey = (key: string) => {
+    const size = this.props.traces.length;
+    for (let i = 0; i < size; ++i) {
+      if (this.props.traces[i].traceID === key) {
+        return i;
+      }
+    }
+    return -1;
+  };
+
+  renderRow = (key: string, style: Style, index: number, attrs: {}) => {
+    const trace = this.props.traces[index];
+    const { disableComparisons, maxTraceDuration } = this.props;
+
+    return (
+      <div className="u-width-100" key={key} style={style} {...attrs}>
+        <ResultItem
+          durationPercent={getPercentageOfDuration(trace.duration, maxTraceDuration)}
+          isInDiffCohort={this.state.cohortIds.has(trace.traceID)}
+          linkTo={getLocation(trace.traceID, { fromSearch: this.state.searchUrl })}
+          toggleComparison={this.toggleComparison}
+          trace={trace}
+          disableComparision={disableComparisons}
+        />
+      </div>
+    );
+  };
+
   render() {
     const {
       diffCohort,
       disableComparisons,
       goToTrace,
       hideGraph,
       loading,
-      maxTraceDuration,
       queryOfResults,
       showStandaloneLink,
       skipMessage,
@@ -131,7 +168,7 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
         </React.Fragment>
       );
     }
-    const cohortIds = new Set(diffCohort.map(datum => datum.id));
+
     const searchUrl = getUrl(stripEmbeddedState(queryOfResults));
     return (
       <div>
@@ -173,20 +210,17 @@ export default class SearchResults extends React.PureComponent<SearchResultsProp
         </div>
         <div>
           {diffSelection}
-          <ul className="ub-list-reset">
-            {traces.map(trace => (
-              <li className="ub-my3" key={trace.traceID}>
-                <ResultItem
-                  durationPercent={getPercentageOfDuration(trace.duration, maxTraceDuration)}
-                  isInDiffCohort={cohortIds.has(trace.traceID)}
-                  linkTo={getLocation(trace.traceID, { fromSearch: searchUrl })}
-                  toggleComparison={this.toggleComparison}
-                  trace={trace}
-                  disableComparision={disableComparisons}
-                />
-              </li>
-            ))}
-          </ul>
+          <ListView
+            dataLength={this.props.traces.length}
+            itemHeightGetter={() => 155}
+            itemRenderer={this.renderRow}
+            viewBuffer={20}
+            viewBufferMin={10}
+            itemsWrapperClassName="u-width-100"
+            getKeyFromIndex={this.getKeyFromIndex}
+            getIndexFromKey={this.getIndexFromKey}
+            windowScroller
+          />
         </div>
       </div>
     );

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js
@@ -17,10 +17,10 @@ import { shallow } from 'enzyme';
 
 import SearchResults from '.';
 import * as markers from './index.markers';
-import ResultItem from './ResultItem';
 import ScatterPlot from './ScatterPlot';
 import DiffSelection from './DiffSelection.js';
 import LoadingIndicator from '../../common/LoadingIndicator';
+import ListView from '../../common/ListView';
 
 describe('<SearchResults>', () => {
   let wrapper;
@@ -65,7 +65,7 @@ describe('<SearchResults>', () => {
     });
 
     it('shows a result entry for each trace', () => {
-      expect(wrapper.find(ResultItem).length).toBe(traces.length);
+      expect(wrapper.find(ListView)).toBeDefined();
     });
   });
 });
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.js
@@ -20,7 +20,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { actions } from './duck';
-import ListView from './ListView';
+import ListView from '../../common/ListView';
 import SpanBarRow from './SpanBarRow';
 import DetailState from './SpanDetail/DetailState';
 import SpanDetailRow from './SpanDetailRow';

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.test.js
@@ -14,7 +14,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import ListView from './ListView';
+import ListView from '../../common/ListView';
 import SpanBarRow from './SpanBarRow';
 import DetailState from './SpanDetail/DetailState';
 import SpanDetailRow from './SpanDetailRow';

diff --git a/...TraceTimelineViewer/ListView/Positions.js → ...c/components/common/ListView/Positions.js b/...TraceTimelineViewer/ListView/Positions.js → ...c/components/common/ListView/Positions.js
diff --git a/...TimelineViewer/ListView/Positions.test.js → ...ponents/common/ListView/Positions.test.js b/...TimelineViewer/ListView/Positions.test.js → ...ponents/common/ListView/Positions.test.js
diff --git a/...ListView/__snapshots__/index.test.js.snap → ...ListView/__snapshots__/index.test.js.snap b/...ListView/__snapshots__/index.test.js.snap → ...ListView/__snapshots__/index.test.js.snap
diff --git a/...age/TraceTimelineViewer/ListView/index.js → ...i/src/components/common/ListView/index.js b/...age/TraceTimelineViewer/ListView/index.js → ...i/src/components/common/ListView/index.js
diff --git a/...raceTimelineViewer/ListView/index.test.js → .../components/common/ListView/index.test.js b/...raceTimelineViewer/ListView/index.test.js → .../components/common/ListView/index.test.js
@@ -15,8 +15,8 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 
-import ListView from './index';
-import { polyfill as polyfillAnimationFrame } from '../../../../utils/test/requestAnimationFrame';
+import ListView from '.';
+import { polyfill as polyfillAnimationFrame } from '../../../utils/test/requestAnimationFrame';
 
 // Util to get list of all callbacks added to an event emitter by event type.
 // jest adds "error" event listeners to window, this util makes it easier to