wp-igny8 debug
This commit is contained in:
alorig
@@ -1,7 +1,11 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||
import PageMeta from "../../components/common/PageMeta";
|
||||
import ComponentCard from "../../components/common/ComponentCard";
|
||||
import SiteAndSectorSelector from "../../components/common/SiteAndSectorSelector";
|
||||
import WordPressIntegrationDebug from "./WordPressIntegrationDebug";
|
||||
import { API_BASE_URL, fetchAPI } from "../../services/api";
|
||||
import { useSiteStore } from "../../store/siteStore";
|
||||
import { useToast } from "../../components/ui/toast/ToastContainer";
|
||||
|
||||
interface HealthCheck {
|
||||
name: string;
|
||||
@@ -10,6 +14,9 @@ interface HealthCheck {
|
||||
message?: string;
|
||||
details?: string;
|
||||
lastChecked?: string;
|
||||
step?: string;
|
||||
payloadKeys?: string[];
|
||||
responseCode?: number;
|
||||
}
|
||||
|
||||
interface ModuleHealth {
|
||||
@@ -18,39 +25,105 @@ interface ModuleHealth {
|
||||
checks: HealthCheck[];
|
||||
}
|
||||
|
||||
interface SyncEvent {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
direction: '📤 IGNY8 → WP' | '📥 WP → IGNY8';
|
||||
trigger: string;
|
||||
contentId?: number;
|
||||
taskId?: number;
|
||||
status: 'success' | 'partial' | 'failed';
|
||||
steps: SyncEventStep[];
|
||||
payload?: any;
|
||||
response?: any;
|
||||
}
|
||||
|
||||
interface SyncEventStep {
|
||||
step: string;
|
||||
file: string;
|
||||
status: 'success' | 'warning' | 'failed' | 'skipped';
|
||||
details: string;
|
||||
error?: string;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
interface DataSyncValidation {
|
||||
field: string;
|
||||
sentByIgny8: boolean;
|
||||
receivedByWP: boolean;
|
||||
storedInWP: boolean;
|
||||
verifiedInWPPost: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface IntegrationHealth {
|
||||
overall: 'healthy' | 'warning' | 'error';
|
||||
lastSyncIgny8ToWP?: string;
|
||||
lastSyncWPToIgny8?: string;
|
||||
lastSiteMetadataCheck?: string;
|
||||
wpApiReachable: boolean;
|
||||
wpStatusEndpoint: boolean;
|
||||
wpMetadataEndpoint: boolean;
|
||||
apiKeyValid: boolean;
|
||||
jwtTokenValid: boolean;
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'healthy': return 'text-green-600 dark:text-green-400';
|
||||
case 'warning': return 'text-yellow-600 dark:text-yellow-400';
|
||||
case 'error': return 'text-red-600 dark:text-red-400';
|
||||
case 'healthy':
|
||||
case 'success': return 'text-green-600 dark:text-green-400';
|
||||
case 'warning':
|
||||
case 'partial': return 'text-yellow-600 dark:text-yellow-400';
|
||||
case 'error':
|
||||
case 'failed': return 'text-red-600 dark:text-red-400';
|
||||
case 'checking': return 'text-blue-600 dark:text-blue-400';
|
||||
case 'skipped': return 'text-gray-600 dark:text-gray-400';
|
||||
default: return 'text-gray-600 dark:text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'healthy': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
|
||||
case 'warning': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
|
||||
case 'error': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
|
||||
case 'healthy':
|
||||
case 'success': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
|
||||
case 'warning':
|
||||
case 'partial': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
|
||||
case 'error':
|
||||
case 'failed': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
|
||||
case 'checking': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
|
||||
case 'skipped': return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
|
||||
default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'healthy': return '✓';
|
||||
case 'warning': return '⚠';
|
||||
case 'error': return '✗';
|
||||
case 'healthy':
|
||||
case 'success': return '✓';
|
||||
case 'warning':
|
||||
case 'partial': return '⚠';
|
||||
case 'error':
|
||||
case 'failed': return '✗';
|
||||
case 'checking': return '⟳';
|
||||
case 'skipped': return '—';
|
||||
default: return '?';
|
||||
}
|
||||
};
|
||||
|
||||
export default function DebugStatus() {
|
||||
const [moduleHealths, setModuleHealths] = useState<ModuleHealth[]>([]);
|
||||
const { activeSite } = useSiteStore();
|
||||
const toast = useToast();
|
||||
|
||||
// Tab navigation state
|
||||
const [activeTab, setActiveTab] = useState<'system-health' | 'wp-integration'>('system-health');
|
||||
|
||||
// Debug state
|
||||
const [debugEnabled, setDebugEnabled] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Data state
|
||||
const [moduleHealths, setModuleHealths] = useState<ModuleHealth[]>([]);
|
||||
|
||||
// Helper to get auth token
|
||||
const getAuthToken = () => {
|
||||
@@ -70,8 +143,14 @@ export default function DebugStatus() {
|
||||
return token;
|
||||
};
|
||||
|
||||
// Helper to make authenticated API calls
|
||||
// Helper to make authenticated API calls with debug awareness
|
||||
const apiCall = async (path: string, method: string = 'GET', body?: any) => {
|
||||
// Skip API calls if debug is disabled (unless it's essential)
|
||||
if (!debugEnabled && !path.includes('/debug-status/')) {
|
||||
console.log('[DEBUG] Skipping API call - debug disabled:', path);
|
||||
return { response: null, data: null };
|
||||
}
|
||||
|
||||
const token = getAuthToken();
|
||||
const headers: HeadersInit = {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -91,11 +170,266 @@ export default function DebugStatus() {
|
||||
options.body = JSON.stringify(body);
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}${path}`, options);
|
||||
const data = await response.json();
|
||||
return { response, data };
|
||||
try {
|
||||
if (debugEnabled) {
|
||||
console.log('[DEBUG] API Call:', method, path, body ? { body } : {});
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}${path}`, options);
|
||||
const data = await response.json();
|
||||
|
||||
if (debugEnabled) {
|
||||
console.log('[DEBUG] API Response:', response.status, data);
|
||||
}
|
||||
|
||||
return { response, data };
|
||||
} catch (error) {
|
||||
if (debugEnabled) {
|
||||
console.error('[DEBUG] API Error:', error);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle debug mode
|
||||
const toggleDebugMode = async (enabled: boolean) => {
|
||||
if (!activeSite) {
|
||||
toast.error('Please select a site first');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Set local debug state first for immediate UI response
|
||||
setDebugEnabled(enabled);
|
||||
|
||||
if (enabled) {
|
||||
console.log('[DEBUG] 🎯 Debug mode ENABLED for site:', activeSite.name);
|
||||
toast.success('Debug mode enabled - verbose logging started');
|
||||
|
||||
// Start polling for updates
|
||||
startPolling();
|
||||
|
||||
// Trigger debug mode on WordPress plugin if integrated
|
||||
if (activeSite.id) {
|
||||
await apiCall(`/integration/integrations/${activeSite.id}/trigger-debug/`, 'POST', {
|
||||
debug_enabled: true
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log('[DEBUG] 🔒 Debug mode DISABLED');
|
||||
toast.info('Debug mode disabled - reduced logging');
|
||||
|
||||
// Stop polling
|
||||
stopPolling();
|
||||
|
||||
// Disable debug on WordPress
|
||||
if (activeSite.id) {
|
||||
await apiCall(`/integration/integrations/${activeSite.id}/trigger-debug/`, 'POST', {
|
||||
debug_enabled: false
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Failed to toggle debug mode:', error);
|
||||
toast.error('Failed to toggle debug mode');
|
||||
setDebugEnabled(!enabled); // Revert
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Start polling for debug data
|
||||
const startPolling = () => {
|
||||
if (pollingInterval) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (debugEnabled && activeSite) {
|
||||
loadDebugData();
|
||||
}
|
||||
}, 5000); // Poll every 5 seconds when debug is enabled
|
||||
|
||||
setPollingInterval(interval);
|
||||
console.log('[DEBUG] ⏰ Started polling for debug updates');
|
||||
};
|
||||
|
||||
// Stop polling
|
||||
const stopPolling = () => {
|
||||
if (pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
setPollingInterval(null);
|
||||
console.log('[DEBUG] ⏸️ Stopped polling');
|
||||
}
|
||||
};
|
||||
|
||||
// Load all debug data
|
||||
const loadDebugData = useCallback(async () => {
|
||||
if (!activeSite || !debugEnabled) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('[DEBUG] 📊 Loading debug data for site:', activeSite.name);
|
||||
|
||||
// Load integration health
|
||||
await loadIntegrationHealth();
|
||||
|
||||
// Load sync events
|
||||
await loadSyncEvents();
|
||||
|
||||
// Load validation data
|
||||
await loadDataValidation();
|
||||
|
||||
// Load module health (existing logic)
|
||||
await checkAllModules();
|
||||
|
||||
console.log('[DEBUG] ✅ Debug data loaded successfully');
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] ❌ Failed to load debug data:', error);
|
||||
if (debugEnabled) {
|
||||
toast.error('Failed to load debug data');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [activeSite, debugEnabled]);
|
||||
|
||||
// Load integration health
|
||||
const loadIntegrationHealth = async () => {
|
||||
if (!activeSite) return;
|
||||
|
||||
try {
|
||||
const { data } = await apiCall(`/integration/integrations/${activeSite.id}/debug-status/`);
|
||||
|
||||
if (data?.success) {
|
||||
setIntegrationHealth(data.data.health);
|
||||
console.log('[DEBUG] 💚 Integration health loaded');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Failed to load integration health:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Load sync events
|
||||
const loadSyncEvents = async () => {
|
||||
if (!activeSite) return;
|
||||
|
||||
try {
|
||||
const { data } = await apiCall(`/integration/integrations/${activeSite.id}/debug-status/?include_events=true`);
|
||||
|
||||
if (data?.success && data.data?.events) {
|
||||
setSyncEvents(data.data.events);
|
||||
console.log('[DEBUG] 📜 Loaded', data.data.events.length, 'sync events');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Failed to load sync events:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Load data validation matrix
|
||||
const loadDataValidation = async () => {
|
||||
if (!activeSite) return;
|
||||
|
||||
try {
|
||||
const { data } = await apiCall(`/integration/integrations/${activeSite.id}/debug-status/?include_validation=true`);
|
||||
|
||||
if (data?.success && data.data?.validation) {
|
||||
setDataValidation(data.data.validation);
|
||||
console.log('[DEBUG] 🧩 Loaded data validation matrix');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Failed to load data validation:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Interactive tools
|
||||
const testConnection = async () => {
|
||||
if (!activeSite) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('[DEBUG] 🔧 Testing connection to WordPress...');
|
||||
|
||||
const { data } = await apiCall(`/integration/integrations/${activeSite.id}/test-connection/`, 'POST');
|
||||
|
||||
if (data?.success) {
|
||||
toast.success('Connection test successful');
|
||||
await loadIntegrationHealth(); // Refresh health data
|
||||
} else {
|
||||
toast.error('Connection test failed: ' + data?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Connection test error:', error);
|
||||
toast.error('Connection test failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resyncSiteMetadata = async () => {
|
||||
if (!activeSite) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('[DEBUG] 🔄 Re-syncing site metadata...');
|
||||
|
||||
const { data } = await apiCall(`/integration/integrations/${activeSite.id}/resync-metadata/`, 'POST');
|
||||
|
||||
if (data?.success) {
|
||||
toast.success('Site metadata re-synced successfully');
|
||||
await loadDebugData(); // Refresh all data
|
||||
} else {
|
||||
toast.error('Re-sync failed: ' + data?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Metadata resync error:', error);
|
||||
toast.error('Metadata re-sync failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const validatePostSync = async (taskId?: number) => {
|
||||
if (!activeSite) return;
|
||||
|
||||
const id = taskId || prompt('Enter Task ID to validate:');
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('[DEBUG] 🔍 Validating post sync for task:', id);
|
||||
|
||||
const { data } = await apiCall(`/integration/integrations/${activeSite.id}/validate-content/${id}/`);
|
||||
|
||||
if (data?.success) {
|
||||
toast.success('Post validation completed');
|
||||
setDataValidation(data.data.validation || []);
|
||||
} else {
|
||||
toast.error('Validation failed: ' + data?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Post validation error:', error);
|
||||
toast.error('Post validation failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Effects
|
||||
useEffect(() => {
|
||||
// Load initial data when site changes
|
||||
if (activeSite && debugEnabled) {
|
||||
loadDebugData();
|
||||
}
|
||||
}, [activeSite, debugEnabled]);
|
||||
|
||||
useEffect(() => {
|
||||
// Cleanup polling on unmount
|
||||
return () => {
|
||||
stopPolling();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Check database schema field mappings (the issues we just fixed)
|
||||
const checkDatabaseSchemaMapping = useCallback(async (): Promise<HealthCheck> => {
|
||||
try {
|
||||
@@ -569,7 +903,38 @@ export default function DebugStatus() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Overall Health Summary */}
|
||||
{/* Tab Navigation */}
|
||||
<div className="bg-white dark:bg-gray-800 shadow rounded-lg">
|
||||
<div className="border-b border-gray-200 dark:border-gray-700">
|
||||
<nav className="flex space-x-8 px-6">
|
||||
<button
|
||||
onClick={() => setActiveTab('system-health')}
|
||||
className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
|
||||
activeTab === 'system-health'
|
||||
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
System Health
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('wp-integration')}
|
||||
className={`py-4 px-2 border-b-2 font-medium text-sm transition-colors ${
|
||||
activeTab === 'wp-integration'
|
||||
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
IGNY8 ↔ WordPress
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'system-health' ? (
|
||||
<div className="space-y-6">
|
||||
{/* Overall Health Summary */}
|
||||
<ComponentCard
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -750,6 +1115,11 @@ export default function DebugStatus() {
|
||||
</div>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
) : (
|
||||
// WordPress Integration Debug Tab
|
||||
<WordPressIntegrationDebug />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user