Skip to content

Commit

Permalink
feat(docs): add template preview (#1777)
Browse files Browse the repository at this point in the history
  • Loading branch information
piksel authored Oct 2, 2023
1 parent 9b28fbc commit 9180e95
Show file tree
Hide file tree
Showing 15 changed files with 944 additions and 20 deletions.
6 changes: 6 additions & 0 deletions .github/workflows/publish-docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@ dist
.DS_Store
/site
coverage.out
*.coverprofile
*.coverprofile

docs/assets/wasm_exec.js
docs/assets/*.wasm
219 changes: 219 additions & 0 deletions docs/template-preview.md
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 0 additions & 10 deletions pkg/notifications/json.go
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Loading

0 comments on commit 9180e95

Please sign in to comment.