Replication Topology & Status Page

[ElioNeto]

Replication Topology & Status Page

Create an Angular page that displays the replication topology and status using the existing replication infrastructure.

Backend Endpoints Needed

GET    /admin/replication/status          — Current replication role and state
GET    /admin/replication/replicas         — List connected replicas
GET    /admin/replication/replicas/{id}    — Replica details (lag, status)
GET    /admin/replication/stats            — Replication throughput stats

UI Requirements

Topology Visualization

• Node Diagram: Visual representation of Primary → Replica connections
• Role Badge: Primary / Replica / Standalone indicator
• Connection Status: Green (connected) / Red (disconnected) / Yellow (degraded)
• Replication Lag: Display lag in milliseconds per replica

Primary Panel

• Role: Displayed as Primary
• Connected Replicas: Count + list
• Write Throughput: Writes per second being replicated
• Ship Queue: Current number of pending records to ship
• Last Error: Any replication errors

Replica Details

• Endpoint: URL of the replica
• Status: Connected/Disconnected/Lagging
• Lag: Current replication lag in ms
• Last Sync: Timestamp of last successful sync
• Bytes Received: Total data received
• Reconnect Button: Manual reconnect attempt

Configuration

• Sync Interval: Display current sync interval
• Batch Size: Display current batch size
• Timeout: Display current timeout

Component Structure

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

Acceptance Criteria

• Topology diagram shows primary and replicas
• Role is correctly displayed
• Replica status shows connection state and lag
• Stats display throughput metrics
• Auto-refresh every 5 seconds
• Error states handled
• Responsive layout

Parent Epic

#290

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321)