Micha/homelab-infra
1
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

ops: glance komodo/immich widgets - stat-leisten mit trennlinien, pills, gradient-bars

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Micha
2026-06-12 19:24:12 +02:00
parent 3474d53ce5
commit cfa6c01768
1 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ops/glance/config/home.yml
+27 -23
View File
@@ -174,31 +174,32 @@
{{ $running := 0 }} {{ $running := 0 }}
{{ range $stacks }}{{ if eq (.String "info.state") "running" }}{{ $running = add $running 1 }}{{ end }}{{ end }} {{ range $stacks }}{{ if eq (.String "info.state") "running" }}{{ $running = add $running 1 }}{{ end }}{{ end }}
{{ $problems := sub $total $running }} {{ $problems := sub $total $running }}
<div class="flex justify-between text-center"> {{ $divider := "border-left: 1px solid hsla(220, 40%, 70%, 0.14);" }}
<div> <div style="display: flex; text-align: center;">
<div style="flex: 1;">
<div class="color-highlight size-h3">{{ $total }}</div> <div class="color-highlight size-h3">{{ $total }}</div>
<div class="size-h6 uppercase">Stacks</div> <div class="size-h6 uppercase color-subdue">Stacks</div>
</div> </div>
<div> <div style="flex: 1; {{ $divider }}">
<div class="color-positive size-h3">{{ $running }}</div> <div class="color-positive size-h3">{{ $running }}</div>
<div class="size-h6 uppercase">Running</div> <div class="size-h6 uppercase color-subdue">Running</div>
</div> </div>
<div> <div style="flex: 1; {{ $divider }}">
<div class="{{ if gt $problems 0 }}color-negative{{ else }}color-subdue{{ end }} size-h3">{{ $problems }}</div> <div class="{{ if gt $problems 0 }}color-negative{{ else }}color-subdue{{ end }} size-h3">{{ $problems }}</div>
<div class="size-h6 uppercase">Auffaellig</div> <div class="size-h6 uppercase color-subdue">Auffaellig</div>
</div> </div>
</div> </div>
<div style="height: 5px; margin-top: 14px; border-radius: 999px; overflow: hidden; background: hsla(220, 30%, 60%, 0.12);">
<div style="height: 100%; width: {{ if gt $total 0 }}{{ div (mul $running 100.0) (toFloat $total) }}{{ else }}0{{ end }}%; border-radius: 999px; background: linear-gradient(90deg, hsl(150, 85%, 42%), hsl(172, 95%, 48%));"></div>
</div>
{{ if gt $problems 0 }} {{ if gt $problems 0 }}
<ul class="list list-gap-4" style="margin-top: 12px;"> <div style="display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;">
{{ range $stacks }} {{ range $stacks }}
{{ if ne (.String "info.state") "running" }} {{ if ne (.String "info.state") "running" }}
<li class="flex justify-between"> <span class="size-h6" style="padding: 3px 12px; border-radius: 999px; border: 1px solid hsla(350, 90%, 60%, 0.45); background: hsla(350, 90%, 60%, 0.08); color: var(--color-negative); letter-spacing: 0.05em;">{{ .String "name" }} · {{ .String "info.state" }}</span>
<div class="color-highlight">{{ .String "name" }}</div>
<div class="color-negative size-h6 uppercase">{{ .String "info.state" }}</div>
</li>
{{ end }} {{ end }}
{{ end }} {{ end }}
</ul> </div>
{{ end }} {{ end }}
- type: custom-api - type: custom-api
@@ -221,24 +222,27 @@
{{ $storageOK := and (ge $storage.Response.StatusCode 200) (le $storage.Response.StatusCode 299) }} {{ $storageOK := and (ge $storage.Response.StatusCode 200) (le $storage.Response.StatusCode 299) }}
{{ $percentage := 0.0 }} {{ $percentage := 0.0 }}
{{ if $storageOK }}{{ $percentage = $storage.JSON.Float "diskUsagePercentage" }}{{ end }} {{ if $storageOK }}{{ $percentage = $storage.JSON.Float "diskUsagePercentage" }}{{ end }}
<div class="flex justify-between text-center"> {{ $divider := "border-left: 1px solid hsla(220, 40%, 70%, 0.14);" }}
<div> <div style="display: flex; text-align: center;">
<div style="flex: 1;">
<div class="color-highlight size-h3">{{ $photos | formatNumber }}</div> <div class="color-highlight size-h3">{{ $photos | formatNumber }}</div>
<div class="size-h6 uppercase">Fotos</div> <div class="size-h6 uppercase color-subdue">Fotos</div>
</div> </div>
<div> <div style="flex: 1; {{ $divider }}">
<div class="color-highlight size-h3">{{ $videos | formatNumber }}</div> <div class="color-highlight size-h3">{{ $videos | formatNumber }}</div>
<div class="size-h6 uppercase">Videos</div> <div class="size-h6 uppercase color-subdue">Videos</div>
</div> </div>
<div> <div style="flex: 1; {{ $divider }}">
<div class="color-highlight size-h3">{{ printf "%.0f" $usageGiB }} GiB</div> <div class="color-highlight size-h3">{{ printf "%.0f" $usageGiB }} GiB</div>
<div class="size-h6 uppercase">Medien</div> <div class="size-h6 uppercase color-subdue">Medien</div>
</div> </div>
</div> </div>
<div style="height: 8px; margin-top: 14px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--color-text-subdue) 22%, transparent);"> <div style="display: flex; align-items: center; gap: 12px; margin-top: 16px;">
<div style="height: 100%; width: {{ if $storageOK }}{{ printf "%.1f" $percentage }}%{{ else }}0%{{ end }}; border-radius: 999px; background: var(--color-primary);"></div> <div style="flex: 1; height: 5px; border-radius: 999px; overflow: hidden; background: hsla(220, 30%, 60%, 0.12);">
<div style="height: 100%; width: {{ if $storageOK }}{{ printf "%.1f" $percentage }}%{{ else }}0%{{ end }}; border-radius: 999px; background: linear-gradient(90deg, hsl(205, 100%, 55%), hsl(172, 95%, 48%));"></div>
</div>
<div class="size-h6 color-subdue" style="white-space: nowrap;">{{ if $storageOK }}{{ printf "%.1f" $percentage }}% belegt{{ else }}Speicher API n/v{{ end }}</div>
</div> </div>
<div class="size-h6 color-subdue" style="margin-top: 8px;">{{ if $storageOK }}{{ printf "%.1f" $percentage }}% Speicher belegt{{ else }}Speicher API nicht verfuegbar{{ end }}</div>
- type: group - type: group
widgets: widgets: