From 1e9bd95626e70eb3499544f60390ac9a9203f5fd Mon Sep 17 00:00:00 2001 From: Chris Roberson Date: Wed, 9 Jan 2019 11:00:24 -0500 Subject: [PATCH] [Monitoring] Fixing issue with EUI table filtering in monitoring UI (#27504) * Ensure the schema is set * Flatten certain table data lists to ensure the default field filtering works * Fix issue with tests * Fix issue with sort key name * Readd localization that was removed --- .../public/components/alerts/alerts.js | 14 +++- .../components/logstash/listing/listing.js | 73 ++++++++++++++----- .../public/components/table/eui_table.js | 4 + .../public/views/kibana/instances/index.js | 44 ++++------- 4 files changed, 85 insertions(+), 50 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/alerts/alerts.js b/x-pack/plugins/monitoring/public/components/alerts/alerts.js index 7b06dbda9a56f..ba6a64135ebf6 100644 --- a/x-pack/plugins/monitoring/public/components/alerts/alerts.js +++ b/x-pack/plugins/monitoring/public/components/alerts/alerts.js @@ -25,7 +25,7 @@ const linkToCategories = { const getColumns = (kbnUrl, scope) => ([ { name: 'Status', - field: 'metadata.severity', + field: 'status', sortable: true, render: severity => { const severityIcon = mapSeverity(severity); @@ -82,7 +82,7 @@ const getColumns = (kbnUrl, scope) => ([ }, { name: 'Category', - field: 'metadata.link', + field: 'category', sortable: true, render: link => linkToCategories[link] ? linkToCategories[link] : 'General' }, @@ -101,16 +101,22 @@ const getColumns = (kbnUrl, scope) => ([ ]); const AlertsUI = ({ alerts, angular, sorting, pagination, onTableChange, intl }) => { + const alertsFlattened = alerts.map(alert => ({ + ...alert, + status: alert.metadata.severity, + category: alert.metadata.link, + })); + return ( (
@@ -40,42 +43,67 @@ class ListingUI extends PureComponent { ) }, { - name: 'CPU Usage', - field: 'process.cpu.percent', + name: i18n.translate('xpack.monitoring.logstash.nodes.cpuUsageTitle', { + defaultMessage: 'CPU Usage' + }), + field: 'cpu_usage', sortable: true, render: value => formatPercentageUsage(value, 100) }, { - name: 'Load Average', - field: 'os.cpu.load_average.1m', + name: i18n.translate('xpack.monitoring.logstash.nodes.loadAverageTitle', { + defaultMessage: 'Load Average' + }), + field: 'load_average', sortable: true, render: value => formatNumber(value, '0.00') }, { - name: 'JVM Heap Used', - field: 'jvm.mem.heap_used_percent', + name: i18n.translate('xpack.monitoring.logstash.nodes.jvmHeapUsedTitle', { + defaultMessage: '{javaVirtualMachine} Heap Used', + values: { javaVirtualMachine: 'JVM' } + }), + field: 'jvm_heap_used', sortable: true, render: value => formatPercentageUsage(value, 100) }, { - name: 'Events Ingested', - field: 'events.out', + name: i18n.translate('xpack.monitoring.logstash.nodes.eventsIngestedTitle', { + defaultMessage: 'Events Ingested' + }), + field: 'events_out', sortable: true, render: value => formatNumber(value, '0.[0]a') }, { - name: 'Config Reloads', + name: i18n.translate('xpack.monitoring.logstash.nodes.configReloadsTitle', { + defaultMessage: 'Config Reloads' + }), sortable: true, render: node => (
-
{ node.reloads.successes } successes
-
{ node.reloads.failures } failures
+
+ +
+
+ +
) }, { - name: 'Version', - field: 'logstash.version', + name: i18n.translate('xpack.monitoring.logstash.nodes.versionTitle', { + defaultMessage: 'Version' + }), + field: 'version', sortable: true, render: value => formatNumber(value) } @@ -84,6 +112,15 @@ class ListingUI extends PureComponent { render() { const { data, stats, sorting, pagination, onTableChange, intl } = this.props; 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, + })); return ( @@ -93,13 +130,13 @@ class ListingUI extends PureComponent { { if (!column['data-test-subj']) { column['data-test-subj'] = 'monitoringTableHasData'; diff --git a/x-pack/plugins/monitoring/public/views/kibana/instances/index.js b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js index 2ace7b3b4f999..fe0b738b2336b 100644 --- a/x-pack/plugins/monitoring/public/views/kibana/instances/index.js +++ b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js @@ -5,8 +5,7 @@ */ import React from 'react'; -import { render } from 'react-dom'; -import { find, capitalize } from 'lodash'; +import { capitalize } from 'lodash'; import uiRoutes from'ui/routes'; import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; import { MonitoringViewBaseEuiTableController } from '../../'; @@ -25,7 +24,7 @@ const getColumns = (kbnUrl, scope) => ([ name: i18n.translate('xpack.monitoring.kibana.listing.nameColumnTitle', { defaultMessage: 'Name' }), - field: 'kibana.name', + field: 'name', render: (name, kibana) => ( { @@ -43,7 +42,7 @@ const getColumns = (kbnUrl, scope) => ([ name: i18n.translate('xpack.monitoring.kibana.listing.statusColumnTitle', { defaultMessage: 'Status' }), - field: 'kibana.status', + field: 'status', render: (status, kibana) => (
{ - const app = document.getElementById('monitoringKibanaInstancesApp'); - if (!app) { + $scope.$watch(() => this.data, data => { + if (!data || !data.kibanas) { return; } - const page = ( + const dataFlattened = data.kibanas.map(item => ({ + ...item, + name: item.kibana.name, + status: item.kibana.status, + })); + + this.renderReact( @@ -154,15 +153,9 @@ uiRoutes.when('/kibana/instances', { ); - - render(page, app); - }; - - $scope.$watch('data', () => renderReact()); - renderReact(); + }); } } });