Display APM server memory in bytes (#54275)

* Display APM server memory in bytes

* Add tests for helpers

x-pack/legacy/plugins/monitoring/public/components/cluster/overview/__tests__/helpers.test.js

@@ -0,0 +1,42 @@
+/*
+ * 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 React from 'react';
+import { renderWithIntl } from '../../../../../../../../test_utils/enzyme_helpers';
+import { BytesUsage, BytesPercentageUsage } from '../helpers';
+
+describe('Bytes Usage', () => {
+  it('should format correctly with used and max bytes', () => {
+    const props = {
+      usedBytes: 50,
+      maxBytes: 100,
+    };
+    expect(renderWithIntl(<BytesUsage {...props} />)).toMatchSnapshot();
+  });
+
+  it('should format correctly with only usedBytes', () => {
+    const props = {
+      usedBytes: 50,
+    };
+    expect(renderWithIntl(<BytesUsage {...props} />)).toMatchSnapshot();
+  });
+});
+
+describe('BytesPercentageUsage', () => {
+  it('should format correctly with used bytes and max bytes', () => {
+    const props = {
+      usedBytes: 50,
+      maxBytes: 100,
+    };
+    expect(renderWithIntl(<BytesPercentageUsage {...props} />)).toMatchSnapshot();
+  });
+  it('should return zero bytes if both parameters are not present', () => {
+    const props = {
+      usedBytes: 50,
+    };
+    expect(renderWithIntl(<BytesPercentageUsage {...props} />)).toMatchSnapshot();
+  });
+});

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

@@ -8,11 +8,7 @@ import React from 'react';
 import moment from 'moment';
 import { get } from 'lodash';
 import { formatMetric } from 'plugins/monitoring/lib/format_number';
-import {
-  ClusterItemContainer,
-  BytesPercentageUsage,
-  DisabledIfNoDataAndInSetupModeLink,
-} from './helpers';
+import { ClusterItemContainer, BytesUsage, DisabledIfNoDataAndInSetupModeLink } from './helpers';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import {
@@ -153,7 +149,7 @@ export function ApmPanel(props) {
                 />
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription data-test-subj="apmMemoryUsage">
-                <BytesPercentageUsage usedBytes={props.memRss} maxBytes={props.memTotal} />
+                <BytesUsage usedBytes={props.memRss} />
               </EuiDescriptionListDescription>
             </EuiDescriptionList>
           </EuiPanel>

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

@@ -10,7 +10,6 @@ import { formatNumber } from 'plugins/monitoring/lib/format_number';
 import {
   ClusterItemContainer,
   HealthStatusIndicator,
-  BytesUsage,
   BytesPercentageUsage,
   DisabledIfNoDataAndInSetupModeLink,
 } from './helpers';
@@ -291,7 +290,7 @@ export function ElasticsearchPanel(props) {
                 />
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription data-test-subj="esDiskAvailable">
-                <BytesUsage
+                <BytesPercentageUsage
                   usedBytes={get(nodes, 'fs.available_in_bytes')}
                   maxBytes={get(nodes, 'fs.total_in_bytes')}
                 />

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

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { get } from 'lodash';
-import { formatBytesUsage, formatPercentageUsage } from 'plugins/monitoring/lib/format_number';
+import { formatBytesUsage, formatPercentageUsage, formatNumber } from '../../../lib/format_number';
 import {
   EuiSpacer,
   EuiFlexItem,
@@ -88,10 +88,13 @@ export function BytesUsage({ usedBytes, maxBytes }) {
   if (usedBytes && maxBytes) {
     return (
       <span>
-        <EuiText>{formatPercentageUsage(usedBytes, maxBytes)}</EuiText>
-        <EuiText color="subdued" size="s">
-          {formatBytesUsage(usedBytes, maxBytes)}
-        </EuiText>
+        <EuiText>{formatBytesUsage(usedBytes, maxBytes)}</EuiText>
+      </span>
+    );
+  } else if (usedBytes) {
+    return (
+      <span>
+        <EuiText>{formatNumber(usedBytes, 'byte')}</EuiText>
       </span>
     );
   }