guibranco / guibranco/logstream-ui
[FEATURE] Dashboard / overview screen
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 15m
- Merged PRs (30d)
- 49
Description
## Summary
Add a **Dashboard** screen as the default landing page, showing an at-a-glance summary of log activity powered by the new `GET /api/stats` endpoint on the server.
> **Depends on:** [`[FEATURE] Metrics and statistics endpoint`](https://github.com/guibranco/logstream-server/issues) in `guibranco/logstream-server`
## Motivation
Currently the app opens directly on the live log stream. New users and on-call engineers need a quick overview β are there more errors than usual? Which application is the noisiest right now? β without wading through raw log entries.
## Proposed layout
```
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β Dashboard Period: [15m] [1h] [6h] [24h] β
βββββββββββββββββββββββββ¬ββββββββββββββββββββββββ¬ββββββββββββββββββ€
β Total entries β Error rate β Ingestion rate β
β 9,342 β 42 (0.4%) β 155 / min β
βββββββββββββββββββββββββ΄ββββββββββββββββββββββββ΄ββββββββββββββββββ€
β By level (bar chart) β By source β
β ββββββββββββ debug 8,000 β HTTP 4,842 UDP 4,500 β
β ββββ info 1,200 β β
β β warning 100 β Top categories β
β β error 42 β payments 980 β
β β auth 412 β
β By application (bar chart) β jobs 201 β
β billing-api ββββ 3,100 β β
β auth-service ββββ 7,142 β β
ββββββββββββββββββββββββββββββββββ΄βββββββββββββββββββββββββββββββββ
```
## Files to create / modify
- `src/hooks/useStats.ts` β `GET /api/stats?period=1h`, queryKey `['stats', period]`, refresh every 30 s
- `src/screens/DashboardScreen.tsx` β assembles all stat cards and charts
- `src/components/dashboard/StatCard.tsx` β single metric tile (value, label, optional delta vs previous period)
- `src/components/dashboard/LevelBarChart.tsx` β horizontal bar chart of entries by level using `recharts`
- `src/components/dashboard/AppKeyChart.tsx` β horizontal bar chart of entries by app_key
- `src/components/dashboard/PeriodSelector.tsx` β pill group for 15m / 1h / 6h / 24h / 7d
- `src/components/dashboard/SourceBadges.tsx` β HTTP vs UDP ingestion counts
- Header navigation β **Dashboard** becomes the default (first) tab
## UX details
- Period selector is sticky β changing it refreshes all cards simultaneously
- Error rate card turns **red** when above 1%, **amber** when above 0.1%
- Auto-refresh every 30 seconds; show a subtle `Last updated: Xs ago` label
- Loading state: skeleton cards matching the layout
- Empty state (no logs yet): friendly onboarding message with a link to the docs
## Tech constraints
- `recharts` (already a dependency) for bar charts
- No new npm dependencies
- TanStack Query v5 for server state
- Tailwind utility classes only
## Acceptance criteria
- [ ] Dashboard is the default landing screen (first tab)
- [ ] Period selector (15m / 1h / 6h / 24h / 7d) filters all cards
- [ ] Stat cards show total, error rate, ingestion rate
- [ ] Level bar chart renders correctly
- [ ] App-key bar chart renders correctly
- [ ] Source badges show HTTP vs UDP split
- [ ] Top categories list rendered
- [ ] Auto-refresh every 30 seconds
- [ ] Loading skeleton shown while fetching
- [ ] Error state handled gracefully (server unreachable)
- [ ] When `GET /api/info` returns `features.retention: false` or `features.client_management: false`, corresponding cards are hidden
Contributor guide
Research direction
Start by inspecting the existing screen and header navigation, then read the proposed src/hooks/useStats.ts and src/screens/DashboardScreen.tsx entry points. Review the dashboard component files and the GET /api/stats contract before implementing. Done means the listed cards, charts, states, period filters, refresh behavior, navigation, and feature-based visibility meet the acceptance criteria.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- api, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100