peterwood/shell
1
0
Fork 0
mirror of https://github.com/acedanger/shell.git synced 2025-12-06 00:00:13 -08:00
Code Issues 19 Packages Projects Releases Wiki Activity

feat: Add base HTML template and implement dashboard, logs, and service views

Browse Source 
- Created a base HTML template for consistent layout across pages.
- Developed a dashboard page to display backup service metrics and statuses.
- Implemented a log viewer for detailed log file inspection.
- Added error handling page for better user experience during failures.
- Introduced service detail page to show specific service metrics and actions.
- Enhanced log filtering and viewing capabilities.
- Integrated auto-refresh functionality for real-time updates on metrics.
- Created integration and unit test scripts for backup metrics functionality.
This commit is contained in:
Peter Wood
2025-06-18 08:06:08 -04:00
parent d066f32b10
commit 6d726cb015
34 changed files with 6006 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
templates/log_viewer.html Normal file
View File

@@ -0,0 +1,138 @@
{% extends "base.html" %}
{% block title %}Log: {{ filename }} - Backup Monitor{% endblock %}
{% block content %}
<div class="container-fluid mt-4">
<!-- Header -->
<div class="row mb-4">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ url_for('index') }}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{{ url_for('logs_view') }}">Logs</a></li>
<li class="breadcrumb-item active">{{ filename }}</li>
</ol>
</nav>
<div class="d-flex justify-content-between align-items-center">
<h1 class="display-6">
<i class="fas fa-file-alt text-primary me-3"></i>
{{ filename }}
</h1>
<div class="btn-group">
<button class="btn btn-outline-primary" onclick="refreshLog()">
<i class="fas fa-sync-alt me-1"></i>Refresh
</button>
<a href="/api/logs/download/{{ filename }}" class="btn btn-outline-secondary">
<i class="fas fa-download me-1"></i>Download
</a>
<a href="{{ url_for('logs_view') }}" class="btn btn-outline-dark">
<i class="fas fa-arrow-left me-1"></i>Back to Logs
</a>
</div>
</div>
</div>
</div>
<!-- Log Info -->
<div class="row mb-3">
<div class="col-12">
<div class="card">
<div class="card-body py-2">
<div class="row text-center">
<div class="col-md-3">
<small class="text-muted">File Size:</small>
<strong class="d-block">{{ file_size }}</strong>
</div>
<div class="col-md-3">
<small class="text-muted">Last Modified:</small>
<strong class="d-block">{{ last_modified }}</strong>
</div>
<div class="col-md-3">
<small class="text-muted">Lines:</small>
<strong class="d-block">{{ total_lines }}</strong>
</div>
<div class="col-md-3">
<small class="text-muted">Showing:</small>
<strong class="d-block">Last {{ lines_shown }} lines</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Log Content -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Log Content</h5>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="autoRefresh" checked>
<label class="form-check-label" for="autoRefresh">
Auto-refresh
</label>
</div>
</div>
<div class="card-body p-0">
{% if content %}
<pre class="mb-0 p-3" style="background-color: #f8f9fa; max-height: 70vh; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 0.85rem; line-height: 1.4;">{{ content }}</pre>
{% else %}
<div class="text-center p-5 text-muted">
<i class="fas fa-file-alt fa-3x mb-3"></i>
<p>Log file is empty or could not be read.</p>
</div>
{% endif %}
</div>
{% if content %}
<div class="card-footer text-muted">
<small>
<i class="fas fa-info-circle me-1"></i>
Log content is automatically refreshed every 5 seconds when auto-refresh is enabled.
Scroll to see older entries.
</small>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<script>
let autoRefreshInterval;
function refreshLog() {
location.reload();
}
function setupAutoRefresh() {
const autoRefreshCheckbox = document.getElementById('autoRefresh');
if (autoRefreshCheckbox.checked) {
autoRefreshInterval = setInterval(refreshLog, 5000);
} else {
if (autoRefreshInterval) {
clearInterval(autoRefreshInterval);
}
}
}
document.addEventListener('DOMContentLoaded', function() {
const autoRefreshCheckbox = document.getElementById('autoRefresh');
// Set up auto-refresh initially
setupAutoRefresh();
// Handle checkbox changes
autoRefreshCheckbox.addEventListener('change', setupAutoRefresh);
});
// Clean up interval when page is unloaded
window.addEventListener('beforeunload', function() {
if (autoRefreshInterval) {
clearInterval(autoRefreshInterval);
}
});
</script>
{% endblock %}