guibranco / guibranco/logstream-ui
[FEATURE] Alert configuration screen
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 15m
- Merged PRs (30d)
- 49
Description
## Summary
Add an **Alerts** screen where operators can view, create, edit, and delete webhook alert rules, and fire test webhooks, without editing `alerts.json` on the server directly.
> **Depends on:** [`[FEATURE] Threshold alerts via webhook`](https://github.com/guibranco/logstream-server/issues) in `guibranco/logstream-server`
## Motivation
Alert rules are currently configured by hand-editing a JSON file on the server. Non-technical operators and on-call engineers need a UI to manage them safely.
## Proposed layout
```
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Alerts [+ New Alert] β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Name Trigger Webhook Actions β
β billing-errors error > 5 in 5 min Slack β π π β
β pii-pattern regex match in 1 min Security β π π β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
```
The π button fires `POST /api/alerts/test/{name}` and shows a success/failure toast.
## Files to create
- `src/hooks/useAlerts.ts` β CRUD hooks for `/api/alerts` collection
- `src/screens/AlertsScreen.tsx` β main screen
- `src/components/alerts/AlertTable.tsx` β table with name, trigger summary, webhook host, actions
- `src/components/alerts/AlertForm.tsx` β slide-in drawer with all fields
- `src/components/alerts/TestWebhookButton.tsx` β fires test and shows inline result
## Form fields
| Field | Component | Notes |
|-------|-----------|-------|
| Name | `` text | Slug, required |
| App key | `` text | Optional filter |
| Level | `` | debug / info / notice / warning / error / critical |
| Message regex | `` text | Optional PCRE |
| Threshold | `` number | Min 1 |
| Window (minutes) | `` number | Min 1 |
| Webhook URL | `` url | Required |
| Cooldown (minutes) | `` number | Prevent repeat firing |
## Acceptance criteria
- [ ] Alerts tab visible in navigation
- [ ] List all configured alerts
- [ ] Create alert via form drawer
- [ ] Edit alert via form drawer (pre-filled)
- [ ] Delete alert with inline confirmation
- [ ] Test webhook button fires `POST /api/alerts/test/{name}` and shows result
- [ ] Form validates required fields before submitting
- [ ] API errors shown inline
- [ ] Empty state: helpful message when no alerts configured
Contributor guide
Research direction
Start by reviewing the existing React/Vite navigation and API patterns, then create the listed files: useAlerts.ts, AlertsScreen.tsx, AlertTable.tsx, AlertForm.tsx, and TestWebhookButton.tsx. Use the /api/alerts collection and POST /api/alerts/test/{name} as the integration points. Done means the navigation entry, CRUD flow, validation, inline errors, empty state, and test-webhook result all work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript, vite
- Domain
- api, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100