diff --git a/pkg/servers/ui/DESIGN_PLAN_UI.md b/pkg/servers/ui/DESIGN_PLAN_UI.md deleted file mode 100644 index 76187c9..0000000 --- a/pkg/servers/ui/DESIGN_PLAN_UI.md +++ /dev/null @@ -1,213 +0,0 @@ -# Project Plan: Bootstrap UI with Fiber and Jet - -**Goal:** Develop a new UI module using Go (Fiber framework), Jet templates, and Bootstrap 5, following an MVC pattern. The UI will include a dashboard and a process manager page. - -**Location:** `pkg/servers/ui` - ---- - -## 1. Directory Structure (MVC) - -We'll establish a clear MVC structure within `pkg/servers/ui`: - -```mermaid -graph TD - A[pkg/servers/ui] --> B(app.go); - A --> C(controllers); - A --> M(models); - A --> V(views); - A --> S(static); - A --> R(routes); - - C --> C1(auth_controller.go); - C --> C2(dashboard_controller.go); - C --> C3(process_controller.go); - - M --> M1(process_model.go); - M --> M2(user_model.go); - - V --> VL(layouts); - V --> VP(pages); - V --> VC(components); - - VL --> VLL(base.jet); - - VP --> VPD(dashboard.jet); - VP --> VPP(process_manager.jet); - VP --> VPL(login.jet); - - VC --> VCN(navbar.jet); - VC --> VCS(sidebar.jet); - - S --> SCSS(css); - S --> SJS(js); - S --> SIMG(img); - - SCSS --> custom.css; // For any custom styles - - SJS --> custom.js; // For any custom JavaScript - - R --> R1(router.go); -``` - -**Detailed Breakdown:** - -* **`pkg/servers/ui/app.go`:** Main application setup for this UI module. Initializes Fiber, Jet, routes, and middleware. -* **`pkg/servers/ui/controllers/`**: Handles incoming requests, interacts with models, and selects views. - * `auth_controller.go`: Handles login/logout (stubs for now). - * `dashboard_controller.go`: Handles the dashboard page. - * `process_controller.go`: Handles the process manager page. -* **`pkg/servers/ui/models/`**: Business logic and data interaction. - * `process_model.go`: Interacts with `pkg/system/processmanager` to fetch and manage process data. - * `user_model.go`: (Placeholder for basic auth stubs). -* **`pkg/servers/ui/views/`**: Jet templates. - * **`layouts/`**: Base layout templates. - * `base.jet`: Main site layout (includes Bootstrap, navbar, sidebar, main content area). - * **`pages/`**: Specific page templates. - * `dashboard.jet`: Dashboard content. - * `process_manager.jet`: Process manager table and controls. - * `login.jet`: (Placeholder login page). - * **`components/`**: Reusable UI components. - * `navbar.jet`: Top navigation bar. - * `sidebar.jet`: Left tree menu. -* **`pkg/servers/ui/static/`**: Local static assets. - * **`css/`**: Custom CSS files. - * `custom.css` - * **`js/`**: Custom JavaScript files. - * `custom.js` - * **`img/`**: Image assets. -* **`pkg/servers/ui/routes/router.go`:** Defines URL routes and maps them to controller actions. - ---- - -## 2. Core UI Components - -* **Base Layout (`views/layouts/base.jet`):** - * HTML5 boilerplate. - * Include Bootstrap 5 CSS from CDN: - ```html - - ``` - * Include Bootstrap 5 JS Bundle from CDN (typically placed before the closing `` tag): - ```html - - ``` - * Include local custom CSS (e.g., `/static/css/custom.css`). - * Include local custom JS (e.g., `/static/js/custom.js`). - * Structure: - * Navbar (include `components/navbar.jet`) - * Main container (Bootstrap `container-fluid` or similar) - * Sidebar (include `components/sidebar.jet`) - * Content area (where page-specific content will be injected) -* **Navbar (`views/components/navbar.jet`):** - * Bootstrap Navbar component. - * Site title/logo. - * Login/Logout buttons (stubs, basic links for now). -* **Sidebar/Tree Menu (`views/components/sidebar.jet`):** - * Bootstrap navigation component (e.g., Navs, List group). - * Links: - * Dashboard - * Process Manager - ---- - -## 3. Pages - -* **Dashboard Page:** - * **Controller (`controllers/dashboard_controller.go`):** - * `ShowDashboard()`: Renders the dashboard page. - * **View (`views/pages/dashboard.jet`):** - * Extends `layouts/base.jet`. - * Simple placeholder content for now (e.g., "Welcome to the Dashboard!"). -* **Process Manager Page:** - * **Model (`models/process_model.go`):** - * `GetProcesses()`: Function to call `pkg/system/processmanager` to get a list of running processes. Will need to define a struct for process information (PID, Name, CPU, Memory). - * `KillProcess(pid string)`: Function to call `pkg/system/processmanager` to terminate a process. - * **Controller (`controllers/process_controller.go`):** - * `ShowProcessManager()`: - * Calls `models.GetProcesses()`. - * Passes process data to the view. - * Renders `views/pages/process_manager.jet`. - * `HandleKillProcess()`: (Handles POST request to kill a process) - * Extracts PID from request. - * Calls `models.KillProcess(pid)`. - * Redirects back to the process manager page or returns a status. - * **View (`views/pages/process_manager.jet`):** - * Extends `layouts/base.jet`. - * Displays processes in a Bootstrap table: - * Columns: PID, Name, CPU, Memory, Actions. - * Actions column: "Kill" button for each process (linking to `HandleKillProcess` or using JS for an AJAX call). - ---- - -## 4. Fiber & Jet Integration (`app.go` and `routes/router.go`) - -* **`pkg/servers/ui/app.go`:** - * `NewApp()` function: - * Initialize Fiber app: `fiber.New()`. - * Initialize Jet template engine: - * `jet.NewSet(jet.NewOSFileSystemLoader("./pkg/servers/ui/views"), jet.InDevelopmentMode())` (or adjust path as needed). - * Pass Jet views to Fiber: `app.Settings.Views = views`. - * Setup static file serving: `app.Static("/static", "./pkg/servers/ui/static")`. - * Setup routes: Call a function from `routes/router.go`. - * Return the Fiber app instance. - * This `app.go` can then be imported and run from your main application entry point (e.g., in `cmd/heroagent/main.go`). -* **`pkg/servers/ui/routes/router.go`:** - * `SetupRoutes(app *fiber.App, processController *controllers.ProcessController, ...)` function: - * `app.Get("/", dashboardController.ShowDashboard)` - * `app.Get("/processes", processController.ShowProcessManager)` - * `app.Post("/processes/kill/:pid", processController.HandleKillProcess)` (or similar for kill action) - * `app.Get("/login", authController.ShowLoginPage)` (stub) - * `app.Post("/login", authController.HandleLogin)` (stub) - * `app.Get("/logout", authController.HandleLogout)` (stub) - ---- - -## 5. Authentication Stubs - -* **`controllers/auth_controller.go`:** - * `ShowLoginPage()`: Renders a simple login form. - * `HandleLogin()`: Placeholder logic (e.g., always "logs in" or checks a hardcoded credential). Sets a dummy session/cookie. - * `HandleLogout()`: Placeholder logic. Clears dummy session/cookie. -* **`views/pages/login.jet`:** - * Simple Bootstrap form for username/password. - ---- - -## 6. Dependencies (go.mod) - -Ensure these are added to your `go.mod` file: -* `github.com/gofiber/fiber/v2` -* `github.com/CloudyKit/jet/v6` - ---- - -## Request Flow Example: Process Manager Page - -```mermaid -sequenceDiagram - participant User - participant Browser - participant FiberApp [Fiber App (pkg/servers/ui/app.go)] - participant Router [routes/router.go] - participant ProcessCtrl [controllers/process_controller.go] - participant ProcessMdl [models/process_model.go] - participant SysProcMgr [pkg/system/processmanager] - participant JetEngine [CloudyKit/jet/v6] - participant View [views/pages/process_manager.jet] - - User->>Browser: Navigates to /processes - Browser->>FiberApp: GET /processes - FiberApp->>Router: Route request - Router->>ProcessCtrl: Calls ShowProcessManager() - ProcessCtrl->>ProcessMdl: Calls GetProcesses() - ProcessMdl->>SysProcMgr: Fetches process list - SysProcMgr-->>ProcessMdl: Returns process data - ProcessMdl-->>ProcessCtrl: Returns process data - ProcessCtrl->>JetEngine: Renders process_manager.jet with data - JetEngine->>View: Populates template - View-->>JetEngine: Rendered HTML - JetEngine-->>ProcessCtrl: Rendered HTML - ProcessCtrl-->>FiberApp: Returns HTML response - FiberApp-->>Browser: Sends HTML response - Browser->>User: Displays Process Manager page \ No newline at end of file diff --git a/pkg/servers/ui/views/layouts/base.jet b/pkg/servers/ui/views/layouts/base.jet index 84e4c08..62e5f2e 100644 --- a/pkg/servers/ui/views/layouts/base.jet +++ b/pkg/servers/ui/views/layouts/base.jet @@ -10,14 +10,14 @@ - {{ import "components/navbar.jet" }} + {{ import "../components/navbar.jet" }} {{ yield navbar() }}
diff --git a/pkg/servers/ui/views/pages/dashboard.jet b/pkg/servers/ui/views/pages/dashboard.jet index e2f34b8..238b58e 100644 --- a/pkg/servers/ui/views/pages/dashboard.jet +++ b/pkg/servers/ui/views/pages/dashboard.jet @@ -1,4 +1,4 @@ -{{ extends "layouts/base.jet" }} +{{ extends "../layouts/base.jet" }} {{ block title() }}Dashboard - HeroApp UI{{ end }} diff --git a/pkg/servers/ui/views/pages/login.jet b/pkg/servers/ui/views/pages/login.jet index 6988778..1032d7a 100644 --- a/pkg/servers/ui/views/pages/login.jet +++ b/pkg/servers/ui/views/pages/login.jet @@ -1,4 +1,4 @@ -{{ extends "layouts/base.jet" }} +{{ extends "../layouts/base.jet" }} {{ block title() }}Login - HeroApp UI{{ end }} diff --git a/pkg/servers/ui/views/pages/process_manager.jet b/pkg/servers/ui/views/pages/process_manager.jet index 60263e7..9fc8d67 100644 --- a/pkg/servers/ui/views/pages/process_manager.jet +++ b/pkg/servers/ui/views/pages/process_manager.jet @@ -1,4 +1,4 @@ -{{ extends "layouts/base.jet" }} +{{ extends "../layouts/base.jet" }} {{ block title() }}Process Manager - HeroApp UI{{ end }}