Simple web-based front-ends for arbitrary commands. An attempt to combine the power & rapid iteration of command-line development with the usability advantages of a GUI (e.g. sortable tables, inline documentation, buttons for common actions, etc...).
- Designed to be highly secure
- Server code in one easy to audit .js file
- Only commands whitelisted on the server can run
- No server-side dependencies except Node.js
- Designed for easy customisation & development
- No compilation steps - TypeScript is loaded using @babel/standalone - just refresh the page to run updated code
- Scripts use an API (frontend/types.d.ts) that decouples them from rendering the UI or executing commands
Each "script directory" contains sub-directories with js files and cmd files. Each js file represents a page that becomes available from the front-end. When the page is opened the corresponding script's load
function is run - it can ask the server to run cmd files in its subdirectory, load the results and display a web-based GUI.
node cmd-frontend-server.js [script directories]
e.g.
node cmd-frontend-server.js panels/
open http:https://localhost:1234
# no npm install!
Basic functionality should be working:
- Kubernetes (controllers, pods)
- systemd (units)
- Linux process statuses
- Windows services
- BOINC and Folding@Home statuses
Work in progress:
- gcloud (e.g. listing Compute Engine VMs)
- Qubes GUI
Some buttons show information as modal popups, others copy CLI commands into the clipboard.
Here is the code behind the systemd units table:
ListUnits.cmd
#! /bin/bash
busctl call org.freedesktop.systemd1 /org/freedesktop/systemd1 org.freedesktop.systemd1.Manager ListUnits --json=pretty
units.js
export async function load({ runCommand, setData }) {
const json = await runCommand("ListUnits")
const data = JSON.parse(json).data[0]
const rows = data.map(([name, description, loadState, activeState, subState, following, path, jobId, jobType, jobPath]) => (
{
cells: [name, loadState, activeState, subState, description],
key: name,
}
))
setData({
fields: ["Name", "Load", "Active", "Sub-state", "Description"],
rows,
})
}
Run the server, edit scripts and refresh the page:
nodemon cmd-frontend-server.js panels/ panels-wip/
Modifying the frontend is nicer with TypeScript so you can optionally run npm install
on a development machine to install types.
npm install # for TypeScript @types/node
cd frontend
npm install
npx @pika/web
is used to bundle dependencies into frontend/web_modules
after adding them to webDependencies
in frontend/package.json
.
- Running commands on multiple machines through PubSub, HTTP and/or SSH
- Charts (e.g. for CPU usage, temperature)
- Charts with persistent data
- Node.js
- React
- Semantic UI React
- TypeScript
- Babel
- htm.js
- Pika
- Prism
- prism-react-renderer
- React JSON Inspector
- timeago.js
- Visual Studio Code