PromdataPanel/public/js/init.js

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');

  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;
    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(() => {
          initForm.style.display = 'none';
          promForm.style.display = 'block';
          initHeaderTitle.textContent = '配置 Prometheus';
          initHeaderDesc.textContent = '配置您的第一个 Prometheus 数据源监控连接';
        }, 1000);
      } else {
        showMessage('初始化失败: ' + (data.error || '未知错误'), true);
        btnInit.disabled = false;
        btnInit.textContent = oldText;
      }
    } catch (err) {
      showMessage('请求失败: ' + err.message, true);
      btnInit.disabled = false;
      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;
    }
  });
});