feat: generate dynamic og image for status page#370
feat: generate dynamic og image for status page#370izadoesdev merged 3 commits intodatabuddy-analytics:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
|
@greptile review |
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@mezotv is attempting to deploy a commit to the Databuddy OSS Team on Vercel. A member of the Team first needs to authorize it. |
Greptile SummaryThis PR replaces the simple OG image for status pages with a richly redesigned one: it now renders the Databuddy logo, the organisation name, a styled status banner (operational / degraded / outage), and uptime bar charts for up to three monitors, with a "N more services" overflow indicator. A new Key changes:
Confidence Score: 5/5Safe to merge — no new critical issues introduced; the 0%-uptime bar colour bug from previous review is resolved. All remaining concerns (degraded per-monitor status icon, schema mismatch) were already flagged in earlier review rounds and are pre-existing API-layer issues unrelated to this PR. The new rendering logic is straightforward, error-safe (null data falls back cleanly), and the getBarColor function correctly handles the full 0–100 uptime range. No files require special attention. Important Files Changed
Sequence DiagramsequenceDiagram
participant Browser
participant Next.js OG Handler
participant publicRPCClient
participant statusPageRouter
Browser->>Next.js OG Handler: GET /status/[slug]/opengraph-image
Next.js OG Handler->>publicRPCClient: statusPage.getBySlug({ slug, days: 90 })
publicRPCClient->>statusPageRouter: POST /statusPage/getBySlug
statusPageRouter-->>publicRPCClient: { organization, overallStatus, monitors[] }
publicRPCClient-->>Next.js OG Handler: data (or null on error)
Note over Next.js OG Handler: Slice monitors to MAX_MONITORS=3<br/>Compute banner from overallStatus<br/>Render bar chart via getBarColor()
Next.js OG Handler-->>Browser: image/png (1200x630, revalidate=60s)
Reviews (2): Last reviewed commit: "fix: handle 0% uptime days as real data ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| function getBarColor(uptime: number, hasData: boolean): string { | ||
| if (!hasData) { | ||
| return THEME.secondary; | ||
| } | ||
| if (uptime >= 99.9) { | ||
| return "#10b981"; | ||
| } | ||
| if (uptime >= 99) { | ||
| return "#fcd34d"; | ||
| } | ||
| if (uptime >= 97) { | ||
| return "#fbbf24"; | ||
| } | ||
| if (uptime >= 95) { | ||
| return "#f59e0b"; | ||
| } | ||
| if (uptime >= 90) { | ||
| return "#f97316"; | ||
| } | ||
| return "#ef4444"; | ||
| } |
There was a problem hiding this comment.
getBarColor treats uptime_percentage === 0 as having no data because hasData is computed as day.uptime_percentage > 0. However, a day where every check failed is real data — it should render red (#ef4444) to indicate a complete outage, not THEME.secondary (the grey "no data" colour).
The API only returns rows for days that have at least one recorded check, so every entry in monitor.dailyData represents actual data. Days with no data are already handled separately by the Array.from({ length: Math.max(0, BAR_DAYS - barDays.length) }) padding below. Passing uptime > 0 as hasData therefore incorrectly hides 0 % outage days.
| function getBarColor(uptime: number, hasData: boolean): string { | |
| if (!hasData) { | |
| return THEME.secondary; | |
| } | |
| if (uptime >= 99.9) { | |
| return "#10b981"; | |
| } | |
| if (uptime >= 99) { | |
| return "#fcd34d"; | |
| } | |
| if (uptime >= 97) { | |
| return "#fbbf24"; | |
| } | |
| if (uptime >= 95) { | |
| return "#f59e0b"; | |
| } | |
| if (uptime >= 90) { | |
| return "#f97316"; | |
| } | |
| return "#ef4444"; | |
| } | |
| function getBarColor(uptime: number): string { | |
| if (uptime >= 99.9) { | |
| return "#10b981"; | |
| } | |
| if (uptime >= 99) { | |
| return "#fcd34d"; | |
| } | |
| if (uptime >= 97) { | |
| return "#fbbf24"; | |
| } | |
| if (uptime >= 95) { | |
| return "#f59e0b"; | |
| } | |
| if (uptime >= 90) { | |
| return "#f97316"; | |
| } | |
| return "#ef4444"; | |
| } |
And update the call site accordingly:
backgroundColor: getBarColor(day.uptime_percentage),| {monitorStatus === "degraded" ? ( | ||
| <path | ||
| d="M12 7v6M12 16v1" | ||
| fill="none" | ||
| stroke="#fff" | ||
| strokeLinecap="round" | ||
| strokeWidth="2.5" | ||
| /> | ||
| ) : monitorStatus === "down" ? ( | ||
| <path | ||
| d="M8 8l8 8M16 8l-8 8" | ||
| fill="none" | ||
| stroke="#fff" | ||
| strokeLinecap="round" | ||
| strokeWidth="2.5" | ||
| /> |
There was a problem hiding this comment.
"degraded" monitor status is never reached
The RPC output schema for individual monitors only allows currentStatus: z.enum(["up", "down", "unknown"]) — "degraded" is intentionally excluded (see packages/rpc/src/routers/status-page.ts line 31). As a result, the monitorStatus === "degraded" branch for the per-monitor status icon will never render. The fallback else branch (the checkmark) is displayed for both "up" and any unrecognised value.
If the intent is to display a degraded icon when a monitor is partially failing, the monitorSchema in the router would need to be updated to include "degraded" first.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2 participants
Description
Adds a clean and simple og image to the status/:slug routes
Checklist