add dashboard docs
This commit is contained in:
179
dashboard/readme.md
Normal file
179
dashboard/readme.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# Arbiter Dashboard
|
||||
|
||||
React dashboard for exploring code reviews and monitoring Arbiter metrics.
|
||||
|
||||
## Features
|
||||
|
||||
- **Review List** — Browse all reviews with filtering and pagination
|
||||
- **Review Detail** — View findings grouped by severity with expandable cards
|
||||
- **Deliberation Timeline** — Step-by-step visualization of agent decision process
|
||||
- **Metrics Dashboard** — Charts showing verdicts, severities, and review trends
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The dashboard runs at `http://localhost:5173` by default.
|
||||
|
||||
## Configuration
|
||||
|
||||
Set the API URL via environment variable:
|
||||
|
||||
```bash
|
||||
# Development
|
||||
VITE_API_URL=http://localhost:8000 npm run dev
|
||||
|
||||
# Or create a .env.local file
|
||||
echo "VITE_API_URL=http://localhost:8000" > .env.local
|
||||
npm run dev
|
||||
```
|
||||
|
||||
If `VITE_API_URL` is not set, the dashboard assumes the API is served from the same
|
||||
origin (useful when proxying through nginx in production).
|
||||
|
||||
## Build for Production
|
||||
|
||||
```bash
|
||||
# Type check and build
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
```
|
||||
|
||||
The build output is in the `dist/` directory. Serve with any static file server or
|
||||
use the included Docker configuration.
|
||||
|
||||
## Docker
|
||||
|
||||
Build and run with Docker:
|
||||
|
||||
```bash
|
||||
# Build image
|
||||
docker build -t arbiter-dashboard .
|
||||
|
||||
# Run container
|
||||
docker run -p 8080:80 arbiter-dashboard
|
||||
```
|
||||
|
||||
The Docker image uses nginx to serve the static files and proxy API requests.
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
dashboard/
|
||||
├── src/
|
||||
│ ├── api/ # API client and query functions
|
||||
│ │ ├── client.ts # Base fetch wrapper with error handling
|
||||
│ │ └── reviews.ts # Review-specific API calls
|
||||
│ ├── components/
|
||||
│ │ ├── common/ # Shared UI components
|
||||
│ │ │ ├── LoadingSpinner.tsx
|
||||
│ │ │ ├── Pagination.tsx
|
||||
│ │ │ └── SeverityBadge.tsx
|
||||
│ │ ├── deliberation/ # Deliberation visualization
|
||||
│ │ │ ├── ConflictCard.tsx
|
||||
│ │ │ ├── DeliberationTimeline.tsx
|
||||
│ │ │ └── VerdictBadge.tsx
|
||||
│ │ ├── layout/ # App layout components
|
||||
│ │ │ ├── Header.tsx
|
||||
│ │ │ ├── Layout.tsx
|
||||
│ │ │ └── Sidebar.tsx
|
||||
│ │ └── reviews/ # Review-related components
|
||||
│ │ ├── FindingCard.tsx
|
||||
│ │ ├── ReviewCard.tsx
|
||||
│ │ ├── ReviewFilters.tsx
|
||||
│ │ └── ReviewList.tsx
|
||||
│ ├── pages/ # Route pages
|
||||
│ │ ├── MetricsPage.tsx
|
||||
│ │ ├── ReviewDetailPage.tsx
|
||||
│ │ └── ReviewsPage.tsx
|
||||
│ ├── types/ # TypeScript type definitions
|
||||
│ │ └── api.ts
|
||||
│ ├── App.tsx # Root component with routing
|
||||
│ └── main.tsx # Application entry point
|
||||
├── public/ # Static assets
|
||||
├── package.json
|
||||
├── tsconfig.json
|
||||
├── vite.config.ts
|
||||
└── Dockerfile
|
||||
```
|
||||
|
||||
## Routes
|
||||
|
||||
| Path | Page | Description |
|
||||
|------|------|-------------|
|
||||
| `/` | ReviewsPage | List of all reviews with filters |
|
||||
| `/reviews/:id` | ReviewDetailPage | Single review with findings and deliberation |
|
||||
| `/metrics` | MetricsPage | Aggregate statistics and charts |
|
||||
|
||||
## Component Overview
|
||||
|
||||
### Layout Components
|
||||
|
||||
- **Layout** — Main app layout with header, sidebar, and content area
|
||||
- **Header** — Top navigation bar
|
||||
- **Sidebar** — Navigation menu with links to reviews and metrics
|
||||
|
||||
### Review Components
|
||||
|
||||
- **ReviewList** — Paginated list of review cards with filtering
|
||||
- **ReviewCard** — Summary card showing review metadata and verdict
|
||||
- **ReviewFilters** — Filter controls for repository, status, verdict, author
|
||||
- **FindingCard** — Expandable card showing individual agent findings
|
||||
|
||||
### Deliberation Components
|
||||
|
||||
- **DeliberationTimeline** — Vertical timeline showing deliberation steps
|
||||
- **ConflictCard** — Displays detected conflicts between agents
|
||||
- **VerdictBadge** — Color-coded badge for review verdicts (approve/changes/comment)
|
||||
|
||||
### Common Components
|
||||
|
||||
- **SeverityBadge** — Color-coded badge for finding severities
|
||||
- **LoadingSpinner** — Loading indicator
|
||||
- **Pagination** — Page navigation controls
|
||||
|
||||
## Tech Stack
|
||||
|
||||
| Technology | Purpose |
|
||||
|------------|---------|
|
||||
| React 19 | UI framework |
|
||||
| React Router 7 | Client-side routing |
|
||||
| TanStack Query | Data fetching and caching |
|
||||
| Tailwind CSS 4 | Styling |
|
||||
| Recharts | Charts and visualizations |
|
||||
| Vite | Build tool and dev server |
|
||||
| TypeScript | Type safety |
|
||||
|
||||
## Development
|
||||
|
||||
### Linting
|
||||
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Type Checking
|
||||
|
||||
```bash
|
||||
npm run typecheck
|
||||
```
|
||||
|
||||
### Adding New Pages
|
||||
|
||||
1. Create component in `src/pages/`
|
||||
2. Add route in `src/App.tsx`
|
||||
3. Add navigation link in `src/components/layout/Sidebar.tsx`
|
||||
|
||||
### Adding API Endpoints
|
||||
|
||||
1. Add types in `src/types/api.ts`
|
||||
2. Add query function in `src/api/reviews.ts`
|
||||
3. Use with `useQuery` hook in component
|
||||
Reference in New Issue
Block a user