From 892858c8324ba88492102ee8f76fbccdae1d1a4f Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 4 May 2021 16:54:48 +0530
Subject: [PATCH 01/10] feat: log records in the span sheet

---
 .../log-events/span-log-events.component.scss |  7 +++
 .../span-log-events.component.test.ts         | 21 ++++++++
 .../log-events/span-log-events.component.ts   | 31 +++++++++++
 .../log-events/span-log-events.dashboard.ts   | 52 +++++++++++++++++++
 .../log-events/span-log-events.module.ts      | 19 +++++++
 .../span-detail/span-detail.component.ts      | 10 ++++
 .../span-detail/span-detail.module.ts         |  4 +-
 .../graphql/graphql-data-source.module.ts     |  2 +
 .../log-events-data-source.model.ts           | 38 ++++++++++++++
 9 files changed, 183 insertions(+), 1 deletion(-)
 create mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.scss
 create mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
 create mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.ts
 create mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
 create mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.module.ts
 create mode 100644 projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.scss b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.scss
new file mode 100644
index 000000000..8a5470b1c
--- /dev/null
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.scss
@@ -0,0 +1,7 @@
+@import 'font';
+
+.title {
+  @include font-subtitle-medium();
+  margin-top: 24px;
+  margin-bottom: 12px;
+}
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
new file mode 100644
index 000000000..01193ae95
--- /dev/null
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
@@ -0,0 +1,21 @@
+import { IconLibraryTestingModule } from '@hypertrace/assets-library';
+import { mockDashboardProviders } from '@hypertrace/dashboards/testing';
+import { NavigableDashboardComponent } from '@hypertrace/distributed-tracing';
+import { EntitiesGraphqlQueryBuilderService } from '@hypertrace/observability';
+import { createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
+import { SpanLogEventsComponent } from './span-log-events.component';
+import { SpanLogEventsModule } from './span-log-events.module';
+
+describe('SpanLogEventsComponent', () => {
+  const createComponent = createComponentFactory({
+    component: SpanLogEventsComponent,
+    declareComponent: false,
+    imports: [SpanLogEventsModule, IconLibraryTestingModule],
+    providers: [mockProvider(EntitiesGraphqlQueryBuilderService), ...mockDashboardProviders]
+  });
+
+  test('should create dashboard', () => {
+    const spectator = createComponent();
+    expect(spectator.query(NavigableDashboardComponent)).toExist();
+  });
+});
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.ts
new file mode 100644
index 000000000..dcc8f5a39
--- /dev/null
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Dashboard } from '@hypertrace/hyperdash';
+import { LogEvent } from '../../../dashboard/widgets/waterfall/waterfall/waterfall-chart';
+import { spanLogEventsDashboard } from './span-log-events.dashboard';
+
+@Component({
+  selector: 'ht-span-log-events',
+  styleUrls: ['./span-log-events.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="span-log-events">
+    <div class="title">Logs</div>
+    <ht-navigable-dashboard
+      [padding]="'0'"
+      navLocation="${spanLogEventsDashboard.location}"
+      (dashboardReady)="this.onDashboardReady($event)"
+    >
+    </ht-navigable-dashboard>
+  </div> `
+})
+export class SpanLogEventsComponent {
+  @Input()
+  public logEvents?: LogEvent[];
+
+  @Input()
+  public startTime?: number;
+
+  public onDashboardReady(dashboard: Dashboard): void {
+    dashboard.setVariable('logEvents', this.logEvents);
+    dashboard.setVariable('startTime', this.startTime);
+  }
+}
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
new file mode 100644
index 000000000..76287dfab
--- /dev/null
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
@@ -0,0 +1,52 @@
+import { TableMode, TableStyle } from '@hypertrace/components';
+import { ObservabilityTableCellType } from '../../../../../../observability/src/shared/components/table/observability-table-cell-type';
+
+export const spanLogEventsDashboard = {
+  location: 'SPAN_LOG_EVENTS',
+  json: {
+    type: 'table-widget',
+    id: 'span-log-records.table',
+    style: TableStyle.FullPage,
+    resizable: false,
+    columns: [
+      {
+        type: 'table-widget-column',
+        title: 'Timestamp',
+        width: '150px',
+        display: ObservabilityTableCellType.LogTimestamp,
+        filterable: false,
+        sortable: false,
+        value: {
+          type: 'attribute-specification',
+          attribute: 'timestamp'
+        }
+      },
+      {
+        type: 'table-widget-column',
+        title: 'Summary',
+        filterable: false,
+        sortable: false,
+        value: {
+          type: 'attribute-specification',
+          attribute: 'summary'
+        }
+      }
+    ],
+    mode: TableMode.Detail,
+    'child-template': {
+      type: 'log-detail-widget',
+      data: {
+        type: 'log-detail-data-source',
+        // tslint:disable-next-line: no-invalid-template-strings
+        'log-event': '${row}'
+      }
+    },
+    data: {
+      type: 'log-events-data-source',
+      // tslint:disable-next-line: no-invalid-template-strings
+      'log-events': '${logEvents}',
+      // tslint:disable-next-line: no-invalid-template-strings
+      'start-time': '${startTime}'
+    }
+  }
+};
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.module.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.module.ts
new file mode 100644
index 000000000..c0d09df02
--- /dev/null
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.module.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormattingModule } from '@hypertrace/common';
+import { TableModule } from '@hypertrace/components';
+import { NavigableDashboardModule } from '../../../dashboard/dashboard-wrapper/navigable-dashboard.module';
+import { SpanLogEventsComponent } from './span-log-events.component';
+import { spanLogEventsDashboard } from './span-log-events.dashboard';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormattingModule,
+    TableModule,
+    NavigableDashboardModule.withDefaultDashboards(spanLogEventsDashboard)
+  ],
+  declarations: [SpanLogEventsComponent],
+  exports: [SpanLogEventsComponent]
+})
+export class SpanLogEventsModule {}
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
index 8c518c2fc..597085186 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
@@ -46,6 +46,12 @@ import { SpanDetailLayoutStyle } from './span-detail-layout-style';
         <ht-tab label="Exit Calls" *ngIf="this.showExitCallsTab">
           <ht-span-exit-calls [exitCalls]="this.spanData.exitCallsBreakup"></ht-span-exit-calls>
         </ht-tab>
+        <ht-tab *ngIf="this.showLogEventstab" label="Logs" [badge]="this.totalLogEvents">
+          <ht-span-log-events
+            [logEvents]="this.spanData?.logEvents"
+            [startTime]="this.spanData?.startTime"
+          ></ht-span-log-events>
+        </ht-tab>
       </ht-tab-group>
     </div>
   `
@@ -66,12 +72,16 @@ export class SpanDetailComponent implements OnChanges {
   public showRequestTab?: boolean;
   public showResponseTab?: boolean;
   public showExitCallsTab?: boolean;
+  public showLogEventstab?: boolean;
+  public totalLogEvents?: number;
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (changes.spanData) {
       this.showRequestTab = !isEmpty(this.spanData?.requestHeaders) || !isEmpty(this.spanData?.requestBody);
       this.showResponseTab = !isEmpty(this.spanData?.responseHeaders) || !isEmpty(this.spanData?.responseBody);
       this.showExitCallsTab = !isEmpty(this.spanData?.exitCallsBreakup);
+      this.showLogEventstab = !isEmpty(this.spanData?.logEvents);
+      this.totalLogEvents = (this.spanData?.logEvents ?? []).length;
     }
   }
 }
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
index 2bd41a72b..094b480ce 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
@@ -13,6 +13,7 @@ import {
 } from '@hypertrace/components';
 import { SpanExitCallsModule } from './exit-calls/span-exit-calls.module';
 import { SpanDetailTitleHeaderModule } from './headers/title/span-detail-title-header.module';
+import { SpanLogEventsModule } from './log-events/span-log-events.module';
 import { SpanRequestDetailModule } from './request/span-request-detail.module';
 import { SpanResponseDetailModule } from './response/span-response-detail.module';
 import { SpanDetailComponent } from './span-detail.component';
@@ -34,7 +35,8 @@ import { SpanTagsDetailModule } from './tags/span-tags-detail.module';
     LoadAsyncModule,
     ListViewModule,
     SpanDetailTitleHeaderModule,
-    SpanExitCallsModule
+    SpanExitCallsModule,
+    SpanLogEventsModule
   ],
   declarations: [SpanDetailComponent],
   exports: [SpanDetailComponent]
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-data-source.module.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-data-source.module.ts
index 0df624830..28b86818c 100644
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-data-source.module.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-data-source.module.ts
@@ -14,6 +14,7 @@ import { EnrichedAttributeSpecificationModel } from './specifiers/enriched-attri
 import { FieldSpecificationModel } from './specifiers/field-specification.model';
 import { MappedAttributeSpecificationModel } from './specifiers/mapped-attribute-specification.model';
 import { TraceStatusSpecificationModel } from './specifiers/trace-status-specification.model';
+import { LogEventsDataSourceModel } from './table/log-events/log-events-data-source.model';
 import { SpansTableDataSourceModel } from './table/spans/spans-table-data-source.model';
 import { TracesTableDataSourceModel } from './table/traces/traces-table-data-source.model';
 import { TraceDataSourceModel } from './trace/trace-data-source.model';
@@ -32,6 +33,7 @@ import { TraceWaterfallDataSourceModel } from './waterfall/trace-waterfall-data-
         GraphqlIdScopeFilterModel,
         SpansTableDataSourceModel,
         TracesTableDataSourceModel,
+        LogEventsDataSourceModel,
         SpanDataSourceModel,
         TableWidgetColumnModel,
         TraceDataSourceModel,
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
new file mode 100644
index 000000000..0a412a697
--- /dev/null
+++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
@@ -0,0 +1,38 @@
+import { TableDataResponse, TableDataSource, TableRow } from '@hypertrace/components';
+import { ARRAY_PROPERTY, Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import { Observable, of } from 'rxjs';
+import { LogEvent } from '../../../../widgets/waterfall/waterfall/waterfall-chart';
+import { GraphQlDataSourceModel } from '../../graphql-data-source.model';
+
+@Model({
+  type: 'log-events-data-source'
+})
+export class LogEventsDataSourceModel extends GraphQlDataSourceModel<TableDataSource<TableRow>> {
+  @ModelProperty({
+    key: 'log-events',
+    required: false,
+    type: ARRAY_PROPERTY.type
+  })
+  public logEvents?: LogEvent[];
+
+  @ModelProperty({
+    key: 'start-time',
+    required: false,
+    type: STRING_PROPERTY.type
+  })
+  public startTime?: string;
+
+  public getData(): Observable<TableDataSource<TableRow>> {
+    return of({
+      getData: () => of(this.tableDataResponse(this.logEvents ?? [])),
+      getScope: () => ''
+    });
+  }
+
+  private tableDataResponse(logEventData: LogEvent[]): TableDataResponse<TableRow> {
+    return {
+      data: logEventData.map((logEvent: LogEvent) => ({ ...logEvent, spanStartTime: this.startTime })) as TableRow[],
+      totalCount: logEventData.length
+    };
+  }
+}

From a39e50262ae18f8acf8b91f636911719d6e3adc6 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 4 May 2021 17:19:55 +0530
Subject: [PATCH 02/10] fix: property validation in data source

---
 .../table/log-events/log-events-data-source.model.ts        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
index 0a412a697..b1a007d88 100644
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
@@ -1,5 +1,5 @@
 import { TableDataResponse, TableDataSource, TableRow } from '@hypertrace/components';
-import { ARRAY_PROPERTY, Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import { ARRAY_PROPERTY, Model, ModelProperty, NUMBER_PROPERTY } from '@hypertrace/hyperdash';
 import { Observable, of } from 'rxjs';
 import { LogEvent } from '../../../../widgets/waterfall/waterfall/waterfall-chart';
 import { GraphQlDataSourceModel } from '../../graphql-data-source.model';
@@ -18,9 +18,9 @@ export class LogEventsDataSourceModel extends GraphQlDataSourceModel<TableDataSo
   @ModelProperty({
     key: 'start-time',
     required: false,
-    type: STRING_PROPERTY.type
+    type: NUMBER_PROPERTY.type
   })
-  public startTime?: string;
+  public startTime?: number;
 
   public getData(): Observable<TableDataSource<TableRow>> {
     return of({

From 589e8a895752c2183c67d2f6ca8cbfa82e02f1e4 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 4 May 2021 18:52:44 +0530
Subject: [PATCH 03/10] fix: addressing review comments

---
 .../span-detail/log-events/span-log-events.dashboard.ts         | 2 +-
 .../src/shared/components/span-detail/span-detail.component.ts  | 2 +-
 .../graphql/table/log-events/log-events-data-source.model.ts    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
index 76287dfab..475ea6b82 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
@@ -1,5 +1,5 @@
 import { TableMode, TableStyle } from '@hypertrace/components';
-import { ObservabilityTableCellType } from '../../../../../../observability/src/shared/components/table/observability-table-cell-type';
+import { ObservabilityTableCellType } from '@hypertrace/observability';
 
 export const spanLogEventsDashboard = {
   location: 'SPAN_LOG_EVENTS',
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
index 597085186..9dda3115a 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
@@ -49,7 +49,7 @@ import { SpanDetailLayoutStyle } from './span-detail-layout-style';
         <ht-tab *ngIf="this.showLogEventstab" label="Logs" [badge]="this.totalLogEvents">
           <ht-span-log-events
             [logEvents]="this.spanData?.logEvents"
-            [startTime]="this.spanData?.startTime"
+            [startTime]="this.spanData?.traceStartTime"
           ></ht-span-log-events>
         </ht-tab>
       </ht-tab-group>
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
index b1a007d88..c38e21f5f 100644
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
@@ -31,7 +31,7 @@ export class LogEventsDataSourceModel extends GraphQlDataSourceModel<TableDataSo
 
   private tableDataResponse(logEventData: LogEvent[]): TableDataResponse<TableRow> {
     return {
-      data: logEventData.map((logEvent: LogEvent) => ({ ...logEvent, spanStartTime: this.startTime })) as TableRow[],
+      data: logEventData.map((logEvent: LogEvent) => ({ ...logEvent, traceStartTime: this.startTime })) as TableRow[],
       totalCount: logEventData.length
     };
   }

From 9909cdaff9daf7289c8bf412947d68bafa7a078c Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 4 May 2021 19:46:08 +0530
Subject: [PATCH 04/10] Revert "fix: addressing review comments"

This reverts commit 589e8a895752c2183c67d2f6ca8cbfa82e02f1e4.
---
 .../span-detail/log-events/span-log-events.dashboard.ts         | 2 +-
 .../src/shared/components/span-detail/span-detail.component.ts  | 2 +-
 .../graphql/table/log-events/log-events-data-source.model.ts    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
index 475ea6b82..76287dfab 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
@@ -1,5 +1,5 @@
 import { TableMode, TableStyle } from '@hypertrace/components';
-import { ObservabilityTableCellType } from '@hypertrace/observability';
+import { ObservabilityTableCellType } from '../../../../../../observability/src/shared/components/table/observability-table-cell-type';
 
 export const spanLogEventsDashboard = {
   location: 'SPAN_LOG_EVENTS',
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
index 9dda3115a..597085186 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
@@ -49,7 +49,7 @@ import { SpanDetailLayoutStyle } from './span-detail-layout-style';
         <ht-tab *ngIf="this.showLogEventstab" label="Logs" [badge]="this.totalLogEvents">
           <ht-span-log-events
             [logEvents]="this.spanData?.logEvents"
-            [startTime]="this.spanData?.traceStartTime"
+            [startTime]="this.spanData?.startTime"
           ></ht-span-log-events>
         </ht-tab>
       </ht-tab-group>
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
index c38e21f5f..b1a007d88 100644
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
@@ -31,7 +31,7 @@ export class LogEventsDataSourceModel extends GraphQlDataSourceModel<TableDataSo
 
   private tableDataResponse(logEventData: LogEvent[]): TableDataResponse<TableRow> {
     return {
-      data: logEventData.map((logEvent: LogEvent) => ({ ...logEvent, traceStartTime: this.startTime })) as TableRow[],
+      data: logEventData.map((logEvent: LogEvent) => ({ ...logEvent, spanStartTime: this.startTime })) as TableRow[],
       totalCount: logEventData.length
     };
   }

From e18dd3ced771fc9b60b76ceb713e435406f45818 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 4 May 2021 19:49:01 +0530
Subject: [PATCH 05/10] fix: addressing review comment

---
 .../span-detail/log-events/span-log-events.dashboard.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
index 76287dfab..475ea6b82 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
@@ -1,5 +1,5 @@
 import { TableMode, TableStyle } from '@hypertrace/components';
-import { ObservabilityTableCellType } from '../../../../../../observability/src/shared/components/table/observability-table-cell-type';
+import { ObservabilityTableCellType } from '@hypertrace/observability';
 
 export const spanLogEventsDashboard = {
   location: 'SPAN_LOG_EVENTS',

From 6a8e15ee26ad462198c39cc329a9cc0c5b55bbe0 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 5 May 2021 18:31:52 +0530
Subject: [PATCH 06/10] fix: relative timestamp

---
 .../span-detail/log-events/span-log-events.dashboard.ts      | 5 ++---
 .../graphql/table/log-events/log-events-data-source.model.ts | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
index 475ea6b82..0251fc4dd 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
@@ -1,5 +1,4 @@
-import { TableMode, TableStyle } from '@hypertrace/components';
-import { ObservabilityTableCellType } from '@hypertrace/observability';
+import { CoreTableCellRendererType, TableMode, TableStyle } from '@hypertrace/components';
 
 export const spanLogEventsDashboard = {
   location: 'SPAN_LOG_EVENTS',
@@ -13,7 +12,7 @@ export const spanLogEventsDashboard = {
         type: 'table-widget-column',
         title: 'Timestamp',
         width: '150px',
-        display: ObservabilityTableCellType.LogTimestamp,
+        display: CoreTableCellRendererType.RelativeTimestamp,
         filterable: false,
         sortable: false,
         value: {
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
index b1a007d88..1d5020298 100644
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
@@ -31,7 +31,7 @@ export class LogEventsDataSourceModel extends GraphQlDataSourceModel<TableDataSo
 
   private tableDataResponse(logEventData: LogEvent[]): TableDataResponse<TableRow> {
     return {
-      data: logEventData.map((logEvent: LogEvent) => ({ ...logEvent, spanStartTime: this.startTime })) as TableRow[],
+      data: logEventData.map((logEvent: LogEvent) => ({ ...logEvent, baseTimestamp: this.startTime })) as TableRow[],
       totalCount: logEventData.length
     };
   }

From 4d1af9a038d6d50992fa5fa88f844ab09a0e7ea9 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Thu, 6 May 2021 18:36:15 +0530
Subject: [PATCH 07/10] fix: test case

---
 .../log-events/span-log-events.component.test.ts            | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
index 01193ae95..e2cd6f6f3 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
@@ -1,8 +1,10 @@
 import { IconLibraryTestingModule } from '@hypertrace/assets-library';
+import { DashboardModule } from '@hypertrace/dashboards';
 import { mockDashboardProviders } from '@hypertrace/dashboards/testing';
 import { NavigableDashboardComponent } from '@hypertrace/distributed-tracing';
 import { EntitiesGraphqlQueryBuilderService } from '@hypertrace/observability';
 import { createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
+import { GraphQlDataSourceModule } from '../../../dashboard/data/graphql/graphql-data-source.module';
 import { SpanLogEventsComponent } from './span-log-events.component';
 import { SpanLogEventsModule } from './span-log-events.module';
 
@@ -10,12 +12,14 @@ describe('SpanLogEventsComponent', () => {
   const createComponent = createComponentFactory({
     component: SpanLogEventsComponent,
     declareComponent: false,
-    imports: [SpanLogEventsModule, IconLibraryTestingModule],
+    imports: [SpanLogEventsModule, GraphQlDataSourceModule, DashboardModule, IconLibraryTestingModule],
     providers: [mockProvider(EntitiesGraphqlQueryBuilderService), ...mockDashboardProviders]
   });
 
   test('should create dashboard', () => {
     const spectator = createComponent();
     expect(spectator.query(NavigableDashboardComponent)).toExist();
+    expect(spectator.query(NavigableDashboardComponent)!.navLocation).toBe('SPAN_LOG_EVENTS');
+    expect(spectator.query(NavigableDashboardComponent)!.padding).toBe('0');
   });
 });

From 33e29151a7be4dd3b1ce45baf6ac09666458d85b Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Thu, 6 May 2021 19:53:05 +0530
Subject: [PATCH 08/10] fix: test case

---
 .../log-detail/data/log-detail-data-source.model.test.ts        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/data/log-detail-data-source.model.test.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/data/log-detail-data-source.model.test.ts
index 2c006093f..a73f0216b 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/data/log-detail-data-source.model.test.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/data/log-detail-data-source.model.test.ts
@@ -15,9 +15,7 @@ describe('Log Detail data source model', () => {
     key2: 'value2'
   };
   const logEvent: LogEvent = {
-    traceId: 'id1',
     attributes: attributes,
-    spanId: 's-id1',
     timestamp: '2021-05-05T00:00:00Z',
     summary: 'test log event'
   };

From 1255a4b194663b981c484afa54bfbd7c7e31a6b0 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Fri, 7 May 2021 19:58:27 +0530
Subject: [PATCH 09/10] fix: using log events table

---
 .../shared/components/span-detail/span-detail.component.ts  | 6 +++---
 .../src/shared/components/span-detail/span-detail.module.ts | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
index 597085186..9f54a2901 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.component.ts
@@ -47,10 +47,10 @@ import { SpanDetailLayoutStyle } from './span-detail-layout-style';
           <ht-span-exit-calls [exitCalls]="this.spanData.exitCallsBreakup"></ht-span-exit-calls>
         </ht-tab>
         <ht-tab *ngIf="this.showLogEventstab" label="Logs" [badge]="this.totalLogEvents">
-          <ht-span-log-events
+          <ht-log-events-table
             [logEvents]="this.spanData?.logEvents"
-            [startTime]="this.spanData?.startTime"
-          ></ht-span-log-events>
+            [spanStartTime]="this.spanData?.startTime"
+          ></ht-log-events-table>
         </ht-tab>
       </ht-tab-group>
     </div>
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
index 094b480ce..377186723 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
@@ -11,6 +11,7 @@ import {
   ToggleButtonModule,
   TooltipModule
 } from '@hypertrace/components';
+import { LogEventsTableModule } from '../log-events/log-events-table.module';
 import { SpanExitCallsModule } from './exit-calls/span-exit-calls.module';
 import { SpanDetailTitleHeaderModule } from './headers/title/span-detail-title-header.module';
 import { SpanLogEventsModule } from './log-events/span-log-events.module';
@@ -36,7 +37,8 @@ import { SpanTagsDetailModule } from './tags/span-tags-detail.module';
     ListViewModule,
     SpanDetailTitleHeaderModule,
     SpanExitCallsModule,
-    SpanLogEventsModule
+    SpanLogEventsModule,
+    LogEventsTableModule
   ],
   declarations: [SpanDetailComponent],
   exports: [SpanDetailComponent]

From dc7efe12278a6547068e835a698854439fdfa4b8 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Fri, 7 May 2021 20:19:38 +0530
Subject: [PATCH 10/10] fix: using log events table

---
 .../log-events/span-log-events.component.scss |  7 ---
 .../span-log-events.component.test.ts         | 25 ---------
 .../log-events/span-log-events.component.ts   | 31 -----------
 .../log-events/span-log-events.dashboard.ts   | 51 -------------------
 .../log-events/span-log-events.module.ts      | 19 -------
 .../span-detail/span-detail.module.ts         |  2 -
 .../graphql/graphql-data-source.module.ts     |  2 -
 .../log-events-data-source.model.ts           | 38 --------------
 8 files changed, 175 deletions(-)
 delete mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.scss
 delete mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
 delete mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.ts
 delete mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
 delete mode 100644 projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.module.ts
 delete mode 100644 projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts

diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.scss b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.scss
deleted file mode 100644
index 8a5470b1c..000000000
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'font';
-
-.title {
-  @include font-subtitle-medium();
-  margin-top: 24px;
-  margin-bottom: 12px;
-}
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
deleted file mode 100644
index e2cd6f6f3..000000000
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { IconLibraryTestingModule } from '@hypertrace/assets-library';
-import { DashboardModule } from '@hypertrace/dashboards';
-import { mockDashboardProviders } from '@hypertrace/dashboards/testing';
-import { NavigableDashboardComponent } from '@hypertrace/distributed-tracing';
-import { EntitiesGraphqlQueryBuilderService } from '@hypertrace/observability';
-import { createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
-import { GraphQlDataSourceModule } from '../../../dashboard/data/graphql/graphql-data-source.module';
-import { SpanLogEventsComponent } from './span-log-events.component';
-import { SpanLogEventsModule } from './span-log-events.module';
-
-describe('SpanLogEventsComponent', () => {
-  const createComponent = createComponentFactory({
-    component: SpanLogEventsComponent,
-    declareComponent: false,
-    imports: [SpanLogEventsModule, GraphQlDataSourceModule, DashboardModule, IconLibraryTestingModule],
-    providers: [mockProvider(EntitiesGraphqlQueryBuilderService), ...mockDashboardProviders]
-  });
-
-  test('should create dashboard', () => {
-    const spectator = createComponent();
-    expect(spectator.query(NavigableDashboardComponent)).toExist();
-    expect(spectator.query(NavigableDashboardComponent)!.navLocation).toBe('SPAN_LOG_EVENTS');
-    expect(spectator.query(NavigableDashboardComponent)!.padding).toBe('0');
-  });
-});
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.ts
deleted file mode 100644
index dcc8f5a39..000000000
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { Dashboard } from '@hypertrace/hyperdash';
-import { LogEvent } from '../../../dashboard/widgets/waterfall/waterfall/waterfall-chart';
-import { spanLogEventsDashboard } from './span-log-events.dashboard';
-
-@Component({
-  selector: 'ht-span-log-events',
-  styleUrls: ['./span-log-events.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="span-log-events">
-    <div class="title">Logs</div>
-    <ht-navigable-dashboard
-      [padding]="'0'"
-      navLocation="${spanLogEventsDashboard.location}"
-      (dashboardReady)="this.onDashboardReady($event)"
-    >
-    </ht-navigable-dashboard>
-  </div> `
-})
-export class SpanLogEventsComponent {
-  @Input()
-  public logEvents?: LogEvent[];
-
-  @Input()
-  public startTime?: number;
-
-  public onDashboardReady(dashboard: Dashboard): void {
-    dashboard.setVariable('logEvents', this.logEvents);
-    dashboard.setVariable('startTime', this.startTime);
-  }
-}
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
deleted file mode 100644
index 0251fc4dd..000000000
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.dashboard.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { CoreTableCellRendererType, TableMode, TableStyle } from '@hypertrace/components';
-
-export const spanLogEventsDashboard = {
-  location: 'SPAN_LOG_EVENTS',
-  json: {
-    type: 'table-widget',
-    id: 'span-log-records.table',
-    style: TableStyle.FullPage,
-    resizable: false,
-    columns: [
-      {
-        type: 'table-widget-column',
-        title: 'Timestamp',
-        width: '150px',
-        display: CoreTableCellRendererType.RelativeTimestamp,
-        filterable: false,
-        sortable: false,
-        value: {
-          type: 'attribute-specification',
-          attribute: 'timestamp'
-        }
-      },
-      {
-        type: 'table-widget-column',
-        title: 'Summary',
-        filterable: false,
-        sortable: false,
-        value: {
-          type: 'attribute-specification',
-          attribute: 'summary'
-        }
-      }
-    ],
-    mode: TableMode.Detail,
-    'child-template': {
-      type: 'log-detail-widget',
-      data: {
-        type: 'log-detail-data-source',
-        // tslint:disable-next-line: no-invalid-template-strings
-        'log-event': '${row}'
-      }
-    },
-    data: {
-      type: 'log-events-data-source',
-      // tslint:disable-next-line: no-invalid-template-strings
-      'log-events': '${logEvents}',
-      // tslint:disable-next-line: no-invalid-template-strings
-      'start-time': '${startTime}'
-    }
-  }
-};
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.module.ts b/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.module.ts
deleted file mode 100644
index c0d09df02..000000000
--- a/projects/distributed-tracing/src/shared/components/span-detail/log-events/span-log-events.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormattingModule } from '@hypertrace/common';
-import { TableModule } from '@hypertrace/components';
-import { NavigableDashboardModule } from '../../../dashboard/dashboard-wrapper/navigable-dashboard.module';
-import { SpanLogEventsComponent } from './span-log-events.component';
-import { spanLogEventsDashboard } from './span-log-events.dashboard';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormattingModule,
-    TableModule,
-    NavigableDashboardModule.withDefaultDashboards(spanLogEventsDashboard)
-  ],
-  declarations: [SpanLogEventsComponent],
-  exports: [SpanLogEventsComponent]
-})
-export class SpanLogEventsModule {}
diff --git a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
index 377186723..4312d4b1c 100644
--- a/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
+++ b/projects/distributed-tracing/src/shared/components/span-detail/span-detail.module.ts
@@ -14,7 +14,6 @@ import {
 import { LogEventsTableModule } from '../log-events/log-events-table.module';
 import { SpanExitCallsModule } from './exit-calls/span-exit-calls.module';
 import { SpanDetailTitleHeaderModule } from './headers/title/span-detail-title-header.module';
-import { SpanLogEventsModule } from './log-events/span-log-events.module';
 import { SpanRequestDetailModule } from './request/span-request-detail.module';
 import { SpanResponseDetailModule } from './response/span-response-detail.module';
 import { SpanDetailComponent } from './span-detail.component';
@@ -37,7 +36,6 @@ import { SpanTagsDetailModule } from './tags/span-tags-detail.module';
     ListViewModule,
     SpanDetailTitleHeaderModule,
     SpanExitCallsModule,
-    SpanLogEventsModule,
     LogEventsTableModule
   ],
   declarations: [SpanDetailComponent],
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-data-source.module.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-data-source.module.ts
index 28b86818c..0df624830 100644
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-data-source.module.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-data-source.module.ts
@@ -14,7 +14,6 @@ import { EnrichedAttributeSpecificationModel } from './specifiers/enriched-attri
 import { FieldSpecificationModel } from './specifiers/field-specification.model';
 import { MappedAttributeSpecificationModel } from './specifiers/mapped-attribute-specification.model';
 import { TraceStatusSpecificationModel } from './specifiers/trace-status-specification.model';
-import { LogEventsDataSourceModel } from './table/log-events/log-events-data-source.model';
 import { SpansTableDataSourceModel } from './table/spans/spans-table-data-source.model';
 import { TracesTableDataSourceModel } from './table/traces/traces-table-data-source.model';
 import { TraceDataSourceModel } from './trace/trace-data-source.model';
@@ -33,7 +32,6 @@ import { TraceWaterfallDataSourceModel } from './waterfall/trace-waterfall-data-
         GraphqlIdScopeFilterModel,
         SpansTableDataSourceModel,
         TracesTableDataSourceModel,
-        LogEventsDataSourceModel,
         SpanDataSourceModel,
         TableWidgetColumnModel,
         TraceDataSourceModel,
diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
deleted file mode 100644
index 1d5020298..000000000
--- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/log-events/log-events-data-source.model.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { TableDataResponse, TableDataSource, TableRow } from '@hypertrace/components';
-import { ARRAY_PROPERTY, Model, ModelProperty, NUMBER_PROPERTY } from '@hypertrace/hyperdash';
-import { Observable, of } from 'rxjs';
-import { LogEvent } from '../../../../widgets/waterfall/waterfall/waterfall-chart';
-import { GraphQlDataSourceModel } from '../../graphql-data-source.model';
-
-@Model({
-  type: 'log-events-data-source'
-})
-export class LogEventsDataSourceModel extends GraphQlDataSourceModel<TableDataSource<TableRow>> {
-  @ModelProperty({
-    key: 'log-events',
-    required: false,
-    type: ARRAY_PROPERTY.type
-  })
-  public logEvents?: LogEvent[];
-
-  @ModelProperty({
-    key: 'start-time',
-    required: false,
-    type: NUMBER_PROPERTY.type
-  })
-  public startTime?: number;
-
-  public getData(): Observable<TableDataSource<TableRow>> {
-    return of({
-      getData: () => of(this.tableDataResponse(this.logEvents ?? [])),
-      getScope: () => ''
-    });
-  }
-
-  private tableDataResponse(logEventData: LogEvent[]): TableDataResponse<TableRow> {
-    return {
-      data: logEventData.map((logEvent: LogEvent) => ({ ...logEvent, baseTimestamp: this.startTime })) as TableRow[],
-      totalCount: logEventData.length
-    };
-  }
-}