warehouse13/frontend

Warehouse13 Frontend - Angular Application

Modern Angular application for the Warehouse13 Test Artifact Data Lake.

Features

• Angular 20 with standalone components
• TypeScript for type safety
• Reactive Forms for upload and query functionality
• RxJS for reactive programming
• Auto-refresh artifacts every 5 seconds
• Client-side sorting and filtering
• Dark theme UI
• Responsive design

Development

Prerequisites

• Node.js 24.x or higher
• npm 11.x or higher
• Backend API running on port 8000

Installation

cd frontend
npm install

Run Development Server

npm start

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

The development server includes a proxy configuration that forwards /api requests to http://localhost:8000.

Build for Production

npm run build:prod

Build artifacts will be in the dist/frontend/browser directory.

Project Structure

src/
├── app/
│   ├── components/
│   │   ├── artifacts-list/     # Main artifacts table with sorting, filtering, auto-refresh
│   │   ├── upload-form/         # Reactive form for uploading artifacts
│   │   └── query-form/          # Advanced query interface
│   ├── models/
│   │   └── artifact.model.ts    # TypeScript interfaces for type safety
│   ├── services/
│   │   └── artifact.ts          # HTTP service for API calls
│   ├── app.ts                   # Main app component with routing
│   ├── app.config.ts            # Application configuration
│   └── app.routes.ts            # Route definitions
├── styles.css                   # Global dark theme styles
└── main.ts                      # Application bootstrap

## Key Components

### ArtifactsListComponent
- Displays artifacts in a sortable, filterable table
- Auto-refreshes every 5 seconds (toggleable)
- Client-side search across all fields
- Download and delete actions
- Detail modal for full artifact information
- Tags displayed as inline badges
- SIM source grouping support

### UploadFormComponent
- Reactive form with validation
- File upload with drag-and-drop support
- Required fields: File, Sim Source, Uploaded By, Tags
- Optional fields: SIM Source ID (for grouping), Test Result, Version, Description, Test Config, Custom Metadata
- JSON validation for config fields
- Real-time upload status feedback

### QueryFormComponent
- Advanced search with multiple filter criteria
- Filter by: filename, file type, test name, test suite, test result, SIM source ID, tags, date range
- Results emitted to artifacts list

## API Integration

The frontend communicates with the FastAPI backend through the `ArtifactService`:

- `GET /api/v1/artifacts/` - List all artifacts
- `GET /api/v1/artifacts/:id` - Get single artifact
- `POST /api/v1/artifacts/upload` - Upload new artifact
- `POST /api/v1/artifacts/query` - Query with filters
- `GET /api/v1/artifacts/:id/download` - Download artifact file
- `DELETE /api/v1/artifacts/:id` - Delete artifact
- `POST /api/v1/seed/generate/:count` - Generate seed data

## Configuration

### Proxy Configuration (`proxy.conf.json`)

```json
{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false,
    "changeOrigin": true
  }
}

This proxies all /api requests to the backend during development.

Styling

The application uses a custom dark theme with:

• Dark blue/slate color palette
• Gradient headers
• Responsive design
• Smooth transitions and hover effects
• Tag badges for categorization
• Result badges for test statuses

Browser Support

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

Development Tips

1. Hot Reload: Changes to TypeScript files automatically trigger recompilation
2. Type Safety: Use TypeScript interfaces in models/ for all API responses
3. State Management: Currently using component-level state; consider NgRx for complex state
4. Testing: Run npm test for unit tests (Jasmine/Karma)

Deployment

For production deployment, build the application and serve the dist/frontend/browser directory with your web server (nginx, Apache, etc.).

Example nginx configuration:

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist/frontend/browser;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend:8000;
    }
}

Future Enhancements

• Add NgRx for state management
• Implement WebSocket for real-time updates
• Add Angular Material components
• Unit and E2E tests
• PWA support
• Drag-and-drop file upload
• Bulk operations
• Export to CSV/JSON

License

Same as parent project