mentos1386/zdravko
1
0
Fork 0
mirror of https://github.com/mentos1386/zdravko.git synced 2024-11-21 15:26:29 +00:00
Code Issues Projects Releases Packages Wiki Activity

style: format tmpl with prettier

Browse source
This commit is contained in:
Tine 2024-02-29 12:15:15 +01:00
parent 65db9b3f72
commit 7c8e130845
Signed by: mentos1386
SSH key fingerprint: SHA256:MNtTsLbihYaWF8j1fkOHfkKNlnN1JQfxEU/rBU8nCGw
15 changed files with 791 additions and 580 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -3,6 +3,7 @@ dist/
# NPM # NPM
package-lock.json package-lock.json
package.json package.json
node_modules/
# Database # Database
zdravko.db zdravko.db

3
.prettierrc Normal file
View file

@ -0,0 +1,3 @@
{
"plugins": ["prettier-plugin-go-template"]
}

8
deploy/fly.toml
View file

@ -48,8 +48,14 @@ primary_region = 'waw'
port = 7233 port = 7233
handlers = ['tls'] handlers = ['tls']
[[vm]]
cpu_kind = 'shared'
cpus = 2
memory_mb = 512
processes = ['server']
[[vm]] [[vm]]
cpu_kind = 'shared' cpu_kind = 'shared'
cpus = 1 cpus = 1
memory_mb = 256 memory_mb = 256
processes = ['server', 'worker'] processes = ['worker']

82
web/templates/components/base.tmpl
View file

@ -1,38 +1,46 @@
{{define "base"}} {{ define "base" }}
{{ $title := "" }} {{ $title := "" }}
{{ $path := "" }} {{ $path := "" }}
{{ if ne nil .NavbarActive }} {{ if ne nil .NavbarActive }}
{{ $title = .NavbarActive.Title }} {{ $title = .NavbarActive.Title }}
{{ $path = .NavbarActive.Path }} {{ $path = .NavbarActive.Path }}
{{ end }} {{ end }}
<!DOCTYPE html>
<html lang="en"> <!doctype html>
<head> <html lang="en">
<meta charset="UTF-8"> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zdravko - {{$title}}</title> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/static/css/tailwind.css"> <title>Zdravko - {{ $title }}</title>
</head> <link rel="stylesheet" href="/static/css/tailwind.css" />
<body class="bg-gray-100"> </head>
<nav class="navbar"> <body class="bg-gray-100">
{{range .Navbar}} <nav class="navbar">
<a {{ range .Navbar }}
{{$active := eq .Path $path }} <a
{{if $active}}aria-current="true"{{end}} {{ $active := eq .Path $path }}
href="{{.Path}}" {{ if $active }}aria-current="true"{{ end }}
class="{{if $active}}active{{end}}"> href="{{ .Path }}"
{{.Title}} class="{{ if $active }}active{{ end }}"
</a> >
{{end}} {{ .Title }}
</nav> </a>
{{template "main" .}} {{ end }}
<div class="container mx-auto"> </nav>
<footer class="text-center text-gray-500 text-xs mt-8 mb-4"> {{ template "main" . }}
&copy; 2024 Zdravko - <a class="hover:underline" href="https://github.com/mentos1386/zdravko">Open Source</a> <div class="container mx-auto">
</footer> <footer class="text-center text-gray-500 text-xs mt-8 mb-4">
<script src="/static/js/htmx.min.js"></script> &copy; 2024 Zdravko -
</body> <a
</html> class="hover:underline"
{{end}} href="https://github.com/mentos1386/zdravko"
>Open Source</a
>
</footer>
</div>
<script src="/static/js/htmx.min.js"></script>
</body>
</html>
{{ end }}

85
web/templates/components/settings.tmpl
View file

@ -1,39 +1,54 @@
{{define "main"}} {{ define "main" }}
{{ $title := "" }} {{ $title := "" }}
{{ $path := "" }} {{ $path := "" }}
{{ if ne nil .SettingsSidebarActive }} {{ if ne nil .SettingsSidebarActive }}
{{ $title = .SettingsSidebarActive.Title }} {{ $title = .SettingsSidebarActive.Title }}
{{ $path = .SettingsSidebarActive.Path }} {{ $path = .SettingsSidebarActive.Path }}
{{ end }} {{ end }}
<div class="container max-w-screen-lg mt-8 lg:mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8">
<ul class="sidebar"> <div
{{range .SettingsSidebar}} class="container max-w-screen-lg mt-8 lg:mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8"
<li> >
<a <ul class="sidebar">
{{$active := eq .Path $path }} {{ range .SettingsSidebar }}
{{if $active}}aria-current="true"{{end}} <li>
href="{{.Path}}" <a
class="{{if $active}}active{{end}}"> {{ $active := eq .Path $path }}
{{.Title}} {{ if $active }}aria-current="true"{{ end }}
</a> href="{{ .Path }}"
</li> class="{{ if $active }}active{{ end }}"
{{end}} >
</ul> {{ .Title }}
<div class="settings">
<nav aria-label="Breadcrumb" class="mx-8 lg:mx-0 grid justify-center lg:justify-start">
<ol class="inline-flex items-center">
{{ range .SettingsBreadcrumbs }}
<li class="inline-flex items-center">
<a href="{{ .Path }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
{{ .Breadcrumb }}
<svg aria-hidden="true" class="feather h-4 w-4 mx-1 text-gray-400 overflow-visible"><use href="/static/icons/feather-sprite.svg#chevron-right"/></svg>
</a> </a>
</li> </li>
{{ end }} {{ end }}
</ol> </ul>
</nav> <div class="settings">
{{template "settings" .}} <nav
aria-label="Breadcrumb"
class="mx-8 lg:mx-0 grid justify-center lg:justify-start"
>
<ol class="inline-flex items-center">
{{ range .SettingsBreadcrumbs }}
<li class="inline-flex items-center">
<a
href="{{ .Path }}"
class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600"
>
{{ .Breadcrumb }}
<svg
aria-hidden="true"
class="feather h-4 w-4 mx-1 text-gray-400 overflow-visible"
>
<use href="/static/icons/feather-sprite.svg#chevron-right" />
</svg>
</a>
</li>
{{ end }}
</ol>
</nav>
{{ template "settings" . }}
</div>
</div> </div>
</div> {{ end }}
{{end}}

22
web/templates/pages/404.tmpl
View file

@ -1,7 +1,15 @@
{{define "main"}} {{ define "main" }}
<div class="text-center mt-20"> <div class="text-center mt-20">
<h1 class="text-3xl mb-4 font-bold"><span class="text-red-600">Error 404:</span> Page was not found!</h1> <h1 class="text-3xl mb-4 font-bold">
<p>We didn't find the page you were looking for. Please check the URL and try again.</p> <span class="text-red-600">Error 404:</span> Page was not found!
<p>Or you can go back to the <a class="underline text-blue-600" href="/">homepage</a>.</p> </h1>
</div> <p>
{{end}} We didn't find the page you were looking for. Please check the URL and try
again.
</p>
<p>
Or you can go back to the
<a class="underline text-blue-600" href="/">homepage</a>.
</p>
</div>
{{ end }}

27
web/templates/pages/incidents.tmpl
View file

@ -1,14 +1,19 @@
{{define "main"}} {{ define "main" }}
<div class="container max-w-screen-md flex flex-col mt-20"> <div class="container max-w-screen-md flex flex-col mt-20">
<section> <section>
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16"> <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
<h1 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"> <h1
class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"
>
There are no Incidents, yet. There are no Incidents, yet.
</h1> </h1>
<p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40"> <p
Incidents will allow you to inform your users or co-worker groups about outages and issues. class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40"
</p> >
Incidents will allow you to inform your users or co-worker groups
about outages and issues.
</p>
</div> </div>
</section> </section>
</div> </div>
{{end}} {{ end }}

231
web/templates/pages/index.tmpl
View file

@ -1,98 +1,141 @@
{{define "daily"}} {{ define "daily" }}
<div class="justify-self-end text-sm">{{ .HistoryDaily.Uptime }}% uptime</div> <div class="justify-self-end text-sm">{{ .HistoryDaily.Uptime }}% uptime</div>
<div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden"> <div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
{{ range .HistoryDaily.History }} {{ range .HistoryDaily.History }}
{{ if eq . "SUCCESS" }} {{ if eq . "SUCCESS" }}
<div class="bg-green-400 hover:bg-green-500 flex-auto"></div> <div class="bg-green-400 hover:bg-green-500 flex-auto"></div>
{{ else if eq . "FAILURE" }} {{ else if eq . "FAILURE" }}
<div class="bg-red-400 hover:bg-red-500 flex-auto"></div> <div class="bg-red-400 hover:bg-red-500 flex-auto"></div>
{{ else }}
<div class="bg-gray-400 hover:bg-gray-500 flex-auto"></div>
{{ end }}
{{ end }}
</div>
<div class="text-slate-500 justify-self-start text-sm">90 days ago</div>
<div class="text-slate-500 justify-self-end text-sm">Today</div>
{{end}}
{{define "hourly"}}
<div class="justify-self-end text-sm">{{ .HistoryHourly.Uptime }}% uptime</div>
<div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
{{ range .HistoryHourly.History }}
{{ if eq . "SUCCESS" }}
<div class="bg-green-400 hover:bg-green-500 flex-auto"></div>
{{ else if eq . "FAILURE" }}
<div class="bg-red-400 hover:bg-red-500 flex-auto"></div>
{{ else }}
<div class="bg-gray-400 hover:bg-gray-500 flex-auto"></div>
{{ end }}
{{ end }}
</div>
<div class="text-slate-500 justify-self-start text-sm">48 hours ago</div>
<div class="text-slate-500 justify-self-end text-sm">Now</div>
{{end}}
{{define "main"}}
<div class="container max-w-screen-md flex flex-col mt-20">
{{ if eq .MonitorsLength 0 }}
<section>
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
<h1 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl">
There are no monitors yet.
</h1>
<p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40">
Create a monitor to monitor your services and get notified when they are down.
</p>
<div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
<a href="/settings/monitors/create" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300">
Create First Monitor
<svg class="feather ml-1 h-5 w-5 overflow-visible"><use href="/static/icons/feather-sprite.svg#plus" /></svg>
</a>
</div>
</div>
</section>
{{ else }}
{{ if or (eq .Status "UNKNOWN") (eq .Status "SUCCESS") }}
<div class="flex flex-col items-center">
<svg class="feather h-20 w-20 rounded-full bg-green-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#check" /></svg>
<h1 class="text-slate-500 mt-4">All services are online</h1>
<p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
</div>
{{ else }}
<div class="flex flex-col items-center">
<svg class="feather h-20 w-20 rounded-full bg-red-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#alert-triangle" /></svg>
<h3 class="text-slate-500 mt-4">Degraded performance</h3>
<p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
</div>
{{ end }}
<div class="monitors">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<p class="text-l font-normal text-gray-800 text-center sm:text-left">Monitors</p>
<div class="inline-flex rounded-md shadow-sm justify-self-center sm:justify-self-end time-range" role="group">
<a href="/?time-range=90days" class="{{ if eq .TimeRange "90days" }}active{{end}}" type="button">90 Days</a>
<a href="/?time-range=48hours" class="{{ if eq .TimeRange "48hours" }}active{{end}}" type="button">48 Hours</a>
</div>
</div>
{{ range .HealthChecks }}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<div class="flex items-center">
{{ if eq .Status "SUCCESS" }}
<span class="flex w-3 h-3 me-2 bg-green-400 rounded-full"></span>
{{ else if eq .Status "FAILURE" }}
<span class="flex w-3 h-3 me-2 bg-red-400 rounded-full"></span>
{{ else }}
<span class="flex w-3 h-3 me-2 bg-gray-400 rounded-full"></span>
{{ end }}
<p>{{ .Name }}</p>
</div>
{{ if eq $.TimeRange "90days" }}
{{ template "daily" . }}
{{ else }} {{ else }}
{{ template "hourly" . }} <div class="bg-gray-400 hover:bg-gray-500 flex-auto"></div>
{{ end }} {{ end }}
</div>
{{ end }} {{ end }}
</div> </div>
{{ end }} <div class="text-slate-500 justify-self-start text-sm">90 days ago</div>
</div> <div class="text-slate-500 justify-self-end text-sm">Today</div>
{{end}} {{ end }}
{{ define "hourly" }}
<div class="justify-self-end text-sm">
{{ .HistoryHourly.Uptime }}% uptime
</div>
<div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
{{ range .HistoryHourly.History }}
{{ if eq . "SUCCESS" }}
<div class="bg-green-400 hover:bg-green-500 flex-auto"></div>
{{ else if eq . "FAILURE" }}
<div class="bg-red-400 hover:bg-red-500 flex-auto"></div>
{{ else }}
<div class="bg-gray-400 hover:bg-gray-500 flex-auto"></div>
{{ end }}
{{ end }}
</div>
<div class="text-slate-500 justify-self-start text-sm">48 hours ago</div>
<div class="text-slate-500 justify-self-end text-sm">Now</div>
{{ end }}
{{ define "main" }}
<div class="container max-w-screen-md flex flex-col mt-20">
{{ if eq .MonitorsLength 0 }}
<section>
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
<h1
class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"
>
There are no monitors yet.
</h1>
<p
class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40"
>
Create a monitor to monitor your services and get notified when they
are down.
</p>
<div
class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"
>
<a
href="/settings/monitors/create"
class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
>
Create First Monitor
<svg class="feather ml-1 h-5 w-5 overflow-visible">
<use href="/static/icons/feather-sprite.svg#plus" />
</svg>
</a>
</div>
</div>
</section>
{{ else }}
{{ if or (eq .Status "UNKNOWN") (eq .Status "SUCCESS") }}
<div class="flex flex-col items-center">
<svg
class="feather h-20 w-20 rounded-full bg-green-300 p-4 overflow-visible"
>
<use href="/static/icons/feather-sprite.svg#check" />
</svg>
<h1 class="text-slate-500 mt-4">All services are online</h1>
<p class="text-slate-500 text-sm">
Last updated on Feb 10 at 10:55am UTC
</p>
</div>
{{ else }}
<div class="flex flex-col items-center">
<svg
class="feather h-20 w-20 rounded-full bg-red-300 p-4 overflow-visible"
>
<use href="/static/icons/feather-sprite.svg#alert-triangle" />
</svg>
<h3 class="text-slate-500 mt-4">Degraded performance</h3>
<p class="text-slate-500 text-sm">
Last updated on Feb 10 at 10:55am UTC
</p>
</div>
{{ end }}
<div class="monitors">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<p class="text-l font-normal text-gray-800 text-center sm:text-left">
Monitors
</p>
<div
class="inline-flex rounded-md shadow-sm justify-self-center sm:justify-self-end time-range"
role="group"
>
<a
href="/?time-range=90days"
class="{{ if eq .TimeRange "90days" }}active{{ end }}"
type="button"
>90 Days</a
>
<a
href="/?time-range=48hours"
class="{{ if eq .TimeRange "48hours" }}active{{ end }}"
type="button"
>48 Hours</a
>
</div>
</div>
{{ range .HealthChecks }}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<div class="flex items-center">
{{ if eq .Status "SUCCESS" }}
<span
class="flex w-3 h-3 me-2 bg-green-400 rounded-full"
></span>
{{ else if eq .Status "FAILURE" }}
<span class="flex w-3 h-3 me-2 bg-red-400 rounded-full"></span>
{{ else }}
<span class="flex w-3 h-3 me-2 bg-gray-400 rounded-full"></span>
{{ end }}
<p>{{ .Name }}</p>
</div>
{{ if eq $.TimeRange "90days" }}
{{ template "daily" . }}
{{ else }}
{{ template "hourly" . }}
{{ end }}
</div>
{{ end }}
</div>
{{ end }}
</div>
{{ end }}

155
web/templates/pages/settings_monitors.tmpl
View file

@ -1,94 +1,109 @@
{{define "settings"}} {{ define "settings" }}
{{ $description := "Monitors are constantly checking weather a service is online and working correctly." }}
{{ $description := "Monitors are constantly checking weather a service is online and working correctly." }} {{ if eq .MonitorsLength 0 }}
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
{{ if eq .MonitorsLength 0 }} <h1
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16"> class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"
<h1 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"> >
There are no monitors yet. There are no monitors yet.
</h1> </h1>
<p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40"> <p
{{ $description }} class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40"
</p> >
<div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"> {{ $description }}
<a href="/settings/monitors/create" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"> </p>
<div
class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"
>
<a
href="/settings/monitors/create"
class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
>
Create First Monitor Create First Monitor
<svg class="feather ml-1 h-5 w-5 overflow-visible"><use href="/static/icons/feather-sprite.svg#plus" /></svg> <svg class="feather ml-1 h-5 w-5 overflow-visible">
<use href="/static/icons/feather-sprite.svg#plus" />
</svg>
</a> </a>
</div>
</div> </div>
</div> {{ else }}
{{ else }} <section>
<section> <table>
<table>
<caption> <caption>
List of Monitors List of Monitors
<div class="mt-1 gap-4 flex justify-between"> <div class="mt-1 gap-4 flex justify-between">
<p> <p>
{{ $description }} {{ $description }}
</p> </p>
<a href="/settings/monitors/create" class="inline-flex justify-center items-center py-1 px-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"> <a
href="/settings/monitors/create"
class="inline-flex justify-center items-center py-1 px-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
>
Create New Create New
<svg class="feather h-5 w-5 overflow-visible"><use href="/static/icons/feather-sprite.svg#plus" /></svg> <svg class="feather h-5 w-5 overflow-visible">
<use href="/static/icons/feather-sprite.svg#plus" />
</svg>
</a> </a>
</div> </div>
</caption> </caption>
<thead class="text-xs text-gray-700 uppercase bg-gray-50"> <thead class="text-xs text-gray-700 uppercase bg-gray-50">
<tr> <tr>
<th scope="col"> <th scope="col">Name</th>
Name <th scope="col">Worker Groups</th>
</th> <th scope="col">Status</th>
<th scope="col"> <th scope="col">Schedule</th>
Worker Groups <th scope="col">Action</th>
</th> </tr>
<th scope="col">
Status
</th>
<th scope="col">
Schedule
</th>
<th scope="col">
Action
</th>
</tr>
</thead> </thead>
{{range .Monitors}} {{ range .Monitors }}
<tbody> <tbody>
<tr> <tr>
<th scope="row"> <th scope="row">
{{.Name}} {{ .Name }}
</th> </th>
<td> <td>
{{range .WorkerGroups}} {{ range .WorkerGroups }}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> <span
{{ . }} class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"
</span> >
{{end}} {{ . }}
</td> </span>
<td> {{ end }}
{{ if eq .Status "ACTIVE" }} </td>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> <td>
{{ if eq .Status "ACTIVE" }}
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
>
ACTIVE ACTIVE
</span> </span>
{{ else if eq .Status "PAUSED" }} {{ else if eq .Status "PAUSED" }}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"
>
PAUSED PAUSED
</span> </span>
{{ else }} {{ else }}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"> <span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
>
UNKNOWN UNKNOWN
</span> </span>
{{ end }} {{ end }}
</td> </td>
<td> <td>
{{.Schedule}} {{ .Schedule }}
</td> </td>
<td> <td>
<a href="/settings/monitors/{{.Slug}}" class="link">Details</a> <a href="/settings/monitors/{{ .Slug }}" class="link"
</td> >Details</a
>
</td>
</tr> </tr>
</tbody> </tbody>
{{end}} {{ end }}
</table> </table>
</section> </section>
{{end}} {{ end }}
{{end}} {{ end }}

123
web/templates/pages/settings_monitors_create.tmpl
View file

@ -1,40 +1,61 @@
{{define "settings"}} {{ define "settings" }}
<section class="p-5"> <section class="p-5">
<form action="/settings/monitors/create" method="post"> <form action="/settings/monitors/create" method="post">
<label for="name">Name</label> <label for="name">Name</label>
<input type="name" name="name" id="name" placeholder="Github.com"> <input type="name" name="name" id="name" placeholder="Github.com" />
<p>Name of the monitor can be anything.</p> <p>Name of the monitor can be anything.</p>
<label for="workergroups">Worker Groups</label> <label for="workergroups">Worker Groups</label>
<input type="text" name="workergroups" id="workergroups" placeholder="NA EU"/> <input
<p>Worker groups are used to distribute the monitor to specific workers.</p> type="text"
<label for="schedule">Schedule</label> name="workergroups"
<input type="text" name="schedule" id="schedule" placeholder="@every 1m" value="@every 1m"/> id="workergroups"
<p> placeholder="NA EU"
Schedule is a cron expression that defines when the monitor should be executed. />
</br> <p>
You can also use <code>@every [interval]</code> where interval is a duration like 5m, 1h, 60s. Worker groups are used to distribute the monitor to specific workers.
Or use <code>@hourly</code>, <code>@daily</code>, <code>@weekly</code>, <code>@monthly</code>, <code>@yearly</code>. </p>
</p> <label for="schedule">Schedule</label>
<label for="script">Script</label> <input
<input required type="hidden" id="script" name="script"> type="text"
<div id="editor" class="block w-full h-96 rounded-lg border border-gray-300 overflow-hidden"></div> name="schedule"
<p> id="schedule"
Script is what determines the status of a service. placeholder="@every 1m"
You can read more about it on <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/">k6 documentation</a>. value="@every 1m"
</p> />
<button type="submit" onclick="save()">Create</button> <p>
</form> Schedule is a cron expression that defines when the monitor should be
</section> 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()">Create</button>
</form>
</section>
<script src="/static/monaco/vs/loader.js"></script>
<script>
function save() {
const script = window.editor.getValue();
document.getElementById("script").value = script;
}
<script src="/static/monaco/vs/loader.js"></script> script = `import http from 'k6/http';
<script>
function save() {
const script = window.editor.getValue();
document.getElementById('script').value = script;
}
script = `import http from 'k6/http';
export const options = { export const options = {
thresholds: { thresholds: {
@ -46,23 +67,23 @@ export const options = {
export default function () { export default function () {
http.get('https://example.com'); http.get('https://example.com');
} }
` `;
require.config({ paths: { vs: '/static/monaco/vs' } }); require.config({ paths: { vs: "/static/monaco/vs" } });
require(['vs/editor/editor.main'], function () { require(["vs/editor/editor.main"], function () {
window.editor = monaco.editor.create(document.getElementById('editor'), { window.editor = monaco.editor.create(document.getElementById("editor"), {
value: script, value: script,
language: 'javascript', language: "javascript",
minimap: { enabled: false }, minimap: { enabled: false },
codeLens: false, codeLens: false,
contextmenu: false, contextmenu: false,
}); });
const divElem = document.getElementById('editor'); const divElem = document.getElementById("editor");
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver((entries) => {
window.editor.layout(); window.editor.layout();
});
resizeObserver.observe(divElem);
}); });
resizeObserver.observe(divElem); </script>
}); {{ end }}
</script>
{{end}}

236
web/templates/pages/settings_monitors_describe.tmpl
View file

@ -1,106 +1,140 @@
{{define "settings"}} {{ define "settings" }}
<section class="p-5"> <section class="p-5">
<form action="/settings/monitors/{{ .Monitor.Slug }}" method="post"> <form action="/settings/monitors/{{ .Monitor.Slug }}" method="post">
<h2> <h2>Configuration</h2>
Configuration <label for="workergroups">Worker Groups</label>
</h2> <input
<label for="workergroups">Worker Groups</label> type="text"
<input type="text" name="workergroups" id="workergroups" value="{{ range .Monitor.WorkerGroups }}{{.}} {{end}}"/> name="workergroups"
<p>Worker groups are used to distribute the monitor to specific workers.</p> id="workergroups"
<label for="schedule">Schedule</label> value="{{ range .Monitor.WorkerGroups }}{{ . }}{{ end }}"
<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>
<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">
Status
{{ if eq .Monitor.Status "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 .Monitor.Status "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 monitor will stop it from executing.
This can be useful in cases of expected downtime.
Or when the monitor is not needed anymore.
</p>
{{ if eq .Monitor.Status "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/monitors/{{ .Monitor.Slug }}/disable">Pause</a>
{{ else if eq .Monitor.Status "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/monitors/{{ .Monitor.Slug }}/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 monitor.</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/monitors/{{ .Monitor.Slug }}/delete">Delete</a>
</section>
</div>
<section>
<table>
<caption>
History
<p> <p>
Last 10 executions of monitor script. Worker groups are used to distribute the monitor to specific workers.
</p> </p>
</caption> <label for="schedule">Schedule</label>
<thead> <input
<tr> type="text"
<th>Status</th> name="schedule"
<th>Created At</th> id="schedule"
<th>Duration</th> value="{{ .Monitor.Schedule }}"
<th>Note</th> />
</tr> <p>
</thead> Schedule is a cron expression that defines when the monitor should be
<tbody> executed.
{{range .History}} <br />
<tr> You can also use <code>@every [interval]</code> where interval is a
<td> duration like 5m, 1h, 60s. Or use <code>@hourly</code>,
<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}}"> <code>@daily</code>, <code>@weekly</code>, <code>@monthly</code>,
{{ .Status }} <code>@yearly</code>.
</span> </p>
</td> <label for="script">Script</label>
<td> <input required type="hidden" id="script" name="script" />
{{ .CreatedAt.Format "2006-01-02 15:04:05" }} <div
</td> id="editor"
<td> class="block w-full h-96 rounded-lg border border-gray-300 overflow-hidden"
{ .Duration } ></div>
</td> <p>
<td class="whitespace-normal"> Script is what determines the status of a service. You can read more
{{ .Note }} about it on
</td> <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/"
</tr> >k6 documentation</a
{{end}} >.
</tbody> </p>
</table> <button type="submit" onclick="save()">Save</button>
</section> </form>
</section>
<script src="/static/monaco/vs/loader.js"></script> <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">
Status
{{ if eq .Monitor.Status "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 .Monitor.Status "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 monitor will stop it from executing. This can be useful in
cases of expected downtime. Or when the monitor is not needed anymore.
</p>
{{ if eq .Monitor.Status "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/monitors/{{ .Monitor.Slug }}/disable"
>Pause</a
>
{{ else if eq .Monitor.Status "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/monitors/{{ .Monitor.Slug }}/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 monitor.</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/monitors/{{ .Monitor.Slug }}/delete"
>Delete</a
>
</section>
</div>
<section>
<table>
<caption>
History
<p>Last 10 executions of monitor script.</p>
</caption>
<thead>
<tr>
<th>Status</th>
<th>Created At</th>
<th>Duration</th>
<th>Note</th>
</tr>
</thead>
<tbody>
{{ range .History }}
<tr>
<td>
<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>
{{ .CreatedAt.Format "2006-01-02 15:04:05" }}
</td>
<td>{ .Duration }</td>
<td class="whitespace-normal">
{{ .Note }}
</td>
</tr>
{{ end }}
</tbody>
</table>
</section>
<script src="/static/monaco/vs/loader.js"></script>
<script> <script>
function save() { function save() {
const script = window.editor.getValue(); const script = window.editor.getValue();
@ -126,4 +160,4 @@
resizeObserver.observe(divElem); resizeObserver.observe(divElem);
}); });
</script> </script>
{{end}} {{ end }}

53
web/templates/pages/settings_overview.tmpl
View file

@ -1,25 +1,38 @@
{{define "settings"}} {{ define "settings" }}
<div class="pt-8 mx-auto max-w-screen-xl text-center lg:pt-16"> <div class="pt-8 mx-auto max-w-screen-xl text-center lg:pt-16">
<h1 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"> <h1
Hi there, {{.User.Email}}. class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"
>
Hi there, {{ .User.Email }}.
</h1> </h1>
<p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 md:px-40"> <p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 md:px-40">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p> </p>
</div> </div>
<div class="mx-auto max-w-screen-xl flex flex-col sm:flex-row gap-4"> <div class="mx-auto max-w-screen-xl flex flex-col sm:flex-row gap-4">
<div class="inline-block bg-white rounded-lg shadow p-5 text-center sm:mt-0 sm:ml-2 sm:text-left"> <div
<h3 class="text-sm leading-6 font-medium text-gray-400">Total Workers</h3> class="inline-block bg-white rounded-lg shadow p-5 text-center sm:mt-0 sm:ml-2 sm:text-left"
<p class="text-3xl font-bold text-black">42</p> >
<h3 class="text-sm leading-6 font-medium text-gray-400">Total Workers</h3>
<p class="text-3xl font-bold text-black">42</p>
</div>
<div
class="inline-block bg-white rounded-lg shadow p-5 text-center sm:mt-0 sm:ml-2 sm:text-left"
>
<h3 class="text-sm leading-6 font-medium text-gray-400">
Total Monitors
</h3>
<p class="text-3xl font-bold text-black">42</p>
</div>
<div
class="inline-block bg-white rounded-lg shadow p-5 text-center sm:mt-0 sm:ml-2 sm:text-left"
>
<h3 class="text-sm leading-6 font-medium text-gray-400">
Total Notifications
</h3>
<p class="text-3xl font-bold text-black">42</p>
</div>
</div> </div>
<div class="inline-block bg-white rounded-lg shadow p-5 text-center sm:mt-0 sm:ml-2 sm:text-left"> {{ end }}
<h3 class="text-sm leading-6 font-medium text-gray-400">Total Monitors</h3>
<p class="text-3xl font-bold text-black">42</p>
</div>
<div class="inline-block bg-white rounded-lg shadow p-5 text-center sm:mt-0 sm:ml-2 sm:text-left">
<h3 class="text-sm leading-6 font-medium text-gray-400">Total Notifications</h3>
<p class="text-3xl font-bold text-black">42</p>
</div>
</div>
{{end}}

139
web/templates/pages/settings_worker_groups.tmpl
View file

@ -1,80 +1,93 @@
{{define "settings"}} {{ define "settings" }}
{{ $description := "Worker Groups are used to match multiple workers together. They can be used to difirentiate between regions, environments, networks etc." }}
{{ $description := "Worker Groups are used to match multiple workers together. They can be used to difirentiate between regions, environments, networks etc." }} {{ if eq .WorkerGroupsLength 0 }}
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
{{ if eq .WorkerGroupsLength 0 }} <h1
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16"> class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"
<h1 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"> >
There are no worker groups yet. There are no worker groups yet.
</h1> </h1>
<p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40"> <p
{{ $description }} class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40"
</p> >
<div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"> {{ $description }}
<a href="/settings/worker-groups/create" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"> </p>
<div
class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"
>
<a
href="/settings/worker-groups/create"
class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
>
Create First Worker Group Create First Worker Group
<svg class="feather ml-1 h-5 w-5 overflow-visible"><use href="/static/icons/feather-sprite.svg#plus" /></svg> <svg class="feather ml-1 h-5 w-5 overflow-visible">
<use href="/static/icons/feather-sprite.svg#plus" />
</svg>
</a> </a>
</div>
</div> </div>
</div> {{ else }}
{{ else }} <section>
<section> <table>
<table> <caption>
<caption> List of Worker Groups
List of Worker Groups <div class="mt-1 gap-4 flex justify-between">
<div class="mt-1 gap-4 flex justify-between"> <p>
<p> {{ $description }}
{{ $description }} </p>
</p> <a
<a href="/settings/worker-groups/create" class="inline-flex justify-center items-center py-1 px-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"> href="/settings/worker-groups/create"
Create New class="inline-flex justify-center items-center py-1 px-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
<svg class="feather h-5 w-5 overflow-visible"><use href="/static/icons/feather-sprite.svg#plus" /></svg> >
</a> Create New
</div> <svg class="feather h-5 w-5 overflow-visible">
</caption> <use href="/static/icons/feather-sprite.svg#plus" />
<thead> </svg>
</a>
</div>
</caption>
<thead>
<tr> <tr>
<th> <th>Name</th>
Name <th>Workers</th>
</th> <th>Monitors</th>
<th> <th>Action</th>
Workers
</th>
<th>
Monitors
</th>
<th>
Action
</th>
</tr> </tr>
</thead> </thead>
{{range .WorkerGroups}} {{ range .WorkerGroups }}
<tbody> <tbody>
<tr> <tr>
<th scope="row"> <th scope="row">
{{.Name}} {{ .Name }}
</th> </th>
<td> <td>
{{ if eq ( len .ActiveWorkers) 0 }} {{ if eq ( len .ActiveWorkers) 0 }}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"> <span
NONE class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
</span> >
NONE
</span>
{{ else }} {{ else }}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> <span
{{ len .ActiveWorkers }} ONLINE class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
</span> >
{{ len .ActiveWorkers }} ONLINE
</span>
{{ end }} {{ end }}
</td> </td>
<td> <td>
{{ len .Monitors }} {{ len .Monitors }}
</td> </td>
<td> <td>
<a href="/settings/worker-groups/{{.Slug}}" class="link">Details</a> <a href="/settings/worker-groups/{{ .Slug }}" class="link"
>Details</a
>
</td> </td>
</tr> </tr>
</tbody> </tbody>
{{end}} {{ end }}
</table> </table>
</section> </section>
{{end}} {{ end }}
{{end}} {{ end }}

22
web/templates/pages/settings_worker_groups_create.tmpl
View file

@ -1,10 +1,12 @@
{{define "settings"}} {{ define "settings" }}
<section class="p-5"> <section class="p-5">
<form action="/settings/worker-groups/create" method="post"> <form action="/settings/worker-groups/create" method="post">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900">Name</label> <label for="name" class="block mb-2 text-sm font-medium text-gray-900"
<input type="text" name="name" id="name" placeholder="aws-eu-central-1"/> >Name</label
<p>Worker group name can be anything.</p> >
<button type="submit">Create</button> <input type="text" name="name" id="name" placeholder="aws-eu-central-1" />
</form> <p>Worker group name can be anything.</p>
</section> <button type="submit">Create</button>
{{end}} </form>
</section>
{{ end }}

184
web/templates/pages/settings_worker_groups_describe.tmpl
View file

@ -1,84 +1,108 @@
{{define "settings"}} {{ define "settings" }}
<section class="p-5"> <section class="p-5">
<h2> <h2>
Token Token
<span>Use it as <code>WORKER_GROUP_TOKEN</code> configuration option.</span> <span
</h2> >Use it as <code>WORKER_GROUP_TOKEN</code> configuration option.</span
<div class="grid grid-cols-[auto_min-content] gap-2"> >
<pre id="token" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 overflow-x-auto">{{ .Worker.Token }}</pre>
<button id="copy-token" data-copy-to-clipboard-target="npm-install" class="col-span-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto p-2.5 text-center items-center inline-flex justify-center">
<span id="default-message">Copy</span>
<span id="success-message" class="hidden inline-flex items-center">
<svg class="feather h-4 w-4 mr-1 overflow-visible"><use href="/static/icons/feather-sprite.svg#check"/></svg>
Copied!
</span>
</button>
</div>
</section>
<div class="flex md:flex-row flex-col gap-4 h-min">
<section class="flex-1">
<table>
<caption>
<span>
Active Workers
{{ if eq ( len .Worker.ActiveWorkers) 0 }}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
NONE
</span>
{{ else }}
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
{{ len .Worker.ActiveWorkers }} ONLINE
</span>
{{ end }}
</span>
<p>
Current workers that were online in last minutes.
</p>
</caption>
{{ if eq ( len .Worker.ActiveWorkers) 0 }}
<thead><tr><th>No workers online for this worker group.</th></tr></thead>
{{ else }}
<thead>
<tr>
<th>Identity</th>
</tr>
</thead>
<tbody>
{{range .Worker.ActiveWorkers }}
<tr>
<th>{{ . }}</th>
</tr>
{{end}}
</tbody>
{{end}}
</table>
</section>
<section class="p-2 flex-1 border-4 border-red-300">
<h2 class="mb-2">
Danger Zone
</h2> </h2>
<p class="text-sm mb-2">Permanently delete this worker group. Workers will not be able to connect anymore.</p> <div class="grid grid-cols-[auto_min-content] gap-2">
<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/worker-groups/{{ .Worker.Slug }}/delete">Delete</a> <pre
id="token"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 overflow-x-auto"
>
{{ .Worker.Token }}</pre
>
<button
id="copy-token"
data-copy-to-clipboard-target="npm-install"
class="col-span-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto p-2.5 text-center items-center inline-flex justify-center"
>
<span id="default-message">Copy</span>
<span id="success-message" class="hidden inline-flex items-center">
<svg class="feather h-4 w-4 mr-1 overflow-visible">
<use href="/static/icons/feather-sprite.svg#check" />
</svg>
Copied!
</span>
</button>
</div>
</section> </section>
</div>
<script> <div class="flex md:flex-row flex-col gap-4 h-min">
const copyTokenButton = document.getElementById('copy-token'); <section class="flex-1">
<table>
<caption>
<span>
Active Workers
{{ if eq ( len .Worker.ActiveWorkers) 0 }}
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
>
NONE
</span>
{{ else }}
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
>
{{ len .Worker.ActiveWorkers }} ONLINE
</span>
{{ end }}
</span>
<p>Current workers that were online in last minutes.</p>
</caption>
{{ if eq ( len .Worker.ActiveWorkers) 0 }}
<thead>
<tr>
<th>No workers online for this worker group.</th>
</tr>
</thead>
{{ else }}
<thead>
<tr>
<th>Identity</th>
</tr>
</thead>
<tbody>
{{ range .Worker.ActiveWorkers }}
<tr>
<th>{{ . }}</th>
</tr>
{{ end }}
</tbody>
{{ end }}
</table>
</section>
copyTokenButton.addEventListener('click', function() { <section class="p-2 flex-1 border-4 border-red-300">
this.blur(); <h2 class="mb-2">Danger Zone</h2>
const copyText = document.getElementById('token'); <p class="text-sm mb-2">
navigator.clipboard.writeText(copyText.innerText); Permanently delete this worker group. Workers will not be able to
const defaultMessage = document.getElementById('default-message'); connect anymore.
const successMessage = document.getElementById('success-message'); </p>
defaultMessage.classList.add('hidden'); <a
successMessage.classList.remove('hidden'); 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"
setTimeout(() => { href="/settings/worker-groups/{{ .Worker.Slug }}/delete"
defaultMessage.classList.remove('hidden'); >Delete</a
successMessage.classList.add('hidden'); >
}, 1500); </section>
}); </div>
</script>
{{end}} <script>
const copyTokenButton = document.getElementById("copy-token");
copyTokenButton.addEventListener("click", function () {
this.blur();
const copyText = document.getElementById("token");
navigator.clipboard.writeText(copyText.innerText);
const defaultMessage = document.getElementById("default-message");
const successMessage = document.getElementById("success-message");
defaultMessage.classList.add("hidden");
successMessage.classList.remove("hidden");
setTimeout(() => {
defaultMessage.classList.remove("hidden");
successMessage.classList.add("hidden");
}, 1500);
});
</script>
{{ end }}