Migrate frontend to Angular 20 with full Docker support

Implemented a complete Angular 20 migration with modern standalone components architecture and production-ready Docker deployment:

**Frontend Migration:**
- Created Angular 20 application with standalone components (no NgModules)
- Implemented three main components: artifacts-list, upload-form, query-form
- Added TypeScript models and services for type-safe API communication
- Migrated dark theme UI with all existing features
- Configured routing and navigation between views
- Set up development proxy for seamless API integration
- Reactive forms with validation for upload and query functionality
- Auto-refresh artifacts every 5 seconds with RxJS observables
- Client-side sorting, filtering, and search capabilities
- Tags displayed as inline badges, SIM source grouping support

**Docker Integration:**
- Multi-stage Dockerfile for Angular (Node 24 build, nginx Alpine serve)
- nginx configuration for SPA routing and API proxy
- Updated docker-compose.yml with frontend service on port 80
- Health checks for all services
- Production-optimized build with gzip compression and asset caching

**Technical Stack:**
- Angular 20 with standalone components
- TypeScript for type safety
- RxJS for reactive programming
- nginx as reverse proxy
- Multi-stage Docker builds for optimal image size

All features fully functional and tested in Docker environment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-15 11:35:28 -05:00
parent 2861022ac6
commit d69c209101
36 changed files with 2546 additions and 0 deletions

View File

@@ -0,0 +1,108 @@
<div class="upload-section">
<h2>Upload Artifact</h2>
<form [formGroup]="uploadForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="file">File *</label>
<input type="file" id="file" (change)="onFileSelected($event)" required>
<small>Supported: CSV, JSON, binary files, PCAP</small>
</div>
<div class="form-row">
<div class="form-group">
<label for="sim-source">Sim Source *</label>
<input
type="text"
id="sim-source"
formControlName="sim_source"
placeholder="e.g., Jenkins, GitLab CI"
required>
</div>
<div class="form-group">
<label for="uploaded-by">Uploaded By *</label>
<input
type="text"
id="uploaded-by"
formControlName="uploaded_by"
placeholder="e.g., john.doe"
required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="sim-source-id">SIM Source ID (for grouping)</label>
<input
type="text"
id="sim-source-id"
formControlName="sim_source_id"
placeholder="e.g., sim_run_20251015_001">
<small>Use same ID for multiple artifacts from same source</small>
</div>
<div class="form-group">
<label for="tags">Tags (comma-separated) *</label>
<input
type="text"
id="tags"
formControlName="tags"
placeholder="e.g., regression, smoke, critical"
required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="test-result">Test Result</label>
<select id="test-result" formControlName="test_result">
<option value="">-- Select --</option>
<option value="pass">Pass</option>
<option value="fail">Fail</option>
<option value="skip">Skip</option>
<option value="error">Error</option>
</select>
</div>
<div class="form-group">
<label for="version">Version</label>
<input
type="text"
id="version"
formControlName="version"
placeholder="e.g., v1.0.0">
</div>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
id="description"
formControlName="description"
rows="3"
placeholder="Describe this artifact..."></textarea>
</div>
<div class="form-group">
<label for="test-config">Test Config (JSON)</label>
<textarea
id="test-config"
formControlName="test_config"
rows="4"
placeholder='{"browser": "chrome", "timeout": 30}'></textarea>
</div>
<div class="form-group">
<label for="custom-metadata">Custom Metadata (JSON)</label>
<textarea
id="custom-metadata"
formControlName="custom_metadata"
rows="4"
placeholder='{"build": "1234", "commit": "abc123"}'></textarea>
</div>
<button type="submit" class="btn btn-primary btn-large" [disabled]="uploading">
{{ uploading ? 'Uploading...' : '📤 Upload Artifact' }}
</button>
</form>
<div *ngIf="uploadStatus" class="upload-status" [class.success]="uploadStatus.success" [class.error]="!uploadStatus.success">
{{ uploadStatus.message }}
</div>
</div>