Fully control the basic table pagination/sorting properties

elastic · Dec 14, 2020 · 563f4f4 · 563f4f4
1 parent 59b18a2
commit 563f4f4
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 50 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
@@ -52,37 +52,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}
-                    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_controller.js b/x-pack/plugins/monitoring/public/views/base_controller.js
@@ -119,6 +119,8 @@ export class MonitoringViewBaseController {
       showZoomOutBtn: () => zoomInLevel > 0,
     };
 
+    this.forceRenders = 0;
+
     const { enableTimeFilter = true, enableAutoRefresh = true } = options;
 
     async function fetchAlerts() {

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
@@ -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
@@ -52,6 +52,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/kibana/instances/index.js b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js
@@ -77,6 +77,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
@@ -51,32 +51,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()
       );
     }
   },