[Stack Monitoring] fix useTable sorting and pagination by neptunian · Pull Request #113563 · elastic/kibana

neptunian · 2021-09-30T18:10:20Z

Fixes sorting issue when saving to local storage
Fixes tables that requests data on table change to not make multiple requests by updating state again

Test

Sorting columns in a table should work
Sorting columns, refreshing the page, the column should remain sorted
Selecting page size should work. After refreshing the page it should remain.
Querying for a table item should work. If results are paginated make sure when paginating the query wasn't lost
In tables that make endpoint requests on change, only one request should be made when sorting or on pagination (try nodes list or pipeline listing)
Test all the above in tables that do not make requests (beats listing, indices listing)
Test all the above in the angular version as well. Switching between modes should work as local storage should not change.

elasticmachine · 2021-09-30T18:10:22Z

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

neptunian · 2021-09-30T18:10:57Z

x-pack/plugins/monitoring/public/application/hooks/use_table.ts


  // get initial state from localStorage
  const [sorting, setSorting] = useState<Sorting>(storageData.sort || { sort: {} });
-  const cleanSortingData = (sortData: Sorting) => {


this new function was causing the sorting to store itself incorrectly. it doesn't exist in the angular version and after removal it stopped breaking

neptunian · 2021-09-30T18:12:23Z

x-pack/plugins/monitoring/public/application/hooks/use_table.ts

      sorting,
      pagination,
      onTableChange,
-      fetchMoreData: ({


This used to have the async updateData function in here (https://github.com/elastic/kibana/blob/master/x-pack/plugins/monitoring/public/views/base_eui_table_controller.js#L131). Now it does not and this already happens onTableChange

neptunian · 2021-09-30T18:12:58Z

x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js

            }}
            onTableChange={onTableChange}
-            fetchMoreData={fetchMoreData}
+            {...props}


don't look for fetchMoreData explicitly because its removed in the react version now

neptunian · 2021-09-30T18:13:29Z

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

              sorting={sortingOptions}
              message={upgradeMessage}
              pagination={pagination}
-              fetchMoreData={fetchMoreData}


don't look for fetchMoreData explicitly because its removed in the react version now

neptunian · 2021-09-30T18:15:15Z

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

+    }
+    // react version
+    else {
+      onTableChange({ page, sort, queryText });


fetchMoreData isn't needed in React version because we get data in the ElasticsearchTemplate

neptunian · 2021-09-30T18:15:57Z

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

        items={items}
        pagination={pagination}
        onChange={onChange}
-        loading={isLoading}


No loading visual was happening in Angular version so I removed it. Would need to pass this down from parent component at some point.

neptunian · 2021-09-30T19:25:12Z

@elasticmachine merge upstream

matschaffer · 2021-10-01T05:19:27Z

testing

using monitoring-olbt, edge-olbt didn't seem to have any monitoring data

Sorting columns in a table should work
Sorting columns, refreshing the page, the column short remain sorted
Selecting page size should work. After refreshing the page it should remain.
Querying for a table item should work. If results are paginated make sure when paginating the query wasn't lost
In tables that make endpoint requests on change, only one request should be made when sorting or on pagination (tested on node list)
Test all the above in tables that do not make requests (tested on index list)
Test all the above in the angular version as well. Switching between modes should work as local storage should not change.

matschaffer · 2021-10-01T06:33:47Z

I noticed that the filter got lost after refresh, but sorting remained. Angular master and even 7.15.0 do this so seems intended. Just mentioning incase anyone flags it as a bug.

matschaffer

Looks solid. Thanks for posting the recommended test steps!

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2021-10-01T12:13:07Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Sandra G <neptunian@users.noreply.github.com>

kibanamachine · 2021-10-06T15:34:58Z

⏳ Build in-progress, with failures

continuous-integration/kibana-ci/pull-request
Commit: 86fc619
Storybooks Preview
This comment will update when the build is complete

Failed CI Steps

History

💚 Build #156885 succeeded 86fc619
💔 Build #156868 failed 474c31e

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @neptunian

fix sorting, pagination, state

474c31e

neptunian added v8.0.0 Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services release_note:skip Skip the PR/issue when compiling release notes v7.16.0 Epic: Stack Monitoring de-angularization labels Sep 30, 2021

neptunian self-assigned this Sep 30, 2021

neptunian requested a review from a team as a code owner September 30, 2021 18:10

neptunian requested review from a team September 30, 2021 18:10

neptunian commented Sep 30, 2021

View reviewed changes

Merge branch 'master' into fix-use-table

86fc619

matschaffer approved these changes Oct 1, 2021

View reviewed changes

neptunian added the auto-backport Deprecated - use backport:version if exact versions are needed label Oct 1, 2021

neptunian merged commit 56effce into elastic:master Oct 1, 2021

kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Oct 1, 2021

fix sorting, pagination, state (elastic#113563)

6ad29ce

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine mentioned this pull request Oct 1, 2021

[7.x] fix sorting, pagination, state (#113563) #113613

Merged

Conversation

neptunian commented Sep 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test

Uh oh!

elasticmachine commented Sep 30, 2021

Uh oh!

neptunian Sep 30, 2021

Choose a reason for hiding this comment

Uh oh!

neptunian Sep 30, 2021

Choose a reason for hiding this comment

Uh oh!

neptunian Sep 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

neptunian Sep 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

neptunian Sep 30, 2021

Choose a reason for hiding this comment

Uh oh!

neptunian Sep 30, 2021

Choose a reason for hiding this comment

Uh oh!

neptunian commented Sep 30, 2021

Uh oh!

matschaffer commented Oct 1, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

testing

Uh oh!

matschaffer commented Oct 1, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matschaffer left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Oct 1, 2021

💚 Backport successful

Uh oh!

kibanamachine commented Oct 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⏳ Build in-progress, with failures

Failed CI Steps

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

neptunian commented Sep 30, 2021 •

edited

Loading

neptunian Sep 30, 2021 •

edited

Loading

neptunian Sep 30, 2021 •

edited

Loading

matschaffer commented Oct 1, 2021 •

edited

Loading

matschaffer commented Oct 1, 2021 •

edited

Loading

kibanamachine commented Oct 6, 2021 •

edited

Loading