229 lines
8.2 KiB
JavaScript
229 lines
8.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
||
const hostInput = document.getElementById('host');
|
||
const portInput = document.getElementById('port');
|
||
const userInput = document.getElementById('user');
|
||
const passwordInput = document.getElementById('password');
|
||
const databaseInput = document.getElementById('database');
|
||
|
||
const btnTest = document.getElementById('btnTest');
|
||
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');
|
||
|
||
const adminForm = document.getElementById('adminForm');
|
||
const adminUsername = document.getElementById('adminUsername');
|
||
const adminPassword = document.getElementById('adminPassword');
|
||
const adminPasswordConfirm = document.getElementById('adminPasswordConfirm');
|
||
const btnAdminCreate = document.getElementById('btnAdminCreate');
|
||
const adminMessageBox = document.getElementById('adminMessageBox');
|
||
|
||
function showMessage(msg, isError = false) {
|
||
messageBox.textContent = msg;
|
||
messageBox.className = 'form-message ' + (isError ? 'error' : 'success');
|
||
}
|
||
|
||
function showAdminMessage(msg, isError = false) {
|
||
adminMessageBox.textContent = msg;
|
||
adminMessageBox.className = 'form-message ' + (isError ? 'error' : 'success');
|
||
}
|
||
|
||
function showPromMessage(msg, isError = false) {
|
||
promMessageBox.textContent = msg;
|
||
promMessageBox.className = 'form-message ' + (isError ? 'error' : 'success');
|
||
}
|
||
|
||
// --- Step Controller ---
|
||
async function checkStatus() {
|
||
try {
|
||
const res = await fetch('/api/setup/status');
|
||
const data = await res.json();
|
||
|
||
initForm.style.display = 'none';
|
||
adminForm.style.display = 'none';
|
||
promForm.style.display = 'none';
|
||
|
||
if (!data.initialized) {
|
||
initForm.style.display = 'block';
|
||
initHeaderTitle.textContent = '数据库初始化';
|
||
initHeaderDesc.textContent = '请配置您的 MySQL 数据库连接信息以完成首次设置';
|
||
} else if (data.needsAdmin) {
|
||
adminForm.style.display = 'block';
|
||
initHeaderTitle.textContent = '创建管理员账户';
|
||
initHeaderDesc.textContent = '请设置系统的第一个管理员账号和密码';
|
||
} else {
|
||
promForm.style.display = 'block';
|
||
initHeaderTitle.textContent = '配置 Prometheus';
|
||
initHeaderDesc.textContent = '配置您的第一个 Prometheus 数据源监控连接';
|
||
}
|
||
} catch (err) {
|
||
initForm.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
checkStatus();
|
||
|
||
btnTest.addEventListener('click', async () => {
|
||
btnTest.disabled = true;
|
||
const oldText = btnTest.textContent;
|
||
btnTest.textContent = '测试中...';
|
||
try {
|
||
const res = await fetch('/api/setup/test', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
host: hostInput.value,
|
||
port: portInput.value,
|
||
user: userInput.value,
|
||
password: passwordInput.value
|
||
})
|
||
});
|
||
const data = await res.json();
|
||
if (data.success) {
|
||
showMessage('连接成功！可以进行初始化。');
|
||
} else {
|
||
showMessage('连接失败: ' + (data.error || '未知错误'), true);
|
||
}
|
||
} catch (err) {
|
||
showMessage('请求失败: ' + err.message, true);
|
||
} finally {
|
||
btnTest.disabled = false;
|
||
btnTest.textContent = oldText;
|
||
}
|
||
});
|
||
|
||
btnInit.addEventListener('click', async () => {
|
||
btnInit.disabled = true;
|
||
const oldText = btnInit.textContent;
|
||
btnInit.textContent = '初始化中...';
|
||
try {
|
||
const res = await fetch('/api/setup/init', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
host: hostInput.value,
|
||
port: portInput.value,
|
||
user: userInput.value,
|
||
password: passwordInput.value,
|
||
database: databaseInput.value
|
||
})
|
||
});
|
||
const data = await res.json();
|
||
if (data.success) {
|
||
showMessage('数据库初始化成功！进入下一步...');
|
||
setTimeout(checkStatus, 1000);
|
||
} else {
|
||
showMessage('初始化失败: ' + (data.error || '未知错误'), true);
|
||
btnInit.disabled = false;
|
||
btnInit.textContent = oldText;
|
||
}
|
||
} catch (err) {
|
||
showMessage('请求失败: ' + err.message, true);
|
||
btnInit.disabled = false;
|
||
btnInit.textContent = oldText;
|
||
}
|
||
});
|
||
|
||
btnAdminCreate.addEventListener('click', async () => {
|
||
const username = adminUsername.value.trim();
|
||
const password = adminPassword.value;
|
||
const confirm = adminPasswordConfirm.value;
|
||
|
||
if (!username || !password) return showAdminMessage('请填写用户名和密码', true);
|
||
if (password !== confirm) return showAdminMessage('两次输入的密码不一致', true);
|
||
|
||
btnAdminCreate.disabled = true;
|
||
btnAdminCreate.textContent = '创建中...';
|
||
|
||
try {
|
||
const res = await fetch('/api/setup/admin', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ username, password })
|
||
});
|
||
const data = await res.json();
|
||
if (res.ok) {
|
||
showAdminMessage('管理员账户创建成功！');
|
||
setTimeout(checkStatus, 1000);
|
||
} else {
|
||
showAdminMessage('创建失败: ' + (data.error || '未知错误'), true);
|
||
btnAdminCreate.disabled = false;
|
||
btnAdminCreate.textContent = '创建账户';
|
||
}
|
||
} catch (err) {
|
||
showAdminMessage('请求失败: ' + err.message, true);
|
||
btnAdminCreate.disabled = false;
|
||
btnAdminCreate.textContent = '创建账户';
|
||
}
|
||
});
|
||
|
||
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();
|
||
// If 401, it means we somehow bypassed auth on this step, but it might be okay during init
|
||
showPromMessage(`添加失败: ${err.error || '未知错误'}`, true);
|
||
btnPromAdd.disabled = false;
|
||
btnPromAdd.textContent = oldText;
|
||
}
|
||
} catch (err) {
|
||
showPromMessage('请求失败: ' + err.message, true);
|
||
btnPromAdd.disabled = false;
|
||
btnPromAdd.textContent = oldText;
|
||
}
|
||
});
|
||
});
|