Fix trace name resolution

src/components/SearchTracePage/TraceResultsScatterPlot.js

@@ -19,6 +19,7 @@ import dimensions from 'react-dimensions';
 import { XYPlot, XAxis, YAxis, MarkSeries, Hint } from 'react-vis';
 import { compose, withState, withProps } from 'recompose';
 
+import FALLBACK_TRACE_NAME from '../../constants/fallback-trace-name';
 import { formatDuration } from '../../utils/date';
 
 import './react-vis.css';
@@ -47,7 +48,7 @@ function TraceResultsScatterPlotBase(props) {
         />
         {overValue && (
           <Hint value={overValue}>
-            <h4 className="scatter-plot-hint">{overValue.name || '¯\\_(ツ)_/¯'}</h4>
+            <h4 className="scatter-plot-hint">{overValue.name || FALLBACK_TRACE_NAME}</h4>
           </Hint>
         )}
       </XYPlot>

src/components/SearchTracePage/TraceSearchResult.js

@@ -19,6 +19,7 @@ import moment from 'moment';
 
 import { formatDuration } from '../../utils/date';
 import TraceServiceTag from './TraceServiceTag';
+import FALLBACK_TRACE_NAME from '../../constants/fallback-trace-name';
 
 import './TraceSearchResult.css';
 
@@ -36,7 +37,7 @@ export default function TraceSearchResult({ trace, durationPercent = 100 }) {
           background: getBackgroundStyle(durationPercent),
         }}
       >
-        <span className="trace-search-result--traceName left">{traceName}</span>
+        <span className="trace-search-result--traceName left">{traceName || FALLBACK_TRACE_NAME}</span>
         <span className="trace-search-result--duration right">{formatDuration(duration * 1000)}</span>
       </div>
       <div className="p1">

src/components/TracePage/TracePageHeader.js

@@ -18,6 +18,7 @@ import * as React from 'react';
 import { Dropdown, Menu } from 'semantic-ui-react';
 
 import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
+import FALLBACK_TRACE_NAME from '../../constants/fallback-trace-name';
 import { formatDatetime, formatDuration } from '../../utils/date';
 
 type TracePageHeaderProps = {
@@ -91,7 +92,7 @@ export default function TracePageHeader(props: TracePageHeaderProps) {
                 style={{ float: 'none' }}
               />
             </a>
-            {name}
+            {name || FALLBACK_TRACE_NAME}
           </h2>
         </div>
         <div className="inline-block mr1">

src/components/TracePage/index.js

@@ -236,7 +236,7 @@ export default class TracePage extends React.PureComponent<TracePageProps, Trace
           <TracePageHeader
             duration={duration}
             maxDepth={maxSpanDepth}
-            name={getTraceName(spans, processes)}
+            name={getTraceName(spans)}
             numServices={numberOfServices}
             numSpans={spans.length}
             slimView={slimView}

src/constants/fallback-trace-name.js

@@ -0,0 +1,15 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export default '<cannot-find-trace-name>';

src/model/search.js

@@ -39,9 +39,8 @@ export function getTraceSummary(trace: Trace): TraceSummary {
   let numErrorSpans = 0;
   // serviceName -> { name, numberOfSpans }
   const serviceMap = {};
-
   for (let i = 0; i < spans.length; i++) {
-    const { duration, processID, spanID, startTime, tags } = spans[i];
+    const { duration, processID, references, startTime, tags } = spans[i];
     // time bounds of trace
     minTs = minTs > startTime ? startTime : minTs;
     maxTs = maxTs < startTime + duration ? startTime + duration : maxTs;
@@ -61,8 +60,7 @@ export function getTraceSummary(trace: Trace): TraceSummary {
       };
       serviceMap[serviceName] = svcData;
     }
-    // trace name
-    if (spanID === traceID) {
+    if (!references || !references.length) {
       const { operationName } = spans[i];
       traceName = `${svcData.name}: ${operationName}`;
     }

src/model/search.test.js

@@ -51,7 +51,7 @@ describe('getTraceSummary()', () => {
         {
           traceID: 'main-id',
           processID: 'pid0',
-          spanID: 'main-id',
+          spanID: 'span-id-0',
           operationName: 'op0',
           startTime: 1502221240933000,
           duration: 236857,
@@ -65,6 +65,7 @@ describe('getTraceSummary()', () => {
           startTime: 1502221241144382,
           duration: 25305,
           tags: [],
+          references: [{ refType: 'CHILD_OF', traceID: 'main-id', spanID: 'span-id-0' }],
         },
       ],
       duration: 236857,

src/model/trace-viewer.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 // eslint-disable-next-line import/prefer-default-export
-export function getTraceName(spans, processes) {
-  const span = spans.find(sp => sp.spanID === sp.traceID) || spans[0];
-  return span ? `${processes[span.processID].serviceName}: ${span.operationName}` : '';
+export function getTraceName(spans) {
+  const span = spans.filter(sp => !sp.references || !sp.references.length)[0];
+  return span ? `${span.process.serviceName}: ${span.operationName}` : '';
 }