291 lines
11 KiB
TypeScript
291 lines
11 KiB
TypeScript
import React, { ReactElement, useEffect, useState } from "react";
|
|
import { useGetCachedImportStatisticsQuery } from "../../graphql/generated";
|
|
import { useStore } from "../../store";
|
|
import { format } from "date-fns";
|
|
|
|
interface ImportStatsData {
|
|
totalLocalFiles: number;
|
|
alreadyImported: number;
|
|
newFiles: number;
|
|
percentageImported: string;
|
|
pendingFiles: number;
|
|
lastUpdated: string;
|
|
}
|
|
|
|
/**
|
|
* Real-time import statistics widget
|
|
* Displays live statistics from the file watcher and updates via Socket.IO
|
|
*/
|
|
export const RealTimeImportStats = (): ReactElement => {
|
|
const [stats, setStats] = useState<ImportStatsData | null>(null);
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
const getSocket = useStore((state) => state.getSocket);
|
|
|
|
// Fetch initial cached statistics
|
|
const {
|
|
data: cachedStats,
|
|
isLoading,
|
|
error,
|
|
refetch,
|
|
} = useGetCachedImportStatisticsQuery(
|
|
{},
|
|
{
|
|
refetchOnWindowFocus: false,
|
|
refetchInterval: false,
|
|
}
|
|
);
|
|
|
|
// Set initial stats from GraphQL query
|
|
useEffect(() => {
|
|
if (cachedStats?.getCachedImportStatistics?.success && cachedStats.getCachedImportStatistics.stats) {
|
|
setStats({
|
|
totalLocalFiles: cachedStats.getCachedImportStatistics.stats.totalLocalFiles,
|
|
alreadyImported: cachedStats.getCachedImportStatistics.stats.alreadyImported,
|
|
newFiles: cachedStats.getCachedImportStatistics.stats.newFiles,
|
|
percentageImported: cachedStats.getCachedImportStatistics.stats.percentageImported,
|
|
pendingFiles: cachedStats.getCachedImportStatistics.stats.pendingFiles,
|
|
lastUpdated: cachedStats.getCachedImportStatistics.lastUpdated || new Date().toISOString(),
|
|
});
|
|
}
|
|
}, [cachedStats]);
|
|
|
|
// Setup Socket.IO listener for real-time updates
|
|
useEffect(() => {
|
|
const socket = getSocket("/");
|
|
|
|
const handleConnect = () => {
|
|
setIsConnected(true);
|
|
console.log("Real-time import stats: Socket connected");
|
|
};
|
|
|
|
const handleDisconnect = () => {
|
|
setIsConnected(false);
|
|
console.log("Real-time import stats: Socket disconnected");
|
|
};
|
|
|
|
const handleStatsUpdate = (data: any) => {
|
|
console.log("Real-time import stats update received:", data);
|
|
if (data.stats) {
|
|
setStats({
|
|
totalLocalFiles: data.stats.totalLocalFiles,
|
|
alreadyImported: data.stats.alreadyImported,
|
|
newFiles: data.stats.newFiles,
|
|
percentageImported: data.stats.percentageImported,
|
|
pendingFiles: data.stats.pendingFiles || 0,
|
|
lastUpdated: data.lastUpdated || new Date().toISOString(),
|
|
});
|
|
}
|
|
};
|
|
|
|
socket.on("connect", handleConnect);
|
|
socket.on("disconnect", handleDisconnect);
|
|
socket.on("IMPORT_STATISTICS_UPDATED", handleStatsUpdate);
|
|
|
|
// Check initial connection state
|
|
if (socket.connected) {
|
|
setIsConnected(true);
|
|
}
|
|
|
|
return () => {
|
|
socket.off("connect", handleConnect);
|
|
socket.off("disconnect", handleDisconnect);
|
|
socket.off("IMPORT_STATISTICS_UPDATED", handleStatsUpdate);
|
|
};
|
|
}, [getSocket]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 p-6">
|
|
<div className="flex justify-center items-center">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
|
|
<span className="ml-3 text-gray-600 dark:text-gray-300">
|
|
Loading statistics...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="rounded-lg border border-red-200 dark:border-red-600 bg-red-50 dark:bg-red-900/20 p-6">
|
|
<div className="flex items-center">
|
|
<span className="w-6 h-6 text-red-600">
|
|
<i className="h-6 w-6 icon-[solar--danger-circle-bold]"></i>
|
|
</span>
|
|
<span className="ml-3 text-red-600 dark:text-red-400">
|
|
Error loading statistics
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Handle cache not initialized or no stats available
|
|
if (!stats || cachedStats?.getCachedImportStatistics?.success === false) {
|
|
return (
|
|
<div className="rounded-lg border border-yellow-200 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<span className="w-6 h-6 text-yellow-600">
|
|
<i className="h-6 w-6 icon-[solar--info-circle-bold]"></i>
|
|
</span>
|
|
<div className="ml-3">
|
|
<p className="font-medium text-yellow-800 dark:text-yellow-300">
|
|
Statistics Cache Initializing
|
|
</p>
|
|
<p className="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
|
|
{cachedStats?.getCachedImportStatistics?.message || "The file watcher is starting up. Statistics will appear shortly."}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => refetch()}
|
|
className="flex items-center gap-1 px-3 py-2 text-sm rounded-lg border border-yellow-400 bg-yellow-100 dark:bg-yellow-800 text-yellow-700 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-700 transition-colors"
|
|
title="Retry"
|
|
>
|
|
<span className="w-4 h-4">
|
|
<i className="h-4 w-4 icon-[solar--refresh-bold]"></i>
|
|
</span>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const percentageValue = typeof stats.percentageImported === 'number'
|
|
? stats.percentageImported
|
|
: parseFloat(stats.percentageImported);
|
|
|
|
return (
|
|
<div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-slate-700 p-6">
|
|
{/* Header with connection status */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
|
|
<span className="w-6 h-6 mr-2">
|
|
<i className="h-6 w-6 icon-[solar--chart-bold-duotone]"></i>
|
|
</span>
|
|
Real-Time Folder Statistics
|
|
</h3>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold ${
|
|
isConnected
|
|
? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
|
|
: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`h-2 w-2 rounded-full ${
|
|
isConnected ? "bg-green-600 animate-pulse" : "bg-gray-400"
|
|
}`}
|
|
></span>
|
|
{isConnected ? "Live" : "Offline"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Statistics Grid */}
|
|
<dl className="grid grid-cols-2 gap-4 sm:grid-cols-5 mb-4">
|
|
<div className="flex flex-col rounded-lg bg-blue-100 dark:bg-blue-900/30 px-4 py-4 text-center">
|
|
<dd className="text-2xl font-bold text-blue-600 dark:text-blue-400 md:text-3xl">
|
|
{stats.totalLocalFiles}
|
|
</dd>
|
|
<dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
|
|
Total Files
|
|
</dt>
|
|
</div>
|
|
|
|
<div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-900/30 px-4 py-4 text-center">
|
|
<dd className="text-2xl font-bold text-green-600 dark:text-green-400 md:text-3xl">
|
|
{stats.newFiles}
|
|
</dd>
|
|
<dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
|
|
New Files
|
|
</dt>
|
|
</div>
|
|
|
|
<div className="flex flex-col rounded-lg bg-yellow-100 dark:bg-yellow-900/30 px-4 py-4 text-center">
|
|
<dd className="text-2xl font-bold text-yellow-600 dark:text-yellow-400 md:text-3xl">
|
|
{stats.alreadyImported}
|
|
</dd>
|
|
<dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
|
|
Imported
|
|
</dt>
|
|
</div>
|
|
|
|
<div className="flex flex-col rounded-lg bg-orange-100 dark:bg-orange-900/30 px-4 py-4 text-center">
|
|
<dd className="text-2xl font-bold text-orange-600 dark:text-orange-400 md:text-3xl">
|
|
{stats.pendingFiles}
|
|
</dd>
|
|
<dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
|
|
Pending
|
|
</dt>
|
|
</div>
|
|
|
|
<div className="flex flex-col rounded-lg bg-purple-100 dark:bg-purple-900/30 px-4 py-4 text-center">
|
|
<dd className="text-2xl font-bold text-purple-600 dark:text-purple-400 md:text-3xl">
|
|
{!isNaN(percentageValue) ? percentageValue.toFixed(1) : '0.0'}%
|
|
</dd>
|
|
<dt className="text-sm font-medium text-gray-600 dark:text-gray-300">
|
|
In Library
|
|
</dt>
|
|
</div>
|
|
</dl>
|
|
|
|
{/* Last Updated */}
|
|
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 pt-2 border-t border-gray-200 dark:border-gray-600">
|
|
<span className="flex items-center">
|
|
<span className="w-4 h-4 mr-1">
|
|
<i className="h-4 w-4 icon-[solar--clock-circle-line-duotone]"></i>
|
|
</span>
|
|
Last updated: {format(new Date(stats.lastUpdated), "MMM d, yyyy 'at' h:mm:ss a")}
|
|
</span>
|
|
<button
|
|
onClick={() => refetch()}
|
|
className="flex items-center gap-1 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
|
title="Refresh statistics"
|
|
>
|
|
<span className="w-4 h-4">
|
|
<i className="h-4 w-4 icon-[solar--refresh-bold]"></i>
|
|
</span>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
|
|
{/* Info message about pending files */}
|
|
{stats.pendingFiles > 0 && (
|
|
<div className="mt-4 rounded-lg border-s-4 border-orange-500 bg-orange-50 dark:bg-orange-900/20 p-3">
|
|
<p className="text-sm text-orange-700 dark:text-orange-300">
|
|
<span className="font-semibold">{stats.pendingFiles}</span> file{stats.pendingFiles !== 1 ? 's are' : ' is'} being stabilized before import (write in progress).
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Info message about new files */}
|
|
{stats.newFiles > 0 && stats.pendingFiles === 0 && (
|
|
<div className="mt-4 rounded-lg border-s-4 border-green-500 bg-green-50 dark:bg-green-900/20 p-3">
|
|
<p className="text-sm text-green-700 dark:text-green-300">
|
|
<span className="font-semibold">{stats.newFiles}</span> new file{stats.newFiles !== 1 ? 's are' : ' is'} ready to be imported.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* All caught up message */}
|
|
{stats.newFiles === 0 && stats.pendingFiles === 0 && stats.totalLocalFiles > 0 && (
|
|
<div className="mt-4 rounded-lg border-s-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20 p-3">
|
|
<p className="text-sm text-blue-700 dark:text-blue-300 flex items-center">
|
|
<span className="w-5 h-5 mr-2">
|
|
<i className="h-5 w-5 icon-[solar--check-circle-bold]"></i>
|
|
</span>
|
|
All files in the folder are already imported!
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RealTimeImportStats;
|