@innertia-solutions/innertia-nuxt 0.1.54 → 0.1.55
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.
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
// Dashboard de base de datos con valor: gauges (cache hit, conexiones), cards
|
|
3
|
+
// (deadlocks, rollbacks), y tablas (queries lentas, índices sin usar, tablas con
|
|
4
|
+
// más dead tuples). Cada sección pide su endpoint (lazy) y refresca cada ~10s.
|
|
5
|
+
const api = useApi()
|
|
6
|
+
const REFETCH = 10_000
|
|
7
|
+
|
|
8
|
+
const overview = useQuery({ queryKey: ['obs-db', 'overview'], queryFn: () => api.get('platform/observability/database/overview'), refetchInterval: REFETCH })
|
|
9
|
+
const connections = useQuery({ queryKey: ['obs-db', 'connections'], queryFn: () => api.get('platform/observability/database/connections'), refetchInterval: REFETCH })
|
|
10
|
+
const queries = useQuery({ queryKey: ['obs-db', 'queries'], queryFn: () => api.get('platform/observability/database/queries'), refetchInterval: REFETCH })
|
|
11
|
+
const indexes = useQuery({ queryKey: ['obs-db', 'indexes'], queryFn: () => api.get('platform/observability/database/indexes'), refetchInterval: REFETCH })
|
|
12
|
+
const tables = useQuery({ queryKey: ['obs-db', 'tables'], queryFn: () => api.get('platform/observability/database/tables'), refetchInterval: REFETCH })
|
|
13
|
+
|
|
14
|
+
const connPercent = computed(() => {
|
|
15
|
+
const d = connections.data.value
|
|
16
|
+
if (!d || d.total == null || !d.max) return null
|
|
17
|
+
return Math.round((d.total / d.max) * 100)
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
function fmtBytes(bytes) {
|
|
21
|
+
if (bytes == null) return '—'
|
|
22
|
+
const u = ['B', 'KB', 'MB', 'GB', 'TB']; let n = Number(bytes), i = 0
|
|
23
|
+
while (n >= 1024 && i < u.length - 1) { n /= 1024; i++ }
|
|
24
|
+
return `${n.toFixed(1)} ${u[i]}`
|
|
25
|
+
}
|
|
26
|
+
function fmtMs(ms) { return ms == null ? '—' : `${Number(ms).toLocaleString('es-CL')} ms` }
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<div class="space-y-6">
|
|
31
|
+
<!-- Gauges + cards de salud -->
|
|
32
|
+
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
|
33
|
+
<Observability.Gauge label="Cache hit" :percent="overview.data.value?.cache_hit_ratio ?? null" />
|
|
34
|
+
<Observability.Gauge label="Conexiones" :percent="connPercent" />
|
|
35
|
+
<Observability.MetricCard label="Deadlocks" :value="overview.data.value?.deadlocks ?? '—'"
|
|
36
|
+
:tone="(overview.data.value?.deadlocks ?? 0) > 0 ? 'bad' : 'good'" />
|
|
37
|
+
<Observability.MetricCard label="Rollbacks" :value="overview.data.value?.rollbacks ?? '—'"
|
|
38
|
+
:sublabel="`Tamaño BD: ${fmtBytes(overview.data.value?.database_bytes)}`" />
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<!-- Conexiones por estado -->
|
|
42
|
+
<div v-if="connections.data.value" class="flex flex-wrap gap-2">
|
|
43
|
+
<span v-for="(n, state) in connections.data.value.by_state" :key="state"
|
|
44
|
+
class="rounded-full border border-card-line bg-card px-2.5 py-1 text-xs text-muted-foreground">
|
|
45
|
+
{{ state }}: <span class="font-semibold text-foreground">{{ n }}</span>
|
|
46
|
+
</span>
|
|
47
|
+
<span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-xs text-muted-foreground">
|
|
48
|
+
total: <span class="font-semibold text-foreground">{{ connections.data.value.total }}</span> / {{ connections.data.value.max ?? '—' }}
|
|
49
|
+
</span>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!-- Queries lentas -->
|
|
53
|
+
<section>
|
|
54
|
+
<h3 class="mb-2 text-sm font-semibold text-foreground">Queries más lentas</h3>
|
|
55
|
+
<div v-if="queries.data.value && !queries.data.value.available"
|
|
56
|
+
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">
|
|
57
|
+
{{ queries.data.value.reason }}
|
|
58
|
+
</div>
|
|
59
|
+
<table v-else class="w-full text-sm">
|
|
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>
|
|
62
|
+
</tr></thead>
|
|
63
|
+
<tbody>
|
|
64
|
+
<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">{{ fmtMs(q.total_ms) }}</td>
|
|
69
|
+
</tr>
|
|
70
|
+
</tbody>
|
|
71
|
+
</table>
|
|
72
|
+
</section>
|
|
73
|
+
|
|
74
|
+
<!-- Índices sin usar + tablas con dead tuples -->
|
|
75
|
+
<div class="grid gap-6 lg:grid-cols-2">
|
|
76
|
+
<section>
|
|
77
|
+
<h3 class="mb-2 text-sm font-semibold text-foreground">Índices sin usar</h3>
|
|
78
|
+
<table class="w-full text-sm">
|
|
79
|
+
<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>
|
|
80
|
+
<tbody>
|
|
81
|
+
<tr v-for="ix in indexes.data.value?.unused ?? []" :key="ix.index" class="border-t border-card-line">
|
|
82
|
+
<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>
|
|
83
|
+
</tr>
|
|
84
|
+
<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>
|
|
85
|
+
</tbody>
|
|
86
|
+
</table>
|
|
87
|
+
</section>
|
|
88
|
+
<section>
|
|
89
|
+
<h3 class="mb-2 text-sm font-semibold text-foreground">Tablas con más dead tuples</h3>
|
|
90
|
+
<table class="w-full text-sm">
|
|
91
|
+
<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>
|
|
92
|
+
<tbody>
|
|
93
|
+
<tr v-for="t in tables.data.value?.tables ?? []" :key="t.name" class="border-t border-card-line">
|
|
94
|
+
<td class="py-1">{{ t.name }}</td><td class="py-1">{{ Number(t.dead).toLocaleString('es-CL') }}</td>
|
|
95
|
+
<td class="py-1">{{ t.bloat_pct }}%</td><td class="py-1">{{ fmtBytes(t.bytes) }}</td>
|
|
96
|
+
</tr>
|
|
97
|
+
</tbody>
|
|
98
|
+
</table>
|
|
99
|
+
</section>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</template>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
const props = defineProps({
|
|
3
|
+
label: { type: String, required: true },
|
|
4
|
+
percent: { type: Number, default: null }, // 0..100 o null
|
|
5
|
+
})
|
|
6
|
+
const series = computed(() => [props.percent == null ? 0 : Math.max(0, Math.min(100, props.percent))])
|
|
7
|
+
const options = computed(() => ({
|
|
8
|
+
labels: [props.label],
|
|
9
|
+
plotOptions: { radialBar: { dataLabels: { value: { formatter: (v) => `${Math.round(v)}%` } } } },
|
|
10
|
+
}))
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<template>
|
|
14
|
+
<div class="rounded-card border border-card-line bg-card p-2">
|
|
15
|
+
<Chart v-if="percent != null" type="radialBar" :series="series" :options="options" :height="180" />
|
|
16
|
+
<div v-else class="flex h-[180px] flex-col items-center justify-center text-muted-foreground">
|
|
17
|
+
<span class="text-sm">{{ label }}</span>
|
|
18
|
+
<span class="text-xs">sin datos</span>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineProps({
|
|
3
|
+
label: { type: String, required: true },
|
|
4
|
+
value: { type: [String, Number], default: '—' },
|
|
5
|
+
sublabel: { type: String, default: '' },
|
|
6
|
+
tone: { type: String, default: 'neutral' }, // neutral | good | warn | bad
|
|
7
|
+
})
|
|
8
|
+
const TONE = {
|
|
9
|
+
neutral: 'text-foreground',
|
|
10
|
+
good: 'text-emerald-600 dark:text-emerald-400',
|
|
11
|
+
warn: 'text-amber-600 dark:text-amber-400',
|
|
12
|
+
bad: 'text-red-600 dark:text-red-400',
|
|
13
|
+
}
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<template>
|
|
17
|
+
<div class="rounded-card border border-card-line bg-card p-4">
|
|
18
|
+
<p class="text-xs text-muted-foreground">{{ label }}</p>
|
|
19
|
+
<p class="mt-1 text-2xl font-bold" :class="TONE[tone] ?? TONE.neutral">{{ value }}</p>
|
|
20
|
+
<p v-if="sublabel" class="mt-0.5 text-xs text-muted-foreground">{{ sublabel }}</p>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
@@ -0,0 +1,32 @@
|
|
|
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).
|
|
4
|
+
const TABS = [
|
|
5
|
+
{ key: 'database', label: 'Base de datos' },
|
|
6
|
+
{ key: 'errors', label: 'Errores' },
|
|
7
|
+
{ key: 'logs', label: 'Logs' },
|
|
8
|
+
{ key: 'files', label: 'Archivos' },
|
|
9
|
+
]
|
|
10
|
+
const active = ref('database')
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<template>
|
|
14
|
+
<div class="space-y-5">
|
|
15
|
+
<nav class="flex gap-1 border-b border-card-line">
|
|
16
|
+
<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"
|
|
18
|
+
:class="active === t.key ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'">
|
|
19
|
+
{{ t.label }}
|
|
20
|
+
</button>
|
|
21
|
+
</nav>
|
|
22
|
+
|
|
23
|
+
<div v-show="active === 'database'"><Observability.Dashboard /></div>
|
|
24
|
+
<div v-show="active === 'errors'"><Observability.Errors /></div>
|
|
25
|
+
<div v-show="active === 'logs'"><Observability.Logs channel="operational" /></div>
|
|
26
|
+
<div v-show="active === 'files'">
|
|
27
|
+
<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).
|
|
29
|
+
</p>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
package/package.json
CHANGED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
const api = useApi()
|
|
3
|
-
|
|
4
|
-
const { data, pending, error } = await useAsyncData(
|
|
5
|
-
'observability-database',
|
|
6
|
-
() => api.get('platform/observability/database'),
|
|
7
|
-
)
|
|
8
|
-
|
|
9
|
-
function fmtBytes(bytes) {
|
|
10
|
-
if (bytes == null) return '—'
|
|
11
|
-
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
|
12
|
-
let n = Number(bytes), i = 0
|
|
13
|
-
while (n >= 1024 && i < units.length - 1) { n /= 1024; i++ }
|
|
14
|
-
return `${n.toFixed(1)} ${units[i]}`
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<template>
|
|
19
|
-
<div>
|
|
20
|
-
<div v-if="pending" class="text-sm text-muted-foreground">Cargando…</div>
|
|
21
|
-
<div v-else-if="error" class="text-sm text-red-500">No se pudo cargar la capacidad de la BD.</div>
|
|
22
|
-
<div v-else class="space-y-6">
|
|
23
|
-
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
24
|
-
<div class="rounded-card border border-border p-4">
|
|
25
|
-
<p class="text-xs text-muted-foreground">Tamaño de la BD</p>
|
|
26
|
-
<p class="mt-1 text-lg font-bold text-foreground">{{ fmtBytes(data.capacity?.database_bytes) }}</p>
|
|
27
|
-
</div>
|
|
28
|
-
<div class="rounded-card border border-border p-4">
|
|
29
|
-
<p class="text-xs text-muted-foreground">Conexiones</p>
|
|
30
|
-
<p class="mt-1 text-lg font-bold text-foreground">
|
|
31
|
-
{{ data.capacity?.connections?.used ?? '—' }} / {{ data.capacity?.connections?.max ?? '—' }}
|
|
32
|
-
</p>
|
|
33
|
-
</div>
|
|
34
|
-
<div class="rounded-card border border-border p-4">
|
|
35
|
-
<p class="text-xs text-muted-foreground">Disco usado</p>
|
|
36
|
-
<p class="mt-1 text-lg font-bold text-foreground">{{ data.disk?.percent != null ? data.disk.percent + '%' : '—' }}</p>
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
|
|
40
|
-
<div>
|
|
41
|
-
<h2 class="mb-2 text-sm font-semibold text-foreground">Tablas más grandes</h2>
|
|
42
|
-
<table class="w-full text-sm">
|
|
43
|
-
<thead>
|
|
44
|
-
<tr class="text-left text-muted-foreground">
|
|
45
|
-
<th class="py-1">Tabla</th><th class="py-1">Tamaño</th><th class="py-1">Filas</th>
|
|
46
|
-
</tr>
|
|
47
|
-
</thead>
|
|
48
|
-
<tbody>
|
|
49
|
-
<tr v-for="t in data.capacity?.tables ?? []" :key="t.name" class="border-t border-border">
|
|
50
|
-
<td class="py-1">{{ t.name }}</td>
|
|
51
|
-
<td class="py-1">{{ fmtBytes(t.bytes) }}</td>
|
|
52
|
-
<td class="py-1">{{ Number(t.rows).toLocaleString('es-CL') }}</td>
|
|
53
|
-
</tr>
|
|
54
|
-
</tbody>
|
|
55
|
-
</table>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</template>
|