warehouse13/frontend

Test Artifact Data Lake - Angular Frontend

This is the Angular 19 frontend for the Test Artifact Data Lake application. It replaces the static HTML/JS implementation with a modern, component-based architecture.

Features

✅ Multi-component Architecture: Built with reusable Angular components ✅ Tab Navigation: Clean tab-based interface for Artifacts, Upload, and Query ✅ Event ID Support: Group multiple artifacts under the same event ID ✅ Expandable Binaries Display: Show first 4 binaries, expandable for more ✅ Advanced Tag Management: Create tags on-the-spot with database persistence ✅ Scoped Tags: Organize tags by scope (project, environment, priority, etc.) ✅ Comprehensive Filtering: Filter artifacts by all table criteria ✅ Real-time Search: As-you-type filtering in query form ✅ Responsive Design: Mobile-friendly interface

Components

Core Components

• TabNavigationComponent: Manages tab switching between Artifacts, Upload, and Query
• ArtifactsTableComponent: Displays artifacts with expandable binaries/tags and Event ID support
• UploadFormComponent: File upload with Event ID and binaries support
• QueryFormComponent: Advanced search with real-time filtering
• TagManagerComponent: On-the-spot tag creation with scoped tags

Services

• ArtifactService: Handles all artifact-related API calls
• ApiService: Manages general API information

Development

Prerequisites

• Node.js (v18 or later)
• Angular CLI 19

Setup

cd frontend
npm install

Development Server

npm start
# or
ng serve

The app will be available at http://localhost:4200

Build for Production

npm run build
# or
ng build

Built files will be in dist/frontend/

API Integration

The frontend expects the backend API to be available at:

• Development: Same origin as the frontend
• Production: Configurable via environment files

Required API Endpoints

• GET /api - API information
• GET /api/v1/artifacts/ - List artifacts
• GET /api/v1/artifacts/{id} - Get artifact details
• POST /api/v1/artifacts/upload - Upload artifact
• DELETE /api/v1/artifacts/{id} - Delete artifact
• GET /api/v1/artifacts/{id}/download - Download artifact
• POST /api/v1/artifacts/query - Query artifacts
• POST /api/v1/seed/generate/{count} - Generate seed data
• GET /api/v1/tags - List all tags
• POST /api/v1/tags - Create tag
• POST /api/v1/artifacts/{id}/tags - Add tag to artifact
• DELETE /api/v1/artifacts/{id}/tags/{tag_id} - Remove tag from artifact

Key Features Implementation

Event ID Support

Each artifact can be assigned an Event ID to group related artifacts together. This is displayed prominently in the table and can be used for filtering.

Expandable Binaries

When an artifact has more than 4 associated binaries, only the first 4 are shown with a "+X more" button to expand and see all binaries.

Advanced Tag Management

• Create tags on-the-spot directly in the table
• Organize tags by scope (project, environment, priority, category, status)
• Tags persist in the database across app restarts
• Visual indicators show which tags are already attached
• Quick-add existing tags from a categorized list

Comprehensive Filtering

The query form provides real-time filtering by:

• Filename (partial match)
• File type
• Test name
• Test suite
• Test result
• Tags (comma-separated)
• Date range

Filters are applied immediately as you type, and active filters are displayed as visual chips.

Architecture Improvements

From Static to Angular

The original static JavaScript implementation has been converted to:

1. Component-based Architecture: Each major feature is now a reusable component
2. Type Safety: Full TypeScript support with proper interfaces
3. Reactive Programming: Uses RxJS observables for API calls
4. State Management: Centralized state management through services
5. Modular Design: Easy to extend and maintain

Benefits

• Maintainability: Clear separation of concerns
• Reusability: Components can be reused and extended
• Testing: Angular's testing framework support
• Performance: Optimized change detection and lazy loading
• Developer Experience: Hot reload, TypeScript, and Angular DevTools

Deployment

Development

The Angular frontend can be served during development using ng serve and will proxy API calls to the backend.

Production

Build the application and serve the static files from any web server. Ensure the backend API is accessible from the same domain or configure CORS appropriately.

Integration with Existing Backend

The Angular frontend is designed to be a drop-in replacement for the static frontend. Simply:

1. Build the Angular app: npm run build
2. Copy contents of dist/frontend/ to your static files directory
3. Update your backend to serve the new index.html
4. Ensure API endpoints match the expected interface

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Future Enhancements

• Drag and drop file upload
• Bulk operations
• Advanced data visualization
• Real-time updates via WebSocket
• Export functionality
• User authentication integration