guibranco / guibranco/logstream-ui
[FEATURE] Log forwarders status screen
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 15m
- Merged PRs (30d)
- 49
Description
## Summary
Add a **Forwarders** screen showing the status, queue depth, and recent error rate of each configured log forwarder (Loki, Seq, generic webhook), powered by the new `GET /api/forwarders/status` endpoint.
> **Depends on:** [`[FEATURE] Log forwarding to external systems (Loki, Seq, webhook)`](https://github.com/guibranco/logstream-server/issues) in `guibranco/logstream-server`
## Motivation
Once log forwarding is enabled, operators need visibility into whether entries are being delivered successfully, whether the queue is backing up, and which forwarders are failing.
## Proposed layout
```
┌─────────────────────────────────────────────────────────────────┐
│ Forwarders │
├──────────────────┬────────┬──────────┬──────────────────────────┤
│ Name │ Type │ Queue │ Status │
├──────────────────┼────────┼──────────┼──────────────────────────┤
│ Loki prod │ Loki │ 0 │ ✅ Healthy (0 errors/min) │
│ Slack security │ Webhook│ 12 │ ⚠️ Degraded (3 errors/min)│
│ Seq staging │ Seq │ 0 │ ✅ Healthy │
└──────────────────┴────────┴──────────┴──────────────────────────┘
```
### Forwarder detail card (expandable)
Clicking a row expands it:
```
Endpoint: https://loki.example.com/loki/api/v1/push
Scope: billing-api (all levels)
Sent (1h): 4,821 entries
Failed (1h): 0
Last success: 12 seconds ago
Last error: —
Retry queue: 0
```
For degraded forwarders, show the last error message:
```
Last error: 2026-04-17T16:44:00 — HTTP 503 Service Unavailable
```
## Files to create
- `src/hooks/useForwarders.ts` — `GET /api/forwarders/status`, auto-refresh every 15 s
- `src/screens/ForwardersScreen.tsx` — main screen with table and expandable detail
- `src/components/forwarders/ForwarderStatusBadge.tsx` — Healthy / Degraded / Error pill
- `src/components/forwarders/ForwarderDetailRow.tsx` — expanded detail section
## UX details
- Auto-refresh every 15 seconds; show spinner during refresh
- Queue depth \> 100 shows an **amber** badge; \> 1000 shows **red**
- Error rate \> 0 shows **amber**; error rate \> 10/min shows **red**
- Forwarders tab only visible when `GET /api/info` returns `features.forwarding: true`
## Acceptance criteria
- [ ] Forwarders tab visible when feature is enabled
- [ ] Table lists all forwarders with type, queue depth, and status
- [ ] Status badge is Healthy / Degraded / Error with correct colours
- [ ] Expandable row shows endpoint, scope, sent/failed counts, last error
- [ ] Queue depth badge changes colour at thresholds
- [ ] Auto-refresh every 15 s
- [ ] Empty / not-configured state handled gracefully
Contributor guide
Research direction
Start by reading the existing screen and navigation patterns, then inspect the listed hook and component paths alongside GET /api/forwarders/status and GET /api/info. The work is done when the feature-gated Forwarders screen renders statuses and details, applies the queue and error thresholds, refreshes every 15 seconds, and handles an empty state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript, vite
- Domain
- api, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100