[Discover] Added context aware logic for logs view in discover to show Load More…

[achyutjhunjhunwala]

Summary

Closes - #166679

What's included ?

• The PR adds a feature in Logs View of Observability (to start with) to hide the regular pagination toolbar from the footer and show Load More only when the user has scrolled to the bottom of the page.
• The table would always load the items in batches of default set 500
• This PR also add 2 helper functions useThrottleFn and useDebounceFn. Current React help library which KIbana uses called -react-use does not have these and we cannot use Lodash variant of these. We need such hooks which are React safe. Hence added these 2

What's pending ?

• Unit tests for the 2 new helper React hooks
• Unit tests for data table footer component
• Unit tests for Profile Resolution
• Functional Serverless Tests
• Functional Stateful Tests

[elasticmachine]

Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs)

[davismcphee]

I gave this a spin locally, and it's working well overall, but I am noticing that UI flickering I was referring to in the issue when scrolling to the point where the footer is toggled. It's a bit harder to hit using debounce vs throttle, but still there:

I'm also not really a fan of the debounce effect in general. It makes things feel laggy and delayed while scrolling IMO. Is there a particular reason to use it over throttle?

[achyutjhunjhunwala]

I'm also not really a fan of the debounce effect in general. It makes things feel laggy and delayed while scrolling IMO. Is there a particular reason to use it over throttle?

@davismcphee I was initially using debounce and then after reading your previous comment i gave it another thought and changed it to throttle . if you look at the code, i am still calling the variable throttledHandleItemsRendered but forgot to change the actual function call from useDebounce to useThrottle. I will update it.

https://github.com/achyutjhunjhunwala/kibana/blob/b1ed427645d2f091da94f49a9f5a189de4c1db94/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table.tsx#L1165

[logeekal]

Code Review and Desk Testing LGTM from investigations side. Just added couple of small comments.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 7e91e22

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
apm	1661	1666	+5
cloudSecurityPosture	705	722	+17
controls	369	376	+7
discover	1020	1025	+5
esqlDataGrid	443	460	+17
infra	1197	1203	+6
inventory	226	232	+6
investigateApp	256	263	+7
lens	1696	1710	+14
maps	1258	1265	+7
presentationPanel	111	117	+6
securitySolution	7110	7117	+7
slo	918	935	+17
streamsApp	316	323	+7
visualizations	506	511	+5
total			+133

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/react-hooks	19	25	+6
@kbn/unified-data-table	107	109	+2
total			+8

Async chunks

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

id	before	after	diff
cloudSecurityPosture	503.7KB	504.9KB	+1.2KB
discover	810.8KB	811.7KB	+1003.0B
esqlDataGrid	174.0KB	175.2KB	+1.2KB
securitySolution	8.9MB	8.9MB	+1.2KB
slo	795.6KB	796.8KB	+1.2KB
total			+5.7KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
@kbn/react-hooks	0	2	+2

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
cloudSecurityPosture	16.9KB	16.9KB	-1.0B

Unknown metric groups

API count

id	before	after	diff
@kbn/react-hooks	20	26	+6
@kbn/unified-data-table	185	188	+3
total			+9

History

• 💔 Build #280309 failed d7f8482
• 💔 Build #280281 failed cfb8d1a
• 💔 Build #280178 failed 0f3277f
• 💔 Build #278284 failed 0abf153
• 💔 Build #278275 failed d55c701

cc @achyutjhunjhunwala