Skip to content

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

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

fix(monitoring): monitoring rendering of low traffic app#2938
lmillie-qovery wants to merge 7 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. Idle services now show a "No traffic in this period" state instead of a flat 0 line that looked like a metrics-pipeline outage.

  • Removed the > 0 PromQL filter so zero-rate samples survive and render as idle rather than missing.
  • Failed queries show "Unable to load metrics"; a "Partial data" badge appears when some series fail but the chart still has data.
  • Duration percentiles with no observations render as gaps instead of 0ms; tooltips show < 0.01 req/s for low non-zero rates.

Written for commit 002b5e3. 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 9661035

Command Status Duration Result
nx run console:build --parallel=3 --configurati... ✅ Succeeded 1m 2s View ↗
nx affected --target=test --parallel=3 --config... ✅ Succeeded 58s View ↗
nx affected --target=lint --parallel=3 ✅ Succeeded 2m 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-07 08:56:27 UTC

@codecov

codecov Bot commented Sep 4, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 20.45455% with 70 lines in your changes missing coverage. Please review.
✅ Project coverage is 49.08%. Comparing base (cf23dce) to head (002b5e3).
⚠️ Report is 2 commits behind head on staging.

Files with missing lines Patch % Lines
...-duration-chart/network-request-duration-chart.tsx 0.00% 18 Missing ⚠️
...-request-size-chart/network-request-size-chart.tsx 0.00% 16 Missing ⚠️
...uest-status-chart/network-request-status-chart.tsx 0.00% 12 Missing ⚠️
...n-chart/private-network-request-duration-chart.tsx 0.00% 9 Missing ⚠️
...-size-chart/private-network-request-size-chart.tsx 0.00% 8 Missing ⚠️
...tus-chart/private-network-request-status-chart.tsx 0.00% 5 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%   49.08%   -1.08%     
===========================================
  Files          864     1241     +377     
  Lines        21614    27000    +5386     
  Branches      6580     8074    +1494     
===========================================
+ Hits         10843    13254    +2411     
- Misses        8904    11536    +2632     
- Partials      1867     2210     +343     
Flag Coverage Δ
unittests 49.08% <20.45%> (-1.08%) ⬇️

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

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

1 issue found across 6 files (changes from recent commits).

Confidence score: 3/5

  • network-request-size-chart.tsx hides valid all-zero samples by treating them as missing data, so users see “No traffic in this period” instead of an accurate zero-valued chart; use a data-presence check that accepts finite zero values.
Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="libs/domains/observability/feature/src/lib/service/service-dashboard/network-request-size-chart/network-request-size-chart.tsx">

<violation number="1" location="libs/domains/observability/feature/src/lib/service/service-dashboard/network-request-size-chart/network-request-size-chart.tsx:246">
P1: When every returned sample is zero, `hasPositiveMetricData` returns false, so the chart is replaced by “No traffic in this period” instead of rendering the real zero line. Use a data-presence check that treats finite zero samples as data.</violation>
</file>

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

Re-trigger cubic

isErrorMetricsEnvoyRequestSize,
httpRouteName,
])
const hasTraffic = hasPositiveMetricData(chartData)

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.

P1: When every returned sample is zero, hasPositiveMetricData returns false, so the chart is replaced by “No traffic in this period” instead of rendering the real zero line. Use a data-presence check that treats finite zero samples as data.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At libs/domains/observability/feature/src/lib/service/service-dashboard/network-request-size-chart/network-request-size-chart.tsx, line 246:

<comment>When every returned sample is zero, `hasPositiveMetricData` returns false, so the chart is replaced by “No traffic in this period” instead of rendering the real zero line. Use a data-presence check that treats finite zero samples as data.</comment>

<file context>
@@ -243,14 +243,15 @@ export function NetworkRequestSizeChart({
   ])
-  const hasError = chartData.length === 0 ? anyError : allError
-  const hasPartialError = chartData.length > 0 && anyError && !allError
+  const hasTraffic = hasPositiveMetricData(chartData)
+  const hasError = hasTraffic ? allError : anyError
+  const hasPartialError = hasTraffic && anyError && !allError
</file context>
Suggested change
const hasTraffic = hasPositiveMetricData(chartData)
const hasTraffic = chartData.length > 0

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.

2 participants