guibranco / guibranco/logstream-ui

[FEATURE] Alert configuration screen

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.