优化时间范围选择
This commit is contained in:
CN-JS-HuiBai
@@ -869,6 +869,240 @@ input:checked+.slider:before {
|
|||||||
box-shadow: 0 0 8px rgba(244, 63, 94, 0.4);
|
box-shadow: 0 0 8px rgba(244, 63, 94, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Server Detail Modal Enhancements */
|
||||||
|
.detail-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-metrics-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item-header:hover {
|
||||||
|
background: rgba(99, 102, 241, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent-indigo);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item-content {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
border-top: 0px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item.active .metric-item-content {
|
||||||
|
max-height: 350px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item.active {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
border-color: var(--accent-indigo);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-range-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-range-selector {
|
||||||
|
display: flex;
|
||||||
|
background: var(--bg-input);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-range-btn {
|
||||||
|
padding: 4px 10px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-range-btn:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-range-btn.active {
|
||||||
|
background: var(--accent-indigo);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-range-selector {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
background: var(--bg-input);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 2px 2px 2px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-range-input {
|
||||||
|
width: 90px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
outline: none;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute-range-selector {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: var(--bg-input);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 2px 2px 2px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
outline: none;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Specific styling for datetime-local icon/color in some browsers */
|
||||||
|
.time-input::-webkit-calendar-picker-indicator {
|
||||||
|
filter: invert(0.5);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .time-input::-webkit-calendar-picker-indicator {
|
||||||
|
filter: invert(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-custom-go {
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
border: none;
|
||||||
|
background: var(--accent-indigo);
|
||||||
|
color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-custom-go:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-chart-wrapper {
|
||||||
|
height: 200px;
|
||||||
|
padding: 0 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1px;
|
||||||
|
background: var(--border-color);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
background: var(--bg-card);
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item.active .chevron-icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
color: var(--accent-indigo);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light Theme Adjustments */
|
||||||
|
.light-theme .metric-item-content {
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-theme .detail-info-grid {
|
||||||
|
background: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
/* Usage bars in table */
|
/* Usage bars in table */
|
||||||
.usage-bar {
|
.usage-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -367,56 +367,36 @@
|
|||||||
|
|
||||||
<!-- Server Detail Modal -->
|
<!-- Server Detail Modal -->
|
||||||
<div class="modal-overlay" id="serverDetailModal">
|
<div class="modal-overlay" id="serverDetailModal">
|
||||||
<div class="modal" style="max-width: 600px;">
|
<div class="modal" style="max-width: 800px; width: 95%;">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="serverDetailTitle">服务器详情</h2>
|
<div style="display: flex; flex-direction: column;">
|
||||||
|
<h2 id="serverDetailTitle" style="margin-bottom: 4px;">服务器详情</h2>
|
||||||
|
<div id="serverDetailSubtitle" style="font-size: 0.85rem; color: var(--text-secondary); font-family: var(--font-mono);"></div>
|
||||||
|
</div>
|
||||||
<button class="modal-close" id="serverDetailClose">×</button>
|
<button class="modal-close" id="serverDetailClose">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" id="serverDetailBody">
|
<div class="modal-body" id="serverDetailBody" style="padding: 0;">
|
||||||
<div id="detailLoading" style="text-align: center; padding: 20px; display: none;">
|
<div id="detailLoading" style="text-align: center; padding: 40px; display: none;">
|
||||||
<div class="dot dot-pulse" style="display: inline-block; width: 12px; height: 12px; background: var(--accent-indigo);"></div>
|
<div class="dot dot-pulse" style="display: inline-block; width: 12px; height: 12px; background: var(--accent-indigo);"></div>
|
||||||
<span style="margin-left: 10px; color: var(--text-secondary);">正在从数据库读取详情...</span>
|
<span style="margin-left: 10px; color: var(--text-secondary);">正在从数据源读取详情...</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-grid" id="detailGrid">
|
<div class="detail-container" id="detailContainer">
|
||||||
<div class="detail-item">
|
<!-- Metric Items are injected here -->
|
||||||
<span class="detail-label">CPU 忙碌率 (Busy)</span>
|
<div class="detail-metrics-list" id="detailMetricsList"></div>
|
||||||
<span class="detail-value" id="detailCpuBusy">0%</span>
|
|
||||||
</div>
|
<div class="detail-info-grid" id="detailInfoGrid">
|
||||||
<div class="detail-item">
|
<div class="info-item">
|
||||||
<span class="detail-label">系统负载 (Load)</span>
|
<span class="info-label">CPU 核心总数</span>
|
||||||
<span class="detail-value" id="detailSysLoad">0%</span>
|
<span class="info-value" id="detailCpuCores">0 核心</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item">
|
<div class="info-item">
|
||||||
<span class="detail-label">内存使用率 (RAM)</span>
|
<span class="info-label">物理内存总量</span>
|
||||||
<span class="detail-value" id="detailMemUsedPct">0%</span>
|
<span class="info-value" id="detailMemTotal">0 GB</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item">
|
<div class="info-item">
|
||||||
<span class="detail-label">SWAP 使用率</span>
|
<span class="info-label">运行时间 (Uptime)</span>
|
||||||
<span class="detail-value" id="detailSwapUsedPct">0%</span>
|
<span class="info-value" id="detailUptime">0天 0小时</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">根分区使用率 (/)</span>
|
|
||||||
<span class="detail-value" id="detailRootFsUsedPct">0%</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">CPU 核心总数</span>
|
|
||||||
<span class="detail-value" id="detailCpuCores">0 核心</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">物理内存总量</span>
|
|
||||||
<span class="detail-value" id="detailMemTotal">0 GB</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">运行时间 (Uptime)</span>
|
|
||||||
<span class="detail-value" id="detailUptime">0天 0小时</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">网络接收速率 (RX)</span>
|
|
||||||
<span class="detail-value" id="detailNetRx">0 Mbps</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">网络发送速率 (TX)</span>
|
|
||||||
<span class="detail-value" id="detailNetTx">0 Mbps</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
173
public/js/app.js
173
public/js/app.js
@@ -65,24 +65,20 @@
|
|||||||
serverDetailModal: document.getElementById('serverDetailModal'),
|
serverDetailModal: document.getElementById('serverDetailModal'),
|
||||||
serverDetailClose: document.getElementById('serverDetailClose'),
|
serverDetailClose: document.getElementById('serverDetailClose'),
|
||||||
serverDetailTitle: document.getElementById('serverDetailTitle'),
|
serverDetailTitle: document.getElementById('serverDetailTitle'),
|
||||||
detailGrid: document.getElementById('detailGrid'),
|
serverDetailSubtitle: document.getElementById('serverDetailSubtitle'),
|
||||||
|
detailMetricsList: document.getElementById('detailMetricsList'),
|
||||||
detailLoading: document.getElementById('detailLoading'),
|
detailLoading: document.getElementById('detailLoading'),
|
||||||
detailCpuBusy: document.getElementById('detailCpuBusy'),
|
|
||||||
detailSysLoad: document.getElementById('detailSysLoad'),
|
|
||||||
detailMemUsedPct: document.getElementById('detailMemUsedPct'),
|
|
||||||
detailSwapUsedPct: document.getElementById('detailSwapUsedPct'),
|
|
||||||
detailRootFsUsedPct: document.getElementById('detailRootFsUsedPct'),
|
|
||||||
detailCpuCores: document.getElementById('detailCpuCores'),
|
detailCpuCores: document.getElementById('detailCpuCores'),
|
||||||
detailMemTotal: document.getElementById('detailMemTotal'),
|
detailMemTotal: document.getElementById('detailMemTotal'),
|
||||||
detailUptime: document.getElementById('detailUptime'),
|
detailUptime: document.getElementById('detailUptime'),
|
||||||
detailNetRx: document.getElementById('detailNetRx'),
|
detailContainer: document.getElementById('detailContainer')
|
||||||
detailNetTx: document.getElementById('detailNetTx')
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// ---- State ----
|
// ---- State ----
|
||||||
let previousMetrics = null;
|
let previousMetrics = null;
|
||||||
let networkChart = null;
|
let networkChart = null;
|
||||||
let user = null; // Currently logged in user
|
let user = null; // Currently logged in user
|
||||||
|
let currentServerDetail = { instance: null, job: null, source: null, charts: {} };
|
||||||
|
|
||||||
// ---- Initialize ----
|
// ---- Initialize ----
|
||||||
function init() {
|
function init() {
|
||||||
@@ -431,52 +427,185 @@
|
|||||||
|
|
||||||
// ---- Server Detail ----
|
// ---- Server Detail ----
|
||||||
async function openServerDetail(instance, job, source) {
|
async function openServerDetail(instance, job, source) {
|
||||||
dom.serverDetailTitle.textContent = `${job} - 服务器详情`;
|
currentServerDetail = { instance, job, source, charts: {} };
|
||||||
|
dom.serverDetailTitle.textContent = `${job}`;
|
||||||
|
dom.serverDetailSubtitle.textContent = `${instance} (${source})`;
|
||||||
dom.serverDetailModal.classList.add('active');
|
dom.serverDetailModal.classList.add('active');
|
||||||
|
|
||||||
// Show loading
|
// Show loading
|
||||||
dom.detailGrid.style.opacity = '0.3';
|
dom.detailContainer.style.opacity = '0.3';
|
||||||
dom.detailLoading.style.display = 'block';
|
dom.detailLoading.style.display = 'block';
|
||||||
|
dom.detailMetricsList.innerHTML = '';
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const url = `/api/metrics/server-details?instance=${encodeURIComponent(instance)}&job=${encodeURIComponent(job)}&source=${encodeURIComponent(source)}`;
|
const url = `/api/metrics/server-details?instance=${encodeURIComponent(instance)}&job=${encodeURIComponent(job)}&source=${encodeURIComponent(source)}`;
|
||||||
const response = await fetch(url);
|
const response = await fetch(url);
|
||||||
if (!response.ok) throw new Error('Fetch failed');
|
if (!response.ok) throw new Error('Fetch failed');
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
renderServerDetail(data);
|
renderServerDetail(data);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Error fetching server details:', err);
|
console.error('Error fetching server details:', err);
|
||||||
} finally {
|
} finally {
|
||||||
dom.detailGrid.style.opacity = '1';
|
dom.detailContainer.style.opacity = '1';
|
||||||
dom.detailLoading.style.display = 'none';
|
dom.detailLoading.style.display = 'none';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeServerDetail() {
|
function closeServerDetail() {
|
||||||
dom.serverDetailModal.classList.remove('active');
|
dom.serverDetailModal.classList.remove('active');
|
||||||
|
// Destroy charts
|
||||||
|
Object.values(currentServerDetail.charts).forEach(chart => {
|
||||||
|
if (chart && chart.destroy) chart.destroy();
|
||||||
|
});
|
||||||
|
currentServerDetail = { instance: null, job: null, source: null, charts: {} };
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderServerDetail(data) {
|
function renderServerDetail(data) {
|
||||||
dom.detailCpuBusy.textContent = formatPercent(data.cpuBusy);
|
|
||||||
dom.detailSysLoad.textContent = data.sysLoad.toFixed(1) + '%';
|
|
||||||
dom.detailMemUsedPct.textContent = formatPercent(data.memUsedPct);
|
|
||||||
dom.detailSwapUsedPct.textContent = formatPercent(data.swapUsedPct);
|
|
||||||
dom.detailRootFsUsedPct.textContent = formatPercent(data.rootFsUsedPct);
|
|
||||||
dom.detailCpuCores.textContent = data.cpuCores + ' 核心';
|
dom.detailCpuCores.textContent = data.cpuCores + ' 核心';
|
||||||
dom.detailMemTotal.textContent = formatBytes(data.memTotal);
|
dom.detailMemTotal.textContent = formatBytes(data.memTotal);
|
||||||
|
|
||||||
// Uptime formatting
|
// Uptime formatting
|
||||||
const uptimeSec = data.uptime;
|
const uptimeSec = data.uptime;
|
||||||
const days = Math.floor(uptimeSec / 86400);
|
const days = Math.floor(uptimeSec / 86400);
|
||||||
const hours = Math.floor((uptimeSec % 86400) / 3600);
|
const hours = Math.floor((uptimeSec % 86400) / 3600);
|
||||||
const mins = Math.floor((uptimeSec % 3600) / 60);
|
const mins = Math.floor((uptimeSec % 3600) / 60);
|
||||||
dom.detailUptime.textContent = `${days}天 ${hours}小时 ${mins}分`;
|
dom.detailUptime.textContent = `${days}天 ${hours}小时 ${mins}分`;
|
||||||
|
|
||||||
dom.detailNetRx.textContent = formatBandwidth(data.netRx);
|
// Define metrics to show
|
||||||
dom.detailNetTx.textContent = formatBandwidth(data.netTx);
|
const metrics = [
|
||||||
|
{ key: 'cpuBusy', label: 'CPU 忙碌率 (Busy)', value: formatPercent(data.cpuBusy) },
|
||||||
|
{ key: 'sysLoad', label: '系统负载 (Load)', value: data.sysLoad.toFixed(1) + '%' },
|
||||||
|
{ key: 'memUsedPct', label: '内存使用率 (RAM)', value: formatPercent(data.memUsedPct) },
|
||||||
|
{ key: 'swapUsedPct', label: 'SWAP 使用率', value: formatPercent(data.swapUsedPct) },
|
||||||
|
{ key: 'rootFsUsedPct', label: '根分区使用率 (/)', value: formatPercent(data.rootFsUsedPct) },
|
||||||
|
{ key: 'netRx', label: '网络接收速率 (RX)', value: formatBandwidth(data.netRx) },
|
||||||
|
{ key: 'netTx', label: '网络发送速率 (TX)', value: formatBandwidth(data.netTx) }
|
||||||
|
];
|
||||||
|
|
||||||
|
dom.detailMetricsList.innerHTML = metrics.map(m => `
|
||||||
|
<div class="metric-item" id="metric-${m.key}">
|
||||||
|
<div class="metric-item-header" onclick="toggleMetricExpand('${m.key}')">
|
||||||
|
<div class="metric-label-group">
|
||||||
|
<span class="metric-label">${m.label}</span>
|
||||||
|
<span class="metric-value">${m.value}</span>
|
||||||
|
</div>
|
||||||
|
<svg class="chevron-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item-content">
|
||||||
|
<div class="chart-controls">
|
||||||
|
<div class="time-range-group">
|
||||||
|
<div class="time-range-selector">
|
||||||
|
<button class="time-range-btn active" onclick="loadMetricHistory('${m.key}', '1h', event)">1h</button>
|
||||||
|
<button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '6h', event)">6h</button>
|
||||||
|
<button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '12h', event)">12h</button>
|
||||||
|
<button class="time-range-btn" onclick="loadMetricHistory('${m.key}', '24h', event)">24h</button>
|
||||||
|
</div>
|
||||||
|
<div class="custom-range-selector">
|
||||||
|
<input type="text" class="custom-range-input" id="custom-range-${m.key}" placeholder="相对范围 (如: 2h)" onkeydown="if(event.key==='Enter') loadCustomMetricHistory('${m.key}', event)">
|
||||||
|
</div>
|
||||||
|
<div class="absolute-range-selector">
|
||||||
|
<input type="datetime-local" class="time-input" id="start-time-${m.key}">
|
||||||
|
<span style="color: var(--text-secondary); font-size: 0.7rem;">至</span>
|
||||||
|
<input type="datetime-local" class="time-input" id="end-time-${m.key}">
|
||||||
|
<button class="btn-custom-go" onclick="loadCustomMetricHistory('${m.key}', event)">查询</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-chart-wrapper">
|
||||||
|
<canvas id="chart-${m.key}"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.toggleMetricExpand = async function (metricKey) {
|
||||||
|
const el = document.getElementById(`metric-${metricKey}`);
|
||||||
|
const wasActive = el.classList.contains('active');
|
||||||
|
|
||||||
|
// Close all others
|
||||||
|
document.querySelectorAll('.metric-item').forEach(item => item.classList.remove('active'));
|
||||||
|
|
||||||
|
if (!wasActive) {
|
||||||
|
el.classList.add('active');
|
||||||
|
// Initial load
|
||||||
|
loadMetricHistory(metricKey, '1h');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.loadMetricHistory = async function (metricKey, range, event, start = null, end = null) {
|
||||||
|
if (event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
const group = event.target.closest('.time-range-group');
|
||||||
|
if (group) {
|
||||||
|
group.querySelectorAll('.time-range-btn').forEach(btn => btn.classList.remove('active'));
|
||||||
|
if (event.target.classList.contains('time-range-btn')) {
|
||||||
|
event.target.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const canvas = document.getElementById(`chart-${metricKey}`);
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
let chart = currentServerDetail.charts[metricKey];
|
||||||
|
if (!chart) {
|
||||||
|
let unit = '';
|
||||||
|
if (metricKey.includes('Pct') || metricKey === 'cpuBusy') unit = '%';
|
||||||
|
if (metricKey.startsWith('net')) unit = 'B/s';
|
||||||
|
|
||||||
|
chart = new MetricChart(canvas, unit);
|
||||||
|
currentServerDetail.charts[metricKey] = chart;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { instance, job, source } = currentServerDetail;
|
||||||
|
let url = `/api/metrics/server-history?instance=${encodeURIComponent(instance)}&job=${encodeURIComponent(job)}&source=${encodeURIComponent(source)}&metric=${metricKey}`;
|
||||||
|
|
||||||
|
if (start && end) {
|
||||||
|
url += `&start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}`;
|
||||||
|
} else {
|
||||||
|
url += `&range=${range}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch(url);
|
||||||
|
if (!res.ok) throw new Error('Query failed');
|
||||||
|
const data = await res.json();
|
||||||
|
chart.setData(data);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error loading history for ${metricKey}:`, err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.loadCustomMetricHistory = async function (metricKey, event) {
|
||||||
|
if (event) event.stopPropagation();
|
||||||
|
|
||||||
|
const rangeInput = document.getElementById(`custom-range-${metricKey}`);
|
||||||
|
const startInput = document.getElementById(`start-time-${metricKey}`);
|
||||||
|
const endInput = document.getElementById(`end-time-${metricKey}`);
|
||||||
|
|
||||||
|
const range = (rangeInput.value || '').trim().toLowerCase();
|
||||||
|
const startTime = startInput.value;
|
||||||
|
const endTime = endInput.value;
|
||||||
|
|
||||||
|
if (startTime && endTime) {
|
||||||
|
// Absolute range
|
||||||
|
loadMetricHistory(metricKey, null, event, startTime, endTime);
|
||||||
|
} else if (range) {
|
||||||
|
// Relative range
|
||||||
|
if (!/^\d+[smhd]$/.test(range)) {
|
||||||
|
alert('格式不正确，请使用如: 2h, 30m, 1d 等格式');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loadMetricHistory(metricKey, range, event);
|
||||||
|
} else {
|
||||||
|
alert('请输入相对范围或选择具体时间范围');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// ---- Network History ----
|
// ---- Network History ----
|
||||||
async function fetchNetworkHistory() {
|
async function fetchNetworkHistory() {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -273,3 +273,154 @@ class AreaChart {
|
|||||||
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class MetricChart {
|
||||||
|
constructor(canvas, unit = '') {
|
||||||
|
this.canvas = canvas;
|
||||||
|
this.ctx = canvas.getContext('2d');
|
||||||
|
this.data = { timestamps: [], values: [] };
|
||||||
|
this.unit = unit; // '%', 'B/s', etc.
|
||||||
|
this.dpr = window.devicePixelRatio || 1;
|
||||||
|
this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
|
||||||
|
this.animProgress = 0;
|
||||||
|
|
||||||
|
this._resize = this.resize.bind(this);
|
||||||
|
window.addEventListener('resize', this._resize);
|
||||||
|
this.resize();
|
||||||
|
}
|
||||||
|
|
||||||
|
resize() {
|
||||||
|
const parent = this.canvas.parentElement;
|
||||||
|
if (!parent) return;
|
||||||
|
const rect = parent.getBoundingClientRect();
|
||||||
|
if (rect.width === 0) return;
|
||||||
|
this.width = rect.width;
|
||||||
|
this.height = rect.height;
|
||||||
|
this.canvas.width = this.width * this.dpr;
|
||||||
|
this.canvas.height = this.height * this.dpr;
|
||||||
|
this.canvas.style.width = this.width + 'px';
|
||||||
|
this.canvas.style.height = this.height + 'px';
|
||||||
|
this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
|
||||||
|
this.draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
setData(data) {
|
||||||
|
this.data = data || { timestamps: [], values: [] };
|
||||||
|
this.animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
animate() {
|
||||||
|
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||||||
|
const start = performance.now();
|
||||||
|
const duration = 500;
|
||||||
|
const step = (now) => {
|
||||||
|
const elapsed = now - start;
|
||||||
|
this.animProgress = Math.min(elapsed / duration, 1);
|
||||||
|
this.animProgress = 1 - Math.pow(1 - this.animProgress, 3);
|
||||||
|
this.draw();
|
||||||
|
if (elapsed < duration) this.animFrame = requestAnimationFrame(step);
|
||||||
|
};
|
||||||
|
this.animFrame = requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
const ctx = this.ctx;
|
||||||
|
const w = this.width;
|
||||||
|
const h = this.height;
|
||||||
|
const p = this.padding;
|
||||||
|
const chartW = w - p.left - p.right;
|
||||||
|
const chartH = h - p.top - p.bottom;
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, w, h);
|
||||||
|
|
||||||
|
const { timestamps, values } = this.data;
|
||||||
|
if (!timestamps || timestamps.length < 2) {
|
||||||
|
ctx.fillStyle = '#5a6380';
|
||||||
|
ctx.font = '11px sans-serif';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillText('正在加载或暂无数据...', w / 2, h / 2);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find max with cushion
|
||||||
|
let maxVal = Math.max(...values, 0.1);
|
||||||
|
if (this.unit === '%' && maxVal <= 100) {
|
||||||
|
if (maxVal > 80) maxVal = 100;
|
||||||
|
else if (maxVal > 40) maxVal = 80;
|
||||||
|
else if (maxVal > 20) maxVal = 50;
|
||||||
|
else maxVal = 25;
|
||||||
|
} else {
|
||||||
|
maxVal = maxVal * 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
const len = timestamps.length;
|
||||||
|
const xStep = chartW / (len - 1);
|
||||||
|
const getX = (i) => p.left + i * xStep;
|
||||||
|
const getY = (val) => p.top + chartH - (val / (maxVal || 1)) * chartH * this.animProgress;
|
||||||
|
|
||||||
|
// Grid
|
||||||
|
ctx.strokeStyle = 'rgba(99, 102, 241, 0.05)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let i = 0; i <= 3; i++) {
|
||||||
|
const y = p.top + (chartH / 3) * i;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(p.left, y);
|
||||||
|
ctx.lineTo(p.left + chartW, y);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
const v = (maxVal * (1 - i / 3));
|
||||||
|
ctx.fillStyle = '#5a6380';
|
||||||
|
ctx.font = '9px "JetBrains Mono", monospace';
|
||||||
|
ctx.textAlign = 'right';
|
||||||
|
|
||||||
|
let label = '';
|
||||||
|
if (this.unit === 'B/s') {
|
||||||
|
label = window.formatBandwidth ? window.formatBandwidth(v) : v.toFixed(0);
|
||||||
|
} else {
|
||||||
|
label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit;
|
||||||
|
}
|
||||||
|
ctx.fillText(label, p.left - 8, y + 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Path
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(getX(0), getY(values[0]));
|
||||||
|
for (let i = 1; i < len; i++) {
|
||||||
|
const prevX = getX(i - 1);
|
||||||
|
const currX = getX(i);
|
||||||
|
const prevY = getY(values[i - 1]);
|
||||||
|
const currY = getY(values[i]);
|
||||||
|
const midX = (prevX + currX) / 2;
|
||||||
|
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stroke
|
||||||
|
ctx.strokeStyle = '#6366f1';
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.lineJoin = 'round';
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Fill
|
||||||
|
ctx.lineTo(getX(len - 1), p.top + chartH);
|
||||||
|
ctx.lineTo(getX(0), p.top + chartH);
|
||||||
|
ctx.closePath();
|
||||||
|
const grad = ctx.createLinearGradient(0, p.top, 0, p.top + chartH);
|
||||||
|
grad.addColorStop(0, 'rgba(99, 102, 241, 0.15)');
|
||||||
|
grad.addColorStop(1, 'rgba(99, 102, 241, 0)');
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Last point pulse
|
||||||
|
const lastX = getX(len - 1);
|
||||||
|
const lastY = getY(values[len - 1]);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = '#6366f1';
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
window.removeEventListener('resize', this._resize);
|
||||||
|
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -626,6 +626,26 @@ app.get('/api/metrics/server-details', async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Get historical metrics for a specific server
|
||||||
|
app.get('/api/metrics/server-history', async (req, res) => {
|
||||||
|
const { instance, job, source, metric, range, start, end } = req.query;
|
||||||
|
|
||||||
|
if (!instance || !job || !source || !metric) {
|
||||||
|
return res.status(400).json({ error: 'instance, job, source, and metric are required' });
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const [rows] = await db.query('SELECT url FROM prometheus_sources WHERE name = ?', [source]);
|
||||||
|
if (rows.length === 0) return res.status(404).json({ error: 'Source not found' });
|
||||||
|
const sourceUrl = rows[0].url;
|
||||||
|
|
||||||
|
const data = await prometheusService.getServerHistory(sourceUrl, instance, job, metric, range, start, end);
|
||||||
|
res.json(data);
|
||||||
|
} catch (err) {
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// SPA fallback
|
// SPA fallback
|
||||||
app.get('*', (req, res, next) => {
|
app.get('*', (req, res, next) => {
|
||||||
if (req.path.startsWith('/api/') || req.path.includes('.')) return next();
|
if (req.path.startsWith('/api/') || req.path.includes('.')) return next();
|
||||||
|
|||||||
@@ -448,6 +448,85 @@ async function getServerDetails(baseUrl, instance, job) {
|
|||||||
return results;
|
return results;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get historical metrics for a specific server (node)
|
||||||
|
*/
|
||||||
|
async function getServerHistory(baseUrl, instance, job, metric, range = '1h', start = null, end = null) {
|
||||||
|
const url = normalizeUrl(baseUrl);
|
||||||
|
const node = instance;
|
||||||
|
|
||||||
|
// Map metric keys to Prometheus expressions
|
||||||
|
const metricMap = {
|
||||||
|
cpuBusy: `100 * (1 - avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])))`,
|
||||||
|
sysLoad: `node_load1{instance="${node}",job="${job}"} * 100 / count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`,
|
||||||
|
memUsedPct: `(1 - (node_memory_MemAvailable_bytes{instance="${node}", job="${job}"} / node_memory_MemTotal_bytes{instance="${node}", job="${job}"})) * 100`,
|
||||||
|
swapUsedPct: `((node_memory_SwapTotal_bytes{instance="${node}",job="${job}"} - node_memory_SwapFree_bytes{instance="${node}",job="${job}"}) / (node_memory_SwapTotal_bytes{instance="${node}",job="${job}"})) * 100`,
|
||||||
|
rootFsUsedPct: `100 - ((node_filesystem_avail_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!="rootfs"} * 100) / node_filesystem_size_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!="rootfs"})`,
|
||||||
|
netRx: `sum(rate(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`,
|
||||||
|
netTx: `sum(rate(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`
|
||||||
|
};
|
||||||
|
|
||||||
|
const expr = metricMap[metric];
|
||||||
|
if (!expr) throw new Error('Invalid metric for history');
|
||||||
|
|
||||||
|
let duration, step, queryStart, queryEnd;
|
||||||
|
|
||||||
|
if (start && end) {
|
||||||
|
queryStart = Math.floor(new Date(start).getTime() / 1000);
|
||||||
|
queryEnd = Math.floor(new Date(end).getTime() / 1000);
|
||||||
|
duration = queryEnd - queryStart;
|
||||||
|
if (duration <= 0) throw new Error('End time must be after start time');
|
||||||
|
// Reasonable step for fixed range
|
||||||
|
step = Math.max(15, Math.floor(duration / 100));
|
||||||
|
} else {
|
||||||
|
// Relative range logic
|
||||||
|
const rangeMap = {
|
||||||
|
'15m': { duration: 900, step: 15 },
|
||||||
|
'30m': { duration: 1800, step: 30 },
|
||||||
|
'1h': { duration: 3600, step: 60 },
|
||||||
|
'6h': { duration: 21600, step: 300 },
|
||||||
|
'12h': { duration: 43200, step: 600 },
|
||||||
|
'24h': { duration: 86400, step: 900 },
|
||||||
|
'2d': { duration: 172800, step: 1800 },
|
||||||
|
'7d': { duration: 604800, step: 3600 }
|
||||||
|
};
|
||||||
|
|
||||||
|
if (rangeMap[range]) {
|
||||||
|
duration = rangeMap[range].duration;
|
||||||
|
step = rangeMap[range].step;
|
||||||
|
} else {
|
||||||
|
// Try to parse relative time string like "2h", "30m", "1d"
|
||||||
|
const match = range.match(/^(\d+)([smhd])$/);
|
||||||
|
if (match) {
|
||||||
|
const val = parseInt(match[1]);
|
||||||
|
const unit = match[2];
|
||||||
|
const multipliers = { s: 1, m: 60, h: 3600, d: 86400 };
|
||||||
|
duration = val * (multipliers[unit] || 3600);
|
||||||
|
// Calculate a reasonable step for ~60-120 data points
|
||||||
|
step = Math.max(15, Math.floor(duration / 100));
|
||||||
|
} else {
|
||||||
|
duration = 3600;
|
||||||
|
step = 60;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
queryEnd = Math.floor(Date.now() / 1000);
|
||||||
|
queryStart = queryEnd - duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await queryRange(url, expr, queryStart, queryEnd, step);
|
||||||
|
if (!result || result.length === 0) return { timestamps: [], values: [] };
|
||||||
|
|
||||||
|
return {
|
||||||
|
timestamps: result[0].values.map(v => v[0] * 1000),
|
||||||
|
values: result[0].values.map(v => parseFloat(v[1]))
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`[Prometheus] Error fetching history for ${metric} on ${node}:`, err.message);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
testConnection,
|
testConnection,
|
||||||
query,
|
query,
|
||||||
@@ -457,5 +536,6 @@ module.exports = {
|
|||||||
mergeNetworkHistories,
|
mergeNetworkHistories,
|
||||||
getCpuHistory,
|
getCpuHistory,
|
||||||
mergeCpuHistories,
|
mergeCpuHistories,
|
||||||
getServerDetails
|
getServerDetails,
|
||||||
|
getServerHistory
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user