Merge branch 'main' of github.com:hypertrace/hypertrace-ui into UnableToClickTopology

Author: Patricio Albizu

package-lock.json

@@ -58,7 +58,7 @@
     "d3-transition": "^1.2.0",
     "d3-zoom": "^1.8.3",
     "graphql": "^15.5.0",
-    "graphql-tag": "^2.12.1",
+    "graphql-tag": "^2.12.3",
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
     "rxjs": "~6.6.7",
@@ -67,7 +67,7 @@
     "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^11.0.0",
+    "@angular-builders/jest": "^11.1.1",
     "@angular-devkit/build-angular": "~0.1102.0",
     "@angular/cli": "11.2.6",
     "@angular/compiler-cli": "~11.2.0",
@@ -102,7 +102,7 @@
     "jest-junit": "^12.0.0",
     "jest-preset-angular": "^8.4.0",
     "lodash": "^4.17.21",
-    "ng-mocks": "^11.9.1",
+    "ng-mocks": "^11.10.0",
     "ng-packagr": "^11.2.4",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.0.0",

package.json

@@ -1,4 +1,4 @@
-import { TableRowState } from '../../table-api';
+import { StatefulTableRow, TableRowState } from '../../table-api';
 import { TableCellParser } from '../table-cell-parser';
 import { TableCellParserBase } from '../table-cell-parser-base';
 import { CoreTableCellParserType } from '../types/core-table-cell-parser-type';
@@ -7,8 +7,8 @@ import { CoreTableCellParserType } from '../types/core-table-cell-parser-type';
   type: CoreTableCellParserType.State
 })
 export class TableCellStateParser extends TableCellParserBase<TableRowState, TableRowState, undefined> {
-  public parseValue(cellData: TableRowState): TableRowState {
-    return cellData;
+  public parseValue(_: TableRowState, rowData: StatefulTableRow): TableRowState {
+    return rowData.$$state;
   }
 
   public parseFilterValue(): undefined {

projects/components/src/table/cells/state-parsers/table-cell-state-parser.ts

@@ -1,7 +1,7 @@
 export const enum CoreTableCellParserType {
-  State = 'state',
   Boolean = 'boolean',
   Number = 'number',
+  State = 'state',
   String = 'string',
   Timestamp = 'timestamp',
   Icon = 'icon',

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

@@ -59,7 +59,7 @@ export class TableCdkDataSource implements DataSource<TableRow> {
       .pipe(
         tap(() => this.loadingStateSubject.next({ loading$: NEVER })),
         /**
-         * Below debouce is needed to handle multiple emission from buildChangeObservable.
+         * Below debounce is needed to handle multiple emission from buildChangeObservable.
          */
         debounceTime(100),
         mergeMap(([columnConfigs, pageEvent, filters, queryProperties, changedColumn, changedRow]) =>

projects/components/src/table/data/table-cdk-data-source.ts

@@ -306,7 +306,7 @@ describe('Table component', () => {
       expectObservable(spectator.component.columnConfigs$).toBe('x', {
         x: [
           expect.objectContaining({
-            id: '$$state',
+            id: '$$selected',
             display: CoreTableCellRendererType.Checkbox,
             visible: true
           }),
@@ -371,16 +371,21 @@ describe('Table component', () => {
           map(columnConfigs => columnConfigs.map(columnConfig => spectator.component.isExpanderColumn(columnConfig)))
         )
       ).toBe('x', {
-        x: [true, false, false]
+        x: [true, false, false, false]
       });
 
       expectObservable(spectator.component.columnConfigs$).toBe('x', {
         x: [
           expect.objectContaining({
-            id: '$$state',
+            id: '$$expanded',
             display: CoreTableCellRendererType.RowExpander,
             visible: true
           }),
+          expect.objectContaining({
+            id: '$$selected',
+            display: CoreTableCellRendererType.Checkbox,
+            visible: true
+          }),
           expect.objectContaining({
             id: 'firstId'
           }),

projects/components/src/table/table.component.test.ts

@@ -194,15 +194,15 @@ export class TableComponent
   private static readonly SORT_DIRECTION_URL_PARAM: string = 'sort-direction';
 
   private readonly expandableToggleColumnConfig: TableColumnConfig = {
-    id: '$$state',
+    id: '$$expanded',
     width: '32px',
     visible: true,
     display: CoreTableCellRendererType.RowExpander,
     onClick: (row: StatefulTableRow) => this.toggleRowExpanded(row)
   };
 
   private readonly multiSelectRowColumnConfig: TableColumnConfig = {
-    id: '$$state',
+    id: '$$selected',
     width: '32px',
     visible: true,
     display: CoreTableCellRendererType.Checkbox,
@@ -569,11 +569,15 @@ export class TableComponent
   }
 
   private buildColumnConfigExtendeds(columnConfigs: TableColumnConfig[]): TableColumnConfigExtended[] {
-    const stateColumns = this.hasExpandableRows()
-      ? [this.expandableToggleColumnConfig]
-      : this.hasMultiSelect()
-      ? [this.multiSelectRowColumnConfig]
-      : [];
+    const stateColumns = [];
+
+    if (this.hasExpandableRows()) {
+      stateColumns.push(this.expandableToggleColumnConfig);
+    }
+
+    if (this.hasMultiSelect()) {
+      stateColumns.push(this.multiSelectRowColumnConfig);
+    }
 
     return this.tableService.buildExtendedColumnConfigs(
       [...stateColumns, ...columnConfigs],

projects/components/src/table/table.component.ts

@@ -1,4 +1,5 @@
 import { ModelApi } from '@hypertrace/hyperdash';
+import { ObservabilityTraceType } from '@hypertrace/observability';
 import { spanIdKey } from '../../../../graphql/model/schema/span';
 import { traceIdKey, traceTypeKey, TRACE_SCOPE } from '../../../../graphql/model/schema/trace';
 import {
@@ -8,7 +9,7 @@ import {
 import { ObservedGraphQlRequest } from '../../../data/graphql/graphql-query-event.service';
 import { ApiTraceDetailDataSourceModel } from './api-trace-detail-data-source.model';
 
-describe('Trace detail data source model', () => {
+describe('API Trace detail data source model', () => {
   const testTimeRange = { startTime: new Date(1568907645141), endTime: new Date(1568911245141) };
   let model!: ApiTraceDetailDataSourceModel;
   let emittedQueries: unknown;
@@ -66,7 +67,11 @@ describe('Trace detail data source model', () => {
     });
   });
 
-  test('builds expected request', () => {
+  test('builds expected request for API_TRACE', () => {
+    model.trace = {
+      [traceIdKey]: 'test',
+      [traceTypeKey]: ObservabilityTraceType.Api
+    };
     const data$ = model.getData();
     data$.subscribe();
 
@@ -86,6 +91,25 @@ describe('Trace detail data source model', () => {
     );
   });
 
+  test('builds expected request', () => {
+    const data$ = model.getData();
+    data$.subscribe();
+
+    expect(emittedQueries).toEqual(
+      expect.objectContaining({
+        requestType: TRACE_GQL_REQUEST,
+        traceId: 'test',
+        spanLimit: 0,
+        timestamp: undefined,
+        traceProperties: expect.arrayContaining([
+          expect.objectContaining({ name: 'tags' }),
+          expect.objectContaining({ name: 'traceId' }),
+          expect.objectContaining({ name: 'statusCode' })
+        ])
+      })
+    );
+  });
+
   test('builds expected request with start time', () => {
     model.startTime = 1568907645141;
     const data$ = model.getData();
@@ -100,8 +124,7 @@ describe('Trace detail data source model', () => {
         traceProperties: expect.arrayContaining([
           expect.objectContaining({ name: 'tags' }),
           expect.objectContaining({ name: 'traceId' }),
-          expect.objectContaining({ name: 'statusCode' }),
-          expect.objectContaining({ name: 'apiCalleeNameCount' })
+          expect.objectContaining({ name: 'statusCode' })
         ])
       })
     );

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

@@ -1,15 +1,21 @@
 import { Model } from '@hypertrace/hyperdash';
-import { Trace, traceIdKey } from '../../../../graphql/model/schema/trace';
+import { Trace, traceIdKey, traceTypeKey } from '../../../../graphql/model/schema/trace';
 
 import { Dictionary } from '@hypertrace/common';
+import { ObservabilityTraceType } from '@hypertrace/observability';
 import { TraceDetailData, TraceDetailDataSourceModel } from './trace-detail-data-source.model';
 
 @Model({
   type: 'api-trace-detail-data-source'
 })
 export class ApiTraceDetailDataSourceModel extends TraceDetailDataSourceModel {
   protected getTraceAttributes(): string[] {
-    return [...super.getTraceAttributes(), 'traceId', 'apiCalleeNameCount'];
+    const attributes: string[] = [...super.getTraceAttributes(), 'traceId'];
+    if (this.trace[traceTypeKey] === ObservabilityTraceType.Api) {
+      attributes.push('apiCalleeNameCount');
+    }
+
+    return attributes;
   }
 
   protected constructTraceDetailData(trace: Trace): ApiTraceDetailData {