From c13757aaf9450c846fe194a5f7b1711a15f50e13 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Thu, 8 Apr 2021 16:14:57 +0530
Subject: [PATCH 1/7] feat: show exit calls break up on hover on exit calls
 cell in trace list

---
 ...t-calls-table-cell-renderer.component.scss | 31 +++++++
 ...alls-table-cell-renderer.component.test.ts | 43 ++++++++++
 ...xit-calls-table-cell-renderer.component.ts | 84 +++++++++++++++++++
 ...bservability-table-cell-renderer.module.ts | 16 +++-
 4 files changed, 170 insertions(+), 4 deletions(-)
 create mode 100644 projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss
 create mode 100644 projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
 create mode 100644 projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts

diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss
new file mode 100644
index 000000000..3c768023b
--- /dev/null
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss
@@ -0,0 +1,31 @@
+@import 'color-palette';
+@import 'font';
+
+.exit-calls-count {
+  @include body-1-regular($gray-7);
+}
+
+.api-callee-name-count {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px;
+
+  .api-callee-name {
+    @include ellipsis-overflow();
+    max-width: 200px;
+    font-size: 13.5px;
+    color: $gray-2;
+  }
+
+  .api-callee-count {
+    color: white;
+    font-size: 15px;
+    margin-left: 50px;
+  }
+}
+
+.remaining-api-callee {
+  font-size: 13.5px;
+  padding: 2px;
+}
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
new file mode 100644
index 000000000..5524ac4ae
--- /dev/null
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
@@ -0,0 +1,43 @@
+import { TooltipDirective } from '@hypertrace/components';
+import { TableCellNoOpParser, tableCellProviders, tableCellRowDataProvider } from '@hypertrace/components';
+import { createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { ExitCallsTableCellRendererComponent } from './exit-calls-table-cell-renderer.component';
+
+describe('Exit Calls table cell renderer component', () => {
+  const buildComponent = createComponentFactory({
+    component: ExitCallsTableCellRendererComponent,
+    providers: [
+      tableCellProviders(
+        {
+          id: 'test'
+        },
+        new TableCellNoOpParser(undefined!)
+      )
+    ],
+    declarations: [MockComponent(TooltipDirective)],
+    shallow: true
+  });
+
+  test('should render a number as expected', () => {
+    const spectator = buildComponent({
+      providers: [tableCellRowDataProvider({ apiExitCalls: 1 })]
+    });
+
+    expect(spectator.query('.exit-calls-count')).toHaveText('1');
+    expect(spectator.query(TooltipDirective)).toExist();
+  });
+
+  test('testing getMaxShowAPICalleeNameCount function', () => {
+    const value = {
+      key1: '1',
+      key2: '2'
+    };
+    const spectator = buildComponent({
+      providers: [tableCellRowDataProvider({ apiExitCalls: 2, apiCalleeNameCount: value })]
+    });
+
+    expect(spectator.component.getMaxShowAPICalleeNameCount(value)).toMatchObject(value);
+    expect(spectator.component.totalCountOfDifferentAPICallee).toBe(2);
+  });
+});
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
new file mode 100644
index 000000000..831df09ce
--- /dev/null
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+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 { Trace } from '@hypertrace/distributed-tracing';
+import { ExploreValue } from '@hypertrace/observability';
+
+export const EXIT_CALLS_CELL = 'EXIT_CALLS_CELL';
+
+@Component({
+  selector: 'exit-calls-table-cell-renderer',
+  styleUrls: ['./exit-calls-table-cell-renderer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="exit-calls-cell" [htTooltip]="exitCallsTooltip">
+      <span class="exit-calls-count">{{ this.apiExitCalls }}</span>
+
+      <ng-template #exitCallsTooltip>
+        <ng-container *ngIf="this.apiExitCalls > 0">
+          <div *ngFor="let item of this.apiCalleeNameCount | keyvalue" class="api-callee-name-count">
+            <span class="api-callee-name">{{ item.key }}</span>
+            <span class="api-callee-count">{{ item.value }}</span>
+          </div>
+          <div
+            *ngIf="this.totalCountOfDifferentAPICallee > this.maxShowAPICalleeNameCount"
+            class="remaining-api-callee"
+          >
+            and {{ this.totalCountOfDifferentAPICallee - this.maxShowAPICalleeNameCount }} more
+          </div>
+        </ng-container>
+        <ng-container *ngIf="this.apiExitCalls <= 0" class="no-exit-calls">No exit calls</ng-container>
+      </ng-template>
+    </div>
+  `
+})
+@TableCellRenderer({
+  type: EXIT_CALLS_CELL,
+  alignment: TableCellAlignmentType.Left,
+  parser: CoreTableCellParserType.NoOp
+})
+export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<ExploreValue, any> implements OnInit {
+  public readonly apiCalleeNameCount: any;
+  public readonly apiExitCalls: number;
+  public readonly maxShowAPICalleeNameCount: number = 10;
+  public totalCountOfDifferentAPICallee!: number;
+
+  public constructor(
+    @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
+    @Inject(TABLE_COLUMN_INDEX) index: number,
+    @Inject(TABLE_DATA_PARSER) parser: TableCellParserBase<ExploreValue, Trace, unknown>,
+    @Inject(TABLE_CELL_DATA) cellData: ExploreValue,
+    @Inject(TABLE_ROW_DATA) rowData: Trace
+  ) {
+    super(columnConfig, index, parser, cellData, rowData);
+    this.apiCalleeNameCount = this.getMaxShowAPICalleeNameCount(rowData.apiCalleeNameCount);
+    this.apiExitCalls = Number(rowData.apiExitCalls);
+  }
+
+  public getMaxShowAPICalleeNameCount(apiCalleeNameCount: any): any {
+    if (apiCalleeNameCount) {
+      const showAPICalleeNameCount: any = {};
+      let count = 0;
+      Object.keys(apiCalleeNameCount).forEach((key: string) => {
+        if (count < this.maxShowAPICalleeNameCount) {
+          showAPICalleeNameCount[key] = apiCalleeNameCount[key];
+          count++;
+        }
+      });
+      this.totalCountOfDifferentAPICallee = Object.keys(apiCalleeNameCount).length;
+      return showAPICalleeNameCount;
+    }
+    return {};
+  }
+}
diff --git a/projects/observability/src/shared/components/table/observability-table-cell-renderer.module.ts b/projects/observability/src/shared/components/table/observability-table-cell-renderer.module.ts
index d0958ada3..5f2855f7e 100644
--- a/projects/observability/src/shared/components/table/observability-table-cell-renderer.module.ts
+++ b/projects/observability/src/shared/components/table/observability-table-cell-renderer.module.ts
@@ -1,20 +1,28 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { TableModule } from '@hypertrace/components';
+import { TableModule, TooltipModule } from '@hypertrace/components';
 import { BackendIconTableCellParser } from './data-cell/backend-icon/backend-icon-table-cell-parser';
 import { BackendIconTableCellRendererComponent } from './data-cell/backend-icon/backend-icon-table-cell-renderer.component';
 import { BackendIconTableCellRendererModule } from './data-cell/backend-icon/backend-icon-table-cell-renderer.module';
 import { EntityTableCellParser } from './data-cell/entity/entity-table-cell-parser';
 import { EntityTableCellRendererComponent } from './data-cell/entity/entity-table-cell-renderer.component';
 import { EntityTableCellRendererModule } from './data-cell/entity/entity-table-cell-renderer.module';
+import { ExitCallsTableCellRendererComponent } from './data-cell/exit-calls/exit-calls-table-cell-renderer.component';
 
 @NgModule({
   imports: [
     CommonModule,
     TableModule.withCellParsers([EntityTableCellParser, BackendIconTableCellParser]),
-    TableModule.withCellRenderers([EntityTableCellRendererComponent, BackendIconTableCellRendererComponent]),
+    TableModule.withCellRenderers([
+      EntityTableCellRendererComponent,
+      BackendIconTableCellRendererComponent,
+      ExitCallsTableCellRendererComponent
+    ]),
     EntityTableCellRendererModule,
-    BackendIconTableCellRendererModule
-  ]
+    BackendIconTableCellRendererModule,
+    TooltipModule
+  ],
+  declarations: [ExitCallsTableCellRendererComponent],
+  exports: [ExitCallsTableCellRendererComponent]
 })
 export class ObservabilityTableCellRendererModule {}

From b92bbeae0b51d6f5c00e3899fe6b84a15bcfad23 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Fri, 9 Apr 2021 12:13:03 +0530
Subject: [PATCH 2/7] fix: addressing pull request comments

---
 ...alls-table-cell-renderer.component.test.ts | 18 +++++---
 ...xit-calls-table-cell-renderer.component.ts | 43 ++++++-------------
 .../table/observability-table-cell-type.ts    |  3 +-
 3 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
index 5524ac4ae..14ed1d3dd 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
@@ -1,5 +1,9 @@
-import { TooltipDirective } from '@hypertrace/components';
-import { TableCellNoOpParser, tableCellProviders, tableCellRowDataProvider } from '@hypertrace/components';
+import {
+  TooltipDirective,
+  TableCellNoOpParser,
+  tableCellProviders,
+  tableCellRowDataProvider
+} from '@hypertrace/components';
 import { createComponentFactory } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { ExitCallsTableCellRendererComponent } from './exit-calls-table-cell-renderer.component';
@@ -28,7 +32,7 @@ describe('Exit Calls table cell renderer component', () => {
     expect(spectator.query(TooltipDirective)).toExist();
   });
 
-  test('testing getMaxShowAPICalleeNameCount function', () => {
+  test('testing component properties', () => {
     const value = {
       key1: '1',
       key2: '2'
@@ -37,7 +41,11 @@ describe('Exit Calls table cell renderer component', () => {
       providers: [tableCellRowDataProvider({ apiExitCalls: 2, apiCalleeNameCount: value })]
     });
 
-    expect(spectator.component.getMaxShowAPICalleeNameCount(value)).toMatchObject(value);
-    expect(spectator.component.totalCountOfDifferentAPICallee).toBe(2);
+    expect(spectator.component.apiCalleeNameCount).toMatchObject([
+      ['key1', '1'],
+      ['key2', '2']
+    ]);
+    expect(spectator.component.totalCountOfDifferentApiCallee).toBe(2);
+    expect(spectator.component.apiExitCalls).toBe(2);
   });
 });
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
index 831df09ce..384f7d98b 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
@@ -14,11 +14,10 @@ import {
 } from '@hypertrace/components';
 import { Trace } from '@hypertrace/distributed-tracing';
 import { ExploreValue } from '@hypertrace/observability';
-
-export const EXIT_CALLS_CELL = 'EXIT_CALLS_CELL';
+import { ObservabilityTableCellType } from '../../observability-table-cell-type';
 
 @Component({
-  selector: 'exit-calls-table-cell-renderer',
+  selector: 'ht-exit-calls-table-cell-renderer',
   styleUrls: ['./exit-calls-table-cell-renderer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
@@ -27,15 +26,15 @@ export const EXIT_CALLS_CELL = 'EXIT_CALLS_CELL';
 
       <ng-template #exitCallsTooltip>
         <ng-container *ngIf="this.apiExitCalls > 0">
-          <div *ngFor="let item of this.apiCalleeNameCount | keyvalue" class="api-callee-name-count">
-            <span class="api-callee-name">{{ item.key }}</span>
-            <span class="api-callee-count">{{ item.value }}</span>
+          <div *ngFor="let item of this.apiCalleeNameCount" class="api-callee-name-count">
+            <span class="api-callee-name">{{ item[0] }}</span>
+            <span class="api-callee-count">{{ item[1] }}</span>
           </div>
           <div
-            *ngIf="this.totalCountOfDifferentAPICallee > this.maxShowAPICalleeNameCount"
+            *ngIf="this.totalCountOfDifferentApiCallee > this.maxShowApiCalleeNameCount"
             class="remaining-api-callee"
           >
-            and {{ this.totalCountOfDifferentAPICallee - this.maxShowAPICalleeNameCount }} more
+            and {{ this.totalCountOfDifferentApiCallee - this.maxShowApiCalleeNameCount }} more
           </div>
         </ng-container>
         <ng-container *ngIf="this.apiExitCalls <= 0" class="no-exit-calls">No exit calls</ng-container>
@@ -44,15 +43,15 @@ export const EXIT_CALLS_CELL = 'EXIT_CALLS_CELL';
   `
 })
 @TableCellRenderer({
-  type: EXIT_CALLS_CELL,
+  type: ObservabilityTableCellType.ExitCalls,
   alignment: TableCellAlignmentType.Left,
   parser: CoreTableCellParserType.NoOp
 })
 export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<ExploreValue, any> implements OnInit {
-  public readonly apiCalleeNameCount: any;
+  public readonly apiCalleeNameCount: string[][];
   public readonly apiExitCalls: number;
-  public readonly maxShowAPICalleeNameCount: number = 10;
-  public totalCountOfDifferentAPICallee!: number;
+  public readonly maxShowApiCalleeNameCount: number = 10;
+  public readonly totalCountOfDifferentApiCallee!: number;
 
   public constructor(
     @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
@@ -62,23 +61,9 @@ export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<E
     @Inject(TABLE_ROW_DATA) rowData: Trace
   ) {
     super(columnConfig, index, parser, cellData, rowData);
-    this.apiCalleeNameCount = this.getMaxShowAPICalleeNameCount(rowData.apiCalleeNameCount);
+    const apiCalleeNameCount: string[][] = Object.entries(Object(rowData.apiCalleeNameCount));
+    this.totalCountOfDifferentApiCallee = apiCalleeNameCount.length;
+    this.apiCalleeNameCount = apiCalleeNameCount.slice(0, this.maxShowApiCalleeNameCount);
     this.apiExitCalls = Number(rowData.apiExitCalls);
   }
-
-  public getMaxShowAPICalleeNameCount(apiCalleeNameCount: any): any {
-    if (apiCalleeNameCount) {
-      const showAPICalleeNameCount: any = {};
-      let count = 0;
-      Object.keys(apiCalleeNameCount).forEach((key: string) => {
-        if (count < this.maxShowAPICalleeNameCount) {
-          showAPICalleeNameCount[key] = apiCalleeNameCount[key];
-          count++;
-        }
-      });
-      this.totalCountOfDifferentAPICallee = Object.keys(apiCalleeNameCount).length;
-      return showAPICalleeNameCount;
-    }
-    return {};
-  }
 }
diff --git a/projects/observability/src/shared/components/table/observability-table-cell-type.ts b/projects/observability/src/shared/components/table/observability-table-cell-type.ts
index f16334ff3..3c7f686c0 100644
--- a/projects/observability/src/shared/components/table/observability-table-cell-type.ts
+++ b/projects/observability/src/shared/components/table/observability-table-cell-type.ts
@@ -1,4 +1,5 @@
 export const enum ObservabilityTableCellType {
   Entity = 'entity',
-  BackendIcon = 'backend-icon'
+  BackendIcon = 'backend-icon',
+  ExitCalls = 'exit-calls'
 }

From d56cb57c496d727eca4c7bebf398b16ca0996a31 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Fri, 9 Apr 2021 12:21:22 +0530
Subject: [PATCH 3/7] fix: lint errors

---
 .../exit-calls-table-cell-renderer.component.test.ts          | 4 ++--
 .../exit-calls/exit-calls-table-cell-renderer.component.ts    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
index 14ed1d3dd..4c8a015f6 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
@@ -1,8 +1,8 @@
 import {
-  TooltipDirective,
   TableCellNoOpParser,
   tableCellProviders,
-  tableCellRowDataProvider
+  tableCellRowDataProvider,
+  TooltipDirective
 } from '@hypertrace/components';
 import { createComponentFactory } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
index 384f7d98b..7c1980a08 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
@@ -47,7 +47,7 @@ import { ObservabilityTableCellType } from '../../observability-table-cell-type'
   alignment: TableCellAlignmentType.Left,
   parser: CoreTableCellParserType.NoOp
 })
-export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<ExploreValue, any> implements OnInit {
+export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<ExploreValue, Trace> implements OnInit {
   public readonly apiCalleeNameCount: string[][];
   public readonly apiExitCalls: number;
   public readonly maxShowApiCalleeNameCount: number = 10;

From 1f2f9d1d89c1195d564ab60a70f691ceae17e440 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Fri, 9 Apr 2021 14:18:55 +0530
Subject: [PATCH 4/7] fix: addressing review commnet

---
 .../exit-calls-table-cell-renderer.component.scss           | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss
index 3c768023b..5f7075ee5 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss
@@ -6,6 +6,7 @@
 }
 
 .api-callee-name-count {
+  @include body-small($gray-3);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -14,18 +15,15 @@
   .api-callee-name {
     @include ellipsis-overflow();
     max-width: 200px;
-    font-size: 13.5px;
-    color: $gray-2;
   }
 
   .api-callee-count {
     color: white;
-    font-size: 15px;
     margin-left: 50px;
   }
 }
 
 .remaining-api-callee {
-  font-size: 13.5px;
+  @include body-small($gray-3);
   padding: 2px;
 }

From 1c394d607c14386650efc0f92ec7b1eaa96c66cc Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 14 Apr 2021 13:01:58 +0530
Subject: [PATCH 5/7] chore: using composite specification

---
 .../traces-graphql-query-handler.service.ts    |  9 +++++----
 .../traces/api-trace-list.dashboard.ts         | 16 ++++++++++++++--
 .../traces/service-trace-list.dashboard.ts     | 16 ++++++++++++++--
 ...exit-calls-table-cell-renderer.component.ts | 18 ++++++++++++------
 4 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/projects/distributed-tracing/src/shared/graphql/request/handlers/traces/traces-graphql-query-handler.service.ts b/projects/distributed-tracing/src/shared/graphql/request/handlers/traces/traces-graphql-query-handler.service.ts
index 9e88f9da1..f7f883c89 100644
--- a/projects/distributed-tracing/src/shared/graphql/request/handlers/traces/traces-graphql-query-handler.service.ts
+++ b/projects/distributed-tracing/src/shared/graphql/request/handlers/traces/traces-graphql-query-handler.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Dictionary, forkJoinSafeEmpty } from '@hypertrace/common';
 import { GraphQlHandlerType, GraphQlQueryHandler, GraphQlSelection } from '@hypertrace/graphql-client';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { defaultIfEmpty, map } from 'rxjs/operators';
 import { MetadataService } from '../../../../services/metadata/metadata.service';
 import { GlobalGraphQlFilterService } from '../../../model/schema/filter/global-graphql-filter.service';
 import { GraphQlFilter } from '../../../model/schema/filter/graphql-filter';
@@ -98,9 +98,10 @@ export class TracesGraphQlQueryHandlerService implements GraphQlQueryHandler<Gra
   }
 
   private resultUnits(specification: Specification, scope: string): Observable<string | undefined> {
-    return this.metadataService
-      .getAttribute(scope, specification.name)
-      .pipe(map(attribute => (attribute.units !== '' ? attribute.units : undefined)));
+    return this.metadataService.getAttribute(scope, specification.name).pipe(
+      map(attribute => (attribute.units !== '' ? attribute.units : undefined)),
+      defaultIfEmpty<string | undefined>(undefined)
+    );
   }
 }
 
diff --git a/projects/observability/src/pages/apis/api-detail/traces/api-trace-list.dashboard.ts b/projects/observability/src/pages/apis/api-detail/traces/api-trace-list.dashboard.ts
index eb5758f0a..e125d7ae0 100644
--- a/projects/observability/src/pages/apis/api-detail/traces/api-trace-list.dashboard.ts
+++ b/projects/observability/src/pages/apis/api-detail/traces/api-trace-list.dashboard.ts
@@ -1,5 +1,6 @@
 import { CoreTableCellRendererType, TableMode, TableSortDirection, TableStyle } from '@hypertrace/components';
 import { TracingTableCellType } from '@hypertrace/distributed-tracing';
+import { ObservabilityTableCellType } from '../../../../shared/components/table/observability-table-cell-type';
 import { ObservabilityTraceType } from '../../../../shared/graphql/model/schema/observability-traces';
 
 export const apiTraceListDashboard = {
@@ -25,9 +26,20 @@ export const apiTraceListDashboard = {
         type: 'table-widget-column',
         title: 'Exit Calls',
         filterable: true,
+        display: ObservabilityTableCellType.ExitCalls,
         value: {
-          type: 'attribute-specification',
-          attribute: 'apiExitCalls'
+          type: 'composite-specification',
+          specifications: [
+            {
+              type: 'attribute-specification',
+              attribute: 'apiExitCalls'
+            },
+            {
+              type: 'attribute-specification',
+              attribute: 'apiCalleeNameCount'
+            }
+          ],
+          'order-by': 'apiExitCalls'
         },
         'click-handler': {
           type: 'api-trace-navigation-handler'
diff --git a/projects/observability/src/pages/apis/service-detail/traces/service-trace-list.dashboard.ts b/projects/observability/src/pages/apis/service-detail/traces/service-trace-list.dashboard.ts
index 7f2c49002..b7621cdd5 100644
--- a/projects/observability/src/pages/apis/service-detail/traces/service-trace-list.dashboard.ts
+++ b/projects/observability/src/pages/apis/service-detail/traces/service-trace-list.dashboard.ts
@@ -1,5 +1,6 @@
 import { CoreTableCellRendererType, TableMode, TableSortDirection, TableStyle } from '@hypertrace/components';
 import { TracingTableCellType } from '@hypertrace/distributed-tracing';
+import { ObservabilityTableCellType } from '../../../../shared/components/table/observability-table-cell-type';
 import { ObservabilityTraceType } from '../../../../shared/graphql/model/schema/observability-traces';
 
 export const serviceTraceListDashboard = {
@@ -51,9 +52,20 @@ export const serviceTraceListDashboard = {
         type: 'table-widget-column',
         title: 'Exit Calls',
         filterable: true,
+        display: ObservabilityTableCellType.ExitCalls,
         value: {
-          type: 'attribute-specification',
-          attribute: 'apiExitCalls'
+          type: 'composite-specification',
+          specifications: [
+            {
+              type: 'attribute-specification',
+              attribute: 'apiExitCalls'
+            },
+            {
+              type: 'attribute-specification',
+              attribute: 'apiCalleeNameCount'
+            }
+          ],
+          'order-by': 'apiExitCalls'
         },
         'click-handler': {
           type: 'api-trace-navigation-handler'
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
index 7c1980a08..1535035ed 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { Dictionary } from '@hypertrace/common';
 import {
   CoreTableCellParserType,
   TableCellAlignmentType,
@@ -13,9 +14,13 @@ import {
   TABLE_ROW_DATA
 } from '@hypertrace/components';
 import { Trace } from '@hypertrace/distributed-tracing';
-import { ExploreValue } from '@hypertrace/observability';
+// import { ExploreValue } from '@hypertrace/observability';
 import { ObservabilityTableCellType } from '../../observability-table-cell-type';
 
+interface CellData {
+  units: number;
+  value: [number, Dictionary<string>];
+}
 @Component({
   selector: 'ht-exit-calls-table-cell-renderer',
   styleUrls: ['./exit-calls-table-cell-renderer.component.scss'],
@@ -47,7 +52,7 @@ import { ObservabilityTableCellType } from '../../observability-table-cell-type'
   alignment: TableCellAlignmentType.Left,
   parser: CoreTableCellParserType.NoOp
 })
-export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<ExploreValue, Trace> implements OnInit {
+export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<CellData, Trace> implements OnInit {
   public readonly apiCalleeNameCount: string[][];
   public readonly apiExitCalls: number;
   public readonly maxShowApiCalleeNameCount: number = 10;
@@ -56,14 +61,15 @@ export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<E
   public constructor(
     @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
     @Inject(TABLE_COLUMN_INDEX) index: number,
-    @Inject(TABLE_DATA_PARSER) parser: TableCellParserBase<ExploreValue, Trace, unknown>,
-    @Inject(TABLE_CELL_DATA) cellData: ExploreValue,
+    @Inject(TABLE_DATA_PARSER)
+    parser: TableCellParserBase<CellData, Trace, unknown>,
+    @Inject(TABLE_CELL_DATA) cellData: CellData,
     @Inject(TABLE_ROW_DATA) rowData: Trace
   ) {
     super(columnConfig, index, parser, cellData, rowData);
-    const apiCalleeNameCount: string[][] = Object.entries(Object(rowData.apiCalleeNameCount));
+    const apiCalleeNameCount: string[][] = Object.entries(cellData.value[1]);
     this.totalCountOfDifferentApiCallee = apiCalleeNameCount.length;
     this.apiCalleeNameCount = apiCalleeNameCount.slice(0, this.maxShowApiCalleeNameCount);
-    this.apiExitCalls = Number(rowData.apiExitCalls);
+    this.apiExitCalls = cellData.value[0];
   }
 }

From 0584eb7d62641f1bac86c697e4b844758ca9d7ac Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 14 Apr 2021 13:40:36 +0530
Subject: [PATCH 6/7] fix: lint errors and tests

---
 ...t-calls-table-cell-renderer.component.test.ts | 16 ++++------------
 .../exit-calls-table-cell-renderer.component.ts  |  1 -
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
index 4c8a015f6..1f8f3fb0a 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
@@ -1,7 +1,7 @@
 import {
   TableCellNoOpParser,
+  tableCellDataProvider,
   tableCellProviders,
-  tableCellRowDataProvider,
   TooltipDirective
 } from '@hypertrace/components';
 import { createComponentFactory } from '@ngneat/spectator/jest';
@@ -23,29 +23,21 @@ describe('Exit Calls table cell renderer component', () => {
     shallow: true
   });
 
-  test('should render a number as expected', () => {
-    const spectator = buildComponent({
-      providers: [tableCellRowDataProvider({ apiExitCalls: 1 })]
-    });
-
-    expect(spectator.query('.exit-calls-count')).toHaveText('1');
-    expect(spectator.query(TooltipDirective)).toExist();
-  });
-
   test('testing component properties', () => {
     const value = {
       key1: '1',
       key2: '2'
     };
     const spectator = buildComponent({
-      providers: [tableCellRowDataProvider({ apiExitCalls: 2, apiCalleeNameCount: value })]
+      providers: [tableCellDataProvider({ value: [3, value] })]
     });
 
+    expect(spectator.queryAll('.exit-calls-count')[0]).toContainText('3');
     expect(spectator.component.apiCalleeNameCount).toMatchObject([
       ['key1', '1'],
       ['key2', '2']
     ]);
     expect(spectator.component.totalCountOfDifferentApiCallee).toBe(2);
-    expect(spectator.component.apiExitCalls).toBe(2);
+    expect(spectator.component.apiExitCalls).toBe(3);
   });
 });
diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
index 1535035ed..374424dcc 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts
@@ -14,7 +14,6 @@ import {
   TABLE_ROW_DATA
 } from '@hypertrace/components';
 import { Trace } from '@hypertrace/distributed-tracing';
-// import { ExploreValue } from '@hypertrace/observability';
 import { ObservabilityTableCellType } from '../../observability-table-cell-type';
 
 interface CellData {

From 541751a4f7fc4aa414e3eb0d2c3bcb9dab5d334f Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 14 Apr 2021 13:52:37 +0530
Subject: [PATCH 7/7] fix: lint errors

---
 .../exit-calls/exit-calls-table-cell-renderer.component.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
index 1f8f3fb0a..a18c75e68 100644
--- a/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
+++ b/projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts
@@ -1,6 +1,6 @@
 import {
-  TableCellNoOpParser,
   tableCellDataProvider,
+  TableCellNoOpParser,
   tableCellProviders,
   TooltipDirective
 } from '@hypertrace/components';