Alertmanager UI rewrite analysis

alertmanager-ui-rewrite.md

Estimation generated by Claude Sonnet 4.5 Thinking model, instructed to:

• analyze Alertmanager UI code
• analyze Prometheus UI code
• Estimate lines of code needed to migrate from current implementation to something similar to prometheus code structure and quality

Current Codebase Analysis

Existing Elm UI (ui/app/)

• 49 Elm source files (~8,500-9,500 lines total)
• 4 Elm test files (~400-500 lines)
• Key features implemented:
  • Alerts page with filtering, grouping, silencing
  • Silences list (Active/Pending/Expired tabs)
  • Silence form (create/edit) with datetime picker
  • Silence detail view
  • Status page (cluster info, config)
  • Settings page
  • Advanced filtering with label matchers (=, !=, =, !)
  • API integration for all CRUD operations

Existing Mantine UI (ui/mantine-ui/)

• 11 TypeScript/TSX files (~100 lines total)
• Currently just a skeleton with placeholder pages

Migration Estimate to React + TypeScript

Production Code: ~5,500-6,500 lines

Core Infrastructure (800-1,000 lines)

• App routing & layout (150-200 lines)
• API client & hooks (300-400 lines)
• Type definitions (200-250 lines)
• Utility functions (150-200 lines)

Pages (1,200-1,500 lines)

• Alerts page (400-500 lines) - list, grouping, filtering
• Silences list page (300-400 lines) - tabs, CRUD
• Silence form page (350-450 lines) - create/edit with validation
• Silence detail page (100-150 lines)
• Status page (200-250 lines) - version, cluster, config
• Settings page (50-100 lines)

Components (2,500-3,000 lines)

• FilterBar component (300-400 lines) - matcher input/display
• GroupBar component (200-250 lines)
• ReceiverBar component (150-200 lines)
• AlertCard component (250-350 lines) - individual alert display
• SilenceCard component (200-250 lines)
• DateTimePicker (300-400 lines) - custom picker or wrapper
• Dialog/Modal components (150-200 lines)
• Label/Matcher display (200-250 lines)
• Navigation header (150-200 lines)
• Form components (200-300 lines) - validated inputs
• Shared components (400-500 lines) - buttons, badges, loading states

State Management & Hooks (1,000-1,200 lines)

• Custom hooks (600-800 lines) - useAlerts, useSilences, useFilters, useAPI
• Context providers (200-250 lines) - settings, filters
• URL state management (200-250 lines)

Test Code: ~2,500-3,000 lines

Unit Tests (1,500-1,800 lines)

• Component tests (800-1,000 lines)
• Hook tests (400-500 lines)
• Utility function tests (300-400 lines)

Integration Tests (1,000-1,200 lines)

• Page-level tests (600-700 lines)
• API integration tests (400-500 lines)

Summary

Category	Lines of Code
Production Code	5,500-6,500
Test Code	2,500-3,000
Total	8,000-9,500

Notes

1. Reduced LOC vs Elm: React code will be ~30-40% less than Elm due to:

   • No need for separate encoders/decoders (using TypeScript interfaces)
   • More concise syntax
   • Reusable Mantine components

2. Similar to Prometheus UI: Following Prometheus patterns would mean:

   • Using React Query or SWR for API state
   • Bootstrap or similar UI framework (or Mantine as currently used)
   • TypeScript for type safety
   • React Router for navigation

3. Dependencies needed:

   • React Router DOM (routing)
   • React Query or SWR (API state)
   • Date library (date-fns or dayjs)
   • Form library (React Hook Form)
   • Mantine UI (already in package.json)

4. Complexity hotspots:

   • Filter parsing/stringifying logic (~400 lines)
   • DateTime picker if custom (~300-400 lines)
   • Form validation logic (~300 lines)

The estimate assumes modern React patterns (hooks, functional components) and a structure similar to Prometheus UI with good separation of concerns.