807c4b3430
Many years ago I built and demoed a prototype of a simple web ui with a slider, and as you moved it left and right, it started up or shutdown some number of virtual machines. The webui was standalone code, but the rough idea of having events from a high-level overview flow into mgmt, was what I wanted to test out. At this stage, I didn't even have the language built yet. This prototype helped convince me of the way a web ui would fit into everything. Years later, I build an autogrouping prototype which looks quite similar to what we have today. I recently picked it back up to polish it a bit more. It's certainly not perfect, and might even be buggy, but it's useful enough that it's worth sharing. If I had more cycles, I'd probably consider removing the "store" mode, and replace it with the normal "value" system, but we would need the resource "mutate" API if we wanted this. This would allow us to directly change the "value" field, without triggering a graph swap, which would be a lot less clunky than the "store" situation. Of course I'd love to see a GTK version of this concept, but I figured it would be more practical to have a web ui over HTTP. One notable missing feature, is that if the "web ui" changes (rather than just a value changing) we need to offer to the user to reload it. It currently doesn't get an event for that, and so don't confuse your users. We also need to be better at validating "untrusted" input here. There's also no major reason to use the "gin" framework, we should probably redo this with the standard library alone, but it was easier for me to push out something quick this way. We can optimize that later. Lastly, this is all quite ugly since I'm not a very good web dev, so if you want to make this polished, please do! The wasm code is also quite terrible due to limitations in the compiler, and maybe one day when that works better and doesn't constantly deadlock, we can improve it.
164 lines
5.2 KiB
Cheetah
164 lines
5.2 KiB
Cheetah
{{- /*
|
|
Mgmt
|
|
Copyright (C) James Shubin and the project contributors
|
|
Written by James Shubin <james@shubin.ca> and the project contributors
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
Additional permission under GNU GPL version 3 section 7
|
|
|
|
If you modify this program, or any covered work, by linking or combining it
|
|
with embedded mcl code and modules (and that the embedded mcl code and
|
|
modules which link with this program, contain a copy of their source code in
|
|
the authoritative form) containing parts covered by the terms of any other
|
|
license, the licensors of this program grant you additional permission to
|
|
convey the resulting work. Furthermore, the licensors of this program grant
|
|
the original author, James Shubin, additional permission to update this
|
|
additional permission if he deems it necessary to achieve the goals of this
|
|
additional permission.
|
|
|
|
This was modified from the boiler-plate in the ~golang/misc/wasm/* directory.
|
|
*/ -}}
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
{{ if .title }}
|
|
<title>{{ .title }}</title>
|
|
{{ end }}
|
|
{{ if .head }}
|
|
{{ .head }}
|
|
{{ end }}
|
|
|
|
{{ if .embedded }}
|
|
<link href="static/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
|
<script src="static/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
|
{{ else }}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
|
|
{{ end }}
|
|
|
|
<style>
|
|
/* Auto-apply Bootstrap-like blue (primary) styling based on element type. */
|
|
body {
|
|
--bs-primary: #0d6efd; /* Bootstrap 5 default primary color */
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, strong, b {
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
a {
|
|
color: var(--bs-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
color: #0b5ed7; /* slightly darker blue */
|
|
}
|
|
|
|
button, input[type="submit"], input[type="button"] {
|
|
background-color: var(--bs-primary);
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
|
|
background-color: #0b5ed7;
|
|
}
|
|
|
|
p, span, li {
|
|
color: #212529; /* standard text color */
|
|
}
|
|
|
|
code, pre {
|
|
background-color: #e7f1ff;
|
|
color: #084298;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
fieldset {
|
|
background-color: #e7f1ff;
|
|
border: 1px solid blue;
|
|
padding: 10px; /* optional: adds spacing inside the border */
|
|
margin-bottom: 20px; /* optional: adds spacing below the fieldset */
|
|
margin: 0 20px; /* adds 20px space on left and right */
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
width: 100px; /* arbitrary */
|
|
text-align: right; /* aligns label text to the right */
|
|
margin-right: 10px; /* spacing between label and input */
|
|
margin-bottom: 8px; /* small vertical space below each label */
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 30ch; /* the number of characters you want to fit */
|
|
box-sizing: border-box; /* ensures padding and border are included in the width */
|
|
}
|
|
|
|
input[type="range"] {
|
|
vertical-align: middle; /* aligns the range input vertically with other elements */
|
|
width: 30ch; /* the number of characters you want to fit (to match text) */
|
|
box-sizing: border-box; /* ensures padding and border are included in the width */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!--
|
|
Add the following polyfill for Microsoft Edge 17/18 support:
|
|
<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.7.0/lib/encoding.min.js"></script>
|
|
(see https://caniuse.com/#feat=textencoder)
|
|
-->
|
|
<script src="wasm_exec.js"></script>
|
|
<script>
|
|
// These values can be read from inside the wasm program.
|
|
window._mgmt_program = "{{ .program }}";
|
|
window._mgmt_version = "{{ .version }}";
|
|
window._mgmt_hostname = "{{ .hostname }}";
|
|
window._mgmt_title = "{{ .title }}";
|
|
window._mgmt_path = "{{ .path }}";
|
|
|
|
if (!WebAssembly.instantiateStreaming) { // polyfill
|
|
WebAssembly.instantiateStreaming = async (resp, importObject) => {
|
|
const source = await (await resp).arrayBuffer();
|
|
return await WebAssembly.instantiate(source, importObject);
|
|
};
|
|
}
|
|
|
|
const go = new Go();
|
|
//let mod, inst;
|
|
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
|
|
//mod = result.module;
|
|
//inst = result.instance;
|
|
go.run(result.instance);
|
|
}).catch((err) => {
|
|
console.error(err);
|
|
});
|
|
|
|
//async function run() {
|
|
// console.clear();
|
|
// await go.run(inst);
|
|
// inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
|
|
//}
|
|
</script>
|
|
</body>
|
|
</html>
|