90 lines
No EOL
3.4 KiB
TypeScript
90 lines
No EOL
3.4 KiB
TypeScript
/**
|
|
* Proxy Stats Card Component
|
|
*/
|
|
|
|
import type { ProxyStats } from '../types';
|
|
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
|
import { StatusBadge } from './StatusBadge';
|
|
import { formatPercentage } from '../utils/formatters';
|
|
|
|
interface ProxyStatsCardProps {
|
|
stats: ProxyStats;
|
|
}
|
|
|
|
export function ProxyStatsCard({ stats }: ProxyStatsCardProps) {
|
|
const successRate = stats.totalProxies > 0
|
|
? (stats.workingProxies / stats.totalProxies) * 100
|
|
: 0;
|
|
|
|
const formatDate = (dateString?: string) => {
|
|
if (!dateString) {return 'Never';}
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString();
|
|
};
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<CardHeader className="p-0 pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-base font-semibold text-text-primary">Proxy Status</h2>
|
|
<StatusBadge
|
|
variant={stats.enabled ? 'success' : 'default'}
|
|
size="md"
|
|
>
|
|
{stats.enabled ? 'Enabled' : 'Disabled'}
|
|
</StatusBadge>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="p-0">
|
|
{stats.enabled ? (
|
|
<div className="space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<p className="text-sm text-text-secondary">Total Proxies</p>
|
|
<p className="text-xl font-bold text-text-primary">{stats.totalProxies}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-text-secondary">Success Rate</p>
|
|
<p className="text-xl font-bold text-text-primary">{formatPercentage(successRate)}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<p className="text-sm text-text-secondary">Working</p>
|
|
<p className="text-base font-semibold text-success">{stats.workingProxies}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-text-secondary">Failed</p>
|
|
<p className="text-base font-semibold text-danger">{stats.failedProxies}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-border pt-3 space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-text-secondary">Last Update:</span>
|
|
<span className="font-medium text-text-primary">{formatDate(stats.lastUpdate)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-text-secondary">Last Fetch:</span>
|
|
<span className="font-medium text-text-primary">{formatDate(stats.lastFetchTime)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{stats.totalProxies === 0 && (
|
|
<div className="bg-warning/10 border border-warning rounded p-3 text-sm text-warning">
|
|
No proxies available. Check WebShare API configuration.
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-text-secondary">
|
|
<p>Proxy service is disabled</p>
|
|
<p className="text-sm mt-2">Enable it in the configuration to use proxies</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |