This commit is contained in:
Lizandro Guarnizo
2026-06-03 20:10:22 -05:00
parent 1e1ba682b0
commit f087fd46f1
3 changed files with 105 additions and 55 deletions
+23 -12
View File
@@ -85,18 +85,29 @@
:style="'width:' + Math.min(m.cpu?.porcentaje, 100) + '%'"></div>
</div>
</div>
<!-- Disco -->
<!-- Discos -->
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-slate-500 font-medium">💾 Disco</span>
<span class="font-mono font-bold text-slate-700"
x-text="m.disco?.usado_gb + ' / ' + m.disco?.total_gb + ' GB (' + m.disco?.porcentaje + '%)'"></span>
</div>
<div class="w-full bg-slate-100 rounded-full h-1.5">
<div class="h-1.5 rounded-full transition-all"
:class="m.disco?.porcentaje > 85 ? 'bg-red-500' : m.disco?.porcentaje > 65 ? 'bg-amber-400' : 'bg-indigo-500'"
:style="'width:' + Math.min(m.disco?.porcentaje, 100) + '%'"></div>
<span class="text-slate-500 font-medium">💾 Discos</span>
<span class="font-mono font-bold text-slate-700" x-text="(m.discos || []).length"></span>
</div>
<template x-for="d in (m.discos || []).slice(0, 3)" :key="d.ruta">
<div class="mb-1.5">
<div class="flex justify-between text-xs mb-0.5">
<span class="text-slate-400 font-mono text-[10px]" x-text="d.ruta"></span>
<span class="font-mono font-bold text-slate-700 text-[10px]"
x-text="d.usado_gb + ' / ' + d.total_gb + ' GB (' + d.porcentaje + '%)'"></span>
</div>
<div class="w-full bg-slate-100 rounded-full h-1">
<div class="h-1 rounded-full transition-all"
:class="d.porcentaje > 85 ? 'bg-red-500' : d.porcentaje > 65 ? 'bg-amber-400' : 'bg-indigo-500'"
:style="'width:' + Math.min(d.porcentaje, 100) + '%'"></div>
</div>
</div>
</template>
<template x-if="(m.discos || []).length > 3">
<p class="text-[10px] text-slate-400 mt-0.5" x-text="'+' + (m.discos.length - 3) + ' más'"></p>
</template>
</div>
<!-- Uptime + OS -->
<div class="flex justify-between text-xs text-slate-400 pt-1 border-t border-slate-100">
@@ -428,9 +439,9 @@
<p class="text-slate-500" x-text="m.cpu?.nucleos + ' núcleos'"></p>
</div>
<div class="bg-white rounded-lg p-2 text-center border">
<p class="text-slate-400">Disco</p>
<p class="font-bold text-slate-800" x-text="m.disco?.porcentaje + '%'"></p>
<p class="text-slate-500" x-text="m.disco?.usado_gb + '/' + m.disco?.total_gb + 'GB'"></p>
<p class="text-slate-400">Discos</p>
<p class="font-bold text-slate-800" x-text="(m.discos || []).length"></p>
<p class="text-slate-500 text-[10px] leading-tight" x-text="(m.discos || []).map(d => d.ruta + ' ' + d.porcentaje + '%').join(' | ')"></p>
</div>
</div>
</template>