[Monitoring] Protect against these fields not existing in Logstash No…

…des listing (elastic#34939)

* Protect against these fields not existing

* Add basic unit tests to ensure this behavior does not regress

* Expand this test to ensure we don't break on other pieces of data missing

* Use N/A if there is no value (rather than 0)

x-pack/plugins/monitoring/public/components/logstash/listing/listing.js

@@ -5,6 +5,7 @@
  */
 
 import React, { PureComponent } from 'react';
+import { get } from 'lodash';
 import { EuiPage, EuiLink, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { formatPercentageUsage, formatNumber } from '../../../lib/format_number';
 import { ClusterStatus } from '..//cluster_status';
@@ -114,12 +115,12 @@ class ListingUI extends PureComponent {
     const columns = this.getColumns();
     const flattenedData = data.map(item => ({
       ...item,
-      name: item.logstash.name,
-      cpu_usage: item.process.cpu.percent,
-      load_average: item.os.cpu.load_average['1m'],
-      jvm_heap_used: item.jvm.mem.heap_used_percent,
-      events_ingested: item.events.out,
-      version: item.logstash.version,
+      name: get(item, 'logstash.name', 'N/A'),
+      cpu_usage: get(item, 'process.cpu.percent', 'N/A'),
+      load_average: get(item, 'os.cpu.load_average.1m', 'N/A'),
+      jvm_heap_used: get(item, 'jvm.mem.heap_used_percent', 'N/A'),
+      events_ingested: get(item, 'events.out', 'N/A'),
+      version: get(item, 'logstash.version', 'N/A'),
     }));
 
     return (

x-pack/plugins/monitoring/public/components/logstash/listing/listing.test.js

@@ -0,0 +1,88 @@
+/*
+ * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { Listing } from './listing';
+
+const expectedData = [
+  {
+    'jvm': {
+      'mem': {
+        'heap_used_percent': 27
+      }
+    },
+    'logstash': {
+      'pipeline': {
+        'batch_size': 125,
+        'workers': 4
+      },
+      'http_address': '127.0.0.1:9600',
+      'name': 'Elastic-MBP.local',
+      'host': 'Elastic-MBP.local',
+      'version': '8.0.0',
+      'uuid': '4134a00e-89e4-4896-a3d4-c3a9aa03a594',
+      'status': 'green'
+    },
+    'process': {
+      'cpu': {
+        'percent': 0
+      }
+    },
+    'os': {
+      'cpu': {
+        'load_average': {
+          '1m': 2.54248046875
+        }
+      }
+    },
+    'events': {
+      'out': 3505
+    },
+    'reloads': {
+      'failures': 0,
+      'successes': 0
+    },
+    'availability': true
+  }
+];
+
+describe('Listing', () => {
+  it('should render with expected props', () => {
+    const props = {
+      data: expectedData,
+      angular: {
+        scope: null,
+        kbnUrl: null
+      },
+      sorting: {
+        sort: 'asc'
+      }
+    };
+
+    const component = shallowWithIntl(<Listing.WrappedComponent {...props} />);
+    expect(component.find('EuiMonitoringTable')).toMatchSnapshot();
+  });
+
+  it('should render with certain data pieces missing', () => {
+    const props = {
+      data: expectedData.map(item => {
+        const { os, process, logstash, jvm, events, ...rest } = item; // eslint-disable-line no-unused-vars
+        return rest;
+      }),
+      angular: {
+        scope: null,
+        kbnUrl: null
+      },
+      sorting: {
+        sort: 'asc'
+      }
+    };
+
+    const component = shallowWithIntl(<Listing.WrappedComponent {...props} />);
+    expect(component.find('EuiMonitoringTable')).toMatchSnapshot();
+  });
+});