From 7e78355e42484a3a90ebeaa308a2dd106512852b Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Tue, 27 Apr 2021 14:39:08 -0700
Subject: [PATCH] fix: waterfall undefined strings

---
 .../components/src/sequence/sequence-chart.component.ts     | 1 -
 projects/components/src/sequence/sequence.ts                | 1 -
 .../src/pages/trace-detail/trace-detail.service.ts          | 4 ++--
 .../src/shared/components/span-detail/span-title.ts         | 2 +-
 .../waterfall/trace-waterfall-data-source.model.test.ts     | 4 ++--
 .../graphql/waterfall/trace-waterfall-data-source.model.ts  | 2 +-
 .../waterfall/waterfall/span-name/span-name-cell-data.ts    | 4 ++--
 .../waterfall/span-name/span-name-table-cell-parser.ts      | 2 +-
 .../span-name-table-cell-renderer.component.test.ts         | 6 +++---
 .../span-name/span-name-table-cell-renderer.component.ts    | 2 +-
 .../waterfall/waterfall/waterfall-chart.component.test.ts   | 6 +++---
 .../widgets/waterfall/waterfall/waterfall-chart.module.ts   | 4 +++-
 .../widgets/waterfall/waterfall/waterfall-chart.service.ts  | 3 +--
 .../widgets/waterfall/waterfall/waterfall-chart.ts          | 4 ++--
 .../waterfall/api-trace-waterfall-data-source.model.test.ts | 4 ++--
 .../waterfall/api-trace-waterfall-data-source.model.ts      | 2 +-
 16 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/projects/components/src/sequence/sequence-chart.component.ts b/projects/components/src/sequence/sequence-chart.component.ts
index 74704d146..aefda7e57 100644
--- a/projects/components/src/sequence/sequence-chart.component.ts
+++ b/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
     }));
   }
diff --git a/projects/components/src/sequence/sequence.ts b/projects/components/src/sequence/sequence.ts
index 4e1b45130..3495d58d3 100644
--- a/projects/components/src/sequence/sequence.ts
+++ b/projects/components/src/sequence/sequence.ts
@@ -5,7 +5,6 @@ export interface SequenceSegment {
   id: string;
   start: number;
   end: number;
-  label: string;
   color: string;
 }
 
diff --git a/projects/distributed-tracing/src/pages/trace-detail/trace-detail.service.ts b/projects/distributed-tracing/src/pages/trace-detail/trace-detail.service.ts
index 1052dfbcc..5d6a80881 100644
--- a/projects/distributed-tracing/src/pages/trace-detail/trace-detail.service.ts
+++ b/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 '';
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-title.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-title.ts
index 2266a5853..6ca3241d6 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-title.ts
+++ b/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();
   }
 }
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model.test.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model.test.ts
index c0e8837d2..db942fc88 100644
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model.test.ts
+++ b/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,
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model.ts
index b4d363424..1f6c399c1 100644
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model.ts
+++ b/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
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-cell-data.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-cell-data.ts
index 1d9cbf441..98d5863ca 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-cell-data.ts
+++ b/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;
 }
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-parser.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-parser.ts
index cf1c6e814..6bbac0d48 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-parser.ts
+++ b/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 {
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.test.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.test.ts
index c4e07028b..626747f60 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.test.ts
+++ b/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);
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.ts
index 50cb8222a..d310aa23b 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.ts
+++ b/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"
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.component.test.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.component.test.ts
index ff3905c57..a28cd97be 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.component.test.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.component.test.ts
@@ -22,7 +22,7 @@ describe('Waterfall Chart component', () => {
         value: 1,
         units: 'ms'
       },
-      name: 'Span Name 1',
+      apiName: 'Span Name 1',
       serviceName: 'Service Name 1',
       protocolName: 'Protocol Name 1',
       spanType: SpanType.Entry,
@@ -43,7 +43,7 @@ describe('Waterfall Chart component', () => {
         value: 2,
         units: 'ms'
       },
-      name: 'Span Name 2',
+      apiName: 'Span Name 2',
       serviceName: 'Service Name 2',
       protocolName: 'Protocol Name 2',
       spanType: SpanType.Exit,
@@ -64,7 +64,7 @@ describe('Waterfall Chart component', () => {
         value: 2,
         units: 'ms'
       },
-      name: 'Span Name 3',
+      apiName: 'Span Name 3',
       serviceName: 'Service Name 1',
       protocolName: 'Protocol Name 3',
       spanType: SpanType.Exit,
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.module.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.module.ts
index 3905c63f5..aff1f69e6 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.module.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormattingModule } from '@hypertrace/common';
 import { IconModule, SequenceChartModule, TableModule, TooltipModule } from '@hypertrace/components';
 import { SpanNameTableCellParser } from './span-name/span-name-table-cell-parser';
 import { SpanNameTableCellRendererComponent } from './span-name/span-name-table-cell-renderer.component';
@@ -13,7 +14,8 @@ import { WaterfallChartComponent } from './waterfall-chart.component';
     TableModule.withCellParsers([SpanNameTableCellParser]),
     TableModule.withCellRenderers([SpanNameTableCellRendererComponent]),
     TooltipModule,
-    IconModule
+    IconModule,
+    FormattingModule
   ],
   exports: [WaterfallChartComponent]
 })
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.service.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.service.ts
index 0a9dc0948..142813a93 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.service.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.service.ts
@@ -39,7 +39,7 @@ export class WaterfallChartService {
           children: []
         },
         $$spanName: {
-          name: datum.name,
+          apiName: datum.apiName,
           serviceName: datum.serviceName,
           protocolName: datum.protocolName,
           hasError: datum.errorCount > 0
@@ -88,7 +88,6 @@ export class WaterfallChartService {
           id: node.id,
           start: node.startTime,
           end: node.endTime,
-          label: node.name,
           color: node.color!
         });
 
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
index 6aa1f4b63..e05b239ad 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
@@ -13,9 +13,9 @@ export interface WaterfallData {
     value: number;
     units?: string;
   };
-  name: string;
   serviceName: string;
-  protocolName: string;
+  protocolName?: string;
+  apiName?: string;
   spanType: SpanType;
   requestHeaders?: Dictionary<unknown>;
   requestBody?: string;
diff --git a/projects/observability/src/shared/dashboard/data/graphql/waterfall/api-trace-waterfall-data-source.model.test.ts b/projects/observability/src/shared/dashboard/data/graphql/waterfall/api-trace-waterfall-data-source.model.test.ts
index dea3d6ba5..220d76c55 100644
--- a/projects/observability/src/shared/dashboard/data/graphql/waterfall/api-trace-waterfall-data-source.model.test.ts
+++ b/projects/observability/src/shared/dashboard/data/graphql/waterfall/api-trace-waterfall-data-source.model.test.ts
@@ -224,7 +224,7 @@ describe('Api Trace Waterfall data source model', () => {
               units: 'ms'
             },
             serviceName: 'Entity Name 1',
-            name: 'Span Name 1',
+            apiName: 'Span Name 1',
             protocolName: 'Protocol Name 1',
             spanType: SpanType.Entry,
             tags: {}
@@ -240,7 +240,7 @@ describe('Api Trace Waterfall data source model', () => {
               units: 'ms'
             },
             serviceName: 'Entity Name 2',
-            name: 'Span Name 2',
+            apiName: 'Span Name 2',
             protocolName: 'Protocol Name 2',
             spanType: SpanType.Exit,
             tags: {}
diff --git a/projects/observability/src/shared/dashboard/data/graphql/waterfall/api-trace-waterfall-data-source.model.ts b/projects/observability/src/shared/dashboard/data/graphql/waterfall/api-trace-waterfall-data-source.model.ts
index eb5cc4b64..26789a657 100644
--- a/projects/observability/src/shared/dashboard/data/graphql/waterfall/api-trace-waterfall-data-source.model.ts
+++ b/projects/observability/src/shared/dashboard/data/graphql/waterfall/api-trace-waterfall-data-source.model.ts
@@ -104,8 +104,8 @@ export class ApiTraceWaterfallDataSourceModel extends GraphQlDataSourceModel<Wat
         units: duration.units
       },
       serviceName: span.displayEntityName as string,
-      name: span.displaySpanName 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