...
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">
|
||||
</head>
|
||||
<body>
|
||||
{{ import "components/navbar.jet" }}
|
||||
{{ import "../components/navbar.jet" }}
|
||||
{{ yield navbar() }}
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
||||
<div class="position-sticky pt-3">
|
||||
{{ import "components/sidebar.jet" }}
|
||||
{{ import "../components/sidebar.jet" }}
|
||||
{{ yield sidebar() }}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{ extends "layouts/base.jet" }}
|
||||
{{ extends "../layouts/base.jet" }}
|
||||
|
||||
{{ block title() }}Dashboard - HeroApp UI{{ end }}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{ extends "layouts/base.jet" }}
|
||||
{{ extends "../layouts/base.jet" }}
|
||||
|
||||
{{ 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 }}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user