mirror of
https://github.com/containrrr/watchtower.git
synced 2026-03-01 10:20:17 +01:00
feat: add tplprev wasm
This commit is contained in:
nils måsén
parent
9b28fbc24d
commit
16883d21c0
11 changed files with 1348 additions and 19 deletions
192
docs/template-preview.md
Normal file
192
docs/template-preview.md
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
|
||||
<style>
|
||||
body {font-size: .75rem;}
|
||||
|
||||
textarea {
|
||||
box-decoration-break: slice;
|
||||
overflow: auto;
|
||||
padding: 0.77em 1.18em;
|
||||
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
|
||||
scrollbar-width: thin;
|
||||
touch-action: auto;
|
||||
word-break: normal;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
textarea, input {
|
||||
background-color: var(--md-code-bg-color);
|
||||
border-width: 0;
|
||||
border-radius: 0.1rem;
|
||||
color: var(--md-code-fg-color);
|
||||
font-feature-settings: "kern";
|
||||
font-family: var(--md-code-font-family);
|
||||
}
|
||||
|
||||
.numfield {
|
||||
font-size: .7rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
label:not(:last-child) {
|
||||
/* margin-bottom: 0.5rem; */
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0.1rem;
|
||||
color: var(--md-typeset-color);
|
||||
background-color: var(--md-primary-fg-color);
|
||||
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--md-accent-fg-color);
|
||||
}
|
||||
|
||||
input[type="number"] { width: 5ch; flex: 1; font-size: 1rem; }
|
||||
|
||||
fieldset {
|
||||
margin-top: -0.5rem;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
#result {
|
||||
font-size: 0.7rem;
|
||||
background-color: var(--md-code-bg-color);
|
||||
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
|
||||
scrollbar-width: thin;
|
||||
touch-action: auto;
|
||||
overflow: auto;
|
||||
padding: 0.77em 1.18em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="../assets/wasm_exec.js"></script>
|
||||
<script>
|
||||
const updatePreview = () => {
|
||||
const form = document.querySelector('#tplprev');
|
||||
const input = form.template.value;
|
||||
console.log('Input: %o', input);
|
||||
const actions = form.enablereport.checked ? [
|
||||
[ form.skipped.valueAsNumber, "skipped" ],
|
||||
[ form.scanned.valueAsNumber, "scanned" ],
|
||||
[ form.updated.valueAsNumber, "updated" ],
|
||||
[ form.failed.valueAsNumber, "failed" ],
|
||||
[ form.fresh.valueAsNumber, "fresh" ],
|
||||
[ form.stale.valueAsNumber, "stale" ],
|
||||
] : [];
|
||||
console.log("Actions: %o", actions);
|
||||
const logentries = form.enablelog.checked ? [
|
||||
form.logerrors.valueAsNumber,
|
||||
form.logwarnings.valueAsNumber,
|
||||
form.loginfos.valueAsNumber,
|
||||
form.logdebugs.valueAsNumber,
|
||||
] : [0, 0, 0, 0];
|
||||
console.log("LogLevel counts: %o", logentries);
|
||||
const output = WATCHTOWER.tplprev(input, actions, logentries);
|
||||
console.log('Output: \n%o', output);
|
||||
document.querySelector('#result').innerText = output;
|
||||
}
|
||||
const formSubmitted = (e) => {
|
||||
console.log("Event: %o", e);
|
||||
e.preventDefault();
|
||||
updatePreview();
|
||||
}
|
||||
let debounce;
|
||||
const inputUpdated = () => {
|
||||
if(debounce) clearTimeout(debounce);
|
||||
debounce = setTimeout(() => updatePreview(), 400);
|
||||
}
|
||||
const go = new Go();
|
||||
WebAssembly.instantiateStreaming(fetch("../assets/tplprev.wasm"), go.importObject).then((result) => {
|
||||
document.querySelector('#loading').style.display = "none";
|
||||
go.run(result.instance);
|
||||
updatePreview();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<form id="tplprev" onsubmit="formSubmitted(event)" style="margin: 0;display: flex; flex-direction: column; row-gap: 1rem; box-sizing: border-box; position: relative; margin-right: -13.3rem">
|
||||
<pre id="loading" style="position: absolute; inset: 0; display: flex; padding: 1rem; box-sizing: border-box; background: var(--md-code-bg-color); margin-top: 0">loading wasm...</pre>
|
||||
|
||||
|
||||
<div style="display: flex; flex:1; column-gap: 1rem;">
|
||||
<textarea name="template" type="text" style="flex: 1" onkeyup="inputUpdated()">{{- with .Report -}}
|
||||
{{- if ( or .Updated .Failed ) -}}
|
||||
{{len .Scanned}} Scanned, {{len .Updated}} Updated, {{len .Failed}} Failed
|
||||
{{- range .Updated}}
|
||||
- {{.Name}} ({{.ImageName}}): {{.CurrentImageID.ShortID}} updated to {{.LatestImageID.ShortID}}
|
||||
{{- end -}}
|
||||
{{- range .Fresh}}
|
||||
- {{.Name}} ({{.ImageName}}): {{.State}}
|
||||
{{- end -}}
|
||||
{{- range .Skipped}}
|
||||
- {{.Name}} ({{.ImageName}}): {{.State}}: {{.Error}}
|
||||
{{- end -}}
|
||||
{{- range .Failed}}
|
||||
- {{.Name}} ({{.ImageName}}): {{.State}}: {{.Error}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- if (and .Entries .Report) }}
|
||||
|
||||
Logs:
|
||||
{{ end -}}
|
||||
{{range .Entries -}}{{.Time.Format "2006-01-02T15:04:05Z07:00"}} [{{.Level}}] {{.Message}}{{"\n"}}{{- end -}}</textarea>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: row; column-gap: 0.5rem">
|
||||
<fieldset>
|
||||
<legend><label><input type="checkbox" name="enablereport" checked /> Container report</label></legend>
|
||||
<label class="numfield">
|
||||
Skipped:
|
||||
<input type="number" name="skipped" value="3" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Scanned:
|
||||
<input type="number" name="scanned" value="3" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Updated:
|
||||
<input type="number" name="updated" value="3" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Failed:
|
||||
<input type="number" name="failed" value="3" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Fresh:
|
||||
<input type="number" name="fresh" value="3" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Stale:
|
||||
<input type="number" name="stale" value="3" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend><label><input type="checkbox" name="enablelog" checked /> Log entries</label></legend>
|
||||
<label class="numfield">
|
||||
Error:
|
||||
<input type="number" name="logerrors" value="1" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Warning:
|
||||
<input type="number" name="logwarnings" value="2" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Info:
|
||||
<input type="number" name="loginfos" value="3" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Debug:
|
||||
<input type="number" name="logdebugs" value="4" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<button type="submit" style="flex:1; min-width: 12ch; padding: 0.5rem">Update preview</button>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex">
|
||||
<pre style="flex:1; width:100%" id="result"></pre>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue