Added OTel information to service metadata icons (#154458)

## Summary

Added OpenTelemetry information to metadata icons on OTel services:

<img width="709" alt="image"
src="https://user-images.githubusercontent.com/866830/230113359-307c25dd-9846-4079-bb26-7d145472181a.png">

x-pack/plugins/apm/common/agent_name.ts

@@ -5,7 +5,10 @@
  * 2.0.
  */
 
-import { AgentName } from '../typings/es_schemas/ui/fields/agent';
+import {
+  AgentName,
+  OpenTelemetryAgentName,
+} from '../typings/es_schemas/ui/fields/agent';
 import { ServerlessType } from './serverless';
 
 /*
@@ -47,8 +50,11 @@ export const AGENT_NAMES: AgentName[] = [
   ...OPEN_TELEMETRY_AGENT_NAMES,
 ];
 
-export const isOpenTelemetryAgentName = (agentName: AgentName) =>
-  OPEN_TELEMETRY_AGENT_NAMES.includes(agentName);
+export function isOpenTelemetryAgentName(
+  agentName: string
+): agentName is OpenTelemetryAgentName {
+  return OPEN_TELEMETRY_AGENT_NAMES.includes(agentName as AgentName);
+}
 
 export const JAVA_AGENT_NAMES: AgentName[] = ['java', 'opentelemetry/java'];
 

x-pack/plugins/apm/public/components/shared/agent_icon/get_agent_icon.ts

@@ -25,7 +25,7 @@ import darkIosIcon from './icons/ios_dark.svg';
 import javaIcon from './icons/java.svg';
 import nodeJsIcon from './icons/nodejs.svg';
 import ocamlIcon from './icons/ocaml.svg';
-import openTelemetryIcon from './icons/opentelemetry.svg';
+import openTelemetryIcon from './icons/otel_default.svg';
 import phpIcon from './icons/php.svg';
 import pythonIcon from './icons/python.svg';
 import rubyIcon from './icons/ruby.svg';

x-pack/plugins/apm/public/components/shared/service_icons/index.tsx

@@ -16,9 +16,12 @@ import { getServerlessIcon } from '../agent_icon/get_serverless_icon';
 import { CloudDetails } from './cloud_details';
 import { ServerlessDetails } from './serverless_details';
 import { ContainerDetails } from './container_details';
+import { OTelDetails } from './otel_details';
 import { IconPopover } from './icon_popover';
 import { ServiceDetails } from './service_details';
 import { ServerlessType } from '../../../../common/serverless';
+import { isOpenTelemetryAgentName } from '../../../../common/agent_name';
+import openTelemetryIcon from '../agent_icon/icons/opentelemetry.svg';
 
 interface Props {
   serviceName: string;
@@ -70,7 +73,13 @@ export function getContainerIcon(container?: ContainerType) {
   }
 }
 
-type Icons = 'service' | 'container' | 'serverless' | 'cloud' | 'alerts';
+type Icons =
+  | 'service'
+  | 'opentelemetry'
+  | 'container'
+  | 'serverless'
+  | 'cloud'
+  | 'alerts';
 
 export interface PopoverItem {
   key: Icons;
@@ -142,6 +151,23 @@ export function ServiceIcons({ start, end, serviceName }: Props) {
       }),
       component: <ServiceDetails service={details?.service} />,
     },
+    {
+      key: 'opentelemetry',
+      icon: {
+        type: openTelemetryIcon,
+      },
+      isVisible:
+        !!icons?.agentName && isOpenTelemetryAgentName(icons.agentName),
+      title: i18n.translate('xpack.apm.serviceIcons.opentelemetry', {
+        defaultMessage: 'OpenTelemetry',
+      }),
+      component: (
+        <OTelDetails
+          opentelemetry={details?.opentelemetry}
+          agentName={icons?.agentName}
+        />
+      ),
+    },
     {
       key: 'container',
       icon: {

x-pack/plugins/apm/public/components/shared/service_icons/otel_details.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiDescriptionList, EuiDescriptionListProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { APIReturnType } from '../../../services/rest/create_call_apm_api';
+
+type ServiceDetailsReturnType =
+  APIReturnType<'GET /internal/apm/services/{serviceName}/metadata/details'>;
+
+interface Props {
+  opentelemetry: ServiceDetailsReturnType['opentelemetry'];
+  agentName?: string;
+}
+
+export function OTelDetails({ opentelemetry }: Props) {
+  if (!opentelemetry) {
+    return null;
+  }
+
+  const listItems: EuiDescriptionListProps['listItems'] = [];
+  listItems.push({
+    title: i18n.translate(
+      'xpack.apm.serviceIcons.otelDetails.opentelemetry.language',
+      {
+        defaultMessage: 'Language',
+      }
+    ),
+    description: (
+      <>{!!opentelemetry.language ? opentelemetry.language : 'unknown'}</>
+    ),
+  });
+
+  if (!!opentelemetry.sdkVersion) {
+    listItems.push({
+      title: i18n.translate(
+        'xpack.apm.serviceIcons.otelDetails.opentelemetry.sdkVersion',
+        {
+          defaultMessage: 'OTel SDK version',
+        }
+      ),
+      description: <>{opentelemetry.sdkVersion}</>,
+    });
+  }
+
+  if (!!opentelemetry.autoVersion) {
+    listItems.push({
+      title: i18n.translate(
+        'xpack.apm.serviceIcons.otelDetails.opentelemetry.autoVersion',
+        {
+          defaultMessage: 'Auto instrumentation agent version',
+        }
+      ),
+      description: <>{opentelemetry.autoVersion}</>,
+    });
+  }
+
+  return <EuiDescriptionList textStyle="reverse" listItems={listItems} />;
+}

x-pack/plugins/apm/server/routes/services/get_service_metadata_details.ts

@@ -24,17 +24,18 @@ import {
   SERVICE_VERSION,
   FAAS_ID,
   FAAS_TRIGGER_TYPE,
+  LABEL_TELEMETRY_AUTO_VERSION,
 } from '../../../common/es_fields/apm';
 
 import { ContainerType } from '../../../common/service_metadata';
 import { TransactionRaw } from '../../../typings/es_schemas/raw/transaction_raw';
-import { getProcessorEventForTransactions } from '../../lib/helpers/transactions';
 import { APMEventClient } from '../../lib/helpers/create_es_client/create_apm_event_client';
 import { should } from './get_service_metadata_icons';
+import { isOpenTelemetryAgentName } from '../../../common/agent_name';
 
 type ServiceMetadataDetailsRaw = Pick<
   TransactionRaw,
-  'service' | 'agent' | 'host' | 'container' | 'kubernetes' | 'cloud'
+  'service' | 'agent' | 'host' | 'container' | 'kubernetes' | 'cloud' | 'labels'
 >;
 
 export interface ServiceMetadataDetails {
@@ -50,6 +51,11 @@ export interface ServiceMetadataDetails {
       version: string;
     };
   };
+  opentelemetry?: {
+    language?: string;
+    sdkVersion?: string;
+    autoVersion?: string;
+  };
   container?: {
     ids?: string[];
     image?: string;
@@ -81,13 +87,11 @@ export interface ServiceMetadataDetails {
 export async function getServiceMetadataDetails({
   serviceName,
   apmEventClient,
-  searchAggregatedTransactions,
   start,
   end,
 }: {
   serviceName: string;
   apmEventClient: APMEventClient;
-  searchAggregatedTransactions: boolean;
   start: number;
   end: number;
 }): Promise<ServiceMetadataDetails> {
@@ -99,16 +103,27 @@ export async function getServiceMetadataDetails({
   const params = {
     apm: {
       events: [
-        getProcessorEventForTransactions(searchAggregatedTransactions),
+        ProcessorEvent.transaction,
         ProcessorEvent.error,
         ProcessorEvent.metric,
       ],
     },
-    sort: [{ '@timestamp': { order: 'desc' as const } }],
+    sort: [
+      { _score: { order: 'desc' as const } },
+      { '@timestamp': { order: 'desc' as const } },
+    ],
     body: {
       track_total_hits: 1,
       size: 1,
-      _source: [SERVICE, AGENT, HOST, CONTAINER, KUBERNETES, CLOUD],
+      _source: [
+        SERVICE,
+        AGENT,
+        HOST,
+        CONTAINER,
+        KUBERNETES,
+        CLOUD,
+        LABEL_TELEMETRY_AUTO_VERSION,
+      ],
       query: { bool: { filter, should } },
       aggs: {
         serviceVersions: {
@@ -178,8 +193,8 @@ export async function getServiceMetadataDetails({
     };
   }
 
-  const { service, agent, host, kubernetes, container, cloud } = response.hits
-    .hits[0]._source as ServiceMetadataDetailsRaw;
+  const { service, agent, host, kubernetes, container, cloud, labels } =
+    response.hits.hits[0]._source as ServiceMetadataDetailsRaw;
 
   const serviceMetadataDetails = {
     versions: response.aggregations?.serviceVersions.buckets.map(
@@ -190,6 +205,17 @@ export async function getServiceMetadataDetails({
     agent,
   };
 
+  const otelDetails =
+    !!agent?.name && isOpenTelemetryAgentName(agent.name)
+      ? {
+          language: agent.name.startsWith('opentelemetry')
+            ? agent.name.replace(/^opentelemetry\//, '')
+            : undefined,
+          sdkVersion: agent?.version,
+          autoVersion: labels?.telemetry_auto_version as string,
+        }
+      : undefined;
+
   const totalNumberInstances =
     response.aggregations?.totalNumberInstances.value;
 
@@ -238,6 +264,7 @@ export async function getServiceMetadataDetails({
 
   return {
     service: serviceMetadataDetails,
+    opentelemetry: otelDetails,
     container: containerDetails,
     serverless: serverlessDetails,
     cloud: cloudDetails,

x-pack/plugins/apm/server/routes/services/get_service_metadata_icons.ts

@@ -16,6 +16,9 @@ import {
   SERVICE_NAME,
   KUBERNETES_POD_NAME,
   HOST_OS_PLATFORM,
+  LABEL_TELEMETRY_AUTO_VERSION,
+  AGENT_VERSION,
+  SERVICE_FRAMEWORK_NAME,
 } from '../../../common/es_fields/apm';
 import { ContainerType } from '../../../common/service_metadata';
 import { TransactionRaw } from '../../../typings/es_schemas/raw/transaction_raw';
@@ -44,6 +47,9 @@ export const should = [
   { exists: { field: CLOUD_PROVIDER } },
   { exists: { field: HOST_OS_PLATFORM } },
   { exists: { field: AGENT_NAME } },
+  { exists: { field: AGENT_VERSION } },
+  { exists: { field: SERVICE_FRAMEWORK_NAME } },
+  { exists: { field: LABEL_TELEMETRY_AUTO_VERSION } },
 ];
 
 export async function getServiceMetadataIcons({

x-pack/plugins/apm/server/routes/services/route.ts

@@ -240,22 +240,13 @@ const serviceMetadataDetailsRoute = createApmServerRoute({
   handler: async (resources): Promise<ServiceMetadataDetails> => {
     const apmEventClient = await getApmEventClient(resources);
     const infraMetricsClient = createInfraMetricsClient(resources);
-    const { params, config } = resources;
+    const { params } = resources;
     const { serviceName } = params.path;
     const { start, end } = params.query;
 
-    const searchAggregatedTransactions = await getSearchTransactionsEvents({
-      apmEventClient,
-      config,
-      start,
-      end,
-      kuery: '',
-    });
-
     const serviceMetadataDetails = await getServiceMetadataDetails({
       serviceName,
       apmEventClient,
-      searchAggregatedTransactions,
       start,
       end,
     });