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:
108
frontend/src/app/components/upload-form/upload-form.html
Normal file
108
frontend/src/app/components/upload-form/upload-form.html
Normal 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>
|
||||
Reference in New Issue
Block a user