zdravko/web/templates/pages/index.tmpl

135 lines
5 KiB
Cheetah
Raw Normal View History

2024-02-29 11:15:15 +00:00
{{ 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.
2024-02-22 16:29:17 +00:00
</h1>
2024-02-29 11:15:15 +00:00
<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.
2024-02-22 16:29:17 +00:00
</p>
2024-02-29 11:15:15 +00:00
<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>
2024-02-22 16:29:17 +00:00
</div>
2024-02-29 11:15:15 +00:00
</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">
2024-02-29 14:12:20 +00:00
Last updated on
{{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
2024-02-29 11:15:15 +00:00
</p>
</div>
2024-02-22 16:29:17 +00:00
{{ else }}
2024-02-29 11:15:15 +00:00
<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">
2024-02-29 14:12:20 +00:00
Last updated on
{{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
2024-02-29 11:15:15 +00:00
</p>
</div>
2024-02-22 16:29:17 +00:00
{{ end }}
2024-02-29 11:15:15 +00:00
<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
2024-02-29 14:12:20 +00:00
class="inline-flex gap-1 rounded-md shadow-sm justify-self-center sm:justify-self-end time-range py-1 px-1 bg-gray-100"
2024-02-29 11:15:15 +00:00
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
>
2024-02-29 14:12:20 +00:00
<a
href="/?time-range=90minutes"
class="{{ if eq .TimeRange "90minutes" }}active{{ end }}"
type="button"
>90 Minutes</a
>
2024-02-29 11:15:15 +00:00
</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 }}
2024-02-29 22:57:23 +00:00
<span class="flex w-3 h-3 me-2 bg-gray-200 rounded-full"></span>
2024-02-29 11:15:15 +00:00
{{ end }}
<p>{{ .Name }}</p>
</div>
2024-02-29 22:42:56 +00:00
<div class="justify-self-end text-sm">
{{ .History.Uptime }}% uptime
</div>
<div
class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden"
>
{{ range .History.List }}
{{ 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 }}
2024-02-29 22:57:23 +00:00
<div class="bg-gray-200 hover:bg-gray-300 flex-auto"></div>
2024-02-29 22:42:56 +00:00
{{ end }}
{{ end }}
</div>
<div class="text-slate-500 justify-self-start text-sm">
{{ if eq $.TimeRange "90days" }}
90 days ago
{{ else if eq $.TimeRange "48hours" }}
48 hours ago
{{ else if eq $.TimeRange "90minutes" }}
90 minutes ago
{{ end }}
</div>
<div class="text-slate-500 justify-self-end text-sm">Now</div>
2024-02-29 11:15:15 +00:00
</div>
{{ end }}
</div>
{{ end }}
</div>
2024-02-29 11:15:15 +00:00
{{ end }}