[7.x] [Monitoring] Added cgroup option for APM cpu usage (#90873)

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

@@ -0,0 +1,85 @@
+/*
+ * 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';
+
+// @ts-ignore could not find declaration file
+import { MonitoringTimeseriesContainer } from '../chart';
+// @ts-ignore could not find declaration file
+import { Status } from './instance/status';
+
+interface Props {
+  stats: unknown;
+  metrics: { [key: string]: unknown };
+  seriesToShow: unknown[];
+  title: string;
+}
+
+const createCharts = (series: unknown[], props: Partial<Props>) => {
+  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 }: Props) => {
+  const topSeries = [metrics.apm_cpu, metrics.apm_memory, metrics.apm_os_load];
+
+  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>
+              {i18n.translate('xpack.monitoring.apm.metrics.topCharts.nonAgentTitle', {
+                defaultMessage: 'APM Server - Resource Usage',
+              })}
+            </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 { FormattedMessage } from '@kbn/i18n/react';
-import { MonitoringTimeseriesContainer } from '../../chart';
-import {
-  EuiFlexItem,
-  EuiPanel,
-  EuiSpacer,
-  EuiPage,
-  EuiPageBody,
-  EuiFlexGroup,
-  EuiPageContent,
-  EuiScreenReaderOnly,
-} from '@elastic/eui';
-import { Status } from './status';
+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 - 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 { FormattedMessage } from '@kbn/i18n/react';
-import { MonitoringTimeseriesContainer } from '../../chart';
-import {
-  EuiSpacer,
-  EuiPage,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageBody,
-  EuiPanel,
-  EuiPageContent,
-  EuiScreenReaderOnly,
-} from '@elastic/eui';
-import { Status } from '../instances/status';
+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 - 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

@@ -135,7 +135,7 @@ export function ApmPanel(props) {
                       <FormattedMessage
                         id="xpack.monitoring.cluster.overview.apmPanel.serversTotalLinkLabel"
                         defaultMessage="APM servers: {apmsTotal}"
-                        values={{ apmsTotal: <span data-test-subj="apmsTotal">{apmsTotal}</span> }}
+                        values={{ apmsTotal }}
                       />
                     </EuiLink>
                   </h3>

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

@@ -56,6 +56,9 @@ describe('config schema', () => {
             "enabled": true,
           },
           "container": Object {
+            "apm": Object {
+              "enabled": false,
+            },
             "elasticsearch": Object {
               "enabled": false,
             },

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

@@ -40,6 +40,9 @@ export const configSchema = 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,9 @@ 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'),
+    },
   };
 }
 
@@ -138,7 +145,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,9 @@ export function getApmsForClusters(req, apmIndexPattern, clusters) {
       const formattedResponse = handleResponse(clusterUuid, response);
       return {
         ...formattedResponse,
+        config: {
+          container: config.get('monitoring.ui.container.apm.enabled'),
+        },
         stats: {
           ...formattedResponse.stats,
           timeOfLastEvent,

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

@@ -258,7 +258,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