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 0d9b356f5..c0e8837d2 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 @@ -92,6 +92,9 @@ describe('Trace Waterfall data source model', () => { }), expect.objectContaining({ name: 'traceId' + }), + expect.objectContaining({ + name: 'errorCount' }) ] } @@ -149,6 +152,9 @@ describe('Trace Waterfall data source model', () => { }), expect.objectContaining({ name: 'traceId' + }), + expect.objectContaining({ + name: 'errorCount' }) ] } 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 23cb090b5..b4d363424 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 @@ -56,7 +56,8 @@ export class TraceWaterfallDataSourceModel extends GraphQlDataSourceModel { @@ -100,7 +101,8 @@ export class TraceWaterfallDataSourceModel extends GraphQlDataSourceModel + tags: span.spanTags as Dictionary, + 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 5e752e807..1d9cbf441 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 @@ -3,4 +3,5 @@ export interface SpanNameCellData { protocolName: string; name: string; color?: string; + hasError?: boolean; } diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.scss b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.scss index dda7041d3..512260542 100644 --- a/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.scss +++ b/projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/span-name/span-name-table-cell-renderer.component.scss @@ -7,7 +7,7 @@ .span-title { display: grid; - grid-template-columns: 3px min-content min-content auto; + grid-template-columns: 3px min-content min-content min-content auto; grid-template-rows: 1fr; column-gap: 4px; 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 51c4bfff3..c4e07028b 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 @@ -27,7 +27,7 @@ describe('Span name table cell renderer component', () => { shallow: true }); - test('should render span name without color and build tooltip ', () => { + test('should render span name without color and error icon and build tooltip ', () => { const spectator = buildComponent(); const tooltip = `${spanNameData.serviceName} ${spanNameData.protocolName} ${spanNameData.name}`; @@ -38,12 +38,14 @@ describe('Span name table cell renderer component', () => { expect(spectator.query('.protocol-name')).toHaveText('test-protocol'); expect(spectator.query('.span-name')).toHaveText('test-span-name'); expect(spectator.query('.color-bar')).not.toExist(); + expect(spectator.query('.error-icon')).not.toExist(); }); - test('should render span name with color and build tooltip ', () => { + test('should render span name with color and error icon and build tooltip ', () => { const spanNameDataWithColor = { ...spanNameData, - color: 'blue' + color: 'blue', + hasError: true }; const spectator = buildComponent({ providers: [tableCellDataProvider(spanNameDataWithColor)] @@ -57,5 +59,6 @@ describe('Span name table cell renderer component', () => { expect(spectator.query('.protocol-name')).toHaveText('test-protocol'); expect(spectator.query('.span-name')).toHaveText('test-span-name'); expect(spectator.query('.color-bar')).toExist(); + expect(spectator.query('.error-icon')).toExist(); }); }); 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 6f37b78f6..50cb8222a 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 @@ -1,5 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { TableCellAlignmentType, TableCellRenderer, TableCellRendererBase } from '@hypertrace/components'; +import { IconType } from '@hypertrace/assets-library'; +import { Color } from '@hypertrace/common'; +import { IconSize, TableCellAlignmentType, TableCellRenderer, TableCellRendererBase } from '@hypertrace/components'; import { SpanNameCellData } from './span-name-cell-data'; import { WaterfallTableCellType } from './span-name-cell-type'; @@ -19,6 +21,13 @@ import { WaterfallTableCellType } from './span-name-cell-type';
{{ this.value.name }}
+ ` }) 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 16c146e8d..ff3905c57 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 @@ -30,7 +30,8 @@ describe('Waterfall Chart component', () => { requestBody: 'Request Body', responseHeaders: {}, responseBody: 'Response Body', - tags: {} + tags: {}, + errorCount: 0 }, { id: 'second-id', @@ -50,7 +51,8 @@ describe('Waterfall Chart component', () => { requestBody: '', responseHeaders: {}, responseBody: '', - tags: {} + tags: {}, + errorCount: 0 }, { id: 'third-id', @@ -70,7 +72,8 @@ describe('Waterfall Chart component', () => { requestBody: '', responseHeaders: {}, responseBody: '', - tags: {} + tags: {}, + errorCount: 0 } ]; 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 32d693bb3..3905c63f5 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,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SequenceChartModule, TableModule, TooltipModule } from '@hypertrace/components'; +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'; import { WaterfallChartComponent } from './waterfall-chart.component'; @@ -12,7 +12,8 @@ import { WaterfallChartComponent } from './waterfall-chart.component'; CommonModule, TableModule.withCellParsers([SpanNameTableCellParser]), TableModule.withCellRenderers([SpanNameTableCellRendererComponent]), - TooltipModule + TooltipModule, + IconModule ], 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 0f3a602de..0a9dc0948 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 @@ -41,7 +41,8 @@ export class WaterfallChartService { $$spanName: { name: datum.name, serviceName: datum.serviceName, - protocolName: datum.protocolName + protocolName: datum.protocolName, + hasError: datum.errorCount > 0 }, $$iconType: this.iconLookupService.forSpanType(datum.spanType)!, getChildren: () => of([]), @@ -82,7 +83,6 @@ export class WaterfallChartService { // Do DFS while (sequenceNodes.length !== 0) { const node = sequenceNodes.shift()!; - if (node.$$state.expanded) { segments.push({ id: node.id, @@ -123,7 +123,10 @@ export class WaterfallChartService { const node = nodes.shift()!; let color; - if (colorMap.has(node.serviceName)) { + if (node.$$spanName.hasError) { + // If span contains an error + color = Color.Red5; + } else if (colorMap.has(node.serviceName)) { // ServiceName seen before. Use existing service color color = colorMap.get(node.serviceName)!; } else { 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 0e3df8b4c..6aa1f4b63 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 @@ -22,6 +22,7 @@ export interface WaterfallData { responseHeaders?: Dictionary; responseBody?: string; tags: Dictionary; + errorCount: number; } export interface WaterfallDataNode extends WaterfallData, Omit { 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 1ad792405..dea3d6ba5 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 @@ -98,6 +98,9 @@ describe('Api Trace Waterfall data source model', () => { }), expect.objectContaining({ name: 'type' + }), + expect.objectContaining({ + name: 'errorCount' }) ] } @@ -156,6 +159,9 @@ describe('Api Trace Waterfall data source model', () => { }), expect.objectContaining({ name: 'type' + }), + expect.objectContaining({ + name: 'errorCount' }) ] } 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 4a99a5304..eb5cc4b64 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 @@ -60,7 +60,8 @@ export class ApiTraceWaterfallDataSourceModel extends GraphQlDataSourceModel + tags: span.spanTags as Dictionary, + errorCount: span.errorCount as number }; } }