|
|
|
|
@@ -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
|
|
|
|
|
<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):
|
|
|
|
|
```html
|
|
|
|
|
<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
|
|
|
|
|
|
|
|
|
|
```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
|
