feat: axon panel #51
feat: axon panel #51
Conversation
Greptile OverviewGreptile SummaryThis PR adds a new Vue 3/Vite web control panel ( Key merge blockers to address:
|
| Filename | Overview |
|---|---|
| CLAUDE.md | Updated architecture/docs for axon_panel and mock middleware, but repo tree section still references tools/axon_panel (inconsistent with move to apps/axon_panel). |
| Makefile | Adds mock middleware build/test targets but contains unresolved git merge conflict markers that will break make parsing. |
| apps/axon_recorder/http_server.cpp | Extended /rpc/state response to include cached task_config metadata via callbacks_.get_task_config; change is additive and guarded by callback existence. |
| apps/axon_recorder/test/e2e/run_e2e_tests.sh | Updated E2E runner to use new mock middleware plugin, but plugin path resolution assumes a source-tree build directory and will often fail after make build-mock. |
| apps/axon_panel/src/api/rpc.js | Added axios-based RPC client; currently logs full request/response payloads unconditionally (should be gated/removed for production). |
| apps/axon_panel/vite.config.js | Added Vite dev server proxy; hard-codes port 3000 while docs mention 5173 (needs alignment). |
| middlewares/mock/src/mock_plugin/CMakeLists.txt | Introduced standalone CMake project for mock plugin + tests; builds into a local build dir (drives path assumptions in scripts). |
Sequence Diagram
sequenceDiagram
participant Panel as axon_panel (Vue SPA)
participant RPC as axon_recorder HTTP RPC
participant Rec as axon_recorder core
participant Plug as Plugin (ROS/mock)
Panel->>RPC: POST /rpc/status
RPC->>Rec: read cached task config + recorder state
Rec-->>RPC: state + task metadata
RPC-->>Panel: status JSON
alt User starts recording
Panel->>RPC: POST /rpc/config (task config)
RPC->>Rec: set task config
Panel->>RPC: POST /rpc/begin
RPC->>Rec: begin()
Rec->>Plug: publish/subscribe via plugin ABI
Plug-->>Rec: messages/events
Rec-->>RPC: OK
RPC-->>Panel: OK
end
loop Auto-reconnect/poll
Panel->>RPC: POST /rpc/status
RPC-->>Panel: status JSON
end
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| import axios from 'axios' | ||
|
|
||
| const BASE_URL = import.meta.env.VITE_API_BASE_URL || '' | ||
|
|
||
| // Create axios instance with interceptors for debugging | ||
| const apiClient = axios.create({ | ||
| baseURL: BASE_URL, | ||
| headers: { | ||
| 'Content-Type': 'application/json' | ||
| } | ||
| }) | ||
|
|
||
| // Request interceptor | ||
| apiClient.interceptors.request.use( | ||
| (config) => { | ||
| console.log('[API Request]', config.method.toUpperCase(), config.url, config.data) | ||
| return config | ||
| }, | ||
| (error) => { | ||
| console.error('[API Request Error]', error) | ||
| return Promise.reject(error) | ||
| } | ||
| ) | ||
|
|
There was a problem hiding this comment.
Debug logging in production
The axios request/response interceptors always console.log full request payloads (config.data) and response bodies. That will leak task metadata into browser logs and will also be noisy in production builds. If you want this for dev, gate it behind a dev flag (e.g., if (import.meta.env.DEV)) or remove it before merging.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/axon_panel/src/api/rpc.js
Line: 1:24
Comment:
**Debug logging in production**
The axios request/response interceptors always `console.log` full request payloads (`config.data`) and response bodies. That will leak task metadata into browser logs and will also be noisy in production builds. If you want this for dev, gate it behind a dev flag (e.g., `if (import.meta.env.DEV)`) or remove it before merging.
How can I resolve this? If you propose a fix, please make it concise.| plugins: [vue()], | ||
| server: { | ||
| port: 3000, | ||
| host: '0.0.0.0', | ||
| proxy: { | ||
| '/rpc': { | ||
| target: 'http://localhost:8080', | ||
| changeOrigin: true |
There was a problem hiding this comment.
Dev server port mismatch
The PR description/docs mention the panel dev server at http://localhost:5173, but vite.config.js hard-codes server.port = 3000. This will confuse users following the docs.
Either update the docs to 3000 or drop the explicit port so Vite uses its default.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/axon_panel/vite.config.js
Line: 5:12
Comment:
**Dev server port mismatch**
The PR description/docs mention the panel dev server at `http://localhost:5173`, but `vite.config.js` hard-codes `server.port = 3000`. This will confuse users following the docs.
Either update the docs to 3000 or drop the explicit port so Vite uses its default.
How can I resolve this? If you propose a fix, please make it concise.| │ (Vue 3 Web UI) │ State Control │ (C++ Backend) │ | ||
| │ - Monitor state │ - config │ - HTTP RPC Server │ | ||
| │ - Control buttons │ - begin │ - Plugin Loader │ | ||
| │ - View stats │ - pause/resume │ - MCAP Writer │ | ||
| │ - Activity log │ - finish/cancel │ - Worker Threads │ | ||
| └─────────────────────┘ └──────────┬──────────┘ | ||
| │ | ||
| │ Upload requests | ||
| ▼ | ||
| ┌─────────────────────┐ | ||
| │ axon_transfer │ | ||
| │ (Transfer Daemon) │ | ||
| │ - S3 multipart │ | ||
| │ - Retry logic │ | ||
| │ - State recovery │ | ||
| └──────────┬──────────┘ | ||
| │ | ||
| ▼ | ||
| ┌─────────────────────┐ | ||
| │ S3 Storage │ | ||
| └─────────────────────┘ | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Outdated repo layout docs
CLAUDE.md still documents tools/axon_panel, but this PR moved the panel to apps/axon_panel (per PR summary and file tree). As written, the documented repo structure is now incorrect.
Update the tree snippet under “Axon/” to reflect the current location and remove the stale tools/axon_panel entry.
Prompt To Fix With AI
This is a comment left during a code review.
Path: CLAUDE.md
Line: 140:162
Comment:
**Outdated repo layout docs**
`CLAUDE.md` still documents `tools/axon_panel`, but this PR moved the panel to `apps/axon_panel` (per PR summary and file tree). As written, the documented repo structure is now incorrect.
Update the tree snippet under “Axon/” to reflect the current location and remove the stale `tools/axon_panel` entry.
How can I resolve this? If you propose a fix, please make it concise.
Additional Comments (3)
This file still contains unresolved git merge conflict markers ( Prompt To Fix With AIThis is a comment left during a code review.
Path: Makefile
Line: 220:236
Comment:
**Merge conflict markers**
This file still contains unresolved git merge conflict markers (`<<<<<<<`, `=======`, `>>>>>>>`). `make` will fail to parse this, and it’s a hard blocker for merging. Please resolve the conflict and remove the markers, keeping the intended `test-uploader` behavior.
How can I resolve this? If you propose a fix, please make it concise.
Consider using only Prompt To Fix With AIThis is a comment left during a code review.
Path: apps/axon_recorder/test/e2e/run_e2e_tests.sh
Line: 35:52
Comment:
**Incorrect mock plugin path**
`MOCK_PLUGIN` points into `middlewares/mock/src/mock_plugin/build/...` under the source tree, but the mock plugin is built via CMake into the main build tree (i.e., under `${BUILD_DIR}/...`), not by default into a `build/` folder inside the source directory. As written, the script will often fail to find the plugin even after `make build-mock`.
Consider using only `${BUILD_DIR}/middlewares/mock_plugin/libmock_plugin.so` (or whatever the actual CMake output path is) and removing the source-tree `.../src/mock_plugin/build/...` assumptions.
How can I resolve this? If you propose a fix, please make it concise.
There are additional merge conflict markers in the Prompt To Fix With AIThis is a comment left during a code review.
Path: Makefile
Line: 480:546
Comment:
**More unresolved conflicts**
There are additional merge conflict markers in the `clean` target (`<<<<<<< HEAD` / `=======` / `>>>>>>>`) which will break `make clean` parsing. Please resolve this conflict as well and remove the markers.
How can I resolve this? If you propose a fix, please make it concise. |
1 participant
Summary
Add Vue 3 web control panel (axon_panel) for browser-based recorder monitoring and control, implement mock plugin with C ABI interface for independent testing, and add placeholder apps for axon_config and axon_transfer.
Motivation
The recorder needs a user-friendly web interface for monitoring state, controlling recording operations, and viewing activity logs. Additionally, a mock plugin enables comprehensive E2E testing without requiring a full ROS environment, improving CI/CD reliability and development velocity.
Changes
Web Control Panel (apps/axon_panel/)
Mock Plugin (middlewares/mock/src/mock_plugin/)
HTTP RPC API Enhancements (apps/axon_recorder/http_server.cpp)
/rpc/statusendpoint now returns cached task configurationApplication Structure Updates
axon_panelfromtools/toapps/for better organizationDocumentation
Testing
npm run devat http://localhost:5173)npm run build)Backward Compatibility
/rpc/statusresponse fields are additiveRelated Files
Added:
Modified:
Deleted: