修改为直接与blackbox通信

2026-04-06 00:24:33 +08:00
parent d4d2927963
commit e8b60ce28b
6 changed files with 167 additions and 36 deletions
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1987,18 +1987,24 @@ input:checked+.slider:before {
 /* ---- Globe Card Expansion ---- */
 .globe-card.expanded {
    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 5vh;
+    left: 2.5vw;
    width: 95vw !important;
    height: 90vh !important;
-    z-index: 2000;
-    box-shadow: 0 0 100px rgba(0, 0, 0, 0.8), 0 0 0 100vh rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(15px);
-    animation: globeExpand 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    z-index: 9999;
+    transform: none !important; /* Remove translate to avoid coordinate issues */
+    transition: none !important; /* Avoid transition conflicts during state jump */
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9), 0 0 0 100vh rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(20px);
    margin: 0 !important;
-    display: flex !important; /* Force flex for proper internal layout */
+    display: flex !important;
    flex-direction: column;
+    border-color: var(--accent-indigo);
+}
+
+/* Ensure children are visible */
+.globe-card.expanded > * {
+    opacity: 1 !important;
 }

@keyframes globeExpand {
@@ -2013,9 +2019,10 @@ input:checked+.slider:before {
 }

 .globe-card.expanded .globe-body {
-    flex: 1; /* Allow map to fill all remaining space */
-    height: auto !important; /* Override fixed height in expanded state */
-    min-height: 0;
+    height: calc(90vh - 120px) !important; /* Explicit calc height for ECharts reliability */
+    width: 100% !important;
+    flex: none; 
+    min-height: 400px;
 }

 .chart-header-actions {
--- a/public/index.html
+++ b/public/index.html
@@ -369,13 +369,20 @@
            <div class="add-source-form" id="addSourceForm">
              <h3>添加数据源</h3>
              <div class="form-row">
-                <div class="form-group">
-                  <label for="sourceName">名称</label>
-                  <input type="text" id="sourceName" placeholder="例：生产环境" autocomplete="off">
+                <div class="form-group" style="flex: 0.8;">
+                   <label for="sourceType">类型</label>
+                   <select id="sourceType" style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); outline: none;">
+                      <option value="prometheus">Prometheus</option>
+                      <option value="blackbox">Blackbox Exporter</option>
+                   </select>
+                </div>
+                <div class="form-group" style="flex: 1;">
+                   <label for="sourceName">名称</label>
+                   <input type="text" id="sourceName" placeholder="例：生产环境" autocomplete="off">
                </div>
                <div class="form-group form-group-wide">
-                  <label for="sourceUrl">Prometheus URL</label>
-                  <input type="url" id="sourceUrl" placeholder="http://prometheus.example.com:9090" autocomplete="off">
+                  <label for="sourceUrl">URL 地址</label>
+                  <input type="url" id="sourceUrl" placeholder="http://1.2.3.4:9090" autocomplete="off">
                </div>
              </div>
              <div class="form-row">
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -33,6 +33,7 @@
    modalClose: document.getElementById('modalClose'),
    sourceName: document.getElementById('sourceName'),
    sourceUrl: document.getElementById('sourceUrl'),
+    sourceType: document.getElementById('sourceType'),
    sourceDesc: document.getElementById('sourceDesc'),
    btnTest: document.getElementById('btnTest'),
    btnAdd: document.getElementById('btnAdd'),
@@ -185,11 +186,17 @@
        dom.globeCard.classList.toggle('expanded');
        dom.btnExpandGlobe.classList.toggle('active');
        if (myMap2D) {
-          // Multiple resizes to handle animation phases and final layout
-          myMap2D.resize(); 
-          setTimeout(() => myMap2D.resize(), 100);
-          setTimeout(() => myMap2D.resize(), 300);
-          setTimeout(() => myMap2D.resize(), 600); // Final resize after animation
+          // Immediately hide and then show map or just resize? 
+          // ECharts can sometimes glitch when position:fixed + transform happens.
+          // Since we removed transform, resize should be smoother.
+          myMap2D.resize();
+          
+          let resizeCount = 0;
+          const timer = setInterval(() => {
+            myMap2D.resize();
+            resizeCount++;
+            if (resizeCount >= 5) clearInterval(timer);
+          }, 100);
        }
      });
    }
@@ -1716,7 +1723,7 @@
              ${source.status === 'online' ? '在线' : '离线'}
            </span>
            <span class="source-type-badge ${source.is_server_source ? 'type-server' : 'type-other'}" title="${source.is_server_source ? '该数据源用于展示服务器列表和指标' : '该数据源仅用于特定目的（如 Blackbox 延迟），不参与服务器列表统计'}">
-              ${source.is_server_source ? '服务器看板' : '独立数据源'}
+              ${source.type === 'blackbox' ? 'Blackbox' : (source.is_server_source ? '服务器看板' : '独立数据源')}
            </span>
          </div>
          <div class="source-item-url">${escapeHtml(source.url)}</div>
@@ -1737,6 +1744,8 @@
      return;
    }

+    const type = dom.sourceType.value;
+
    dom.btnTest.textContent = '测试中...';
    dom.btnTest.disabled = true;

@@ -1744,7 +1753,7 @@
      const response = await fetch('/api/sources/test', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ url })
+        body: JSON.stringify({ url, type })
      });
      const data = await response.json();
      if (data.status === 'ok') {
@@ -1775,6 +1784,7 @@

    const name = dom.sourceName.value.trim();
    const url = dom.sourceUrl.value.trim();
+    const type = dom.sourceType.value;
    const description = dom.sourceDesc.value.trim();
    const is_server_source = dom.isServerSource.checked;

@@ -1790,7 +1800,7 @@
      const response = await fetch('/api/sources', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name, url, description, is_server_source })
+        body: JSON.stringify({ name, url, description, is_server_source, type })
      });

      if (response.ok) {
--- a/server/db-integrity-check.js
+++ b/server/db-integrity-check.js
@@ -38,15 +38,22 @@ async function checkAndFixDatabase() {
      console.log(`[Database Integrity] ✅ Missing tables created.`);
    }

-    // Check for is_server_source in prometheus_sources
+    // Check for is_server_source and type in prometheus_sources
    const [promColumns] = await db.query("SHOW COLUMNS FROM prometheus_sources");
    const promColumnNames = promColumns.map(c => c.Field);
+    
    if (!promColumnNames.includes('is_server_source')) {
      console.log(`[Database Integrity] ⚠️ Missing column 'is_server_source' in 'prometheus_sources'. Adding it...`);
      await db.query("ALTER TABLE prometheus_sources ADD COLUMN is_server_source TINYINT(1) DEFAULT 1 AFTER description");
      console.log(`[Database Integrity] ✅ Column 'is_server_source' added.`);
    }

+    if (!promColumnNames.includes('type')) {
+      console.log(`[Database Integrity] ⚠️ Missing column 'type' in 'prometheus_sources'. Adding it...`);
+      await db.query("ALTER TABLE prometheus_sources ADD COLUMN type VARCHAR(50) DEFAULT 'prometheus' AFTER is_server_source");
+      console.log(`[Database Integrity] ✅ Column 'type' added.`);
+    }
+
    // Check for new columns in site_settings
    const [columns] = await db.query("SHOW COLUMNS FROM site_settings");
    const columnNames = columns.map(c => c.Field);
--- a/server/index.js
+++ b/server/index.js
@@ -6,6 +6,7 @@ const db = require('./db');
 const prometheusService = require('./prometheus-service');
 const cache = require('./cache');
 const geoService = require('./geo-service');
+const latencyService = require('./latency-service');
 const checkAndFixDatabase = require('./db-integrity-check');
 const http = require('http');
 const WebSocket = require('ws');
@@ -451,7 +452,14 @@ app.get('/api/sources', async (req, res) => {
    // Test connectivity for each source
    const sourcesWithStatus = await Promise.all(rows.map(async (source) => {
      try {
-        const response = await prometheusService.testConnection(source.url);
+        let response;
+        if (source.type === 'blackbox') {
+          // Simple check for blackbox exporter
+          const res = await fetch(`${source.url.replace(/\/+$/, '')}/metrics`, { timeout: 3000 }).catch(() => null);
+          response = (res && res.ok) ? 'Blackbox Exporter Ready' : 'Connection Error';
+        } else {
+          response = await prometheusService.testConnection(source.url);
+        }
        return { ...source, status: 'online', version: response };
      } catch (e) {
        return { ...source, status: 'offline', version: null };
@@ -466,15 +474,15 @@ app.get('/api/sources', async (req, res) => {

 // Add a new Prometheus source
 app.post('/api/sources', requireAuth, async (req, res) => {
-  let { name, url, description, is_server_source } = req.body;
+  let { name, url, description, is_server_source, type } = req.body;
  if (!name || !url) {
    return res.status(400).json({ error: 'Name and URL are required' });
  }
  if (!/^https?:\/\//i.test(url)) url = 'http://' + url;
  try {
    const [result] = await db.query(
-      'INSERT INTO prometheus_sources (name, url, description, is_server_source) VALUES (?, ?, ?, ?)',
-      [name, url, description || '', is_server_source === undefined ? 1 : (is_server_source ? 1 : 0)]
+      'INSERT INTO prometheus_sources (name, url, description, is_server_source, type) VALUES (?, ?, ?, ?, ?)',
+      [name, url, description || '', is_server_source === undefined ? 1 : (is_server_source ? 1 : 0), type || 'prometheus']
    );
    const [rows] = await db.query('SELECT * FROM prometheus_sources WHERE id = ?', [result.insertId]);
    
@@ -494,8 +502,8 @@ app.put('/api/sources/:id', requireAuth, async (req, res) => {
  if (url && !/^https?:\/\//i.test(url)) url = 'http://' + url;
  try {
    await db.query(
-      'UPDATE prometheus_sources SET name = ?, url = ?, description = ?, is_server_source = ? WHERE id = ?',
-      [name, url, description || '', is_server_source ? 1 : 0, req.params.id]
+      'UPDATE prometheus_sources SET name = ?, url = ?, description = ?, is_server_source = ?, type = ? WHERE id = ?',
+      [name, url, description || '', is_server_source ? 1 : 0, type || 'prometheus', req.params.id]
    );
    // Clear network history cache
    await cache.del('network_history_all');
@@ -523,11 +531,18 @@ app.delete('/api/sources/:id', requireAuth, async (req, res) => {

 // Test connection to a Prometheus source
 app.post('/api/sources/test', async (req, res) => {
-  let { url } = req.body;
+  let { url, type } = req.body;
  if (url && !/^https?:\/\//i.test(url)) url = 'http://' + url;
  try {
-    const version = await prometheusService.testConnection(url);
-    res.json({ status: 'ok', version });
+    let result;
+    if (type === 'blackbox') {
+      const resVal = await fetch(`${url.replace(/\/+$/, '')}/metrics`, { timeout: 5000 }).catch(() => null);
+      result = (resVal && resVal.ok) ? 'Blackbox Exporter Ready' : 'Connection Failed';
+      if (!resVal || !resVal.ok) throw new Error(result);
+    } else {
+      result = await prometheusService.testConnection(url);
+    }
+    res.json({ status: 'ok', version: result });
  } catch (err) {
    res.status(400).json({ status: 'error', message: err.message });
  }
@@ -893,7 +908,14 @@ app.get('/api/metrics/latency', async (req, res) => {
    }

    const results = await Promise.all(routes.map(async (route) => {
-      const latency = await prometheusService.getLatency(route.url, route.latency_target);
+      // Try to get from Valkey first (filled by background latencyService)
+      let latency = await cache.get(`latency:route:${route.id}`);
+      
+      // Fallback if not in cache (maybe service just started or failed)
+      if (latency === null) {
+        latency = await prometheusService.getLatency(route.url, route.latency_target);
+      }
+
      return {
        id: route.id,
        source: route.latency_source,
@@ -933,8 +955,9 @@ async function broadcastMetrics() {
  }
 }

-// Check and fix database integrity on startup
+// Start services
 checkAndFixDatabase();
+latencyService.start();

 const REFRESH_INT = parseInt(process.env.REFRESH_INTERVAL) || 5000;
 setInterval(broadcastMetrics, REFRESH_INT);
--- a/server/latency-service.js
+++ b/server/latency-service.js
@@ -0,0 +1,77 @@
+const axios = require('axios');
+const cache = require('./cache');
+const db = require('./db');
+
+const POLL_INTERVAL = 10000; // 10 seconds
+
+async function pollLatency() {
+    try {
+        const [routes] = await db.query(`
+            SELECT r.*, s.url 
+            FROM latency_routes r 
+            JOIN prometheus_sources s ON r.source_id = s.id
+            WHERE s.type = 'blackbox'
+        `);
+
+        if (routes.length === 0) return;
+
+        // Poll each route
+        await Promise.allSettled(routes.map(async (route) => {
+            try {
+                // Blackbox exporter probe URL
+                // We assume ICMP module for now. If target is a URL, maybe use http_2xx
+                let module = 'icmp';
+                let target = route.latency_target;
+                
+                if (target.startsWith('http://') || target.startsWith('https://')) {
+                    module = 'http_2xx';
+                }
+
+                const probeUrl = `${route.url.replace(/\/+$/, '')}/probe?module=${module}&target=${encodeURIComponent(target)}`;
+                
+                const startTime = Date.now();
+                const response = await axios.get(probeUrl, { timeout: 5000 });
+                const duration = (Date.now() - startTime) / 1000; // Fallback to local timing if parsing fails
+
+                // Parse prometheus text format for probe_duration_seconds
+                let latency = null;
+                const lines = response.data.split('\n');
+                for (const line of lines) {
+                    // Match "probe_duration_seconds 0.123" or "probe_duration_seconds{...} 0.123"
+                    const match = line.match(/^probe_duration_seconds(?:\{.*\})?\s+([\d.]+)/);
+                    if (match) {
+                        latency = parseFloat(match[1]) * 1000; // to ms
+                        break;
+                    }
+                }
+
+                if (latency === null) {
+                    // Fallback to local response time if metric not found in output
+                    latency = duration * 1000;
+                }
+
+                // Save to Valkey
+                await cache.set(`latency:route:${route.id}`, latency, 60);
+                // console.log(`[Latency] Route ${route.id} (${target}): ${latency.toFixed(2)}ms`);
+            } catch (err) {
+                // console.error(`[Latency] Error polling route ${route.id}:`, err.message);
+                await cache.set(`latency:route:${route.id}`, null, 60);
+            }
+        }));
+    } catch (err) {
+        console.error('[Latency] Service error:', err.message);
+    }
+}
+
+let intervalId = null;
+
+function start() {
+    if (intervalId) clearInterval(intervalId);
+    pollLatency(); // initial run
+    intervalId = setInterval(pollLatency, POLL_INTERVAL);
+    console.log('[Latency] Background service started (polling Blackbox Exporter directly)');
+}
+
+module.exports = {
+    start
+};