zdravko/web/templates/pages/settings_monitors_describe.tmpl

94 lines
3.5 KiB
Cheetah

{{define "settings"}}
<section class="p-5">
<form action="/settings/monitors/{{ .Monitor.Slug }}" method="post">
<h2>
Configuration
</h2>
<label for="workergroups">Worker Groups</label>
<input type="text" name="workergroups" id="workergroups" value="{{ StringsJoin .Monitor.WorkerGroups " " }}"/>
<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" value="{{ .Monitor.Schedule }}"/>
<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>
<input required type="hidden" id="script" name="script">
<div id="editor" class="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()">Save</button>
</form>
</section>
<section>
<table class="min-w-full">
<caption class="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white">
History
<p class="mt-1 text-sm font-normal text-gray-500">
Last executions of monitor script.
</p>
</caption>
<thead>
<tr>
<th class="px-6 py-3 border-b-2 border-gray-300 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 border-b-2 border-gray-300 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Created At</th>
<th class="px-6 py-3 border-b-2 border-gray-300 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Duration</th>
<th class="px-6 py-3 border-b-2 border-gray-300 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Note</th>
</tr>
</thead>
<tbody>
{{range .Monitor.History}}
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{if eq .Status "SUCCESS"}}bg-green-100 text-green-800{{else}}bg-red-100 text-red-800{{end}}">
{{ .Status }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
{{ .CreatedAt.Format "2006-01-02 15:04:05" }}
</td>
<td class="px-6 py-4 whitespace-nowrap">
{ .Duration }
</td>
<td class="px-6 py-4">
{{ .Note }}
</td>
</tr>
{{end}}
</tbody>
</table>
</section>
<script src="/static/monaco/vs/loader.js"></script>
<script>
function save() {
const script = window.editor.getValue();
document.getElementById('script').value = script;
}
script = `{{ .Monitor.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}}