351 lines
15 KiB
TypeScript
351 lines
15 KiB
TypeScript
import { useState } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { useBreadcrumb } from '../hooks/useBreadcrumb'
|
|
import { breadcrumbConfig } from '../config/breadcrumbConfig'
|
|
import {
|
|
Activity,
|
|
AlertCircle,
|
|
CheckCircle,
|
|
Clock,
|
|
TrendingUp,
|
|
RefreshCw,
|
|
Filter,
|
|
Gauge,
|
|
} from 'lucide-react'
|
|
import { api } from '../lib/api'
|
|
import { formatRelativeTime } from '../lib/utils'
|
|
|
|
export default function Monitoring() {
|
|
useBreadcrumb(breadcrumbConfig['/monitoring'])
|
|
const [timeWindow, setTimeWindow] = useState(24)
|
|
const [selectedDownloader, setSelectedDownloader] = useState<string | null>(null)
|
|
const [historyLimit, setHistoryLimit] = useState(100)
|
|
|
|
const { data: statusData, isLoading: statusLoading, refetch: refetchStatus } = useQuery({
|
|
queryKey: ['monitoring', 'status', timeWindow],
|
|
queryFn: () => api.getMonitoringStatus(timeWindow),
|
|
refetchInterval: 30000, // Refresh every 30 seconds
|
|
})
|
|
|
|
const { data: historyData, isLoading: historyLoading, refetch: refetchHistory } = useQuery({
|
|
queryKey: ['monitoring', 'history', selectedDownloader, historyLimit],
|
|
queryFn: () => api.getMonitoringHistory(selectedDownloader, historyLimit),
|
|
refetchInterval: 60000, // Refresh every minute
|
|
})
|
|
|
|
const downloaders = statusData?.downloaders || []
|
|
const history = historyData?.history || []
|
|
|
|
// Calculate overall stats
|
|
const totalAttempts = downloaders.reduce((sum, d) => sum + d.total_attempts, 0)
|
|
const totalSuccessful = downloaders.reduce((sum, d) => sum + d.successful, 0)
|
|
const totalFailed = downloaders.reduce((sum, d) => sum + d.failed, 0)
|
|
const overallSuccessRate = totalAttempts > 0 ? (totalSuccessful / totalAttempts * 100).toFixed(1) : 0
|
|
|
|
// Get downloader display name
|
|
const getDownloaderName = (downloader: string) => {
|
|
const names: Record<string, string> = {
|
|
fastdl: 'FastDL',
|
|
imginn: 'ImgInn',
|
|
toolzu: 'Toolzu',
|
|
instagram: 'Instagram',
|
|
snapchat: 'Snapchat',
|
|
tiktok: 'TikTok',
|
|
forums: 'Forums',
|
|
coppermine: 'Coppermine'
|
|
}
|
|
return names[downloader] || downloader
|
|
}
|
|
|
|
// Get status color
|
|
const getStatusColor = (successRate: number) => {
|
|
if (successRate >= 80) return 'text-green-600 dark:text-green-400'
|
|
if (successRate >= 50) return 'text-yellow-600 dark:text-yellow-400'
|
|
return 'text-red-600 dark:text-red-400'
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl sm:text-3xl font-bold flex items-center gap-2 sm:gap-3">
|
|
<Gauge className="w-8 h-8 text-orange-500" />
|
|
Downloader Monitoring
|
|
</h1>
|
|
<p className="text-slate-600 dark:text-slate-400 mt-1">
|
|
Track downloader health and performance
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<select
|
|
value={timeWindow}
|
|
onChange={(e) => setTimeWindow(Number(e.target.value))}
|
|
className="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
|
|
>
|
|
<option value={1}>Last Hour</option>
|
|
<option value={6}>Last 6 Hours</option>
|
|
<option value={24}>Last 24 Hours</option>
|
|
<option value={72}>Last 3 Days</option>
|
|
<option value={168}>Last Week</option>
|
|
</select>
|
|
<button
|
|
onClick={() => {
|
|
refetchStatus()
|
|
refetchHistory()
|
|
}}
|
|
className="p-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors btn-hover-lift"
|
|
title="Refresh"
|
|
>
|
|
<RefreshCw className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overall Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="card-glass-hover rounded-xl p-5 border stat-card-blue shadow-blue-glow">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Total Attempts</p>
|
|
<p className="text-2xl font-bold text-foreground mt-1 animate-count-up">{totalAttempts}</p>
|
|
</div>
|
|
<div className="p-3 rounded-xl bg-blue-500/20">
|
|
<Activity className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-glass-hover rounded-xl p-5 border stat-card-green shadow-green-glow">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Successful</p>
|
|
<p className="text-2xl font-bold text-emerald-600 dark:text-emerald-400 mt-1">{totalSuccessful}</p>
|
|
</div>
|
|
<div className="p-3 rounded-xl bg-emerald-500/20">
|
|
<CheckCircle className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-glass-hover rounded-xl p-5 border stat-card-red shadow-red-glow">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Failed</p>
|
|
<p className="text-2xl font-bold text-red-600 dark:text-red-400 mt-1">{totalFailed}</p>
|
|
</div>
|
|
<div className="p-3 rounded-xl bg-red-500/20">
|
|
<AlertCircle className="w-6 h-6 text-red-600 dark:text-red-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-glass-hover rounded-xl p-5 border stat-card-purple shadow-purple-glow">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Success Rate</p>
|
|
<p className={`text-2xl font-bold mt-1 ${getStatusColor(Number(overallSuccessRate))}`}>
|
|
{overallSuccessRate}%
|
|
</p>
|
|
</div>
|
|
<div className="p-3 rounded-xl bg-violet-500/20">
|
|
<TrendingUp className={`w-6 h-6 ${getStatusColor(Number(overallSuccessRate))}`} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Downloader Status Cards */}
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-foreground mb-4">Downloader Status</h2>
|
|
{statusLoading ? (
|
|
<div className="text-center py-8 text-muted-foreground">Loading...</div>
|
|
) : downloaders.length === 0 ? (
|
|
<div className="card-glass-hover rounded-xl p-8 text-center">
|
|
<Activity className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
|
|
<p className="text-muted-foreground">No monitoring data available yet</p>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Data will appear after downloaders run
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{downloaders.map((downloader) => (
|
|
<div
|
|
key={downloader.downloader}
|
|
className={`card-glass-hover rounded-xl p-5 cursor-pointer ${
|
|
selectedDownloader === downloader.downloader
|
|
? 'ring-2 ring-primary'
|
|
: ''
|
|
}`}
|
|
onClick={() => setSelectedDownloader(
|
|
selectedDownloader === downloader.downloader ? null : downloader.downloader
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-semibold text-foreground">
|
|
{getDownloaderName(downloader.downloader)}
|
|
</h3>
|
|
<span className={`text-2xl font-bold ${getStatusColor(downloader.success_rate)}`}>
|
|
{downloader.success_rate}%
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-muted-foreground">Attempts</span>
|
|
<span className="font-medium text-foreground">{downloader.total_attempts}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-muted-foreground">Successful</span>
|
|
<span className="font-medium text-green-600 dark:text-green-400">{downloader.successful}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-muted-foreground">Failed</span>
|
|
<span className="font-medium text-red-600 dark:text-red-400">{downloader.failed}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-muted-foreground">Files</span>
|
|
<span className="font-medium text-foreground">{downloader.total_files}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-border">
|
|
<div className="flex items-center space-x-2 text-xs">
|
|
<Clock className="w-3 h-3 text-muted-foreground" />
|
|
<span className="text-muted-foreground">
|
|
Last: {downloader.last_attempt ? formatRelativeTime(downloader.last_attempt) : 'Never'}
|
|
</span>
|
|
</div>
|
|
{downloader.last_success && (
|
|
<div className="flex items-center space-x-2 text-xs mt-1">
|
|
<CheckCircle className="w-3 h-3 text-green-600" />
|
|
<span className="text-muted-foreground">
|
|
Success: {formatRelativeTime(downloader.last_success)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* History Table */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold text-foreground">Download History</h2>
|
|
<div className="flex items-center space-x-3">
|
|
{selectedDownloader && (
|
|
<button
|
|
onClick={() => setSelectedDownloader(null)}
|
|
className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 flex items-center space-x-1"
|
|
>
|
|
<Filter className="w-4 h-4" />
|
|
<span>Clear Filter ({getDownloaderName(selectedDownloader)})</span>
|
|
</button>
|
|
)}
|
|
<select
|
|
value={historyLimit}
|
|
onChange={(e) => setHistoryLimit(Number(e.target.value))}
|
|
className="px-3 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
|
|
>
|
|
<option value={50}>Last 50</option>
|
|
<option value={100}>Last 100</option>
|
|
<option value={200}>Last 200</option>
|
|
<option value={500}>Last 500</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-glass-hover rounded-xl overflow-hidden">
|
|
{historyLoading ? (
|
|
<div className="text-center py-8 text-muted-foreground">Loading history...</div>
|
|
) : history.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No history available
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-secondary/50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
Time
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
Downloader
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
Username
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
Files
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
Error
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
Alert
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{history.map((entry) => (
|
|
<tr
|
|
key={entry.id}
|
|
className="hover:bg-secondary/50 transition-colors"
|
|
>
|
|
<td className="px-4 py-3 whitespace-nowrap text-sm text-foreground">
|
|
{formatRelativeTime(entry.timestamp)}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
<span className="px-2 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
|
|
{getDownloaderName(entry.downloader)}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap text-sm text-foreground">
|
|
{entry.username}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
{entry.success ? (
|
|
<span className="flex items-center space-x-1 text-green-600 dark:text-green-400">
|
|
<CheckCircle className="w-4 h-4" />
|
|
<span className="text-sm font-medium">Success</span>
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center space-x-1 text-red-600 dark:text-red-400">
|
|
<AlertCircle className="w-4 h-4" />
|
|
<span className="text-sm font-medium">Failed</span>
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap text-sm text-foreground">
|
|
{entry.file_count}
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-muted-foreground max-w-xs truncate">
|
|
{entry.error_message || '-'}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
{entry.alert_sent && (
|
|
<span className="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
|
|
Alerted
|
|
</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|