103 lines
4.4 KiB
TypeScript
103 lines
4.4 KiB
TypeScript
import { useStore } from '@nanostores/preact';
|
|
import { $freeInternalHeap, $totalInternalHeap } from './AppProviderStore';
|
|
|
|
interface MemoryProgressBarProps {
|
|
showDetails?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export default function MemoryProgressBar({ showDetails = true, className = "" }: MemoryProgressBarProps) {
|
|
const freeInternalHeap = useStore($freeInternalHeap);
|
|
const totalInternalHeap = useStore($totalInternalHeap);
|
|
|
|
// Calculate used and percentage
|
|
const usedInternalHeap = totalInternalHeap - freeInternalHeap;
|
|
const usagePercentage = totalInternalHeap > 0 ? (usedInternalHeap / totalInternalHeap) * 100 : 0;
|
|
const freePercentage = 100 - usagePercentage;
|
|
|
|
// Determine color based on usage
|
|
const getProgressColor = (percentage: number) => {
|
|
if (percentage < 50) return 'bg-green-500';
|
|
if (percentage < 75) return 'bg-yellow-500';
|
|
if (percentage < 90) return 'bg-orange-500';
|
|
return 'bg-red-500';
|
|
};
|
|
|
|
const getTextColor = (percentage: number) => {
|
|
if (percentage < 50) return 'text-green-600';
|
|
if (percentage < 75) return 'text-yellow-600';
|
|
if (percentage < 90) return 'text-orange-600';
|
|
return 'text-red-600';
|
|
};
|
|
|
|
const formatBytes = (bytes: number) => {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
|
};
|
|
|
|
// Create segments for the memory bar (like Linux htop)
|
|
const totalSegments = 20;
|
|
const usedSegments = Math.round((usagePercentage / 100) * totalSegments);
|
|
|
|
const getSegmentColor = (segmentIndex: number) => {
|
|
if (segmentIndex >= usedSegments) return 'bg-gray-300'; // Empty
|
|
|
|
const percentageAtSegment = (segmentIndex / totalSegments) * 100;
|
|
if (percentageAtSegment < 50) return 'bg-green-500';
|
|
if (percentageAtSegment < 75) return 'bg-yellow-500';
|
|
if (percentageAtSegment < 90) return 'bg-orange-500';
|
|
return 'bg-red-500';
|
|
};
|
|
|
|
return (
|
|
<div className={`space-y-2 ${className}`}>
|
|
{/* Linux-style Memory Bar with segments */}
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-sm font-medium text-gray-700">Internal Heap</span>
|
|
<div className="text-right">
|
|
<span className={`text-sm font-medium ${getTextColor(usagePercentage)}`}>
|
|
{usagePercentage.toFixed(1)}%
|
|
</span>
|
|
<div className="text-xs text-gray-600">
|
|
{formatBytes(usedInternalHeap)}/{formatBytes(totalInternalHeap)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Memory segments */}
|
|
<div className="flex space-x-0.5">
|
|
{Array.from({ length: totalSegments }, (_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`h-3 flex-1 transition-colors duration-300 ${getSegmentColor(i)}`}
|
|
style={{ minWidth: '2px' }}
|
|
></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Memory Stats */}
|
|
{showDetails && (
|
|
<div className="grid grid-cols-3 gap-3 text-xs text-gray-600">
|
|
<div className="flex justify-between">
|
|
<span>Used:</span>
|
|
<span className="font-medium">{formatBytes(usedInternalHeap)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Free:</span>
|
|
<span className="font-medium text-green-600">{formatBytes(freeInternalHeap)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Total:</span>
|
|
<span className="font-medium">{formatBytes(totalInternalHeap)}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|