mirror of
https://github.com/containrrr/watchtower.git
synced 2025-12-13 13:46:38 +01:00
feat(docs): add template preview (#1777)
This commit is contained in:
nils måsén
GitHub
parent
9b28fbc24d
commit
9180e9558e
15 changed files with 944 additions and 20 deletions
219
docs/template-preview.md
Normal file
219
docs/template-preview.md
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
<style>
|
||||
#tplprev {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 1rem;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-right: -13.3rem
|
||||
}
|
||||
#tplprev 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;
|
||||
flex: 1;
|
||||
}
|
||||
#tplprev .controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 0.5rem
|
||||
}
|
||||
#tplprev textarea, #tplprev 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;
|
||||
}
|
||||
#tplprev button {
|
||||
border-radius: 0.1rem;
|
||||
color: var(--md-typeset-color);
|
||||
background-color: var(--md-primary-fg-color);
|
||||
flex:1;
|
||||
min-width: 12ch;
|
||||
padding: 0.5rem
|
||||
}
|
||||
#tplprev button:hover {
|
||||
background-color: var(--md-accent-fg-color);
|
||||
}
|
||||
#tplprev input[type="number"] { width: 5ch; flex: 1; font-size: 1rem; }
|
||||
#tplprev fieldset {
|
||||
margin-top: -0.5rem;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
#tplprev .template-wrapper {
|
||||
display: flex;
|
||||
flex:1;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
#tplprev .result-wrapper {
|
||||
flex: 1;
|
||||
display: flex
|
||||
}
|
||||
#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;
|
||||
height: 540px;
|
||||
flex:1;
|
||||
width:100%
|
||||
}
|
||||
#tplprev .loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
background: var(--md-code-bg-color);
|
||||
margin-top: 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 arrFromCount = (key) => Array.from(Array(form[key]?.valueAsNumber ?? 0), () => key);
|
||||
const states = form.enablereport.checked ? [
|
||||
...arrFromCount("skipped"),
|
||||
...arrFromCount("scanned"),
|
||||
...arrFromCount("updated"),
|
||||
...arrFromCount("failed" ),
|
||||
...arrFromCount("fresh" ),
|
||||
...arrFromCount("stale" ),
|
||||
] : [];
|
||||
console.log("States: %o", states);
|
||||
const levels = form.enablelog.checked ? [
|
||||
...arrFromCount("error"),
|
||||
...arrFromCount("warning"),
|
||||
...arrFromCount("info"),
|
||||
...arrFromCount("debug"),
|
||||
] : [];
|
||||
console.log("Levels: %o", levels);
|
||||
const output = WATCHTOWER.tplprev(input, states, levels);
|
||||
console.log('Output: \n%o', output);
|
||||
if (output.length) {
|
||||
document.querySelector('#result').innerText = output;
|
||||
} else {
|
||||
document.querySelector('#result').innerHTML = '<i>empty (would not be sent as a notification)</i>';
|
||||
}
|
||||
}
|
||||
const formSubmitted = (e) => {
|
||||
e.preventDefault();
|
||||
updatePreview();
|
||||
}
|
||||
let debounce;
|
||||
const inputUpdated = () => {
|
||||
if(debounce) clearTimeout(debounce);
|
||||
debounce = setTimeout(() => updatePreview(), 400);
|
||||
}
|
||||
const formChanged = (e) => {
|
||||
console.log('form changed: %o', e);
|
||||
}
|
||||
const go = new Go();
|
||||
WebAssembly.instantiateStreaming(fetch("../assets/tplprev.wasm"), go.importObject).then((result) => {
|
||||
document.querySelector('#tplprev .loading').style.display = "none";
|
||||
go.run(result.instance);
|
||||
updatePreview();
|
||||
});
|
||||
</script>
|
||||
<form id="tplprev" onchange="updatePreview()" onsubmit="formSubmitted(event)">
|
||||
<pre class="loading">loading wasm...</pre>
|
||||
<div class="template-wrapper">
|
||||
<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 class="controls">
|
||||
<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="error" value="1" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Warning:
|
||||
<input type="number" name="warning" value="2" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Info:
|
||||
<input type="number" name="info" value="3" />
|
||||
</label>
|
||||
<label class="numfield">
|
||||
Debug:
|
||||
<input type="number" name="debug" value="4" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<button type="submit">Update preview</button>
|
||||
</div>
|
||||
<div style="result-wrapper">
|
||||
<pre id="result"></pre>
|
||||
</div>
|
||||
</form>
|
||||
Loading…
Add table
Add a link
Reference in a new issue