[Phase 10.2] Add web UI for job monitoring and management

[zhexuany]

Summary

Add a simple web UI for monitoring job progress, viewing job details, and managing jobs (retry, cancel). Provides a dashboard for operators.

Parent Epic

• [Epic] Distributed Roboflow with Alibaba Cloud (OSS + ACK) #9 Distributed Roboflow with TiKV Coordination

Dependencies

• Depends on: [Phase 4.1] Add TiKV client and define distributed schema #40 (TiKV Client), [Phase 10.1] Add CLI for job submission [READY TO START] #50 (CLI for API patterns)
• Optional: [Phase 7.1] Add Prometheus metrics for monitoring #21 (Prometheus metrics for charts)

Design

Architecture

┌─────────────────────────────────────────────────────┐
│                    Web UI (SPA)                      │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌────────┐ │
│  │Dashboard│  │Job List │  │Job Detail│ │Workers │ │
│  └─────────┘  └─────────┘  └─────────┘  └────────┘ │
└────────────────────────┬────────────────────────────┘
                         │ REST API
┌────────────────────────┴────────────────────────────┐
│                   API Server                         │
│  - Rust (axum/actix-web)                            │
│  - Embedded in roboflow binary                      │
│  - Connects to TiKV                                 │
└────────────────────────┬────────────────────────────┘
                         │
                    ┌────┴────┐
                    │  TiKV   │
                    └─────────┘

Technology Stack

• Backend: Rust with axum (lightweight, async)
• Frontend: Simple SPA (htmx + Alpine.js, or React)
• Embedded: Single binary, no separate deployment
• Alternative: Serve static files, API endpoints

Tasks

10.2.1 Create API Server Module

1. Create src/api/mod.rs
2. Create src/api/server.rs
3. Add axum dependency (feature-gated)
4. Define ApiServer struct:
   • TiKV client
   • Config (port, host)
5. Start command: roboflow ui --port 8080

10.2.2 Implement Job API Endpoints

GET  /api/jobs              # List jobs (with filters)
GET  /api/jobs/:id          # Get job details
POST /api/jobs              # Submit new job
POST /api/jobs/:id/retry    # Retry failed job
POST /api/jobs/:id/cancel   # Cancel job
DELETE /api/jobs/:id        # Delete job

GET  /api/stats             # Get statistics
GET  /api/workers           # List active workers

10.2.3 Implement Dashboard Endpoint

1. GET /api/dashboard:

   {
     "jobs": {
       "pending": 10,
       "processing": 5,
       "completed": 100,
       "failed": 2,
       "dead": 0
     },
     "workers": {
       "active": 5,
       "total_processed": 1000
     },
     "throughput": {
       "jobs_per_hour": 50,
       "bytes_per_hour": 1073741824
     }
   }

10.2.4 Create Frontend - Dashboard Page

1. Create src/api/static/index.html
2. Dashboard view:
   • Job status counts (cards/gauges)
   • Recent jobs table
   • Active workers count
   • Throughput chart (if metrics available)
3. Auto-refresh every 5 seconds

10.2.5 Create Frontend - Job List Page

1. Create job list view:
   • Table with: ID, Source, Status, Progress, Duration
   • Filter by status (tabs or dropdown)
   • Pagination
   • Search by source path
2. Actions:
   • Click row → Job detail
   • Bulk select → Retry/Cancel/Delete

10.2.6 Create Frontend - Job Detail Page

1. Create job detail view:
   • Full job info
   • Timeline (created → started → completed)
   • Error message (if failed)
   • Checkpoint info (frame progress)
   • Output file links
2. Actions:
   • Retry button (if failed)
   • Cancel button (if processing)
   • Delete button

10.2.7 Create Frontend - Workers Page

1. Create workers view:
   • Table: Pod ID, Status, Current Job, Last Seen
   • Stale workers highlighted
2. Health indicators

10.2.8 Add Submit Job Form

1. Form fields:
   • Source URL (text input)
   • Output URL (text input)
   • Config file (dropdown or upload)
2. Submit button
3. Validation feedback
4. Success/error notification

10.2.9 Add Bulk Operations

1. Select multiple jobs
2. Bulk actions:
   • Retry all selected
   • Cancel all selected
   • Delete all selected
3. Confirmation dialog
4. Progress indicator

10.2.10 Add Authentication (Optional)

1. Simple auth options:
   • Basic auth via env var
   • API key header
   • No auth (internal network)
2. Configuration flag to enable

10.2.11 Embed Static Files

1. Use rust-embed or include_bytes!
2. Serve from memory (no external files)
3. Single binary deployment

UI Mockup

┌─────────────────────────────────────────────────────────────┐
│  Roboflow Dashboard                          [Submit Job]   │
├─────────────────────────────────────────────────────────────┤
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐       │
│  │ Pending  │ │Processing│ │Completed │ │  Failed  │       │
│  │    10    │ │    5     │ │   100    │ │    2     │       │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘       │
│                                                             │
│  Recent Jobs                               [Filter: All ▼]  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ ID     │ Source           │ Status    │ Progress   │   │
│  ├────────┼──────────────────┼───────────┼────────────┤   │
│  │ abc123 │ raw/file1.mcap   │ Processing│ 45%        │   │
│  │ def456 │ raw/file2.mcap   │ Completed │ 100%       │   │
│  │ ghi789 │ raw/file3.mcap   │ Failed    │ 32%  [Retry]│   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  Active Workers: 5    │    Throughput: 50 jobs/hr          │
└─────────────────────────────────────────────────────────────┘

Acceptance Criteria

• API server starts with roboflow ui
• All REST endpoints work
• Dashboard shows job counts
• Job list with filtering works
• Job detail page shows full info
• Retry/Cancel/Delete actions work
• Submit job form works
• Workers page shows active workers
• Auto-refresh updates data
• Single binary (embedded static files)
• Responsive design (works on mobile)

Files to Create

• src/api/mod.rs
• src/api/server.rs
• src/api/routes/mod.rs
• src/api/routes/jobs.rs
• src/api/routes/workers.rs
• src/api/routes/stats.rs
• src/api/static/index.html
• src/api/static/app.js
• src/api/static/style.css

Files to Modify

• Cargo.toml (add axum, tower, rust-embed)
• src/bin/roboflow.rs (add ui subcommand)
• src/lib.rs (add api module)

Feature Flag

[features]
web-ui = ["axum", "tower", "rust-embed"]