122 lines
5.4 KiB
HTML
122 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Database Health Dashboard</title>
|
|
<style>
|
|
.dashboard { font-family: Arial, sans-serif; max-width: 1200px; margin: 20px auto; }
|
|
.header { text-align: center; padding: 10px; background: #f0f0f0; }
|
|
.tabs { display: flex; justify-content: space-around; margin: 10px 0; }
|
|
.tab { padding: 10px; cursor: pointer; background: #ddd; }
|
|
.tab.active { background: #007bff; color: white; }
|
|
.section { border: 1px solid #ccc; padding: 20px; margin: 10px 0; }
|
|
.chart { width: 50%; float: left; }
|
|
.summary { width: 45%; float: right; }
|
|
.status-red { background: #dc3545; color: white; padding: 5px; border-radius: 3px; }
|
|
.status-yellow { background: #ffc107; color: black; padding: 5px; border-radius: 3px; }
|
|
.status-green { background: #28a745; color: white; padding: 5px; border-radius: 3px; }
|
|
.recommendation { font-style: italic; color: #555; }
|
|
.details-link { display: block; margin-top: 10px; color: #007bff; text-decoration: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="dashboard">
|
|
<div class="header">
|
|
<h1>Database Health Dashboard</h1>
|
|
</div>
|
|
<div class="tabs">
|
|
<div class="tab active">Vacuum Health</div>
|
|
<div class="tab">Index Health</div>
|
|
<div class="tab">MV Refresh</div>
|
|
</div>
|
|
|
|
<!-- Vacuum Health Section -->
|
|
<div class="section">
|
|
<h2>Vacuum Health Overview</h2>
|
|
<div class="chart">
|
|
<!-- Pie Chart: 60% Green, 30% Yellow, 10% Red -->
|
|
<canvas id="vacuumChart"></canvas>
|
|
<script>
|
|
// Placeholder for Chart.js or similar
|
|
const ctx = document.getElementById('vacuumChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Healthy', 'Warning', 'Critical'],
|
|
datasets: [{ data: [60, 30, 10], backgroundColor: ['#28a745', '#ffc107', '#dc3545'] }]
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
<div class="summary">
|
|
<p><strong>Tables Scanned:</strong> 25</p>
|
|
<p><strong>Critical Issues:</strong> <span class="status-red">2 tables</span></p>
|
|
<p><strong>Warnings:</strong> <span class="status-yellow">5 tables</span></p>
|
|
<p><strong>Healthy:</strong> <span class="status-green">18 tables</span></p>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
<p class="recommendation">
|
|
Recommendation: Run VACUUM FULL on 2 tables with critical bloat; TOAST overhead notable in 1 case.
|
|
</p>
|
|
<a href="/vacuum-details" class="details-link">View Detailed Vacuum Stats</a>
|
|
</div>
|
|
|
|
<!-- Index Health Section -->
|
|
<div class="section">
|
|
<h2>Index Health Overview</h2>
|
|
<div class="chart">
|
|
<!-- Bar Chart: Index Usage -->
|
|
<canvas id="indexChart"></canvas>
|
|
<script>
|
|
new Chart(document.getElementById('indexChart').getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Healthy', 'Low Usage', 'Unused'],
|
|
datasets: [{ data: [15, 3, 1], backgroundColor: '#28a745' }]
|
|
},
|
|
options: { scales: { y: { beginAtZero: true } } }
|
|
});
|
|
</script>
|
|
</div>
|
|
<div class="summary">
|
|
<p><strong>Indexes Monitored:</strong> 19</p>
|
|
<p><strong>Critical Issues:</strong> <span class="status-red">1 unused</span></p>
|
|
<p><strong>Warnings:</strong> <span class="status-yellow">3 low usage</span></p>
|
|
<p><strong>Healthy:</strong> <span class="status-green">15 indexes</span></p>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
<p class="recommendation">
|
|
Recommendation: Consider dropping 1 unused index; review query patterns for 3 others.
|
|
</p>
|
|
<a href="/index-details" class="details-link">View Detailed Index Stats</a>
|
|
<a href="/toast-details" class="details-link">View TOAST Index Stats</a>
|
|
</div>
|
|
|
|
<!-- MV Refresh Section -->
|
|
<div class="section">
|
|
<h2>Materialized View Refresh Overview</h2>
|
|
<div class="chart">
|
|
<!-- Progress Bars: Refresh Performance -->
|
|
<div style="margin-bottom: 10px;">
|
|
<label>MV1: <span class="status-green">Green</span></label>
|
|
<progress value="20" max="100" style="width: 100%;"></progress>
|
|
</div>
|
|
<div>
|
|
<label>MV2: <span class="status-yellow">Yellow</span></label>
|
|
<progress value="60" max="100" style="width: 100%;"></progress>
|
|
</div>
|
|
</div>
|
|
<div class="summary">
|
|
<p><strong>MVs Monitored:</strong> 2</p>
|
|
<p><strong>Critical Issues:</strong> <span class="status-red">0 MVs</span></p>
|
|
<p><strong>Warnings:</strong> <span class="status-yellow">1 MV</span></p>
|
|
<p><strong>Healthy:</strong> <span class="status-green">1 MV</span></p>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
<p class="recommendation">
|
|
Recommendation: Monitor MV2 refresh; consider scheduling during off-peak hours.
|
|
</p>
|
|
<a href="/mv-details" class="details-link">View Detailed MV Stats</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |