Add frontend
This commit is contained in:
pratik
348
frontend/README.md
Normal file
348
frontend/README.md
Normal file
@@ -0,0 +1,348 @@
|
||||
# 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):
|
||||
```typescript
|
||||
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:**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. **Start development server:**
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
3. **Open browser:**
|
||||
Navigate to `http://localhost:4200`
|
||||
|
||||
### Build for Production
|
||||
|
||||
```bash
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
Built files will be in `dist/cf-deployer-ui/browser/`
|
||||
|
||||
## Docker Deployment
|
||||
|
||||
### Build Docker Image
|
||||
|
||||
```bash
|
||||
docker build -t cf-deployer-ui:latest .
|
||||
```
|
||||
|
||||
### Run Docker Container
|
||||
|
||||
```bash
|
||||
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:**
|
||||
```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:**
|
||||
```bash
|
||||
helm install cf-deployer-ui ./helm
|
||||
```
|
||||
|
||||
3. **Upgrade the chart:**
|
||||
```bash
|
||||
helm upgrade cf-deployer-ui ./helm
|
||||
```
|
||||
|
||||
4. **Uninstall:**
|
||||
```bash
|
||||
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
|
||||
|
||||
```bash
|
||||
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`:
|
||||
```json
|
||||
{
|
||||
"serve": {
|
||||
"options": {
|
||||
"proxyConfig": "proxy.conf.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Create `proxy.conf.json`:
|
||||
```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
|
||||
Reference in New Issue
Block a user