Added sorting to all columns (#35410)

* Added sorting to all columns

* Added sorting to table wrapper instead

* Fixed condition

* Removed default sorting value

* Removed a log statement

* Converted beats directive into a controller

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

@@ -30,6 +30,10 @@ export class EuiMonitoringTable extends React.PureComponent {
       if (!column['data-test-subj']) {
         column['data-test-subj'] = 'monitoringTableHasData';
       }
+
+      if (!('sortable' in column)) {
+        column.sortable = true;
+      }
       return column;
     });
 

x-pack/plugins/monitoring/public/directives/all.js

@@ -15,5 +15,4 @@ import './kibana/cluster_status';
 import './kibana/listing';
 import './kibana/summary';
 import './beats/overview';
-import './beats/listing';
 import './beats/beat';

x-pack/plugins/monitoring/public/directives/beats/listing/index.js

@@ -1,46 +0,0 @@
-/*
- * 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 { render } from 'react-dom';
-import { uiModules } from 'ui/modules';
-import { I18nContext } from 'ui/i18n';
-import { Listing } from '../../../components/beats/listing/listing';
-
-const uiModule = uiModules.get('monitoring/directives', []);
-uiModule.directive('monitoringBeatsListing', (kbnUrl) => {
-  return {
-    restrict: 'E',
-    scope: {
-      data: '=',
-      sorting: '=',
-      pagination: '=paginationSettings',
-      onTableChange: '=',
-    },
-    link(scope, $el) {
-      function renderReact(data) {
-        render((
-          <I18nContext>
-            <Listing
-              stats={data.stats}
-              data={data.listing}
-              sorting={scope.sorting}
-              pagination={scope.pagination}
-              onTableChange={scope.onTableChange}
-              angular={{
-                kbnUrl,
-                scope,
-              }}
-            />
-          </I18nContext>
-        ), $el[0]);
-      }
-      scope.$watch('data', (data = {}) => {
-        renderReact(data);
-      });
-    }
-  };
-});

x-pack/plugins/monitoring/public/views/beats/listing/index.html

@@ -3,11 +3,5 @@
   name="beats"
   data-test-subj="beatsListingPage"
 >
-  <monitoring-beats-listing
-    page-index="beats.pageIndex"
-    sort-key="beats.sortKey"
-    sort-order="beats.sortOrder"
-    on-new-state="beats.onNewState"
-    data="beats.data"
-  ></monitoring-beats-listing>
-</monitoring-main>
+  <div id="monitoringBeatsInstancesApp" ng-init="beats.renderComponent()"></div>
+</monitoring-main>

x-pack/plugins/monitoring/public/views/beats/listing/index.js

@@ -7,9 +7,12 @@
 import { find } from 'lodash';
 import uiRoutes from'ui/routes';
 import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
-import { MonitoringViewBaseTableController } from '../../';
+import { MonitoringViewBaseEuiTableController } from '../../';
 import { getPageData } from './get_page_data';
 import template from './index.html';
+import React from 'react';
+import { I18nContext } from 'ui/i18n';
+import { Listing } from '../../../components/beats/listing/listing';
 
 uiRoutes.when('/beats/beats', {
   template,
@@ -21,7 +24,7 @@ uiRoutes.when('/beats/beats', {
     pageData: getPageData,
   },
   controllerAs: 'beats',
-  controller: class BeatsListing extends MonitoringViewBaseTableController {
+  controller: class BeatsListing extends MonitoringViewBaseEuiTableController {
     constructor($injector, $scope, i18n) {
       // breadcrumbs + page title
       const $route = $injector.get('$route');
@@ -32,11 +35,38 @@ uiRoutes.when('/beats/beats', {
         title: i18n('xpack.monitoring.beats.routeTitle', { defaultMessage: 'Beats' }),
         storageKey: 'beats.beats',
         getPageData,
+        reactNodeId: 'monitoringBeatsInstancesApp',
         $scope,
         $injector
       });
 
       this.data = $route.current.locals.pageData;
+      this.scope = $scope;
+      this.kbnUrl = $injector.get('kbnUrl');
+
+      //Bypassing super.updateData, since this controller loads its own data
+      this._isDataInitialized = true;
+
+      $scope.$watch(() => this.data, () => this.renderComponent());
+    }
+
+    renderComponent() {
+      const { sorting, pagination, onTableChange } = this.scope.beats;
+      this.renderReact(
+        <I18nContext>
+          <Listing
+            stats={this.data.stats}
+            data={this.data.listing}
+            sorting={this.sorting || sorting}
+            pagination={this.pagination || pagination}
+            onTableChange={this.onTableChange || onTableChange}
+            angular={{
+              kbnUrl: this.kbnUrl,
+              scope: this.scope,
+            }}
+          />
+        </I18nContext>
+      );
     }
   }
 });