cf-uploader/frontend/README.md

Tanzu Deployer UI - Angular Frontend

A modern, dark-themed Angular 19.1 frontend for deploying applications to Tanzu/Cloud Foundry environments.

Features

• ✅ Modern Dark Theme: Sleek GitHub-inspired dark UI with blue/purple gradients
• ✅ Simple Form Interface: Easy-to-use deployment form with all Tanzu configuration fields
• ✅ Modern File Upload: Beautiful drag-and-drop style file upload buttons with SVG icons
• ✅ Chunked File Upload: Handles large JAR files using Base64-encoded chunks (compatible with Java proxy)
• ✅ Real-time Progress: Visual progress bar showing upload and deployment status
• ✅ Live Logs: Collapsible terminal-style output window displaying deployment logs
• ✅ Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• ✅ Secure: Password fields are masked, follows Angular security best practices
• ✅ Configurable: Environment-based configuration for all settings
• ✅ Production Ready: Includes nginx configuration and Helm chart for K8s deployment

Configuration

All application settings are managed via environment files:

src/environments/environment.ts (Development):

export const environment = {
  production: false,
  apiBase: '/api/cf',              // API endpoint base URL
  chunkSize: 1048576,              // Chunk size in bytes (1MB)
  enableSslValidation: false,      // Show/hide SSL validation checkbox
  pollInterval: 5000,              // Poll interval in milliseconds
  maxPollAttempts: 120,            // Max polling attempts (10 minutes)
  defaultLogsExpanded: true,       // Logs expanded by default
  showDebugInfo: false             // Show debug information
};

src/environments/environment.prod.ts (Production):

• Same structure as development
• Used when building with --configuration production

Customizing Configuration

To customize the application behavior:

1. Edit src/environments/environment.ts for development
2. Edit src/environments/environment.prod.ts for production
3. Rebuild the application

Common Customizations:

• Enable SSL Validation Checkbox: Set enableSslValidation: true
• Change Chunk Size: Set chunkSize: 2097152 (2MB)
• Increase Poll Time: Set maxPollAttempts: 240 (20 minutes)
• Change API Endpoint: Set apiBase: 'https://api.example.com/cf'

Quick Start

Local Development

1. Install dependencies:

   npm install
   

2. Start development server:

   npm start
   

3. Open browser: Navigate to http://localhost:4200

Build for Production

npm run build:prod

Built files will be in dist/cf-deployer-ui/browser/

Docker Deployment

Build Docker Image

docker build -t cf-deployer-ui:latest .

Run Docker Container

docker run -d \
  -p 8080:80 \
  -e BACKEND_URL=http://cf-deployer-backend:8080 \
  --name cf-deployer-ui \
  cf-deployer-ui:latest

Environment Variables:

• BACKEND_URL: URL of the CF Deployer backend API (default: http://localhost:8080)

Kubernetes Deployment

Prerequisites

• Kubernetes cluster
• Helm 3.x installed
• Docker image pushed to registry

Deploy with Helm

1. Update values.yaml:

   image:
     repository: your-registry/cf-deployer-ui
     tag: "1.0.0"
   
   backend:
     url: "http://cf-deployer-backend:8080"
   
   ingress:
     enabled: true
     hosts:
       - host: cf-deployer.example.com
         paths:
           - path: /
             pathType: Prefix
   

2. Install the chart:

   helm install cf-deployer-ui ./helm
   

3. Upgrade the chart:

   helm upgrade cf-deployer-ui ./helm
   

4. Uninstall:

   helm uninstall cf-deployer-ui
   

Helm Configuration Options

Parameter	Description	Default
replicaCount	Number of replicas	2
image.repository	Docker image repository	cf-deployer-ui
image.tag	Docker image tag	latest
service.type	Kubernetes service type	ClusterIP
service.port	Service port	80
backend.url	Backend API URL	http://cf-deployer-backend:8080
ingress.enabled	Enable ingress	false
resources.limits.cpu	CPU limit	500m
resources.limits.memory	Memory limit	512Mi

Usage

Deployment Flow

1. Fill in Cloud Foundry Details:

   • API Endpoint (e.g., https://api.cf.example.com)
   • Username and Password
   • Organization and Space
   • Application Name
   • Skip SSL Validation (if needed)

2. Select Files:

   • JAR File: Your application JAR
   • Manifest File: Cloud Foundry manifest.yml

3. Deploy:

   • Click "Deploy to Cloud Foundry"
   • Watch progress bar and logs
   • Wait for completion

Screenshots

Main Form:

• Clean, responsive form with all required fields
• File upload with size display
• SSL validation checkbox

Progress Tracking:

• Visual progress bar (0-100%)
• Current step indicator
• Status badges (IN_PROGRESS, COMPLETED, FAILED)

Logs Output:

• Collapsible terminal-style output
• Timestamped log entries
• Auto-scroll to latest logs

Architecture

How It Works

The frontend mimics the behavior of deploy-chunked-simple.sh:

1. Initialize Upload Session:

   POST /api/cf/upload/init
   → Returns uploadSessionId
   

2. Upload Files in Chunks:

   • Splits files into 1MB chunks
   • Base64 encodes each chunk (for Java proxy compatibility)
   • Uploads via:

     POST /api/cf/upload/chunk?uploadSessionId=...&fileType=...&chunkIndex=...&totalChunks=...&fileName=...
     Headers: Content-Type: text/plain, X-Chunk-Encoding: base64
     Body: Base64 chunk data
     

3. Finalize Upload:

   POST /api/cf/upload/finalize?uploadSessionId=...&async=true
   

4. Poll Deployment Status:

   GET /api/cf/deployment/status/{uploadSessionId}
   (Every 5 seconds until COMPLETED or FAILED)
   

Why Base64 Encoding?

The frontend sends chunks as Base64-encoded text because:

• It goes through a Java proxy that reads @RequestBody String
• Binary data gets corrupted when read as String
• Base64 ensures safe text transport through the proxy
• Backend automatically decodes Base64 back to binary

Project Structure

frontend/
├── src/
│   ├── app/
│   │   ├── app.component.ts       # Main component with form logic
│   │   ├── app.component.html     # Template with form UI
│   │   ├── app.component.css      # Component styles
│   │   └── deploy.service.ts      # API service
│   ├── index.html                 # Main HTML file
│   ├── main.ts                    # Bootstrap file
│   └── styles.css                 # Global styles
├── helm/                          # Helm chart
│   ├── Chart.yaml
│   ├── values.yaml
│   └── templates/
│       ├── deployment.yaml
│       ├── service.yaml
│       ├── ingress.yaml
│       └── _helpers.tpl
├── nginx.conf                     # nginx configuration
├── Dockerfile                     # Multi-stage Docker build
├── angular.json                   # Angular CLI configuration
├── package.json                   # NPM dependencies
└── tsconfig.json                  # TypeScript configuration

Development

Prerequisites

• Node.js 20.x or higher
• npm 10.x or higher
• Angular CLI 19.x

Install Angular CLI

npm install -g @angular/cli@19

Code Structure

app.component.ts:

• Handles form state and validation
• Manages file uploads and chunking
• Polls deployment status
• Updates progress and logs

deploy.service.ts:

• Encapsulates all HTTP API calls
• Returns RxJS Observables converted to Promises
• Handles Base64 encoding headers

Styling:

• Responsive grid layout
• Mobile-first design
• Terminal-style logs with custom scrollbar
• Gradient progress bar

Troubleshooting

CORS Errors

If you see CORS errors in the browser console:

1. Development: Configure proxy in angular.json:

   {
     "serve": {
       "options": {
         "proxyConfig": "proxy.conf.json"
       }
     }
   }
   

   Create proxy.conf.json:

   {
     "/api": {
       "target": "http://localhost:8080",
       "secure": false
     }
   }
   

2. Production: nginx handles proxying (already configured)

File Upload Fails

• Check that backend is running and accessible
• Verify BACKEND_URL environment variable
• Check browser console for error messages
• Enable DEBUG_MODE in backend to see detailed logs

Deployment Timeout

• Default timeout is 10 minutes (120 attempts × 5 seconds)
• Increase maxAttempts in pollDeploymentStatus() if needed
• Check backend logs for actual deployment status

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Android)

License

MIT License - see main project README