diff --git a/public/init.html b/public/init.html index 4c224ee..637c246 100644 --- a/public/init.html +++ b/public/init.html @@ -124,6 +124,39 @@ + + diff --git a/public/js/init.js b/public/js/init.js index d40e099..ea98669 100644 --- a/public/js/init.js +++ b/public/js/init.js @@ -9,10 +9,27 @@ document.addEventListener('DOMContentLoaded', () => { const btnInit = document.getElementById('btnInit'); const messageBox = document.getElementById('messageBox'); + const initHeaderTitle = document.querySelector('.init-header h2'); + const initHeaderDesc = document.querySelector('.init-header p'); + + const promForm = document.getElementById('promForm'); + const initForm = document.getElementById('initForm'); + const promName = document.getElementById('promName'); + const promUrl = document.getElementById('promUrl'); + const promDesc = document.getElementById('promDesc'); + const btnPromTest = document.getElementById('btnPromTest'); + const btnPromAdd = document.getElementById('btnPromAdd'); + const promMessageBox = document.getElementById('promMessageBox'); + function showMessage(msg, isError = false) { messageBox.textContent = msg; messageBox.className = 'form-message ' + (isError ? 'error' : 'success'); } + + function showPromMessage(msg, isError = false) { + promMessageBox.textContent = msg; + promMessageBox.className = 'form-message ' + (isError ? 'error' : 'success'); + } btnTest.addEventListener('click', async () => { btnTest.disabled = true; @@ -61,10 +78,13 @@ document.addEventListener('DOMContentLoaded', () => { }); const data = await res.json(); if (data.success) { - showMessage('初始化成功!即将跳转到系统首页面...'); + showMessage('数据库初始化成功!进入下一步...'); setTimeout(() => { - window.location.href = '/'; - }, 1500); + initForm.style.display = 'none'; + promForm.style.display = 'block'; + initHeaderTitle.textContent = '配置 Prometheus'; + initHeaderDesc.textContent = '配置您的第一个 Prometheus 数据源监控连接'; + }, 1000); } else { showMessage('初始化失败: ' + (data.error || '未知错误'), true); btnInit.disabled = false; @@ -76,4 +96,62 @@ document.addEventListener('DOMContentLoaded', () => { btnInit.textContent = oldText; } }); + + btnPromTest.addEventListener('click', async () => { + const url = promUrl.value.trim(); + if (!url) return showPromMessage('请输入 Prometheus URL', true); + + btnPromTest.disabled = true; + const oldText = btnPromTest.textContent; + btnPromTest.textContent = '测试中...'; + try { + const res = await fetch('/api/sources/test', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ url }) + }); + const data = await res.json(); + if (data.status === 'ok') { + showPromMessage(`连接成功!Prometheus 版本: ${data.version}`); + } else { + showPromMessage(`连接失败: ${data.message || '未知错误'}`, true); + } + } catch (err) { + showPromMessage('请求失败: ' + err.message, true); + } finally { + btnPromTest.disabled = false; + btnPromTest.textContent = oldText; + } + }); + + btnPromAdd.addEventListener('click', async () => { + const name = promName.value.trim(); + const url = promUrl.value.trim(); + const description = promDesc.value.trim(); + if (!name || !url) return showPromMessage('请填写名称和URL', true); + + btnPromAdd.disabled = true; + const oldText = btnPromAdd.textContent; + btnPromAdd.textContent = '保存中...'; + try { + const res = await fetch('/api/sources', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ name, url, description }) + }); + if (res.ok) { + showPromMessage('数据源添加成功!即将跳转...'); + setTimeout(() => window.location.href = '/', 1500); + } else { + const err = await res.json(); + showPromMessage(`添加失败: ${err.error || '未知错误'}`, true); + btnPromAdd.disabled = false; + btnPromAdd.textContent = oldText; + } + } catch (err) { + showPromMessage('请求失败: ' + err.message, true); + btnPromAdd.disabled = false; + btnPromAdd.textContent = oldText; + } + }); });