mirror of
https://github.com/mentos1386/zdravko.git
synced 2024-11-22 15:53:45 +00:00
232 lines
9.1 KiB
Cheetah
232 lines
9.1 KiB
Cheetah
{{ define "main" }}
|
|
{{ $outcomeText := "All services are online." }}
|
|
{{ $outcomeIcon := "check" }}
|
|
{{ $outcomeColor := "bg-green-300" }}
|
|
{{ if eq .Outcome "DOWN" }}
|
|
{{ $outcomeText = "Some services are down." }}
|
|
{{ $outcomeIcon = "alert-circle" }}
|
|
{{ $outcomeColor = "bg-red-300" }}
|
|
{{ else if eq .Outcome "DEGRADED" }}
|
|
{{ $outcomeText = "Some services are degraded." }}
|
|
{{ $outcomeIcon = "alert-triangle" }}
|
|
{{ $outcomeColor = "bg-orange-300" }}
|
|
{{ else }}
|
|
{{ $outcomeText = "We are unable to determine current status." }}
|
|
{{ $outcomeIcon = "help-circle" }}
|
|
{{ $outcomeColor = "bg-gray-300" }}
|
|
{{ end }}
|
|
|
|
|
|
<div
|
|
id="page-index"
|
|
class="container max-w-screen-md flex flex-col mt-20 gap-20"
|
|
>
|
|
{{ $length := len .Targets }}
|
|
{{ if eq $length 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 targets yet.
|
|
</h1>
|
|
<p
|
|
class="mb-8 text-l font-normal text-gray-700 lg:text-l sm:px-8 lg:px-40"
|
|
>
|
|
Create a target to target your services and get notified when they
|
|
are down.
|
|
</p>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
|
|
<a
|
|
href="/settings/targets/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 Target
|
|
<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 }}
|
|
<div class="flex flex-col items-center">
|
|
<svg
|
|
class="feather h-20 w-20 rounded-full {{ $outcomeColor }} p-4 overflow-visible"
|
|
>
|
|
<use href="/static/icons/feather-sprite.svg#{{ $outcomeIcon }}" />
|
|
</svg>
|
|
<h1 class="text-gray-800 mt-4 text-xl font-bold">
|
|
{{ $outcomeText }}
|
|
</h1>
|
|
<p class="text-gray-700 text-sm">
|
|
Last updated on
|
|
{{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="targets flex flex-col gap-4">
|
|
<div
|
|
class="inline-flex gap-1 justify-center md:justify-end time-range"
|
|
role="group"
|
|
>
|
|
<a
|
|
href="/?time-range=60days"
|
|
class="{{ if eq .TimeRange "60days" }}active{{ end }}"
|
|
type="button"
|
|
>60 Days</a
|
|
>
|
|
<a
|
|
href="/?time-range=48hours"
|
|
class="{{ if eq .TimeRange "48hours" }}active{{ end }}"
|
|
type="button"
|
|
>48 Hours</a
|
|
>
|
|
<a
|
|
href="/?time-range=60minutes"
|
|
class="{{ if eq .TimeRange "60minutes" }}active{{ end }}"
|
|
type="button"
|
|
>60 Minutes</a
|
|
>
|
|
</div>
|
|
{{ range $group, $targetsAndStatus := .Targets }}
|
|
<details
|
|
open
|
|
class="bg-white shadow-md rounded-lg p-6 py-4 gap-2 [&_svg]:open:rotate-90"
|
|
>
|
|
<summary
|
|
class="flex flex-row gap-2 p-3 py-2 -mx-3 cursor-pointer hover:bg-blue-50 rounded-lg"
|
|
>
|
|
<span
|
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
|
|
{{ if eq $targetsAndStatus.Outcome "HEALTHY" }}
|
|
bg-green-100 text-green-800
|
|
{{ else if eq $targetsAndStatus.Outcome "DOWN" }}
|
|
bg-red-100 text-red-800
|
|
{{ else if eq $targetsAndStatus.Outcome "DEGRADED" }}
|
|
bg-orange-100 text-orange-800
|
|
{{ else }}
|
|
bg-gray-100 text-gray-800
|
|
{{ end }}"
|
|
>{{ .Outcome }}</span
|
|
>
|
|
<h2 class="flex-1 font-semibold capitalize">
|
|
{{ $group }}
|
|
</h2>
|
|
<svg
|
|
class="select-none feather h-6 w-6 overflow-visible self-center transition-all duration-300"
|
|
>
|
|
<use href="/static/icons/feather-sprite.svg#chevron-right" />
|
|
</svg>
|
|
</summary>
|
|
{{ range $targetsAndStatus.Targets }}
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2 pb-2 border-b last-of-type:pb-0 last-of-type:border-0 border-gray-100"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
|
|
{{ if eq .Outcome "HEALTHY" }}
|
|
bg-green-100 text-green-800
|
|
{{ else if eq .Outcome "DOWN" }}
|
|
bg-red-100 text-red-800
|
|
{{ else if eq .Outcome "DEGRADED" }}
|
|
bg-orange-100 text-orange-800
|
|
{{ else }}
|
|
bg-gray-100 text-gray-800
|
|
{{ end }}"
|
|
>{{ .Outcome }}</span
|
|
>
|
|
<h4>
|
|
{{ .Name }}
|
|
{{ if eq .Visibility "PUBLIC" }}
|
|
{{ else if eq .Visibility "PRIVATE" }}
|
|
<span
|
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-fuchsia-100 text-fuchsia-800"
|
|
>
|
|
Private
|
|
</span>
|
|
{{ else }}
|
|
<span
|
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
|
>
|
|
Unknown
|
|
</span>
|
|
{{ end }}
|
|
</h4>
|
|
</div>
|
|
<div class="justify-self-end text-sm">
|
|
{{ printf "%.2f" .Uptime }}% uptime
|
|
</div>
|
|
|
|
<div
|
|
class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden"
|
|
>
|
|
{{ range .History }}
|
|
<div
|
|
class="has-tooltip [&_.tooltip]:hover:flex [&_.tooltip]:hover:visible flex
|
|
{{ if eq .Outcome "HEALTHY" }}
|
|
history healthy
|
|
{{ else if eq .Outcome "DOWN" }}
|
|
history down
|
|
{{ else if eq .Outcome "DEGRADED" }}
|
|
history degraded
|
|
{{ else }}
|
|
history unknown
|
|
{{ end }}"
|
|
>
|
|
<div class="flex-auto bar"></div>
|
|
<div
|
|
class="tooltip flex flex-col gap-2 bg-white border border-gray-200 rounded p-2 shadow-lg hidden z-50 absolute mt-10 -ml-4 flex-row text-xs"
|
|
>
|
|
<div class="flex flex-row gap-2 justify-between">
|
|
{{ if eq $.TimeRange "60days" }}
|
|
{{ .Date.Format "Jan 02" }}
|
|
{{ else if eq $.TimeRange "48hours" }}
|
|
{{ .Date.Format "Jan 02, 15:00 MST" }}
|
|
{{ else if eq $.TimeRange "60minutes" }}
|
|
{{ .Date.Format "Jan 02, 15:04 MST" }}
|
|
{{ end }}
|
|
<span
|
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
|
|
{{ if eq .Outcome "HEALTHY" }}
|
|
bg-green-100 text-green-800
|
|
{{ else if eq .Outcome "DOWN" }}
|
|
bg-red-100 text-red-800
|
|
{{ else if eq .Outcome "DEGRADED" }}
|
|
bg-orange-100 text-orange-800
|
|
{{ else }}
|
|
bg-gray-100 text-gray-800
|
|
{{ end }}"
|
|
>{{ .Outcome }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div
|
|
class="text-slate-500 justify-self-start text-xs tracking-wider"
|
|
>
|
|
{{ if eq $.TimeRange "60days" }}
|
|
60 days ago
|
|
{{ else if eq $.TimeRange "48hours" }}
|
|
48 hours ago
|
|
{{ else if eq $.TimeRange "60minutes" }}
|
|
60 minutes ago
|
|
{{ end }}
|
|
</div>
|
|
<div
|
|
class="text-slate-500 justify-self-end text-xs tracking-wider"
|
|
>
|
|
Now
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</details>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|