From 3f9caff33b850ed12ebd4dccaf34a21170a0ed9a Mon Sep 17 00:00:00 2001 From: LordMathis Date: Wed, 6 Aug 2025 19:07:25 +0200 Subject: [PATCH] Refactor log fetching to use instancesApi --- webui/src/components/LogDialog.tsx | 65 ++++++++++++++---------------- 1 file changed, 31 insertions(+), 34 deletions(-) diff --git a/webui/src/components/LogDialog.tsx b/webui/src/components/LogDialog.tsx index f68c756..13a79bb 100644 --- a/webui/src/components/LogDialog.tsx +++ b/webui/src/components/LogDialog.tsx @@ -11,6 +11,7 @@ import { DialogTitle, } from '@/components/ui/dialog' import { Badge } from '@/components/ui/badge' +import { instancesApi } from '@/lib/api' import { RefreshCw, Download, @@ -46,48 +47,44 @@ const LogsDialog: React.FC = ({ const refreshIntervalRef = useRef(null) // Fetch logs function - const fetchLogs = async (lines?: number) => { - if (!instanceName) return - - setLoading(true) - setError(null) - - try { - const params = lines ? `?lines=${lines}` : '' - const response = await fetch(`/api/v1/instances/${instanceName}/logs${params}`) + const fetchLogs = React.useCallback( + async (lines?: number) => { + if (!instanceName) return - if (!response.ok) { - throw new Error(`Failed to fetch logs: ${response.status}`) + setLoading(true) + setError(null) + + try { + const logText = await instancesApi.getLogs(instanceName, lines) + setLogs(logText) + + // Auto-scroll to bottom + setTimeout(() => { + if (logContainerRef.current) { + logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight + } + }, 100) + } catch (err) { + setError(err instanceof Error ? err.message : 'Failed to fetch logs') + } finally { + setLoading(false) } - - const logText = await response.text() - setLogs(logText) - - // Auto-scroll to bottom - setTimeout(() => { - if (logContainerRef.current) { - logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight - } - }, 100) - } catch (err) { - setError(err instanceof Error ? err.message : 'Failed to fetch logs') - } finally { - setLoading(false) - } - } + }, + [instanceName] + ) // Initial load when dialog opens useEffect(() => { if (open && instanceName) { - fetchLogs(lineCount) + void fetchLogs(lineCount) } - }, [open, instanceName]) + }, [open, instanceName, fetchLogs, lineCount]) // Auto-refresh effect useEffect(() => { if (autoRefresh && isRunning && open) { refreshIntervalRef.current = setInterval(() => { - fetchLogs(lineCount) + void fetchLogs(lineCount) }, 2000) // Refresh every 2 seconds } else { if (refreshIntervalRef.current) { @@ -101,7 +98,7 @@ const LogsDialog: React.FC = ({ clearInterval(refreshIntervalRef.current) } } - }, [autoRefresh, isRunning, open, lineCount]) + }, [autoRefresh, isRunning, open, lineCount, fetchLogs]) // Copy logs to clipboard const copyLogs = async () => { @@ -135,7 +132,7 @@ const LogsDialog: React.FC = ({ // Apply new line count const applyLineCount = () => { - fetchLogs(lineCount) + void fetchLogs(lineCount) setShowSettings(false) } @@ -198,7 +195,7 @@ const LogsDialog: React.FC = ({