feat(docs): add template preview (#1777)

.github/workflows/publish-docs.yml

@@ -17,6 +17,12 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - name: Set up Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: 1.18.x
+      - name: Build tplprev
+        run: scripts/build-tplprev.sh
       - name: Setup python
         uses: actions/setup-python@v4
         with:

.gitignore

@@ -7,4 +7,7 @@ dist
 .DS_Store
 /site
 coverage.out
-*.coverprofile
+*.coverprofile
+
+docs/assets/wasm_exec.js
+docs/assets/*.wasm

docs/template-preview.md

@@ -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>

pkg/notifications/json.go

@@ -59,13 +59,3 @@ func marshalReports(reports []t.ContainerReport) []jsonMap {
 }
 
 var _ json.Marshaler = &Data{}
-
-func toJSON(v interface{}) string {
-	var bytes []byte
-	var err error
-	if bytes, err = json.MarshalIndent(v, "", "  "); err != nil {
-		LocalLog.Errorf("failed to marshal JSON in notification template: %v", err)
-		return ""
-	}
-	return string(bytes)
-}