feat(ai-config): agregar botón Probar para verificar conectividad del provider

- Endpoint GET /ai-config/:id/test que llama /api/tags (Ollama) o /v1/models (OpenAI-compat/Anthropic)
- Botón "Probar" en cada fila de la tabla con modal de resultado JSON

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-06 09:33:29 -05:00
co-authored by Claude Sonnet 4.6
parent 6062f31c70
commit 569d8b0f28
4 changed files with 109 additions and 1 deletions
+26 -1
View File
@@ -101,6 +101,8 @@
</td>
<td class="py-2 px-3 text-right">
<div class="flex justify-end gap-2">
<button @click="testConfig(item.ID)"
class="text-xs text-green-600 hover:text-green-800 font-medium transition">Probar</button>
<button @click="openEdit(item)"
class="text-xs text-blue-600 hover:text-blue-800 font-medium transition">Editar</button>
<button @click="confirmDelete(item.ID)"
@@ -235,6 +237,22 @@
</div>
</div>
<!-- Modal resultado test -->
<div x-show="testResult" x-cloak class="fixed inset-0 bg-black/50 flex items-center justify-center z-40 p-4">
<div @click.outside="testResult = null" class="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
<div class="flex items-center gap-3 mb-3">
<span x-show="testResult && testResult.ok" class="text-2xl"></span>
<span x-show="testResult && !testResult.ok" class="text-2xl"></span>
<h2 class="text-lg font-bold" x-text="testResult && testResult.ok ? 'Conexión exitosa' : 'Error de conexión'"></h2>
</div>
<pre x-show="testResult" class="text-xs bg-gray-50 border border-gray-200 rounded-lg p-3 overflow-x-auto max-h-60"
x-text="JSON.stringify(testResult, null, 2)"></pre>
<div class="flex justify-end mt-4">
<button @click="testResult = null" class="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">Cerrar</button>
</div>
</div>
</div>
<!-- Modal confirmar eliminación -->
<div x-show="deleteId" x-cloak class="fixed inset-0 bg-black/50 flex items-center justify-center z-40 p-4">
<div class="bg-white rounded-xl shadow-xl w-full max-w-sm p-6 text-center">
@@ -260,7 +278,7 @@ function aiConfigApp() {
loading: false, saving: false,
items: [], total: 0, totalPages: 1, page: 1,
search: '',
showModal: false, editItem: null, deleteId: null,
showModal: false, editItem: null, deleteId: null, testResult: null,
errorMsg: '', successMsg: '', formError: '',
form: { nombre: '', provider: '', api_key: '', base_url: '', model_name: '', is_active: true, notes: '', modulos: [] },
@@ -341,6 +359,13 @@ function aiConfigApp() {
await this.load()
},
async testConfig(id) {
this.loading = true
const res = await fetch(`/app/ai-config/${id}/test`)
this.loading = false
this.testResult = await res.json()
},
showSuccess(msg) {
this.successMsg = msg
setTimeout(() => { this.successMsg = '' }, 3000)