feat: log detail widget and log timestamp table cell renderer components

Author: itssharmasandeep

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

@@ -0,0 +1,26 @@
+import { createModelFactory, SpectatorModel } from '@hypertrace/dashboards/testing';
+import { runFakeRxjs } from '@hypertrace/test-utils';
+import { LogDetailDataSourceModel } from './log-detail-data-source.model';
+
+describe('Log Detail data source model', () => {
+  let spectator!: SpectatorModel<LogDetailDataSourceModel>;
+  const buildModel = createModelFactory();
+  spectator = buildModel(LogDetailDataSourceModel);
+  spectator.model.logEvent = {
+    attributes: {
+      key1: 'value1',
+      key2: 'value2'
+    }
+  };
+
+  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.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Dictionary } from '@hypertrace/common';
+import { ListViewHeader, ListViewRecord } from '@hypertrace/components';
+import { WidgetRenderer } from '@hypertrace/dashboards';
+import { Renderer } from '@hypertrace/hyperdash';
+import { Observable } from 'rxjs';
+import { LogDetailWidgetModel } from './log-detail-widget.model';
+
+@Renderer({ modelClass: LogDetailWidgetModel })
+@Component({
+  selector: 'ht-log-detail-widget-renderer',
+  styleUrls: ['./log-detail-widget-renderer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="content" *htLoadAsync="this.data$ as attributes">
+      <ht-list-view
+        [records]="this.getLogEventAttributeRecords(attributes)"
+        [header]="this.header"
+        data-sensitive-pii
+      ></ht-list-view>
+    </div>
+  `
+})
+export class LogDetailWidgetRendererComponent extends WidgetRenderer<LogDetailWidgetModel, Dictionary<unknown>> {
+  public readonly header: ListViewHeader = { keyLabel: 'key', valueLabel: 'value' };
+
+  protected fetchData(): Observable<Dictionary<unknown>> {
+    return this.model.getData();
+  }
+
+  public getLogEventAttributeRecords(attributes: Dictionary<unknown>): ListViewRecord[] {
+    if (Boolean(attributes)) {
+      return Object.entries(attributes).map((attribute: [string, unknown]) => ({
+        key: attribute[0],
+        value: attribute[1] as string | number
+      }));
+    }
+
+    return [];
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Dictionary } from '@hypertrace/common';
+import { Model, ModelApi } from '@hypertrace/hyperdash';
+import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
+import { Observable } from 'rxjs';
+
+@Model({
+  type: 'log-detail-widget',
+  supportedDataSourceTypes: []
+})
+export class LogDetailWidgetModel {
+  @ModelInject(MODEL_API)
+  private readonly api!: ModelApi;
+
+  public getData(): Observable<Dictionary<unknown>> {
+    return this.api.getData<Dictionary<unknown>>();
+  }
+}

projects/distributed-tracing/src/shared/dashboard/widgets/log-detail/log-detail-widget.module.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ListViewModule, LoadAsyncModule, SummaryValueModule, TitledContentModule } from '@hypertrace/components';
+import { DashboardCoreModule } from '@hypertrace/hyperdash-angular';
+import { SpanDetailModule } from '../../../components/span-detail/span-detail.module';
+import { LogDetailDataSourceModel } from './data/log-detail-data-source.model';
+import { LogDetailWidgetRendererComponent } from './log-detail-widget-renderer.component';
+import { LogDetailWidgetModel } from './log-detail-widget.model';
+
+@NgModule({
+  declarations: [LogDetailWidgetRendererComponent],
+  imports: [
+    DashboardCoreModule.with({
+      models: [LogDetailWidgetModel, LogDetailDataSourceModel],
+      renderers: [LogDetailWidgetRendererComponent]
+    }),
+    CommonModule,
+    SpanDetailModule,
+    TitledContentModule,
+    ListViewModule,
+    LoadAsyncModule,
+    SummaryValueModule
+  ]
+})
+export class LogDetailWidgetModule {}

projects/distributed-tracing/src/shared/dashboard/widgets/tracing-dashboard-widgets.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
+import { LogDetailWidgetModule } from './log-detail/log-detail-widget.module';
 import { SpanDetailWidgetModule } from './span-detail/span-detail-widget.module';
 import { TableWidgetModule } from './table/table-widget.module';
 import { TraceDetailModule } from './trace-detail/trace-detail-widget.module';
 import { WaterfallWidgetModule } from './waterfall/waterfall-widget.module';
 
 @NgModule({
-  imports: [SpanDetailWidgetModule, TableWidgetModule, TraceDetailModule, WaterfallWidgetModule]
+  imports: [SpanDetailWidgetModule, LogDetailWidgetModule, TableWidgetModule, TraceDetailModule, WaterfallWidgetModule]
 })
 export class TracingDashboardWidgetsModule {}

projects/observability/src/shared/components/table/data-cell/log-timestamp/log-timestamp-table-cell-renderer.component.scss

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

projects/observability/src/shared/components/table/data-cell/log-timestamp/log-timestamp-table-cell-renderer.component.test.ts

@@ -0,0 +1,42 @@
+import {
+  TableCellNoOpParser,
+  tableCellProviders,
+  tableCellRowDataProvider,
+  TooltipDirective
+} from '@hypertrace/components';
+import { LogEvent } from '@hypertrace/distributed-tracing';
+import { createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { LogTimestampTableCellRendererComponent } from './log-timestamp-table-cell-renderer.component';
+
+describe('log timestamp table cell renderer component', () => {
+  const buildComponent = createComponentFactory({
+    component: LogTimestampTableCellRendererComponent,
+    providers: [
+      tableCellProviders(
+        {
+          id: 'test'
+        },
+        new TableCellNoOpParser(undefined!)
+      )
+    ],
+    declarations: [MockComponent(TooltipDirective)],
+    shallow: true
+  });
+
+  test('testing component properties', () => {
+    const logEvent: LogEvent = {
+      timestamp: '2021-04-30T12:23:57.889149Z',
+      spanStartTime: 1619785437887
+    };
+    const spectator = buildComponent({
+      providers: [tableCellRowDataProvider(logEvent)]
+    });
+
+    expect(spectator.queryAll('.log-timestamp')[0]).toContainText('2.89 ms');
+    expect(spectator.component.spanStartTime).toBe(logEvent.spanStartTime);
+    expect(spectator.component.timestamp).toBe(logEvent.timestamp);
+    expect(spectator.component.duration).toBe('2.89 ms');
+    expect(spectator.component.readableDateTime).toBe('2021/04/30 12:23:57.889');
+  });
+});

projects/observability/src/shared/components/table/data-cell/log-timestamp/log-timestamp-table-cell-renderer.component.ts

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { DateCoercer } from '@hypertrace/common';
+import {
+  CoreTableCellParserType,
+  TableCellAlignmentType,
+  TableCellParserBase,
+  TableCellRenderer,
+  TableCellRendererBase,
+  TableColumnConfig,
+  TABLE_CELL_DATA,
+  TABLE_COLUMN_CONFIG,
+  TABLE_COLUMN_INDEX,
+  TABLE_DATA_PARSER,
+  TABLE_ROW_DATA
+} from '@hypertrace/components';
+import { LogEvent } from '@hypertrace/distributed-tracing';
+import { ObservabilityTableCellType } from '../../observability-table-cell-type';
+
+@Component({
+  selector: 'ht-log-timestamp-table-cell-renderer',
+  styleUrls: ['./log-timestamp-table-cell-renderer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="log-timestamp" [htTooltip]="tooltip" [ngClass]="{ 'first-column': this.isFirstColumn }">
+      {{ this.duration }}
+    </div>
+    <ng-template #tooltip>{{ this.readableDateTime }}</ng-template>
+  `
+})
+@TableCellRenderer({
+  type: ObservabilityTableCellType.LogTimestamp,
+  alignment: TableCellAlignmentType.Left,
+  parser: CoreTableCellParserType.NoOp
+})
+export class LogTimestampTableCellRendererComponent extends TableCellRendererBase<string> implements OnInit {
+  public readonly spanStartTime: number;
+  public readonly timestamp?: string;
+  public readonly duration?: string;
+  public readonly readableDateTime?: string;
+
+  private readonly dateCoercer = new DateCoercer();
+
+  public constructor(
+    @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
+    @Inject(TABLE_COLUMN_INDEX) index: number,
+    @Inject(TABLE_DATA_PARSER)
+    parser: TableCellParserBase<string, string, unknown>,
+    @Inject(TABLE_CELL_DATA) cellData: any,
+    @Inject(TABLE_ROW_DATA) rowData: LogEvent
+  ) {
+    super(columnConfig, index, parser, cellData, rowData);
+    this.spanStartTime = rowData.spanStartTime as number;
+    this.timestamp = rowData.timestamp;
+    this.readableDateTime =
+      this.timestamp
+        ?.replace('T', ' ')
+        .replace('Z', ' ')
+        .replace(/-/g, '/')
+        .substr(0, this.timestamp.length - 8) + this.getDecimalMilliSeconds(this.timestamp, 3);
+
+    const date: Date = this.dateCoercer.coerce(this.timestamp) ?? new Date();
+    const decimalMilliseconds: string = this.getDecimalMilliSeconds(this.timestamp, 2);
+    this.duration = date.getTime() - this.spanStartTime + decimalMilliseconds + ' ms';
+  }
+
+  private getDecimalMilliSeconds(timestamp: string = '', precision: number): string {
+    return String(Number('0.' + timestamp.substr(timestamp.length - 7, 6)).toFixed(precision)).substring(1);
+  }
+}