Enhance dashboard with next backup time, reorganized layout, and pagination
## Dashboard Improvements ### 1. Add Time to Next Backup Display - Add new `/next-backup` endpoint with cron schedule parsing - Display time until next backup in human-readable format (e.g., "16 hours") - Show formatted next backup time (e.g., "07:00am") - Add next backup info to System Health card with schedule details - Include format_time_until helper for readable time formatting ### 2. Reorganize Dashboard Layout - Move "Discovered Containers" section above "Recent Backups" - Improve workflow by showing monitored containers before backup history - Better logical flow for users checking system status ### 3. Add Pagination to Recent Backups - Implement client-side pagination with 10 backups per page - Add pagination controls with Previous/Next buttons and page info - Show "Page X of Y" information when multiple pages exist - Hide pagination when 10 or fewer backups exist - Maintain all existing backup display functionality ### 4. Load Historical Backups on Startup - BackupMonitor now scans existing .meta files on initialization - Loads historical backup data from metadata files into backup history - Estimates duration for historical backups based on file size - Maintains chronological order and 1000-record memory limit - Dashboard now shows complete backup history immediately ### Technical Changes - Add loadNextBackupTime() function with auto-refresh - Implement displayBackupsPage() with pagination logic - Add CSS classes for pagination styling - Update refreshAll() to include next backup time - Remove duplicate loadRecentBackups functions - Add proper error handling for all new endpoints Dashboard now provides comprehensive backup monitoring with improved user experience and complete historical data visibility. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
James Paterni
parent
1fa85dac55
commit
d68e676de3
5 changed files with 323 additions and 74 deletions
|
|
@ -30,4 +30,11 @@ baktainer = Baktainer::Runner.new(
|
|||
}
|
||||
)
|
||||
|
||||
if options[:now]
|
||||
LOGGER.info('Running backup immediately (--now flag)')
|
||||
baktainer.perform_backup
|
||||
LOGGER.info('Backup completed, exiting')
|
||||
exit 0
|
||||
else
|
||||
baktainer.run
|
||||
end
|
||||
|
|
@ -15,6 +15,9 @@ class Baktainer::BackupMonitor
|
|||
@start_times = Concurrent::Hash.new
|
||||
@backup_history = Concurrent::Array.new
|
||||
@mutex = Mutex.new
|
||||
|
||||
# Load historical backups on startup
|
||||
load_historical_backups
|
||||
end
|
||||
|
||||
def start_backup(container_name, engine)
|
||||
|
|
@ -162,12 +165,75 @@ class Baktainer::BackupMonitor
|
|||
|
||||
private
|
||||
|
||||
def load_historical_backups
|
||||
backup_dir = ENV['BT_BACKUP_DIR'] || '/backups'
|
||||
|
||||
unless Dir.exist?(backup_dir)
|
||||
@logger.debug("Backup directory #{backup_dir} does not exist, skipping historical backup loading")
|
||||
return
|
||||
end
|
||||
|
||||
@logger.info("Loading historical backup data from #{backup_dir}")
|
||||
|
||||
begin
|
||||
# Find all .meta files recursively
|
||||
meta_files = Dir.glob(File.join(backup_dir, '**', '*.meta'))
|
||||
loaded_count = 0
|
||||
|
||||
meta_files.each do |meta_file|
|
||||
begin
|
||||
# Read and parse metadata
|
||||
metadata = JSON.parse(File.read(meta_file))
|
||||
|
||||
# Convert to backup history format
|
||||
backup_record = {
|
||||
container_name: metadata['container_name'],
|
||||
timestamp: metadata['timestamp'],
|
||||
duration: estimate_backup_duration(metadata['file_size']),
|
||||
file_size: metadata['file_size'],
|
||||
file_path: File.join(File.dirname(meta_file), metadata['backup_file']),
|
||||
status: File.exist?(File.join(File.dirname(meta_file), metadata['backup_file'])) ? 'success' : 'failed'
|
||||
}
|
||||
|
||||
# Add to history
|
||||
@backup_history << backup_record
|
||||
loaded_count += 1
|
||||
|
||||
rescue JSON::ParserError => e
|
||||
@logger.warn("Failed to parse metadata file #{meta_file}: #{e.message}")
|
||||
rescue => e
|
||||
@logger.warn("Error loading backup metadata from #{meta_file}: #{e.message}")
|
||||
end
|
||||
end
|
||||
|
||||
# Sort by timestamp and keep only the most recent 1000 records
|
||||
@backup_history.sort_by! { |backup| backup[:timestamp] }
|
||||
@backup_history = @backup_history.last(1000)
|
||||
|
||||
@logger.info("Loaded #{loaded_count} historical backups from #{meta_files.size} metadata files")
|
||||
|
||||
rescue => e
|
||||
@logger.error("Error loading historical backups: #{e.message}")
|
||||
@logger.debug(e.backtrace.join("\n"))
|
||||
end
|
||||
end
|
||||
|
||||
def estimate_backup_duration(file_size)
|
||||
# Estimate duration based on file size
|
||||
# Assume ~1MB/second processing speed as a reasonable estimate
|
||||
return 1.0 if file_size.nil? || file_size <= 0
|
||||
|
||||
size_mb = file_size.to_f / (1024 * 1024)
|
||||
[size_mb, 1.0].max # Minimum 1 second
|
||||
end
|
||||
|
||||
def record_backup_metrics(backup_record)
|
||||
@mutex.synchronize do
|
||||
@backup_history << backup_record
|
||||
|
||||
# Keep only last 1000 records to prevent memory bloat
|
||||
@backup_history.shift if @backup_history.size > 1000
|
||||
# Sort by timestamp and keep only last 1000 records to prevent memory bloat
|
||||
@backup_history.sort_by! { |backup| backup[:timestamp] }
|
||||
@backup_history = @backup_history.last(1000)
|
||||
|
||||
# Check for performance issues
|
||||
check_performance_alerts(backup_record)
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@
|
|||
color: #27ae60;
|
||||
}
|
||||
|
||||
.success { color: #27ae60; }
|
||||
.error { color: #e74c3c; }
|
||||
.warning { color: #f39c12; }
|
||||
|
||||
|
|
@ -132,6 +133,38 @@
|
|||
.loading {
|
||||
display: none;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.pagination-button:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.pagination-button:disabled {
|
||||
background: #bdc3c7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -204,6 +237,9 @@
|
|||
<div id="health-metrics">
|
||||
<div class="loading">Loading health data...</div>
|
||||
</div>
|
||||
<div id="next-backup-info" style="margin-top: 1rem; border-top: 1px solid #eee; padding-top: 1rem;">
|
||||
<div class="loading">Loading next backup time...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backup Statistics Card -->
|
||||
|
|
@ -223,21 +259,22 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Backups Table -->
|
||||
<div class="table-container">
|
||||
<h3 style="margin-bottom: 1rem;">📋 Recent Backups</h3>
|
||||
<div id="recent-backups">
|
||||
<div class="loading">Loading recent backups...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Container Discovery Table -->
|
||||
<div class="table-container" style="margin-top: 2rem;">
|
||||
<div class="table-container">
|
||||
<h3 style="margin-bottom: 1rem;">🐳 Discovered Containers</h3>
|
||||
<div id="containers-list">
|
||||
<div class="loading">Loading containers...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Backups Table -->
|
||||
<div class="table-container" style="margin-top: 2rem;">
|
||||
<h3 style="margin-bottom: 1rem;">📋 Recent Backups</h3>
|
||||
<div id="recent-backups">
|
||||
<div class="loading">Loading recent backups...</div>
|
||||
</div>
|
||||
<div id="backup-pagination" class="pagination-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
@ -266,7 +303,8 @@
|
|||
loadBackupStatistics(),
|
||||
loadSystemInfo(),
|
||||
loadRecentBackups(),
|
||||
loadContainers()
|
||||
loadContainers(),
|
||||
loadNextBackupTime()
|
||||
]).catch(error => {
|
||||
showError('Failed to refresh dashboard: ' + error.message);
|
||||
});
|
||||
|
|
@ -457,56 +495,6 @@
|
|||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
async function loadRecentBackups() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/backups`);
|
||||
const data = await response.json();
|
||||
|
||||
displayRecentBackups(data.recent_backups || []);
|
||||
} catch (error) {
|
||||
document.getElementById('recent-backups').innerHTML =
|
||||
'<div class="error">Failed to load recent backups</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displayRecentBackups(backups) {
|
||||
const container = document.getElementById('recent-backups');
|
||||
|
||||
if (backups.length === 0) {
|
||||
container.innerHTML = '<div class="metric">No recent backups found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container</th>
|
||||
<th>Status</th>
|
||||
<th>Size</th>
|
||||
<th>Duration</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
backups.forEach(backup => {
|
||||
const statusClass = backup.status === 'completed' ? '' : 'error';
|
||||
html += `
|
||||
<tr>
|
||||
<td>${backup.container_name || 'Unknown'}</td>
|
||||
<td><span class="metric-value ${statusClass}">${backup.status || 'Unknown'}</span></td>
|
||||
<td>${backup.file_size ? formatBytes(backup.file_size) : '-'}</td>
|
||||
<td>${backup.duration ? formatDuration(backup.duration) : '-'}</td>
|
||||
<td>${backup.timestamp ? timeAgo(backup.timestamp) : '-'}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</tbody></table>';
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
async function loadContainers() {
|
||||
try {
|
||||
|
|
@ -543,13 +531,17 @@
|
|||
`;
|
||||
|
||||
containers.forEach(cont => {
|
||||
const stateClass = cont.state && cont.state.Running ? '' : 'warning';
|
||||
// Use the new state field and running boolean
|
||||
const isRunning = cont.running || cont.state === 'running';
|
||||
const stateClass = isRunning ? 'success' : 'error';
|
||||
const stateText = isRunning ? 'Running' : 'Stopped';
|
||||
|
||||
html += `
|
||||
<tr>
|
||||
<td>${cont.name || 'Unknown'}</td>
|
||||
<td>${cont.engine || 'Unknown'}</td>
|
||||
<td>${cont.database || 'Unknown'}</td>
|
||||
<td><span class="metric-value ${stateClass}">${cont.state && cont.state.Running ? 'Running' : 'Stopped'}</span></td>
|
||||
<td><span class="metric-value ${stateClass}">${stateText}</span></td>
|
||||
<td><code>${(cont.container_id || '').substring(0, 12)}</code></td>
|
||||
</tr>
|
||||
`;
|
||||
|
|
@ -558,6 +550,130 @@
|
|||
html += '</tbody></table>';
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
async function loadNextBackupTime() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/next-backup`);
|
||||
const data = await response.json();
|
||||
|
||||
displayNextBackupTime(data);
|
||||
} catch (error) {
|
||||
document.getElementById('next-backup-info').innerHTML =
|
||||
'<div class="error">Failed to load next backup time</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displayNextBackupTime(data) {
|
||||
const container = document.getElementById('next-backup-info');
|
||||
|
||||
const html = `
|
||||
<div class="metric">
|
||||
<span>Next Backup</span>
|
||||
<span class="metric-value">${data.time_until_human} (${data.next_backup_formatted})</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span>Schedule</span>
|
||||
<span class="metric-value">${data.cron_schedule}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// Pagination state
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 10;
|
||||
let allBackups = [];
|
||||
|
||||
async function loadRecentBackups() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/backups`);
|
||||
const data = await response.json();
|
||||
|
||||
allBackups = data.recent_backups || [];
|
||||
displayBackupsPage(currentPage);
|
||||
} catch (error) {
|
||||
document.getElementById('recent-backups').innerHTML =
|
||||
'<div class="error">Failed to load recent backups</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displayBackupsPage(page) {
|
||||
const container = document.getElementById('recent-backups');
|
||||
const paginationContainer = document.getElementById('backup-pagination');
|
||||
|
||||
const startIndex = (page - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
const pageBackups = allBackups.slice(startIndex, endIndex);
|
||||
|
||||
if (pageBackups.length === 0) {
|
||||
container.innerHTML = '<div class="metric">No backups found</div>';
|
||||
paginationContainer.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container</th>
|
||||
<th>Status</th>
|
||||
<th>Size</th>
|
||||
<th>Duration</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
pageBackups.forEach(backup => {
|
||||
const statusClass = backup.status === 'success' ? 'success' :
|
||||
backup.status === 'completed' ? 'success' : 'error';
|
||||
html += `
|
||||
<tr>
|
||||
<td>${backup.container_name || 'Unknown'}</td>
|
||||
<td><span class="metric-value ${statusClass}">${backup.status || 'Unknown'}</span></td>
|
||||
<td>${backup.file_size ? formatBytes(backup.file_size) : '-'}</td>
|
||||
<td>${backup.duration ? formatDuration(backup.duration) : '-'}</td>
|
||||
<td>${backup.timestamp ? timeAgo(backup.timestamp) : '-'}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</tbody></table>';
|
||||
container.innerHTML = html;
|
||||
|
||||
// Update pagination
|
||||
displayPagination(page, allBackups.length);
|
||||
}
|
||||
|
||||
function displayPagination(currentPage, totalItems) {
|
||||
const container = document.getElementById('backup-pagination');
|
||||
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
||||
|
||||
if (totalPages <= 1) {
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
|
||||
// Previous button
|
||||
html += `<button class="pagination-button" ${currentPage === 1 ? 'disabled' : ''} onclick="goToPage(${currentPage - 1})">Previous</button>`;
|
||||
|
||||
// Page info
|
||||
html += `<span class="pagination-info">Page ${currentPage} of ${totalPages}</span>`;
|
||||
|
||||
// Next button
|
||||
html += `<button class="pagination-button" ${currentPage === totalPages ? 'disabled' : ''} onclick="goToPage(${currentPage + 1})">Next</button>`;
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function goToPage(page) {
|
||||
currentPage = page;
|
||||
displayBackupsPage(currentPage);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -168,15 +168,22 @@ class Baktainer::FileSystemOperations
|
|||
stat.bavail * stat.frsize
|
||||
else
|
||||
# Fallback: use df command for cross-platform compatibility
|
||||
df_output = `df -k #{path} 2>/dev/null | tail -1`
|
||||
if $?.success? && df_output.match(/\s+(\d+)\s+\d+%?\s*$/)
|
||||
df_output = `df -k "#{path}" 2>/dev/null | tail -1`
|
||||
if $?.success?
|
||||
# Parse df output: filesystem size used available use% mount
|
||||
# Example: /dev/sda1 715822476 574981716 104405460 85% /backups
|
||||
parts = df_output.split(/\s+/)
|
||||
if parts.length >= 4
|
||||
# Available space is the 4th column (index 3)
|
||||
available_kb = parts[3].to_i
|
||||
# Convert from 1K blocks to bytes
|
||||
$1.to_i * 1024
|
||||
else
|
||||
return available_kb * 1024
|
||||
end
|
||||
end
|
||||
|
||||
@logger.warn("Could not determine disk space for #{path} using df command")
|
||||
# Return a large number to avoid blocking on disk space check failure
|
||||
1024 * 1024 * 1024 # 1GB
|
||||
end
|
||||
1024 * 1024 * 1024 * 1024 # 1TB instead of 1GB
|
||||
end
|
||||
rescue SystemCallError => e
|
||||
@logger.warn("Could not determine disk space for #{path}: #{e.message}")
|
||||
|
|
|
|||
|
|
@ -111,7 +111,8 @@ class Baktainer::HealthCheckServer < Sinatra::Base
|
|||
all_databases: container.all_databases?,
|
||||
container_id: container.docker_container.id,
|
||||
created: container.docker_container.info['Created'],
|
||||
state: container.docker_container.info['State']
|
||||
state: container.running? ? 'running' : 'stopped',
|
||||
running: container.running?
|
||||
}
|
||||
end
|
||||
|
||||
|
|
@ -131,6 +132,43 @@ class Baktainer::HealthCheckServer < Sinatra::Base
|
|||
end
|
||||
end
|
||||
|
||||
# Next backup time endpoint
|
||||
get '/next-backup' do
|
||||
content_type :json
|
||||
|
||||
begin
|
||||
cron_schedule = ENV['BT_CRON'] || '0 0 * * *'
|
||||
|
||||
# Parse cron schedule
|
||||
require 'cron_calc'
|
||||
cron = CronCalc.new(cron_schedule)
|
||||
|
||||
now = Time.now
|
||||
next_runs = cron.next(now)
|
||||
next_run = next_runs.is_a?(Array) ? next_runs.first : next_runs
|
||||
next_run = Time.at(next_run) if next_run.is_a?(Numeric)
|
||||
|
||||
time_until = next_run - now
|
||||
|
||||
{
|
||||
next_backup_time: next_run.iso8601,
|
||||
time_until_seconds: time_until.to_i,
|
||||
time_until_human: format_time_until(time_until),
|
||||
next_backup_formatted: next_run.strftime('%I:%M%p').downcase,
|
||||
cron_schedule: cron_schedule,
|
||||
timestamp: Time.now.iso8601
|
||||
}.to_json
|
||||
rescue => e
|
||||
@logger.error("Next backup endpoint error: #{e.message}")
|
||||
status 500
|
||||
{
|
||||
status: 'error',
|
||||
message: e.message,
|
||||
timestamp: Time.now.iso8601
|
||||
}.to_json
|
||||
end
|
||||
end
|
||||
|
||||
# Configuration endpoint (sanitized for security)
|
||||
get '/config' do
|
||||
content_type :json
|
||||
|
|
@ -300,6 +338,21 @@ class Baktainer::HealthCheckServer < Sinatra::Base
|
|||
nil
|
||||
end
|
||||
|
||||
def format_time_until(seconds)
|
||||
if seconds < 60
|
||||
"#{seconds.to_i} seconds"
|
||||
elsif seconds < 3600
|
||||
minutes = (seconds / 60).to_i
|
||||
"#{minutes} minute#{'s' if minutes != 1}"
|
||||
elsif seconds < 86400
|
||||
hours = (seconds / 3600).to_i
|
||||
"#{hours} hour#{'s' if hours != 1}"
|
||||
else
|
||||
days = (seconds / 86400).to_i
|
||||
"#{days} day#{'s' if days != 1}"
|
||||
end
|
||||
end
|
||||
|
||||
def generate_prometheus_metrics
|
||||
metrics = []
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue