Compaction & Memtable Flush Management Page

[ElioNeto]

Compaction & Memtable Flush Management Page

Create an Angular admin page for managing LSM-Tree compaction and memtable flushing.

Backend Endpoints (already exist)

POST /admin/flush        — Force memtable flush
POST /admin/compact      — Force compaction
GET  /stats              — Engine stats (includes compaction metrics)

UI Requirements

Compaction Panel

• Current Status: Display if compaction is running (from stats)
• Last Compaction Stats: files merged, bytes read/written, duration
• Trigger Button: Manual compaction trigger with confirmation
• Strategy Display: Show current compaction strategy (SizeTiered/Leveled)
• Threshold Config: Display current thresholds

Memtable Panel

• Current Usage: Gauge showing memtable bytes / max
• Record Count: Number of records in active memtable
• Flush Button: Manual flush trigger with confirmation
• Auto-flush Indicator: Show if memtable is near capacity

Statistics Integration

• SSTable count per level
• WAL size
• Disk usage
• Operation rates (gets/sets per second)

Component Structure

app/
  pages/
    compaction/
      compaction.component.ts
      compaction.component.html
      compaction.component.scss

Data Flow

1. On init: fetch GET /stats and display compaction metrics
2. Poll every 5s to refresh compaction status
3. On flush click: POST /admin/flush → refresh stats
4. On compact click: POST /admin/compact → show progress indicator → refresh stats

Acceptance Criteria

• Page shows compaction status (idle/running)
• Manual flush works and updates stats
• Manual compact works and shows completion
• Stats auto-refresh every 5 seconds
• Loading, error, and empty states handled
• Styled consistently with existing dashboard

Parent Epic

#290

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321) - commit closes via merge to main