232 lines
8.7 KiB
TypeScript
232 lines
8.7 KiB
TypeScript
import React, { ReactElement, useEffect, useState } from "react";
|
|
import {
|
|
useGetImportStatisticsQuery,
|
|
useStartIncrementalImportMutation
|
|
} from "../../graphql/generated";
|
|
import { useStore } from "../../store";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import { useImportSessionStatus } from "../../hooks/useImportSessionStatus";
|
|
|
|
/**
|
|
* Import statistics with card-based layout and progress bar
|
|
* Updates in real-time via the useImportSessionStatus hook
|
|
*/
|
|
export const RealTimeImportStats = (): ReactElement => {
|
|
const [importError, setImportError] = useState<string | null>(null);
|
|
const { getSocket, disconnectSocket, importJobQueue } = useStore(
|
|
useShallow((state) => ({
|
|
getSocket: state.getSocket,
|
|
disconnectSocket: state.disconnectSocket,
|
|
importJobQueue: state.importJobQueue,
|
|
}))
|
|
);
|
|
|
|
// Get filesystem statistics (new files vs already imported)
|
|
const { data: importStats, isLoading, refetch: refetchStats } = useGetImportStatisticsQuery(
|
|
{},
|
|
{ refetchOnWindowFocus: false, refetchInterval: false }
|
|
);
|
|
|
|
// Get definitive import session status (handles Socket.IO events internally)
|
|
const importSession = useImportSessionStatus();
|
|
|
|
const { mutate: startIncrementalImport, isPending: isStartingImport } = useStartIncrementalImportMutation({
|
|
onSuccess: (data) => {
|
|
if (data.startIncrementalImport.success) {
|
|
importJobQueue.setStatus("running");
|
|
setImportError(null);
|
|
}
|
|
},
|
|
onError: (error: any) => {
|
|
console.error("Failed to start import:", error);
|
|
setImportError(error?.message || "Failed to start import. Please try again.");
|
|
},
|
|
});
|
|
|
|
const stats = importStats?.getImportStatistics?.stats;
|
|
const hasNewFiles = stats && stats.newFiles > 0;
|
|
|
|
// Refetch filesystem stats when import completes
|
|
useEffect(() => {
|
|
if (importSession.isComplete && importSession.status === "completed") {
|
|
console.log("[RealTimeImportStats] Import completed, refetching filesystem stats");
|
|
refetchStats();
|
|
importJobQueue.setStatus("drained");
|
|
}
|
|
}, [importSession.isComplete, importSession.status, refetchStats, importJobQueue]);
|
|
|
|
// Listen to filesystem change events to refetch stats
|
|
useEffect(() => {
|
|
const socket = getSocket("/");
|
|
|
|
const handleFilesystemChange = () => {
|
|
refetchStats();
|
|
};
|
|
|
|
// File system changes that affect import statistics
|
|
socket.on("LS_FILE_ADDED", handleFilesystemChange);
|
|
socket.on("LS_FILE_REMOVED", handleFilesystemChange);
|
|
socket.on("LS_FILE_CHANGED", handleFilesystemChange);
|
|
socket.on("LS_DIRECTORY_ADDED", handleFilesystemChange);
|
|
socket.on("LS_DIRECTORY_REMOVED", handleFilesystemChange);
|
|
socket.on("LS_LIBRARY_STATISTICS", handleFilesystemChange);
|
|
|
|
return () => {
|
|
socket.off("LS_FILE_ADDED", handleFilesystemChange);
|
|
socket.off("LS_FILE_REMOVED", handleFilesystemChange);
|
|
socket.off("LS_FILE_CHANGED", handleFilesystemChange);
|
|
socket.off("LS_DIRECTORY_ADDED", handleFilesystemChange);
|
|
socket.off("LS_DIRECTORY_REMOVED", handleFilesystemChange);
|
|
socket.off("LS_LIBRARY_STATISTICS", handleFilesystemChange);
|
|
};
|
|
}, [getSocket, refetchStats]);
|
|
|
|
const handleStartImport = async () => {
|
|
setImportError(null);
|
|
|
|
// Check if import is already active using definitive status
|
|
if (importSession.isActive) {
|
|
setImportError(
|
|
`Cannot start import: An import session "${importSession.sessionId}" is already active. Please wait for it to complete.`
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (importJobQueue.status === "drained") {
|
|
localStorage.removeItem("sessionId");
|
|
disconnectSocket("/");
|
|
setTimeout(() => {
|
|
getSocket("/");
|
|
setTimeout(() => {
|
|
const sessionId = localStorage.getItem("sessionId") || "";
|
|
startIncrementalImport({ sessionId });
|
|
}, 500);
|
|
}, 100);
|
|
} else {
|
|
const sessionId = localStorage.getItem("sessionId") || "";
|
|
startIncrementalImport({ sessionId });
|
|
}
|
|
};
|
|
|
|
if (isLoading || !stats) {
|
|
return <div className="text-gray-500 dark:text-gray-400">Loading...</div>;
|
|
}
|
|
|
|
// Determine button text based on whether there are already imported files
|
|
const isFirstImport = stats.alreadyImported === 0;
|
|
const buttonText = isFirstImport
|
|
? `Start Import (${stats.newFiles} files)`
|
|
: `Start Incremental Import (${stats.newFiles} new files)`;
|
|
|
|
// Calculate display statistics
|
|
const displayStats = importSession.isActive && importSession.stats
|
|
? {
|
|
totalFiles: importSession.stats.filesQueued + stats.alreadyImported,
|
|
filesQueued: importSession.stats.filesQueued,
|
|
filesSucceeded: importSession.stats.filesSucceeded,
|
|
}
|
|
: {
|
|
totalFiles: stats.totalLocalFiles,
|
|
filesQueued: stats.newFiles,
|
|
filesSucceeded: stats.alreadyImported,
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Error Message */}
|
|
{importError && (
|
|
<div className="rounded-lg border-l-4 border-red-500 bg-red-50 dark:bg-red-900/20 p-4">
|
|
<div className="flex items-start gap-3">
|
|
<span className="w-6 h-6 text-red-600 dark:text-red-400 mt-0.5">
|
|
<i className="h-6 w-6 icon-[solar--danger-circle-bold]"></i>
|
|
</span>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-red-800 dark:text-red-300">Import Error</p>
|
|
<p className="text-sm text-red-700 dark:text-red-400 mt-1">{importError}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setImportError(null)}
|
|
className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200"
|
|
>
|
|
<span className="w-5 h-5">
|
|
<i className="h-5 w-5 icon-[solar--close-circle-bold]"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Import Button - only show when there are new files and no active import */}
|
|
{hasNewFiles && !importSession.isActive && (
|
|
<button
|
|
onClick={handleStartImport}
|
|
disabled={isStartingImport}
|
|
className="w-full flex items-center justify-center gap-2 rounded-lg bg-green-500 hover:bg-green-600 disabled:bg-gray-400 px-6 py-3 text-white font-medium transition-colors disabled:cursor-not-allowed"
|
|
>
|
|
<span className="w-6 h-6">
|
|
<i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
|
|
</span>
|
|
<span>{isStartingImport ? "Starting Import..." : buttonText}</span>
|
|
</button>
|
|
)}
|
|
|
|
{/* Active Import Progress Bar */}
|
|
{importSession.isActive && (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Importing {importSession.stats?.filesSucceeded || 0} / {importSession.stats?.filesQueued || 0}...
|
|
</span>
|
|
<span className="text-sm font-semibold text-gray-900 dark:text-white">
|
|
{Math.round(importSession.progress)}%
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
|
|
<div
|
|
className="bg-blue-600 dark:bg-blue-500 h-3 rounded-full transition-all duration-300 relative"
|
|
style={{ width: `${importSession.progress}%` }}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
{/* Files Detected Card */}
|
|
<div className="rounded-lg p-6 text-center" style={{ backgroundColor: '#6b7280' }}>
|
|
<div className="text-4xl font-bold text-white mb-2">
|
|
{displayStats.totalFiles}
|
|
</div>
|
|
<div className="text-sm text-gray-200 font-medium">
|
|
files detected
|
|
</div>
|
|
</div>
|
|
|
|
{/* To Import Card */}
|
|
<div className="rounded-lg p-6 text-center" style={{ backgroundColor: '#60a5fa' }}>
|
|
<div className="text-4xl font-bold text-white mb-2">
|
|
{displayStats.filesQueued}
|
|
</div>
|
|
<div className="text-sm text-gray-100 font-medium">
|
|
to import
|
|
</div>
|
|
</div>
|
|
|
|
{/* Already Imported Card */}
|
|
<div className="rounded-lg p-6 text-center" style={{ backgroundColor: '#d8dab2' }}>
|
|
<div className="text-4xl font-bold text-gray-800 mb-2">
|
|
{displayStats.filesSucceeded}
|
|
</div>
|
|
<div className="text-sm text-gray-700 font-medium">
|
|
already imported
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RealTimeImportStats;
|