Add stats to the overview page (#119341) (#119615)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kerry Gallagher <kerry.gallagher@elastic.co>

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

@@ -30,8 +30,13 @@ interface TitleType {
   title?: string;
   heading?: unknown;
 }
+
+interface Stats {
+  versions: string[];
+  [key: string]: unknown;
+}
 interface Props {
-  stats: { versions: string[]; [key: string]: unknown };
+  stats: Stats;
   metrics: { [key: string]: unknown };
   seriesToShow: unknown[];
   title: string;
@@ -41,6 +46,7 @@ interface Props {
       container: boolean;
     };
   };
+  StatusComponent: React.FC<{ stats: Stats }>;
 }
 
 const createCharts = (series: unknown[], props: Partial<Props>) => {
@@ -76,7 +82,15 @@ const getHeading = (isFleetTypeMetric: boolean) => {
   return titles;
 };
 
-export const ApmMetrics = ({ stats, metrics, seriesToShow, title, summary, ...props }: Props) => {
+export const ApmMetrics = ({
+  stats,
+  metrics,
+  seriesToShow,
+  title,
+  summary,
+  StatusComponent,
+  ...props
+}: Props) => {
   if (!metrics) {
     return null;
   }
@@ -96,7 +110,7 @@ export const ApmMetrics = ({ stats, metrics, seriesToShow, title, summary, ...pr
           <h1>{titles.heading as FormattedMessage}</h1>
         </EuiScreenReaderOnly>
         <EuiPanel>
-          <Status stats={stats} />
+          <StatusComponent stats={stats} />
         </EuiPanel>
         <EuiSpacer size="m" />
         <EuiPanel>

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

@@ -8,6 +8,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { ApmMetrics } from '../apm_metrics';
+import { Status } from './status';
 
 const title = i18n.translate('xpack.monitoring.apm.instance.panels.title', {
   defaultMessage: 'APM Server - Metrics',
@@ -29,5 +30,5 @@ export function ApmServerInstance(props) {
 
   const stats = props.summary;
   const metricProps = { ...props, title, seriesToShow, stats };
-  return <ApmMetrics {...metricProps} />;
+  return <ApmMetrics {...metricProps} StatusComponent={Status} />;
 }

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

@@ -8,6 +8,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { ApmMetrics } from '../apm_metrics';
+import { Status } from './status';
 
 const title = i18n.translate('xpack.monitoring.apm.overview.panels.title', {
   defaultMessage: 'APM Server - Metrics',
@@ -23,7 +24,6 @@ export function ApmOverview(props) {
     metrics.apm_requests,
     metrics.apm_transformations,
   ];
-
   const metricProps = { ...props, title, seriesToShow };
-  return <ApmMetrics {...metricProps} />;
+  return <ApmMetrics {...metricProps} StatusComponent={Status} />;
 }

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

@@ -0,0 +1,13 @@
+/*
+ * 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 { Status as InstancesStatus } from '../instances/status';
+
+export function Status({ stats }) {
+  return <InstancesStatus stats={stats} />;
+}