fix: removing filtering for exit calls cell in trace table (#772)

* feat: show exit calls break up on hover on exit calls cell in trace list

* fix: addressing pull request comments

* fix: lint errors

* fix: addressing review commnet

* chore: using composite specification

* fix: lint errors and tests

* fix: lint errors

* fix: remove filtering for exit calls

* refactor: addressing review comments

* refactor: addressing review comments

* refactor: addressing review comments

* fix: update tests

Author: itssharmasandeep

projects/observability/src/pages/apis/api-detail/traces/api-trace-list.dashboard.ts

@@ -25,7 +25,7 @@ export const apiTraceListDashboard = {
       {
         type: 'table-widget-column',
         title: 'Exit Calls',
-        filterable: true,
+        filterable: false,
         display: ObservabilityTableCellType.ExitCalls,
         value: {
           type: 'composite-specification',

projects/observability/src/pages/apis/service-detail/traces/service-trace-list.dashboard.ts

@@ -51,7 +51,7 @@ export const serviceTraceListDashboard = {
       {
         type: 'table-widget-column',
         title: 'Exit Calls',
-        filterable: true,
+        filterable: false,
         display: ObservabilityTableCellType.ExitCalls,
         value: {
           type: 'composite-specification',

projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.scss

@@ -5,7 +5,7 @@
   @include body-1-regular($gray-7);
 }
 
-.api-callee-name-count {
+.api-callee-name-entries {
   @include body-small($gray-3);
   display: flex;
   align-items: center;

projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.test.ts

@@ -33,11 +33,11 @@ describe('Exit Calls table cell renderer component', () => {
     });
 
     expect(spectator.queryAll('.exit-calls-count')[0]).toContainText('3');
-    expect(spectator.component.apiCalleeNameCount).toMatchObject([
+    expect(spectator.component.apiCalleeNameEntries).toMatchObject([
       ['key1', '1'],
       ['key2', '2']
     ]);
-    expect(spectator.component.totalCountOfDifferentApiCallee).toBe(2);
+    expect(spectator.component.uniqueApiCalleeCount).toBe(2);
     expect(spectator.component.apiExitCalls).toBe(3);
   });
 });

projects/observability/src/shared/components/table/data-cell/exit-calls/exit-calls-table-cell-renderer.component.ts

@@ -29,19 +29,19 @@ interface CellData {
       <span class="exit-calls-count">{{ this.apiExitCalls }}</span>
 
       <ng-template #exitCallsTooltip>
-        <ng-container *ngIf="this.apiExitCalls > 0">
-          <div *ngFor="let item of this.apiCalleeNameCount" class="api-callee-name-count">
+        <ng-container *ngIf="this.apiExitCalls > 0; else noExitCalls">
+          <div *ngFor="let item of this.apiCalleeNameEntries" class="api-callee-name-entries">
             <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.uniqueApiCalleeCount > ${ExitCallsTableCellRendererComponent.MAX_API_CALLEES_TO_SHOW}"
             class="remaining-api-callee"
           >
-            and {{ this.totalCountOfDifferentApiCallee - this.maxShowApiCalleeNameCount }} more
+            and {{ this.uniqueApiCalleeCount - ${ExitCallsTableCellRendererComponent.MAX_API_CALLEES_TO_SHOW} }} more
           </div>
         </ng-container>
-        <ng-container *ngIf="this.apiExitCalls <= 0" class="no-exit-calls">No exit calls</ng-container>
+        <ng-template #noExitCalls>No exit calls</ng-template>
       </ng-template>
     </div>
   `
@@ -52,10 +52,10 @@ interface CellData {
   parser: CoreTableCellParserType.NoOp
 })
 export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<CellData, Trace> implements OnInit {
-  public readonly apiCalleeNameCount: string[][];
+  public static readonly MAX_API_CALLEES_TO_SHOW: number = 10;
+  public readonly apiCalleeNameEntries: [string, string][];
   public readonly apiExitCalls: number;
-  public readonly maxShowApiCalleeNameCount: number = 10;
-  public readonly totalCountOfDifferentApiCallee!: number;
+  public readonly uniqueApiCalleeCount: number;
 
   public constructor(
     @Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
@@ -66,9 +66,12 @@ export class ExitCallsTableCellRendererComponent extends TableCellRendererBase<C
     @Inject(TABLE_ROW_DATA) rowData: Trace
   ) {
     super(columnConfig, index, parser, cellData, rowData);
-    const apiCalleeNameCount: string[][] = Object.entries(cellData.value[1]);
-    this.totalCountOfDifferentApiCallee = apiCalleeNameCount.length;
-    this.apiCalleeNameCount = apiCalleeNameCount.slice(0, this.maxShowApiCalleeNameCount);
+    const apiCalleeNameEntries: [string, string][] = Object.entries(cellData.value[1]);
+    this.uniqueApiCalleeCount = apiCalleeNameEntries.length;
+    this.apiCalleeNameEntries = apiCalleeNameEntries.slice(
+      0,
+      ExitCallsTableCellRendererComponent.MAX_API_CALLEES_TO_SHOW
+    );
     this.apiExitCalls = cellData.value[0];
   }
 }