+
{{ log }}
@@ -172,6 +172,15 @@ const startImport = async () => {
error.value = ''
importing.value = true
+
+ // Initialize empty status to show logs area immediately
+ status.value = {
+ running: true,
+ logs: ['Uploading CSV file...'],
+ total: 0,
+ success: 0,
+ errors: 0
+ }
const formData = new FormData()
formData.append('file', file.value)
@@ -184,22 +193,24 @@ const startImport = async () => {
}
})
+ // Update log after successful upload
+ status.value.logs.push('CSV uploaded successfully, starting import...')
startPolling()
} catch (err) {
error.value = err.response?.data?.message || err.message || 'Upload failed'
importing.value = false
+ status.value = null
}
}
-const startPolling = () => {
- pollInterval.value = setInterval(fetchStatus, 1000)
-}
-
const fetchStatus = async () => {
try {
const res = await axios.get('/api/v1/agents/import/status')
status.value = res.data.data
+ // Auto-scroll logs to bottom
+ scrollLogsToBottom()
+
if (!status.value.running) {
stopPolling()
importing.value = false
@@ -212,6 +223,22 @@ const fetchStatus = async () => {
}
}
+const scrollLogsToBottom = () => {
+ // Use nextTick to ensure DOM is updated before scrolling
+ import('vue').then(({ nextTick }) => {
+ nextTick(() => {
+ const logsContainer = document.querySelector('.logs-scroll-container')
+ if (logsContainer) {
+ logsContainer.scrollTop = logsContainer.scrollHeight
+ }
+ })
+ })
+}
+
+const startPolling = () => {
+ pollInterval.value = setInterval(fetchStatus, 1000)
+}
+
const stopPolling = () => {
if (pollInterval.value) {
clearInterval(pollInterval.value)