Browse Source

feat(frontend): add modal dialog to inspect full run error logs

master
PouyaKhajavi 1 day ago
parent
commit
2672584ae1
  1. 32
      frontend/src/App.jsx

32
frontend/src/App.jsx

@ -24,6 +24,7 @@ function App() {
const [ads, setAds] = useState([]); const [ads, setAds] = useState([]);
const [logs, setLogs] = useState([]); const [logs, setLogs] = useState([]);
const [health, setHealth] = useState({ database: 'loading', redis: 'loading' }); const [health, setHealth] = useState({ database: 'loading', redis: 'loading' });
const [errorLogModalContent, setErrorLogModalContent] = useState(null);
// Loading states // Loading states
const [loadingCrawlers, setLoadingCrawlers] = useState(true); const [loadingCrawlers, setLoadingCrawlers] = useState(true);
@ -637,7 +638,11 @@ function App() {
<td className={`px-5 py-4 border-b border-white/5 font-en ${run.ads_flagged_count > 0 ? 'text-purple-400 font-bold' : ''}`}> <td className={`px-5 py-4 border-b border-white/5 font-en ${run.ads_flagged_count > 0 ? 'text-purple-400 font-bold' : ''}`}>
{run.ads_flagged_count} {run.ads_flagged_count}
</td> </td>
<td className="px-5 py-4 border-b border-white/5 max-w-[180px] overflow-hidden text-ellipsis whitespace-nowrap" title={run.error_log}>
<td
className={`px-5 py-4 border-b border-white/5 max-w-[180px] overflow-hidden text-ellipsis whitespace-nowrap ${run.error_log ? 'cursor-pointer hover:text-purple-400 transition-colors underline decoration-dotted' : ''}`}
title={run.error_log || ''}
onClick={() => run.error_log && setErrorLogModalContent(run.error_log)}
>
{run.error_log || '-'} {run.error_log || '-'}
</td> </td>
</tr> </tr>
@ -813,6 +818,31 @@ function App() {
</div> </div>
</div> </div>
{/* Error Log Modal */}
{errorLogModalContent && (
<div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 transition-opacity duration-200">
<div className="bg-slate-900 border border-white/5 rounded-2xl w-[600px] max-w-[95%] max-h-[90vh] shadow-[0_20px_50px_rgba(0,0,0,0.6)] flex flex-col scale-100 transition-transform duration-200">
<div className="flex items-center justify-between p-5 border-b border-white/5">
<h3 className="text-base font-bold text-white">جزئیات خطا و لاگ اجرا</h3>
<button className="bg-transparent border-none text-gray-400 cursor-pointer flex items-center hover:text-white" onClick={() => setErrorLogModalContent(null)}>
<X className="w-5 h-5" />
</button>
</div>
<div className="p-6 overflow-y-auto flex flex-col gap-4">
<div className="bg-black/30 border border-white/5 p-4 rounded-xl text-right">
<span className="text-xs text-gray-400 font-medium block mb-2">متن کامل خطا / پیام سیستم:</span>
<pre className="bg-black/50 border border-white/5 p-4 rounded-lg text-xs font-mono text-rose-300 whitespace-pre-wrap break-all direction-ltr text-left overflow-y-auto max-h-[50vh]">
{errorLogModalContent}
</pre>
</div>
</div>
<div className="flex justify-end p-5 border-t border-white/5">
<button className="inline-flex items-center justify-center border border-white/5 rounded-lg px-5 py-2.5 text-sm font-medium cursor-pointer transition-all duration-200 bg-white/5 text-white hover:bg-white/10" onClick={() => setErrorLogModalContent(null)}>بستن</button>
</div>
</div>
</div>
)}
</div> </div>
); );
} }

Loading…
Cancel
Save