[Monitoring] Fixing issue with EUI table filtering in monitoring UI

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 (
     <EuiMonitoringTable
       className="alertsTable"
-      rows={alerts}
+      rows={alertsFlattened}
       columns={getColumns(angular.kbnUrl, angular.scope)}
       sorting={{
         ...sorting,
         sort: {
           ...sorting.sort,
-          field: 'metadata.severity',
+          field: 'status',
           direction: EUI_SORT_DESCENDING,
         }
       }}

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

@@ -18,7 +18,7 @@ class ListingUI extends PureComponent {
     return [
       {
         name: 'Name',
-        field: 'logstash.name',
+        field: 'name',
         sortable: true,
         render: (name, node) => (
           <div>
@@ -41,25 +41,25 @@ class ListingUI extends PureComponent {
       },
       {
         name: 'CPU Usage',
-        field: 'process.cpu.percent',
+        field: 'cpu_usage',
         sortable: true,
         render: value => formatPercentageUsage(value, 100)
       },
       {
         name: 'Load Average',
-        field: 'os.cpu.load_average.1m',
+        field: 'load_average',
         sortable: true,
         render: value => formatNumber(value, '0.00')
       },
       {
         name: 'JVM Heap Used',
-        field: 'jvm.mem.heap_used_percent',
+        field: 'jvm_heap_used',
         sortable: true,
         render: value => formatPercentageUsage(value, 100)
       },
       {
         name: 'Events Ingested',
-        field: 'events.out',
+        field: 'events_out',
         sortable: true,
         render: value => formatNumber(value, '0.[0]a')
       },
@@ -75,7 +75,7 @@ class ListingUI extends PureComponent {
       },
       {
         name: 'Version',
-        field: 'logstash.version',
+        field: 'version',
         sortable: true,
         render: value => formatNumber(value)
       }
@@ -84,6 +84,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 (
       <EuiPage>
@@ -93,7 +102,7 @@ class ListingUI extends PureComponent {
             <EuiSpacer size="m"/>
             <EuiMonitoringTable
               className="logstashNodesTable"
-              rows={data}
+              rows={flattenedData}
               columns={columns}
               sorting={{
                 ...sorting,

x-pack/plugins/monitoring/public/components/table/eui_table.js

@@ -22,6 +22,10 @@ export class EuiMonitoringTable extends React.PureComponent {
       search.box['data-test-subj'] = 'monitoringTableToolBar';
     }
 
+    if (search.box && !search.box.schema) {
+      search.box.schema = true;
+    }
+
     const columns = _columns.map(column => {
       if (!column['data-test-subj']) {
         column['data-test-subj'] = 'monitoringTableHasData';

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) => (
       <EuiLink
         onClick={() => {
@@ -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) => (
       <div
         title={`Instance status: ${status}`}
@@ -127,25 +126,25 @@ uiRoutes.when('/kibana/instances', {
         title: 'Kibana Instances',
         storageKey: 'kibana.instances',
         getPageData,
+        reactNodeId: 'monitoringKibanaInstancesApp',
         $scope,
         $injector
       });
 
-      const $route = $injector.get('$route');
-      this.data = $route.current.locals.pageData;
-      const globalState = $injector.get('globalState');
-      $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
-      $scope.pageData = $route.current.locals.pageData;
-
       const kbnUrl = $injector.get('kbnUrl');
 
-      const renderReact = () => {
-        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(
           <I18nProvider>
             <EuiPage>
               <EuiPageBody>
@@ -154,15 +153,9 @@ uiRoutes.when('/kibana/instances', {
                   <EuiSpacer size="m"/>
                   <EuiMonitoringTable
                     className="kibanaInstancesTable"
-                    rows={this.data.kibanas}
+                    rows={dataFlattened}
                     columns={getColumns(kbnUrl, $scope)}
-                    sorting={{
-                      ...this.sorting,
-                      sort: {
-                        ...this.sorting.sort,
-                        field: 'kibana.name'
-                      }
-                    }}
+                    sorting={this.sorting}
                     pagination={this.pagination}
                     search={{
                       box: {
@@ -180,12 +173,7 @@ uiRoutes.when('/kibana/instances', {
             </EuiPage>
           </I18nProvider>
         );
-
-        render(page, app);
-      };
-
-      $scope.$watch('data', () => renderReact());
-      renderReact();
+      });
     }
   }
 });