@innertia-solutions/innertia-nuxt 0.1.53 → 0.1.55

package/components/Observability/Dashboard.vue

@@ -0,0 +1,102 @@
+<script setup>
+// Dashboard de base de datos con valor: gauges (cache hit, conexiones), cards
+// (deadlocks, rollbacks), y tablas (queries lentas, índices sin usar, tablas con
+// más dead tuples). Cada sección pide su endpoint (lazy) y refresca cada ~10s.
+const api = useApi()
+const REFETCH = 10_000
+
+const overview    = useQuery({ queryKey: ['obs-db', 'overview'],    queryFn: () => api.get('platform/observability/database/overview'),    refetchInterval: REFETCH })
+const connections = useQuery({ queryKey: ['obs-db', 'connections'], queryFn: () => api.get('platform/observability/database/connections'), refetchInterval: REFETCH })
+const queries     = useQuery({ queryKey: ['obs-db', 'queries'],     queryFn: () => api.get('platform/observability/database/queries'),     refetchInterval: REFETCH })
+const indexes     = useQuery({ queryKey: ['obs-db', 'indexes'],     queryFn: () => api.get('platform/observability/database/indexes'),     refetchInterval: REFETCH })
+const tables      = useQuery({ queryKey: ['obs-db', 'tables'],      queryFn: () => api.get('platform/observability/database/tables'),      refetchInterval: REFETCH })
+
+const connPercent = computed(() => {
+  const d = connections.data.value
+  if (!d || d.total == null || !d.max) return null
+  return Math.round((d.total / d.max) * 100)
+})
+
+function fmtBytes(bytes) {
+  if (bytes == null) return '—'
+  const u = ['B', 'KB', 'MB', 'GB', 'TB']; let n = Number(bytes), i = 0
+  while (n >= 1024 && i < u.length - 1) { n /= 1024; i++ }
+  return `${n.toFixed(1)} ${u[i]}`
+}
+function fmtMs(ms) { return ms == null ? '—' : `${Number(ms).toLocaleString('es-CL')} ms` }
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Gauges + cards de salud -->
+    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <Observability.Gauge label="Cache hit" :percent="overview.data.value?.cache_hit_ratio ?? null" />
+      <Observability.Gauge label="Conexiones" :percent="connPercent" />
+      <Observability.MetricCard label="Deadlocks" :value="overview.data.value?.deadlocks ?? '—'"
+        :tone="(overview.data.value?.deadlocks ?? 0) > 0 ? 'bad' : 'good'" />
+      <Observability.MetricCard label="Rollbacks" :value="overview.data.value?.rollbacks ?? '—'"
+        :sublabel="`Tamaño BD: ${fmtBytes(overview.data.value?.database_bytes)}`" />
+    </div>
+
+    <!-- Conexiones por estado -->
+    <div v-if="connections.data.value" class="flex flex-wrap gap-2">
+      <span v-for="(n, state) in connections.data.value.by_state" :key="state"
+        class="rounded-full border border-card-line bg-card px-2.5 py-1 text-xs text-muted-foreground">
+        {{ state }}: <span class="font-semibold text-foreground">{{ n }}</span>
+      </span>
+      <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-xs text-muted-foreground">
+        total: <span class="font-semibold text-foreground">{{ connections.data.value.total }}</span> / {{ connections.data.value.max ?? '—' }}
+      </span>
+    </div>
+
+    <!-- Queries lentas -->
+    <section>
+      <h3 class="mb-2 text-sm font-semibold text-foreground">Queries más lentas</h3>
+      <div v-if="queries.data.value && !queries.data.value.available"
+        class="rounded-card border border-amber-200 bg-amber-50 p-3 text-xs text-amber-700 dark:border-amber-800/50 dark:bg-amber-900/20 dark:text-amber-400">
+        {{ queries.data.value.reason }}
+      </div>
+      <table v-else class="w-full text-sm">
+        <thead><tr class="text-left text-muted-foreground">
+          <th class="py-1">Query</th><th class="py-1">Llamadas</th><th class="py-1">Media</th><th class="py-1">Total</th>
+        </tr></thead>
+        <tbody>
+          <tr v-for="q in queries.data.value?.top ?? []" :key="q.id" class="border-t border-card-line">
+            <td class="py-1 font-mono text-xs">{{ q.query }}</td>
+            <td class="py-1">{{ Number(q.calls).toLocaleString('es-CL') }}</td>
+            <td class="py-1">{{ fmtMs(q.mean_ms) }}</td>
+            <td class="py-1">{{ fmtMs(q.total_ms) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <!-- Índices sin usar + tablas con dead tuples -->
+    <div class="grid gap-6 lg:grid-cols-2">
+      <section>
+        <h3 class="mb-2 text-sm font-semibold text-foreground">Índices sin usar</h3>
+        <table class="w-full text-sm">
+          <thead><tr class="text-left text-muted-foreground"><th class="py-1">Índice</th><th class="py-1">Tabla</th><th class="py-1">Tamaño</th></tr></thead>
+          <tbody>
+            <tr v-for="ix in indexes.data.value?.unused ?? []" :key="ix.index" class="border-t border-card-line">
+              <td class="py-1 font-mono text-xs">{{ ix.index }}</td><td class="py-1">{{ ix.table }}</td><td class="py-1">{{ fmtBytes(ix.bytes) }}</td>
+            </tr>
+            <tr v-if="!(indexes.data.value?.unused?.length)"><td colspan="3" class="py-2 text-xs text-muted-foreground">Sin índices sin usar 🎉</td></tr>
+          </tbody>
+        </table>
+      </section>
+      <section>
+        <h3 class="mb-2 text-sm font-semibold text-foreground">Tablas con más dead tuples</h3>
+        <table class="w-full text-sm">
+          <thead><tr class="text-left text-muted-foreground"><th class="py-1">Tabla</th><th class="py-1">Muertas</th><th class="py-1">Bloat</th><th class="py-1">Tamaño</th></tr></thead>
+          <tbody>
+            <tr v-for="t in tables.data.value?.tables ?? []" :key="t.name" class="border-t border-card-line">
+              <td class="py-1">{{ t.name }}</td><td class="py-1">{{ Number(t.dead).toLocaleString('es-CL') }}</td>
+              <td class="py-1">{{ t.bloat_pct }}%</td><td class="py-1">{{ fmtBytes(t.bytes) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+    </div>
+  </div>
+</template>

package/components/Observability/Errors.vue

@@ -0,0 +1,44 @@
+<script setup>
+const api = useApi()
+const toast = useToast()
+const reloadKey = ref(0)
+
+const columns = [
+  { key: 'last_seen',       label: 'Última vez', sortable: true },
+  { key: 'title',           label: 'Error' },
+  { key: 'exception_class', label: 'Clase' },
+  { key: 'times_seen',      label: 'Veces' },
+  { key: 'status',          label: 'Estado' },
+  { key: 'actions',         label: '' },
+]
+
+const statusLabels = { open: 'Abierto', resolved: 'Resuelto', ignored: 'Ignorado' }
+
+async function setStatus(row, status) {
+  try {
+    await api.post(`platform/observability/errors/${row.id}/status`, { status })
+    toast.success('Estado actualizado.')
+    reloadKey.value++
+  } catch (e) {
+    toast.error(e?.data?.message ?? 'No se pudo cambiar el estado.')
+  }
+}
+</script>
+
+<template>
+  <Table.Standard
+    :key="reloadKey"
+    name="observability-errors"
+    endpoint="platform/observability/errors"
+    :columns="columns"
+    search-placeholder="Buscar error…"
+  >
+    <template #status="{ value }">{{ statusLabels[value] ?? value }}</template>
+    <template #actions="{ row }">
+      <div class="flex gap-2">
+        <button class="text-xs text-muted-foreground hover:text-foreground" @click="setStatus(row, 'resolved')">Resolver</button>
+        <button class="text-xs text-muted-foreground hover:text-foreground" @click="setStatus(row, 'ignored')">Ignorar</button>
+      </div>
+    </template>
+  </Table.Standard>
+</template>

package/components/Observability/Gauge.vue

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+  label:   { type: String, required: true },
+  percent: { type: Number, default: null }, // 0..100 o null
+})
+const series = computed(() => [props.percent == null ? 0 : Math.max(0, Math.min(100, props.percent))])
+const options = computed(() => ({
+  labels: [props.label],
+  plotOptions: { radialBar: { dataLabels: { value: { formatter: (v) => `${Math.round(v)}%` } } } },
+}))
+</script>
+
+<template>
+  <div class="rounded-card border border-card-line bg-card p-2">
+    <Chart v-if="percent != null" type="radialBar" :series="series" :options="options" :height="180" />
+    <div v-else class="flex h-[180px] flex-col items-center justify-center text-muted-foreground">
+      <span class="text-sm">{{ label }}</span>
+      <span class="text-xs">sin datos</span>
+    </div>
+  </div>
+</template>

package/components/Observability/Logs.vue

@@ -0,0 +1,28 @@
+<script setup>
+const props = defineProps({
+  channel: { type: String, default: 'operational' },
+})
+
+const endpoint = computed(() => `platform/observability/logs?channel=${props.channel}`)
+
+const columns = [
+  { key: 'occurred_at', label: 'Fecha', sortable: true },
+  { key: 'level',       label: 'Nivel' },
+  { key: 'message',     label: 'Mensaje' },
+]
+
+const levelOf   = (row) => row?.payload?.level ?? '—'
+const messageOf = (row) => row?.payload?.message ?? '—'
+</script>
+
+<template>
+  <Table.Standard
+    :name="`observability-logs-${channel}`"
+    :endpoint="endpoint"
+    :columns="columns"
+    search-placeholder="Buscar en logs…"
+  >
+    <template #level="{ row }">{{ levelOf(row) }}</template>
+    <template #message="{ row }">{{ messageOf(row) }}</template>
+  </Table.Standard>
+</template>

package/components/Observability/MetricCard.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  label:    { type: String, required: true },
+  value:    { type: [String, Number], default: '—' },
+  sublabel: { type: String, default: '' },
+  tone:     { type: String, default: 'neutral' }, // neutral | good | warn | bad
+})
+const TONE = {
+  neutral: 'text-foreground',
+  good:    'text-emerald-600 dark:text-emerald-400',
+  warn:    'text-amber-600 dark:text-amber-400',
+  bad:     'text-red-600 dark:text-red-400',
+}
+</script>
+
+<template>
+  <div class="rounded-card border border-card-line bg-card p-4">
+    <p class="text-xs text-muted-foreground">{{ label }}</p>
+    <p class="mt-1 text-2xl font-bold" :class="TONE[tone] ?? TONE.neutral">{{ value }}</p>
+    <p v-if="sublabel" class="mt-0.5 text-xs text-muted-foreground">{{ sublabel }}</p>
+  </div>
+</template>

package/components/Observability/Panel.vue

@@ -0,0 +1,32 @@
+<script setup>
+// Panel drop-in de observabilidad: sub-nav interna. Fase 1: BD (Dashboard nuevo),
+// Errores/Logs (componentes existentes), Archivos (placeholder Fase 3).
+const TABS = [
+  { key: 'database', label: 'Base de datos' },
+  { key: 'errors',   label: 'Errores' },
+  { key: 'logs',     label: 'Logs' },
+  { key: 'files',    label: 'Archivos' },
+]
+const active = ref('database')
+</script>
+
+<template>
+  <div class="space-y-5">
+    <nav class="flex gap-1 border-b border-card-line">
+      <button v-for="t in TABS" :key="t.key" type="button" @click="active = t.key"
+        class="px-3 py-2 text-sm font-medium transition-colors -mb-px border-b-2"
+        :class="active === t.key ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'">
+        {{ t.label }}
+      </button>
+    </nav>
+
+    <div v-show="active === 'database'"><Observability.Dashboard /></div>
+    <div v-show="active === 'errors'"><Observability.Errors /></div>
+    <div v-show="active === 'logs'"><Observability.Logs channel="operational" /></div>
+    <div v-show="active === 'files'">
+      <p class="rounded-card border border-dashed border-card-line p-8 text-center text-sm text-muted-foreground">
+        Visor de archivos de log — próximamente (Fase 3).
+      </p>
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",