Skip to content

feat(alerts): merge signal + checks charts into one "Signal & evaluations" view#154

Merged
Makisuo merged 3 commits into
mainfrom
feat/alerts-merge-signal-and-checks-chart
Jun 30, 2026
Merged

feat(alerts): merge signal + checks charts into one "Signal & evaluations" view#154
Makisuo merged 3 commits into
mainfrom
feat/alerts-merge-signal-and-checks-chart

Conversation

@Makisuo

@Makisuo Makisuo commented Jun 30, 2026

Copy link
Copy Markdown
Collaborator

What

Replaces the two separate, duplicate-looking charts on the alert rule detail page with a single merged AlertSignalChart.

Before, the same metric was drawn twice across two tabs:

  • Overview → area chart — the continuous warehouse signal. With a grouped-by-service rule it stacked N translucent filled areas that blended into an unreadable "glittery" mush.
  • Checks → sparkline — the engine's discrete evaluations.

Same metric, same threshold, same window, so it read as a duplicate — even though the two sources are genuinely different (raw signal vs. the engine's decisions).

How

One chart, two layers on a shared time axis + one threshold:

  • Signal layer — single series → area with a comparator-aware threshold-split fill (--destructive above the line for gt/gte, below for lt/lte, so the fill encodes the breach region); multi-series → thin lines with no fill, which removes the glitter.
  • Decision layer — a thin per-bucket evaluation rail of status cells (breached / healthy / skipped), reusing the page's existing sticky-header timeline-strip idiom, with a small legend.
  • Incident windows shaded across both via ReferenceArea (matching the existing anomaly-timeseries-chart.tsx pattern).
  • raw_query rules — previously showed "preview unavailable"; now render a checks-driven chart + rail.

Per the agreed scope, the checks stat strip + audit table move into Overview and the separate Checks tab is removed (rule detail is now Overview + History). The now-redundant CheckHistorySparkline is deleted.

No new data fetching — chartData, checks, ruleIncidents, and the page time window were all already in scope on the detail page.

Files

  • new apps/web/src/components/alerts/alert-signal-chart.tsx
  • mod apps/web/src/routes/alerts/$ruleId.tsx
  • del apps/web/src/components/alerts/check-history-sparkline.tsx

Verification

  • bun typecheck clean across all packages.
  • Rendered the component in isolation (mock data, no API) across four scenarios — single-series threshold-split fill, multi-series thin lines (no glitter), raw_query checks-driven fallback, and lt/apdex breach-below fill — all correct, no console errors.

Reviewer notes

  • AlertPreviewChart is intentionally kept — it's still used by the create-form live hero (rule-live-chart-hero.tsx), which has no checks/incidents yet.
  • The merged chart uses a numeric (scale="time") X-axis so checks/incidents place by real time; warehouse bucket strings and check timestamps are both normalized to UTC ms via normalizeTimestampInput.
  • The end-to-end integration on a real rule (warehouse + checks + incidents together) wasn't browser-verified here because the local API/Clerk stack couldn't boot in this environment — worth a quick look on a rule with real incident/check data.

🤖 Generated with Claude Code


Open in Devin Review

…ions" view

The alert rule detail page drew the same metric twice across two tabs: the
Overview area chart (continuous warehouse signal, which turned into an
unreadable "glittery" mush of overlapping translucent areas when grouped by
service) and the Checks sparkline (the engine's discrete evaluations). Same
metric, same threshold, same window — they read as duplicates even though the
underlying sources differ (raw signal vs. the engine's decisions).

Replace both with a single AlertSignalChart that stacks the two layers on one
shared time axis and one threshold:

- Signal layer: single series renders an area with a comparator-aware
  threshold-split fill (destructive above the line for gt/gte, below for
  lt/lte); multi-series renders thin lines with no fill — killing the glitter.
- Decision layer: a thin per-bucket "evaluation rail" of status cells
  (breached / healthy / skipped), reusing the page's existing timeline-strip
  idiom, with a legend.
- Incident windows shaded across both via ReferenceArea.
- raw_query rules, which previously showed "preview unavailable", now render a
  checks-driven chart + rail.

Also fold the checks stat strip + audit table into Overview and drop the
separate Checks tab (rule detail is now Overview + History). The redundant
CheckHistorySparkline component is deleted.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@pullfrog

pullfrog Bot commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Your LLM provider API key was rejected. Rotate the key in your provider dashboard, then update the matching GitHub Actions secret.

Update repo secret → · Model settings → · Setup docs → · Ask in Discord →

Pullfrog  | ⚠️ this action is pinned to a commit SHA, which freezes the cleanup step — switch to @v0 or keep the SHA fresh with Dependabot | Rerun failed job ➔View workflow run | via Pullfrog | Using Claude Opus𝕏

devin-ai-integration[bot]

This comment was marked as resolved.

Folding the Checks tab into Overview dropped the checksResult error branch, so
a failed checks query silently resolved to [] and ChecksPanel rendered the
misleading "No checks in this window" empty state with no way to retry. Restore
the error UI (Failed to load checks + Retry) by wrapping the ChecksPanel render
in Result.builder(checksResult).onError(...), and re-add the refreshChecks atom
refresh that powers the retry.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
devin-ai-integration[bot]

This comment was marked as resolved.

The X-axis is explicitly drawn over [domain.min, domain.max], so the adaptive
tick-label decision (include date / seconds) should follow the axis width the
ticks actually cover, not the data range. Derive axisContext.rangeMs from the
domain; keep bucketSeconds data-derived for tick granularity.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@Makisuo Makisuo merged commit c80e594 into main Jun 30, 2026
5 of 7 checks passed
@Makisuo Makisuo deleted the feat/alerts-merge-signal-and-checks-chart branch June 30, 2026 23:10
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