fix: bug - On initial load of Monitor page the charts are half-width

[gulshank0]

Which problem is this PR solving?

• Resolves [Bug]: On initial load of Monitor page the charts are half-width #3539

Description of the changes

Fix: Monitor page charts render at half-width on initial load (#3539)

=> Cause: The chart width is derived from the graphDivWrapper ref's offsetWidth. However, during the initial load, servicesLoading is true, so the component returns early with a <LoadingIndicator> — the <div ref={graphDivWrapper}> is never mounted. The mount useEffect calls updateDimensions(), but since the ref is null, graphWidth remains at its initial fallback value of 300 (half-width). A subsequent user interaction would trigger a re-render that finally measures the real container width.

=> Fix: Added a useEffect that calls updateDimensions() when servicesLoading becomes false, ensuring the graph container width is measured as soon as it is actually in the DOM.

Before change:

previ-graph.mp4

After the change:

after-graph.online-video-cutter.com.mp4

How was this change tested?

• npm run lint
• npm test
• pnpm run lint

Checklist

• I have read https://github.com/jaegertracing/jaeger/blob/main/CONTRIBUTING_GUIDELINES.md
• I have signed all commits
• I have added unit tests for the new functionality
• I have run lint and test steps successfully: make lint test

AI Usage in this PR (choose one)

See AI Usage Policy.

• None: No AI tools were used in creating this PR
• Light: AI provided minor assistance (formatting, simple suggestions)
• Moderate: AI helped with code generation or debugging specific parts
• Heavy: AI generated most or all of the code changes

[Copilot]

Pull request overview

Fixes a UI sizing bug on the Monitor page where service metric charts initially render at half-width due to measuring the graph container before it exists in the DOM.

Changes:

• Add an effect to re-measure graph container width once servicesLoading becomes false.
• Add a unit test intended to cover the post-loading dimension update path.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx	Triggers a width re-measure after the services list finishes loading so charts can render at the correct width.
packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js	Adds a test case for the loading→loaded transition path (but currently doesn’t assert width recalculation).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.60%. Comparing base (e7d1e62) to head (70391fe).
⚠️ Report is 43 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3555   +/-   ##
=======================================
  Coverage   88.60%   88.60%           
=======================================
  Files         299      299           
  Lines        9484     9487    +3     
  Branches     2420     2501   +81     
=======================================
+ Hits         8403     8406    +3     
  Misses       1078     1078           
  Partials        3        3           

☔ 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.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gulshank0]

@Parship12, @yurishkuro Please review it when you have time. Thanks.