guibranco / guibranco/logstream-ui
[FEATURE] Export panel in Search screen
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 15m
- Merged PRs (30d)
- 49
Description
## Summary
Add an **Export** button to the Search screen that triggers a streamed download of the current search results via `GET /api/export`, supporting `ndjson`, `csv`, and `json` formats with optional gzip compression.
> **Depends on:** [`[FEATURE] Log export and archival`](https://github.com/guibranco/logstream-server/issues) in `guibranco/logstream-server`
## Motivation
Operators and compliance teams need to extract filtered log sets for offline analysis, audit evidence, or feeding into external tools (Splunk, BigQuery). Doing this currently requires direct API access.
## Proposed UI
An **Export** button appears in the Search screen toolbar alongside the existing filter controls. Clicking it opens a small popover/panel:
```
βββββββββββββββββββββββββββββββββββββββ
β Export current results β
β β
β Format: β ndjson β csv β json β
β Compress: [β] gzip β
β β
β Scope: applying 4 active filters β
β β οΈ Large exports may take a moment β
β β
β [Cancel] [Download] β
βββββββββββββββββββββββββββββββββββββββ
```
Clicking **Download** calls `GET /api/export` with the current filter state and triggers a browser file download. The button shows a spinner and is disabled while the download is in progress.
## Files to create / modify
- `src/components/search/ExportPanel.tsx` β popover with format/compress options and download button
- `src/hooks/useExport.ts` β builds the export URL from current filters, triggers `window.location.href` or a `fetch` + Blob download
- `src/screens/SearchScreen.tsx` β add Export button to toolbar
## UX details
- The export inherits **all active filters** from the current search state β app_key, level, date range, etc.
- Show the number of active filters so the user knows the export is scoped: *"Applies 3 active filters"*
- File name suggested as `logs-{date_from}-to-{date_to}.{format}` or `logs-{timestamp}.{format}`
- When no date range is set, show a warning: *"No date range selected β this may export a very large file"*
## Acceptance criteria
- [ ] Export button visible in Search screen toolbar
- [ ] Format selector (ndjson / csv / json)
- [ ] Compress toggle (gzip)
- [ ] Active filter count displayed in panel
- [ ] Warning shown when no date range set
- [ ] Download triggers correctly with all current filters
- [ ] Button disabled and spinner shown during download
- [ ] Error shown if export request fails
Contributor guide
Research direction
Start by reading src/screens/SearchScreen.tsx to understand the existing toolbar and filter state, then inspect src/hooks/useExport.ts and src/components/search/ExportPanel.tsx. Verify how the current filters map to GET /api/export and confirm the server dependency before testing the UI flow. Done means all listed acceptance criteria work, including scoped downloads, progress state, warnings, and errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- api, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 66/100