@innertia-solutions/innertia-nuxt 0.1.55 → 0.1.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -58,13 +58,16 @@ function fmtMs(ms) { return ms == null ? '—' : `${Number(ms).toLocaleString('e
58
58
  </div>
59
59
  <table v-else class="w-full text-sm">
60
60
  <thead><tr class="text-left text-muted-foreground">
61
- <th class="py-1">Query</th><th class="py-1">Llamadas</th><th class="py-1">Media</th><th class="py-1">Total</th>
61
+ <th class="py-1 pr-4">Query</th>
62
+ <th class="py-1 pr-4 whitespace-nowrap">Llamadas</th>
63
+ <th class="py-1 pr-4 whitespace-nowrap">Media</th>
64
+ <th class="py-1 whitespace-nowrap">Total</th>
62
65
  </tr></thead>
63
66
  <tbody>
64
67
  <tr v-for="q in queries.data.value?.top ?? []" :key="q.id" class="border-t border-card-line">
65
- <td class="py-1 font-mono text-xs">{{ q.query }}</td>
66
- <td class="py-1">{{ Number(q.calls).toLocaleString('es-CL') }}</td>
67
- <td class="py-1">{{ fmtMs(q.mean_ms) }}</td>
68
+ <td class="py-1 pr-4 font-mono text-xs truncate max-w-md">{{ q.query }}</td>
69
+ <td class="py-1 pr-4">{{ Number(q.calls).toLocaleString('es-CL') }}</td>
70
+ <td class="py-1 pr-4">{{ fmtMs(q.mean_ms) }}</td>
68
71
  <td class="py-1">{{ fmtMs(q.total_ms) }}</td>
69
72
  </tr>
70
73
  </tbody>
@@ -0,0 +1,104 @@
1
+ <script setup>
2
+ // Detalle de un caso de error (Sentry-like) desde el snapshot durable del caso:
3
+ // stack completo (in-app resaltado + código fuente), contexto del request,
4
+ // cadena de excepciones y breadcrumbs. Timeline de ocurrencias arriba.
5
+ const props = defineProps({ id: { type: [String, Number], required: true } })
6
+ const emit = defineEmits(['back'])
7
+ const api = useApi()
8
+
9
+ const { data, pending } = await useAsyncData(
10
+ () => `obs-error-${props.id}`,
11
+ () => api.get(`platform/observability/errors/${props.id}`),
12
+ { watch: [() => props.id] },
13
+ )
14
+
15
+ const snap = computed(() => data.value?.snapshot ?? null)
16
+
17
+ const timelineSeries = computed(() => [{ name: 'Ocurrencias', data: (data.value?.timeline ?? []).map(d => d.count) }])
18
+ const timelineCats = computed(() => (data.value?.timeline ?? []).map(d => d.day))
19
+
20
+ const expanded = ref({})
21
+ function toggle(i) { expanded.value = { ...expanded.value, [i]: !expanded.value[i] } }
22
+
23
+ const STATUS = { open: 'Abierto', resolved: 'Resuelto', ignored: 'Ignorado' }
24
+ </script>
25
+
26
+ <template>
27
+ <div class="space-y-5">
28
+ <button type="button" class="text-sm text-primary hover:underline" @click="emit('back')">← Volver a errores</button>
29
+
30
+ <div v-if="pending" class="py-10 text-center text-sm text-muted-foreground">Cargando…</div>
31
+
32
+ <template v-else-if="data">
33
+ <div class="rounded-card border border-card-line bg-card p-4">
34
+ <div class="flex flex-wrap items-center gap-2">
35
+ <span v-if="data.is_critical" class="rounded-full bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300 px-2 py-0.5 text-xs font-semibold">Crítico</span>
36
+ <span class="rounded-full bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-0.5 text-xs">{{ STATUS[data.case.status] ?? data.case.status }}</span>
37
+ <span class="text-xs text-muted-foreground">{{ data.case.times_seen }} ocurrencias</span>
38
+ </div>
39
+ <h2 class="mt-2 text-lg font-semibold text-foreground">{{ data.case.title }}</h2>
40
+ <p class="text-sm text-muted-foreground font-mono">{{ data.case.exception_class }}</p>
41
+ <p v-if="snap?.message" class="mt-1 text-sm text-foreground">{{ snap.message }}</p>
42
+ <p class="mt-1 text-xs text-muted-foreground">Primera vez: {{ data.case.first_seen }} · Última: {{ data.case.last_seen }}</p>
43
+ </div>
44
+
45
+ <section v-if="timelineCats.length">
46
+ <h3 class="mb-2 text-sm font-semibold text-foreground">Ocurrencias (30 días)</h3>
47
+ <Chart type="bar" :series="timelineSeries" :categories="timelineCats" :height="160" />
48
+ </section>
49
+
50
+ <div v-if="!snap" 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">
51
+ Este caso no tiene snapshot (ocurrió antes de habilitarse la captura durable). Volverá a completarse la próxima vez que el error reincida.
52
+ </div>
53
+
54
+ <template v-else>
55
+ <section v-if="snap.previous?.length">
56
+ <h3 class="mb-2 text-sm font-semibold text-foreground">Causado por</h3>
57
+ <ul class="space-y-1 text-xs">
58
+ <li v-for="(p, i) in snap.previous" :key="i" class="rounded-card border border-card-line bg-card px-3 py-1.5">
59
+ <span class="font-mono text-foreground">{{ p.class }}</span>
60
+ <span class="text-muted-foreground"> — {{ p.message }} <span class="opacity-70">({{ p.file }}:{{ p.line }})</span></span>
61
+ </li>
62
+ </ul>
63
+ </section>
64
+
65
+ <section v-if="snap.request" class="rounded-card border border-card-line bg-card p-4 text-sm">
66
+ <h3 class="mb-2 text-sm font-semibold text-foreground">Contexto del request</h3>
67
+ <dl class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
68
+ <div><dt class="text-muted-foreground inline">Ruta:</dt> <dd class="inline text-foreground">{{ snap.request.method }} {{ snap.request.route ?? snap.request.url }}</dd></div>
69
+ <div><dt class="text-muted-foreground inline">URL:</dt> <dd class="inline text-foreground break-all">{{ snap.request.url }}</dd></div>
70
+ <div><dt class="text-muted-foreground inline">Usuario:</dt> <dd class="inline text-foreground">{{ snap.request.user_id ?? '—' }}</dd></div>
71
+ <div><dt class="text-muted-foreground inline">IP:</dt> <dd class="inline text-foreground">{{ snap.request.ip ?? '—' }}</dd></div>
72
+ </dl>
73
+ </section>
74
+
75
+ <section v-if="snap.stack?.length">
76
+ <h3 class="mb-2 text-sm font-semibold text-foreground">Stack trace</h3>
77
+ <div class="rounded-card border border-card-line bg-card divide-y divide-card-line overflow-hidden">
78
+ <div v-for="(f, i) in snap.stack" :key="i" :class="f.in_app ? '' : 'opacity-60'">
79
+ <button type="button" class="w-full flex items-baseline gap-2 px-3 py-1.5 text-left text-xs hover:bg-slate-50 dark:hover:bg-slate-800/50" @click="toggle(i)">
80
+ <span v-if="f.in_app" class="mt-0.5 inline-block size-1.5 rounded-full bg-primary shrink-0" title="in-app" />
81
+ <span class="font-mono text-foreground">{{ f.function || '{main}' }}</span>
82
+ <span class="font-mono text-muted-foreground ml-auto shrink-0">{{ f.file }}<span v-if="f.line">:{{ f.line }}</span></span>
83
+ </button>
84
+ <div v-if="f.context && (expanded[i] || f.in_app)" class="bg-slate-50 dark:bg-slate-900/40 overflow-x-auto">
85
+ <pre class="text-[11px] leading-5 font-mono"><template v-for="ln in f.context" :key="ln.n"><div :class="ln.error ? 'bg-red-100 dark:bg-red-500/20' : ''" class="px-3"><span class="inline-block w-8 select-none text-muted-foreground text-right pr-2">{{ ln.n }}</span><span :class="ln.error ? 'text-red-700 dark:text-red-300' : 'text-foreground'">{{ ln.code }}</span></div></template></pre>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <section v-if="snap.breadcrumbs?.length">
92
+ <h3 class="mb-2 text-sm font-semibold text-foreground">Breadcrumbs (antes del error)</h3>
93
+ <ul class="rounded-card border border-card-line bg-card divide-y divide-card-line text-xs">
94
+ <li v-for="(b, i) in snap.breadcrumbs" :key="i" class="flex items-baseline gap-2 px-3 py-1.5">
95
+ <span class="rounded bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground shrink-0">{{ b.type }}</span>
96
+ <span class="font-mono text-foreground truncate">{{ b.summary }}</span>
97
+ <span v-if="b.duration_ms != null" class="ml-auto text-muted-foreground shrink-0">{{ b.duration_ms }} ms</span>
98
+ </li>
99
+ </ul>
100
+ </section>
101
+ </template>
102
+ </template>
103
+ </div>
104
+ </template>
@@ -1,14 +1,25 @@
1
1
  <script setup>
2
+ // Lista de errores (casos) con filtros + criticidad + entrar al detalle.
3
+ // Realtime: el Panel cambia `touchedAt` al recibir case.touched → recarga la tabla
4
+ // (bump de :key). La suscripción vive en el Panel (useRealtime es singleton por canal).
5
+ const props = defineProps({ touchedAt: { type: Number, default: 0 } })
2
6
  const api = useApi()
3
7
  const toast = useToast()
8
+
9
+ const selectedId = ref(null)
4
10
  const reloadKey = ref(0)
5
11
 
6
12
  const columns = [
7
13
  { key: 'last_seen', label: 'Última vez', sortable: true },
8
14
  { key: 'title', label: 'Error' },
9
15
  { key: 'exception_class', label: 'Clase' },
10
- { key: 'times_seen', label: 'Veces' },
11
- { key: 'status', label: 'Estado' },
16
+ { key: 'times_seen', label: 'Veces', sortable: true },
17
+ { key: 'status', label: 'Estado', filterable: true, filterType: 'select',
18
+ filterOptions: [
19
+ { value: 'open', label: 'Abierto' },
20
+ { value: 'resolved', label: 'Resuelto' },
21
+ { value: 'ignored', label: 'Ignorado' },
22
+ ] },
12
23
  { key: 'actions', label: '' },
13
24
  ]
14
25
 
@@ -23,22 +34,36 @@ async function setStatus(row, status) {
23
34
  toast.error(e?.data?.message ?? 'No se pudo cambiar el estado.')
24
35
  }
25
36
  }
37
+
38
+ watch(() => props.touchedAt, () => { reloadKey.value++ })
26
39
  </script>
27
40
 
28
41
  <template>
29
- <Table.Standard
30
- :key="reloadKey"
31
- name="observability-errors"
32
- endpoint="platform/observability/errors"
33
- :columns="columns"
34
- search-placeholder="Buscar error…"
35
- >
36
- <template #status="{ value }">{{ statusLabels[value] ?? value }}</template>
37
- <template #actions="{ row }">
38
- <div class="flex gap-2">
39
- <button class="text-xs text-muted-foreground hover:text-foreground" @click="setStatus(row, 'resolved')">Resolver</button>
40
- <button class="text-xs text-muted-foreground hover:text-foreground" @click="setStatus(row, 'ignored')">Ignorar</button>
41
- </div>
42
- </template>
43
- </Table.Standard>
42
+ <div>
43
+ <Observability.ErrorDetail v-if="selectedId" :id="selectedId" @back="selectedId = null" />
44
+
45
+ <Table.Standard
46
+ v-else
47
+ :key="reloadKey"
48
+ name="observability-errors"
49
+ endpoint="platform/observability/errors"
50
+ :columns="columns"
51
+ search-placeholder="Buscar error…"
52
+ @row-click="(row) => selectedId = row.id"
53
+ >
54
+ <template #title="{ row }">
55
+ <div class="flex items-center gap-2">
56
+ <span v-if="row.is_critical" class="inline-block size-2 rounded-full bg-red-500" title="Crítico" />
57
+ <span class="text-foreground">{{ row.title }}</span>
58
+ </div>
59
+ </template>
60
+ <template #status="{ value }">{{ statusLabels[value] ?? value }}</template>
61
+ <template #actions="{ row }">
62
+ <div class="flex gap-2">
63
+ <button class="text-xs text-muted-foreground hover:text-foreground" @click.stop="setStatus(row, 'resolved')">Resolver</button>
64
+ <button class="text-xs text-muted-foreground hover:text-foreground" @click.stop="setStatus(row, 'ignored')">Ignorar</button>
65
+ </div>
66
+ </template>
67
+ </Table.Standard>
68
+ </div>
44
69
  </template>
@@ -0,0 +1,71 @@
1
+ <script setup>
2
+ // Overview pro: KPIs de errores (con criticidad), BD, slow queries y colas.
3
+ // Refresca cada ~15s y en vivo cuando el Panel cambia `touchedAt` (case.touched).
4
+ // La suscripción realtime vive en el Panel (useRealtime es singleton por canal).
5
+ const props = defineProps({ touchedAt: { type: Number, default: 0 } })
6
+ const api = useApi()
7
+
8
+ const { data, refresh } = await useAsyncData('obs-overview', () => api.get('platform/observability/overview'))
9
+ const timer = ref(null)
10
+
11
+ onMounted(() => { timer.value = setInterval(refresh, 15_000) })
12
+ onBeforeUnmount(() => { if (timer.value) clearInterval(timer.value) })
13
+
14
+ watch(() => props.touchedAt, () => refresh())
15
+
16
+ function fmtBytes(b) {
17
+ if (b == null) return '—'
18
+ const u = ['B', 'KB', 'MB', 'GB', 'TB']; let n = Number(b), i = 0
19
+ while (n >= 1024 && i < u.length - 1) { n /= 1024; i++ }
20
+ return `${n.toFixed(1)} ${u[i]}`
21
+ }
22
+ function fmtMs(ms) { return ms == null ? '—' : `${Number(ms).toLocaleString('es-CL')} ms` }
23
+ </script>
24
+
25
+ <template>
26
+ <div v-if="data" class="space-y-6">
27
+ <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
28
+ <Observability.MetricCard label="Errores abiertos" :value="data.errors.open"
29
+ :tone="data.errors.open > 0 ? 'warn' : 'good'"
30
+ :sublabel="`${data.errors.critical} críticos`" />
31
+ <Observability.MetricCard label="Críticos" :value="data.errors.critical"
32
+ :tone="data.errors.critical > 0 ? 'bad' : 'good'" />
33
+ <Observability.MetricCard label="Cache hit"
34
+ :value="data.database.cache_hit_ratio != null ? data.database.cache_hit_ratio + '%' : '—'"
35
+ :tone="(data.database.cache_hit_ratio ?? 100) >= 95 ? 'good' : 'warn'"
36
+ :sublabel="`BD: ${fmtBytes(data.database.database_bytes)}`" />
37
+ <Observability.MetricCard label="Colas"
38
+ :value="data.queue.pending ?? '—'"
39
+ :tone="(data.queue.failed ?? 0) > 0 ? 'bad' : 'neutral'"
40
+ :sublabel="`${data.queue.failed ?? 0} fallidos`" />
41
+ </div>
42
+
43
+ <div class="flex flex-wrap gap-2 text-xs">
44
+ <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-muted-foreground">Resueltos: <span class="font-semibold text-foreground">{{ data.errors.resolved }}</span></span>
45
+ <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-muted-foreground">Ignorados: <span class="font-semibold text-foreground">{{ data.errors.ignored }}</span></span>
46
+ <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-muted-foreground">Errores 24h (log): <span class="font-semibold text-foreground">{{ data.logs?.errors_24h ?? 0 }}</span></span>
47
+ <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-muted-foreground">Conexiones: <span class="font-semibold text-foreground">{{ data.database.connections.total ?? '—' }}/{{ data.database.connections.max ?? '—' }}</span></span>
48
+ </div>
49
+
50
+ <section>
51
+ <h3 class="mb-2 text-sm font-semibold text-foreground">Top consultas lentas</h3>
52
+ <table class="w-full text-sm">
53
+ <thead><tr class="text-left text-muted-foreground">
54
+ <th class="py-1 pr-4">Query</th>
55
+ <th class="py-1 pr-4 whitespace-nowrap">Llamadas</th>
56
+ <th class="py-1 pr-4 whitespace-nowrap">Media</th>
57
+ <th class="py-1 whitespace-nowrap">Total</th>
58
+ </tr></thead>
59
+ <tbody>
60
+ <tr v-for="q in data.slow_queries" :key="q.id" class="border-t border-card-line">
61
+ <td class="py-1 pr-4 font-mono text-xs truncate max-w-md">{{ q.query }}</td>
62
+ <td class="py-1 pr-4">{{ Number(q.calls).toLocaleString('es-CL') }}</td>
63
+ <td class="py-1 pr-4">{{ fmtMs(q.mean_ms) }}</td>
64
+ <td class="py-1">{{ fmtMs(q.total_ms) }}</td>
65
+ </tr>
66
+ <tr v-if="!data.slow_queries?.length"><td colspan="4" class="py-2 text-xs text-muted-foreground">Sin datos de consultas.</td></tr>
67
+ </tbody>
68
+ </table>
69
+ </section>
70
+ </div>
71
+ </template>
@@ -1,31 +1,43 @@
1
1
  <script setup>
2
- // Panel drop-in de observabilidad: sub-nav interna. Fase 1: BD (Dashboard nuevo),
3
- // Errores/Logs (componentes existentes), Archivos (placeholder Fase 3).
2
+ // Panel drop-in de observabilidad. Overview es la landing; luego BD, Errores, Logs, Archivos.
3
+ // Realtime: UNA sola suscripción al canal 'observability' acá (useRealtime es singleton
4
+ // por canal; suscribir en cada tab se pisaría el handler). Al recibir case.touched se
5
+ // bumpea `touchedAt` y los tabs (Overview/Errores) reaccionan por prop.
6
+ const rt = useRealtime()
7
+ const touchedAt = ref(0)
8
+
4
9
  const TABS = [
10
+ { key: 'overview', label: 'Resumen' },
5
11
  { key: 'database', label: 'Base de datos' },
6
12
  { key: 'errors', label: 'Errores' },
7
13
  { key: 'logs', label: 'Logs' },
8
14
  { key: 'files', label: 'Archivos' },
9
15
  ]
10
- const active = ref('database')
16
+ const active = ref('overview')
17
+
18
+ onMounted(async () => {
19
+ try { await rt.connect(); rt.subscribe('observability', { 'case.touched': () => { touchedAt.value = Date.now() } }) } catch {}
20
+ })
21
+ onBeforeUnmount(() => rt.unsubscribe('observability'))
11
22
  </script>
12
23
 
13
24
  <template>
14
25
  <div class="space-y-5">
15
- <nav class="flex gap-1 border-b border-card-line">
26
+ <nav class="flex gap-1 border-b border-card-line overflow-x-auto">
16
27
  <button v-for="t in TABS" :key="t.key" type="button" @click="active = t.key"
17
- class="px-3 py-2 text-sm font-medium transition-colors -mb-px border-b-2"
28
+ class="px-3 py-2 text-sm font-medium transition-colors -mb-px border-b-2 whitespace-nowrap"
18
29
  :class="active === t.key ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'">
19
30
  {{ t.label }}
20
31
  </button>
21
32
  </nav>
22
33
 
34
+ <div v-show="active === 'overview'"><Observability.Overview :touched-at="touchedAt" /></div>
23
35
  <div v-show="active === 'database'"><Observability.Dashboard /></div>
24
- <div v-show="active === 'errors'"><Observability.Errors /></div>
36
+ <div v-show="active === 'errors'"><Observability.Errors :touched-at="touchedAt" /></div>
25
37
  <div v-show="active === 'logs'"><Observability.Logs channel="operational" /></div>
26
38
  <div v-show="active === 'files'">
27
39
  <p class="rounded-card border border-dashed border-card-line p-8 text-center text-sm text-muted-foreground">
28
- Visor de archivos de log — próximamente (Fase 3).
40
+ Visor de archivos de log — próximamente (Fase 4).
29
41
  </p>
30
42
  </div>
31
43
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@innertia-solutions/innertia-nuxt",
3
- "version": "0.1.55",
3
+ "version": "0.1.57",
4
4
  "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
5
5
  "keywords": [
6
6
  "nuxt",