Explore:Traces Empty state

[TackAdam]

Description

Explore:Traces Empty state
Add error handling for missing fields by informing user.
Disabled the span-id re-direction if it would lead to a broken page.

Issues Resolved

Screenshot

SpanId disabled:

Fly-out with info:

Testing the changes

Changelog

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

ℹ️ Manual Changeset Creation Reminder

Please ensure manual commit for changeset file 10724.yml under folder changelogs/fragments to complete this PR.

If you want to use the available OpenSearch Changeset Bot App to avoid manual creation of changeset file you can install it in your forked repository following this link.

For more information about formatting of changeset files, please visit OpenSearch Auto Changeset and Release Notes Tool.

[codecov]

Codecov Report

❌ Patch coverage is 80.15873% with 25 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.36%. Comparing base (9850413) to head (106d0f6).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...lication/pages/traces/trace_details/trace_view.tsx	55.55%	7 Missing and 9 partials ⚠️
...ins/explore/public/utils/trace_field_validation.ts	90.12%	4 Missing and 4 partials ⚠️
.../data_table/table_cell/trace_utils/trace_utils.tsx	85.71%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10724      +/-   ##
==========================================
+ Coverage   60.34%   60.36%   +0.01%     
==========================================
  Files        4462     4463       +1     
  Lines      119495   119589      +94     
  Branches    19748    19771      +23     
==========================================
+ Hits        72109    72189      +80     
- Misses      42383    42391       +8     
- Partials     5003     5009       +6     

Flag	Coverage Δ
Linux_1	26.58% <ø> (ø)
Linux_2	38.82% <ø> (ø)
Linux_3	38.89% <ø> (+<0.01%)	⬆️
Linux_4	33.07% <80.15%> (+0.05%)	⬆️
Windows_1	26.60% <ø> (ø)
Windows_2	38.79% <ø> (ø)
Windows_3	38.90% <ø> (ø)
Windows_4	33.07% <80.15%> (+0.05%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[paulstn]

Nit: doesn't have to be handled now, but personally, I think a good way of cutting down large UI components and making sure that they are a lot more readable is to separate out React UI components by what they would be semantically, just so that I could look at something and go "oh those are the headers, that is that thing, etc". Even with functions that are put into props, putting those in functions defined up above or in util files makes this a lot more readable.

This might not make sense in all cases so take this with a grain of salt.

[paulstn]

I've noticed that there is a repetitive pattern here with extract -> check -> push. We could try and make this a bit more maintainable and readable.

(Completely optional suggestion):
We have an array of each of these fields we are checking for - this array could contain the name, the path we expect to find it at (to handle nested values), anything else needed.
Then, we have this function work to perform validation after on that array.

A potential downside of doing my suggestion is that each field we check for is abstract enough that all of the various options inside of the array that we put down could grow to be larger than just doing this manually (which could be why you've done it this way). I haven't fully checked but take a look and see if this could help.