...
This commit is contained in:
parent
c78761fe20
commit
0b1d9907a7
@ -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
|
|
||||||
@ -10,14 +10,14 @@
|
|||||||
<link rel="stylesheet" href="/static/css/custom.css">
|
<link rel="stylesheet" href="/static/css/custom.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{ import "components/navbar.jet" }}
|
{{ import "../components/navbar.jet" }}
|
||||||
{{ yield navbar() }}
|
{{ yield navbar() }}
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
||||||
<div class="position-sticky pt-3">
|
<div class="position-sticky pt-3">
|
||||||
{{ import "components/sidebar.jet" }}
|
{{ import "../components/sidebar.jet" }}
|
||||||
{{ yield sidebar() }}
|
{{ yield sidebar() }}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
{{ extends "layouts/base.jet" }}
|
{{ extends "../layouts/base.jet" }}
|
||||||
|
|
||||||
{{ block title() }}Dashboard - HeroApp UI{{ end }}
|
{{ block title() }}Dashboard - HeroApp UI{{ end }}
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
{{ extends "layouts/base.jet" }}
|
{{ extends "../layouts/base.jet" }}
|
||||||
|
|
||||||
{{ block title() }}Login - HeroApp UI{{ end }}
|
{{ block title() }}Login - HeroApp UI{{ end }}
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
{{ extends "layouts/base.jet" }}
|
{{ extends "../layouts/base.jet" }}
|
||||||
|
|
||||||
{{ block title() }}Process Manager - HeroApp UI{{ end }}
|
{{ block title() }}Process Manager - HeroApp UI{{ end }}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user