From 1dfd5ab208762c8a1620aec1bf84e286d66e4b1f Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Mon, 4 Jan 2021 14:43:29 -0500
Subject: [PATCH] [Monitoring] Fully control the in memory table
 pagination/sorting properties (#85862)

* Fully control the basic table pagination/sorting properties

* Not necessary

* Support index listing page

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
# Conflicts:
#	x-pack/plugins/monitoring/public/views/apm/instances/index.js
---
 .../public/views/apm/instances/index.js       | 56 ++++++++++---------
 .../public/views/base_eui_table_controller.js |  5 ++
 .../public/views/beats/listing/index.js       |  1 +
 .../views/elasticsearch/indices/index.js      | 31 +++++-----
 .../public/views/kibana/instances/index.js    |  2 +
 .../public/views/logstash/nodes/index.js      | 52 +++++++++--------
 6 files changed, 83 insertions(+), 64 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/views/apm/instances/index.js b/x-pack/plugins/monitoring/public/views/apm/instances/index.js
index a66e939b18480..22efdba873f89 100644
--- a/x-pack/plugins/monitoring/public/views/apm/instances/index.js
+++ b/x-pack/plugins/monitoring/public/views/apm/instances/index.js
@@ -67,38 +67,40 @@ uiRoutes.when('/apm/instances', {
 
       this.scope = $scope;
       this.injector = $injector;
+      this.onTableChangeRender = this.renderComponent;
 
       $scope.$watch(
         () => this.data,
-        (data) => {
-          const { pagination, sorting, onTableChange } = this;
+        () => this.renderComponent()
+      );
+    }
+
+    renderComponent() {
+      const { pagination, sorting, onTableChange } = this;
 
-          const component = (
-            <SetupModeRenderer
-              scope={this.scope}
-              injector={this.injector}
-              productName={APM_SYSTEM_ID}
-              render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
-                <SetupModeContext.Provider value={{ setupModeSupported: true }}>
-                  {flyoutComponent}
-                  <ApmServerInstances
-                    setupMode={setupMode}
-                    alerts={this.alerts}
-                    apms={{
-                      pagination,
-                      sorting,
-                      onTableChange,
-                      data,
-                    }}
-                  />
-                  {bottomBarComponent}
-                </SetupModeContext.Provider>
-              )}
-            />
-          );
-          this.renderReact(component);
-        }
+      const component = (
+        <SetupModeRenderer
+          scope={this.scope}
+          injector={this.injector}
+          productName={APM_SYSTEM_ID}
+          render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+            <SetupModeContext.Provider value={{ setupModeSupported: true }}>
+              {flyoutComponent}
+              <ApmServerInstances
+                setupMode={setupMode}
+                apms={{
+                  pagination,
+                  sorting,
+                  onTableChange,
+                  data: this.data,
+                }}
+              />
+              {bottomBarComponent}
+            </SetupModeContext.Provider>
+          )}
+        />
       );
+      this.renderReact(component);
     }
   },
 });
diff --git a/x-pack/plugins/monitoring/public/views/base_eui_table_controller.js b/x-pack/plugins/monitoring/public/views/base_eui_table_controller.js
index 36e36de974342..ee72d97e26059 100644
--- a/x-pack/plugins/monitoring/public/views/base_eui_table_controller.js
+++ b/x-pack/plugins/monitoring/public/views/base_eui_table_controller.js
@@ -61,12 +61,17 @@ export class MonitoringViewBaseEuiTableController extends MonitoringViewBaseCont
     this.setSorting(sort);
 
     this.onTableChange = ({ page, sort }) => {
+      this.setPagination(page);
+      this.setSorting({ sort });
       setLocalStorageData(storage, {
         page,
         sort: {
           sort,
         },
       });
+      if (this.onTableChangeRender) {
+        this.onTableChangeRender();
+      }
     };
 
     // For pages where we do not fetch immediately, we want to fetch after pagination is applied
diff --git a/x-pack/plugins/monitoring/public/views/beats/listing/index.js b/x-pack/plugins/monitoring/public/views/beats/listing/index.js
index 61656189aa47b..301d7eccafa8d 100644
--- a/x-pack/plugins/monitoring/public/views/beats/listing/index.js
+++ b/x-pack/plugins/monitoring/public/views/beats/listing/index.js
@@ -67,6 +67,7 @@ uiRoutes.when('/beats/beats', {
       this.data = $route.current.locals.pageData;
       this.scope = $scope;
       this.injector = $injector;
+      this.onTableChangeRender = this.renderComponent;
 
       $scope.$watch(
         () => this.data,
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
index 490bd02db42b7..3d32ffad2c3d0 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
@@ -64,25 +64,30 @@ uiRoutes.when('/elasticsearch/indices', {
         this.updateData();
       };
 
+      const renderComponent = () => {
+        const { clusterStatus, indices } = this.data;
+        this.renderReact(
+          <ElasticsearchIndices
+            clusterStatus={clusterStatus}
+            indices={indices}
+            showSystemIndices={showSystemIndices}
+            toggleShowSystemIndices={toggleShowSystemIndices}
+            sorting={this.sorting}
+            pagination={this.pagination}
+            onTableChange={this.onTableChange}
+          />
+        );
+      };
+
+      this.onTableChangeRender = renderComponent;
+
       $scope.$watch(
         () => this.data,
         (data) => {
           if (!data) {
             return;
           }
-
-          const { clusterStatus, indices } = data;
-          this.renderReact(
-            <ElasticsearchIndices
-              clusterStatus={clusterStatus}
-              indices={indices}
-              showSystemIndices={showSystemIndices}
-              toggleShowSystemIndices={toggleShowSystemIndices}
-              sorting={this.sorting}
-              pagination={this.pagination}
-              onTableChange={this.onTableChange}
-            />
-          );
+          renderComponent();
         }
       );
     }
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 97841ec490fa8..37ab41bb56adb 100644
--- a/x-pack/plugins/monitoring/public/views/kibana/instances/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js
@@ -83,6 +83,8 @@ uiRoutes.when('/kibana/instances', {
         );
       };
 
+      this.onTableChangeRender = renderReact;
+
       $scope.$watch(
         () => this.data,
         (data) => {
diff --git a/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js b/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js
index 467462fffd48e..0aa21c1d78ddb 100644
--- a/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js
+++ b/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js
@@ -57,32 +57,36 @@ uiRoutes.when('/logstash/nodes', {
         },
       });
 
+      const renderComponent = () => {
+        this.renderReact(
+          <SetupModeRenderer
+            scope={$scope}
+            injector={$injector}
+            productName={LOGSTASH_SYSTEM_ID}
+            render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+              <SetupModeContext.Provider value={{ setupModeSupported: true }}>
+                {flyoutComponent}
+                <Listing
+                  data={this.data.nodes}
+                  setupMode={setupMode}
+                  stats={this.data.clusterStatus}
+                  alerts={this.alerts}
+                  sorting={this.sorting}
+                  pagination={this.pagination}
+                  onTableChange={this.onTableChange}
+                />
+                {bottomBarComponent}
+              </SetupModeContext.Provider>
+            )}
+          />
+        );
+      };
+
+      this.onTableChangeRender = renderComponent;
+
       $scope.$watch(
         () => this.data,
-        (data) => {
-          this.renderReact(
-            <SetupModeRenderer
-              scope={$scope}
-              injector={$injector}
-              productName={LOGSTASH_SYSTEM_ID}
-              render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
-                <SetupModeContext.Provider value={{ setupModeSupported: true }}>
-                  {flyoutComponent}
-                  <Listing
-                    data={data.nodes}
-                    setupMode={setupMode}
-                    stats={data.clusterStatus}
-                    alerts={this.alerts}
-                    sorting={this.sorting}
-                    pagination={this.pagination}
-                    onTableChange={this.onTableChange}
-                  />
-                  {bottomBarComponent}
-                </SetupModeContext.Provider>
-              )}
-            />
-          );
-        }
+        () => renderComponent()
       );
     }
   },