Skip to content

[Security Solution][Endpoint] Paginate actions log with infinite scroll#102261

Merged
ashokaditya merged 32 commits intoelastic:masterfrom
ashokaditya:feature/olm-paginate_actions_log_infinite_scroll-1245
Jun 23, 2021
Merged

[Security Solution][Endpoint] Paginate actions log with infinite scroll#102261
ashokaditya merged 32 commits intoelastic:masterfrom
ashokaditya:feature/olm-paginate_actions_log_infinite_scroll-1245

Conversation

@ashokaditya
Copy link
Copy Markdown
Member

@ashokaditya ashokaditya commented Jun 15, 2021

Summary

This PR builds on top of /pull/101032 and /pull/99795 and enables users to paginate data by scrolling to the end of the list instead of clicking on a button.

screenshots
action-log-paging

empty state
action-log-paging-2

Checklist

Delete any items that are not applicable to this PR.

@ashokaditya ashokaditya added v8.0.0 Team:Defend Workflows “EDR Workflows” sub-team of Security Solution v7.14.0 release_note:feature Makes this part of the condensed release notes auto-backport Deprecated - use backport:version if exact versions are needed labels Jun 15, 2021
@ashokaditya ashokaditya changed the title Paginate actions log with infinite scroll [Security Solution][Endpoint] Paginate actions log with infinite scroll Jun 15, 2021
@ashokaditya
Copy link
Copy Markdown
Member Author

@elasticmachine merge upstream

@ashokaditya
Copy link
Copy Markdown
Member Author

@elasticmachine merge upstream

@ashokaditya
Copy link
Copy Markdown
Member Author

@elasticmachine merge upstream

@kibanamachine
Copy link
Copy Markdown
Contributor

merge conflict between base and head

refs /pull/101032/commits/c4e933a9c5954ce249942ca66bab380c1dfa79e2#diff-41a74ad41665921620230a0729728f3bf6e27a6f9dc302fb37b0d2061637c212R81
Copy link
Copy Markdown
Contributor

@dasansol92 dasansol92 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just added a question but it LGTM 🔥 . Do you have some check or issue somewhere as a reminder for the infinite scroll component?

@ashokaditya
Copy link
Copy Markdown
Member Author

Just added a question but it LGTM 🔥 . Do you have some check or issue somewhere as a reminder for the infinite scroll component?

I'll create a ticket for refactoring the scroll thingy into a component 😊

@ashokaditya
Copy link
Copy Markdown
Member Author

@elasticmachine merge upstream

Copy link
Copy Markdown
Contributor

@paul-tavares paul-tavares left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not check it out locally and will try to do that a little later. Left some comments and suggestions. let me know if you have any question.

ashokaditya and others added 4 commits June 22, 2021 15:30
…int_hosts/store/reducer.ts

Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
…int_hosts/view/index.test.tsx

Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

@paul-tavares paul-tavares left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Thanks for the changes. We can refactor later to drive selected tab using the show= param

👍

@ashokaditya
Copy link
Copy Markdown
Member Author

@elasticmachine merge upstream

@ashokaditya
Copy link
Copy Markdown
Member Author

@elasticmachine merge upstream

@ashokaditya ashokaditya merged commit b12ddfa into elastic:master Jun 23, 2021
@ashokaditya ashokaditya deleted the feature/olm-paginate_actions_log_infinite_scroll-1245 branch June 23, 2021 07:19
kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Jun 23, 2021
…ll (elastic#102261)

* Show loading below the list when loading

fixes elastic/security-team/issues/1245

* use intersection observer to load data when callout is visible

fixes elastic/security-team/issues/1245

* remove unused `total` from API response

refs 4f7d18b

* toggle ability to paging based on API response and target intersection

fixes elastic/security-team/issues/1245

* use a invisible target

* display a message when end of log

fixes elastic/security-team/issues/1245

* remove search bar

fixes elastic/security-team/issues/1245

* refresh data

fixes elastic/security-team/issues/1245

* rename

refs 85e5add

* add refresh button to empty state

* add translations for copy

* remove refresh button

* load activity log for endpoint on activity log tab selection

fixes elastic/security-team/issues/1312

* reset paging correctly on activity log tab selection

* fix variable mixup

refs elastic/pull/101032/commits/c4e933a9c5954ce249942ca66bab380c1dfa79e2#diff-41a74ad41665921620230a0729728f3bf6e27a6f9dc302fb37b0d2061637c212R81

* fix react warning

refs 697a3c3

* clean up

review changes

* use the complicated flyout version instead of styled version

refs https://elastic.github.io/eui/#/layout/flyout#more-complicated-flyout
refs https://github.com/elastic/kibana/pull/99795/files#r635810660
refs c26a7d4

* Page only when scrolled (so that info message is shown after paging once)

fixes elastic/security-team#1245 (comment)

* add tests

fixes elastic/security-team/issues/1312
fixes elastic/security-team/issues/1245

* increase the parent container's height to ensure that the scroll target is well hidden below the footer

refs 48e3291

* Update x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts

Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>

* Update x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx

Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>

* address review changes

* cleanup callback and effect

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
@kibanamachine
Copy link
Copy Markdown
Contributor

💚 Backport successful

Status Branch Result
7.x

This backport PR will be merged automatically after passing CI.

kibanamachine added a commit that referenced this pull request Jun 23, 2021
…ll (#102261) (#103047)

* Show loading below the list when loading

fixes elastic/security-team/issues/1245

* use intersection observer to load data when callout is visible

fixes elastic/security-team/issues/1245

* remove unused `total` from API response

refs 4f7d18b

* toggle ability to paging based on API response and target intersection

fixes elastic/security-team/issues/1245

* use a invisible target

* display a message when end of log

fixes elastic/security-team/issues/1245

* remove search bar

fixes elastic/security-team/issues/1245

* refresh data

fixes elastic/security-team/issues/1245

* rename

refs 85e5add

* add refresh button to empty state

* add translations for copy

* remove refresh button

* load activity log for endpoint on activity log tab selection

fixes elastic/security-team/issues/1312

* reset paging correctly on activity log tab selection

* fix variable mixup

refs /pull/101032/commits/c4e933a9c5954ce249942ca66bab380c1dfa79e2#diff-41a74ad41665921620230a0729728f3bf6e27a6f9dc302fb37b0d2061637c212R81

* fix react warning

refs 697a3c3

* clean up

review changes

* use the complicated flyout version instead of styled version

refs https://elastic.github.io/eui/#/layout/flyout#more-complicated-flyout
refs https://github.com/elastic/kibana/pull/99795/files#r635810660
refs c26a7d4

* Page only when scrolled (so that info message is shown after paging once)

fixes elastic/security-team#1245 (comment)

* add tests

fixes elastic/security-team/issues/1312
fixes elastic/security-team/issues/1245

* increase the parent container's height to ensure that the scroll target is well hidden below the footer

refs 48e3291

* Update x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts

Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>

* Update x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx

Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>

* address review changes

* cleanup callback and effect

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>

Co-authored-by: Ashokaditya <am.struktr@gmail.com>
Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Jun 30, 2021

💔 Build Failed

Failed CI Steps


Test Failures

Kibana Pipeline / general / X-Pack API Integration Tests.x-pack/test/api_integration/apis/management/index_lifecycle_management/policies·js.apis management index lifecycle management policies list should have a default policy to manage the Watcher history indices

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has failed 3 times on tracked branches: https://github.com/elastic/kibana/issues/41237

[00:00:00]       │
[00:00:00]         └-: apis
[00:00:00]           └-> "before all" hook in "apis"
[00:05:46]           └-: management
[00:05:46]             └-> "before all" hook in "management"
[00:06:08]             └-: index lifecycle management
[00:06:08]               └-> "before all" hook in "index lifecycle management"
[00:06:08]               └-: policies
[00:06:08]                 └-> "before all" hook in "policies"
[00:06:08]                 └-: list
[00:06:08]                   └-> "before all" hook for "should have a default policy to manage the Watcher history indices"
[00:06:08]                   └-> should have a default policy to manage the Watcher history indices
[00:06:08]                     └-> "before each" hook: global before each for "should have a default policy to manage the Watcher history indices"
[00:06:08]                     └- ✖ fail: apis management index lifecycle management policies list should have a default policy to manage the Watcher history indices
[00:06:08]                     │       Error: expected { version: 1,
[00:06:08]                     │   modified_date: '2019-04-30T14:30:00.000Z',
[00:06:08]                     │   policy: { phases: { delete: [Object] } },
[00:06:08]                     │   in_use_by: 
[00:06:08]                     │    { indices: [],
[00:06:08]                     │      data_streams: [],
[00:06:08]                     │      composable_templates: [ '.watch-history-14' ] },
[00:06:08]                     │   name: 'watch-history-ilm-policy' } to sort of equal { version: 1,
[00:06:08]                     │   modified_date: '2019-04-30T14:30:00.000Z',
[00:06:08]                     │   policy: { phases: { delete: [Object] } },
[00:06:08]                     │   name: 'watch-history-ilm-policy' }
[00:06:08]                     │       + expected - actual
[00:06:08]                     │ 
[00:06:08]                     │        {
[00:06:08]                     │       -  "in_use_by": {
[00:06:08]                     │       -    "composable_templates": [
[00:06:08]                     │       -      ".watch-history-14"
[00:06:08]                     │       -    ]
[00:06:08]                     │       -    "data_streams": []
[00:06:08]                     │       -    "indices": []
[00:06:08]                     │       -  }
[00:06:08]                     │          "modified_date": "2019-04-30T14:30:00.000Z"
[00:06:08]                     │          "name": "watch-history-ilm-policy"
[00:06:08]                     │          "policy": {
[00:06:08]                     │            "phases": {
[00:06:08]                     │       
[00:06:08]                     │       at Assertion.assert (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/expect/expect.js:100:11)
[00:06:08]                     │       at Assertion.eql (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/expect/expect.js:244:8)
[00:06:08]                     │       at Context.<anonymous> (test/api_integration/apis/management/index_lifecycle_management/policies.js:50:27)
[00:06:08]                     │       at Object.apply (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/test/src/functional_test_runner/lib/mocha/wrap_function.js:73:16)
[00:06:08]                     │ 
[00:06:08]                     │ 

Stack Trace

Error: expected { version: 1,
  modified_date: '2019-04-30T14:30:00.000Z',
  policy: { phases: { delete: [Object] } },
  in_use_by: 
   { indices: [],
     data_streams: [],
     composable_templates: [ '.watch-history-14' ] },
  name: 'watch-history-ilm-policy' } to sort of equal { version: 1,
  modified_date: '2019-04-30T14:30:00.000Z',
  policy: { phases: { delete: [Object] } },
  name: 'watch-history-ilm-policy' }
    at Assertion.assert (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/expect/expect.js:100:11)
    at Assertion.eql (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/expect/expect.js:244:8)
    at Context.<anonymous> (test/api_integration/apis/management/index_lifecycle_management/policies.js:50:27)
    at Object.apply (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/test/src/functional_test_runner/lib/mocha/wrap_function.js:73:16) {
  actual: '{\n' +
    '  "in_use_by": {\n' +
    '    "composable_templates": [\n' +
    '      ".watch-history-14"\n' +
    '    ]\n' +
    '    "data_streams": []\n' +
    '    "indices": []\n' +
    '  }\n' +
    '  "modified_date": "2019-04-30T14:30:00.000Z"\n' +
    '  "name": "watch-history-ilm-policy"\n' +
    '  "policy": {\n' +
    '    "phases": {\n' +
    '      "delete": {\n' +
    '        "actions": {\n' +
    '          "delete": {\n' +
    '            "delete_searchable_snapshot": true\n' +
    '          }\n' +
    '        }\n' +
    '        "min_age": "7d"\n' +
    '      }\n' +
    '    }\n' +
    '  }\n' +
    '  "version": 1\n' +
    '}',
  expected: '{\n' +
    '  "modified_date": "2019-04-30T14:30:00.000Z"\n' +
    '  "name": "watch-history-ilm-policy"\n' +
    '  "policy": {\n' +
    '    "phases": {\n' +
    '      "delete": {\n' +
    '        "actions": {\n' +
    '          "delete": {\n' +
    '            "delete_searchable_snapshot": true\n' +
    '          }\n' +
    '        }\n' +
    '        "min_age": "7d"\n' +
    '      }\n' +
    '    }\n' +
    '  }\n' +
    '  "version": 1\n' +
    '}',
  showDiff: true
}

Kibana Pipeline / general / X-Pack API Integration Tests.x-pack/test/api_integration/apis/management/index_lifecycle_management/policies·js.apis management index lifecycle management policies list should have a default policy to manage the Watcher history indices

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has failed 3 times on tracked branches: https://github.com/elastic/kibana/issues/41237

[00:00:00]       │
[00:00:00]         └-: apis
[00:00:00]           └-> "before all" hook in "apis"
[00:05:43]           └-: management
[00:05:43]             └-> "before all" hook in "management"
[00:06:07]             └-: index lifecycle management
[00:06:07]               └-> "before all" hook in "index lifecycle management"
[00:06:07]               └-: policies
[00:06:07]                 └-> "before all" hook in "policies"
[00:06:07]                 └-: list
[00:06:07]                   └-> "before all" hook for "should have a default policy to manage the Watcher history indices"
[00:06:07]                   └-> should have a default policy to manage the Watcher history indices
[00:06:07]                     └-> "before each" hook: global before each for "should have a default policy to manage the Watcher history indices"
[00:06:07]                     └- ✖ fail: apis management index lifecycle management policies list should have a default policy to manage the Watcher history indices
[00:06:07]                     │       Error: expected { version: 1,
[00:06:07]                     │   modified_date: '2019-04-30T14:30:00.000Z',
[00:06:07]                     │   policy: { phases: { delete: [Object] } },
[00:06:07]                     │   in_use_by: 
[00:06:07]                     │    { indices: [],
[00:06:07]                     │      data_streams: [],
[00:06:07]                     │      composable_templates: [ '.watch-history-14' ] },
[00:06:07]                     │   name: 'watch-history-ilm-policy' } to sort of equal { version: 1,
[00:06:07]                     │   modified_date: '2019-04-30T14:30:00.000Z',
[00:06:07]                     │   policy: { phases: { delete: [Object] } },
[00:06:07]                     │   name: 'watch-history-ilm-policy' }
[00:06:07]                     │       + expected - actual
[00:06:07]                     │ 
[00:06:07]                     │        {
[00:06:07]                     │       -  "in_use_by": {
[00:06:07]                     │       -    "composable_templates": [
[00:06:07]                     │       -      ".watch-history-14"
[00:06:07]                     │       -    ]
[00:06:07]                     │       -    "data_streams": []
[00:06:07]                     │       -    "indices": []
[00:06:07]                     │       -  }
[00:06:07]                     │          "modified_date": "2019-04-30T14:30:00.000Z"
[00:06:07]                     │          "name": "watch-history-ilm-policy"
[00:06:07]                     │          "policy": {
[00:06:07]                     │            "phases": {
[00:06:07]                     │       
[00:06:07]                     │       at Assertion.assert (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/expect/expect.js:100:11)
[00:06:07]                     │       at Assertion.eql (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/expect/expect.js:244:8)
[00:06:07]                     │       at Context.<anonymous> (test/api_integration/apis/management/index_lifecycle_management/policies.js:50:27)
[00:06:07]                     │       at Object.apply (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/test/src/functional_test_runner/lib/mocha/wrap_function.js:73:16)
[00:06:07]                     │ 
[00:06:07]                     │ 

Stack Trace

Error: expected { version: 1,
  modified_date: '2019-04-30T14:30:00.000Z',
  policy: { phases: { delete: [Object] } },
  in_use_by: 
   { indices: [],
     data_streams: [],
     composable_templates: [ '.watch-history-14' ] },
  name: 'watch-history-ilm-policy' } to sort of equal { version: 1,
  modified_date: '2019-04-30T14:30:00.000Z',
  policy: { phases: { delete: [Object] } },
  name: 'watch-history-ilm-policy' }
    at Assertion.assert (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/expect/expect.js:100:11)
    at Assertion.eql (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/expect/expect.js:244:8)
    at Context.<anonymous> (test/api_integration/apis/management/index_lifecycle_management/policies.js:50:27)
    at Object.apply (/dev/shm/workspace/parallel/6/kibana/node_modules/@kbn/test/src/functional_test_runner/lib/mocha/wrap_function.js:73:16) {
  actual: '{\n' +
    '  "in_use_by": {\n' +
    '    "composable_templates": [\n' +
    '      ".watch-history-14"\n' +
    '    ]\n' +
    '    "data_streams": []\n' +
    '    "indices": []\n' +
    '  }\n' +
    '  "modified_date": "2019-04-30T14:30:00.000Z"\n' +
    '  "name": "watch-history-ilm-policy"\n' +
    '  "policy": {\n' +
    '    "phases": {\n' +
    '      "delete": {\n' +
    '        "actions": {\n' +
    '          "delete": {\n' +
    '            "delete_searchable_snapshot": true\n' +
    '          }\n' +
    '        }\n' +
    '        "min_age": "7d"\n' +
    '      }\n' +
    '    }\n' +
    '  }\n' +
    '  "version": 1\n' +
    '}',
  expected: '{\n' +
    '  "modified_date": "2019-04-30T14:30:00.000Z"\n' +
    '  "name": "watch-history-ilm-policy"\n' +
    '  "policy": {\n' +
    '    "phases": {\n' +
    '      "delete": {\n' +
    '        "actions": {\n' +
    '          "delete": {\n' +
    '            "delete_searchable_snapshot": true\n' +
    '          }\n' +
    '        }\n' +
    '        "min_age": "7d"\n' +
    '      }\n' +
    '    }\n' +
    '  }\n' +
    '  "version": 1\n' +
    '}',
  showDiff: true
}

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 2188 2189 +1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
securitySolution 6.5MB 6.5MB +5.9KB

History

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

ashokaditya added a commit that referenced this pull request Aug 30, 2021
…er (#110233)

* account for API errors and uninitialized state before fetching data

fixes /issues/107129

* better name

refs /pull/102261

* don't show date picker when loading data initially

fixes /issues/107129

* use a readable selector instead

review changes

* remove redundant data fetch using paging action on tab switch.

refs /pull/102261

* remove redundant validation

review comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Aug 30, 2021
…er (elastic#110233)

* account for API errors and uninitialized state before fetching data

fixes elastic/issues/107129

* better name

refs elastic/pull/102261

* don't show date picker when loading data initially

fixes elastic/issues/107129

* use a readable selector instead

review changes

* remove redundant data fetch using paging action on tab switch.

refs elastic/pull/102261

* remove redundant validation

review comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Aug 30, 2021
…er (elastic#110233)

* account for API errors and uninitialized state before fetching data

fixes elastic/issues/107129

* better name

refs elastic/pull/102261

* don't show date picker when loading data initially

fixes elastic/issues/107129

* use a readable selector instead

review changes

* remove redundant data fetch using paging action on tab switch.

refs elastic/pull/102261

* remove redundant validation

review comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
kibanamachine added a commit that referenced this pull request Aug 30, 2021
…er (#110233) (#110526)

* account for API errors and uninitialized state before fetching data

fixes /issues/107129

* better name

refs /pull/102261

* don't show date picker when loading data initially

fixes /issues/107129

* use a readable selector instead

review changes

* remove redundant data fetch using paging action on tab switch.

refs /pull/102261

* remove redundant validation

review comments

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

Co-authored-by: Ashokaditya <am.struktr@gmail.com>
kibanamachine added a commit that referenced this pull request Sep 1, 2021
…er (#110233) (#110525)

* account for API errors and uninitialized state before fetching data

fixes /issues/107129

* better name

refs /pull/102261

* don't show date picker when loading data initially

fixes /issues/107129

* use a readable selector instead

review changes

* remove redundant data fetch using paging action on tab switch.

refs /pull/102261

* remove redundant validation

review comments

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

Co-authored-by: Ashokaditya <am.struktr@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

auto-backport Deprecated - use backport:version if exact versions are needed release_note:feature Makes this part of the condensed release notes Team:Defend Workflows “EDR Workflows” sub-team of Security Solution v7.14.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants