Switch to angular

frontend/README.md

@@ -0,0 +1,151 @@
+# 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