guibranco / guibranco/logstream-ui

[FEATURE] Dashboard / overview screen

Open
#159 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 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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.