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

修改为直接与blackbox通信

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-06 00:24:33 +08:00
parent d4d2927963
commit e8b60ce28b
6 changed files with 167 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/css/style.css
View File

@@ -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 {

17
public/index.html
View File

@@ -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">

26
public/js/app.js
View File

@@ -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) {