# UI Overview ## Status **Planned** - UI implementation has not started. ## Design Principles | Principle | Implementation | |-----------|----------------| | **Clarity** | Clear status indicators, intuitive navigation | | **Real-time** | Live updates via WebSocket for deployments | | **Actionable** | One-click approvals, quick actions | | **Audit-friendly** | Full history visibility, evidence access | | **Mobile-aware** | Responsive design for on-call scenarios | ## Main Screens ### Dashboard The main dashboard provides an at-a-glance view of deployment health across environments. ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ RELEASE ORCHESTRATOR [User] [Settings] │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ ENVIRONMENT PIPELINE │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ DEV │───►│ STAGING │───►│ UAT │───►│ PROD │ │ │ │ │ │ v1.5.0 │ │ v1.4.2 │ │ v1.4.1 │ │ v1.4.0 │ │ │ │ │ │ 3/3 OK │ │ 2/2 OK │ │ 2/2 OK │ │ 5/5 OK │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ ┌──────────────────────────────┐ │ │ │ PENDING APPROVALS (3) │ │ RECENT DEPLOYMENTS │ │ │ │ │ │ │ │ │ │ ● myapp → prod [Approve] │ │ ✓ api v1.5.0 → dev 2m │ │ │ │ Requested by: John │ │ ✓ web v1.4.2 → staging 15m │ │ │ │ 2 hours ago │ │ ✗ api v1.4.1 → uat 1h │ │ │ │ │ │ ✓ web v1.4.0 → prod 2h │ │ │ │ ● web → uat [Approve] │ │ │ │ │ │ Requested by: Jane │ │ [View All] │ │ │ │ 30 minutes ago │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────┘ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ ┌──────────────────────────────┐ │ │ │ AGENT STATUS │ │ ACTIVE WORKFLOWS │ │ │ │ │ │ │ │ │ │ ● 12 Online │ │ ● Deploy api v1.5.0 │ │ │ │ ○ 1 Offline │ │ Step: Health Check (3/5) │ │ │ │ ◐ 2 Degraded │ │ │ │ │ │ │ │ ● Promote web to UAT │ │ │ │ [View Details] │ │ Step: Awaiting Approval │ │ │ │ │ │ │ │ │ └──────────────────────────────┘ └──────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### Releases View ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ RELEASES [+ Create Release] │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ Filter: [All ▼] Status: [All ▼] Search: [________________] │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ NAME STATUS COMPONENTS ENVIRONMENTS CREATED │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ myapp-v1.5.0 Ready 3 dev 2h ago │ │ │ │ myapp-v1.4.2 Deployed 3 staging, uat 1d ago │ │ │ │ myapp-v1.4.1 Deployed 3 prod 3d ago │ │ │ │ myapp-v1.4.0 Deprecated 3 - 1w ago │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ RELEASE DETAIL: myapp-v1.5.0 [Promote ▼] │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ Components: │ │ │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ │ │ api sha256:abc123... registry.io/myorg/api │ │ │ │ │ │ web sha256:def456... registry.io/myorg/web │ │ │ │ │ │ worker sha256:ghi789... registry.io/myorg/worker │ │ │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ Source: https://github.com/myorg/myapp @ v1.5.0 │ │ │ │ Created: 2h ago by john@example.com │ │ │ │ │ │ │ │ Promotion History: │ │ │ │ dev (✓) → staging (pending) → uat (-) → prod (-) │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### Promotion Detail ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ PROMOTION: myapp-v1.5.0 → production │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ Status: PENDING APPROVAL [Approve] [Reject] │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ GATE EVALUATION │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ ✓ Security Gate Passed │ │ │ │ No critical vulnerabilities │ │ │ │ │ │ │ │ ✓ Freeze Window Check Passed │ │ │ │ No active freeze windows │ │ │ │ │ │ │ │ ◐ Approval Gate 1/2 Approvals │ │ │ │ Jane approved 30m ago │ │ │ │ Waiting for 1 more approval │ │ │ │ │ │ │ │ ○ Separation of Duties Pending │ │ │ │ Requester: John (cannot approve) │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ PROMOTION TIMELINE │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ 10:00 John requested promotion │ │ │ │ 10:05 Security gate evaluated: PASSED │ │ │ │ 10:05 Freeze check: PASSED │ │ │ │ 10:30 Jane approved │ │ │ │ 11:00 Waiting for additional approval... │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### Workflow Editor Visual editor for creating and modifying workflow templates. ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ WORKFLOW EDITOR: standard-deploy [Save] [Run] │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────┐ ┌─────────────────────────────────────────────────┐ │ │ │ STEP PALETTE │ │ │ │ │ │ │ │ │ │ │ │ Control │ │ ┌──────────┐ │ │ │ │ ├─ Approval │ │ │ Approval │ │ │ │ │ ├─ Wait │ │ │ Gate │ │ │ │ │ └─ Condition │ │ └────┬─────┘ │ │ │ │ │ │ │ │ │ │ │ Gates │ │ ▼ │ │ │ │ ├─ Security │ │ ┌──────────┐ │ │ │ │ ├─ Freeze │ │ │ Security │ │ │ │ │ └─ Custom │ │ │ Gate │ │ │ │ │ │ │ └────┬─────┘ │ │ │ │ Deploy │ │ │ │ │ │ │ ├─ Docker │ │ ▼ │ │ │ │ ├─ Compose │ │ ┌──────────┐ │ │ │ │ └─ ECS │ │ │ Deploy │ │ │ │ │ │ │ │ Targets │ │ │ │ │ Verify │ │ └────┬─────┘ │ │ │ │ ├─ Health │ │ │ │ │ │ │ └─ Smoke Test │ │ ┌────┴────┐ │ │ │ │ │ │ │ │ │ │ │ │ Notify │ │ ▼ ▼ │ │ │ │ ├─ Slack │ │ ┌──────┐ ┌──────────┐ │ │ │ │ └─ Email │ │ │Health│ │ Rollback │◄──[on failure] │ │ │ │ │ │ │Check │ │ Handler │ │ │ │ │ │ │ └──┬───┘ └────┬─────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ▼ ▼ │ │ │ │ │ │ ┌──────┐ ┌──────────┐ │ │ │ │ │ │ │Notify│ │ Notify │ │ │ │ │ │ │ │Success│ │ Failure │ │ │ │ │ │ │ └──────┘ └──────────┘ │ │ │ │ │ │ │ │ │ └─────────────────┘ └─────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ STEP PROPERTIES: Deploy Targets │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ Type: deploy-compose │ │ │ │ Strategy: [Rolling ▼] │ │ │ │ Parallelism: [2] │ │ │ │ Timeout: [600] seconds │ │ │ │ On Failure: [Rollback ▼] │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### Deployment Live View Real-time view of an active deployment. ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ DEPLOYMENT: myapp-v1.5.0 → production [Abort]│ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ Status: RUNNING Progress: ████████░░ 80% │ │ Strategy: Rolling (batch 4/5) Duration: 5m 23s │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ TARGET STATUS │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ ✓ prod-host-1 sha256:abc123 Deployed Health: OK │ │ │ │ ✓ prod-host-2 sha256:abc123 Deployed Health: OK │ │ │ │ ✓ prod-host-3 sha256:abc123 Deployed Health: OK │ │ │ │ ● prod-host-4 sha256:abc123 Deploying Health: Checking... │ │ │ │ ○ prod-host-5 - Pending Health: - │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ LIVE LOGS: prod-host-4 │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ 10:25:15 Pulling image sha256:abc123... │ │ │ │ 10:25:18 Image pulled successfully │ │ │ │ 10:25:19 Stopping existing container... │ │ │ │ 10:25:20 Starting new container... │ │ │ │ 10:25:21 Container started │ │ │ │ 10:25:22 Running health check... │ │ │ │ 10:25:25 Health check passed (1/3) │ │ │ │ 10:25:28 Health check passed (2/3) │ │ │ │ ... │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### Environment Management ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ ENVIRONMENTS [+ Add Environment] │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ NAME ORDER TARGETS CURRENT RELEASE APPROVALS STATUS │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ development 1 3 myapp-v1.5.0 0 Active │ │ │ │ staging 2 2 myapp-v1.4.2 1 Active │ │ │ │ uat 3 2 myapp-v1.4.1 1 Active │ │ │ │ production 4 5 myapp-v1.4.0 2 + SoD Active │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ ENVIRONMENT DETAIL: production [Edit] │ │ │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ Approval Policy: │ │ │ │ - Required approvals: 2 │ │ │ │ - Separation of duties: Enabled │ │ │ │ - Approver roles: release-manager, tech-lead │ │ │ │ │ │ │ │ Freeze Windows: │ │ │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ │ │ Holiday Freeze Dec 20 - Jan 5 Active [Remove] │ │ │ │ │ │ Weekend Freeze Sat-Sun Active [Remove] │ │ │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ [+ Add Freeze Window] │ │ │ │ │ │ │ │ Targets: │ │ │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ │ │ prod-host-1 docker_host healthy sha256:abc... │ │ │ │ │ │ prod-host-2 docker_host healthy sha256:abc... │ │ │ │ │ │ prod-host-3 docker_host healthy sha256:abc... │ │ │ │ │ │ prod-host-4 docker_host healthy sha256:abc... │ │ │ │ │ │ prod-host-5 docker_host degraded sha256:abc... │ │ │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ## Key Interactions ### Approval Flow 1. User sees pending approval notification on dashboard 2. Clicks to view promotion detail 3. Reviews gate evaluation results and change details 4. Clicks "Approve" or "Reject" with optional comment 5. System validates SoD requirements 6. Promotion advances or notification sent ### Quick Promote 1. From release detail, user clicks "Promote" 2. Selects target environment from dropdown 3. Confirms promotion request 4. System evaluates gates immediately 5. If auto-approved, deployment begins 6. If approval required, notification sent to approvers ### Emergency Rollback 1. From deployment history or alert, user clicks "Rollback" 2. System shows previous healthy version 3. User confirms rollback 4. System creates rollback deployment job 5. Real-time progress shown ## Mobile Considerations - Responsive design for smaller screens - Critical actions (approve/reject) accessible on mobile - Push notifications for pending approvals - Simplified views for monitoring on-the-go ## References - [API Overview](../api/overview.md) - [Workflow Templates](../workflow/templates.md)