github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

feat: Revamp Kubernetes overview page with enhanced UI components and updated resource metrics display

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-03-18 22:21:10 +00:00
parent 50d5514fea
commit 139aa83fe4
1 changed files with 332 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
Home/Views/kubernetes.ejs
View File

@@ -73,106 +73,357 @@
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
</div>
<span class="text-sm text-gray-500 font-medium">Kubernetes Cluster Overview</span>
<div class="flex items-center gap-2">
<svg class="h-4 w-4 text-cyan-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
</svg>
<span class="text-sm text-gray-700 font-semibold">Kubernetes Cluster Overview</span>
</div>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-gray-400">production-cluster</span>
<span class="flex items-center gap-1 px-2 py-0.5 bg-emerald-50 rounded text-xs text-emerald-600 border border-emerald-200">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
Healthy
<div class="flex items-center gap-3">
<div class="flex items-center gap-1.5 px-2.5 py-1 bg-white rounded-md border border-gray-200 text-xs text-gray-500">
<svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Last 1 hour
</div>
<span class="flex items-center gap-1.5 px-2.5 py-1 bg-emerald-50 rounded-md text-xs font-medium text-emerald-600 border border-emerald-200">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
prod-us-east-1
</span>
</div>
</div>
<!-- Dashboard content -->
<div class="p-6">
<!-- Top stats -->
<div class="grid grid-cols-4 gap-4 mb-6">
<div class="bg-cyan-50 rounded-xl p-4 border border-cyan-100">
<div class="text-xs text-cyan-600 mb-1">Nodes</div>
<div class="text-2xl font-bold text-cyan-700">12</div>
<div class="text-xs text-emerald-600 mt-1">All healthy</div>
<div class="p-5">
<!-- Top stats row -->
<div class="grid grid-cols-5 gap-3 mb-5">
<div class="bg-white rounded-lg p-3.5 border border-gray-200 shadow-sm">
<div class="flex items-center justify-between mb-2">
<div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider">Nodes</div>
<div class="w-6 h-6 rounded-md bg-cyan-50 flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
</svg>
</div>
</div>
<div class="text-xl font-bold text-gray-900">12</div>
<div class="flex items-center gap-1 mt-1">
<span class="w-1 h-1 rounded-full bg-emerald-500"></span>
<span class="text-[10px] text-emerald-600 font-medium">All healthy</span>
</div>
</div>
<div class="bg-blue-50 rounded-xl p-4 border border-blue-100">
<div class="text-xs text-blue-600 mb-1">Pods</div>
<div class="text-2xl font-bold text-blue-700">147</div>
<div class="text-xs text-emerald-600 mt-1">143 running</div>
<div class="bg-white rounded-lg p-3.5 border border-gray-200 shadow-sm">
<div class="flex items-center justify-between mb-2">
<div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider">Pods</div>
<div class="w-6 h-6 rounded-md bg-blue-50 flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
</div>
</div>
<div class="text-xl font-bold text-gray-900">147</div>
<div class="flex items-center gap-1.5 mt-1">
<span class="text-[10px] text-emerald-600 font-medium">143 running</span>
<span class="text-[10px] text-amber-500">3 pending</span>
<span class="text-[10px] text-red-500">1 failed</span>
</div>
</div>
<div class="bg-purple-50 rounded-xl p-4 border border-purple-100">
<div class="text-xs text-purple-600 mb-1">Deployments</div>
<div class="text-2xl font-bold text-purple-700">23</div>
<div class="text-xs text-emerald-600 mt-1">All available</div>
<div class="bg-white rounded-lg p-3.5 border border-gray-200 shadow-sm">
<div class="flex items-center justify-between mb-2">
<div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider">Deployments</div>
<div class="w-6 h-6 rounded-md bg-purple-50 flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
</svg>
</div>
</div>
<div class="text-xl font-bold text-gray-900">23</div>
<div class="flex items-center gap-1 mt-1">
<span class="w-1 h-1 rounded-full bg-emerald-500"></span>
<span class="text-[10px] text-emerald-600 font-medium">All available</span>
</div>
</div>
<div class="bg-amber-50 rounded-xl p-4 border border-amber-100">
<div class="text-xs text-amber-600 mb-1">CPU Usage</div>
<div class="text-2xl font-bold text-amber-700">62%</div>
<div class="text-xs text-gray-500 mt-1">avg across nodes</div>
<div class="bg-white rounded-lg p-3.5 border border-gray-200 shadow-sm">
<div class="flex items-center justify-between mb-2">
<div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider">CPU</div>
<div class="w-6 h-6 rounded-md bg-amber-50 flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
</div>
</div>
<div class="text-xl font-bold text-gray-900">62%</div>
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-2">
<div class="bg-amber-400 h-1.5 rounded-full" style="width: 62%"></div>
</div>
</div>
<div class="bg-white rounded-lg p-3.5 border border-gray-200 shadow-sm">
<div class="flex items-center justify-between mb-2">
<div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider">Memory</div>
<div class="w-6 h-6 rounded-md bg-violet-50 flex items-center justify-center">
<svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
</svg>
</div>
</div>
<div class="text-xl font-bold text-gray-900">71%</div>
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-2">
<div class="bg-violet-400 h-1.5 rounded-full" style="width: 71%"></div>
</div>
</div>
</div>
<!-- Namespace pods grid -->
<div class="grid grid-cols-3 gap-4">
<!-- Namespace 1 -->
<div class="border border-gray-200 rounded-lg p-3">
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-medium text-gray-700">production</span>
<span class="text-[10px] text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">48 pods</span>
<!-- Charts row -->
<div class="grid grid-cols-3 gap-3 mb-5">
<!-- CPU & Memory chart -->
<div class="col-span-2 bg-white rounded-lg border border-gray-200 shadow-sm p-4">
<div class="flex items-center justify-between mb-4">
<div>
<div class="text-sm font-semibold text-gray-800">Cluster Resource Usage</div>
<div class="text-[10px] text-gray-400 mt-0.5">CPU and Memory over time</div>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-cyan-500"></span>
<span class="text-[10px] text-gray-500">CPU</span>
</div>
<div class="flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-violet-500"></span>
<span class="text-[10px] text-gray-500">Memory</span>
</div>
</div>
</div>
<div class="grid grid-cols-8 gap-1">
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-amber-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<!-- SVG Chart -->
<svg viewBox="0 0 400 100" class="w-full h-24">
<defs>
<linearGradient id="cpuGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.2"/>
<stop offset="100%" style="stop-color:#06b6d4;stop-opacity:0"/>
</linearGradient>
<linearGradient id="memGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.15"/>
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:0"/>
</linearGradient>
</defs>
<!-- Grid lines -->
<line x1="0" y1="25" x2="400" y2="25" stroke="#f3f4f6" stroke-width="1"/>
<line x1="0" y1="50" x2="400" y2="50" stroke="#f3f4f6" stroke-width="1"/>
<line x1="0" y1="75" x2="400" y2="75" stroke="#f3f4f6" stroke-width="1"/>
<!-- CPU fill -->
<path d="M0,55 L25,52 L50,48 L75,50 L100,45 L125,42 L150,40 L175,38 L200,42 L225,40 L250,38 L275,35 L300,37 L325,34 L350,36 L375,38 L400,35 L400,100 L0,100 Z" fill="url(#cpuGrad)"/>
<!-- CPU line -->
<path d="M0,55 L25,52 L50,48 L75,50 L100,45 L125,42 L150,40 L175,38 L200,42 L225,40 L250,38 L275,35 L300,37 L325,34 L350,36 L375,38 L400,35" fill="none" stroke="#06b6d4" stroke-width="2" stroke-linecap="round"/>
<!-- Memory fill -->
<path d="M0,42 L25,40 L50,38 L75,35 L100,37 L125,33 L150,30 L175,32 L200,28 L225,30 L250,27 L275,25 L300,28 L325,26 L350,24 L375,26 L400,25 L400,100 L0,100 Z" fill="url(#memGrad)"/>
<!-- Memory line -->
<path d="M0,42 L25,40 L50,38 L75,35 L100,37 L125,33 L150,30 L175,32 L200,28 L225,30 L250,27 L275,25 L300,28 L325,26 L350,24 L375,26 L400,25" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round"/>
<!-- Y-axis labels -->
<text x="2" y="23" fill="#9ca3af" font-size="8">75%</text>
<text x="2" y="48" fill="#9ca3af" font-size="8">50%</text>
<text x="2" y="73" fill="#9ca3af" font-size="8">25%</text>
</svg>
</div>
<!-- Pod status breakdown -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm p-4">
<div class="text-sm font-semibold text-gray-800 mb-1">Pod Status</div>
<div class="text-[10px] text-gray-400 mb-4">Across all namespaces</div>
<!-- Donut chart mockup -->
<div class="flex items-center justify-center mb-4">
<div class="relative">
<svg viewBox="0 0 80 80" class="w-20 h-20">
<circle cx="40" cy="40" r="30" fill="none" stroke="#e5e7eb" stroke-width="8"/>
<circle cx="40" cy="40" r="30" fill="none" stroke="#10b981" stroke-width="8" stroke-dasharray="183 188.5" stroke-dashoffset="0" transform="rotate(-90 40 40)"/>
<circle cx="40" cy="40" r="30" fill="none" stroke="#f59e0b" stroke-width="8" stroke-dasharray="3.85 184.65" stroke-dashoffset="-183" transform="rotate(-90 40 40)"/>
<circle cx="40" cy="40" r="30" fill="none" stroke="#ef4444" stroke-width="8" stroke-dasharray="1.28 187.22" stroke-dashoffset="-186.85" transform="rotate(-90 40 40)"/>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-lg font-bold text-gray-900">97%</span>
<span class="text-[8px] text-gray-400">healthy</span>
</div>
</div>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
<span class="text-[11px] text-gray-600">Running</span>
</div>
<span class="text-[11px] font-semibold text-gray-800">143</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
<span class="text-[11px] text-gray-600">Pending</span>
</div>
<span class="text-[11px] font-semibold text-gray-800">3</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-red-500"></span>
<span class="text-[11px] text-gray-600">Failed</span>
</div>
<span class="text-[11px] font-semibold text-gray-800">1</span>
</div>
</div>
</div>
<!-- Namespace 2 -->
<div class="border border-gray-200 rounded-lg p-3">
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-medium text-gray-700">staging</span>
<span class="text-[10px] text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">32 pods</span>
</div>
<!-- Namespace & Node table row -->
<div class="grid grid-cols-2 gap-3">
<!-- Namespaces -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="px-4 py-2.5 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
<span class="text-xs font-semibold text-gray-700">Namespaces</span>
<span class="text-[10px] text-gray-400">6 total</span>
</div>
<div class="grid grid-cols-8 gap-1">
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-red-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="divide-y divide-gray-100">
<div class="px-4 py-2.5 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="text-xs font-medium text-gray-700">production</span>
</div>
<div class="flex items-center gap-3">
<div class="flex gap-0.5">
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-amber-400"></div>
</div>
<span class="text-[10px] text-gray-400 w-12 text-right">48 pods</span>
</div>
</div>
<div class="px-4 py-2.5 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="text-xs font-medium text-gray-700">staging</span>
</div>
<div class="flex items-center gap-3">
<div class="flex gap-0.5">
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-red-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
</div>
<span class="text-[10px] text-gray-400 w-12 text-right">32 pods</span>
</div>
</div>
<div class="px-4 py-2.5 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="text-xs font-medium text-gray-700">monitoring</span>
</div>
<div class="flex items-center gap-3">
<div class="flex gap-0.5">
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
</div>
<span class="text-[10px] text-gray-400 w-12 text-right">18 pods</span>
</div>
</div>
<div class="px-4 py-2.5 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="text-xs font-medium text-gray-700">kube-system</span>
</div>
<div class="flex items-center gap-3">
<div class="flex gap-0.5">
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
<div class="w-2 h-2 rounded-[2px] bg-emerald-400"></div>
</div>
<span class="text-[10px] text-gray-400 w-12 text-right">14 pods</span>
</div>
</div>
</div>
</div>
<!-- Namespace 3 -->
<div class="border border-gray-200 rounded-lg p-3">
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-medium text-gray-700">monitoring</span>
<span class="text-[10px] text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">18 pods</span>
<!-- Nodes -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="px-4 py-2.5 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
<span class="text-xs font-semibold text-gray-700">Node Health</span>
<span class="text-[10px] text-gray-400">12 nodes</span>
</div>
<div class="grid grid-cols-8 gap-1">
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="w-3 h-3 rounded-sm bg-emerald-400"></div>
<div class="divide-y divide-gray-100">
<div class="px-4 py-2 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="text-xs font-mono text-gray-700">node-01</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5">
<span class="text-[10px] text-gray-400">CPU</span>
<div class="w-14 bg-gray-100 rounded-full h-1.5"><div class="bg-cyan-400 h-1.5 rounded-full" style="width:45%"></div></div>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[10px] text-gray-400">MEM</span>
<div class="w-14 bg-gray-100 rounded-full h-1.5"><div class="bg-violet-400 h-1.5 rounded-full" style="width:62%"></div></div>
</div>
</div>
</div>
<div class="px-4 py-2 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="text-xs font-mono text-gray-700">node-02</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5">
<span class="text-[10px] text-gray-400">CPU</span>
<div class="w-14 bg-gray-100 rounded-full h-1.5"><div class="bg-cyan-400 h-1.5 rounded-full" style="width:67%"></div></div>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[10px] text-gray-400">MEM</span>
<div class="w-14 bg-gray-100 rounded-full h-1.5"><div class="bg-violet-400 h-1.5 rounded-full" style="width:71%"></div></div>
</div>
</div>
</div>
<div class="px-4 py-2 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
<span class="text-xs font-mono text-gray-700">node-03</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5">
<span class="text-[10px] text-gray-400">CPU</span>
<div class="w-14 bg-gray-100 rounded-full h-1.5"><div class="bg-amber-400 h-1.5 rounded-full" style="width:89%"></div></div>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[10px] text-gray-400">MEM</span>
<div class="w-14 bg-gray-100 rounded-full h-1.5"><div class="bg-amber-400 h-1.5 rounded-full" style="width:85%"></div></div>
</div>
</div>
</div>
<div class="px-4 py-2 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="text-xs font-mono text-gray-700">node-04</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1.5">
<span class="text-[10px] text-gray-400">CPU</span>
<div class="w-14 bg-gray-100 rounded-full h-1.5"><div class="bg-cyan-400 h-1.5 rounded-full" style="width:32%"></div></div>
</div>
<div class="flex items-center gap-1.5">
<span class="text-[10px] text-gray-400">MEM</span>
<div class="w-14 bg-gray-100 rounded-full h-1.5"><div class="bg-violet-400 h-1.5 rounded-full" style="width:48%"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>