warehouse13/frontend/README.md

# Obsidian Frontend - Angular Application

Modern Angular application for the Obsidian 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

```bash
cd frontend
npm install
```

### Run Development Server

```bash
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

```bash
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:

```nginx
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