[Logs] Amend lazy imports in logs_shared plugin

[Kerry350]

Summary

As part of #161151 a selection of component imports were made lazy and wrapped with a dynamic wrapper component. Unfortunately some of these imports did not adhere to the rules of React's lazy imports (needing a default export, no named imports etc), and the dynamic wrapper seems to have suppressed error information that would have been available via using lazy directly.

Only the anomaly and categories log entry examples (in the expanded rows) were affected by this, as the stream and embeddable import from locations that were backed by a default export (and those top level components don't import from that particular index file lower in the hierarchy). For imports that weren't backed by a default I've added them, and where necessary moved components to new files if needed (since it's one default per file).

Also open to suggestions of ways we can alter the <dynamic /> component and maintain the error safety 🤔

Examples

Without these changes:

Warning using lazy directly without the dynamic wrapper:

Testing

• Check all instances render correctly (stream, embeddable uses, and ML page log entry examples).

[elasticmachine]

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

[ghost]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[weltenwort]

This seems to fix it, thank you.

About making the dynamic import type-safe, wouldn't narrowing down the LoadableComponent type do the trick?

type LoadableComponent = () => Promise<{
  default: React.ComponentType<any>;
}>;

[Kerry350]

@weltenwort

Thanks for the review 🙏

Your suggestion for the stricter type also works, thanks. I thought I'd tried a similar variation yesterday, but apparently not 😅

I had to tweak one getDerivedStateFromProps signature to match the type, but otherwise looks all good.

Hopefully the latest main merge gets rid of all the random test failures.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: ad94c3b

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
logsShared	196	198	+2

Async chunks

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

id	before	after	diff
logsShared	56.8KB	54.6KB	-2.2KB

Page load bundle

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

id	before	after	diff
logsShared	219.3KB	219.4KB	+12.0B

Unknown metric groups

async chunk count

id	before	after	diff
logsShared	8	9	+1

ESLint disabled line counts

id	before	after	diff
logsShared	6	15	+9

Total ESLint disabled count

id	before	after	diff
logsShared	9	18	+9

History

• 💔 Build #151118 failed 3accbc8

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

cc @Kerry350

[weltenwort]

Interesting how the async chunk size actually goes down without the page load bundle increasing 🤔 the mysteries of webpack... 🪄

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.10

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation