gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-24 12:13:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: replace emoji indicators with proper status badges in disk monitoring UI

Browse Source
This commit is contained in:
Pulse Monitor
2025-09-08 21:38:14 +00:00
parent d927436658
commit 0f9041fc3e
2 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx
+9 -9
View File
@@ -64,25 +64,25 @@ export const DiskHealthSummary: Component<DiskHealthSummaryProps> = (props) => {
{/* Health Status */}
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 dark:text-gray-400">Status</span>
<div class="flex gap-3">
<div class="flex gap-2">
<Show when={diskStats().healthy > 0}>
<span class="text-green-600 dark:text-green-400">
✅ {diskStats().healthy}
<span class="px-1.5 py-0.5 text-xs rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
{diskStats().healthy} healthy
</span>
</Show>
<Show when={diskStats().failing > 0}>
<span class="text-red-600 dark:text-red-400">
❌ {diskStats().failing}
<span class="px-1.5 py-0.5 text-xs rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400">
{diskStats().failing} failed
</span>
</Show>
<Show when={diskStats().lowLife > 0}>
<span class="text-yellow-600 dark:text-yellow-400">
⚠️ {diskStats().lowLife} low
<span class="px-1.5 py-0.5 text-xs rounded bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400">
{diskStats().lowLife} low
</span>
</Show>
<Show when={diskStats().unknown > 0}>
<span class="text-gray-500">
❓ {diskStats().unknown}
<span class="px-1.5 py-0.5 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-400">
{diskStats().unknown} unknown
</span>
</Show>
</div>
frontend-modern/src/components/Storage/DiskList.tsx
+24 -8
View File
@@ -36,18 +36,34 @@ export const DiskList: Component<DiskListProps> = (props) => {
});
});
// Get health status color and icon
// Get health status color and badge
const getHealthStatus = (disk: PhysicalDisk) => {
if (disk.health === 'PASSED') {
// Check wearout for SSDs
if (disk.wearout > 0 && disk.wearout < 10) {
return { color: 'text-yellow-500', icon: '⚠️', text: 'Low Life' };
return {
color: 'text-yellow-700 dark:text-yellow-400',
bgColor: 'bg-yellow-100 dark:bg-yellow-900/30',
text: 'LOW LIFE'
};
}
return { color: 'text-green-500', icon: '✅', text: 'Healthy' };
return {
color: 'text-green-700 dark:text-green-400',
bgColor: 'bg-green-100 dark:bg-green-900/30',
text: 'HEALTHY'
};
} else if (disk.health === 'FAILED') {
return { color: 'text-red-500', icon: '❌', text: 'Failed' };
return {
color: 'text-red-700 dark:text-red-400',
bgColor: 'bg-red-100 dark:bg-red-900/30',
text: 'FAILED'
};
}
return { color: 'text-gray-500', icon: '❓', text: 'Unknown' };
return {
color: 'text-gray-700 dark:text-gray-400',
bgColor: 'bg-gray-100 dark:bg-gray-700',
text: 'UNKNOWN'
};
};
// Get disk type badge color
@@ -84,10 +100,10 @@ export const DiskList: Component<DiskListProps> = (props) => {
<div class="flex-1">
{/* Header with model and health */}
<div class="flex items-center gap-3 mb-2">
<span class={`text-lg ${health.color}`} title={health.text}>
{health.icon}
<span class={`px-2 py-0.5 text-xs font-medium rounded ${health.bgColor} ${health.color}`}>
{health.text}
</span>
<h3 class="text-lg font-semibold text-gray-900">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
{disk.model || 'Unknown Model'}
</h3>
<span class={`px-2 py-1 text-xs font-medium rounded-full ${getDiskTypeBadge(disk.type)}`}>