Modern UI for Cloud Pak Deployment with IBM Carbon Design System

[sametkilictas]

Feature Request: Modern UI for Cloud Pak Deployment with IBM Carbon Design System

Is your feature request related to a problem? Please describe.

The current Cloud Pak Deployer web interface presents several challenges:

1. Manual YAML Configuration: Users must manually edit complex YAML files, which is error-prone and requires deep technical knowledge of Cloud Pak dependencies and syntax.

2. Complex Dependency Management: Understanding component dependencies requires consulting multiple documentation sources. Users often encounter deployment failures due to missing dependencies or conflicting selections.

3. No Real-time Validation: Configuration errors are only discovered during deployment, wasting time and resources.

4. Limited Deployment Visibility: Users cannot easily monitor deployment progress or access logs in real-time, making troubleshooting difficult.

5. Outdated Design: The interface doesn't follow IBM Carbon Design System standards, creating inconsistency with other IBM Cloud products.

Example User Frustrations:

• "I spent hours debugging only to find I was missing a required dependency."
• "I wish there was a visual way to see which components work together."
• "I can't tell if my deployment is progressing or stuck."

Describe the solution you'd like

A modern, guided Cloud Pak deployment experience using IBM Carbon Design System that transforms deployment from a complex manual process into an intuitive workflow.

Key Features

1. Intelligent Component Selection

• Visual component catalog with search and filtering
• Automatic dependency resolution - system auto-selects required dependencies
• Visual dependency tree showing relationships
• Conflict detection with clear explanations
• Real-time validation

2. Dynamic Configuration Forms

• Schema-driven forms that adapt to selected components
• Context-sensitive help and validation
• Smart defaults based on best practices
• Live YAML preview with syntax highlighting

3. Guided Deployment Workflow

• Step-by-step process: Authenticate → Select → Configure → Review → Deploy → Monitor
• Pre-deployment validation summary
• Real-time progress tracking with live log streaming
• Post-deployment summary with credentials and next steps

4. Professional Design

• IBM Carbon Design System v11
• Responsive (desktop, tablet, mobile)
• Light/dark theme support
• WCAG 2.1 AA accessibility compliant

Technical Approach

• Frontend: React 18 + TypeScript + Vite
• UI Library: IBM Carbon Design System
• State Management: Zustand
• Backend Integration: Uses existing APIs (no backend changes required)
• Dependency Logic: Based on ibm_software_hub_requirements_normalized_operational.yaml
• Config Generation: Uses reference-config.yaml as template

Expected Benefits

• 60-70% reduction in deployment time
• 80% fewer configuration errors
• Lower learning curve for new users
• Better troubleshooting with real-time logs
• Consistent with IBM Cloud product family

Describe alternatives you've considered

1. Incremental Updates to Existing UI

• Pros: Less effort, no breaking changes
• Cons: Doesn't solve fundamental UX issues, technical debt remains
• Decision: Rejected - doesn't address core problems

2. CLI-Only with Better Documentation

• Pros: No UI development, scriptable
• Cons: High barrier to entry, no visual feedback, manual dependency management
• Decision: Rejected - doesn't meet needs of most users

3. Third-Party UI Framework

• Pros: Faster initial development
• Cons: Inconsistent with IBM standards, no Carbon design language
• Decision: Rejected - must use IBM Carbon for consistency

4. Hybrid Approach (Both UIs)

• Pros: Gradual migration, backward compatibility
• Cons: Double maintenance burden
• Decision: Use for transition period only with feature flag

Additional context

Migration Strategy

• Feature flag to switch between old and new UI during transition
• Gradual user migration with feedback collection
• Complete cutover after validation period
• Rollback capability maintained

Technical Compatibility

• Node.js >= 18.0.0
• Modern browsers (Chrome, Firefox, Safari, Edge)
• Compatible with existing backend APIs
• No breaking changes to deployment engine

---

Note: This feature request proposes a complete UI redesign to address fundamental usability issues while maintaining full compatibility with the existing backend infrastructure.