CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

添加延迟显示支持

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-05 23:38:53 +08:00
parent 84972cdaeb
commit 058a6c73a1
7 changed files with 450 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/css/style.css
View File

@@ -1604,6 +1604,7 @@ input:checked+.slider:before {
display: flex;
gap: 12px;
margin-bottom: 12px;
align-items: flex-end;
}
.form-group {
@@ -1776,6 +1777,29 @@ input:checked+.slider:before {
letter-spacing: 0.05em;
}
.source-type-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.source-type-badge.type-server {
background: rgba(99, 102, 241, 0.1);
color: #818cf8;
border: 1px solid rgba(99, 102, 241, 0.2);
}
.source-type-badge.type-other {
background: rgba(139, 92, 246, 0.1);
color: #a78bfa;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.source-status-online {
background: rgba(16, 185, 129, 0.1);
color: var(--accent-emerald);

29
public/index.html
View File

@@ -376,6 +376,12 @@
<label for="sourceDesc">描述 (可选)</label>
<input type="text" id="sourceDesc" placeholder="数据源描述" autocomplete="off">
</div>
<div class="form-group" style="display: flex; align-items: flex-end; padding-bottom: 8px;">
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
<input type="checkbox" id="isServerSource" checked style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
<span>用于服务器展示</span>
</label>
</div>
<div class="form-actions">
<button class="btn btn-test" id="btnTest">测试连接</button>
<button class="btn btn-add" id="btnAdd">添加</button>
@@ -434,6 +440,29 @@
<option value="both">统计上行+下行 (Sum)</option>
</select>
</div>
<h3 style="margin-top: 30px; border-top: 1px solid var(--border-color); padding-top: 20px;">Blackbox Exporter & 延迟连线</h3>
<div class="form-group">
<label for="blackboxSourceSelect">延迟数据源 (选择已对接 Blackbox 的 Prometheus)</label>
<select id="blackboxSourceSelect"
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
<option value="">-- 请选择数据源 --</option>
<!-- Sources will be injected here -->
</select>
</div>
<div class="form-row" style="margin-top: 15px;">
<div class="form-group">
<label for="latencySourceInput">起航点国家/地区A (地图连线起点)</label>
<input type="text" id="latencySourceInput" placeholder="例：China">
</div>
<div class="form-group">
<label for="latencyDestInput">目的地国家/地区B (地图连线终点)</label>
<input type="text" id="latencyDestInput" placeholder="例：United States">
</div>
</div>
<div class="form-group" style="margin-top: 15px;">
<label for="latencyTargetInput">Blackbox 探测目标 (在Prometheus中的instance标签值)</label>
<input type="text" id="latencyTargetInput" placeholder="例：8.8.8.8">
</div>
<div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
<button class="btn btn-add" id="btnSaveSiteSettings">保存设置</button>
</div>

138
public/js/app.js
View File

@@ -36,6 +36,7 @@
sourceDesc: document.getElementById('sourceDesc'),
btnTest: document.getElementById('btnTest'),
btnAdd: document.getElementById('btnAdd'),
isServerSource: document.getElementById('isServerSource'),
formMessage: document.getElementById('formMessage'),
sourceItems: document.getElementById('sourceItems'),
// Site Settings
@@ -66,6 +67,10 @@
legendTx: document.getElementById('legendTx'),
p95LabelText: document.getElementById('p95LabelText'),
p95TypeSelect: document.getElementById('p95TypeSelect'),
blackboxSourceSelect: document.getElementById('blackboxSourceSelect'),
latencySourceInput: document.getElementById('latencySourceInput'),
latencyDestInput: document.getElementById('latencyDestInput'),
latencyTargetInput: document.getElementById('latencyTargetInput'),
detailDiskTotal: document.getElementById('detailDiskTotal'),
// Server Details Modal
serverDetailModal: document.getElementById('serverDetailModal'),
@@ -105,6 +110,8 @@
let currentSourceFilter = 'all';
let currentPage = 1;
let pageSize = 20;
let currentLatency = null;
let latencyTimer = null;
// Load sort state from localStorage or use default
let currentSort = { column: 'up', direction: 'desc' };
@@ -285,6 +292,7 @@
// Start data fetching
fetchMetrics();
fetchNetworkHistory();
fetchLatency();
// Site settings
if (window.SITE_SETTINGS) {
@@ -301,6 +309,10 @@
dom.defaultThemeInput.value = window.SITE_SETTINGS.default_theme || 'dark';
dom.show95BandwidthInput.value = window.SITE_SETTINGS.show_95_bandwidth ? "1" : "0";
dom.p95TypeSelect.value = window.SITE_SETTINGS.p95_type || 'tx';
// blackboxSourceSelect will be set after sources are fetched in updateSourceFilterOptions
dom.latencySourceInput.value = window.SITE_SETTINGS.latency_source || '';
dom.latencyDestInput.value = window.SITE_SETTINGS.latency_dest || '';
dom.latencyTargetInput.value = window.SITE_SETTINGS.latency_target || '';
}
loadSiteSettings();
@@ -308,6 +320,7 @@
// setInterval(fetchMetrics, REFRESH_INTERVAL); - Now using WebSockets
initWebSocket();
setInterval(fetchNetworkHistory, NETWORK_HISTORY_INTERVAL);
setInterval(fetchLatency, REFRESH_INTERVAL);
}
// ---- Real-time WebSocket ----
@@ -476,6 +489,19 @@
}
}
async function fetchLatency() {
try {
const response = await fetch('/api/metrics/latency');
const data = await response.json();
currentLatency = data.latency;
if (allServersData.length > 0) {
updateMap2D(allServersData);
}
} catch (err) {
console.error('Error fetching latency:', err);
}
}
// ---- Global 2D Map ----
async function initMap2D() {
if (!dom.globeContainer) return;
@@ -577,7 +603,6 @@
}
});
}
function updateMap2D(servers) {
if (!myMap2D) return;
@@ -594,13 +619,96 @@
netTx: s.netTx
}));
// Draw latency line if configured
if (window.SITE_SETTINGS && window.SITE_SETTINGS.latency_source && window.SITE_SETTINGS.latency_dest) {
const sourceName = window.SITE_SETTINGS.latency_source;
const destName = window.SITE_SETTINGS.latency_dest;
// Coordinates for countries (fallback to common ones or try to find in geoJSON)
const countryCoords = {
'China': [116.4074, 39.9042],
'United States': [-95.7129, 37.0902],
'Japan': [138.2529, 36.2048],
'Singapore': [103.8198, 1.3521],
'Germany': [10.4515, 51.1657],
'United Kingdom': [-3.436, 55.3781],
'France': [2.2137, 46.2276],
'Hong Kong': [114.1694, 22.3193],
'Taiwan': [120.9605, 23.6978],
'Korea': [127.7669, 35.9078]
};
const getCoords = (name) => {
if (countryCoords[name]) return countryCoords[name];
// Try to find in current server data
const s = servers.find(sv => sv.countryName === name || sv.country === name);
if (s && s.lng && s.lat) return [s.lng, s.lat];
return null;
};
const startCoords = getCoords(sourceName);
const endCoords = getCoords(destName);
if (startCoords && endCoords) {
const lineData = [{
fromName: sourceName,
toName: destName,
coords: [startCoords, endCoords],
latency: currentLatency
}];
const lineSeries = {
type: 'lines',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 2,
effect: {
show: true,
period: 4,
trailLength: 0.1,
color: 'rgba(99, 102, 241, 0.8)',
symbol: 'arrow',
symbolSize: 6
},
lineStyle: {
color: 'rgba(99, 102, 241, 0.3)',
width: 2,
curveness: 0.2
},
tooltip: {
formatter: () => {
const latVal = (currentLatency !== null && currentLatency !== undefined) ? `${currentLatency.toFixed(2)} ms` : '测量中...';
return `
<div style="padding: 4px;">
<div style="font-weight: 700;">${sourceName} ↔ ${destName}</div>
<div style="font-size: 0.75rem; color: var(--accent-indigo); margin-top: 4px;">延时: ${latVal}</div>
</div>
`;
}
},
data: lineData
};
// Add or update line series
const options = myMap2D.getOption();
const series = options.series;
// Filter out existing latency lines to update
const newSeries = series.filter(s => s.type !== 'lines' || !s.latencyLine);
lineSeries.latencyLine = true;
newSeries.push(lineSeries);
myMap2D.setOption({ series: newSeries });
}
}
myMap2D.setOption({
series: [{
coordinateSystem: 'geo',
geoIndex: 0,
data: geoData
}]
});
}, { replaceMerge: ['series'] });
// Update footer stats
if (dom.globeTotalNodes) dom.globeTotalNodes.textContent = geoData.length;
@@ -1324,7 +1432,11 @@
logo_url: dom.logoUrlInput.value.trim(),
default_theme: dom.defaultThemeInput.value,
show_95_bandwidth: dom.show95BandwidthInput.value === "1" ? 1 : 0,
p95_type: dom.p95TypeSelect.value
p95_type: dom.p95TypeSelect.value,
blackbox_source_id: dom.blackboxSourceSelect.value ? parseInt(dom.blackboxSourceSelect.value) : null,
latency_source: dom.latencySourceInput.value.trim(),
latency_dest: dom.latencyDestInput.value.trim(),
latency_target: dom.latencyTargetInput.value.trim()
};
dom.btnSaveSiteSettings.disabled = true;
@@ -1434,7 +1546,7 @@
}
function updateSourceFilterOptions(sources) {
if (!dom.sourceFilter) return;
if (dom.sourceFilter) {
const current = dom.sourceFilter.value;
let html = '<option value="all">所有数据源</option>';
sources.forEach(source => {
@@ -1449,6 +1561,18 @@
}
}
if (dom.blackboxSourceSelect) {
let html = '<option value="">-- 请选择延迟数据源 --</option>';
sources.forEach(source => {
html += `<option value="${source.id}">${escapeHtml(source.name)}</option>`;
});
dom.blackboxSourceSelect.innerHTML = html;
if (window.SITE_SETTINGS && window.SITE_SETTINGS.blackbox_source_id) {
dom.blackboxSourceSelect.value = window.SITE_SETTINGS.blackbox_source_id;
}
}
}
async function loadSources() {
try {
const response = await fetch('/api/sources');
@@ -1475,6 +1599,9 @@
<span class="source-status ${source.status === 'online' ? 'source-status-online' : 'source-status-offline'}">
${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 ? '服务器看板' : '独立数据源'}
</span>
</div>
<div class="source-item-url">${escapeHtml(source.url)}</div>
${source.description ? `<div class="source-item-desc">${escapeHtml(source.description)}</div>` : ''}
@@ -1533,6 +1660,7 @@
const name = dom.sourceName.value.trim();
const url = dom.sourceUrl.value.trim();
const description = dom.sourceDesc.value.trim();
const is_server_source = dom.isServerSource.checked;
if (!name || !url) {
showMessage('请填写名称和URL', 'error');
@@ -1546,7 +1674,7 @@
const response = await fetch('/api/sources', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, url, description })
body: JSON.stringify({ name, url, description, is_server_source })
});
if (response.ok) {

33
server/db-integrity-check.js
View File

@@ -37,6 +37,15 @@ async function checkAndFixDatabase() {
console.log(`[Database Integrity] ✅ Missing tables created.`);
}
// Check for is_server_source 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.`);
}
// Check for new columns in site_settings
const [columns] = await db.query("SHOW COLUMNS FROM site_settings");
const columnNames = columns.map(c => c.Field);
@@ -50,6 +59,26 @@ async function checkAndFixDatabase() {
await db.query("ALTER TABLE site_settings ADD COLUMN p95_type VARCHAR(20) DEFAULT 'tx' AFTER show_95_bandwidth");
console.log(`[Database Integrity] ✅ Column 'p95_type' added.`);
}
if (!columnNames.includes('blackbox_source_id')) {
console.log(`[Database Integrity] ⚠️ Missing column 'blackbox_source_id' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN blackbox_source_id INT AFTER p95_type");
console.log(`[Database Integrity] ✅ Column 'blackbox_source_id' added.`);
}
if (!columnNames.includes('latency_source')) {
console.log(`[Database Integrity] ⚠️ Missing column 'latency_source' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN latency_source VARCHAR(100) AFTER blackbox_url");
console.log(`[Database Integrity] ✅ Column 'latency_source' added.`);
}
if (!columnNames.includes('latency_dest')) {
console.log(`[Database Integrity] ⚠️ Missing column 'latency_dest' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN latency_dest VARCHAR(100) AFTER latency_source");
console.log(`[Database Integrity] ✅ Column 'latency_dest' added.`);
}
if (!columnNames.includes('latency_target')) {
console.log(`[Database Integrity] ⚠️ Missing column 'latency_target' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN latency_target VARCHAR(255) AFTER latency_dest");
console.log(`[Database Integrity] ✅ Column 'latency_target' added.`);
}
} catch (err) {
console.error('[Database Integrity] ❌ Error checking integrity:', err.message);
}
@@ -91,6 +120,10 @@ async function createTable(tableName) {
default_theme VARCHAR(20) DEFAULT 'dark',
show_95_bandwidth TINYINT(1) DEFAULT 0,
p95_type VARCHAR(20) DEFAULT 'tx',
blackbox_source_id INT,
latency_source VARCHAR(100),
latency_dest VARCHAR(100),
latency_target VARCHAR(255),
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);

77
server/index.js
View File

@@ -264,6 +264,10 @@ app.post('/api/setup/init', async (req, res) => {
default_theme VARCHAR(20) DEFAULT 'dark',
show_95_bandwidth TINYINT(1) DEFAULT 0,
p95_type VARCHAR(20) DEFAULT 'tx',
blackbox_source_id INT,
latency_source VARCHAR(100),
latency_dest VARCHAR(100),
latency_target VARCHAR(255),
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
@@ -403,7 +407,11 @@ const serveIndex = async (req, res) => {
page_name: '数据可视化展示大屏',
title: '数据可视化展示大屏',
logo_url: null,
default_theme: 'dark'
default_theme: 'dark',
blackbox_source_id: null,
latency_source: null,
latency_dest: null,
latency_target: null
};
if (isDbInitialized) {
@@ -439,7 +447,7 @@ app.use(express.static(path.join(__dirname, '..', 'public'), { index: false }));
// Get all Prometheus sources
app.get('/api/sources', async (req, res) => {
try {
const [rows] = await db.query('SELECT * FROM prometheus_sources ORDER BY created_at DESC');
const [rows] = await db.query('SELECT * FROM prometheus_sources ORDER BY is_server_source DESC, created_at DESC');
// Test connectivity for each source
const sourcesWithStatus = await Promise.all(rows.map(async (source) => {
try {
@@ -458,15 +466,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 } = req.body;
let { name, url, description, is_server_source } = 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) VALUES (?, ?, ?)',
[name, url, description || '']
'INSERT INTO prometheus_sources (name, url, description, is_server_source) VALUES (?, ?, ?, ?)',
[name, url, description || '', is_server_source === undefined ? 1 : (is_server_source ? 1 : 0)]
);
const [rows] = await db.query('SELECT * FROM prometheus_sources WHERE id = ?', [result.insertId]);
@@ -482,12 +490,12 @@ app.post('/api/sources', requireAuth, async (req, res) => {
// Update a Prometheus source
app.put('/api/sources/:id', requireAuth, async (req, res) => {
let { name, url, description } = req.body;
let { name, url, description, is_server_source } = req.body;
if (url && !/^https?:\/\//i.test(url)) url = 'http://' + url;
try {
await db.query(
'UPDATE prometheus_sources SET name = ?, url = ?, description = ? WHERE id = ?',
[name, url, description || '', req.params.id]
'UPDATE prometheus_sources SET name = ?, url = ?, description = ?, is_server_source = ? WHERE id = ?',
[name, url, description || '', is_server_source ? 1 : 0, req.params.id]
);
// Clear network history cache
await cache.del('network_history_all');
@@ -537,7 +545,11 @@ app.get('/api/settings', async (req, res) => {
title: '数据可视化展示大屏',
logo_url: null,
show_95_bandwidth: 0,
p95_type: 'tx'
p95_type: 'tx',
blackbox_source_id: null,
latency_source: null,
latency_dest: null,
latency_target: null
});
}
res.json(rows[0]);
@@ -549,19 +561,28 @@ app.get('/api/settings', async (req, res) => {
// Update site settings
app.post('/api/settings', requireAuth, async (req, res) => {
const { page_name, title, logo_url, default_theme, show_95_bandwidth, p95_type } = req.body;
const { page_name, title, logo_url, default_theme, show_95_bandwidth, p95_type, blackbox_source_id, latency_source, latency_dest, latency_target } = req.body;
try {
await db.query(
`INSERT INTO site_settings (id, page_name, title, logo_url, default_theme, show_95_bandwidth, p95_type)
VALUES (1, ?, ?, ?, ?, ?, ?)
`INSERT INTO site_settings (id, page_name, title, logo_url, default_theme, show_95_bandwidth, p95_type, blackbox_source_id, latency_source, latency_dest, latency_target)
VALUES (1, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
ON DUPLICATE KEY UPDATE
page_name = VALUES(page_name),
title = VALUES(title),
logo_url = VALUES(logo_url),
default_theme = VALUES(default_theme),
show_95_bandwidth = VALUES(show_95_bandwidth),
p95_type = VALUES(p95_type)`,
[page_name, title, logo_url, default_theme, show_95_bandwidth ? 1 : 0, p95_type || 'tx']
p95_type = VALUES(p95_type),
blackbox_source_id = VALUES(blackbox_source_id),
latency_source = VALUES(latency_source),
latency_dest = VALUES(latency_dest),
latency_target = VALUES(latency_target)`,
[
page_name, title, logo_url, default_theme,
show_95_bandwidth ? 1 : 0, p95_type || 'tx',
blackbox_source_id || null, latency_source || null,
latency_dest || null, latency_target || null
]
);
res.json({ success: true });
} catch (err) {
@@ -574,7 +595,7 @@ app.post('/api/settings', requireAuth, async (req, res) => {
// Reusable function to get overview metrics
async function getOverview() {
const [sources] = await db.query('SELECT * FROM prometheus_sources');
const [sources] = await db.query('SELECT * FROM prometheus_sources WHERE is_server_source = 1');
if (sources.length === 0) {
return {
totalServers: 0,
@@ -715,7 +736,7 @@ app.get('/api/metrics/network-history', async (req, res) => {
const cached = await cache.get(cacheKey);
if (cached) return res.json(cached);
const [sources] = await db.query('SELECT * FROM prometheus_sources');
const [sources] = await db.query('SELECT * FROM prometheus_sources WHERE is_server_source = 1');
if (sources.length === 0) {
return res.json({ timestamps: [], rx: [], tx: [] });
}
@@ -744,7 +765,7 @@ app.get('/api/metrics/network-history', async (req, res) => {
// Get CPU usage history for sparklines
app.get('/api/metrics/cpu-history', async (req, res) => {
try {
const [sources] = await db.query('SELECT * FROM prometheus_sources');
const [sources] = await db.query('SELECT * FROM prometheus_sources WHERE is_server_source = 1');
if (sources.length === 0) {
return res.json({ timestamps: [], values: [] });
}
@@ -821,6 +842,28 @@ app.get('*', (req, res, next) => {
});
// Get latency for A-B connection
app.get('/api/metrics/latency', async (req, res) => {
try {
const [settings] = await db.query('SELECT blackbox_source_id, latency_target FROM site_settings WHERE id = 1');
if (settings.length === 0 || !settings[0].blackbox_source_id || !settings[0].latency_target) {
return res.json({ latency: null });
}
// Lookup source URL from the source ID
const [sources] = await db.query('SELECT url FROM prometheus_sources WHERE id = ?', [settings[0].blackbox_source_id]);
if (sources.length === 0) {
return res.json({ latency: null });
}
const latency = await prometheusService.getLatency(sources[0].url, settings[0].latency_target);
res.json({ latency });
} catch (err) {
console.error('Error fetching latency:', err);
res.status(500).json({ error: 'Failed to fetch latency' });
}
});
// ==================== WebSocket Server ====================
const server = http.createServer(app);

19
server/prometheus-service.js
View File

@@ -800,5 +800,22 @@ module.exports = {
mergeCpuHistories,
getServerDetails,
getServerHistory,
resolveToken
resolveToken,
getLatency: async (blackboxUrl, target) => {
if (!blackboxUrl || !target) return null;
try {
const normalized = blackboxUrl.trim().replace(/\/+$/, '');
const params = new URLSearchParams({ query: `probe_duration_seconds{instance="${target}"}` });
const res = await fetch(`${normalized}/api/v1/query?${params.toString()}`);
if (!res.ok) return null;
const data = await res.json();
if (data.status === 'success' && data.data.result.length > 0) {
return parseFloat(data.data.result[0].value[1]) * 1000;
}
return null;
} catch (err) {
console.error(`[Prometheus] Error fetching latency for ${target}:`, err.message);
return null;
}
}
};