feat: add Logs button to status console for degraded/unhealthy components (OpenSearch, Docling, Langflow)

[yogichipalkatti]

What was built
New file: frontend/app/api/queries/useComponentLogsQuery.ts
A TanStack Query hook that fetches GET /api/status/{component}/logs?tail=100. The enabled flag is gated on component !== null, so the query is lazy — it only fires when the modal is opened. Query key is ["component-logs", component, tail].

Modified: frontend/app/api/queries/useConsoleStatusQuery.ts
Added last_error?: string | null to the ComponentStatus interface to match the backend's #2178 addition. This is the signal used to decide whether to show the Logs button.

Modified: frontend/components/console-status-panel.tsx
ComponentCard (lines 248–384):

Destructures last_error from the component prop
showLogsButton = last_error != null — exactly matches backend's contract: button is visible only when there's a recorded failure
A Logs button (ScrollText icon + "Logs" text) appears inside the expanded section
Clicking it opens the ComponentLogsModal — the modal is only rendered when showLogsButton is true
ComponentLogsModal (lines 128–240):

Receives component (API name like "langflow") and displayName (display label)
Passes open ? component : null to useComponentLogsQuery so the fetch fires on open and suspends when closed
Shows 5 skeleton pulses while loading, an error message on failure, and per-entry rows with colored level badges (error→red, warning→amber, info→sky), a localized timestamp, the message, and optional detail in monospace below
Entry count footer + a Refresh button in the header
Styled dark (bg-zinc-900) to match the rest of the status panel
Backend integration: The Next.js wildcard proxy (/api/[...path]) forwards /api/status/langflow/logs → /v1/status/langflow/logs automatically — no new proxy configuration needed.

What was added
The Logs button
A Logs button was added to each component card in the Console Status panel. It appears inside the expanded (chevron-down) section of a component card — so the user first clicks the card to expand it, and the Logs button is shown at the bottom of that expanded area.

Where it shows up — and the key condition
The button does not show for every component. It is gated by a single condition read from the backend:

const showLogsButton = last_error != null;

last_error is a field the backend now returns on every ComponentStatus object (added in #2178). The backend sets it to a non-null string — containing exception type, message, and target URL — whenever the most recent health-check for that component failed or timed out. It is null when the component is healthy.

In practice this means:

Component Logs button visible?
Langflow ✅ Yes — if its last health-check failed/degraded
OpenSearch ✅ Yes — if its last health-check failed
Docling ✅ Yes — if its last health-check failed
OpenRAG (the backend itself) ✅ Yes — same rule
Any component currently healthy ❌ No — last_error is null, button is hidden

What happens when you click Logs
A modal opens titled "{Display Name} — Logs". It lazily fetches GET /api/status/{component}/logs?tail=100 only when the modal is opened. Inside, each log entry is displayed as a row showing:

A colored level badge — error/critical in red, warning in amber, info in sky blue
A timestamp (localized time)
The message string
An optional detail line in monospace below (contains exception type and target URL, with Bearer tokens redacted by the backend)

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 2140ba57-af85-4a4e-9f5f-7b05694d432f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

React Doctor found 1 new issue in 1 file · 1 warning · score 88 / 100 (Great) · 0 fixed · vs feat/openrag-status-page

1 warning

components/console-status-panel.tsx

• ⚠️ L206 Array index used as a key no-array-index-as-key

_{Reviewed by React Doctor for commit c6233b3. See inline comments for fixes.}

[github-actions]

Build successful! ✅
Deploying docs draft.
Deploy successful! View draft

[github-actions]

React Doctor · react-doctor/no-array-index-as-key (warning)

Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "idx".

Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.

Docs