2026-02-04 03:49:11 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2026-02-04 05:40:03 +00:00
|
|
|
<title>Test App1 - Nginx Load Test</title>
|
|
|
|
|
<meta charset="UTF-8">
|
2026-02-04 03:49:11 +00:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
margin: 40px;
|
|
|
|
|
background-color: #f4f4f9;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
.container {
|
2026-02-04 05:40:03 +00:00
|
|
|
max-width: 1000px;
|
2026-02-04 03:49:11 +00:00
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
|
|
|
}
|
2026-02-04 05:40:03 +00:00
|
|
|
h1 { color: #2c3e50; border-left: 5px solid #3498db; padding-left: 15px; }
|
|
|
|
|
.panel {
|
2026-02-04 03:49:11 +00:00
|
|
|
background-color: #e8f4fc;
|
2026-02-04 05:40:03 +00:00
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 8px;
|
2026-02-04 03:49:11 +00:00
|
|
|
margin: 20px 0;
|
2026-02-04 05:40:03 +00:00
|
|
|
border-left: 4px solid #3498db;
|
2026-02-04 03:49:11 +00:00
|
|
|
}
|
2026-02-04 05:40:03 +00:00
|
|
|
.metrics-panel {
|
2026-02-04 03:49:11 +00:00
|
|
|
background-color: #e8f8ef;
|
2026-02-04 05:40:03 +00:00
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin: 20px 0;
|
2026-02-04 03:49:11 +00:00
|
|
|
border-left: 4px solid #2ecc71;
|
2026-02-04 05:40:03 +00:00
|
|
|
}
|
|
|
|
|
.load-panel {
|
|
|
|
|
background-color: #fff3cd;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 8px;
|
2026-02-04 03:49:11 +00:00
|
|
|
margin: 20px 0;
|
2026-02-04 05:40:03 +00:00
|
|
|
border-left: 4px solid #f39c12;
|
|
|
|
|
}
|
|
|
|
|
button {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.btn-primary { background-color: #3498db; color: white; }
|
|
|
|
|
.btn-success { background-color: #2ecc71; color: white; }
|
|
|
|
|
.btn-warning { background-color: #f39c12; color: white; }
|
|
|
|
|
.btn-danger { background-color: #e74c3c; color: white; }
|
|
|
|
|
.stats { display: flex; gap: 20px; margin-top: 20px; }
|
|
|
|
|
.stat-box {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
|
|
|
}
|
|
|
|
|
#log {
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
.status-icon::before {
|
|
|
|
|
content: "✓";
|
|
|
|
|
color: green;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
.error-icon::before {
|
|
|
|
|
content: "✗";
|
|
|
|
|
color: red;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-right: 5px;
|
2026-02-04 03:49:11 +00:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
2026-02-04 05:40:03 +00:00
|
|
|
<h1>Test Application 1 - Nginx Load Testing</h1>
|
2026-02-04 03:49:11 +00:00
|
|
|
|
2026-02-04 05:40:03 +00:00
|
|
|
<div class="panel">
|
|
|
|
|
<h3>Server Information</h3>
|
2026-02-04 03:49:11 +00:00
|
|
|
<p><strong>Hostname:</strong> {{ ansible_hostname }}</p>
|
|
|
|
|
<p><strong>IP Address:</strong> {{ ansible_default_ipv4.address }}</p>
|
|
|
|
|
<p><strong>Role:</strong> Web Server (Nginx)</p>
|
2026-02-04 05:40:03 +00:00
|
|
|
<p><strong>Deployed:</strong> {{ ansible_date_time.date }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="load-panel">
|
|
|
|
|
<h3>Load Testing Controls</h3>
|
|
|
|
|
<div>
|
|
|
|
|
<button class="btn-primary" onclick="startLoadTest('light')">Light Load (1-5 req/sec)</button>
|
|
|
|
|
<button class="btn-success" onclick="startLoadTest('medium')">Medium Load (10-20 req/sec)</button>
|
|
|
|
|
<button class="btn-warning" onclick="startLoadTest('heavy')">Heavy Load (50-100 req/sec)</button>
|
|
|
|
|
<button class="btn-danger" onclick="stopLoadTest()">Stop Load Test</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="margin-top: 20px;">
|
|
|
|
|
<label>Custom Requests: </label>
|
|
|
|
|
<input type="number" id="requestCount" value="100" min="1" max="10000" style="width: 80px;">
|
|
|
|
|
<button class="btn-primary" onclick="sendCustomRequests()">Send Requests</button>
|
|
|
|
|
<button class="btn-warning" onclick="generateTraffic()">Generate Random Traffic</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="stats">
|
|
|
|
|
<div class="stat-box">
|
|
|
|
|
<h4>Requests Sent</h4>
|
|
|
|
|
<div id="requestsCount">0</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-box">
|
|
|
|
|
<h4>Successful</h4>
|
|
|
|
|
<div id="successCount">0</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-box">
|
|
|
|
|
<h4>Failed</h4>
|
|
|
|
|
<div id="failedCount">0</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-box">
|
|
|
|
|
<h4>Active Tests</h4>
|
|
|
|
|
<div id="activeTests">0</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-02-04 03:49:11 +00:00
|
|
|
</div>
|
|
|
|
|
|
2026-02-04 05:40:03 +00:00
|
|
|
<div class="metrics-panel">
|
|
|
|
|
<h3>Monitoring & Metrics</h3>
|
|
|
|
|
<p>Node Exporter: <a href="http://{{ ansible_default_ipv4.address }}:9100/metrics" target="_blank">:9100/metrics</a></p>
|
|
|
|
|
<p>Nginx Status: <a href="http://{{ ansible_default_ipv4.address }}/status" target="_blank">/status</a></p>
|
|
|
|
|
<p>Nginx Metrics: <a href="http://{{ ansible_default_ipv4.address }}/nginx_status" target="_blank">/nginx_status</a></p>
|
|
|
|
|
|
|
|
|
|
<h4>API Endpoints:</h4>
|
|
|
|
|
<div style="font-family: monospace; font-size: 12px; background: #f8f9fa; padding: 10px; border-radius: 5px;">
|
|
|
|
|
<div><a href="/api/test" target="_blank">/api/test</a> - Test endpoint</div>
|
|
|
|
|
<div><a href="/api/error" target="_blank">/api/error</a> - Error endpoint (500)</div>
|
|
|
|
|
<div><a href="/api/random" target="_blank">/api/random</a> - Random response</div>
|
|
|
|
|
<div><a href="/api/metrics" target="_blank">/api/metrics</a> - API info</div>
|
|
|
|
|
<div><a href="/health" target="_blank">/health</a> - Health check</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h4>Quick Links:</h4>
|
|
|
|
|
<div>
|
|
|
|
|
<a href="http://192.168.0.106:3000" target="_blank">Grafana Dashboard</a> |
|
|
|
|
|
<a href="http://192.168.0.105:9090" target="_blank">Prometheus UI</a> |
|
|
|
|
|
<a href="http://192.168.0.100:3000" target="_blank">Git/Forgejo</a>
|
|
|
|
|
</div>
|
2026-02-04 03:49:11 +00:00
|
|
|
</div>
|
|
|
|
|
|
2026-02-04 05:40:03 +00:00
|
|
|
<div>
|
|
|
|
|
<h3>Request Log</h3>
|
|
|
|
|
<div id="log"></div>
|
|
|
|
|
</div>
|
2026-02-04 03:49:11 +00:00
|
|
|
</div>
|
2026-02-04 05:40:03 +00:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let loadTestInterval = null;
|
|
|
|
|
let activeTests = 0;
|
|
|
|
|
let requestsSent = 0;
|
|
|
|
|
let successCount = 0;
|
|
|
|
|
let failedCount = 0;
|
|
|
|
|
|
|
|
|
|
function logMessage(message, type = 'info') {
|
|
|
|
|
const logDiv = document.getElementById('log');
|
|
|
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
|
|
|
const icon = type === 'error' ? '<span class="error-icon"></span>' :
|
|
|
|
|
type === 'success' ? '<span class="status-icon"></span>' : '>';
|
|
|
|
|
const color = type === 'error' ? 'red' : type === 'success' ? 'green' : '#666';
|
|
|
|
|
logDiv.innerHTML = `<div style="color: ${color}; margin: 2px 0;">${icon} [${timestamp}] ${message}</div>` + logDiv.innerHTML;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateStats() {
|
|
|
|
|
document.getElementById('requestsCount').textContent = requestsSent;
|
|
|
|
|
document.getElementById('successCount').textContent = successCount;
|
|
|
|
|
document.getElementById('failedCount').textContent = failedCount;
|
|
|
|
|
document.getElementById('activeTests').textContent = activeTests;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function sendRequest(endpoint = '/') {
|
|
|
|
|
requestsSent++;
|
|
|
|
|
updateStats();
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const startTime = Date.now();
|
|
|
|
|
const response = await fetch(endpoint);
|
|
|
|
|
const endTime = Date.now();
|
|
|
|
|
const duration = endTime - startTime;
|
|
|
|
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
successCount++;
|
|
|
|
|
logMessage(`Request ${requestsSent} to ${endpoint}: ${duration}ms (${response.status})`, 'success');
|
|
|
|
|
} else {
|
|
|
|
|
failedCount++;
|
|
|
|
|
logMessage(`Request ${requestsSent} to ${endpoint}: Failed (${response.status})`, 'error');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
failedCount++;
|
|
|
|
|
logMessage(`Request ${requestsSent} to ${endpoint}: Error - ${error.message}`, 'error');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function startLoadTest(intensity) {
|
|
|
|
|
if (loadTestInterval) {
|
|
|
|
|
clearInterval(loadTestInterval);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let interval;
|
|
|
|
|
let endpoints = ['/', '/api/test', '/api/random', '/health'];
|
|
|
|
|
|
|
|
|
|
switch(intensity) {
|
|
|
|
|
case 'light':
|
|
|
|
|
interval = 200; // 5 req/sec
|
|
|
|
|
logMessage('Starting LIGHT load test (5 req/sec)');
|
|
|
|
|
break;
|
|
|
|
|
case 'medium':
|
|
|
|
|
interval = 50; // 20 req/sec
|
|
|
|
|
logMessage('Starting MEDIUM load test (20 req/sec)');
|
|
|
|
|
break;
|
|
|
|
|
case 'heavy':
|
|
|
|
|
interval = 10; // 100 req/sec
|
|
|
|
|
logMessage('Starting HEAVY load test (100 req/sec)');
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
activeTests++;
|
|
|
|
|
updateStats();
|
|
|
|
|
|
|
|
|
|
loadTestInterval = setInterval(() => {
|
|
|
|
|
const endpoint = endpoints[Math.floor(Math.random() * endpoints.length)];
|
|
|
|
|
sendRequest(endpoint);
|
|
|
|
|
}, interval);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function stopLoadTest() {
|
|
|
|
|
if (loadTestInterval) {
|
|
|
|
|
clearInterval(loadTestInterval);
|
|
|
|
|
loadTestInterval = null;
|
|
|
|
|
activeTests = Math.max(0, activeTests - 1);
|
|
|
|
|
updateStats();
|
|
|
|
|
logMessage('Load test stopped');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function sendCustomRequests() {
|
|
|
|
|
const count = parseInt(document.getElementById('requestCount').value);
|
|
|
|
|
const endpoints = ['/', '/api/test', '/api/error', '/api/random', '/health'];
|
|
|
|
|
|
|
|
|
|
logMessage(`Sending ${count} custom requests`);
|
|
|
|
|
|
|
|
|
|
activeTests++;
|
|
|
|
|
updateStats();
|
|
|
|
|
|
|
|
|
|
let completed = 0;
|
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const endpoint = endpoints[Math.floor(Math.random() * endpoints.length)];
|
|
|
|
|
sendRequest(endpoint);
|
|
|
|
|
completed++;
|
|
|
|
|
if (completed === count) {
|
|
|
|
|
activeTests--;
|
|
|
|
|
updateStats();
|
|
|
|
|
logMessage(`Completed ${count} custom requests`);
|
|
|
|
|
}
|
|
|
|
|
}, i * 10); // Stagger requests
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function generateTraffic() {
|
|
|
|
|
logMessage('Starting random traffic generation');
|
|
|
|
|
activeTests++;
|
|
|
|
|
updateStats();
|
|
|
|
|
|
|
|
|
|
const endpoints = ['/', '/api/test', '/api/error', '/api/random', '/health'];
|
|
|
|
|
|
|
|
|
|
const randomTrafficInterval = setInterval(() => {
|
|
|
|
|
if (Math.random() > 0.7) { // 30% chance to send request
|
|
|
|
|
const endpoint = endpoints[Math.floor(Math.random() * endpoints.length)];
|
|
|
|
|
sendRequest(endpoint);
|
|
|
|
|
}
|
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
|
|
// Stop after 2 minutes
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
clearInterval(randomTrafficInterval);
|
|
|
|
|
activeTests--;
|
|
|
|
|
updateStats();
|
|
|
|
|
logMessage('Random traffic generation stopped');
|
|
|
|
|
}, 120000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Initialize with some log messages
|
|
|
|
|
logMessage('App1 Load Testing Interface Ready');
|
|
|
|
|
logMessage(`Server: {{ ansible_hostname }} ({{ ansible_default_ipv4.address }})`);
|
|
|
|
|
logMessage('Use buttons above to generate load for monitoring');
|
|
|
|
|
</script>
|
2026-02-04 03:49:11 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
