wallabicher/web/frontend/src/views/Logs.vue

<template>
  <div>
    <div class="flex flex-col gap-4 mb-4 sm:mb-6">
      <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Logs del Sistema</h1>
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:space-x-4">
          <select v-model="logLevel" @change="loadLogs(followLatestLog)" class="input text-sm sm:text-base" style="width: 100%; min-width: 160px;">
            <option value="">Todos los niveles</option>
            <option value="INFO">INFO</option>
            <option value="WARNING">WARNING</option>
            <option value="ERROR">ERROR</option>
            <option value="DEBUG">DEBUG</option>
          </select>
          <button @click="loadLogs(followLatestLog)" class="btn btn-primary text-sm sm:text-base whitespace-nowrap">
            Actualizar
          </button>
        </div>
      </div>
      
      <!-- Panel de configuración de auto-refresh -->
      <div class="card p-4 bg-gray-50 border border-gray-200">
        <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
          <label class="flex items-center gap-2 cursor-pointer">
            <input 
              type="checkbox" 
              v-model="autoRefresh" 
              @change="handleAutoRefreshChange"
              class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
            >
            <span class="font-medium text-gray-700">Auto-refresh</span>
          </label>
          
          <div v-if="autoRefresh" class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 flex-1">
            <div class="flex items-center gap-2">
              <label class="text-sm text-gray-600 whitespace-nowrap">Intervalo:</label>
              <input 
                type="number" 
                v-model.number="refreshIntervalSeconds" 
                @change="updateRefreshInterval"
                min="1" 
                max="300"
                class="input text-sm w-20"
              >
              <span class="text-sm text-gray-600 whitespace-nowrap">segundos</span>
            </div>
            
            <label class="flex items-center gap-2 cursor-pointer">
              <input 
                type="checkbox" 
                v-model="followLatestLog" 
                class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
              >
              <span class="text-sm text-gray-700">Seguir último log</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="card p-2 sm:p-6">
      <div 
        ref="logsContainer"
        class="bg-gray-900 text-green-400 font-mono text-xs sm:text-sm p-3 sm:p-4 rounded-lg overflow-x-auto max-h-[400px] sm:max-h-[600px] overflow-y-auto"
      >
        <div v-if="loading" class="text-center py-8">
          <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-green-400"></div>
          <p class="mt-2 text-gray-400">Cargando logs...</p>
        </div>
        <div v-else-if="filteredLogs.length === 0" class="text-gray-500">
          No hay logs disponibles
        </div>
        <div v-else>
          <div
            v-for="(log, index) in filteredLogs"
            :key="index"
            class="mb-1"
            :class="getLogColor(log)"
          >
            {{ log }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
import api from '../services/api';

const logs = ref([]);
const loading = ref(true);
const logLevel = ref('');
const autoRefresh = ref(false);
const refreshIntervalSeconds = ref(5);
const followLatestLog = ref(true);
const logsContainer = ref(null);
let refreshInterval = null;

const filteredLogs = computed(() => {
  if (!logLevel.value) {
    return logs.value;
  }
  return logs.value.filter(log => log.includes(logLevel.value));
});

function getLogColor(log) {
  if (log.includes('ERROR')) return 'text-red-400';
  if (log.includes('WARNING')) return 'text-yellow-400';
  if (log.includes('INFO')) return 'text-blue-400';
  if (log.includes('DEBUG')) return 'text-gray-400';
  return 'text-green-400';
}

async function loadLogs(shouldScroll = null) {
  // Si shouldScroll es null, usar la configuración de followLatestLog
  const shouldAutoScroll = shouldScroll !== null ? shouldScroll : followLatestLog.value;
  
  loading.value = true;
  try {
    const data = await api.getLogs(500);
    logs.value = data.logs || [];
    // Hacer scroll al inicio (arriba) donde están los logs más recientes
    // Solo si followLatestLog está activado o si se fuerza
    await nextTick();
    if (logsContainer.value && shouldAutoScroll) {
      logsContainer.value.scrollTop = 0;
    }
  } catch (error) {
    console.error('Error cargando logs:', error);
  } finally {
    loading.value = false;
  }
}

function handleAutoRefreshChange() {
  updateRefreshInterval();
}

function updateRefreshInterval() {
  // Limpiar intervalo anterior
  if (refreshInterval) {
    clearInterval(refreshInterval);
    refreshInterval = null;
  }
  
  // Crear nuevo intervalo si auto-refresh está activado
  if (autoRefresh.value && refreshIntervalSeconds.value > 0) {
    refreshInterval = setInterval(() => {
      if (autoRefresh.value) {
        // Usar followLatestLog para determinar si hacer scroll
        loadLogs(followLatestLog.value);
      }
    }, refreshIntervalSeconds.value * 1000);
  }
}

// Hacer scroll al inicio cuando cambian los logs filtrados (solo si followLatestLog está activado y está cerca del inicio)
watch(filteredLogs, async () => {
  await nextTick();
  if (logsContainer.value && followLatestLog.value && logsContainer.value.scrollTop < 10) {
    // Solo auto-scroll si el usuario está cerca del inicio y sigue el último log
    logsContainer.value.scrollTop = 0;
  }
});

function handleWSMessage(event) {
  const data = event.detail;
  if (data.type === 'logs_updated') {
    // Al recibir actualización de WebSocket, cargar logs con seguimiento si está activado
    loadLogs(followLatestLog.value);
  }
}

onMounted(() => {
  loadLogs(true); // Primera carga siempre hace scroll
  window.addEventListener('ws-message', handleWSMessage);
  
  // Inicializar auto-refresh si está activado
  if (autoRefresh.value) {
    updateRefreshInterval();
  }
});

onUnmounted(() => {
  if (refreshInterval) {
    clearInterval(refreshInterval);
  }
  window.removeEventListener('ws-message', handleWSMessage);
});
</script>