stage 4-2
This commit is contained in:
alorig
472
frontend/src/pages/Sites/SyncDashboard.tsx
Normal file
472
frontend/src/pages/Sites/SyncDashboard.tsx
Normal file
@@ -0,0 +1,472 @@
|
||||
/**
|
||||
* Sync Dashboard
|
||||
* Stage 4: WordPress sync health and management
|
||||
*
|
||||
* Displays sync status, parity indicators, and sync controls
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
CheckCircleIcon,
|
||||
XCircleIcon,
|
||||
AlertCircleIcon,
|
||||
RefreshCwIcon,
|
||||
ClockIcon,
|
||||
FileTextIcon,
|
||||
TagIcon,
|
||||
PackageIcon,
|
||||
ArrowRightIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
} from 'lucide-react';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import Badge from '../../components/ui/badge/Badge';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import {
|
||||
fetchSyncStatus,
|
||||
runSync,
|
||||
fetchSyncMismatches,
|
||||
fetchSyncLogs,
|
||||
SyncStatus,
|
||||
SyncMismatches,
|
||||
SyncLog,
|
||||
} from '../../services/api';
|
||||
|
||||
export default function SyncDashboard() {
|
||||
const { id: siteId } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
|
||||
const [mismatches, setMismatches] = useState<SyncMismatches | null>(null);
|
||||
const [logs, setLogs] = useState<SyncLog[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [showMismatches, setShowMismatches] = useState(false);
|
||||
const [showLogs, setShowLogs] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (siteId) {
|
||||
loadSyncData();
|
||||
}
|
||||
}, [siteId]);
|
||||
|
||||
const loadSyncData = async () => {
|
||||
if (!siteId) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const [statusData, mismatchesData, logsData] = await Promise.all([
|
||||
fetchSyncStatus(Number(siteId)),
|
||||
fetchSyncMismatches(Number(siteId)),
|
||||
fetchSyncLogs(Number(siteId), 50),
|
||||
]);
|
||||
setSyncStatus(statusData);
|
||||
setMismatches(mismatchesData);
|
||||
setLogs(logsData.logs || []);
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load sync data: ${error.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSync = async (direction: 'both' | 'to_external' | 'from_external' = 'both') => {
|
||||
if (!siteId) return;
|
||||
try {
|
||||
setSyncing(true);
|
||||
const result = await runSync(Number(siteId), direction);
|
||||
toast.success(`Sync completed: ${result.total_integrations} integration(s) synced`);
|
||||
await loadSyncData(); // Refresh data
|
||||
} catch (error: any) {
|
||||
toast.error(`Sync failed: ${error.message}`);
|
||||
} finally {
|
||||
setSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'healthy':
|
||||
case 'success':
|
||||
return 'success';
|
||||
case 'warning':
|
||||
return 'warning';
|
||||
case 'error':
|
||||
case 'failed':
|
||||
return 'error';
|
||||
default:
|
||||
return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'healthy':
|
||||
case 'success':
|
||||
return <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />;
|
||||
case 'warning':
|
||||
return <AlertCircleIcon className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />;
|
||||
case 'error':
|
||||
case 'failed':
|
||||
return <XCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />;
|
||||
default:
|
||||
return <ClockIcon className="w-5 h-5 text-gray-400" />;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Sync Dashboard" />
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-gray-500">Loading sync data...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!syncStatus) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Sync Dashboard" />
|
||||
<Card className="p-6">
|
||||
<div className="text-center py-8">
|
||||
<AlertCircleIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<p className="text-gray-600 dark:text-gray-400">No sync data available</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hasIntegrations = syncStatus.integrations.length > 0;
|
||||
const totalMismatches =
|
||||
(mismatches?.taxonomies.missing_in_wordpress.length || 0) +
|
||||
(mismatches?.taxonomies.missing_in_igny8.length || 0) +
|
||||
(mismatches?.products.missing_in_wordpress.length || 0) +
|
||||
(mismatches?.products.missing_in_igny8.length || 0) +
|
||||
(mismatches?.posts.missing_in_wordpress.length || 0) +
|
||||
(mismatches?.posts.missing_in_igny8.length || 0);
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Sync Dashboard" />
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Sync Dashboard</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Monitor and manage WordPress sync status
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate(`/sites/${siteId}`)}
|
||||
>
|
||||
Back to Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => handleSync('both')}
|
||||
disabled={syncing || !hasIntegrations}
|
||||
>
|
||||
<RefreshCwIcon className={`w-4 h-4 mr-2 ${syncing ? 'animate-spin' : ''}`} />
|
||||
{syncing ? 'Syncing...' : 'Sync All'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overall Status */}
|
||||
<Card className="p-6 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Overall Status</h2>
|
||||
<Badge color={getStatusColor(syncStatus.overall_status)} size="md">
|
||||
{syncStatus.overall_status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{syncStatus.integrations.length}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Active Integrations</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{totalMismatches}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Mismatches</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{syncStatus.last_sync_at
|
||||
? new Date(syncStatus.last_sync_at).toLocaleString()
|
||||
: 'Never'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Last Sync</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Integrations List */}
|
||||
{hasIntegrations ? (
|
||||
<div className="space-y-4 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Integrations</h2>
|
||||
{syncStatus.integrations.map((integration) => (
|
||||
<Card key={integration.id} className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{getStatusIcon(integration.is_healthy ? 'healthy' : integration.status)}
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
{integration.platform.charAt(0).toUpperCase() + integration.platform.slice(1)}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Last sync: {integration.last_sync_at
|
||||
? new Date(integration.last_sync_at).toLocaleString()
|
||||
: 'Never'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge color={getStatusColor(integration.status)} size="sm">
|
||||
{integration.status}
|
||||
</Badge>
|
||||
{integration.mismatch_count > 0 && (
|
||||
<Badge color="warning" size="sm">
|
||||
{integration.mismatch_count} mismatch{integration.mismatch_count !== 1 ? 'es' : ''}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{integration.error && (
|
||||
<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||
<div className="text-sm text-red-800 dark:text-red-300">{integration.error}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleSync('to_external')}
|
||||
disabled={syncing || !integration.sync_enabled}
|
||||
>
|
||||
<ArrowRightIcon className="w-4 h-4 mr-1" />
|
||||
Sync to WordPress
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleSync('from_external')}
|
||||
disabled={syncing || !integration.sync_enabled}
|
||||
>
|
||||
<ArrowRightIcon className="w-4 h-4 mr-1 rotate-180" />
|
||||
Sync from WordPress
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="p-6 mb-6">
|
||||
<div className="text-center py-8">
|
||||
<AlertCircleIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-2">No active integrations</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => navigate(`/sites/${siteId}/settings?tab=integrations`)}
|
||||
>
|
||||
Configure Integration
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Mismatches Section */}
|
||||
{totalMismatches > 0 && (
|
||||
<Card className="p-6 mb-6">
|
||||
<button
|
||||
onClick={() => setShowMismatches(!showMismatches)}
|
||||
className="w-full flex items-center justify-between mb-4"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Mismatches ({totalMismatches})
|
||||
</h2>
|
||||
{showMismatches ? (
|
||||
<ChevronUpIcon className="w-5 h-5 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDownIcon className="w-5 h-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{showMismatches && mismatches && (
|
||||
<div className="space-y-4">
|
||||
{/* Taxonomy Mismatches */}
|
||||
{(mismatches.taxonomies.missing_in_wordpress.length > 0 ||
|
||||
mismatches.taxonomies.missing_in_igny8.length > 0) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
|
||||
<TagIcon className="w-4 h-4" />
|
||||
Taxonomy Mismatches
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{mismatches.taxonomies.missing_in_wordpress.length > 0 && (
|
||||
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
|
||||
<div className="text-sm font-medium text-yellow-800 dark:text-yellow-300 mb-1">
|
||||
Missing in WordPress ({mismatches.taxonomies.missing_in_wordpress.length})
|
||||
</div>
|
||||
<ul className="text-sm text-yellow-700 dark:text-yellow-400 space-y-1">
|
||||
{mismatches.taxonomies.missing_in_wordpress.slice(0, 5).map((item, idx) => (
|
||||
<li key={idx}>• {item.name} ({item.type})</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{mismatches.taxonomies.missing_in_igny8.length > 0 && (
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||
<div className="text-sm font-medium text-blue-800 dark:text-blue-300 mb-1">
|
||||
Missing in IGNY8 ({mismatches.taxonomies.missing_in_igny8.length})
|
||||
</div>
|
||||
<ul className="text-sm text-blue-700 dark:text-blue-400 space-y-1">
|
||||
{mismatches.taxonomies.missing_in_igny8.slice(0, 5).map((item, idx) => (
|
||||
<li key={idx}>• {item.name} ({item.type})</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product Mismatches */}
|
||||
{(mismatches.products.missing_in_wordpress.length > 0 ||
|
||||
mismatches.products.missing_in_igny8.length > 0) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
|
||||
<PackageIcon className="w-4 h-4" />
|
||||
Product Mismatches
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{mismatches.products.missing_in_wordpress.length > 0 && (
|
||||
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
|
||||
<div className="text-sm text-yellow-800 dark:text-yellow-300">
|
||||
{mismatches.products.missing_in_wordpress.length} product(s) missing in WordPress
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{mismatches.products.missing_in_igny8.length > 0 && (
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||
<div className="text-sm text-blue-800 dark:text-blue-300">
|
||||
{mismatches.products.missing_in_igny8.length} product(s) missing in IGNY8
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Post Mismatches */}
|
||||
{(mismatches.posts.missing_in_wordpress.length > 0 ||
|
||||
mismatches.posts.missing_in_igny8.length > 0) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
|
||||
<FileTextIcon className="w-4 h-4" />
|
||||
Post Mismatches
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{mismatches.posts.missing_in_wordpress.length > 0 && (
|
||||
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
|
||||
<div className="text-sm text-yellow-800 dark:text-yellow-300">
|
||||
{mismatches.posts.missing_in_wordpress.length} post(s) missing in WordPress
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{mismatches.posts.missing_in_igny8.length > 0 && (
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||
<div className="text-sm text-blue-800 dark:text-blue-300">
|
||||
{mismatches.posts.missing_in_igny8.length} post(s) missing in IGNY8
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleSync('both')}
|
||||
disabled={syncing}
|
||||
>
|
||||
<RefreshCwIcon className="w-4 h-4 mr-2" />
|
||||
Retry Sync to Resolve
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Sync Logs */}
|
||||
<Card className="p-6">
|
||||
<button
|
||||
onClick={() => setShowLogs(!showLogs)}
|
||||
className="w-full flex items-center justify-between mb-4"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Sync History ({logs.length})
|
||||
</h2>
|
||||
{showLogs ? (
|
||||
<ChevronUpIcon className="w-5 h-5 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDownIcon className="w-5 h-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{showLogs && (
|
||||
<div className="space-y-2">
|
||||
{logs.length > 0 ? (
|
||||
logs.map((log, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon(log.status)}
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{log.platform}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{new Date(log.timestamp).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<Badge color={getStatusColor(log.status)} size="sm">
|
||||
{log.status}
|
||||
</Badge>
|
||||
</div>
|
||||
{log.error && (
|
||||
<div className="mt-2 text-xs text-red-600 dark:text-red-400">
|
||||
{log.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-4 text-gray-500 dark:text-gray-400">
|
||||
<p>No sync logs available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user