mirror of
https://github.com/containrrr/watchtower.git
synced 2024-12-06 19:26:27 +01:00
nils måsén
7.8 KiB
7.8 KiB
<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-primary-bg-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%
}
#result b {color: var(--md-code-hl-special-color)}
#result i {color: var(--md-code-hl-keyword-color)}
#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>
let wasmLoaded = false;
const updatePreview = () => {
if (!wasmLoaded) return;
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.report.value === "yes" ? [
...arrFromCount("skipped"),
...arrFromCount("scanned"),
...arrFromCount("updated"),
...arrFromCount("failed" ),
...arrFromCount("fresh" ),
...arrFromCount("stale" ),
] : [];
console.log("States: %o", states);
const levels = form.log.value === "yes" ? [
...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.startsWith('Error: ')) {
document.querySelector('#result').innerHTML = `Error: ${output.substring(7)}`;
} else if (output.length) {
document.querySelector('#result').innerText = output;
} else {
document.querySelector('#result').innerHTML = 'empty (would not be sent as a notification)';
}
}
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 targetToggle = e.target.dataset['toggle'];
if (targetToggle) {
e.target.form[targetToggle].value = e.target.checked ? "yes" : "no";
}
updatePreview()
}
const go = new Go();
WebAssembly.instantiateStreaming(fetch("../assets/tplprev.wasm"), go.importObject).then((result) => {
go.run(result.instance);
document.querySelector('#tplprev .loading').style.display = "none";
wasmLoaded = true;
updatePreview();
});
</script>
<script>
const loadQueryVals = () => {
const form = document.querySelector('#tplprev');
const params = new URLSearchParams(location.search);
for(const [key, value] of params){
form[key].value = value;
const toggleInput = form.querySelector(`[data-toggle="${key}"]`);
if (toggleInput) {
toggleInput.checked = value === "yes";
}
}
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", loadQueryVals());
} else {
loadQueryVals();
}
</script>
loading wasm...
{{- 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) }}
<p dir="auto">Logs:
{{ end -}}
{{range .Entries -}}{{.Time.Format "2006-01-02T15:04:05Z07:00"}} [{{.Level}}] {{.Message}}{{"\n"}}{{- end -}}
Container report
Skipped:
Scanned:
Updated:
Failed:
Fresh:
Stale:
Log entries
Error:
Warning:
Info:
Debug:
Update preview