# 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
```bash
cd frontend
npm install
```

### Development Server
```bash
npm start
# or
ng serve
```
The app will be available at `http://localhost:4200`

### Build for Production
```bash
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