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:

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:
```
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
```
- Include Bootstrap 5 JS Bundle from CDN (typically placed before the closing </body> tag):
```
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
```
- 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

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

8.7 KiB Raw Blame History