[Monitoring] Added cgroup option for APM cpu usage

x-pack/plugins/monitoring/public/components/apm/apm_metrics.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 React from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiPage,
+  EuiPageBody,
+  EuiFlexGroup,
+  EuiPageContent,
+  EuiScreenReaderOnly,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { MonitoringTimeseriesContainer } from '../chart';
+import { Status } from './instance/status';
+
+const createCharts = (series: unknown[], props: any) => {
+  return series.map((data, index) => {
+    return (
+      <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
+        <MonitoringTimeseriesContainer {...props} series={data} />
+      </EuiFlexItem>
+    );
+  });
+};
+
+export const ApmMetrics = ({ stats, metrics, seriesToShow, title, ...props }) => {
+  const topSeries = [metrics.apm_cpu, metrics.apm_memory, metrics.apm_os_load];
+  const inAgent = stats.config?.container && stats.config?.agentMode;
+
+  const topChartsTitle = inAgent
+    ? i18n.translate('xpack.monitoring.apm.metrics.topCharts.agentTitle', {
+        defaultMessage: 'Elastic Agent Group - Resource Usage',
+      })
+    : i18n.translate('xpack.monitoring.apm.metrics.topCharts.nonAgentTitle', {
+        defaultMessage: 'APM Server - Resource Usage',
+      });
+
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.apm.metrics.heading"
+              defaultMessage="APM server"
+            />
+          </h1>
+        </EuiScreenReaderOnly>
+        <EuiPanel>
+          <Status stats={stats} />
+        </EuiPanel>
+        <EuiSpacer size="m" />
+        <EuiPanel>
+          <EuiTitle>
+            <h3>{topChartsTitle}</h3>
+          </EuiTitle>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup wrap>{createCharts(topSeries, props)}</EuiFlexGroup>
+        </EuiPanel>
+        <EuiSpacer size="m" />
+        <EuiPageContent>
+          <EuiTitle>
+            <h3>{title}</h3>
+          </EuiTitle>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup wrap>{createCharts(seriesToShow, props)}</EuiFlexGroup>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};

x-pack/plugins/monitoring/public/components/apm/instance/instance.js

@@ -6,66 +6,28 @@
  */
 
 import React from 'react';
-import { MonitoringTimeseriesContainer } from '../../chart';
-import {
-  EuiFlexItem,
-  EuiPanel,
-  EuiSpacer,
-  EuiPage,
-  EuiPageBody,
-  EuiFlexGroup,
-  EuiPageContent,
-  EuiScreenReaderOnly,
-} from '@elastic/eui';
-import { Status } from './status';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { ApmMetrics } from '../apm_metrics';
 
-export function ApmServerInstance({ summary, metrics, ...props }) {
+const title = i18n.translate('xpack.monitoring.apm.instance.panels.title', {
+  defaultMessage: 'APM Server - Custom Metrics',
+});
+
+export function ApmServerInstance(props) {
+  const { metrics } = props;
   const seriesToShow = [
     metrics.apm_requests,
     metrics.apm_responses_valid,
-
     metrics.apm_responses_errors,
     metrics.apm_acm_request_count,
-
     metrics.apm_acm_response,
     metrics.apm_acm_response_errors,
-
     metrics.apm_output_events_rate_success,
     metrics.apm_output_events_rate_failure,
-
     metrics.apm_transformations,
-    metrics.apm_cpu,
-
-    metrics.apm_memory,
-    metrics.apm_os_load,
   ];
 
-  const charts = seriesToShow.map((data, index) => (
-    <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
-      <MonitoringTimeseriesContainer series={data} {...props} />
-    </EuiFlexItem>
-  ));
-
-  return (
-    <EuiPage>
-      <EuiPageBody>
-        <EuiScreenReaderOnly>
-          <h1>
-            <FormattedMessage
-              id="xpack.monitoring.apm.instance.heading"
-              defaultMessage="APM server instance"
-            />
-          </h1>
-        </EuiScreenReaderOnly>
-        <EuiPanel>
-          <Status stats={summary} />
-        </EuiPanel>
-        <EuiSpacer size="m" />
-        <EuiPageContent>
-          <EuiFlexGroup wrap>{charts}</EuiFlexGroup>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
-  );
+  const stats = props.summary;
+  const metricProps = { ...props, title, seriesToShow, stats };
+  return <ApmMetrics {...metricProps} />;
 }

x-pack/plugins/monitoring/public/components/apm/instance/status.js

@@ -15,7 +15,7 @@ import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-export function Status({ alerts, stats }) {
+export function Status({ alerts = null, stats }) {
   const { name, output, version, uptime, timeOfLastEvent } = stats;
 
   const metrics = [

x-pack/plugins/monitoring/public/components/apm/overview/index.js

@@ -6,62 +6,24 @@
  */
 
 import React from 'react';
-import { MonitoringTimeseriesContainer } from '../../chart';
-import {
-  EuiSpacer,
-  EuiPage,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageBody,
-  EuiPanel,
-  EuiPageContent,
-  EuiScreenReaderOnly,
-} from '@elastic/eui';
-import { Status } from '../instances/status';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { ApmMetrics } from '../apm_metrics';
 
-export function ApmOverview({ stats, metrics, alerts, ...props }) {
+const title = i18n.translate('xpack.monitoring.apm.overview.panels.title', {
+  defaultMessage: 'APM Server - Custom Metrics',
+});
+
+export function ApmOverview(props) {
+  const { metrics } = props;
   const seriesToShow = [
     metrics.apm_responses_valid,
     metrics.apm_responses_errors,
-
     metrics.apm_output_events_rate_success,
     metrics.apm_output_events_rate_failure,
-
     metrics.apm_requests,
     metrics.apm_transformations,
-
-    metrics.apm_cpu,
-    metrics.apm_memory,
-
-    metrics.apm_os_load,
   ];
 
-  const charts = seriesToShow.map((data, index) => (
-    <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
-      <MonitoringTimeseriesContainer series={data} {...props} />
-    </EuiFlexItem>
-  ));
-
-  return (
-    <EuiPage>
-      <EuiPageBody>
-        <EuiScreenReaderOnly>
-          <h1>
-            <FormattedMessage
-              id="xpack.monitoring.apm.overview.heading"
-              defaultMessage="APM server overview"
-            />
-          </h1>
-        </EuiScreenReaderOnly>
-        <EuiPanel>
-          <Status stats={stats} alerts={alerts} />
-        </EuiPanel>
-        <EuiSpacer size="m" />
-        <EuiPageContent>
-          <EuiFlexGroup wrap>{charts}</EuiFlexGroup>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
-  );
+  const metricProps = { ...props, title, seriesToShow };
+  return <ApmMetrics {...metricProps} />;
 }

x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js

@@ -31,8 +31,30 @@ import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link'
 import { isSetupModeFeatureEnabled } from '../../../lib/setup_mode';
 import { SetupModeFeature } from '../../../../common/enums';
 
+const linkLabel = (config, total) => {
+  const apmsTotal = <span data-test-subj="apmsTotal">{total}</span>;
+
+  if (config && config.container && config.agentMode) {
+    return (
+      <FormattedMessage
+        id="xpack.monitoring.cluster.overview.apmPanel.agentServersTotalLinkLabel"
+        defaultMessage="Elastic Agent group servers: {apmsTotal}"
+        values={{ apmsTotal }}
+      />
+    );
+  }
+
+  return (
+    <FormattedMessage
+      id="xpack.monitoring.cluster.overview.apmPanel.serversTotalLinkLabel"
+      defaultMessage="APM servers: {apmsTotal}"
+      values={{ apmsTotal }}
+    />
+  );
+};
+
 export function ApmPanel(props) {
-  const { setupMode } = props;
+  const { setupMode, config } = props;
   const apmsTotal = get(props, 'apms.total') || 0;
   // Do not show if we are not in setup mode
   if (apmsTotal === 0 && !setupMode.enabled) {
@@ -132,11 +154,7 @@ export function ApmPanel(props) {
                       )}
                       data-test-subj="apmListing"
                     >
-                      <FormattedMessage
-                        id="xpack.monitoring.cluster.overview.apmPanel.serversTotalLinkLabel"
-                        defaultMessage="APM servers: {apmsTotal}"
-                        values={{ apmsTotal: <span data-test-subj="apmsTotal">{apmsTotal}</span> }}
-                      />
+                      {linkLabel(config, apmsTotal)}
                     </EuiLink>
                   </h3>
                 </EuiTitle>

x-pack/plugins/monitoring/server/config.test.ts

@@ -52,10 +52,16 @@ describe('config schema', () => {
           },
         },
         "ui": Object {
+          "apm": Object {
+            "agent_mode": false,
+          },
           "ccs": Object {
             "enabled": true,
           },
           "container": Object {
+            "apm": Object {
+              "enabled": false,
+            },
             "elasticsearch": Object {
               "enabled": false,
             },

x-pack/plugins/monitoring/server/config.ts

@@ -36,10 +36,16 @@ export const configSchema = schema.object({
     }),
     max_bucket_size: schema.number({ defaultValue: 10000 }),
     elasticsearch: monitoringElasticsearchConfigSchema,
+    apm: schema.object({
+      agent_mode: schema.boolean({ defaultValue: false }),
+    }),
     container: schema.object({
       elasticsearch: schema.object({
         enabled: schema.boolean({ defaultValue: false }),
       }),
+      apm: schema.object({
+        enabled: schema.boolean({ defaultValue: false }),
+      }),
       logstash: schema.object({
         enabled: schema.boolean({ defaultValue: false }),
       }),

x-pack/plugins/monitoring/server/lib/apm/get_apm_info.ts

@@ -18,7 +18,11 @@ import { getTimeOfLastEvent } from './_get_time_of_last_event';
 import { LegacyRequest } from '../../types';
 import { ElasticsearchResponse } from '../../../common/types/es';
 
-export function handleResponse(response: ElasticsearchResponse, apmUuid: string) {
+export function handleResponse(
+  response: ElasticsearchResponse,
+  apmUuid: string,
+  config: { get: (key: string) => string | undefined }
+) {
   if (!response.hits || response.hits.hits.length === 0) {
     return {};
   }
@@ -59,6 +63,10 @@ export function handleResponse(response: ElasticsearchResponse, apmUuid: string)
     eventsEmitted: getDiffCalculation(eventsEmittedLast, eventsEmittedFirst),
     eventsDropped: getDiffCalculation(eventsDroppedLast, eventsDroppedFirst),
     bytesWritten: getDiffCalculation(bytesWrittenLast, bytesWrittenFirst),
+    config: {
+      container: config.get('monitoring.ui.container.apm.enabled'),
+      agentMode: config.get('monitoring.ui.apm.agent_mode'),
+    },
   };
 }
 
@@ -138,7 +146,7 @@ export async function getApmInfo(
     }),
   ]);
 
-  const formattedResponse = handleResponse(response, apmUuid);
+  const formattedResponse = handleResponse(response, apmUuid, req.server.config());
   return {
     ...formattedResponse,
     timeOfLastEvent,

x-pack/plugins/monitoring/server/lib/apm/get_apms_for_clusters.js

@@ -73,6 +73,10 @@ export function getApmsForClusters(req, apmIndexPattern, clusters) {
       const formattedResponse = handleResponse(clusterUuid, response);
       return {
         ...formattedResponse,
+        config: {
+          container: config.get('monitoring.ui.container.apm.enabled'),
+          agentMode: config.get('monitoring.ui.apm.agent_mode'),
+        },
         stats: {
           ...formattedResponse.stats,
           timeOfLastEvent,

x-pack/plugins/monitoring/server/lib/cluster/get_clusters_from_request.js

@@ -243,7 +243,11 @@ export async function getClustersFromRequest(
     : [];
   apmsByCluster.forEach((apm) => {
     const clusterIndex = findIndex(clusters, { cluster_uuid: apm.clusterUuid });
-    set(clusters[clusterIndex], 'apm', apm.stats);
+    const { stats, config } = apm;
+    clusters[clusterIndex].apm = {
+      ...stats,
+      config,
+    };
   });
 
   // check ccr configuration