[APM] Updated header icons

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

@@ -4,10 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export const CLOUD = 'cloud';
 export const CLOUD_AVAILABILITY_ZONE = 'cloud.availability_zone';
 export const CLOUD_PROVIDER = 'cloud.provider';
 export const CLOUD_REGION = 'cloud.region';
+export const CLOUD_MACHINE_TYPE = 'cloud.machine.type';
 
+export const SERVICE = 'service';
 export const SERVICE_NAME = 'service.name';
 export const SERVICE_ENVIRONMENT = 'service.environment';
 export const SERVICE_FRAMEWORK_NAME = 'service.framework.name';
@@ -19,6 +22,7 @@ export const SERVICE_RUNTIME_VERSION = 'service.runtime.version';
 export const SERVICE_NODE_NAME = 'service.node.name';
 export const SERVICE_VERSION = 'service.version';
 
+export const AGENT = 'agent';
 export const AGENT_NAME = 'agent.name';
 export const AGENT_VERSION = 'agent.version';
 
@@ -102,8 +106,11 @@ export const METRIC_JAVA_GC_TIME = 'jvm.gc.time';
 
 export const LABEL_NAME = 'labels.name';
 
+export const HOST = 'host';
 export const HOST_NAME = 'host.hostname';
+export const CONTAINER = 'container.id';
 export const CONTAINER_ID = 'container.id';
+export const KUBERNETES = 'kubernetes';
 export const POD_NAME = 'kubernetes.pod.name';
 
 export const CLIENT_GEO_COUNTRY_ISO_CODE = 'client.geo.country_iso_code';

x-pack/plugins/apm/public/components/app/service_details/index.tsx

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { ApmHeader } from '../../shared/ApmHeader';
+import { ServiceNameHeader } from '../../shared/ApmHeader/service_name_header';
 import { ServiceDetailTabs } from './service_detail_tabs';
 
 interface Props extends RouteComponentProps<{ serviceName: string }> {
@@ -20,9 +20,7 @@ export function ServiceDetails({ match, tab }: Props) {
   return (
     <div>
       <ApmHeader>
-        <EuiTitle>
-          <h1>{serviceName}</h1>
-        </EuiTitle>
+        <ServiceNameHeader serviceName={serviceName} />
       </ApmHeader>
       <ServiceDetailTabs serviceName={serviceName} tab={tab} />
     </div>

x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx

@@ -20,11 +20,11 @@ import {
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { fontSizes, px, truncate, unit } from '../../../../style/variables';
 import { ManagedTable, ITableColumn } from '../../../shared/ManagedTable';
-import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
 import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
 import { AgentIcon } from '../../../shared/AgentIcon';
 import { HealthBadge } from './HealthBadge';
 import { ServiceListMetric } from './ServiceListMetric';
+import { GroupBadges } from '../../../shared/group_badges';
 
 type ServiceListAPIResponse = APIReturnType<'GET /api/apm/services'>;
 type Items = ServiceListAPIResponse['items'];
@@ -109,8 +109,18 @@ export const SERVICE_COLUMNS: Array<ITableColumn<ServiceListItem>> = [
     }),
     width: px(unit * 10),
     sortable: true,
-    render: (_, { environments }) => (
-      <EnvironmentBadge environments={environments ?? []} />
+    render: (_, { environments = [] }) => (
+      <GroupBadges
+        values={environments}
+        tooltipLabel={i18n.translate(
+          'xpack.apm.servicesTable.environmentCount',
+          {
+            values: { valuesCount: environments.length },
+            defaultMessage:
+              '{valuesCount, plural, one {1 environment} other {# environments}}',
+          }
+        )}
+      />
     ),
   },
   {