zdravko/web/templates/pages/settings_monitors_create.tmpl
Tine c153fe1b8f
feat: readability imrovements, new pages, script escaping
Progress towards finalizing the building blocks: targets, monitors, triggers, notifications and worker groups.
2024-05-14 21:38:45 +02:00

104 lines
3.2 KiB
Cheetah

{{ define "settings" }}
<section class="p-5">
<form action="/settings/monitors/create" method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Github.com" />
<p>Name of the monitor can be anything.</p>
<label list="existing-groups" for="group">Monitor Group</label>
<input
type="text"
name="group"
id="group"
placeholder="default"
value="default"
required
/>
<datalist id="existing-groups">
<option value="default"></option>
</datalist>
<p>
Group monitors together. This affects how they are presented on the
homepage.
</p>
<label for="workergroups">Worker Groups</label>
<input
type="text"
name="workergroups"
id="workergroups"
placeholder="NA EU"
required
/>
<p>
Worker groups are used to distribute the monitor to specific workers.
</p>
<label for="schedule">Schedule</label>
<input
type="text"
name="schedule"
id="schedule"
placeholder="@every 1m"
value="@every 1m"
required
/>
<p>
Schedule is a cron expression that defines when the monitor should be
executed.
<br />
You can also use <code>@every [interval]</code> where interval is a
duration like 5m, 1h, 60s. Or use <code>@hourly</code>,
<code>@daily</code>, <code>@weekly</code>, <code>@monthly</code>,
<code>@yearly</code>.
</p>
<label for="script">Script</label>
<textarea required id="script" name="script" class="h-96">
{{ ScriptUnescapeString .Example }}</textarea
>
<div
id="editor"
class="hidden block w-full h-96 rounded-lg border border-gray-300 overflow-hidden"
></div>
<p>
Script is what determines the status of a service. You can read more
about it on
<a target="_blank" href="https://k6.io/docs/using-k6/http-requests/"
>k6 documentation</a
>.
</p>
<button type="submit" onclick="save()">Create</button>
</form>
</section>
<script src="/static/monaco/vs/loader.js"></script>
<script>
function htmlDecode(input) {
var doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
script = htmlDecode("{{ .Example }}");
document.getElementById("editor").classList.remove("hidden");
document.getElementById("script").hidden = true;
function save() {
const script = window.editor.getValue();
document.getElementById("script").value = script;
}
require.config({ paths: { vs: "/static/monaco/vs" } });
require(["vs/editor/editor.main"], function () {
window.editor = monaco.editor.create(document.getElementById("editor"), {
value: script,
language: "javascript",
minimap: { enabled: false },
codeLens: false,
contextmenu: false,
});
const divElem = document.getElementById("editor");
const resizeObserver = new ResizeObserver((entries) => {
window.editor.layout();
});
resizeObserver.observe(divElem);
});
</script>
{{ end }}