34 lines
1.9 KiB
Markdown
34 lines
1.9 KiB
Markdown
I will implement **Phase 4.1: Management UI** by upgrading the current single-file dashboard into a feature-rich Admin UI using Vue 3 (via CDN) and adding necessary backend proxy support.
|
|
|
|
### 1. Gateway Enhancements
|
|
- **Add Dependencies**: Add `reqwest` to `gateway/Cargo.toml` to enable proxying requests to internal services (Loki).
|
|
- **Loki Proxy**: Implement a `/platform/v1/logs` endpoint in `gateway/src/main.rs` that forwards LogQL queries to the internal Loki instance (`http://loki:3100`). This allows the frontend to securely query logs without exposing Loki directly.
|
|
- **Storage & Realtime Access**: Ensure existing APIs (`/storage/v1`, `/realtime/v1`) are accessible from the dashboard (using the service role key for admin actions).
|
|
|
|
### 2. Admin UI Implementation (`web/index.html`)
|
|
Refactor the existing HTML file into a **Vue 3 Single Page Application** with the following features:
|
|
- **Tabbed Interface**: Clean navigation between Dashboard, Storage, Realtime, and Logs.
|
|
- **Dashboard Tab**:
|
|
- List and manage Projects and Users (existing functionality improved).
|
|
- **Storage Browser Tab**:
|
|
- List all S3 buckets.
|
|
- Browse objects within buckets.
|
|
- Upload files directly via the UI.
|
|
- Preview/Download links for objects.
|
|
- **Realtime Inspector Tab**:
|
|
- WebSocket client to connect to `ws://localhost:8000/realtime/v1/websocket`.
|
|
- UI to subscribe to specific channels (e.g., `room:lobby`).
|
|
- Live log of sent/received messages.
|
|
- **Logs Viewer Tab**:
|
|
- Input field for LogQL queries (e.g., `{app="gateway"}`).
|
|
- Time range selector.
|
|
- Display formatted log results fetched via the new proxy endpoint.
|
|
|
|
### 3. Verification
|
|
- Rebuild and run the Gateway.
|
|
- Verify the Admin UI at `http://localhost:8000/dashboard`.
|
|
- Test each tab:
|
|
- **Storage**: Upload a test file and verify it appears in the list.
|
|
- **Realtime**: Connect and send a test message.
|
|
- **Logs**: Query logs and verify output from Loki.
|