[Monitoring] Fully control the in memory table pagination/sorting pro…

…perties (elastic#85862) * Fully control the basic table pagination/sorting properties * Not necessary * Support index listing page Co-authored-by: Kibana Machine <[email protected]> # Conflicts: # x-pack/plugins/monitoring/public/views/apm/instances/index.js
chrisronline · Feb 5, 2021 · 1dfd5ab · 1dfd5ab
1 parent afa4382
commit 1dfd5ab
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()
       );
     }
   },