fix: waterfall undefined strings (#803)

Author: jake-bassett

projects/components/src/sequence/sequence-chart.component.ts

@@ -115,7 +115,6 @@ export class SequenceChartComponent implements OnChanges {
       id: segment.id,
       start: segment.start - minStart,
       end: segment.end - minStart,
-      label: segment.label,
       color: segment.color
     }));
   }

projects/components/src/sequence/sequence.ts

@@ -5,7 +5,6 @@ export interface SequenceSegment {
   id: string;
   start: number;
   end: number;
-  label: string;
   color: string;
 }
 

projects/distributed-tracing/src/pages/trace-detail/trace-detail.service.ts

@@ -103,14 +103,14 @@ export class TraceDetailService implements OnDestroy {
   private buildTimeString(trace: Trace, units: string): string {
     return `${new DateFormatter({ mode: DateFormatMode.DateAndTimeWithSeconds }).format(
       trace.startTime as number
-    )} for ${trace.duration as string} ${units}`;
+    )} for ${trace.duration as string} ${units ?? ''}`.trim();
   }
 
   private buildTitleString(trace: Trace): string {
     if (trace.spans?.length === 1) {
       const entrySpan = trace.spans[0];
 
-      return `${entrySpan.serviceName as string} ${entrySpan.displaySpanName as string}`;
+      return `${entrySpan.serviceName as string} ${(entrySpan.displaySpanName as string) ?? ''}`.trim();
     }
 
     return '';

projects/distributed-tracing/src/shared/components/span-detail/span-title.ts

@@ -2,6 +2,6 @@ export class SpanTitle {
   public constructor(public serviceName?: string, public protocolName?: string, public apiName?: string) {}
 
   public toString(): string {
-    return `${this.serviceName} ${this.protocolName} ${this.apiName}`;
+    return `${this.serviceName} ${this.protocolName ?? ''} ${this.apiName ?? ''}`.trim();
   }
 }

projects/distributed-tracing/src/shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model.test.ts

@@ -215,7 +215,7 @@ describe('Trace Waterfall data source model', () => {
               value: 1,
               units: 'ms'
             },
-            name: 'Span Name 1',
+            apiName: 'Span Name 1',
             serviceName: 'Service Name 1',
             protocolName: undefined,
             spanType: SpanType.Entry,
@@ -231,7 +231,7 @@ describe('Trace Waterfall data source model', () => {
               value: 2,
               units: 'ms'
             },
-            name: 'Span Name 2',
+            apiName: 'Span Name 2',
             serviceName: 'Service Name 2',
             protocolName: undefined,
             spanType: SpanType.Exit,

projects/distributed-tracing/src/shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model.ts

@@ -97,9 +97,9 @@ export class TraceWaterfallDataSourceModel extends GraphQlDataSourceModel<Waterf
         value: span.duration as number,
         units: duration.units
       },
-      name: span.displaySpanName as string,
       serviceName: span.serviceName as string,
       protocolName: span.protocolName as string,
+      apiName: span.displaySpanName as string,
       spanType: span.type as SpanType,
       tags: span.spanTags as Dictionary<unknown>,
       errorCount: span.errorCount as number

projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-cell-data.ts

@@ -1,7 +1,7 @@
 export interface SpanNameCellData {
   serviceName: string;
-  protocolName: string;
-  name: string;
+  protocolName?: string;
+  apiName?: string;
   color?: string;
   hasError?: boolean;
 }

projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-parser.ts

@@ -11,7 +11,7 @@ export class SpanNameTableCellParser extends TableCellParserBase<SpanNameCellDat
   }
 
   public parseTooltip(cellData: SpanNameCellData): string {
-    return `${cellData.serviceName} ${cellData.protocolName} ${cellData.name}`;
+    return `${cellData.serviceName} ${cellData.protocolName ?? ''} ${cellData.apiName ?? ''}`.trim();
   }
 
   public parseFilterValue(): undefined {

projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.test.ts

@@ -8,7 +8,7 @@ describe('Span name table cell renderer component', () => {
   const spanNameData = {
     serviceName: 'test-entity',
     protocolName: 'test-protocol',
-    name: 'test-span-name'
+    apiName: 'test-span-name'
   };
 
   const buildComponent = createComponentFactory({
@@ -30,7 +30,7 @@ describe('Span name table cell renderer component', () => {
   test('should render span name without color and error icon and build tooltip ', () => {
     const spectator = buildComponent();
 
-    const tooltip = `${spanNameData.serviceName} ${spanNameData.protocolName} ${spanNameData.name}`;
+    const tooltip = `${spanNameData.serviceName} ${spanNameData.protocolName} ${spanNameData.apiName}`;
 
     expect(spectator.component.value).toEqual(spanNameData);
     expect(spectator.component.tooltip).toEqual(tooltip);
@@ -51,7 +51,7 @@ describe('Span name table cell renderer component', () => {
       providers: [tableCellDataProvider(spanNameDataWithColor)]
     });
 
-    const tooltip = `${spanNameData.serviceName} ${spanNameData.protocolName} ${spanNameData.name}`;
+    const tooltip = `${spanNameData.serviceName} ${spanNameData.protocolName} ${spanNameData.apiName}`;
 
     expect(spectator.component.value).toEqual(spanNameDataWithColor);
     expect(spectator.component.tooltip).toEqual(tooltip);

projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.ts

@@ -19,7 +19,7 @@ import { WaterfallTableCellType } from './span-name-cell-type';
         <span class="text" data-sensitive-pii>{{ this.value.protocolName }}</span>
       </div>
       <div class="span-name">
-        <span class="text" data-sensitive-pii>{{ this.value.name }}</span>
+        <span class="text" data-sensitive-pii>{{ this.value.apiName }}</span>
       </div>
       <ht-icon
         *ngIf="this.value.hasError"