Merge branch 'log-components' into log-records

Author: itssharmasandeep

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

@@ -30,13 +30,13 @@ describe('relative timestamp table cell renderer component', () => {
 
   test('testing component properties', () => {
     const logEvent: RowData = {
-      baseTimestamp: 1619785437887
+      baseTimestamp: new Date(1619785437887)
     };
     const spectator = buildComponent({
-      providers: [tableCellRowDataProvider(logEvent), tableCellDataProvider('2021-04-30T12:23:57.889149Z')]
+      providers: [tableCellRowDataProvider(logEvent), tableCellDataProvider(new Date(1619785437887))]
     });
 
-    expect(spectator.queryAll('.relative-timestamp')[0]).toContainText('2 ms');
-    expect(spectator.component.duration).toBe(2);
+    expect(spectator.queryAll('.relative-timestamp')[0]).toContainText('0 ms');
+    expect(spectator.component.duration).toBe(0);
   });
 });

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
-import { DateCoercer, DateFormatMode, DateFormatOptions, Dictionary } from '@hypertrace/common';
+import { DateFormatMode, DateFormatOptions, Dictionary } from '@hypertrace/common';
 import { TableColumnConfig } from '../../../table-api';
 import {
   TABLE_CELL_DATA,
@@ -16,10 +16,8 @@ import { CoreTableCellRendererType } from '../../types/core-table-cell-renderer-
 import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
 
 export interface RowData extends Dictionary<unknown> {
-  baseTimestamp: DateOrNumber;
+  baseTimestamp: Date;
 }
-
-type DateOrNumber = Date | number;
 @Component({
   selector: 'ht-relative-timestamp-table-cell-renderer',
   styleUrls: ['./relative-timestamp-table-cell-renderer.component.scss'],
@@ -39,24 +37,21 @@ type DateOrNumber = Date | number;
   alignment: TableCellAlignmentType.Left,
   parser: CoreTableCellParserType.NoOp
 })
-export class RelativeTimestampTableCellRendererComponent extends TableCellRendererBase<DateOrNumber> implements OnInit {
+export class RelativeTimestampTableCellRendererComponent extends TableCellRendererBase<Date> 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,
+    parser: TableCellParserBase<Date, Date, unknown>,
+    @Inject(TABLE_CELL_DATA) cellData: Date,
     @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);
+    this.duration = cellData.getTime() - rowData.baseTimestamp.getTime();
   }
 }

projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/log-detail-widget-renderer.component.scss renamed to projects/distributed-tracing/src/shared/components/log-events/log-events-table.component.scss

@@ -1,5 +1,9 @@
 @import 'font';
 
+.log-events-table {
+  margin-top: 25px;
+}
+
 .content {
   @include body-2-regular();
   margin-left: 175px;

projects/distributed-tracing/src/shared/components/log-events/log-events-table.component.test.ts

@@ -0,0 +1,70 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { fakeAsync, flush } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { IconLibraryTestingModule } from '@hypertrace/assets-library';
+import { NavigationService } from '@hypertrace/common';
+import { TableComponent, TableModule } from '@hypertrace/components';
+import { runFakeRxjs } from '@hypertrace/test-utils';
+import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { EMPTY } from 'rxjs';
+import { LogEventsTableComponent, LogEventsTableViewType } from './log-events-table.component';
+import { LogEventsTableModule } from './log-events-table.module';
+
+describe('LogEventsTableComponent', () => {
+  let spectator: Spectator<LogEventsTableComponent>;
+
+  const createHost = createHostFactory({
+    component: LogEventsTableComponent,
+    imports: [LogEventsTableModule, TableModule, HttpClientTestingModule, IconLibraryTestingModule],
+    declareComponent: false,
+    providers: [
+      mockProvider(ActivatedRoute, {
+        queryParamMap: EMPTY
+      }),
+      mockProvider(NavigationService, {
+        navigation$: EMPTY
+      })
+    ]
+  });
+
+  test('should render data correctly for sheet view', fakeAsync(() => {
+    spectator = createHost(
+      `<ht-log-events-table [logEvents]="logEvents" [logEventsTableViewType]="logEventsTableViewType" [spanStartTime]="spanStartTime"></ht-log-events-table>`,
+      {
+        hostProps: {
+          logEvents: [
+            { attributes: { attr1: 1, attr2: 2 }, summary: 'test', timestamp: '2021-04-30T12:23:57.889149Z' }
+          ],
+          logEventsTableViewType: LogEventsTableViewType.Sheet,
+          spanStartTime: 1619785437887
+        }
+      }
+    );
+
+    expect(spectator.query('.log-events-table')).toExist();
+    expect(spectator.query(TableComponent)).toExist();
+    expect(spectator.query(TableComponent)!.resizable).toBe(false);
+    expect(spectator.query(TableComponent)!.columnConfigs).toMatchObject([
+      expect.objectContaining({
+        id: 'timestamp'
+      }),
+      expect.objectContaining({
+        id: 'summary'
+      })
+    ]);
+    expect(spectator.query(TableComponent)!.pageable).toBe(false);
+    expect(spectator.query(TableComponent)!.detailContent).not.toBeNull();
+
+    runFakeRxjs(({ expectObservable }) => {
+      expect(spectator.component.dataSource).toBeDefined();
+      expectObservable(spectator.component.dataSource!.getData(undefined!)).toBe('(x|)', {
+        x: {
+          data: [expect.objectContaining({ summary: 'test' })],
+          totalCount: 1
+        }
+      });
+
+      flush();
+    });
+  }));
+});

projects/distributed-tracing/src/shared/components/log-events/log-events-table.component.ts

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { DateCoercer, Dictionary } from '@hypertrace/common';
+import {
+  CoreTableCellRendererType,
+  ListViewHeader,
+  ListViewRecord,
+  TableColumnConfig,
+  TableDataResponse,
+  TableDataSource,
+  TableMode,
+  TableRow
+} from '@hypertrace/components';
+import { isEmpty } from 'lodash-es';
+import { Observable, of } from 'rxjs';
+
+export const enum LogEventsTableViewType {
+  Sheet = 'sheet',
+  Page = 'page'
+}
+
+@Component({
+  selector: 'ht-log-events-table',
+  styleUrls: ['./log-events-table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="log-events-table">
+      <ht-table
+        [columnConfigs]="this.columnConfigs"
+        [data]="this.dataSource"
+        [pageable]="false"
+        [resizable]="false"
+        mode=${TableMode.Detail}
+        [detailContent]="detailContent"
+      ></ht-table>
+    </div>
+    <ng-template #detailContent let-row="row">
+      <div class="content">
+        <ht-list-view
+          [records]="this.getLogEventAttributeRecords(row.attributes)"
+          [header]="this.header"
+          data-sensitive-pii
+        ></ht-list-view>
+      </div>
+    </ng-template>
+  `
+})
+export class LogEventsTableComponent implements OnInit {
+  @Input()
+  public logEvents: Dictionary<unknown>[] = [];
+
+  @Input()
+  public logEventsTableViewType: LogEventsTableViewType = LogEventsTableViewType.Sheet;
+
+  @Input()
+  public spanStartTime?: number;
+
+  public readonly header: ListViewHeader = { keyLabel: 'key', valueLabel: 'value' };
+  private readonly dateCoercer: DateCoercer = new DateCoercer();
+
+  public dataSource?: TableDataSource<TableRow>;
+  public columnConfigs: TableColumnConfig[] = [];
+
+  public ngOnInit(): void {
+    this.buildDataSource();
+    this.columnConfigs = this.getTableColumnConfigs();
+  }
+
+  public getLogEventAttributeRecords(attributes: Dictionary<unknown>): ListViewRecord[] {
+    if (!isEmpty(attributes)) {
+      return Object.entries(attributes).map((attribute: [string, unknown]) => ({
+        key: attribute[0],
+        value: attribute[1] as string | number
+      }));
+    }
+
+    return [];
+  }
+
+  private buildDataSource(): void {
+    this.dataSource = {
+      getData: (): Observable<TableDataResponse<TableRow>> =>
+        of({
+          data: this.logEvents.map((logEvent: Dictionary<unknown>) => ({
+            ...logEvent,
+            timestamp: this.dateCoercer.coerce(logEvent.timestamp),
+            baseTimestamp: this.dateCoercer.coerce(this.spanStartTime)
+          })),
+          totalCount: this.logEvents.length
+        }),
+      getScope: () => undefined
+    };
+  }
+
+  private getTableColumnConfigs(): TableColumnConfig[] {
+    if (this.logEventsTableViewType === LogEventsTableViewType.Sheet) {
+      return [
+        {
+          id: 'timestamp',
+          name: 'timestamp',
+          title: 'Timestamp',
+          display: CoreTableCellRendererType.RelativeTimestamp,
+          visible: true,
+          width: '150px',
+          sortable: false,
+          filterable: false
+        },
+        {
+          id: 'summary',
+          name: 'summary',
+          title: 'Summary',
+          visible: true,
+          sortable: false,
+          filterable: false
+        }
+      ];
+    }
+
+    return [];
+  }
+}

projects/distributed-tracing/src/shared/components/log-events/log-events-table.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormattingModule } from '@hypertrace/common';
+import { IconModule, ListViewModule, TableModule, TooltipModule } from '@hypertrace/components';
+import { LogEventsTableComponent } from './log-events-table.component';
+@NgModule({
+  imports: [CommonModule, TableModule, IconModule, TooltipModule, FormattingModule, ListViewModule],
+  declarations: [LogEventsTableComponent],
+  exports: [LogEventsTableComponent]
+})
+export class LogEventsTableModule {}