guibranco / guibranco/logstream-ui

[FEATURE] Log forwarders status screen

Open
#167 0 comments 0 reactions 0 assignees View on GitHub
✨ feature enhancement good first issue hacktoberfest help wanted integration
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.