416 lines
19 KiB
HTML
416 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Home Server Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.status-indicator {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900 min-h-screen text-gray-100">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Header -->
|
|
<header class="mb-8">
|
|
<h1 class="text-4xl font-bold text-white mb-2">Home Server Dashboard</h1>
|
|
<p class="text-gray-400">Centralized access to your self-hosted applications</p>
|
|
<div class="flex items-center space-x-4 mt-4">
|
|
<button onclick="syncApplications()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm">
|
|
<i class="fas fa-sync-alt mr-2"></i>Sync Apps
|
|
</button>
|
|
<button onclick="refreshData()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm">
|
|
<i class="fas fa-refresh mr-2"></i>Refresh
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Server Info Card -->
|
|
<div class="bg-gray-800 rounded-xl shadow-md overflow-hidden col-span-1 border border-gray-700">
|
|
<div class="bg-indigo-600 p-4">
|
|
<h2 class="text-xl font-semibold text-white">Server Information</h2>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-gray-300">CPU Usage</span>
|
|
<span id="cpu-usage" class="text-white font-semibold">--</span>
|
|
</div>
|
|
<div class="w-full bg-gray-700 rounded-full h-2">
|
|
<div id="cpu-bar" class="bg-indigo-500 h-2 rounded-full" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-gray-300">Memory Usage</span>
|
|
<span id="memory-usage" class="text-white font-semibold">--</span>
|
|
</div>
|
|
<div class="w-full bg-gray-700 rounded-full h-2">
|
|
<div id="memory-bar" class="bg-green-500 h-2 rounded-full" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-gray-300">Disk Usage</span>
|
|
<span id="disk-usage" class="text-white font-semibold">--</span>
|
|
</div>
|
|
<div class="w-full bg-gray-700 rounded-full h-2">
|
|
<div id="disk-bar" class="bg-yellow-500 h-2 rounded-full" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-4 border-t border-gray-700">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-300">Uptime</span>
|
|
<span id="server-uptime" class="text-white">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Applications Grid -->
|
|
<div class="bg-gray-800 rounded-xl shadow-md overflow-hidden col-span-1 lg:col-span-2 border border-gray-700">
|
|
<div class="bg-indigo-600 p-4">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-xl font-semibold text-white">Hosted Applications</h2>
|
|
<div class="flex items-center">
|
|
<div id="refresh-indicator" class="hidden">
|
|
<i class="fas fa-spinner fa-spin text-white mr-2"></i>
|
|
</div>
|
|
<span id="app-count" class="text-sm text-gray-300">0 apps</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div id="container-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-2xl text-gray-400 mb-2"></i>
|
|
<p class="text-gray-400">Loading applications...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="mt-8 bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-700">
|
|
<div class="bg-indigo-600 p-4">
|
|
<h2 class="text-xl font-semibold text-white">Recent Activity</h2>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-4">
|
|
<i class="fas fa-check text-green-600"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-white">Dashboard initialized</p>
|
|
<p class="text-xs text-gray-400">Just now - System ready</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="mt-8 text-center text-sm text-gray-400">
|
|
<p>Home Server Dashboard v1.0.0 | Last updated: <span id="last-updated">Just now</span></p>
|
|
<p class="mt-1">© 2023 Home Server | <a href="#" class="text-indigo-600 hover:text-indigo-400">Server Settings</a></p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// API endpoints
|
|
const API_BASE = window.location.origin;
|
|
const REFRESH_INTERVAL = 30; // seconds
|
|
|
|
// Show notification
|
|
function showNotification(message, type = 'info') {
|
|
const colors = {
|
|
success: 'bg-green-500',
|
|
error: 'bg-red-500',
|
|
warning: 'bg-yellow-500',
|
|
info: 'bg-blue-500'
|
|
};
|
|
|
|
const notification = document.createElement('div');
|
|
notification.className = `fixed top-4 right-4 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg z-50`;
|
|
notification.textContent = message;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => {
|
|
notification.remove();
|
|
}, 3000);
|
|
}
|
|
|
|
// Load system information
|
|
async function loadSystemInfo() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/system`);
|
|
const data = await response.json();
|
|
|
|
if (data.cpu_percent !== undefined) {
|
|
const cpuPercent = Math.round(data.cpu_percent);
|
|
document.getElementById('cpu-usage').textContent = `${cpuPercent}%`;
|
|
document.getElementById('cpu-bar').style.width = `${cpuPercent}%`;
|
|
}
|
|
|
|
if (data.memory_percent !== undefined) {
|
|
const memoryPercent = Math.round(data.memory_percent);
|
|
document.getElementById('memory-usage').textContent = `${memoryPercent}%`;
|
|
document.getElementById('memory-bar').style.width = `${memoryPercent}%`;
|
|
}
|
|
|
|
if (data.disk_percent !== undefined) {
|
|
const diskPercent = Math.round(data.disk_percent);
|
|
document.getElementById('disk-usage').textContent = `${diskPercent}%`;
|
|
document.getElementById('disk-bar').style.width = `${diskPercent}%`;
|
|
}
|
|
|
|
if (data.uptime) {
|
|
document.getElementById('server-uptime').textContent = data.uptime;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading system info:', error);
|
|
}
|
|
}
|
|
|
|
// Create application card
|
|
function createAppCard(app) {
|
|
const card = document.createElement('div');
|
|
card.className = 'bg-gray-700 rounded-lg p-4 border border-gray-600 card-hover';
|
|
|
|
const statusColor = app.status === 'running' ? 'text-green-400' : 'text-red-400';
|
|
const statusIndicator = app.status === 'running' ? 'bg-green-500' : 'bg-red-500';
|
|
|
|
card.innerHTML = `
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div class="flex items-center">
|
|
<div class="h-10 w-10 rounded-md bg-${app.color || 'gray'}-600 flex items-center justify-center mr-3">
|
|
<i class="${app.icon || 'fas fa-cube'} text-white"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-white">${app.display_name || app.container_name}</h3>
|
|
<p class="text-xs text-gray-400">${app.description || app.image}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-2 h-2 rounded-full ${statusIndicator} ${app.status === 'running' ? 'status-indicator' : ''}"></div>
|
|
<span class="text-xs ${statusColor}">${app.status}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-400">Uptime:</span>
|
|
<span class="text-white">${app.uptime || 'N/A'}</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col space-y-2">
|
|
${app.url ? `<a href="${app.url}" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm py-1 px-3 rounded text-center">
|
|
<i class="fas fa-external-link-alt mr-1"></i>Open
|
|
</a>` : ''}
|
|
|
|
<div class="grid grid-cols-3 gap-1">
|
|
<button onclick="manageContainer('${app.container_id}', 'start')" class="bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-2 rounded" ${app.status === 'running' ? 'disabled' : ''}>
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
<button onclick="manageContainer('${app.container_id}', 'stop')" class="bg-red-600 hover:bg-red-700 text-white text-xs py-1 px-2 rounded" ${app.status !== 'running' ? 'disabled' : ''}>
|
|
<i class="fas fa-stop"></i>
|
|
</button>
|
|
<button onclick="manageContainer('${app.container_id}', 'restart')" class="bg-yellow-600 hover:bg-yellow-700 text-white text-xs py-1 px-2 rounded">
|
|
<i class="fas fa-redo"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<button onclick="editApplication('${app.container_id}')" class="bg-gray-600 hover:bg-gray-500 text-white text-sm py-1 px-3 rounded">
|
|
<i class="fas fa-edit mr-1"></i>Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return card;
|
|
}
|
|
|
|
// Load applications from database
|
|
async function loadApplications() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/applications`);
|
|
const data = await response.json();
|
|
|
|
const containerGrid = document.getElementById('container-grid');
|
|
containerGrid.innerHTML = '';
|
|
|
|
if (data.applications && data.applications.length > 0) {
|
|
document.getElementById('app-count').textContent = `${data.applications.length} apps`;
|
|
|
|
data.applications.forEach(app => {
|
|
const card = createAppCard(app);
|
|
containerGrid.appendChild(card);
|
|
});
|
|
} else {
|
|
containerGrid.innerHTML = '<div class="col-span-2 text-center py-8"><i class="fas fa-inbox text-4xl text-gray-400 mb-2"></i><p class="text-gray-400">No applications found</p><button onclick="syncApplications()" class="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded">Sync Applications</button></div>';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading applications:', error);
|
|
showNotification('Error loading applications', 'error');
|
|
}
|
|
}
|
|
|
|
// Edit application
|
|
async function editApplication(containerId) {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/applications/${containerId}`);
|
|
const app = await response.json();
|
|
|
|
if (app.error) {
|
|
showNotification('Application not found', 'error');
|
|
return;
|
|
}
|
|
|
|
const newName = prompt('Enter display name:', app.display_name || app.container_name);
|
|
const newIcon = prompt('Enter icon class (e.g., fas fa-cube):', app.icon || 'fas fa-cube');
|
|
const newColor = prompt('Enter color (e.g., blue, green, red):', app.color || 'gray');
|
|
const newDescription = prompt('Enter description:', app.description || '');
|
|
const newUrl = prompt('Enter URL:', app.url || '');
|
|
|
|
if (newName && newIcon && newColor) {
|
|
const updateResponse = await fetch(`${API_BASE}/api/applications/${containerId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
display_name: newName,
|
|
icon: newIcon,
|
|
color: newColor,
|
|
description: newDescription,
|
|
url: newUrl
|
|
})
|
|
});
|
|
|
|
const result = await updateResponse.json();
|
|
if (result.success) {
|
|
showNotification('Application updated successfully', 'success');
|
|
loadApplications();
|
|
} else {
|
|
showNotification('Failed to update application', 'error');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error editing application:', error);
|
|
showNotification('Error editing application', 'error');
|
|
}
|
|
}
|
|
|
|
// Manage container (start/stop/restart)
|
|
async function manageContainer(containerId, action) {
|
|
try {
|
|
showNotification(`${action.charAt(0).toUpperCase() + action.slice(1)}ing container...`, 'info');
|
|
|
|
const response = await fetch(`${API_BASE}/api/containers/${containerId}/${action}`, {
|
|
method: 'POST'
|
|
});
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
showNotification(`Container ${action}ed successfully`, 'success');
|
|
// Refresh the applications to show updated status
|
|
setTimeout(() => {
|
|
loadApplications();
|
|
}, 2000);
|
|
} else {
|
|
showNotification(`Failed to ${action} container: ${result.error}`, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error ${action}ing container:`, error);
|
|
showNotification(`Error ${action}ing container`, 'error');
|
|
}
|
|
}
|
|
|
|
// Sync applications with containers
|
|
async function syncApplications() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/applications/sync`, {
|
|
method: 'POST'
|
|
});
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
showNotification('Applications synced successfully', 'success');
|
|
loadApplications();
|
|
} else {
|
|
showNotification('Failed to sync applications', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error syncing applications:', error);
|
|
showNotification('Error syncing applications', 'error');
|
|
}
|
|
}
|
|
|
|
// Refresh all data
|
|
async function refreshData() {
|
|
const indicator = document.getElementById('refresh-indicator');
|
|
indicator.classList.remove('hidden');
|
|
|
|
await loadSystemInfo();
|
|
await loadApplications();
|
|
|
|
indicator.classList.add('hidden');
|
|
showNotification('Data refreshed', 'success');
|
|
}
|
|
|
|
// Update timestamps
|
|
function updateTimestamps() {
|
|
const now = new Date();
|
|
document.getElementById('last-updated').textContent = now.toLocaleString();
|
|
}
|
|
|
|
// Initialize dashboard
|
|
async function initDashboard() {
|
|
await loadSystemInfo();
|
|
await loadApplications();
|
|
updateTimestamps();
|
|
showNotification('Dashboard loaded successfully', 'success');
|
|
}
|
|
|
|
// Start dashboard
|
|
initDashboard();
|
|
|
|
// Auto refresh
|
|
setInterval(() => {
|
|
loadSystemInfo();
|
|
loadApplications();
|
|
updateTimestamps();
|
|
}, REFRESH_INTERVAL * 1000);
|
|
|
|
// Handle connection events
|
|
window.addEventListener('online', () => {
|
|
showNotification('Connection restored', 'success');
|
|
initDashboard();
|
|
});
|
|
|
|
window.addEventListener('offline', () => {
|
|
showNotification('Connection lost', 'error');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |