151 lines
5.2 KiB
Markdown
151 lines
5.2 KiB
Markdown
# 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 |