Skip to content

fix(monitoring): monitoring rendering of low traffic app - #2938

Open
lmillie-qovery wants to merge 5 commits into
stagingfrom
fix/monitoring-graph-network
Open

fix(monitoring): monitoring rendering of low traffic app#2938
lmillie-qovery wants to merge 5 commits into
stagingfrom
fix/monitoring-graph-network

Conversation

@lmillie-qovery

@lmillie-qovery lmillie-qovery commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

Summary

Fixes the network monitoring charts (status/size/duration, both public envoy/nginx and private beyla
variants) rendering as broken or incomplete during low/zero-traffic periods.

  • Removed the > 0 PromQL filter on request-rate/size queries in network-request-status-chart.tsx,
    network-request-size-chart.tsx, and their private-* counterparts. The filter was dropping the entire
    series at a zero rate instead of letting it render as a real 0, which made an idle service look
    identical to a metrics-pipeline outage.
  • Added hasError/emptyLabel support to Chart.Container (libs/shared/ui) and threaded it through
    LocalChart, so callers can now distinguish a genuinely failed query (new "Unable to load metrics"
    state, driven by React Query's isError) from a successfully-empty one. All 6 network charts now pass
    emptyLabel="No traffic in this period" for the latter.
  • Added getSeriesKeys (util-chart/get-series-keys.ts + spec) and pass it as excludeKeys to
    addTimeRangePadding in all 6 network charts, so gaps between data points fill with 0 instead of
    null. Previously a gap rendered as a visual break regardless of cause, while a timestamp where
    Thanos happened to return a sample rendered as a point — producing an inconsistent, flickering line
    even during genuinely idle stretches.

Test plan

  • yarn nx run domains-observability-feature:lint / shared-ui:lint — 0 errors
  • yarn nx run domains-observability-feature:test / shared-ui:test — all suites pass (366 / 454
    tests respectively), including new get-series-keys.spec.ts
  • yarn format — no diffs
  • Manual check on a low-traffic service in the console UI (status/size/duration charts show a
    continuous line, flat at 0 during idle, real values during traffic; a simulated query failure shows
    the new "Unable to load metrics" state)

Screenshot:
Before:
image
After:
image


Summary by cubic

Fixes the network monitoring charts (status/size/duration, public envoy/nginx and private beyla variants) rendering as broken or incomplete during low- or zero-traffic periods.

  • Removed the > 0 PromQL filter so idle services render a flat 0 line instead of looking like a metrics-pipeline outage.
  • Kept null padding for gaps so a missing sample shows as a visible break rather than a false idle flatline.
  • Added hasError/emptyLabel to Chart.Container so a failed query shows "Unable to load metrics" and an empty query shows "No traffic in this period".
  • Added a "Partial data" badge when one series fails but the chart still has data, so missing lines aren't mistaken for idle traffic.

Written for commit 15f1bdc. Summary will update on new commits.

Review in cubic

@nx-cloud

nx-cloud Bot commented Sep 4, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 15f1bdc

Command Status Duration Result
nx run console:build --parallel=3 --configurati... ✅ Succeeded 1m 4s View ↗
nx affected --target=test --parallel=3 --config... ✅ Succeeded 1m 17s View ↗
nx affected --target=lint --parallel=3 ✅ Succeeded 3m 31s View ↗
nx-cloud record -- yarn nx format:check ✅ Succeeded 7s View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-09-04 15:05:10 UTC

@codecov

codecov Bot commented Sep 4, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 7.24638% with 64 lines in your changes missing coverage. Please review.
✅ Project coverage is 50.04%. Comparing base (cf23dce) to head (15f1bdc).
⚠️ Report is 1 commits behind head on staging.

Files with missing lines Patch % Lines
...-duration-chart/network-request-duration-chart.tsx 0.00% 17 Missing ⚠️
...-request-size-chart/network-request-size-chart.tsx 0.00% 15 Missing ⚠️
...uest-status-chart/network-request-status-chart.tsx 0.00% 11 Missing ⚠️
...n-chart/private-network-request-duration-chart.tsx 0.00% 8 Missing ⚠️
...-size-chart/private-network-request-size-chart.tsx 0.00% 7 Missing ⚠️
...tus-chart/private-network-request-status-chart.tsx 0.00% 4 Missing ⚠️
libs/shared/ui/src/lib/components/chart/chart.tsx 66.66% 0 Missing and 2 partials ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           staging    #2938      +/-   ##
===========================================
- Coverage    50.16%   50.04%   -0.13%     
===========================================
  Files          864     1238     +374     
  Lines        21614    26797    +5183     
  Branches      6580     8010    +1430     
===========================================
+ Hits         10843    13410    +2567     
- Misses        8904    11145    +2241     
- Partials      1867     2242     +375     
Flag Coverage Δ
unittests 50.04% <7.24%> (-0.13%) ⬇️

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

☔ View full report in Codecov by Harness.
📢 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.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 10 files

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread libs/domains/observability/feature/src/lib/util-chart/get-series-keys.ts Outdated
Signed-off-by: Laura Millie <lmillie@qovery.com>
@lmillie-qovery
lmillie-qovery force-pushed the fix/monitoring-graph-network branch from 945b817 to 6f2cad4 Compare September 4, 2026 11:13
@lmillie-qovery lmillie-qovery changed the title fix monitoring rendering of low traffic app fix(monitoring): monitoring rendering of low traffic app Sep 4, 2026

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 8 files (changes from recent commits).

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 7 files (changes from recent commits).

Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 6 files (changes from recent commits).

Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant