Migrate from leptos to vue.js#44
Open
DanielSarmiento04 wants to merge 11 commits into
Open
Conversation
…etrics and improve polling mechanism
- Implemented core components and views for the new Vue 3 application. - Added routing with Vue Router for dashboard, routes, and configuration views. - Integrated Pinia for state management and created a counter store. - Developed API service for backend communication with RESTful endpoints. - Created various icons as Vue components for UI consistency. - Added unit tests for HelloWorld component using Vitest. - Established TypeScript interfaces for API responses and application settings. - Styled components and views to match existing design. - Configured Vite for development and production builds, including proxy settings. - Documented migration tasks and technical constraints in task.md.
… Dashboard, Config, and Routes views; enhance sidebar and navigation elements
…ig.ts to load environment variables for API and WebSocket targets
…handling in main server
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request migrates the Kairos Gateway UI from Leptos to a decoupled Vue 3 and TypeScript application, removing the legacy Rust-based frontend and updating the gateway backend to support the new architecture. The review identifies several issues, such as the accidental commitment of node_modules cache files, invalid dependency versions in package.json, and a typo in an SVG namespace. Further feedback suggests improving Rust data wrapping by using Data::from instead of Data::new for existing Arc instances, and enhancing the frontend user experience by replacing alert() calls with non-blocking notifications and providing feedback for asynchronous operations.
| @@ -0,0 +1,75 @@ | |||
| { | |||
Contributor
There was a problem hiding this comment.
The node_modules directory and its cache files should not be committed to the repository. This significantly increases the repository size and includes environment-specific artifacts. Please remove this file and ensure that node_modules/ is correctly listed in your .gitignore file to prevent dependency artifacts from being tracked.
Comment on lines
+42
to
+47
| "prettier": "3.8.3", | ||
| "typescript": "~6.0.0", | ||
| "vite": "^8.0.8", | ||
| "vite-plugin-vue-devtools": "^8.1.1", | ||
| "vitest": "^4.1.4", | ||
| "vue-tsc": "^3.2.6" |
Contributor
There was a problem hiding this comment.
Several dependency versions in this file (prettier, typescript, vite, vitest, vue-tsc) appear to be invalid or refer to non-existent future versions. For example, TypeScript is currently at 5.x and Vite is at 6.x. These invalid versions will cause npm install to fail. Please update them to current stable versions.
Suggested change
| "prettier": "3.8.3", | |
| "typescript": "~6.0.0", | |
| "vite": "^8.0.8", | |
| "vite-plugin-vue-devtools": "^8.1.1", | |
| "vitest": "^4.1.4", | |
| "vue-tsc": "^3.2.6" | |
| "prettier": "^3.4.0", | |
| "typescript": "~5.7.0", | |
| "vite": "^6.0.0", | |
| "vite-plugin-vue-devtools": "^7.0.0", | |
| "vitest": "^3.0.0", | |
| "vue-tsc": "^2.0.0" |
| .app_data(actix_web::web::Data::new(metrics_store.clone())) | ||
| .app_data(actix_web::web::Data::new(route_manager.clone())) | ||
| .app_data(actix_web::web::Data::new(route_handler.clone())) | ||
| .app_data(actix_web::web::Data::new(config_manager.clone())) |
Contributor
There was a problem hiding this comment.
config_manager is already wrapped in an Arc. Using Data::new wraps it again, resulting in Data<Arc<ConfigManager>>. You should use Data::from to share the existing Arc and avoid redundant wrapping.
.app_data(actix_web::web::Data::from(config_manager.clone()))| .app_data(actix_web::web::Data::new(metrics_store.clone())) | ||
| .app_data(actix_web::web::Data::new(route_manager.clone())) | ||
| .app_data(actix_web::web::Data::new(route_handler.clone())) | ||
| .app_data(actix_web::web::Data::new(config_manager.clone())) |
Contributor
There was a problem hiding this comment.
Redundant Arc wrapping detected here as well. Use Data::from to share the existing Arc instance.
.app_data(actix_web::web::Data::from(config_manager.clone()))| showModal.value = false | ||
| await loadRoutes() | ||
| } catch(e) { | ||
| alert("Failed to save route:\n" + e) |
Contributor
There was a problem hiding this comment.
Using alert() for error reporting is not recommended in modern single-page applications as it is synchronous and provides a poor user experience. Consider implementing a non-blocking notification system (e.g., a toast or an error banner component) to display feedback to the user.
| <h1>Global Configuration</h1> | ||
| <p class="subtitle">System settings, AI providers, and middleware.</p> | ||
| </div> | ||
| <button class="btn-primary" @click="apiService.triggerReload()">Reload Backend Config</button> |
Contributor
There was a problem hiding this comment.
The triggerReload call is asynchronous but its result is not handled. Users will not receive any feedback if the reload succeeds or fails. Consider adding a loading state and showing a success/error message after the operation completes.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the kairos-rs admin UI from the embedded Leptos (Rust/WASM) implementation to a decoupled Vue 3 + TypeScript SPA, while also wiring a backend config hot-reload endpoint used by the new UI.
Changes:
- Added a new Vue 3 + Vite + TypeScript frontend (
frontend/kairos-ui) with initial Dashboard/Routes/Config views and an API service layer. - Removed the Leptos-based
crates/kairos-uicrate from the workspace and deleted its implementation files. - Added gateway wiring for config hot-reload (ConfigManager +
config_reloadroute configuration).
Reviewed changes
Copilot reviewed 88 out of 98 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| task.md | Migration plan / implementation checklist for Leptos → Vue. |
| node_modules/.cache/prettier/.prettier-caches/9581c5350313006398bc4f7aede02c4abddd5e34.json | Adds a Prettier cache artifact (should not be committed). |
| frontend/kairos-ui/vitest.config.ts | Adds Vitest configuration for unit testing. |
| frontend/kairos-ui/vite.config.ts | Adds Vite config including proxying to the Rust backend (HTTP + WS). |
| frontend/kairos-ui/tsconfig.vitest.json | Adds a TS config for Vitest/type-checking tests. |
| frontend/kairos-ui/tsconfig.node.json | Adds Node-targeted TS config for tooling config files. |
| frontend/kairos-ui/tsconfig.json | Adds TS project references (node/app/vitest). |
| frontend/kairos-ui/tsconfig.app.json | Adds app TS config (Vue DOM + path aliases). |
| frontend/kairos-ui/src/views/Routes.vue | New Routes CRUD UI wired to /api/routes. |
| frontend/kairos-ui/src/views/Dashboard.vue | New Dashboard view wired to /health + /api/routes. |
| frontend/kairos-ui/src/views/Config.vue | New Config view wired to /api/config and reload trigger. |
| frontend/kairos-ui/src/types/index.ts | Adds TS interfaces for backend config/routes/telemetry data. |
| frontend/kairos-ui/src/stores/counter.ts | Adds Pinia example store (template artifact). |
| frontend/kairos-ui/src/services/api.ts | Adds frontend API client for routes/config/health calls. |
| frontend/kairos-ui/src/router/index.ts | Adds SPA routes (dashboard/routes/config). |
| frontend/kairos-ui/src/main.ts | Vue application bootstrap (Pinia + router). |
| frontend/kairos-ui/src/components/WelcomeItem.vue | Template component (currently unused in the new views). |
| frontend/kairos-ui/src/components/TheWelcome.vue | Template component (currently unused in the new views). |
| frontend/kairos-ui/src/components/icons/IconTooling.vue | Adds an SVG icon component (template). |
| frontend/kairos-ui/src/components/icons/IconSupport.vue | Adds an SVG icon component (template). |
| frontend/kairos-ui/src/components/icons/IconEcosystem.vue | Adds an SVG icon component (template). |
| frontend/kairos-ui/src/components/icons/IconDocumentation.vue | Adds an SVG icon component (template). |
| frontend/kairos-ui/src/components/icons/IconCommunity.vue | Adds an SVG icon component (template). |
| frontend/kairos-ui/src/components/HelloWorld.vue | Template component + example content. |
| frontend/kairos-ui/src/components/tests/HelloWorld.spec.ts | Adds a basic Vitest unit test (template). |
| frontend/kairos-ui/src/assets/main.css | Adds base/global CSS for the SPA. |
| frontend/kairos-ui/src/assets/logo.svg | Adds template logo asset. |
| frontend/kairos-ui/src/App.vue | Adds the main SPA layout (sidebar + router view). |
| frontend/kairos-ui/README.md | Adds frontend README (template). |
| frontend/kairos-ui/package.json | Adds frontend dependencies and scripts. |
| frontend/kairos-ui/index.html | Adds SPA HTML entrypoint. |
| frontend/kairos-ui/eslint.config.ts | Adds ESLint flat config for Vue + TS + Vitest. |
| frontend/kairos-ui/env.d.ts | Adds Vite client type references. |
| frontend/kairos-ui/.vscode/extensions.json | Adds recommended VS Code extensions for the frontend. |
| frontend/kairos-ui/.prettierrc.json | Adds Prettier configuration. |
| frontend/kairos-ui/.oxlintrc.json | Adds Oxlint configuration. |
| frontend/kairos-ui/.gitignore | Adds frontend-specific ignore rules. |
| frontend/kairos-ui/.gitattributes | Adds frontend git attributes (LF normalization). |
| frontend/kairos-ui/.env.example | Adds example env var configuration for API target. |
| frontend/kairos-ui/.editorconfig | Adds editor formatting rules for frontend files. |
| crates/kairos-ui/src/server_functions/routes.rs | Removes Leptos server-function based route management. |
| crates/kairos-ui/src/server_functions/mod.rs | Removes Leptos server function module exports/constants. |
| crates/kairos-ui/src/server_functions/metrics.rs | Removes Leptos server-function based metrics fetching/parsing. |
| crates/kairos-ui/src/server_functions/health.rs | Removes Leptos server-function based health endpoints. |
| crates/kairos-ui/src/server_functions/config.rs | Removes Leptos server-function based config endpoints. |
| crates/kairos-ui/src/pages/mod.rs | Removes Leptos pages module. |
| crates/kairos-ui/src/pages/health_page.rs | Removes Leptos health page. |
| crates/kairos-ui/src/pages/dashboard.rs | Removes Leptos dashboard page. |
| crates/kairos-ui/src/pages/config_page.rs | Removes Leptos config page implementation. |
| crates/kairos-ui/src/pages/config_page_old.rs | Removes older placeholder Leptos config page. |
| crates/kairos-ui/src/models/transform.rs | Removes Leptos/WASM-era transform models. |
| crates/kairos-ui/src/models/settings.rs | Removes Leptos/WASM-era settings models. |
| crates/kairos-ui/src/models/router.rs | Removes Leptos/WASM-era router models. |
| crates/kairos-ui/src/models/mod.rs | Removes Leptos UI models module exports. |
| crates/kairos-ui/src/models/metrics.rs | Removes Leptos UI metrics model and Prometheus parsing. |
| crates/kairos-ui/src/models/health.rs | Removes Leptos UI health models. |
| crates/kairos-ui/src/main.rs | Removes Leptos SSR/CSR entrypoint for the UI crate. |
| crates/kairos-ui/src/lib.rs | Removes Leptos UI crate lib exports/hydration entrypoint. |
| crates/kairos-ui/src/components/status_badge.rs | Removes Leptos status badge component. |
| crates/kairos-ui/src/components/sidebar.rs | Removes Leptos sidebar component. |
| crates/kairos-ui/src/components/real_time_metrics.rs | Removes Leptos real-time metrics component. |
| crates/kairos-ui/src/components/navbar.rs | Removes Leptos navbar component. |
| crates/kairos-ui/src/components/mod.rs | Removes Leptos component module exports. |
| crates/kairos-ui/src/components/metric_card.rs | Removes Leptos metric card component. |
| crates/kairos-ui/src/components/loading.rs | Removes Leptos loading spinner component. |
| crates/kairos-ui/src/components/error_boundary.rs | Removes Leptos error boundary view. |
| crates/kairos-ui/src/components/config/server_form.rs | Removes Leptos server-config form component. |
| crates/kairos-ui/src/components/config/rate_limit_form.rs | Removes Leptos rate-limit form component. |
| crates/kairos-ui/src/components/config/mod.rs | Removes Leptos config-form module exports. |
| crates/kairos-ui/src/components/config/metrics_form.rs | Removes Leptos metrics config form component. |
| crates/kairos-ui/src/components/config/jwt_form.rs | Removes Leptos JWT config form component. |
| crates/kairos-ui/src/components/config/cors_form.rs | Removes Leptos CORS config form component. |
| crates/kairos-ui/src/components/config/ai_form.rs | Removes Leptos AI config form component. |
| crates/kairos-ui/src/components/chart.rs | Removes Leptos/wasm-bindgen chart wrapper. |
| crates/kairos-ui/src/app.rs | Removes Leptos application root/router. |
| crates/kairos-ui/README.md | Removes Leptos UI crate documentation. |
| crates/kairos-ui/llm.txt | Removes Leptos UI crate agent guidelines. |
| crates/kairos-ui/LICENSE | Removes Leptos UI crate license file. |
| crates/kairos-ui/IMPLEMENTATION.md | Removes Leptos UI implementation summary doc. |
| crates/kairos-ui/end2end/tsconfig.json | Removes Playwright e2e TS config (Leptos UI). |
| crates/kairos-ui/end2end/tests/example.spec.ts | Removes Playwright e2e example test (Leptos UI). |
| crates/kairos-ui/end2end/playwright.config.ts | Removes Playwright config (Leptos UI). |
| crates/kairos-ui/end2end/package.json | Removes Playwright e2e package manifest (Leptos UI). |
| crates/kairos-ui/end2end/package-lock.json | Removes Playwright e2e lockfile (Leptos UI). |
| crates/kairos-ui/Dockerfile | Removes Leptos UI container build. |
| crates/kairos-ui/Cargo.toml | Removes Leptos UI crate manifest. |
| crates/kairos-ui/.gitignore | Removes Leptos UI crate ignore file. |
| crates/kairos-gateway/src/main.rs | Wires ConfigManager + config reload routes into the gateway server. |
| Cargo.toml | Removes crates/kairos-ui from workspace members and drops Leptos deps from workspace deps. |
Files not reviewed (1)
- crates/kairos-ui/end2end/package-lock.json: Language not supported
Comment on lines
+8
to
+10
| <div class="logo"> | ||
| <svg xmlns="http://www.w3.org/,100" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 12px; color: #38bdf8;"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg> | ||
| <span class="logo-text">Kairos Gateway</span> |
Comment on lines
+24
to
+26
| <div class="sidebar-footer"> | ||
| <span class="version">v0.2.17</span> | ||
| </div> |
Comment on lines
+18
to
+21
| routes.value = r | ||
| } catch (err: any) { | ||
| error.value = err.message | ||
| } finally { |
Comment on lines
+187
to
+190
| <div class="form-group"> | ||
| <label>Port</label> | ||
| <input type="number" v-model="currentRoute.port" /> | ||
| </div> |
Comment on lines
+2
to
+4
| import { ref, onMounted } from 'vue' | ||
| import { apiService } from '../services/api' | ||
| import type { Router, RouteBackend } from '../types' |
Comment on lines
+5
to
+12
| export const apiService = { | ||
| // Routes | ||
| async getRoutes(): Promise<Router[]> { | ||
| const res = await fetch(`${API_BASE}/routes`); | ||
| if (!res.ok) throw new Error('Failed to fetch routes'); | ||
| const data = await res.json(); | ||
| return data.routes || []; | ||
| }, |
Comment on lines
+49
to
+51
| </div> | ||
| <button class="btn-primary" @click="apiService.triggerReload()">Reload Backend Config</button> | ||
| </div> |
Comment on lines
+9
to
+13
| "compilerOptions": { | ||
| // Vitest runs in a different environment than the application code. | ||
| // Adjust lib and types accordingly. | ||
| "lib": [], | ||
| "types": ["node", "jsdom"], |
Comment on lines
+1
to
+8
| { | ||
| "32cc796dacf4534753fe3fcf2c89ab52a0c0caef": { | ||
| "files": { | ||
| "frontend/kairos-ui/src/assets/base.css": [ | ||
| "DYMuDadIR7WtNtFn9+6U4srN2xc=", | ||
| true | ||
| ], | ||
| "frontend/kairos-ui/src/components/icons/IconCommunity.vue": [ |
Comment on lines
+1
to
+3
| <!DOCTYPE html> | ||
| <html lang=""> | ||
| <head> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.