{{ define "settings" }} <section class="p-5"> <form action="/settings/hooks/{{ .Hook.Id }}" method="post"> <h2>Configuration</h2> <label for="workergroups">Worker Groups</label> <input type="text" name="workergroups" id="workergroups" value="{{ range .Hook.WorkerGroups }}{{ . }}{{ end }}" required /> <p>Worker groups are used to distribute the hook to specific workers.</p> <label for="schedule">Schedule</label> <input type="text" name="schedule" id="schedule" value="{{ .Hook.Schedule }}" required /> <p> Schedule is a cron expression that defines when the hook 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="sm:col-span-2 h-96"> {{ ScriptUnescapeString .Hook.Script }}</textarea > <div id="editor-script" class="hidden sm:col-span-2 block w-full h-96 rounded-lg border border-gray-300 overflow-hidden" ></div> <p class="sm:col-span-2"> 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> <div class="flex md:flex-row flex-col gap-4 h-min"> <section class="p-5 flex-1"> <h2 class="mb-2 flex flex-row gap-2"> State {{ if eq .Hook.State "ACTIVE" }} <span class="self-center h-fit w-fit px-2 text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800" > ACTIVE </span> {{ else if eq .Hook.State "PAUSED" }} <span class="self-center h-fit w-fit px-2 text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800" > PAUSED </span> {{ end }} </h2> <p class="text-sm mb-2"> Pausing the hook will stop it from executing. This can be useful in cases of expected downtime. Or when the hook is not needed anymore. </p> {{ if eq .Hook.State "ACTIVE" }} <a class="block text-center py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100" href="/settings/hooks/{{ .Hook.Id }}/disable" >Pause</a > {{ else if eq .Hook.State "PAUSED" }} <a class="block text-center py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100" href="/settings/hooks/{{ .Hook.Id }}/enable" >Resume</a > {{ end }} </section> <section class="p-2 flex-1 border-4 border-red-300"> <h2 class="mb-2">Danger Zone</h2> <p class="text-sm mb-2">Permanently delete this hook.</p> <a class="block text-center focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/settings/hooks/{{ .Hook.Id }}/delete" >Delete</a > </section> </div> <section> <table> <caption> History <p>Last 10 executions of hook script.</p> </caption> <thead> <tr> <th>Hook ID</th> <th>Status</th> <th>Started At</th> <th>Ended At</th> <th>Duration</th> <th>Note</th> </tr> </thead> <tbody> {{ range .History }} {{ if eq .Status "Running" }} <tr> <td>{{ .HookId }}</td> <td> <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800" > {{ .Status }}... </span> </td> <td>{{ .StartTime.Format "2006-01-02 15:04:05" }}</td> <td></td> <td></td> <td class="whitespace-normal"></td> </tr> {{ else }} <tr> <td>{{ .HookId }}</td> <td> <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ if eq .Status "Completed" }} bg-purple-100 text-purple-800 {{ else }} bg-red-100 text-red-800 {{ end }} " > {{ .Status }} </span> </td> <td> <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800" > {{ .WorkerGroupName }} </span> </td> <td>{{ .StartTime.Format "2006-01-02 15:04:05" }}</td> <td>{{ .EndTime.Format "2006-01-02 15:04:05" }}</td> <td>{{ DurationRoundMillisecond .Duration }}</td> <td class="whitespace-normal">{{ .Note }}</td> </tr> {{ end }} {{ end }} </tbody> </table> </section> <script src="/static/monaco/vs/loader.js"></script> <script> const items = [{ name: "script", language: "javascript" }]; function save() { for (const { name } of items) { const elem = window.editors[name].getValue(); document.getElementById(name).value = elem; } } window.editors = {}; for (const { name, language, options = {} } of items) { const textarea = document.getElementById(name); const editor = document.getElementById("editor-" + name); editor.classList.remove("hidden"); textarea.hidden = true; require.config({ paths: { vs: "/static/monaco/vs" } }); require(["vs/editor/editor.main"], function () { window.editors[name] = monaco.editor.create(editor, { value: textarea.value, language: language, minimap: { enabled: false }, codeLens: false, contextmenu: false, scrollBeyondLastLine: false, wordWrap: "on", ...options, }); const resizeObserver = new ResizeObserver((entries) => { window.editors[name].layout(); }); resizeObserver.observe(editor); }); } </script> {{ end }}