mirror of
https://github.com/DeNNiiInc/Web-Page-Performance-Test.git
synced 2026-04-17 20:05:58 +00:00
Implement all Gap Analysis features: Visualization, Network, Bulk, Compare
This commit is contained in:
226
compare.html
226
compare.html
@@ -3,14 +3,14 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Compare Tests - Web Page Performance Test</title>
|
<title>Test Comparison - Web Page Performance Test</title>
|
||||||
<link rel="icon" type="image/png" href="Logo.png">
|
<link rel="icon" type="image/png" href="Logo.png">
|
||||||
<link rel="stylesheet" href="styles.css?v=3.0">
|
<link rel="stylesheet" href="styles.css?v=3.0">
|
||||||
<style>
|
<style>
|
||||||
.comparison-container {
|
.comparison-container {
|
||||||
max-width: 1400px;
|
max-width: 1600px;
|
||||||
margin: 2rem auto;
|
margin: 2rem auto;
|
||||||
padding: 2rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comparison-grid {
|
.comparison-grid {
|
||||||
@@ -20,180 +20,88 @@
|
|||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test-card {
|
.metric-diff {
|
||||||
background: var(--color-bg-secondary);
|
display: flex;
|
||||||
padding: 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-comparison {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1rem;
|
justify-content: space-between;
|
||||||
background: var(--color-bg-tertiary);
|
padding: 0.5rem;
|
||||||
border-radius: 8px;
|
border-bottom: 1px solid var(--color-border);
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-name {
|
.diff-better { color: var(--color-accent-success); font-weight: bold; }
|
||||||
font-weight: 600;
|
.diff-worse { color: var(--color-accent-error); font-weight: bold; }
|
||||||
text-align: center;
|
.diff-neutral { color: var(--color-text-secondary); }
|
||||||
color: var(--color-text-secondary);
|
|
||||||
|
.filmstrip-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-value {
|
.filmstrip-img {
|
||||||
font-size: 1.5rem;
|
height: 100px;
|
||||||
font-weight: bold;
|
border: 1px solid var(--color-border);
|
||||||
}
|
|
||||||
|
|
||||||
.delta {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta.better {
|
|
||||||
background: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta.worse {
|
|
||||||
background: #F44336;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delta.neutral {
|
|
||||||
background: var(--color-bg-tertiary);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="comparison-container">
|
<header>
|
||||||
|
<div class="logo-container">
|
||||||
|
<img src="Logo.png" alt="Logo" class="logo">
|
||||||
<h1>Test Comparison</h1>
|
<h1>Test Comparison</h1>
|
||||||
|
</div>
|
||||||
|
<a href="/" class="btn-secondary">← Back to Dashboard</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
<div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
|
<div class="comparison-container">
|
||||||
<input type="text" id="test1-id" placeholder="Test 1 ID" style="flex: 1; padding: 0.75rem; border-radius: 8px; border: 2px solid var(--color-border);">
|
<div id="loading" style="text-align: center; padding: 2rem;">Loading comparison...</div>
|
||||||
<input type="text" id="test2-id" placeholder="Test 2 ID" style="flex: 1; padding: 0.75rem; border-radius: 8px; border: 2px solid var(--color-border);">
|
|
||||||
<button id="compare-btn" class="btn-primary" style="padding: 0.75rem 2rem;">Compare</button>
|
<div id="comparison-content" style="display: none;">
|
||||||
|
<div class="comparison-grid">
|
||||||
|
<!-- Test A -->
|
||||||
|
<div class="test-column" id="col-a">
|
||||||
|
<h2 id="title-a">Test A</h2>
|
||||||
|
<div class="card">
|
||||||
|
<div id="meta-a"></div>
|
||||||
|
<div class="grade-circle" id="grade-a">
|
||||||
|
<span class="grade-letter"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="filmstrip-a" class="filmstrip-row"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="comparison-results"></div>
|
<!-- Test B -->
|
||||||
|
<div class="test-column" id="col-b">
|
||||||
|
<h2 id="title-b">Test B</h2>
|
||||||
|
<div class="card">
|
||||||
|
<div id="meta-b"></div>
|
||||||
|
<div class="grade-circle" id="grade-b">
|
||||||
|
<span class="grade-letter"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="filmstrip-b" class="filmstrip-row"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<!-- Metrics Diff Table -->
|
||||||
// Auto-load comparison from URL parameters
|
<div class="card" style="margin-top: 2rem;">
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
<h3>Metrics Comparison</h3>
|
||||||
const params = new URLSearchParams(window.location.search);
|
<table style="width: 100%; border-collapse: collapse;">
|
||||||
const test1 = params.get('test1');
|
<thead>
|
||||||
const test2 = params.get('test2');
|
<tr>
|
||||||
|
<th>Metric</th>
|
||||||
if (test1 && test2) {
|
<th>Test A</th>
|
||||||
document.getElementById('test1-id').value = test1;
|
<th>Test B</th>
|
||||||
document.getElementById('test2-id').value = test2;
|
<th>Difference</th>
|
||||||
document.getElementById('compare-btn').click();
|
</tr>
|
||||||
}
|
</thead>
|
||||||
});
|
<tbody id="metrics-body"></tbody>
|
||||||
|
</table>
|
||||||
document.getElementById('compare-btn').addEventListener('click', async () => {
|
|
||||||
const test1Id = document.getElementById('test1-id').value.trim();
|
|
||||||
const test2Id = document.getElementById('test2-id').value.trim();
|
|
||||||
|
|
||||||
if (!test1Id || !test2Id) {
|
|
||||||
alert('Please enter both test IDs');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [test1, test2] = await Promise.all([
|
|
||||||
fetch(`/reports/${test1Id}.json`).then(r => r.json()),
|
|
||||||
fetch(`/reports/${test2Id}.json`).then(r => r.json())
|
|
||||||
]);
|
|
||||||
|
|
||||||
renderComparison(test1, test2);
|
|
||||||
} catch (error) {
|
|
||||||
alert('Failed to load test results: ' + error.message);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function renderComparison(test1, test2) {
|
|
||||||
const container = document.getElementById('comparison-results');
|
|
||||||
|
|
||||||
const metrics = [
|
|
||||||
{ key: 'performance', label: 'Performance Score', path: 'scores.performance', higherBetter: true },
|
|
||||||
{ key: 'lcp', label: 'LCP (ms)', path: 'metrics.lcp', higherBetter: false },
|
|
||||||
{ key: 'cls', label: 'CLS', path: 'metrics.cls', higherBetter: false },
|
|
||||||
{ key: 'tbt', label: 'TBT (ms)', path: 'metrics.tbt', higherBetter: false }
|
|
||||||
];
|
|
||||||
|
|
||||||
let html = '<div class="comparison-grid">';
|
|
||||||
|
|
||||||
// Test 1 Card
|
|
||||||
html += `
|
|
||||||
<div class="test-card">
|
|
||||||
<h3>Test 1</h3>
|
|
||||||
<p><strong>URL:</strong> ${test1.url}</p>
|
|
||||||
<p><strong>Date:</strong> ${new Date(test1.timestamp).toLocaleString()}</p>
|
|
||||||
<p><strong>Device:</strong> ${test1.isMobile ? 'Mobile' : 'Desktop'}</p>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
|
||||||
|
|
||||||
// Test 2 Card
|
|
||||||
html += `
|
|
||||||
<div class="test-card">
|
|
||||||
<h3>Test 2</h3>
|
|
||||||
<p><strong>URL:</strong> ${test2.url}</p>
|
|
||||||
<p><strong>Date:</strong> ${new Date(test2.timestamp).toLocaleString()}</p>
|
|
||||||
<p><strong>Device:</strong> ${test2.isMobile ? 'Mobile' : 'Desktop'}</p>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
// Metric Comparisons
|
|
||||||
html += '<h2 style="margin-top: 2rem;">Metrics Comparison</h2>';
|
|
||||||
|
|
||||||
metrics.forEach(metric => {
|
|
||||||
const value1 = getNestedValue(test1, metric.path);
|
|
||||||
const value2 = getNestedValue(test2, metric.path);
|
|
||||||
const delta = value2 - value1;
|
|
||||||
const percentDelta = ((delta / value1) * 100).toFixed(1);
|
|
||||||
|
|
||||||
let deltaClass = 'neutral';
|
|
||||||
let deltaText = `${delta >= 0 ? '+' : ''}${percentDelta}%`;
|
|
||||||
|
|
||||||
if (metric.higherBetter) {
|
|
||||||
deltaClass = delta > 0 ? 'better' : delta < 0 ? 'worse' : 'neutral';
|
|
||||||
} else {
|
|
||||||
deltaClass = delta < 0 ? 'better' : delta > 0 ? 'worse' : 'neutral';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div class="metric-comparison">
|
|
||||||
<div class="metric-value" style="text-align: right;">${formatValue(value1, metric.key)}</div>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<div class="metric-name">${metric.label}</div>
|
|
||||||
<div class="delta ${deltaClass}">${deltaText}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="metric-value">${formatValue(value2, metric.key)}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
|
|
||||||
container.innerHTML = html;
|
<script src="compare.js"></script>
|
||||||
}
|
|
||||||
|
|
||||||
function getNestedValue(obj, path) {
|
|
||||||
return path.split('.').reduce((acc, part) => acc && acc[part], obj);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatValue(value, key) {
|
|
||||||
if (key === 'cls') return value.toFixed(3);
|
|
||||||
return Math.round(value);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
105
compare.js
Normal file
105
compare.js
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
async function init() {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const idA = params.get('test1');
|
||||||
|
const idB = params.get('test2');
|
||||||
|
|
||||||
|
if (!idA || !idB) {
|
||||||
|
document.getElementById('loading').textContent = 'Error: Missing test IDs.';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const [resA, resB] = await Promise.all([
|
||||||
|
fetch(`/reports/${idA}.json`).then(r => r.json()),
|
||||||
|
fetch(`/reports/${idB}.json`).then(r => r.json())
|
||||||
|
]);
|
||||||
|
|
||||||
|
renderComparison(resA, resB);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
document.getElementById('loading').textContent = 'Error loading test results.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderComparison(a, b) {
|
||||||
|
document.getElementById('loading').style.display = 'none';
|
||||||
|
document.getElementById('comparison-content').style.display = 'block';
|
||||||
|
|
||||||
|
// Render Headers
|
||||||
|
renderHeader('a', a);
|
||||||
|
renderHeader('b', b);
|
||||||
|
|
||||||
|
// Render Metrics Table
|
||||||
|
const metrics = [
|
||||||
|
{ key: 'performance', label: 'Performance Score', path: 'scores.performance', isScore: true },
|
||||||
|
{ key: 'lcp', label: 'LCP (ms)', path: 'metrics.lcp' },
|
||||||
|
{ key: 'tbt', label: 'TBT (ms)', path: 'metrics.tbt' },
|
||||||
|
{ key: 'cls', label: 'CLS', path: 'metrics.cls', isDecimal: true },
|
||||||
|
{ key: 'accessibility', label: 'Accessibility', path: 'scores.accessibility', isScore: true },
|
||||||
|
{ key: 'seo', label: 'SEO', path: 'scores.seo', isScore: true }
|
||||||
|
];
|
||||||
|
|
||||||
|
const tbody = document.getElementById('metrics-body');
|
||||||
|
tbody.innerHTML = metrics.map(m => renderMetricRow(m, a, b)).join('');
|
||||||
|
|
||||||
|
// Render Filmstrips
|
||||||
|
renderFilmstrip('a', a.filmstrip);
|
||||||
|
renderFilmstrip('b', b.filmstrip);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getVal(obj, path) {
|
||||||
|
return path.split('.').reduce((o, i) => o?.[i], obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderHeader(col, data) {
|
||||||
|
document.getElementById(`title-${col}`).innerHTML = `
|
||||||
|
<a href="${data.url}" target="_blank">${data.url}</a><br>
|
||||||
|
<small>${new Date(data.timestamp).toLocaleString()}</small>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Grade
|
||||||
|
const score = data.scores.performance;
|
||||||
|
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'D';
|
||||||
|
const el = document.getElementById(`grade-${col}`);
|
||||||
|
el.className = `grade-circle grade-${grade.toLowerCase()}`;
|
||||||
|
el.querySelector('.grade-letter').textContent = grade;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderMetricRow(m, a, b) {
|
||||||
|
const valA = getVal(a, m.path) || 0;
|
||||||
|
const valB = getVal(b, m.path) || 0;
|
||||||
|
|
||||||
|
const diff = valB - valA;
|
||||||
|
let diffStr = '';
|
||||||
|
let diffClass = 'diff-neutral';
|
||||||
|
|
||||||
|
// Logic: Higher is better for Scores, Lower is better for Metrics (LCP, TBT, CLS)
|
||||||
|
const higherIsBetter = m.isScore;
|
||||||
|
|
||||||
|
if (diff !== 0) {
|
||||||
|
const isBetter = higherIsBetter ? diff > 0 : diff < 0;
|
||||||
|
diffClass = isBetter ? 'diff-better' : 'diff-worse';
|
||||||
|
const prefix = diff > 0 ? '+' : '';
|
||||||
|
diffStr = `${prefix}${m.isDecimal ? diff.toFixed(2) : Math.round(diff)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `
|
||||||
|
<tr>
|
||||||
|
<td style="padding: 1rem; border-bottom: 1px solid #ccc;">${m.label}</td>
|
||||||
|
<td style="padding: 1rem; border-bottom: 1px solid #ccc;">${m.isDecimal ? valA.toFixed(2) : Math.round(valA)}</td>
|
||||||
|
<td style="padding: 1rem; border-bottom: 1px solid #ccc;">${m.isDecimal ? valB.toFixed(2) : Math.round(valB)}</td>
|
||||||
|
<td style="padding: 1rem; border-bottom: 1px solid #ccc;" class="${diffClass}">${diffStr}</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFilmstrip(col, frames) {
|
||||||
|
const el = document.getElementById(`filmstrip-${col}`);
|
||||||
|
if (!frames || frames.length === 0) {
|
||||||
|
el.innerHTML = 'No filmstrip data';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
el.innerHTML = frames.map(f => `<img src="${f.data}" class="filmstrip-img" title="${f.timing}ms">`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', init);
|
||||||
@@ -167,8 +167,8 @@
|
|||||||
<a href="#" id="view-waterfall" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; margin-right: 1rem;">
|
<a href="#" id="view-waterfall" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; margin-right: 1rem;">
|
||||||
📊 View Waterfall Chart
|
📊 View Waterfall Chart
|
||||||
</a>
|
</a>
|
||||||
<a href="#" id="view-images" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
|
<a href="#" id="view-video" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
|
||||||
🖼️ View Image Gallery
|
🎥 View Video
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
143
main.js
143
main.js
@@ -161,9 +161,9 @@ function displayResults(data) {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
window.open(`/waterfall.html?id=${data.id}`, '_blank');
|
window.open(`/waterfall.html?id=${data.id}`, '_blank');
|
||||||
};
|
};
|
||||||
document.getElementById('view-images').onclick = (e) => {
|
document.getElementById('view-video').onclick = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
window.open(`/images.html?id=${data.id}`, '_blank');
|
openVideoModal(data.filmstrip);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -543,6 +543,70 @@ async function loadOptimizations(testId) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Video Player State
|
||||||
|
let videoFrames = [];
|
||||||
|
let isPlaying = false;
|
||||||
|
let currentFrameIndex = 0;
|
||||||
|
let videoInterval = null;
|
||||||
|
|
||||||
|
function openVideoModal(frames) {
|
||||||
|
if (!frames || frames.length === 0) return;
|
||||||
|
|
||||||
|
videoFrames = frames;
|
||||||
|
currentFrameIndex = 0;
|
||||||
|
isPlaying = false;
|
||||||
|
|
||||||
|
document.getElementById('video-modal').style.display = 'block';
|
||||||
|
updateVideoFrame();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeVideoModal() {
|
||||||
|
stopVideo();
|
||||||
|
document.getElementById('video-modal').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleVideoPlay() {
|
||||||
|
if (isPlaying) {
|
||||||
|
stopVideo();
|
||||||
|
} else {
|
||||||
|
playVideo();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playVideo() {
|
||||||
|
if (isPlaying) return;
|
||||||
|
isPlaying = true;
|
||||||
|
document.getElementById('video-play-btn').textContent = '⏸ Pause';
|
||||||
|
|
||||||
|
if (currentFrameIndex >= videoFrames.length - 1) {
|
||||||
|
currentFrameIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
videoInterval = setInterval(() => {
|
||||||
|
currentFrameIndex++;
|
||||||
|
if (currentFrameIndex >= videoFrames.length) {
|
||||||
|
stopVideo();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
updateVideoFrame();
|
||||||
|
}, 100); // 10fps
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopVideo() {
|
||||||
|
isPlaying = false;
|
||||||
|
document.getElementById('video-play-btn').textContent = '▶ Play';
|
||||||
|
if (videoInterval) clearInterval(videoInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateVideoFrame() {
|
||||||
|
const frame = videoFrames[currentFrameIndex];
|
||||||
|
document.getElementById('video-img').src = frame.data;
|
||||||
|
document.getElementById('video-time').textContent = (frame.timing / 1000).toFixed(1) + 's';
|
||||||
|
|
||||||
|
const progress = ((currentFrameIndex + 1) / videoFrames.length) * 100;
|
||||||
|
document.getElementById('video-progress-fill').style.width = `${progress}%`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Initialization
|
// Initialization
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
@@ -565,3 +629,78 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
// Auto-refresh Git badge
|
// Auto-refresh Git badge
|
||||||
setInterval(updateVersionBadge, 5 * 60 * 1000);
|
setInterval(updateVersionBadge, 5 * 60 * 1000);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Extra Features (Diagnostics & Bulk)
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
function toggleSection(id) {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
el.style.display = el.style.display === 'none' ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runTraceroute() {
|
||||||
|
const host = document.getElementById('trace-host').value;
|
||||||
|
const out = document.getElementById('trace-output');
|
||||||
|
|
||||||
|
if (!host) return;
|
||||||
|
|
||||||
|
out.style.display = 'block';
|
||||||
|
out.textContent = 'Running traceroute...';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/traceroute?host=${host}`);
|
||||||
|
const data = await res.json();
|
||||||
|
out.textContent = data.output;
|
||||||
|
} catch (e) {
|
||||||
|
out.textContent = 'Error: ' + e.message;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runBulkTest() {
|
||||||
|
const text = document.getElementById('bulk-urls').value;
|
||||||
|
const urls = text.split('\n').map(u => u.trim()).filter(u => u);
|
||||||
|
|
||||||
|
if (urls.length === 0) {
|
||||||
|
alert('No URLs provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const progress = document.getElementById('bulk-progress');
|
||||||
|
progress.innerHTML = `Starting batch of ${urls.length} tests...`;
|
||||||
|
|
||||||
|
// Simple Frontend orchestration
|
||||||
|
for (let i = 0; i < urls.length; i++) {
|
||||||
|
const url = urls[i];
|
||||||
|
progress.innerHTML += `<div style="margin-top: 0.5rem">Testing ${url} (${i+1}/${urls.length})...</div>`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Re-use existing runTest API
|
||||||
|
// Note: We need a way to reuse the run logic without clicking buttons
|
||||||
|
// Manually calling fetch here duplicating runTest logic for simplicity
|
||||||
|
const response = await fetch('/api/run-test', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'x-user-uuid': getUserUuid()
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
url: url,
|
||||||
|
isMobile: currentDevice === 'mobile',
|
||||||
|
captureFilmstrip: false // Disable filmstrip for bulk to save speed? Or keep it?
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
progress.innerHTML += `<div style="color: #4CAF50">✅ Complete</div>`;
|
||||||
|
} else {
|
||||||
|
progress.innerHTML += `<div style="color: #F44336">❌ Failed</div>`;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
progress.innerHTML += `<div style="color: #F44336">❌ Error: ${e.message}</div>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
progress.innerHTML += '<br><strong>Batch Completed!</strong>';
|
||||||
|
loadHistory(); // Refresh list
|
||||||
|
}
|
||||||
|
|||||||
28
server.js
28
server.js
@@ -138,6 +138,34 @@ app.get("*", (req, res) => {
|
|||||||
res.sendFile(path.join(__dirname, "index.html"));
|
res.sendFile(path.join(__dirname, "index.html"));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// API Endpoint: Traceroute
|
||||||
|
app.get("/api/traceroute", (req, res) => {
|
||||||
|
const { host } = req.query;
|
||||||
|
if (!host) return res.status(400).json({ error: "Host required" });
|
||||||
|
|
||||||
|
// Sanitize host to prevent injection (basic)
|
||||||
|
if (/[^a-zA-Z0-9.-]/.test(host)) return res.status(400).json({ error: "Invalid host" });
|
||||||
|
|
||||||
|
const cmd = process.platform === 'win32' ? `tracert -h 10 ${host}` : `traceroute -m 10 ${host}`;
|
||||||
|
exec(cmd, (error, stdout, stderr) => {
|
||||||
|
res.json({ output: stdout || stderr });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// API Endpoint: Bulk Test
|
||||||
|
app.post("/api/bulk-test", async (req, res) => {
|
||||||
|
const { urls, isMobile, runCount = 1 } = req.body;
|
||||||
|
if (!urls || !Array.isArray(urls)) return res.status(400).json({ error: "URLs array required" });
|
||||||
|
|
||||||
|
// Mock response - in real world would queue these
|
||||||
|
// For now, we'll just acknowledge receipt. To implement fully requires a job queue.
|
||||||
|
// Let's implement a simple "Sequence" runner on the backend? No, that might timeout.
|
||||||
|
// Better to let frontend orchestrate or return a "Batch ID".
|
||||||
|
|
||||||
|
// We will assume frontend orchestration for simplicity in this Node.js (non-queue) env
|
||||||
|
res.json({ message: "Bulk test ready", count: urls.length });
|
||||||
|
});
|
||||||
|
|
||||||
app.listen(PORT, () => {
|
app.listen(PORT, () => {
|
||||||
console.log(`🚀 Server running on port ${PORT}`);
|
console.log(`🚀 Server running on port ${PORT}`);
|
||||||
console.log(`📁 Serving files from: ${__dirname}`);
|
console.log(`📁 Serving files from: ${__dirname}`);
|
||||||
|
|||||||
Reference in New Issue
Block a user