@jxa13/pm2ui 1.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +198 -0
  2. package/Services/pm2Service.js +91 -0
  3. package/Services/systemService.js +28 -0
  4. package/bin/pm2ui.js +3 -0
  5. package/changelog.md +250 -0
  6. package/frontend/dist/assets/index-BhYqcf4u.css +1 -0
  7. package/frontend/dist/assets/index-aVk9yHhV.js +224 -0
  8. package/frontend/dist/index.html +13 -0
  9. package/package.json +43 -0
  10. package/roadmap.md +170 -0
  11. package/server.js +889 -0
  12. package/user_manual.md +458 -0
package/frontend/dist/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Node WebUI React</title>
7
+ <script type="module" crossorigin src="./assets/index-aVk9yHhV.js"></script>
8
+ <link rel="stylesheet" crossorigin href="./assets/index-BhYqcf4u.css">
9
+ </head>
10
+ <body>
11
+ <div id="root"></div>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "name": "@jxa13/pm2ui",
3
+ "version": "1.17.0",
4
+ "description": "Local PM2 dashboard web UI for managing Node.js services",
5
+ "main": "server.js",
6
+ "bin": {
7
+ "pm2ui": "bin/pm2ui.js"
8
+ },
9
+ "files": [
10
+ "bin",
11
+ "server.js",
12
+ "Services",
13
+ "public",
14
+ "frontend/dist",
15
+ "README.md",
16
+ "changelog.md",
17
+ "roadmap.md",
18
+ "user_manual.md"
19
+ ],
20
+ "engines": {
21
+ "node": ">=18"
22
+ },
23
+ "license": "MIT",
24
+ "scripts": {
25
+ "start": "npm run react:build && node server.js",
26
+ "dev": "node server.js",
27
+ "prepack": "npm run react:build",
28
+ "react:dev": "vite --config frontend/vite.config.mjs",
29
+ "react:build": "vite build --config frontend/vite.config.mjs",
30
+ "react:preview": "vite preview --config frontend/vite.config.mjs",
31
+ "react:smoke": "node scripts/react-smoke-test.mjs"
32
+ },
33
+ "dependencies": {
34
+ "@vitejs/plugin-react": "^4.3.4",
35
+ "express": "^5.1.0",
36
+ "lucide-react": "^0.468.0",
37
+ "pm2": "^6.0.14",
38
+ "react": "^18.3.1",
39
+ "react-dom": "^18.3.1",
40
+ "systeminformation": "^5.27.11",
41
+ "vite": "^5.4.21"
42
+ }
43
+ }
package/roadmap.md ADDED
@@ -0,0 +1,170 @@
1
+ # Node WebUI Roadmap
2
+
3
+ This roadmap tracks completed PM2 dashboard work, React migration status, and remaining polish.
4
+
5
+ ## Current Status
6
+
7
+ Node WebUI now uses the React operations console as the default and only frontend. The existing Express API remains in place.
8
+
9
+ ## Completed Before React
10
+
11
+ 1. PM2 resource summary values.
12
+ - Dashboard CPU and RAM cards now show aggregate PM2 process usage instead of host system usage.
13
+ - PM2 RAM is displayed as bytes so it does not get confused with macOS memory pressure or cache usage.
14
+
15
+ 2. Argument-safe PM2 commands.
16
+ - PM2 log, save, create, delete, flush, and open-folder actions use argument arrays through `execFile` or `spawn`.
17
+ - Log line counts are normalized before calling PM2.
18
+
19
+ 3. Protected process enforcement.
20
+ - Protected process names are enforced on server-side stop, restart, and delete routes.
21
+ - Frontend controls still show protected state for operator clarity.
22
+
23
+ 4. Case-sensitive import portability.
24
+ - Backend imports now match the `Services` directory name.
25
+
26
+ 5. Full process details.
27
+ - The dashboard returns and displays PM2 metadata for interpreter, exec mode, app args, node args, environment name, log paths, watch mode, namespace, and related runtime fields.
28
+
29
+ 6. PM2 runtime and persistence status.
30
+ - The dashboard shows PM2 version, daemon PID/uptime, managed app count, saved state, and macOS startup persistence detection.
31
+
32
+ 7. Process creation options.
33
+ - Create-app support includes quoted argument parsing plus interpreter, Node args, `NODE_ENV`, instances, watch mode, max-memory restart, and output/error log paths.
34
+
35
+ 8. Live dashboard updates.
36
+ - The dashboard uses Server-Sent Events for process status and metric updates, with polling retained as a fallback.
37
+
38
+ 9. Live log streaming.
39
+ - The logs modal streams PM2 logs live, preserves scroll position when reading older output, and falls back to polling.
40
+
41
+ 10. Historical PM2 charts.
42
+ - The dashboard tracks PM2 CPU, PM2 RAM, restarts, and status counts in local browser history with a configurable 15/30/60 minute window.
43
+
44
+ 11. Built-in themes.
45
+ - The app now uses curated built-in theme families with light, dark, and system modes instead of arbitrary custom theme editing.
46
+
47
+ 12. Operations-console polish.
48
+ - The dashboard is denser and more operational, with compact summary cards, icon buttons, stronger empty states, sticky table headers, and clearer status/busy styling.
49
+
50
+ ## React Migration Plan
51
+
52
+ 13. Create a Vite React frontend. **Completed**
53
+ - Keep the Express API unchanged.
54
+ - Build React pages against the current `/api/dashboard`, process action, logs, PM2 status, and settings behavior.
55
+ - The former vanilla UI has been removed after React reached feature parity.
56
+
57
+ 14. Use a component structure that matches the app workflows. **Completed**
58
+ - Dashboard shell
59
+ - Summary metric cards
60
+ - Metric history charts
61
+ - Process table and filters
62
+ - Process details inspector
63
+ - Logs viewer
64
+ - Create-process form
65
+ - Settings with theme and protected-process sections
66
+
67
+ 15. Add React UI libraries conservatively. **Completed**
68
+ - Use `lucide-react` for icons.
69
+ - Keep charts canvas-based at first unless a chart library clearly pays for itself.
70
+ - Avoid a large component framework unless the app needs it.
71
+
72
+ 16. Switch Express static serving after React feature parity. **Completed**
73
+ - React is now served from Express at `/`.
74
+ - The old vanilla `public` UI has been removed.
75
+ - `/react` remains a compatibility path to the same React build.
76
+
77
+ ## React Operations Console Batch
78
+
79
+ 17. Make React the Express default UI. **Completed**
80
+ - Built React assets are served at `/`.
81
+ - `npm start` builds the React frontend before starting Express.
82
+ - The vanilla UI is no longer shipped.
83
+
84
+ 18. Unify dashboard and logs state. **Completed**
85
+ - The Logs sidebar page and process inspector share selected process, line count, search, wrapping, auto-refresh, log entries, and stream lifecycle.
86
+ - Row log actions now move the app to the Logs workspace and activate the inspector Logs tab.
87
+
88
+ 19. Improve PM2 runtime data reliability. **Completed**
89
+ - Sidebar runtime values now fall back to loaded dashboard summary data where PM2 runtime metadata is unavailable.
90
+ - Missing runtime fields show explicit `--` values instead of misleading connected states.
91
+
92
+ 20. Add safer action confirmations. **Completed**
93
+ - Stop, restart, delete, bulk stop/restart, and clear-logs flows use a structured confirmation dialog.
94
+ - Confirmations show process names, PM2 IDs, statuses, scripts, and excluded protected-process context.
95
+
96
+ 21. Add per-row and action busy states. **Completed**
97
+ - Existing row busy states are preserved and now pair with the structured confirmation flow.
98
+ - Bulk action state continues to lock relevant controls while actions are running.
99
+
100
+ 22. Persist selected process, active tab, nav, and density. **Completed**
101
+ - React now restores selected PM2 ID, active navigation item, inspector tab, table density, and log target from `localStorage`.
102
+
103
+ 23. Make charts theme-aware. **Completed**
104
+ - PM2 CPU, PM2 RAM, restart, and status chart strokes now resolve from CSS variables so theme changes apply to charts.
105
+
106
+ 24. Add table density controls. **Completed**
107
+ - Operators can switch between Compact and Comfortable table density.
108
+ - Density choice persists locally.
109
+
110
+ 25. Add keyboard workflows. **Completed**
111
+ - `/` focuses process search.
112
+ - `r` refreshes the dashboard.
113
+ - `l` opens logs for the selected process.
114
+ - Arrow keys move process selection.
115
+ - `Esc` clears row selection.
116
+
117
+ 26. Add React smoke tests. **Completed**
118
+ - `npm run react:smoke` checks core React migration contracts, routing hooks, confirmation usage, density styles, theme-aware charts, and absence of `window.confirm`.
119
+
120
+ ## Remaining Product Upgrades
121
+
122
+ 27. Continue refining persisted UI preferences.
123
+ - Process search, status filter, table density, log line count, log wrap, and log auto-refresh preferences are now saved in `localStorage`.
124
+ - Future refinement can add import/export for operator preference profiles.
125
+
126
+ 28. Continue refining the filtered result counter.
127
+ - The process toolbar now shows total process count and filtered counts such as `Showing 2 of 8 processes`.
128
+ - Future refinement can include grouped counts once process grouping exists.
129
+
130
+ 29. Continue refining pause/resume refresh controls.
131
+ - The dashboard now has a Pause Live/Resume Live control that stops live stream/polling updates while keeping manual refresh available.
132
+ - Future refinement can add more detailed connection/backoff visibility.
133
+
134
+ 30. Add process grouping and tags.
135
+ - Group by status, namespace, folder, or custom labels.
136
+ - Useful when managing many PM2 apps.
137
+
138
+ 31. Add README screenshots.
139
+ - Capture the main dashboard, logs modal, settings modal, process details modal, and create-app modal.
140
+
141
+ 32. Improve modal layouts.
142
+ - Make process details feel more like an inspector.
143
+ - Give the logs modal a cleaner terminal-like surface.
144
+ - Split settings into clearer sections or tabs.
145
+
146
+ 33. Improve feedback states.
147
+ - Add skeleton loading rows.
148
+ - Add clearer inline busy states for process actions.
149
+ - Improve success and error toast styling.
150
+
151
+ ## Quality and Maintainability
152
+
153
+ 34. Add automated tests.
154
+ - Cover dashboard mapping, process action routes, create validation, log parsing, protected process enforcement, and PM2 metric calculations.
155
+
156
+ 35. Split backend routes and frontend modules.
157
+ - Move PM2 action routes, log routes, and dashboard mapping into smaller modules.
158
+ - Keep frontend state, rendering, actions, and modals easier to maintain during the React migration.
159
+
160
+ 36. Add structured error messages.
161
+ - Return user-facing API errors with stable error codes.
162
+ - Show more specific UI toasts instead of generic failure messages.
163
+
164
+ 37. Add accessibility refinements.
165
+ - Improve keyboard focus management in modals.
166
+ - Keep accessible names and visible tooltips for icon-only controls.
167
+
168
+ 38. Add optional authentication for non-local use.
169
+ - Keep localhost-only as the default.
170
+ - If LAN access is enabled, require authentication and document reverse proxy guidance.