[7.x] [APM] JVM List view & JVM metrics page (#46779) (#47241)

* [APM] JVM List view & JVM metrics page

Closes #43765.

* Add service node metadata

* Use service node terminology

* Use asPercent for CPU

* Tooltip for truncated elements

* Add processor.event filters

* Use service.node.name

* Sort client-side only

* Add processor.event filter to service nodes projection

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

@@ -29,11 +29,11 @@ export function isAgentName(agentName: string): boolean {
 }
 
 export function isRumAgentName(agentName: string | undefined) {
-  if (!agentName) {
-    return false;
-  }
-
-  return ([agentNames['js-base'], agentNames['rum-js']] as string[]).includes(
-    agentName
+  return (
+    agentName === agentNames['js-base'] || agentName === agentNames['rum-js']
   );
 }
+
+export function isJavaAgentName(agentName: string | undefined) {
+  return agentName === agentNames.java;
+}

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

@@ -6,6 +6,7 @@
 export const SERVICE_NAME = 'service.name';
 export const SERVICE_ENVIRONMENT = 'service.environment';
 export const SERVICE_AGENT_NAME = 'agent.name';
+export const SERVICE_NODE_NAME = 'service.node.name';
 export const URL_FULL = 'url.full';
 export const HTTP_REQUEST_METHOD = 'http.request.method';
 export const USER_ID = 'user.id';

x-pack/legacy/plugins/apm/common/projections/metrics.ts

@@ -10,20 +10,27 @@ import { rangeFilter } from '../../server/lib/helpers/range_filter';
 
 export function getMetricsProjection({
   setup,
-  serviceName
+  serviceName,
+  serviceNodeName
 }: {
   setup: Setup;
   serviceName: string;
+  serviceNodeName?: string;
 }) {
   const { start, end, uiFiltersES, config } = setup;
 
+  const serviceNodeNameFilters = serviceNodeName
+    ? [{ term: { [SERVICE_NAME]: serviceName } }]
+    : [];
+
   return {
     index: config.get<string>('apm_oss.metricsIndices'),
     body: {
       query: {
         bool: {
           filter: [
             { term: { [SERVICE_NAME]: serviceName } },
+            ...serviceNodeNameFilters,
             { term: { [PROCESSOR_EVENT]: 'metric' } },
             {
               range: rangeFilter(start, end)

x-pack/legacy/plugins/apm/common/projections/service_nodes.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Setup } from '../../server/lib/helpers/setup_request';
+import {
+  SERVICE_NAME,
+  SERVICE_NODE_NAME,
+  PROCESSOR_EVENT
+} from '../elasticsearch_fieldnames';
+import { rangeFilter } from '../../server/lib/helpers/range_filter';
+
+export function getServiceNodesProjection({
+  setup,
+  serviceName
+}: {
+  setup: Setup;
+  serviceName: string;
+}) {
+  const { start, end, uiFiltersES, config } = setup;
+
+  return {
+    index: config.get<string>('apm_oss.metricsIndices'),
+    body: {
+      query: {
+        bool: {
+          filter: [
+            { term: { [SERVICE_NAME]: serviceName } },
+            { term: { [PROCESSOR_EVENT]: 'metric' } },
+            { range: rangeFilter(start, end) },
+            ...uiFiltersES
+          ]
+        }
+      },
+      aggs: {
+        nodes: {
+          terms: {
+            field: SERVICE_NODE_NAME
+          }
+        }
+      }
+    }
+  };
+}

x-pack/legacy/plugins/apm/common/projections/typings.ts

@@ -24,5 +24,6 @@ export enum PROJECTION {
   TRACES = 'traces',
   TRANSACTIONS = 'transactions',
   METRICS = 'metrics',
-  ERROR_GROUPS = 'errorGroups'
+  ERROR_GROUPS = 'errorGroups',
+  SERVICE_NODES = 'serviceNodes'
 }

x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx

@@ -15,6 +15,12 @@ import { BreadcrumbRoute } from '../ProvideBreadcrumbs';
 import { RouteName } from './route_names';
 import { Settings } from '../../Settings';
 import { toQuery } from '../../../shared/Links/url_helpers';
+import { ServiceNodeMetrics } from '../../ServiceNodeMetrics';
+import { resolveUrlParams } from '../../../../context/UrlParamsContext/resolveUrlParams';
+
+const metricsBreadcrumb = i18n.translate('xpack.apm.breadcrumb.metricsTitle', {
+  defaultMessage: 'Metrics'
+});
 
 interface RouteParams {
   serviceName: string;
@@ -76,7 +82,6 @@ export const routes: BreadcrumbRoute[] = [
       )(props),
     name: RouteName.SERVICE
   },
-
   // errors
   {
     exact: true,
@@ -94,7 +99,6 @@ export const routes: BreadcrumbRoute[] = [
     }),
     name: RouteName.ERRORS
   },
-
   // transactions
   {
     exact: true,
@@ -110,11 +114,30 @@ export const routes: BreadcrumbRoute[] = [
     exact: true,
     path: '/services/:serviceName/metrics',
     component: () => <ServiceDetails tab="metrics" />,
-    breadcrumb: i18n.translate('xpack.apm.breadcrumb.metricsTitle', {
-      defaultMessage: 'Metrics'
-    }),
+    breadcrumb: metricsBreadcrumb,
     name: RouteName.METRICS
   },
+  // service nodes, only enabled for java agents for now
+  {
+    exact: true,
+    path: '/services/:serviceName/nodes',
+    component: () => <ServiceDetails tab="nodes" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.nodesTitle', {
+      defaultMessage: 'JVMs'
+    }),
+    name: RouteName.SERVICE_NODES
+  },
+  // node metrics
+  {
+    exact: true,
+    path: '/services/:serviceName/nodes/:serviceNodeName/metrics',
+    component: () => <ServiceNodeMetrics />,
+    breadcrumb: ({ location }) => {
+      const { serviceNodeName } = resolveUrlParams(location, {});
+      return serviceNodeName || '';
+    },
+    name: RouteName.SERVICE_NODE_METRICS
+  },
   {
     exact: true,
     path: '/services/:serviceName/transactions/view',

x-pack/legacy/plugins/apm/public/components/app/Main/route_config/route_names.tsx

@@ -13,7 +13,9 @@ export enum RouteName {
   ERRORS = 'errors',
   ERROR = 'error',
   METRICS = 'metrics',
+  SERVICE_NODE_METRICS = 'node_metrics',
   TRANSACTION_TYPE = 'transaction_type',
   TRANSACTION_NAME = 'transaction_name',
-  SETTINGS = 'settings'
+  SETTINGS = 'settings',
+  SERVICE_NODES = 'nodes'
 }

x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx

@@ -10,33 +10,24 @@ import { EuiTabs, EuiSpacer } from '@elastic/eui';
 import { ErrorGroupOverview } from '../ErrorGroupOverview';
 import { TransactionOverview } from '../TransactionOverview';
 import { ServiceMetrics } from '../ServiceMetrics';
-import { useFetcher } from '../../../hooks/useFetcher';
-import { isRumAgentName } from '../../../../common/agent_name';
-import { callApmApi } from '../../../services/rest/callApmApi';
+import { isRumAgentName, isJavaAgentName } from '../../../../common/agent_name';
 import { EuiTabLink } from '../../shared/EuiTabLink';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
 import { ErrorOverviewLink } from '../../shared/Links/apm/ErrorOverviewLink';
 import { MetricOverviewLink } from '../../shared/Links/apm/MetricOverviewLink';
+import { ServiceNodeOverviewLink } from '../../shared/Links/apm/ServiceNodeOverviewLink';
+import { ServiceNodeOverview } from '../ServiceNodeOverview';
+import { useAgentName } from '../../../hooks/useAgentName';
 
 interface Props {
-  tab: 'transactions' | 'errors' | 'metrics';
+  tab: 'transactions' | 'errors' | 'metrics' | 'nodes';
 }
 
 export function ServiceDetailTabs({ tab }: Props) {
   const { urlParams } = useUrlParams();
-  const { serviceName, start, end } = urlParams;
-  const { data: agentName } = useFetcher(() => {
-    if (serviceName && start && end) {
-      return callApmApi({
-        pathname: '/api/apm/services/{serviceName}/agent_name',
-        params: {
-          path: { serviceName },
-          query: { start, end }
-        }
-      }).then(res => res.agentName);
-    }
-  }, [serviceName, start, end]);
+  const { serviceName } = urlParams;
+  const { agentName } = useAgentName();
 
   if (!serviceName) {
     // this never happens, urlParams type is not accurate enough
@@ -70,7 +61,21 @@ export function ServiceDetailTabs({ tab }: Props) {
   };
 
   const tabs = [transactionsTab, errorsTab];
-  if (agentName && !isRumAgentName(agentName)) {
+
+  if (isJavaAgentName(agentName)) {
+    const nodesListTab = {
+      link: (
+        <ServiceNodeOverviewLink serviceName={serviceName}>
+          {i18n.translate('xpack.apm.serviceDetails.nodesTabLabel', {
+            defaultMessage: 'JVMs'
+          })}
+        </ServiceNodeOverviewLink>
+      ),
+      render: () => <ServiceNodeOverview />,
+      name: 'nodes'
+    };
+    tabs.push(nodesListTab);
+  } else if (agentName && !isRumAgentName(agentName)) {
     const metricsTab = {
       link: (
         <MetricOverviewLink serviceName={serviceName}>
@@ -82,7 +87,6 @@ export function ServiceDetailTabs({ tab }: Props) {
       render: () => <ServiceMetrics agentName={agentName} />,
       name: 'metrics'
     };
-
     tabs.push(metricsTab);
   }
 

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

@@ -13,7 +13,7 @@ import {
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
-import { MetricsChart } from './MetricsChart';
+import { MetricsChart } from '../../shared/charts/MetricsChart';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
 import { PROJECTION } from '../../../../common/projections/typings';
@@ -25,7 +25,7 @@ interface ServiceMetricsProps {
 
 export function ServiceMetrics({ agentName }: ServiceMetricsProps) {
   const { urlParams } = useUrlParams();
-  const { serviceName } = urlParams;
+  const { serviceName, serviceNodeName } = urlParams;
   const { data } = useServiceMetricCharts(urlParams, agentName);
   const { start, end } = urlParams;
 
@@ -35,12 +35,13 @@ export function ServiceMetrics({ agentName }: ServiceMetricsProps) {
     () => ({
       filterNames: ['host', 'containerId', 'podName'],
       params: {
-        serviceName
+        serviceName,
+        serviceNodeName
       },
       projection: PROJECTION.METRICS,
       showCount: false
     }),
-    [serviceName]
+    [serviceName, serviceNodeName]
   );
 
   return (