[APM] Add service icon for the originating service in traces table (#…

…119421) * [APM] Add service icon for the originating service in traces table * Fix api test * Fix agentName type
elastic · Nov 29, 2021 · a0ca3d9 · a0ca3d9
1 parent 7e9b1bc
commit a0ca3d9
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 4 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx
@@ -5,7 +5,13 @@
  * 2.0.
  */
 
-import { EuiIcon, EuiToolTip, RIGHT_ALIGNMENT } from '@elastic/eui';
+import {
+  EuiIcon,
+  EuiToolTip,
+  EuiFlexGroup,
+  EuiFlexItem,
+  RIGHT_ALIGNMENT,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
@@ -19,6 +25,7 @@ import { EmptyMessage } from '../../shared/EmptyMessage';
 import { ImpactBar } from '../../shared/ImpactBar';
 import { TransactionDetailLink } from '../../shared/Links/apm/transaction_detail_link';
 import { ITableColumn, ManagedTable } from '../../shared/managed_table';
+import { AgentIcon } from '../../shared/agent_icon';
 
 type TraceGroup = APIReturnType<'GET /internal/apm/traces'>['items'][0];
 
@@ -65,6 +72,14 @@ const traceListColumns: Array<ITableColumn<TraceGroup>> = [
       }
     ),
     sortable: true,
+    render: (_: string, { serviceName, agentName }) => (
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <AgentIcon agentName={agentName} />
+        </EuiFlexItem>
+        <EuiFlexItem>{serviceName}</EuiFlexItem>
+      </EuiFlexGroup>
+    ),
   },
   {
     field: 'averageResponseTime',

diff --git a/x-pack/plugins/apm/server/lib/transaction_groups/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/transaction_groups/__snapshots__/queries.test.ts.snap
diff --git a/x-pack/plugins/apm/server/lib/transaction_groups/fetcher.ts b/x-pack/plugins/apm/server/lib/transaction_groups/fetcher.ts
@@ -31,7 +31,7 @@ import {
 } from '../helpers/transactions';
 import { Setup } from '../helpers/setup_request';
 import { getAverages, getCounts, getSums } from './get_transaction_group_stats';
-
+import { AgentName } from '../../../typings/es_schemas/ui/fields/agent';
 export interface TopTraceOptions {
   environment: string;
   kuery: string;
@@ -51,6 +51,7 @@ export interface TransactionGroup {
   averageResponseTime: number | null | undefined;
   transactionsPerMinute: number;
   impact: number;
+  agentName: AgentName;
 }
 
 export type ESResponse = Promise<{ items: TransactionGroup[] }>;
@@ -142,6 +143,7 @@ function getItemsWithRelativeImpact(
     avg?: number | null;
     count?: number | null;
     transactionType?: string;
+    agentName?: AgentName;
   }>,
   start: number,
   end: number
@@ -166,6 +168,7 @@ function getItemsWithRelativeImpact(
         item.sum !== null && item.sum !== undefined
           ? ((item.sum - min) / (max - min)) * 100 || 0
           : 0,
+      agentName: item.agentName as AgentName,
     };
   });
 

diff --git a/x-pack/plugins/apm/server/lib/transaction_groups/get_transaction_group_stats.ts b/x-pack/plugins/apm/server/lib/transaction_groups/get_transaction_group_stats.ts
@@ -7,11 +7,14 @@
 
 import { merge } from 'lodash';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
-import { TRANSACTION_TYPE } from '../../../common/elasticsearch_fieldnames';
+import {
+  TRANSACTION_TYPE,
+  AGENT_NAME,
+} from '../../../common/elasticsearch_fieldnames';
 import { arrayUnionToCallable } from '../../../common/utils/array_union_to_callable';
 import { TransactionGroupRequestBase, TransactionGroupSetup } from './fetcher';
 import { getTransactionDurationFieldForTransactions } from '../helpers/transactions';
-
+import { AgentName } from '../../../typings/es_schemas/ui/fields/agent';
 interface MetricParams {
   request: TransactionGroupRequestBase;
   setup: TransactionGroupSetup;
@@ -79,6 +82,9 @@ export async function getCounts({ request, setup }: MetricParams) {
           {
             field: TRANSACTION_TYPE,
           } as const,
+          {
+            field: AGENT_NAME,
+          } as const,
         ],
       },
     },
@@ -98,6 +104,9 @@ export async function getCounts({ request, setup }: MetricParams) {
       transactionType: bucket.transaction_type.top[0].metrics[
         TRANSACTION_TYPE
       ] as string,
+      agentName: bucket.transaction_type.top[0].metrics[
+        AGENT_NAME
+      ] as AgentName,
     };
   });
 }