Initial Commit
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,32 @@
|
||||
## Design Plan
|
||||
|
||||
**Inputs**: target tests directory, result tests directory
|
||||
|
||||
**Output**: a dashboard that displays completion rate, elapsed time, estimated time remaining, and a list of all tests that can be filtered by tags
|
||||
|
||||
**Requirements**:
|
||||
- A test is marked completed when there is a filename match in result tests directory
|
||||
- When there is a change in the input directories, data should update automatically or when refreshed
|
||||
- Dashboard can be accessed by different devices, but input directories are stored locally on one machine
|
||||
- Add SSO later
|
||||
|
||||
Front end UI requirements:
|
||||
- Completion rate
|
||||
- Overall completion rate
|
||||
- CGW 452 completion rate
|
||||
- CGW453 completion rate
|
||||
|
||||
- Time elapsed
|
||||
- Estimated Time remaining
|
||||
- List of all tests
|
||||
- Can filter by Tags:
|
||||
- Completed: Boolean
|
||||
- Device: String
|
||||
- Rotation: String
|
||||
- Test Point: String
|
||||
- Station: String
|
||||
- Band: String
|
||||
- Channel: String
|
||||
- Bandwidth: String
|
||||
- RSSI: String
|
||||
- Direction: String
|
||||
@@ -0,0 +1,465 @@
|
||||
# Implementation Plan — Test Dashboard
|
||||
|
||||
## 1. Overview
|
||||
|
||||
A web dashboard that monitors test execution progress by comparing a **target tests directory** (what should run) against a **results directory** (what has run). The backend runs on one machine with access to both directories; the frontend is accessible from any device on the network.
|
||||
|
||||
---
|
||||
|
||||
## 2. Tech Stack
|
||||
|
||||
| Layer | Technology | Rationale |
|
||||
|---|---|---|
|
||||
| Frontend | React + Vite (existing) | Already scaffolded |
|
||||
| Backend | Node.js + Express | Lightweight API + static file serving |
|
||||
| Real-time | Server-Sent Events (SSE) | Simpler than WebSocket for one-way push |
|
||||
| Directory watching | chokidar | Cross-platform file system watcher |
|
||||
| Database | SQLite (via `better-sqlite3`) | Embedded, no separate process, fast reads |
|
||||
| Frontend state | React Query (TanStack Query) | Cache, refetch, and SSE invalidation |
|
||||
| UI | TailwindCSS + shadcn/ui | Rapid, consistent component styling |
|
||||
|
||||
---
|
||||
|
||||
## 3. Project Structure
|
||||
|
||||
```
|
||||
Projects/
|
||||
├── dashboard/ ← React frontend (existing)
|
||||
│ ├── src/
|
||||
│ │ ├── components/
|
||||
│ │ │ ├── StatCard.jsx – metric display card
|
||||
│ │ │ ├── CompletionBar.jsx – progress bar with percentage
|
||||
│ │ │ ├── TestTable.jsx – filterable test list
|
||||
│ │ │ ├── FilterPanel.jsx – tag filter controls
|
||||
│ │ │ └── TimeDisplay.jsx – elapsed / estimated time
|
||||
│ │ ├── hooks/
|
||||
│ │ │ ├── useTests.js – fetch + SSE subscription
|
||||
│ │ │ └── useStats.js – derived stats from test data
|
||||
│ │ ├── lib/
|
||||
│ │ │ └── api.js – axios/fetch base client
|
||||
│ │ ├── App.jsx
|
||||
│ │ └── main.jsx
|
||||
│ ├── package.json
|
||||
│ └── vite.config.js – proxy /api → backend port
|
||||
│
|
||||
└── server/ ← NEW: Node.js backend
|
||||
├── index.js – Express app entry point
|
||||
├── db.js – SQLite schema + query helpers
|
||||
├── watcher.js – chokidar setup + change handlers
|
||||
├── parser.js – filename/foldername → tags
|
||||
├── scanner.js – full directory scan on startup
|
||||
├── sse.js – SSE client registry + broadcast
|
||||
├── routes/
|
||||
│ ├── tests.js – GET /api/tests, GET /api/tests/:id
|
||||
│ ├── stats.js – GET /api/stats
|
||||
│ ├── config.js – GET/POST /api/config (directory paths)
|
||||
│ ├── browse.js – GET /api/browse (server-side directory browser)
|
||||
│ └── events.js – GET /api/events (SSE stream)
|
||||
├── package.json
|
||||
└── .env – TARGET_DIR, RESULTS_DIR, PORT=3001
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. File ID & Tag Parsing
|
||||
|
||||
### 4.1 File ID & Completion Matching
|
||||
|
||||
A **test is completed** when its **file ID** appears in any result directory name.
|
||||
|
||||
**File ID** = the test case code segment extracted from the filename — the segment matching the pattern `R\d+[A-Z0-9]+` (e.g., `R2COERXAC003`, `R5P2PRXAX012`).
|
||||
|
||||
**Target files** live inside subdirectories of the target directory. All target files use the prefix `TC_WIFI_` and extension `.ini`. Each parent directory also contains a `GLOBAL.ini` file that must be **skipped** by the scanner:
|
||||
|
||||
```
|
||||
TP_WIFI_ATT_CDR_GRP1_ROT1_CGW452_WNC_REGRESSION/
|
||||
GLOBAL.ini ← skip
|
||||
TC_WIFI_COE_CGW452_R2COERXAC003_TPT3E_RSSI70_STA4_2GHZ_CH1_BW20_TCP_MIMOFD_SONFD_MESHFD_LPI_UL.ini
|
||||
↑
|
||||
file_id = R2COERXAC003
|
||||
```
|
||||
|
||||
Scanner filter: include only files where `filename.startsWith('TC_WIFI_') && filename.endsWith('.ini')`.
|
||||
|
||||
**Result directories** live as top-level subdirectories of the results directory. The directory name contains the same file ID:
|
||||
|
||||
```
|
||||
COE_CGW452_R2COERXAC003_TPT3E_RSSI70_STA4_2GHZ_CH1_BW20_TCP_MIMOFD_SONFD_MESHFD_LPI_UL/
|
||||
↑
|
||||
file_id = R2COERXAC003
|
||||
COE_CGW452_R2COERXAC003_..._2026-05-16-07-30-14 ← target log file (contains file_id in name)
|
||||
other_file.txt ← ignored
|
||||
...other files
|
||||
```
|
||||
|
||||
A test is **completed** when a result directory name contains the target's `file_id`.
|
||||
|
||||
**Duration per test**: the result directory may contain multiple `.txt` files. Only the `.txt` file(s) whose name includes the `file_id` are scanned. All other `.txt` files are ignored.
|
||||
|
||||
Filter: `filename.endsWith('.txt') && filename.includes(file_id)`
|
||||
|
||||
Scan the matched file for the line:
|
||||
|
||||
```
|
||||
[2026-05-16 09:21:02,105 INFO] Elapsed time : 1:51:00.660866
|
||||
```
|
||||
|
||||
Regex: `/\[.*?INFO\]\s+Elapsed time\s*:\s*([\d]+:[\d]{2}:[\d]{2}\.[\d]+)/`
|
||||
|
||||
The captured group (`1:51:00.660866`) is parsed as `H:MM:SS.microseconds` and converted to total seconds stored in `duration_seconds`. If no matching line is found, `duration_seconds` is left `NULL` and excluded from the elapsed sum and avg calculations.
|
||||
|
||||
**Re-runs**: if multiple `.txt` files match the `file_id` filter (re-run logs), use the one with the **latest** timestamp in its filename for both `completed_at` and `duration_seconds`.
|
||||
|
||||
### 4.2 Tag Parsing
|
||||
|
||||
Tags are parsed from two sources:
|
||||
|
||||
**From the parent folder name** (e.g., `TP_WIFI_ATT_CDR_GRP1_ROT1_CGW452_WNC_REGRESSION`):
|
||||
| Tag | Pattern | Example |
|
||||
|---|---|---|
|
||||
| Rotation | `ROT\d+` | `ROT1` |
|
||||
| Device | `CGW\d+` | `CGW452` |
|
||||
|
||||
**From the target filename** (after stripping `TC_WIFI_` prefix and `.ini` extension):
|
||||
```
|
||||
COE_CGW452_R2COERXAC003_TPT3E_RSSI70_STA4_2GHZ_CH1_BW20_..._UL
|
||||
↑
|
||||
first segment = interference type
|
||||
```
|
||||
|
||||
| Tag | Extraction | Example |
|
||||
|---|---|---|
|
||||
| **Interference** | First segment — fixed enum: `COE`, `P2P`, `P3P` | `COE` |
|
||||
| Device | Regex `CGW\d+` | `CGW452` |
|
||||
| File ID | Regex `R\d+[A-Z0-9]+` | `R2COERXAC003` |
|
||||
| Test Point | Regex `TPT\w+` | `TPT3E` |
|
||||
| RSSI | Regex `RSSI\d+` | `RSSI70` |
|
||||
| Station | Regex `STA\d+` | `STA4` |
|
||||
| Band | Regex `\dGHZ` | `2GHZ` |
|
||||
| Channel | Regex `CH\d+` | `CH1` |
|
||||
| Bandwidth | Regex `BW\d+` | `BW20` |
|
||||
| Direction | Last segment — fixed enum: `UL`, `DL`, `BI` | `UL` |
|
||||
|
||||
**Completion Timestamp**: extracted from the timestamped result file name inside the matching result directory (e.g., `..._2026-05-16-07-30-14` → `2026-05-16 07:30:14`).
|
||||
|
||||
**Interference type** is also validated against the result directory name's first segment (`COE_...`, `P2P_...`, `P3P_...`) as a cross-check.
|
||||
|
||||
---
|
||||
|
||||
## 5. Database Schema
|
||||
|
||||
```sql
|
||||
-- Stores one row per target test file
|
||||
CREATE TABLE tests (
|
||||
id TEXT PRIMARY KEY, -- full derived ID (filename without prefix/ext)
|
||||
file_id TEXT NOT NULL, -- short test case code, e.g. R2COERXAC003
|
||||
parent_dir TEXT NOT NULL, -- parent folder name (TP_WIFI_...)
|
||||
filename TEXT NOT NULL, -- original .ini filename
|
||||
completed INTEGER NOT NULL DEFAULT 0, -- 0 or 1
|
||||
completed_at TEXT, -- ISO timestamp from result file name
|
||||
duration_seconds REAL, -- per-test duration in seconds (from result file or fs timestamps)
|
||||
|
||||
-- parsed tags
|
||||
interference TEXT, -- COE | P2P | P3P
|
||||
device TEXT, -- CGW452 | CGW453
|
||||
rotation TEXT,
|
||||
test_point TEXT,
|
||||
station TEXT,
|
||||
band TEXT,
|
||||
channel TEXT,
|
||||
bandwidth TEXT,
|
||||
rssi TEXT,
|
||||
direction TEXT,
|
||||
|
||||
created_at TEXT NOT NULL DEFAULT (datetime('now'))
|
||||
);
|
||||
|
||||
-- Stores configuration: directory paths AND manual avg time overrides
|
||||
CREATE TABLE config (
|
||||
key TEXT PRIMARY KEY,
|
||||
value TEXT NOT NULL
|
||||
);
|
||||
-- Config keys:
|
||||
-- target_dir – path to target tests directory
|
||||
-- results_dir – path to results directory
|
||||
-- avg_time_coe – manual avg seconds per COE test (NULL = use calculated)
|
||||
-- avg_time_p2p – manual avg seconds per P2P test (NULL = use calculated)
|
||||
-- avg_time_p3p – manual avg seconds per P3P test (NULL = use calculated)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Backend API
|
||||
|
||||
### Endpoints
|
||||
|
||||
| Method | Path | Description |
|
||||
|---|---|---|
|
||||
| `GET` | `/api/tests` | All tests; supports query filters (see below) |
|
||||
| `GET` | `/api/stats` | Aggregated stats object |
|
||||
| `GET` | `/api/events` | SSE stream — pushes `update` events on directory change |
|
||||
| `GET` | `/api/config` | Current directory paths and avg time overrides |
|
||||
| `POST` | `/api/config` | Set `targetDir`, `resultsDir`, avg time overrides; triggers re-scan |
|
||||
| `GET` | `/api/browse` | List subdirectories at a given server path (directory picker) |
|
||||
|
||||
### `GET /api/tests` Query Parameters
|
||||
|
||||
```
|
||||
?completed=true|false
|
||||
&interference=COE|P2P|P3P
|
||||
&device=CGW452
|
||||
&rotation=ROT1
|
||||
&testPoint=TPT3E
|
||||
&station=STA4
|
||||
&band=2GHZ
|
||||
&channel=CH1
|
||||
&bandwidth=BW20
|
||||
&rssi=RSSI70
|
||||
&direction=UL
|
||||
```
|
||||
|
||||
### `GET /api/stats` Response Shape
|
||||
|
||||
```json
|
||||
{
|
||||
"overall": {
|
||||
"total": 200,
|
||||
"completed": 120,
|
||||
"completionRate": 0.60
|
||||
},
|
||||
"cgw452": {
|
||||
"total": 100,
|
||||
"completed": 70,
|
||||
"completionRate": 0.70
|
||||
},
|
||||
"cgw453": {
|
||||
"total": 100,
|
||||
"completed": 50,
|
||||
"completionRate": 0.50
|
||||
},
|
||||
"timing": {
|
||||
"elapsedSeconds": 172800,
|
||||
"estimatedRemainingSeconds": 115200,
|
||||
"byType": {
|
||||
"COE": {
|
||||
"avgSeconds": 450,
|
||||
"avgSource": "calculated",
|
||||
"remaining": 80
|
||||
},
|
||||
"P2P": {
|
||||
"avgSeconds": 300,
|
||||
"avgSource": "manual",
|
||||
"remaining": 50
|
||||
},
|
||||
"P3P": {
|
||||
"avgSeconds": 600,
|
||||
"avgSource": "calculated",
|
||||
"remaining": 30
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Timing logic**:
|
||||
|
||||
- `elapsedSeconds` = `SUM(duration_seconds)` for all completed tests (sum of individual test durations, not wall-clock)
|
||||
- For each interference type (COE, P2P, P3P):
|
||||
- `avgSeconds` = `AVG(duration_seconds) WHERE interference = type AND completed = 1`
|
||||
- If no completed tests exist for that type, `avgSeconds` = value from `config` table (`avg_time_coe` / `avg_time_p2p` / `avg_time_p3p`); `avgSource` = `"manual"`
|
||||
- If a manual override is set in config even when calculated data exists, the manual value takes precedence; `avgSource` = `"manual_override"`
|
||||
- `estimatedRemainingSeconds` = `(avgCOE × COE_remaining) + (avgP2P × P2P_remaining) + (avgP3P × P3P_remaining)`
|
||||
- If any type has remaining tests but no avg time (calculated or manual), that type contributes `null` to the sum and the UI flags it as **input required**
|
||||
|
||||
### `GET /api/browse` — Directory Browser
|
||||
|
||||
Allows the frontend to navigate the server's local filesystem so users can pick directories without typing paths manually.
|
||||
|
||||
**Query parameters**:
|
||||
- `path` (optional) — absolute path to list. If omitted or empty, returns the filesystem roots (e.g., `C:\`, `D:\` on Windows).
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
{
|
||||
"path": "C:\\Tests",
|
||||
"parent": "C:\\",
|
||||
"dirs": [
|
||||
{ "name": "Target", "path": "C:\\Tests\\Target" },
|
||||
{ "name": "Results", "path": "C:\\Tests\\Results" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
- Only **directories** are returned (no files).
|
||||
- Hidden directories (names starting with `.`) are excluded.
|
||||
- If `path` does not exist or is not a directory, returns `400`.
|
||||
- `parent` is `null` when already at a filesystem root.
|
||||
|
||||
---
|
||||
|
||||
## 7. Real-time Updates
|
||||
|
||||
- The backend registers an SSE endpoint at `GET /api/events`
|
||||
- chokidar watches both the target and results directories for `add`, `unlink`, and `change` events
|
||||
- On any change, the backend re-scans the affected path, updates SQLite, and broadcasts an SSE event: `data: {"type":"update"}`
|
||||
- The React frontend subscribes to the SSE stream; on receiving an `update` event it invalidates and refetches stats and test list via React Query
|
||||
|
||||
**`unlink` handling for result directories**: when chokidar detects that a result directory has been deleted, the corresponding test row is reset — `completed = 0`, `completed_at = NULL`, `duration_seconds = NULL`. This ensures the dashboard always reflects the actual state of the filesystem.
|
||||
|
||||
---
|
||||
|
||||
## 8. Frontend Components
|
||||
|
||||
### 8.1 Layout
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────┐
|
||||
│ Test Dashboard [⟳ Refresh] [⚙ Settings] │
|
||||
├──────────┬──────────┬──────────┬────────────┬───────────────┤
|
||||
│ Overall │ CGW452 │ CGW453 │ Time │ Est. Remaining │
|
||||
│ 60% │ 70% │ 50% │ Elapsed │ │
|
||||
│ 120/200 │ 70/100 │ 50/100 │ 48h 0m │ 32h 0m │
|
||||
├──────────┴──────────┴──────────┴────────────┴───────────────┤
|
||||
│ ⚠ No P2P results yet — avg time required for estimate │
|
||||
│ COE avg: 7m 30s (calc) P2P avg: [___] min P3P avg: 10m │
|
||||
├──────────────────────────────────────────────────────────────┤
|
||||
│ [Completed ▾] [Interference ▾] [Device ▾] [Band ▾] ... │
|
||||
├──────────────────────────────────────────────────────────────┤
|
||||
│ File ID │ Type │ Device │ Rotation │ TP │ ... │ Status │
|
||||
│ R2COERXAC003│ COE │ CGW452 │ ROT1 │ TPT3E│ ... │ ✓ │
|
||||
│ R5P2PRXAX012│ P2P │ CGW452 │ ROT1 │ TPT1C│ ... │ ○ │
|
||||
└──────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Inline avg-time input**: When a type has remaining tests but zero completed, a warning banner appears with inline input fields for the missing avg time(s). Submitting saves to `POST /api/config` and immediately recalculates the estimate.
|
||||
|
||||
### 8.2 Component Breakdown
|
||||
|
||||
| Component | Responsibility |
|
||||
|---|---|
|
||||
| `StatCard` | Displays a metric (label, value, sub-value); used for completion rate + counts |
|
||||
| `CompletionBar` | Progress bar with percentage label |
|
||||
| `TimeDisplay` | Formats seconds into `Xh Ym`; shows elapsed and estimated remaining |
|
||||
| `AvgTimeWarning` | Banner shown when a type has remaining tests but no avg time; contains inline inputs |
|
||||
| `FilterPanel` | Dropdown filters for each tag including Interference; maintains filter state |
|
||||
| `TestTable` | Virtualized (react-window) table of tests; columns sortable; File ID as primary ID column |
|
||||
| `ConfigModal` | Form for directory paths (with picker button) + manual avg time overrides per type |
|
||||
| `DirectoryBrowser` | Inline folder picker inside `ConfigModal`; navigates the server filesystem via `/api/browse` |
|
||||
| `StatusBadge` | Green checkmark or grey circle for completed/pending |
|
||||
|
||||
### 8.3 Settings / Config
|
||||
|
||||
A gear icon opens `ConfigModal` with two sections:
|
||||
|
||||
1. **Directories** — target and results directory paths. Each path field has a **Browse** button that opens the `DirectoryBrowser`:
|
||||
- Starts at the filesystem root (lists available drives on Windows)
|
||||
- Displays current path as a clickable breadcrumb
|
||||
- Lists subdirectories; clicking one navigates into it
|
||||
- **Select This Folder** button confirms the selection and populates the path field
|
||||
- **Cancel** closes the browser without changing the field
|
||||
- On save, triggers a full re-scan and re-watch
|
||||
2. **Avg Time Overrides** — three number inputs (COE, P2P, P3P) in minutes. Each shows:
|
||||
- The calculated average from completed tests (if any), labelled `Auto: 7m 30s`
|
||||
- A manual override field; when filled, it takes precedence over the calculated value
|
||||
- Clear button to remove the override and revert to calculated
|
||||
- If no completed tests exist for a type, the field is highlighted with a required indicator
|
||||
|
||||
All config values are POSTed to `POST /api/config` as key/value pairs and persisted in SQLite.
|
||||
|
||||
---
|
||||
|
||||
## 9. Vite Proxy Configuration
|
||||
|
||||
`vite.config.js` is updated to proxy all `/api` requests to the backend, so the React dev server and production build do not need CORS configuration:
|
||||
|
||||
```js
|
||||
// vite.config.js
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3001'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In production, Express serves the built React `dist/` as static files.
|
||||
|
||||
---
|
||||
|
||||
## 10. Implementation Phases
|
||||
|
||||
### Phase 1 — Backend Foundation
|
||||
1. Initialize `server/package.json`; install `express`, `better-sqlite3`, `chokidar`, `dotenv`
|
||||
2. Implement `db.js` — create schema, upsert helpers
|
||||
3. Implement `parser.js` — regex-based tag extraction from filenames and folder names
|
||||
4. Implement `scanner.js` — walk target dir to build test list; walk results dir to mark completions
|
||||
5. Implement `watcher.js` — chokidar watchers for both directories; call scanner on change
|
||||
6. Implement `sse.js` — maintain SSE client set; broadcast on update
|
||||
7. Wire up Express routes and start server
|
||||
|
||||
### Phase 2 — Frontend Core
|
||||
1. Update `vite.config.js` with API proxy
|
||||
2. Install `@tanstack/react-query`, `axios`, `tailwindcss`, `lucide-react`
|
||||
3. Build `api.js` — base fetch helpers + SSE subscription hook
|
||||
4. Build `useTests` and `useStats` hooks
|
||||
5. Build `StatCard`, `CompletionBar`, `TimeDisplay`, `StatusBadge`
|
||||
6. Build `App.jsx` layout with stats row
|
||||
|
||||
### Phase 3 — Test List & Filters
|
||||
1. Build `FilterPanel` with controlled filter state
|
||||
2. Build `TestTable` with all columns + sort
|
||||
3. Wire filters to `GET /api/tests` query params
|
||||
4. Add `ConfigModal` for directory path configuration
|
||||
|
||||
### Phase 4 — Real-time & Polish
|
||||
1. Connect SSE stream in `useTests` / `useStats` to auto-invalidate queries
|
||||
2. Add manual refresh button
|
||||
3. Add loading skeletons and error states
|
||||
4. Mobile-responsive layout adjustments
|
||||
5. Test on secondary device over local network
|
||||
|
||||
### Phase 5 — SSO (Future)
|
||||
- Add authentication middleware to the Express server (e.g., `passport.js` with an OAuth/OIDC provider)
|
||||
- Protect all `/api` routes and the static frontend behind the auth middleware
|
||||
- Add session management (`express-session` + a session store)
|
||||
|
||||
---
|
||||
|
||||
## 11. Key Dependencies
|
||||
|
||||
### Server (`server/package.json`)
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"better-sqlite3": "^9.x",
|
||||
"chokidar": "^4.x",
|
||||
"cors": "^2.x",
|
||||
"dotenv": "^16.x",
|
||||
"express": "^4.x"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Client (`dashboard/package.json` additions)
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.x",
|
||||
"axios": "^1.x",
|
||||
"lucide-react": "^0.x",
|
||||
"tailwindcss": "^4.x"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 12. Resolved Design Decisions
|
||||
|
||||
| # | Decision |
|
||||
|---|---|
|
||||
| 1 | Target prefix is always `TC_WIFI_`, extension always `.ini`. `GLOBAL.ini` present in each parent directory is skipped by the scanner. |
|
||||
| 2 | Interference types are a fixed enum: `COE`, `P2P`, `P3P`. |
|
||||
| 3 | Duration parsed from result `.txt` log line `[... INFO] Elapsed time : H:MM:SS.ffffff`. Tests with no parseable line excluded from avg/sum. |
|
||||
| 4 | If multiple result log files exist in a result directory (re-run), use the file with the **latest** timestamp in its name. |
|
||||
| 5 | Backend runs on port **3001**. |
|
||||
| 6 | When a result directory is deleted, the matching test is reset to pending (`completed=0`, `completed_at=NULL`, `duration_seconds=NULL`). |
|
||||
@@ -0,0 +1,16 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
@@ -0,0 +1,21 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
globals: globals.browser,
|
||||
parserOptions: { ecmaFeatures: { jsx: true } },
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+2764
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "dashboard",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.3.0",
|
||||
"@tanstack/react-query": "^5.100.11",
|
||||
"lucide-react": "^1.16.0",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"tailwindcss": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^10.3.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^17.6.0",
|
||||
"vite": "^8.0.12"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -0,0 +1,181 @@
|
||||
/* Tailwind handles all styling — this file is intentionally empty */
|
||||
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useQueryClient } from '@tanstack/react-query'
|
||||
import { Settings } from 'lucide-react'
|
||||
import { useStats } from './hooks/useStats'
|
||||
import { useTests } from './hooks/useTests'
|
||||
import { useConfig } from './hooks/useConfig'
|
||||
import StatCard from './components/StatCard'
|
||||
import CompletionBar from './components/CompletionBar'
|
||||
import TimeDisplay from './components/TimeDisplay'
|
||||
import FilterPanel from './components/FilterPanel'
|
||||
import TestTable from './components/TestTable'
|
||||
import ConfigModal from './components/ConfigModal'
|
||||
|
||||
export default function App() {
|
||||
const queryClient = useQueryClient()
|
||||
const [showConfig, setShowConfig] = useState(false)
|
||||
const [filters, setFilters] = useState({})
|
||||
|
||||
const { data: stats, isLoading: statsLoading } = useStats()
|
||||
const { data: allTests = [], isLoading: testsLoading } = useTests()
|
||||
const { data: config, isLoading: configLoading } = useConfig()
|
||||
|
||||
// Apply filters client-side
|
||||
const filteredTests = useMemo(() => {
|
||||
return allTests.filter(t => {
|
||||
if (filters.completed !== undefined && filters.completed !== '') {
|
||||
const want = filters.completed === 'true' ? 1 : 0
|
||||
if (t.completed !== want) return false
|
||||
}
|
||||
const strFields = ['interference', 'device', 'rotation', 'test_point',
|
||||
'rssi', 'station', 'band', 'channel', 'bandwidth', 'direction']
|
||||
for (const f of strFields) {
|
||||
if (filters[f] && t[f] !== filters[f]) return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}, [allTests, filters])
|
||||
|
||||
function refresh() {
|
||||
queryClient.invalidateQueries({ queryKey: ['stats'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['tests'] })
|
||||
}
|
||||
|
||||
const noConfig = !configLoading && !config?.target_dir && !config?.results_dir
|
||||
const configuredButEmpty = !configLoading && config?.target_dir && config?.results_dir &&
|
||||
!statsLoading && stats?.overall.total === 0
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col">
|
||||
{/* Top bar */}
|
||||
<header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between">
|
||||
<h1 className="text-lg font-bold tracking-tight">Test Dashboard</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowConfig(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<Settings size={14} />
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 px-6 py-6 flex flex-col gap-6 max-w-screen-2xl mx-auto w-full">
|
||||
|
||||
{/* No-config prompt */}
|
||||
{noConfig && (
|
||||
<div className="bg-blue-950/40 border border-blue-800 rounded-xl px-5 py-4 text-blue-300 text-sm">
|
||||
No directories configured.{' '}
|
||||
<button onClick={() => setShowConfig(true)} className="underline hover:text-blue-100">
|
||||
Open Settings
|
||||
</button>{' '}
|
||||
to point the dashboard at your target and results directories.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Configured but no tests found */}
|
||||
{configuredButEmpty && (
|
||||
<div className="bg-amber-950/40 border border-amber-700 rounded-xl px-5 py-4 text-amber-300 text-sm">
|
||||
Directories are configured but no tests were found.{' '}
|
||||
Ensure the target directory contains subdirectories with <code className="font-mono bg-amber-900/40 px-1 rounded">TC_WIFI_*.ini</code> files.{' '}
|
||||
<button onClick={() => setShowConfig(true)} className="underline hover:text-amber-100">
|
||||
Check Settings
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats row */}
|
||||
{!statsLoading && stats && (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<StatCard
|
||||
label="Overall"
|
||||
value={`${((stats.overall.completionRate ?? 0) * 100).toFixed(1)}%`}
|
||||
sub={`${stats.overall.completed} / ${stats.overall.total} tests`}
|
||||
accent="text-emerald-400"
|
||||
/>
|
||||
<CompletionBar value={stats.overall.completionRate ?? 0} />
|
||||
</div>
|
||||
|
||||
{stats.devices.map(d => (
|
||||
<div key={d.name} className="flex flex-col gap-2">
|
||||
<StatCard
|
||||
label={d.name}
|
||||
value={`${(d.completionRate * 100).toFixed(1)}%`}
|
||||
sub={`${d.completed} / ${d.total}`}
|
||||
/>
|
||||
<CompletionBar value={d.completionRate} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="col-span-2 sm:col-span-1 lg:col-span-2">
|
||||
<TimeDisplay
|
||||
elapsedSeconds={stats.timing.elapsedSeconds}
|
||||
estimatedRemainingSeconds={stats.timing.estimatedRemainingSeconds}
|
||||
byType={stats.timing.byType}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters + Table */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<FilterPanel filters={filters} onChange={setFilters} allTests={allTests} />
|
||||
<p className="text-slate-500 text-xs">
|
||||
Showing {filteredTests.length} of {allTests.length} tests
|
||||
</p>
|
||||
<TestTable tests={filteredTests} isLoading={testsLoading} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{showConfig && <ConfigModal onClose={() => setShowConfig(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,15 @@
|
||||
export default function CompletionBar({ value = 0, label }) {
|
||||
const pct = parseFloat((value * 100).toFixed(1))
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && <p className="text-slate-400 text-xs mb-1">{label}</p>}
|
||||
<div className="h-2 bg-slate-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-emerald-500 rounded-full transition-all duration-500"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-right text-xs text-slate-400 mt-0.5">{pct}%</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import DirectoryBrowser from './DirectoryBrowser'
|
||||
import { useConfig, useSaveConfig } from '../hooks/useConfig'
|
||||
|
||||
function fmtSeconds(s) {
|
||||
if (s == null) return ''
|
||||
const m = Math.round(parseFloat(s) / 60)
|
||||
return String(m)
|
||||
}
|
||||
|
||||
export default function ConfigModal({ onClose }) {
|
||||
const { data: config, isLoading } = useConfig()
|
||||
const { mutate: save, isPending } = useSaveConfig()
|
||||
|
||||
const [form, setForm] = useState({})
|
||||
const [browser, setBrowser] = useState(null) // 'target_dir' | 'results_dir' | null
|
||||
const [scanResult, setScanResult] = useState(null) // { testCount, completedCount } | null
|
||||
const [saveError, setSaveError] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (config) {
|
||||
setForm({
|
||||
target_dir: config.target_dir ?? '',
|
||||
results_dir: config.results_dir ?? '',
|
||||
avg_time_coe: config.avg_time_coe ? fmtSeconds(config.avg_time_coe) : '',
|
||||
avg_time_p2p: config.avg_time_p2p ? fmtSeconds(config.avg_time_p2p) : '',
|
||||
avg_time_p3p: config.avg_time_p3p ? fmtSeconds(config.avg_time_p3p) : '',
|
||||
})
|
||||
}
|
||||
}, [config])
|
||||
|
||||
function handleSave() {
|
||||
setSaveError(null)
|
||||
setScanResult(null)
|
||||
const payload = {
|
||||
target_dir: form.target_dir || null,
|
||||
results_dir: form.results_dir || null,
|
||||
// Convert minutes → seconds; empty/null clears the override
|
||||
avg_time_coe: form.avg_time_coe ? String(parseFloat(form.avg_time_coe) * 60) : null,
|
||||
avg_time_p2p: form.avg_time_p2p ? String(parseFloat(form.avg_time_p2p) * 60) : null,
|
||||
avg_time_p3p: form.avg_time_p3p ? String(parseFloat(form.avg_time_p3p) * 60) : null,
|
||||
}
|
||||
save(payload, {
|
||||
onSuccess: (data) => {
|
||||
if (data?.testCount !== null && data?.testCount !== undefined) {
|
||||
setScanResult({ testCount: data.testCount, completedCount: data.completedCount })
|
||||
// Auto-close after showing result only if tests were found
|
||||
if (data.testCount > 0) setTimeout(onClose, 1500)
|
||||
} else {
|
||||
onClose()
|
||||
}
|
||||
},
|
||||
onError: (err) => {
|
||||
setSaveError(err?.message ?? 'Failed to save settings')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const AVG_FIELDS = [
|
||||
{ key: 'avg_time_coe', label: 'COE avg time (min)' },
|
||||
{ key: 'avg_time_p2p', label: 'P2P avg time (min)' },
|
||||
{ key: 'avg_time_p3p', label: 'P3P avg time (min)' },
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60">
|
||||
<div className="bg-slate-900 border border-slate-700 rounded-xl w-full max-w-lg mx-4 shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-800">
|
||||
<h2 className="text-slate-100 font-semibold">Settings</h2>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-slate-200">✕</button>
|
||||
</div>
|
||||
|
||||
<div className="px-5 py-4 space-y-6">
|
||||
{/* Error banner */}
|
||||
{saveError && (
|
||||
<div className="bg-red-950/50 border border-red-700 rounded-lg px-4 py-3 text-red-300 text-sm">
|
||||
{saveError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scan result banner */}
|
||||
{scanResult !== null && (
|
||||
<div className={`rounded-lg px-4 py-3 text-sm border ${
|
||||
scanResult.testCount === 0
|
||||
? 'bg-amber-950/50 border-amber-700 text-amber-300'
|
||||
: 'bg-emerald-950/50 border-emerald-700 text-emerald-300'
|
||||
}`}>
|
||||
{scanResult.testCount === 0
|
||||
? 'No tests found — check that the target directory contains TC_WIFI_*.ini files in subdirectories.'
|
||||
: `Found ${scanResult.testCount} tests (${scanResult.completedCount} completed).`}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-slate-500 text-sm">Loading…</p>
|
||||
) : (
|
||||
<>
|
||||
{/* Directories */}
|
||||
<section>
|
||||
<h3 className="text-slate-300 text-xs uppercase tracking-widest mb-3">Directories</h3>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ key: 'target_dir', label: 'Target Tests Directory' },
|
||||
{ key: 'results_dir', label: 'Results Directory' },
|
||||
].map(({ key, label }) => (
|
||||
<div key={key}>
|
||||
<label className="text-slate-400 text-xs block mb-1">{label}</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={form[key] ?? ''}
|
||||
onChange={e => setForm(f => ({ ...f, [key]: e.target.value }))}
|
||||
placeholder="C:\path\to\folder"
|
||||
className="flex-1 bg-slate-800 border border-slate-700 text-slate-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setBrowser(key)}
|
||||
className="px-3 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Browse
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Avg Time Overrides */}
|
||||
<section>
|
||||
<h3 className="text-slate-300 text-xs uppercase tracking-widest mb-1">Avg Time Overrides</h3>
|
||||
<p className="text-slate-500 text-xs mb-3">
|
||||
Manually set avg minutes per test type. Leave blank to use calculated average from completed tests.
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{AVG_FIELDS.map(({ key, label }) => (
|
||||
<div key={key}>
|
||||
<label className="text-slate-400 text-xs block mb-1">{label}</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
value={form[key] ?? ''}
|
||||
onChange={e => setForm(f => ({ ...f, [key]: e.target.value }))}
|
||||
placeholder="auto"
|
||||
className="w-full bg-slate-800 border border-slate-700 text-slate-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-end gap-2 px-5 py-4 border-t border-slate-800">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isPending}
|
||||
className="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{isPending ? 'Saving…' : 'Save & Rescan'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{browser && (
|
||||
<DirectoryBrowser
|
||||
onSelect={path => setForm(f => ({ ...f, [browser]: path }))}
|
||||
onClose={() => setBrowser(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import { useState } from 'react'
|
||||
import { browse } from '../lib/api'
|
||||
|
||||
export default function DirectoryBrowser({ onSelect, onClose }) {
|
||||
const [current, setCurrent] = useState(null) // null = roots
|
||||
const [parent, setParent] = useState(null)
|
||||
const [dirs, setDirs] = useState(null) // null = not loaded yet
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
async function navigate(path) {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const data = await browse(path)
|
||||
setCurrent(data.path)
|
||||
setParent(data.parent)
|
||||
setDirs(data.dirs)
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Load roots on first render
|
||||
if (dirs === null && !loading && !error) {
|
||||
navigate(null)
|
||||
}
|
||||
|
||||
const breadcrumbs = current ? current.replace(/\\/g, '/').split('/').filter(Boolean) : []
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
|
||||
<div className="bg-slate-900 border border-slate-700 rounded-xl w-full max-w-lg mx-4 flex flex-col shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-slate-800">
|
||||
<span className="text-slate-200 font-semibold text-sm">Browse Folder</span>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-slate-200">✕</button>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb */}
|
||||
<div className="px-4 py-2 border-b border-slate-800 flex items-center gap-1 text-xs text-slate-400 flex-wrap min-h-[36px]">
|
||||
<button onClick={() => navigate(null)} className="hover:text-slate-200">Drives</button>
|
||||
{breadcrumbs.map((part, i) => {
|
||||
const path = breadcrumbs.slice(0, i + 1).join('\\') + (i === 0 ? '\\' : '')
|
||||
return (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<span>/</span>
|
||||
<button
|
||||
onClick={() => navigate(path)}
|
||||
className="hover:text-slate-200 truncate max-w-[120px]"
|
||||
title={path}
|
||||
>
|
||||
{part}
|
||||
</button>
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Directory list */}
|
||||
<div className="overflow-y-auto max-h-64 divide-y divide-slate-800">
|
||||
{loading && (
|
||||
<p className="text-slate-500 text-sm text-center py-8">Loading…</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="text-red-400 text-sm text-center py-8">{error}</p>
|
||||
)}
|
||||
{!loading && !error && parent !== null && (
|
||||
<button
|
||||
onClick={() => navigate(parent)}
|
||||
className="w-full text-left px-4 py-2.5 text-slate-400 hover:bg-slate-800 text-sm transition-colors"
|
||||
>
|
||||
↑ ..
|
||||
</button>
|
||||
)}
|
||||
{!loading && !error && dirs?.map(d => (
|
||||
<button
|
||||
key={d.path}
|
||||
onClick={() => navigate(d.path)}
|
||||
className="w-full text-left px-4 py-2.5 text-slate-300 hover:bg-slate-800 text-sm transition-colors flex items-center gap-2"
|
||||
>
|
||||
<span className="text-slate-500">📁</span>
|
||||
{d.name}
|
||||
</button>
|
||||
))}
|
||||
{!loading && !error && dirs?.length === 0 && (
|
||||
<p className="text-slate-500 text-sm text-center py-8">No subdirectories</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between gap-2 px-4 py-3 border-t border-slate-800">
|
||||
<p className="text-xs text-slate-500 truncate flex-1" title={current ?? ''}>
|
||||
{current ?? 'Select a folder'}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-3 py-1.5 text-sm rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
disabled={!current}
|
||||
onClick={() => { onSelect(current); onClose() }}
|
||||
className="px-3 py-1.5 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Select This Folder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
const FILTER_FIELDS = [
|
||||
{ key: 'completed', label: 'Status', options: [{ value: '', label: 'All' }, { value: 'true', label: 'Completed' }, { value: 'false', label: 'Pending' }] },
|
||||
{ key: 'interference', label: 'Type', options: [{ value: '', label: 'All' }, { value: 'COE', label: 'COE' }, { value: 'P2P', label: 'P2P' }, { value: 'P3P', label: 'P3P' }] },
|
||||
]
|
||||
|
||||
const DERIVED_FIELDS = [
|
||||
{ key: 'device', label: 'Device' },
|
||||
{ key: 'rotation', label: 'Rotation' },
|
||||
{ key: 'test_point', label: 'Test Point' },
|
||||
{ key: 'rssi', label: 'RSSI' },
|
||||
{ key: 'station', label: 'Station' },
|
||||
{ key: 'band', label: 'Band' },
|
||||
{ key: 'channel', label: 'Channel' },
|
||||
{ key: 'bandwidth', label: 'Bandwidth' },
|
||||
{ key: 'direction', label: 'Direction' },
|
||||
]
|
||||
|
||||
function unique(tests, key) {
|
||||
return [...new Set(tests.map(t => t[key]).filter(Boolean))].sort()
|
||||
}
|
||||
|
||||
export default function FilterPanel({ filters, onChange, allTests = [] }) {
|
||||
function set(key, value) {
|
||||
onChange({ ...filters, [key]: value })
|
||||
}
|
||||
|
||||
function reset() {
|
||||
onChange({})
|
||||
}
|
||||
|
||||
const hasActive = Object.values(filters).some(v => v !== '' && v != null)
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
{FILTER_FIELDS.map(({ key, label, options }) => (
|
||||
<select
|
||||
key={key}
|
||||
value={filters[key] ?? ''}
|
||||
onChange={e => set(key, e.target.value)}
|
||||
className="bg-slate-800 border border-slate-700 text-slate-200 text-sm rounded-lg px-3 py-1.5 focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
<option value="">{label}: All</option>
|
||||
{options.slice(1).map(o => (
|
||||
<option key={o.value} value={o.value}>{o.label}</option>
|
||||
))}
|
||||
</select>
|
||||
))}
|
||||
|
||||
{DERIVED_FIELDS.map(({ key, label }) => {
|
||||
const vals = unique(allTests, key)
|
||||
if (vals.length === 0) return null
|
||||
return (
|
||||
<select
|
||||
key={key}
|
||||
value={filters[key] ?? ''}
|
||||
onChange={e => set(key, e.target.value)}
|
||||
className="bg-slate-800 border border-slate-700 text-slate-200 text-sm rounded-lg px-3 py-1.5 focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
<option value="">{label}: All</option>
|
||||
{vals.map(v => <option key={v} value={v}>{v}</option>)}
|
||||
</select>
|
||||
)
|
||||
})}
|
||||
|
||||
{hasActive && (
|
||||
<button
|
||||
onClick={reset}
|
||||
className="text-slate-400 hover:text-slate-200 text-sm px-2 py-1.5 rounded-lg hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
✕ Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export default function StatCard({ label, value, sub, accent }) {
|
||||
return (
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col gap-1 min-w-0">
|
||||
<p className="text-slate-400 text-xs uppercase tracking-widest truncate">{label}</p>
|
||||
<p className={`text-3xl font-bold ${accent ?? 'text-slate-100'}`}>{value}</p>
|
||||
{sub && <p className="text-slate-400 text-sm">{sub}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export default function StatusBadge({ completed }) {
|
||||
return completed
|
||||
? <span className="inline-flex items-center gap-1 text-emerald-400 text-sm font-medium">✓ Done</span>
|
||||
: <span className="inline-flex items-center gap-1 text-slate-500 text-sm">○ Pending</span>
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import { useState } from 'react'
|
||||
import StatusBadge from './StatusBadge'
|
||||
|
||||
const COLS = [
|
||||
{ key: 'file_id', label: 'File ID' },
|
||||
{ key: 'interference', label: 'Type' },
|
||||
{ key: 'device', label: 'Device' },
|
||||
{ key: 'rotation', label: 'Rotation' },
|
||||
{ key: 'test_point', label: 'Test Point' },
|
||||
{ key: 'rssi', label: 'RSSI' },
|
||||
{ key: 'station', label: 'Station' },
|
||||
{ key: 'band', label: 'Band' },
|
||||
{ key: 'channel', label: 'Channel' },
|
||||
{ key: 'bandwidth', label: 'BW' },
|
||||
{ key: 'direction', label: 'Dir' },
|
||||
{ key: 'completed', label: 'Status' },
|
||||
{ key: 'duration_seconds', label: 'Duration' },
|
||||
]
|
||||
|
||||
function fmtDuration(s) {
|
||||
if (s == null) return '—'
|
||||
const h = Math.floor(s / 3600)
|
||||
const m = Math.floor((s % 3600) / 60)
|
||||
const sec = Math.floor(s % 60)
|
||||
if (h > 0) return `${h}h ${m}m`
|
||||
if (m > 0) return `${m}m ${sec}s`
|
||||
return `${sec}s`
|
||||
}
|
||||
|
||||
export default function TestTable({ tests = [], isLoading }) {
|
||||
const [sort, setSort] = useState({ key: 'file_id', dir: 1 })
|
||||
|
||||
function toggleSort(key) {
|
||||
setSort(s => ({ key, dir: s.key === key ? -s.dir : 1 }))
|
||||
}
|
||||
|
||||
const sorted = [...tests].sort((a, b) => {
|
||||
let av = a[sort.key] ?? ''
|
||||
let bv = b[sort.key] ?? ''
|
||||
if (typeof av === 'number' || typeof bv === 'number') return (av - bv) * sort.dir
|
||||
return String(av).localeCompare(String(bv)) * sort.dir
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-16 text-slate-500">
|
||||
Loading tests…
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (tests.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-16 text-slate-500">
|
||||
No tests match the current filters.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto rounded-xl border border-slate-800">
|
||||
<table className="w-full text-sm text-left text-slate-300 border-collapse">
|
||||
<thead className="bg-slate-800 text-slate-400 text-xs uppercase tracking-wider">
|
||||
<tr>
|
||||
{COLS.map(col => (
|
||||
<th
|
||||
key={col.key}
|
||||
onClick={() => toggleSort(col.key)}
|
||||
className="px-3 py-3 cursor-pointer select-none whitespace-nowrap hover:text-slate-200 transition-colors"
|
||||
>
|
||||
{col.label}
|
||||
{sort.key === col.key && (
|
||||
<span className="ml-1">{sort.dir === 1 ? '↑' : '↓'}</span>
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sorted.map((test, i) => (
|
||||
<tr
|
||||
key={test.id}
|
||||
className={`border-t border-slate-800 transition-colors ${
|
||||
test.completed
|
||||
? 'bg-emerald-950/20 hover:bg-emerald-950/40'
|
||||
: i % 2 === 0 ? 'bg-slate-900 hover:bg-slate-800' : 'bg-slate-900/60 hover:bg-slate-800'
|
||||
}`}
|
||||
>
|
||||
<td className="px-3 py-2 font-mono text-xs text-slate-200 whitespace-nowrap">{test.file_id ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">
|
||||
<span className={`text-xs font-semibold px-1.5 py-0.5 rounded ${
|
||||
test.interference === 'COE' ? 'bg-blue-900/50 text-blue-300' :
|
||||
test.interference === 'P2P' ? 'bg-purple-900/50 text-purple-300' :
|
||||
test.interference === 'P3P' ? 'bg-orange-900/50 text-orange-300' : ''
|
||||
}`}>
|
||||
{test.interference ?? '—'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.device ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.rotation ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.test_point ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.rssi ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.station ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.band ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.channel ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.bandwidth ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">{test.direction ?? '—'}</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap"><StatusBadge completed={test.completed} /></td>
|
||||
<td className="px-3 py-2 whitespace-nowrap text-slate-400">{fmtDuration(test.duration_seconds)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
function fmt(seconds) {
|
||||
if (seconds == null) return null
|
||||
const h = Math.floor(seconds / 3600)
|
||||
const m = Math.floor((seconds % 3600) / 60)
|
||||
if (h > 0) return `${h}h ${m}m`
|
||||
return `${m}m`
|
||||
}
|
||||
|
||||
export default function TimeDisplay({ elapsedSeconds, estimatedRemainingSeconds, byType }) {
|
||||
const missingTypes = byType
|
||||
? Object.entries(byType)
|
||||
.filter(([, v]) => v.remaining > 0 && v.avgSeconds === null)
|
||||
.map(([t]) => t)
|
||||
: []
|
||||
|
||||
return (
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col gap-3">
|
||||
<div className="flex gap-6">
|
||||
<div>
|
||||
<p className="text-slate-400 text-xs uppercase tracking-widest">Time Elapsed</p>
|
||||
<p className="text-2xl font-bold text-slate-100 mt-0.5">
|
||||
{fmt(elapsedSeconds) ?? '—'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-400 text-xs uppercase tracking-widest">Est. Remaining</p>
|
||||
<p className={`text-2xl font-bold mt-0.5 ${estimatedRemainingSeconds != null ? 'text-slate-100' : 'text-amber-400'}`}>
|
||||
{estimatedRemainingSeconds != null ? fmt(estimatedRemainingSeconds) : '—'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{missingTypes.length > 0 && (
|
||||
<p className="text-amber-400 text-xs">
|
||||
⚠ No completed {missingTypes.join('/')} tests yet — enter avg time in Settings to estimate.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { getConfig, saveConfig } from '../lib/api'
|
||||
|
||||
export function useConfig() {
|
||||
return useQuery({ queryKey: ['config'], queryFn: getConfig })
|
||||
}
|
||||
|
||||
export function useSaveConfig() {
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: saveConfig,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['config'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['stats'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['tests'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useEffect } from 'react'
|
||||
import { getStats } from '../lib/api'
|
||||
|
||||
export function useStats() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
// Subscribe to SSE updates once; invalidate both stats and tests on any update
|
||||
useEffect(() => {
|
||||
const es = new EventSource('/api/events')
|
||||
es.onmessage = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data)
|
||||
if (data.type === 'update') {
|
||||
queryClient.invalidateQueries({ queryKey: ['stats'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['tests'] })
|
||||
}
|
||||
} catch { /* ignore malformed */ }
|
||||
}
|
||||
return () => es.close()
|
||||
}, [queryClient])
|
||||
|
||||
return useQuery({ queryKey: ['stats'], queryFn: getStats, refetchInterval: 30_000 })
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { getTests } from '../lib/api'
|
||||
|
||||
export function useTests(filters = {}) {
|
||||
return useQuery({
|
||||
queryKey: ['tests', filters],
|
||||
queryFn: () => getTests(filters),
|
||||
keepPreviousData: true,
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "tailwindcss";
|
||||
@@ -0,0 +1,24 @@
|
||||
const BASE = '/api'
|
||||
|
||||
export async function apiFetch(path, options = {}) {
|
||||
const res = await fetch(`${BASE}${path}`, {
|
||||
headers: { 'Content-Type': 'application/json', ...options.headers },
|
||||
...options,
|
||||
})
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => res.statusText)
|
||||
throw new Error(text || res.statusText)
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export const getStats = () => apiFetch('/stats')
|
||||
export const getTests = (params = {}) => {
|
||||
const qs = new URLSearchParams(
|
||||
Object.entries(params).filter(([, v]) => v !== '' && v !== undefined && v !== null)
|
||||
).toString()
|
||||
return apiFetch(`/tests${qs ? `?${qs}` : ''}`)
|
||||
}
|
||||
export const getConfig = () => apiFetch('/config')
|
||||
export const saveConfig = (body) => apiFetch('/config', { method: 'POST', body: JSON.stringify(body) })
|
||||
export const browse = (path) => apiFetch(`/browse${path ? `?path=${encodeURIComponent(path)}` : ''}`)
|
||||
@@ -0,0 +1,17 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { staleTime: 10_000, retry: 1 } },
|
||||
})
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<App />
|
||||
</QueryClientProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,13 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
server: {
|
||||
host: true,
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3001',
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user