system-bar.html
66 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
<!-- System Stats — metric cards -->
<div class="grid grid-cols-2 {{if .HasDataDisk}}sm:grid-cols-5{{else}}sm:grid-cols-4{{end}} gap-3">
<!-- CPU -->
<div class="bg-white rounded-xl border border-slate-200/60 p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">CPU</span>
<span class="text-xs font-mono text-slate-500">{{.CPUPercent}}%</span>
</div>
<div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full rounded-full bar-fill {{if gt .CPUPercent 80}}bg-red-500{{else if gt .CPUPercent 60}}bg-amber-400{{else}}bg-emerald-500{{end}}" style="width: {{.CPUPercent}}%"></div>
</div>
<div class="text-[10px] text-slate-400 mt-1.5">{{.NumCPU}} cores{{if .LoadAvg}} · load {{.LoadAvg}}{{end}}</div>
</div>
<!-- Memory -->
<div class="bg-white rounded-xl border border-slate-200/60 p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Memory</span>
<span class="text-xs font-mono text-slate-500">{{.MemPercent}}%</span>
</div>
<div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full rounded-full bar-fill {{if gt .MemPercent 80}}bg-red-500{{else if gt .MemPercent 60}}bg-amber-400{{else}}bg-sky-500{{end}}" style="width: {{.MemPercent}}%"></div>
</div>
<div class="text-[10px] text-slate-400 mt-1.5">{{.MemUsed}} / {{.MemTotal}}</div>
</div>
<!-- System Disk -->
<div class="bg-white rounded-xl border border-slate-200/60 p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{if .HasDataDisk}}System{{else}}Disk{{end}}</span>
<span class="text-xs font-mono text-slate-500">{{.DiskPercent}}%</span>
</div>
<div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full rounded-full bar-fill {{if gt .DiskPercent 80}}bg-red-500{{else if gt .DiskPercent 60}}bg-amber-400{{else}}bg-violet-500{{end}}" style="width: {{.DiskPercent}}%"></div>
</div>
<div class="text-[10px] text-slate-400 mt-1.5">{{.DiskUsed}} / {{.DiskTotal}}</div>
</div>
{{if .HasDataDisk}}
<!-- Data Volume -->
<div class="bg-white rounded-xl border border-slate-200/60 p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Data</span>
<span class="text-xs font-mono text-slate-500">{{.DataPercent}}%</span>
</div>
<div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="h-full rounded-full bar-fill {{if gt .DataPercent 80}}bg-red-500{{else if gt .DataPercent 60}}bg-amber-400{{else}}bg-indigo-500{{end}}" style="width: {{.DataPercent}}%"></div>
</div>
<div class="text-[10px] text-slate-400 mt-1.5">{{.DataUsed}} / {{.DataTotal}}</div>
</div>
{{end}}
<!-- Host -->
<div class="bg-white rounded-xl border border-slate-200/60 p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Host</span>
{{if dashboard.IsCoderRunning}}
<span class="flex items-center gap-1 text-[10px] text-emerald-600 font-medium"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500 status-pulse"></span> Online</span>
{{else}}
<span class="flex items-center gap-1 text-[10px] text-red-500 font-medium"><span class="w-1.5 h-1.5 rounded-full bg-red-400"></span> Offline</span>
{{end}}
</div>
<div class="text-sm font-medium text-slate-700 truncate">{{.Hostname}}</div>
<div class="text-[10px] text-slate-400 mt-0.5">{{.OS}}/{{.Arch}}</div>
</div>
</div>