107 lines
3.0 KiB
HTML
107 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Stats Grid Test</title>
|
||
|
|
<script type="module" src="./dist_bundle/bundle.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 20px;
|
||
|
|
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
|
|
background: #fafafa;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
body {
|
||
|
|
background: #09090b;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.test-section {
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Stats Grid Component Test</h1>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>Normal Operation</h2>
|
||
|
|
<upl-statuspage-statsgrid
|
||
|
|
id="grid1"
|
||
|
|
current-status="operational"
|
||
|
|
uptime="99.95"
|
||
|
|
avg-response-time="125"
|
||
|
|
total-incidents="0"
|
||
|
|
affected-services="0"
|
||
|
|
total-services="12"
|
||
|
|
time-period="90 days"
|
||
|
|
></upl-statuspage-statsgrid>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>Degraded Performance</h2>
|
||
|
|
<upl-statuspage-statsgrid
|
||
|
|
id="grid2"
|
||
|
|
current-status="degraded"
|
||
|
|
uptime="98.50"
|
||
|
|
avg-response-time="450"
|
||
|
|
total-incidents="3"
|
||
|
|
affected-services="2"
|
||
|
|
total-services="12"
|
||
|
|
time-period="30 days"
|
||
|
|
></upl-statuspage-statsgrid>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>Major Outage</h2>
|
||
|
|
<upl-statuspage-statsgrid
|
||
|
|
id="grid3"
|
||
|
|
current-status="major_outage"
|
||
|
|
uptime="95.20"
|
||
|
|
avg-response-time="1250"
|
||
|
|
total-incidents="8"
|
||
|
|
affected-services="7"
|
||
|
|
total-services="12"
|
||
|
|
time-period="7 days"
|
||
|
|
></upl-statuspage-statsgrid>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>Loading State</h2>
|
||
|
|
<upl-statuspage-statsgrid
|
||
|
|
id="grid4"
|
||
|
|
loading="true"
|
||
|
|
></upl-statuspage-statsgrid>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Test dynamic updates
|
||
|
|
setTimeout(() => {
|
||
|
|
const grid1 = document.getElementById('grid1');
|
||
|
|
console.log('Updating grid1 to show degraded status...');
|
||
|
|
grid1.currentStatus = 'degraded';
|
||
|
|
grid1.avgResponseTime = 350;
|
||
|
|
grid1.totalIncidents = 1;
|
||
|
|
grid1.affectedServices = 1;
|
||
|
|
}, 3000);
|
||
|
|
|
||
|
|
// Test loading state toggle
|
||
|
|
setTimeout(() => {
|
||
|
|
const grid4 = document.getElementById('grid4');
|
||
|
|
console.log('Loading complete, showing data...');
|
||
|
|
grid4.loading = false;
|
||
|
|
grid4.currentStatus = 'operational';
|
||
|
|
grid4.uptime = 99.99;
|
||
|
|
grid4.avgResponseTime = 85;
|
||
|
|
grid4.totalIncidents = 0;
|
||
|
|
grid4.affectedServices = 0;
|
||
|
|
grid4.totalServices = 15;
|
||
|
|
grid4.timePeriod = '24 hours';
|
||
|
|
}, 5000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|