31 KiB
31 KiB
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
- User sees pending approval notification on dashboard
- Clicks to view promotion detail
- Reviews gate evaluation results and change details
- Clicks "Approve" or "Reject" with optional comment
- System validates SoD requirements
- Promotion advances or notification sent
Quick Promote
- From release detail, user clicks "Promote"
- Selects target environment from dropdown
- Confirms promotion request
- System evaluates gates immediately
- If auto-approved, deployment begins
- If approval required, notification sent to approvers
Emergency Rollback
- From deployment history or alert, user clicks "Rollback"
- System shows previous healthy version
- User confirms rollback
- System creates rollback deployment job
- 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