roa2web-service-auto/src/modules/reports/views/ServerLogsView.vue

<template>
  <div class="server-logs-view">
    <div class="stats-header">
      <h1>
        <i class="pi pi-file-edit"></i>
        Server Logs
      </h1>
      <div class="actions">
        <Dropdown
          v-model="selectedFile"
          :options="logFiles"
          optionLabel="label"
          optionValue="value"
          placeholder="Select log file"
          class="log-file-select"
        />
        <InputText
          v-model="filterText"
          placeholder="Filter (e.g., ocr, error)"
          class="filter-input"
          @keyup.enter="loadLogs"
        />
        <Dropdown
          v-model="linesCount"
          :options="linesOptions"
          optionLabel="label"
          optionValue="value"
          class="lines-select"
        />
        <Button
          label="Refresh"
          icon="pi pi-refresh"
          @click="loadLogs"
          :loading="loading"
        />
        <Button
          label="Auto"
          :icon="autoRefresh ? 'pi pi-pause' : 'pi pi-play'"
          :severity="autoRefresh ? 'warning' : 'secondary'"
          @click="toggleAutoRefresh"
        />
      </div>
    </div>

    <Message v-if="error" severity="error" :closable="true" @close="error = null">
      {{ error }}
    </Message>

    <Card class="logs-card">
      <template #title>
        <div class="logs-title">
          <span>{{ selectedFile === 'backend-stderr' ? 'Errors & Warnings' : 'Info Logs' }}</span>
          <Tag :value="`${logs.length} lines`" severity="info" />
          <Tag v-if="debugInfo.file_size_kb !== null" :value="`${debugInfo.file_size_kb} KB`" severity="secondary" class="ml-2" />
          <span v-if="autoRefresh" class="auto-refresh-indicator">
            <i class="pi pi-spin pi-sync"></i> Auto-refresh: {{ autoRefreshInterval }}s
          </span>
        </div>
        <div v-if="debugInfo.logs_path" class="logs-path">
          <small><i class="pi pi-folder"></i> {{ debugInfo.logs_path }}</small>
        </div>
      </template>
      <template #content>
        <div v-if="loading && logs.length === 0" class="loading-container">
          <ProgressSpinner />
          <p>Loading logs...</p>
        </div>
        <div v-else-if="logs.length === 0" class="empty-logs">
          <i class="pi pi-inbox"></i>
          <p>No log entries found</p>
        </div>
        <div v-else class="logs-container" ref="logsContainer">
          <pre class="logs-content"><code
            v-for="(line, index) in logs"
            :key="index"
            :style="getLineStyle(line)"
          >{{ line }}</code></pre>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import Button from 'primevue/button'
import Card from 'primevue/card'
import Dropdown from 'primevue/dropdown'
import InputText from 'primevue/inputtext'
import Message from 'primevue/message'
import ProgressSpinner from 'primevue/progressspinner'
import Tag from 'primevue/tag'
import axios from 'axios'

// System API - endpoint separat de reports
const systemApi = axios.create({
  baseURL: import.meta.env.BASE_URL + 'api/system',
  headers: { 'Content-Type': 'application/json' }
})

// Add auth token
systemApi.interceptors.request.use((config) => {
  const token = localStorage.getItem('access_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// State
const logs = ref([])
const loading = ref(false)
const error = ref(null)
const selectedFile = ref('backend-stderr')
const filterText = ref('')
const linesCount = ref(100)
const autoRefresh = ref(false)
const autoRefreshInterval = ref(5)
const logsContainer = ref(null)
const debugInfo = ref({
  logs_path: null,
  file_exists: true,
  file_size_kb: null
})

let refreshTimer = null

// Options
const logFiles = [
  { label: 'Errors (stderr)', value: 'backend-stderr' },
  { label: 'Info (stdout)', value: 'backend-stdout' }
]

const linesOptions = [
  { label: '50 lines', value: 50 },
  { label: '100 lines', value: 100 },
  { label: '200 lines', value: 200 },
  { label: '500 lines', value: 500 }
]

// Methods
const loadLogs = async () => {
  loading.value = true
  error.value = null

  try {
    const params = {
      file: selectedFile.value,
      lines: linesCount.value
    }
    if (filterText.value) {
      params.filter = filterText.value
    }

    console.log('[ServerLogs] Fetching logs from:', systemApi.defaults.baseURL + '/logs', params)
    const response = await systemApi.get('/logs', { params })
    console.log('[ServerLogs] Response:', response.data)

    logs.value = response.data.lines || []
    debugInfo.value = {
      logs_path: response.data.logs_path || null,
      file_exists: response.data.file_exists ?? true,
      file_size_kb: response.data.file_size_kb ?? null
    }

    // Scroll to bottom
    await nextTick()
    if (logsContainer.value) {
      logsContainer.value.scrollTop = logsContainer.value.scrollHeight
    }
  } catch (err) {
    console.error('[ServerLogs] Failed to load logs:', err)
    console.error('[ServerLogs] Error details:', err.response?.data, err.message)
    error.value = err.response?.data?.detail || err.message || 'Failed to load logs - check console for details'
  } finally {
    loading.value = false
  }
}

const getLineStyle = (line) => {
  const lineLower = line.toLowerCase()
  const baseStyle = {
    display: 'block',
    padding: '3px 8px',
    borderRadius: '2px',
    fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
    fontSize: '0.8125rem',
    lineHeight: '1.6'
  }

  if (lineLower.includes('error') || lineLower.includes('exception') || lineLower.includes('failed')) {
    return { ...baseStyle, color: '#b91c1c', backgroundColor: 'rgba(185, 28, 28, 0.1)', fontWeight: '600' }
  }
  if (lineLower.includes('warning') || lineLower.includes('warn')) {
    return { ...baseStyle, color: '#b45309', backgroundColor: 'rgba(180, 83, 9, 0.1)', fontWeight: '500' }
  }
  if (lineLower.includes('success') || lineLower.includes('completed')) {
    return { ...baseStyle, color: '#047857', backgroundColor: 'rgba(4, 120, 87, 0.1)' }
  }
  // Default: pure black text on light background
  return { ...baseStyle, color: '#000000', backgroundColor: 'rgba(0, 0, 0, 0.02)' }
}

const toggleAutoRefresh = () => {
  autoRefresh.value = !autoRefresh.value
  if (autoRefresh.value) {
    startAutoRefresh()
  } else {
    stopAutoRefresh()
  }
}

const startAutoRefresh = () => {
  stopAutoRefresh()
  refreshTimer = setInterval(() => {
    loadLogs()
  }, autoRefreshInterval.value * 1000)
}

const stopAutoRefresh = () => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
    refreshTimer = null
  }
}

// Watchers
watch(selectedFile, () => {
  loadLogs()
})

watch(linesCount, () => {
  loadLogs()
})

// Lifecycle
onMounted(() => {
  loadLogs()
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style scoped>
.server-logs-view {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.stats-header h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.5rem;
  color: var(--color-text);
}

.actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}

.log-file-select {
  min-width: 150px;
}

.filter-input {
  min-width: 180px;
}

.lines-select {
  min-width: 120px;
}

.logs-card {
  margin-top: var(--space-md);
}

.logs-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.logs-path {
  margin-top: var(--space-xs);
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.75rem;
}

.logs-path i {
  margin-right: var(--space-xs);
}

.ml-2 {
  margin-left: 0.5rem;
}

.auto-refresh-indicator {
  font-size: 0.875rem;
  color: var(--color-warning);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl);
  color: var(--color-text-secondary);
}

.empty-logs {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl);
  color: var(--color-text-secondary);
}

.empty-logs i {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.logs-container {
  max-height: 600px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.logs-content {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  background: transparent;
}

/* Responsive */
@media (max-width: 768px) {
  .stats-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .actions {
    width: 100%;
  }

  .log-file-select,
  .filter-input,
  .lines-select {
    flex: 1;
    min-width: 100px;
  }
}
</style>