system-bar.html
76 lines1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!-- System Stats — compact horizontal strip with progress bars -->
<div class="panel-card flex flex-wrap items-center gap-x-8 gap-y-2 px-5 py-3">
<!-- CPU -->
<div class="flex items-center gap-3 min-w-[140px]">
<div class="flex-1">
<div class="flex items-baseline justify-between mb-1">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">CPU</span>
<span class="text-[10px] font-bold {{if gt .CPUPercent 80}}text-red-500{{else if gt .CPUPercent 60}}text-amber-500{{else}}text-slate-500{{end}}">{{.CPUPercent}}%</span>
</div>
<div class="h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full rounded-full transition-all duration-500 {{if gt .CPUPercent 80}}bg-red-500{{else if gt .CPUPercent 60}}bg-amber-500{{else}}bg-emerald-500{{end}}" style="width: {{.CPUPercent}}%"></div>
</div>
<div class="text-[10px] text-slate-400 mt-0.5">{{.NumCPU}} cores{{if .LoadAvg}} · {{.LoadAvg}}{{end}}</div>
</div>
</div>
<!-- Memory -->
<div class="flex items-center gap-3 min-w-[140px]">
<div class="flex-1">
<div class="flex items-baseline justify-between mb-1">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Memory</span>
<span class="text-[10px] font-bold {{if gt .MemPercent 80}}text-red-500{{else if gt .MemPercent 60}}text-amber-500{{else}}text-slate-500{{end}}">{{.MemPercent}}%</span>
</div>
<div class="h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full rounded-full transition-all duration-500 {{if gt .MemPercent 80}}bg-red-500{{else if gt .MemPercent 60}}bg-amber-500{{else}}bg-blue-500{{end}}" style="width: {{.MemPercent}}%"></div>
</div>
<div class="text-[10px] text-slate-400 mt-0.5">{{.MemUsed}} / {{.MemTotal}}</div>
</div>
</div>
<!-- System Disk -->
<div class="flex items-center gap-3 min-w-[140px]">
<div class="flex-1">
<div class="flex items-baseline justify-between mb-1">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{if .HasDataDisk}}System{{else}}Disk{{end}}</span>
<span class="text-[10px] font-bold {{if gt .DiskPercent 80}}text-red-500{{else if gt .DiskPercent 60}}text-amber-500{{else}}text-slate-500{{end}}">{{.DiskPercent}}%</span>
</div>
<div class="h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full rounded-full transition-all duration-500 {{if gt .DiskPercent 80}}bg-red-500{{else if gt .DiskPercent 60}}bg-amber-500{{else}}bg-violet-500{{end}}" style="width: {{.DiskPercent}}%"></div>
</div>
<div class="text-[10px] text-slate-400 mt-0.5">{{.DiskUsed}} / {{.DiskTotal}}</div>
</div>
</div>
{{if .HasDataDisk}}
<!-- Data Volume -->
<div class="flex items-center gap-3 min-w-[140px]">
<div class="flex-1">
<div class="flex items-baseline justify-between mb-1">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Data</span>
<span class="text-[10px] font-bold {{if gt .DataPercent 80}}text-red-500{{else if gt .DataPercent 60}}text-amber-500{{else}}text-slate-500{{end}}">{{.DataPercent}}%</span>
</div>
<div class="h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full rounded-full transition-all duration-500 {{if gt .DataPercent 80}}bg-red-500{{else if gt .DataPercent 60}}bg-amber-500{{else}}bg-indigo-500{{end}}" style="width: {{.DataPercent}}%"></div>
</div>
<div class="text-[10px] text-slate-400 mt-0.5">{{.DataUsed}} / {{.DataTotal}}</div>
</div>
</div>
{{end}}
<!-- Spacer -->
<div class="flex-1"></div>
<!-- Host -->
<div class="flex items-center gap-2.5">
{{if dashboard.IsCoderRunning}}
<span class="w-2 h-2 rounded-full bg-emerald-500 status-pulse glow-emerald shrink-0"></span>
{{else}}
<span class="w-2 h-2 rounded-full bg-red-400 glow-red shrink-0"></span>
{{end}}
<div>
<div class="text-[12px] font-medium text-slate-600 truncate">{{.Hostname}}</div>
<div class="text-[10px] text-slate-400">{{.OS}}/{{.Arch}}</div>
</div>
</div>
</div>