140 lines
9 KiB
HTML
140 lines
9 KiB
HTML
{{ template "widget-base.html" . }}
|
|
|
|
{{- define "widget-content" }}
|
|
{{- range .Servers }}
|
|
<div class="server">
|
|
<div class="server-info">
|
|
<div class="server-details">
|
|
<div class="server-name color-highlight size-h3">{{ if .Name }}{{ .Name }}{{ else }}{{ .Info.Hostname }}{{ end }}</div>
|
|
<div>
|
|
{{- if .IsReachable }}
|
|
{{ if .Info.HostInfoIsAvailable }}<span {{ dynamicRelativeTimeAttrs .Info.BootTime }}></span>{{ else }}unknown{{ end }} uptime
|
|
{{- else }}
|
|
unreachable
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
<div class="shrink-0"{{ if .IsReachable }} data-popover-type="html" data-popover-margin="0.2rem" data-popover-max-width="400px"{{ end }}>
|
|
{{- if .IsReachable }}
|
|
<div data-popover-html>
|
|
<div class="size-h5 text-compact">PLATFORM</div>
|
|
<div class="color-highlight">{{ if .Info.HostInfoIsAvailable }}{{ .Info.Platform }}{{ else }}Unknown{{ end }}</div>
|
|
</div>
|
|
{{- end }}
|
|
<svg class="server-icon" stroke="var(--color-{{ if .IsReachable }}positive{{ else }}negative{{ end }})" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 17.25v-.228a4.5 4.5 0 0 0-.12-1.03l-2.268-9.64a3.375 3.375 0 0 0-3.285-2.602H7.923a3.375 3.375 0 0 0-3.285 2.602l-2.268 9.64a4.5 4.5 0 0 0-.12 1.03v.228m19.5 0a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3m19.5 0a3 3 0 0 0-3-3H5.25a3 3 0 0 0-3 3m16.5 0h.008v.008h-.008v-.008Zm-3 0h.008v.008h-.008v-.008Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="server-stats">
|
|
<div class="flex-1{{ if not .Info.CPU.LoadIsAvailable }} server-stat-unavailable{{ end }}">
|
|
<div class="flex items-end size-h5">
|
|
<div>CPU</div>
|
|
{{- if and .Info.CPU.TemperatureIsAvailable (ge .Info.CPU.TemperatureC 80) }}
|
|
<svg class="server-spicy-cpu-icon" fill="var(--color-negative)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
|
|
<path fill-rule="evenodd" d="M8.074.945A4.993 4.993 0 0 0 6 5v.032c.004.6.114 1.176.311 1.709.16.428-.204.91-.61.7a5.023 5.023 0 0 1-1.868-1.677c-.202-.304-.648-.363-.848-.058a6 6 0 1 0 8.017-1.901l-.004-.007a4.98 4.98 0 0 1-2.18-2.574c-.116-.31-.477-.472-.744-.28Zm.78 6.178a3.001 3.001 0 1 1-3.473 4.341c-.205-.365.215-.694.62-.59a4.008 4.008 0 0 0 1.873.03c.288-.065.413-.386.321-.666A3.997 3.997 0 0 1 8 8.999c0-.585.126-1.14.351-1.641a.42.42 0 0 1 .503-.235Z" clip-rule="evenodd" />
|
|
</svg>
|
|
{{- end }}
|
|
<div class="color-highlight margin-left-auto text-very-compact">{{ if .Info.CPU.LoadIsAvailable }}{{ .Info.CPU.Load1Percent }} <span class="color-base">%</span>{{ else }}n/a{{ end }}</div>
|
|
</div>
|
|
<div{{ if .Info.CPU.LoadIsAvailable }} data-popover-type="html"{{ end }}>
|
|
{{- if .Info.CPU.LoadIsAvailable }}
|
|
<div data-popover-html>
|
|
<div class="flex">
|
|
<div class="size-h5">1M AVG</div>
|
|
<div class="value-separator"></div>
|
|
<div class="color-highlight text-very-compact">{{ .Info.CPU.Load1Percent }} <span class="color-base size-h5">%</span></div>
|
|
</div>
|
|
<div class="flex margin-top-3">
|
|
<div class="size-h5">15M AVG</div>
|
|
<div class="value-separator"></div>
|
|
<div class="color-highlight text-very-compact">{{ .Info.CPU.Load15Percent }} <span class="color-base size-h5">%</span></div>
|
|
</div>
|
|
{{- if .Info.CPU.TemperatureIsAvailable }}
|
|
<div class="flex margin-top-3">
|
|
<div class="size-h5">TEMP C</div>
|
|
<div class="value-separator"></div>
|
|
<div class="color-highlight text-very-compact">{{ .Info.CPU.TemperatureC }} <span class="color-base size-h5">°</span></div>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
{{- end }}
|
|
<div class="progress-bar progress-bar-combined">
|
|
{{- if .Info.CPU.LoadIsAvailable }}
|
|
<div class="progress-value{{ if ge .Info.CPU.Load1Percent 85 }} progress-value-notice{{ end }}" style="--percent: {{ .Info.CPU.Load1Percent }}"></div>
|
|
<div class="progress-value{{ if ge .Info.CPU.Load15Percent 85 }} progress-value-notice{{ end }}" style="--percent: {{ .Info.CPU.Load15Percent }}"></div>
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1{{ if not .Info.Memory.IsAvailable }} server-stat-unavailable{{ end }}">
|
|
<div class="flex justify-between items-end size-h5">
|
|
<div>RAM</div>
|
|
<div class="color-highlight text-very-compact">{{ if .Info.Memory.IsAvailable }}{{ .Info.Memory.UsedPercent }} <span class="color-base">%</span>{{ else }}n/a{{ end }}</div>
|
|
</div>
|
|
<div{{ if .Info.Memory.IsAvailable }} data-popover-type="html"{{ end }}>
|
|
{{- if .Info.Memory.IsAvailable }}
|
|
<div data-popover-html>
|
|
<div class="flex">
|
|
<div class="size-h5">RAM</div>
|
|
<div class="value-separator"></div>
|
|
<div class="color-highlight text-very-compact">
|
|
{{ .Info.Memory.UsedMB | formatServerMegabytes }} <span class="color-base size-h5">/</span> {{ .Info.Memory.TotalMB | formatServerMegabytes }}
|
|
</div>
|
|
</div>
|
|
{{- if and (not .HideSwap) .Info.Memory.SwapIsAvailable }}
|
|
<div class="flex margin-top-3">
|
|
<div class="size-h5">SWAP</div>
|
|
<div class="value-separator"></div>
|
|
<div class="color-highlight text-very-compact">
|
|
{{ .Info.Memory.SwapUsedMB | formatServerMegabytes }} <span class="color-base size-h5">/</span> {{ .Info.Memory.SwapTotalMB | formatServerMegabytes }}
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
{{- end }}
|
|
<div class="progress-bar progress-bar-combined">
|
|
{{- if .Info.Memory.IsAvailable }}
|
|
<div class="progress-value{{ if ge .Info.Memory.UsedPercent 85 }} progress-value-notice{{ end }}" style="--percent: {{ .Info.Memory.UsedPercent }}"></div>
|
|
{{- if and (not .HideSwap) .Info.Memory.SwapIsAvailable }}
|
|
<div class="progress-value{{ if ge .Info.Memory.SwapUsedPercent 85 }} progress-value-notice{{ end }}" style="--percent: {{ .Info.Memory.SwapUsedPercent }}"></div>
|
|
{{- end }}
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1{{ if not .Info.Mountpoints }} server-stat-unavailable{{ end }}">
|
|
<div class="flex justify-between items-end size-h5">
|
|
<div>DISK</div>
|
|
<div class="color-highlight text-very-compact">{{ if .Info.Mountpoints }}{{ (index .Info.Mountpoints 0).UsedPercent }} <span class="color-base">%</span>{{ else }}n/a{{ end }}</div>
|
|
</div>
|
|
<div{{ if .Info.Mountpoints }} data-popover-type="html"{{ end }}>
|
|
{{- if .Info.Mountpoints }}
|
|
<div data-popover-html>
|
|
<ul class="list list-gap-2">
|
|
{{- range .Info.Mountpoints }}
|
|
<li class="flex">
|
|
<div class="size-h5">{{ if .Name }}{{ .Name }}{{ else }}{{ .Path }}{{ end }}</div>
|
|
<div class="value-separator"></div>
|
|
<div class="color-highlight text-very-compact">
|
|
{{ .UsedMB | formatServerMegabytes }} <span class="color-base size-h5">/</span> {{ .TotalMB | formatServerMegabytes }}
|
|
</div>
|
|
</li>
|
|
{{- end }}
|
|
</ul>
|
|
</div>
|
|
{{- end }}
|
|
<div class="progress-bar progress-bar-combined">
|
|
{{- if .Info.Mountpoints }}
|
|
<div class="progress-value{{ if ge ((index .Info.Mountpoints 0).UsedPercent) 85 }} progress-value-notice{{ end }}" style="--percent: {{ (index .Info.Mountpoints 0).UsedPercent }}"></div>
|
|
{{- if ge (len .Info.Mountpoints) 2 }}
|
|
<div class="progress-value{{ if ge ((index .Info.Mountpoints 1).UsedPercent) 85 }} progress-value-notice{{ end }}" style="--percent: {{ (index .Info.Mountpoints 1).UsedPercent }}"></div>
|
|
{{- end }}
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
{{- end }}
|