feat: relative timestamp table cell renderer and log events table in sheet

projects/components/src/table/cells/data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component.scss

@@ -0,0 +1,9 @@
+@import 'font';
+
+.relative-timestamp {
+  @include ellipsis-overflow();
+
+  &.first-column {
+    @include body-1-medium($gray-9);
+  }
+}

projects/components/src/table/cells/data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component.test.ts

@@ -0,0 +1,42 @@
+import { DisplayDatePipe } from '@hypertrace/common';
+import {
+  TableCellNoOpParser,
+  tableCellProviders,
+  tableCellRowDataProvider,
+  TooltipDirective
+} from '@hypertrace/components';
+import { createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent, MockPipe } from 'ng-mocks';
+import { tableCellDataProvider } from '../../test/cell-providers';
+import {
+  RelativeTimestampTableCellRendererComponent,
+  RowData
+} from './relative-timestamp-table-cell-renderer.component';
+
+describe('relative timestamp table cell renderer component', () => {
+  const buildComponent = createComponentFactory({
+    component: RelativeTimestampTableCellRendererComponent,
+    providers: [
+      tableCellProviders(
+        {
+          id: 'test'
+        },
+        new TableCellNoOpParser(undefined!)
+      )
+    ],
+    declarations: [MockComponent(TooltipDirective), MockPipe(DisplayDatePipe)],
+    shallow: true
+  });
+
+  test('testing component properties', () => {
+    const logEvent: RowData = {
+      baseTimestamp: 1619785437887
+    };
+    const spectator = buildComponent({
+      providers: [tableCellRowDataProvider(logEvent), tableCellDataProvider('2021-04-30T12:23:57.889149Z')]
+    });
+
+    expect(spectator.queryAll('.relative-timestamp')[0]).toContainText('2 ms');
+    expect(spectator.component.duration).toBe(2);
+  });
+});

projects/components/src/table/cells/data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component.ts

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { DateCoercer, DateFormatMode, DateFormatOptions, Dictionary } from '@hypertrace/common';
+import { TableColumnConfig } from '../../../table-api';
+import {
+  TABLE_CELL_DATA,
+  TABLE_COLUMN_CONFIG,
+  TABLE_COLUMN_INDEX,
+  TABLE_DATA_PARSER,
+  TABLE_ROW_DATA
+} from '../../table-cell-injection';
+import { TableCellParserBase } from '../../table-cell-parser-base';
+import { TableCellRenderer } from '../../table-cell-renderer';
+import { TableCellRendererBase } from '../../table-cell-renderer-base';
+import { CoreTableCellParserType } from '../../types/core-table-cell-parser-type';
+import { CoreTableCellRendererType } from '../../types/core-table-cell-renderer-type';
+import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
+
+export interface RowData extends Dictionary<unknown> {
+  baseTimestamp: DateOrNumber;
+}
+
+type DateOrNumber = Date | number;
+@Component({
+  selector: 'ht-relative-timestamp-table-cell-renderer',
+  styleUrls: ['./relative-timestamp-table-cell-renderer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="relative-timestamp"
+      [htTooltip]="this.value | htDisplayDate: this.dateFormat"
+      [ngClass]="{ 'first-column': this.isFirstColumn }"
+    >
+      {{ this.duration }} ms
+    </div>
+  `
+})
+@TableCellRenderer({
+  type: CoreTableCellRendererType.RelativeTimestamp,
+  alignment: TableCellAlignmentType.Left,
+  parser: CoreTableCellParserType.NoOp
+})
+export class RelativeTimestampTableCellRendererComponent extends TableCellRendererBase<DateOrNumber> implements OnInit {
+  public readonly dateFormat: DateFormatOptions = {
+    mode: DateFormatMode.DateAndTimeWithSeconds
+  };
+  public readonly duration: number;
+  private readonly dateCoercer: DateCoercer = new DateCoercer();
+
+  public constructor(
+    @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
+    @Inject(TABLE_COLUMN_INDEX) index: number,
+    @Inject(TABLE_DATA_PARSER)
+    parser: TableCellParserBase<DateOrNumber, DateOrNumber, unknown>,
+    @Inject(TABLE_CELL_DATA) cellData: DateOrNumber,
+    @Inject(TABLE_ROW_DATA) rowData: RowData
+  ) {
+    super(columnConfig, index, parser, cellData, rowData);
+    this.duration =
+      (this.dateCoercer.coerce(cellData)?.getTime() ?? NaN) -
+      (this.dateCoercer.coerce(rowData.baseTimestamp)?.getTime() ?? NaN);
+  }
+}

projects/components/src/table/cells/table-cells.module.ts

@@ -21,6 +21,7 @@ import { CodeTableCellRendererComponent } from './data-renderers/code/code-table
 import { StringEnumTableCellRendererComponent } from './data-renderers/enum/string-enum-table-cell-renderer.component';
 import { IconTableCellRendererComponent } from './data-renderers/icon/icon-table-cell-renderer.component';
 import { NumericTableCellRendererComponent } from './data-renderers/numeric/numeric-table-cell-renderer.component';
+import { RelativeTimestampTableCellRendererComponent } from './data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component';
 import { StringArrayTableCellRendererComponent } from './data-renderers/string-array/string-array-table-cell-renderer.component';
 import { TableDataCellRendererComponent } from './data-renderers/table-data-cell-renderer.component';
 import { TextWithCopyActionTableCellRendererComponent } from './data-renderers/text-with-copy/text-with-copy-table-cell-renderer.component';
@@ -72,7 +73,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
     CodeTableCellRendererComponent,
     StringArrayTableCellRendererComponent,
     StringEnumTableCellRendererComponent,
-    TextWithCopyActionTableCellRendererComponent
+    TextWithCopyActionTableCellRendererComponent,
+    RelativeTimestampTableCellRendererComponent
   ],
   providers: [
     {
@@ -88,7 +90,8 @@ export const TABLE_CELL_PARSERS = new InjectionToken<unknown[][]>('TABLE_CELL_PA
         CodeTableCellRendererComponent,
         StringArrayTableCellRendererComponent,
         StringEnumTableCellRendererComponent,
-        TextWithCopyActionTableCellRendererComponent
+        TextWithCopyActionTableCellRendererComponent,
+        RelativeTimestampTableCellRendererComponent
       ],
       multi: true
     },

projects/components/src/table/cells/types/core-table-cell-renderer-type.ts

@@ -4,6 +4,7 @@ export const enum CoreTableCellRendererType {
   Icon = 'icon',
   Number = 'number',
   RowExpander = 'row-expander',
+  RelativeTimestamp = 'relative-timestamp',
   StringArray = 'string-array',
   StringEnum = 'string-enum',
   Text = 'text',

projects/distributed-tracing/src/public-api.ts

@@ -102,6 +102,7 @@ export { WaterfallData } from './shared/dashboard/widgets/waterfall/waterfall/wa
 export { TraceWaterfallDataSourceModel } from './shared/dashboard/data/graphql/waterfall/trace-waterfall-data-source.model';
 export { traceDetailDashboard } from './pages/trace-detail/trace-detail.dashboard';
 export { TraceDetailPageComponent } from './pages/trace-detail/trace-detail.page.component';
+export { LogEvent } from './shared/dashboard/widgets/waterfall/waterfall/waterfall-chart';
 
 // Datasources
 export * from './shared/dashboard/widgets/trace-detail/data/trace-detail-data-source.model';

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

@@ -1,4 +1,5 @@
 import { Dictionary } from '@hypertrace/common';
+import { LogEvent } from '../../dashboard/widgets/waterfall/waterfall/waterfall-chart';
 
 export interface SpanData {
   id: string;
@@ -12,4 +13,6 @@ export interface SpanData {
   tags: Dictionary<unknown>;
   requestUrl: string;
   exitCallsBreakup?: Dictionary<string>;
+  startTime?: number;
+  logEvents?: LogEvent[];
 }

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

@@ -96,6 +96,23 @@ describe('Trace Waterfall data source model', () => {
             expect.objectContaining({
               name: 'errorCount'
             })
+          ],
+          logEventProperties: [
+            expect.objectContaining({
+              name: 'traceId'
+            }),
+            expect.objectContaining({
+              name: 'attributes'
+            }),
+            expect.objectContaining({
+              name: 'timestamp'
+            }),
+            expect.objectContaining({
+              name: 'spanId'
+            }),
+            expect.objectContaining({
+              name: 'summary'
+            })
           ]
         }
       });
@@ -156,6 +173,23 @@ describe('Trace Waterfall data source model', () => {
             expect.objectContaining({
               name: 'errorCount'
             })
+          ],
+          logEventProperties: [
+            expect.objectContaining({
+              name: 'traceId'
+            }),
+            expect.objectContaining({
+              name: 'attributes'
+            }),
+            expect.objectContaining({
+              name: 'timestamp'
+            }),
+            expect.objectContaining({
+              name: 'spanId'
+            }),
+            expect.objectContaining({
+              name: 'summary'
+            })
           ]
         }
       });

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

@@ -13,7 +13,7 @@ import {
   TRACE_GQL_REQUEST
 } from '../../../../graphql/request/handlers/traces/trace-graphql-query-handler.service';
 import { MetadataService } from '../../../../services/metadata/metadata.service';
-import { WaterfallData } from '../../../widgets/waterfall/waterfall/waterfall-chart';
+import { LogEvent, WaterfallData } from '../../../widgets/waterfall/waterfall/waterfall-chart';
 import { GraphQlDataSourceModel } from '../graphql-data-source.model';
 
 @Model({
@@ -60,6 +60,14 @@ export class TraceWaterfallDataSourceModel extends GraphQlDataSourceModel<Waterf
     this.specificationBuilder.attributeSpecificationForKey('errorCount')
   ];
 
+  protected readonly logEventSpecifications: Specification[] = [
+    this.specificationBuilder.attributeSpecificationForKey('traceId'),
+    this.specificationBuilder.attributeSpecificationForKey('attributes'),
+    this.specificationBuilder.attributeSpecificationForKey('timestamp'),
+    this.specificationBuilder.attributeSpecificationForKey('spanId'),
+    this.specificationBuilder.attributeSpecificationForKey('summary')
+  ];
+
   public getData(): Observable<WaterfallData[]> {
     return combineLatest([this.getTraceData(), this.getDurationAttribute()]).pipe(
       map(combinedData => this.mapResponseObject(combinedData[0], combinedData[1]))
@@ -73,7 +81,8 @@ export class TraceWaterfallDataSourceModel extends GraphQlDataSourceModel<Waterf
       spanLimit: 1000,
       timestamp: this.dateCoercer.coerce(this.startTime),
       traceProperties: [],
-      spanProperties: this.spanSpecifications
+      spanProperties: this.spanSpecifications,
+      logEventProperties: this.logEventSpecifications
     });
   }
 
@@ -102,7 +111,8 @@ export class TraceWaterfallDataSourceModel extends GraphQlDataSourceModel<Waterf
       apiName: span.displaySpanName as string,
       spanType: span.type as SpanType,
       tags: span.spanTags as Dictionary<unknown>,
-      errorCount: span.errorCount as number
+      errorCount: span.errorCount as number,
+      logEvents: ((span.logEvents as Dictionary<LogEvent[]>) ?? {}).results
     }));
   }
 }

projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/data/log-detail-data-source.model.test.ts

@@ -0,0 +1,49 @@
+import { Dictionary } from '@hypertrace/common';
+import { createModelFactory, SpectatorModel } from '@hypertrace/dashboards/testing';
+import { LogEvent } from '@hypertrace/distributed-tracing';
+import { GraphQlRequestService } from '@hypertrace/graphql-client';
+import { ModelApi } from '@hypertrace/hyperdash';
+import { runFakeRxjs } from '@hypertrace/test-utils';
+import { mockProvider } from '@ngneat/spectator/jest';
+import { of } from 'rxjs';
+import { LogDetailDataSourceModel } from './log-detail-data-source.model';
+
+describe('Log Detail data source model', () => {
+  let spectator!: SpectatorModel<LogDetailDataSourceModel>;
+  const attributes: Dictionary<unknown> = {
+    key1: 'value1',
+    key2: 'value2'
+  };
+  const logEvent: LogEvent = {
+    traceId: 'id1',
+    attributes: attributes,
+    spanId: 's-id1',
+    timestamp: '2021-05-05T00:00:00Z',
+    summary: 'test log event'
+  };
+
+  const buildModel = createModelFactory({
+    providers: [
+      mockProvider(GraphQlRequestService, {
+        query: jest.fn().mockReturnValue(of({}))
+      })
+    ]
+  });
+  beforeEach(() => {
+    const mockApi: Partial<ModelApi> = {};
+    spectator = buildModel(LogDetailDataSourceModel);
+    spectator.model.logEvent = logEvent;
+    spectator.model.api = mockApi as ModelApi;
+  });
+
+  test('test attribute data', () => {
+    runFakeRxjs(({ expectObservable }) => {
+      expectObservable(spectator.model.getData()).toBe('(x|)', {
+        x: expect.objectContaining({
+          key1: 'value1',
+          key2: 'value2'
+        })
+      });
+    });
+  });
+});

projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/data/log-detail-data-source.model.ts

@@ -0,0 +1,21 @@
+import { Dictionary } from '@hypertrace/common';
+import { Model, ModelProperty, PLAIN_OBJECT_PROPERTY } from '@hypertrace/hyperdash';
+import { Observable, of } from 'rxjs';
+import { GraphQlDataSourceModel } from '../../../data/graphql/graphql-data-source.model';
+import { LogEvent } from '../../waterfall/waterfall/waterfall-chart';
+
+@Model({
+  type: 'log-detail-data-source'
+})
+export class LogDetailDataSourceModel extends GraphQlDataSourceModel<Dictionary<unknown>> {
+  @ModelProperty({
+    key: 'log-event',
+    required: true,
+    type: PLAIN_OBJECT_PROPERTY.type
+  })
+  public logEvent?: LogEvent;
+
+  public getData(): Observable<Dictionary<unknown>> {
+    return of(this.logEvent?.attributes ?? {});
+  }
+}

projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/log-detail-widget-renderer.component.scss

@@ -0,0 +1,7 @@
+@import 'font';
+
+.content {
+  @include body-2-regular();
+  margin-left: 175px;
+  margin-top: 15px;
+}

projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/log-detail-widget-renderer.component.test.ts

@@ -0,0 +1,44 @@
+import { Dictionary, FormattingModule } from '@hypertrace/common';
+import { ListViewComponent, LoadAsyncModule } from '@hypertrace/components';
+import { mockDashboardWidgetProviders } from '@hypertrace/dashboards/testing';
+import { createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
+import { LogDetailWidgetRendererComponent } from './log-detail-widget-renderer.component';
+import { LogDetailWidgetModel } from './log-detail-widget.model';
+
+describe('log detail widget renderer component', () => {
+  let mockModel: Partial<LogDetailWidgetModel> = {};
+  const buildComponent = createComponentFactory({
+    component: LogDetailWidgetRendererComponent,
+    providers: [],
+    imports: [FormattingModule, LoadAsyncModule],
+    declarations: [MockComponent(ListViewComponent)],
+    shallow: true
+  });
+  const attributes: Dictionary<unknown> = {
+    key1: 1,
+    key2: 2
+  };
+
+  test('should render list view with provided data', () => {
+    mockModel = {
+      getData: jest.fn(() => of(attributes))
+    };
+    const spectator = buildComponent({
+      providers: [...mockDashboardWidgetProviders(mockModel)]
+    });
+    expect(spectator.query('.content')).toExist();
+    expect(spectator.query(ListViewComponent)!.header).toEqual(spectator.component.header);
+    expect(spectator.query(ListViewComponent)!.records).toEqual([
+      {
+        key: 'key1',
+        value: 1
+      },
+      {
+        key: 'key2',
+        value: 2
+      }
+    ]);
+  });
+});