Fix collapse all issues (jaegertracing#264)

Investigated the license issues, manually, and they're fine. * Upgrade to ant-design 3.8.0 Signed-off-by: Joe Farro <joef@uber.com> * Fix issues with expand / collapse - jaegertracing#259 and jaegertracing#260 Signed-off-by: Joe Farro <joef@uber.com> * Use yarn registry Signed-off-by: Joe Farro <joef@uber.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
vvvprabhakar · Oct 11, 2018 · 7fa5292 · 7fa5292
1 parent f24c0fa
commit 7fa5292
Show file tree

Hide file tree

Showing 8 changed files with 327 additions and 172 deletions.
diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@jaegertracing/plexus": "0.0.1-dev.3",
-    "antd": "^3.0.3",
+    "antd": "3.8.0",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",
     "combokeys": "^3.0.0",

diff --git 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<ListViewProps> {
     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<ListViewProps> {
       }
     }
 
-    this._yPositions.profileData(dataLength);
     this._yPositions.calcHeights(end, heightGetter, start || -1);
     this._startIndexDrawn = start;
     this._endIndexDrawn = end;

diff --git a/...r-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css b/...r-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/...er-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.js b/...er-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 (
-    <span className="TimelineCollapser">
-      <Tooltip title="Expand +1">
-        <Icon type="right" onClick={onExpandOne} className="TimelineCollapser--btn-expand" />
-      </Tooltip>
-      <Tooltip title="Collapse +1">
-        <Icon type="right" onClick={onCollapseOne} className="TimelineCollapser--btn" />
-      </Tooltip>
-      <Tooltip title="Expand All">
-        <Icon type="double-right" onClick={onExpandAll} className="TimelineCollapser--btn-expand" />
-      </Tooltip>
-      <Tooltip title="Collapse All">
-        <Icon type="double-right" onClick={onCollapseAll} className="TimelineCollapser--btn" />
-      </Tooltip>
-    </span>
-  );
+function getTitle(value: string) {
+  return <span className="TimelineCollapser--tooltipTitle">{value}</span>;
+}
+
+export default class TimelineCollapser extends React.PureComponent<CollapserProps> {
+  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 (
+      <div className="TimelineCollapser" ref={this.containerRef}>
+        <Tooltip title={getTitle('Expand +1')} getPopupContainer={this.getContainer}>
+          <Icon type="right" onClick={onExpandOne} className="TimelineCollapser--btn-expand" />
+        </Tooltip>
+        <Tooltip title={getTitle('Collapse +1')} getPopupContainer={this.getContainer}>
+          <Icon type="right" onClick={onCollapseOne} className="TimelineCollapser--btn" />
+        </Tooltip>
+        <Tooltip title={getTitle('Expand All')} getPopupContainer={this.getContainer}>
+          <Icon type="double-right" onClick={onExpandAll} className="TimelineCollapser--btn-expand" />
+        </Tooltip>
+        <Tooltip title={getTitle('Collapse All')} getPopupContainer={this.getContainer}>
+          <Icon type="double-right" onClick={onCollapseAll} className="TimelineCollapser--btn" />
+        </Tooltip>
+      </div>
+    );
+  }
 }
diff --git a/...r-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css b/...r-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/...er-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js b/...er-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js
@@ -56,7 +56,7 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) {
   const [viewStart, viewEnd] = viewRangeTime.current;
   return (
     <TimelineRow className="TimelineHeaderRow">
-      <TimelineRow.Cell width={nameColumnWidth}>
+      <TimelineRow.Cell className="ub-flex ub-px2" width={nameColumnWidth}>
         <h3 className="TimelineHeaderRow--title">Service &amp; Operation</h3>
         <TimelineCollapser
           onCollapseAll={onCollapseAll}

diff --git a/packages/jaeger-ui/src/components/TracePage/index.js b/packages/jaeger-ui/src/components/TracePage/index.js
@@ -213,7 +213,7 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
     }
   };
 
-  filterSpans: (string => ?Set<string>) = (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<TracePageProps, TracePage
       span.logs.some(log => 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<string> = new Set(spans.filter(isSpanAMatch).map((span: Span) => span.spanID));
+    return rv;
   };
 
   updateTextFilter = (textFilter: string) => {