guibranco / guibranco/logstream-ui

[FEATURE] Export panel in Search screen

Open
#161 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 **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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.