e3454dd10e
Replace the frontpage liquid-fill disk circle with a real donut split into Apps · Docker · Other · Free, keeping disk % used in the centre. Apps come from the per-app generator (root-device bytes), Docker from system df; both are clamped within "used" so skew can't overflow. Live disk ticks redraw it, and the card now clicks through to the full Storage breakdown. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Signed-off-by: librelad <librelad@digitalangels.vip>
661 lines
24 KiB
JavaScript
Executable File
661 lines
24 KiB
JavaScript
Executable File
// Data Loader - Handles loading JSON data files
|
|
class DataLoader {
|
|
static async loadApps() {
|
|
try {
|
|
const response = await fetch('/data/apps/generated/apps.json', { cache: 'no-store' });
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load apps: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
return data.apps;
|
|
} catch (error) {
|
|
console.error('Error loading apps data:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
static async loadCategories() {
|
|
try {
|
|
const response = await fetch('/data/apps/apps-categories.json');
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load categories: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
return data.categories || [];
|
|
} catch (error) {
|
|
console.error('Error loading categories data:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
static async loadConfigCategories() {
|
|
try {
|
|
const response = await fetch('/data/apps/apps-config-categories.json');
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load config categories: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
return data.categories || data;
|
|
} catch (error) {
|
|
console.error('Error loading config categories data:', error);
|
|
return {};
|
|
}
|
|
}
|
|
|
|
static async isAppInstalled(appName) {
|
|
try {
|
|
const apps = await this.loadApps();
|
|
const app = apps.find(a => a.name === appName || a.id === appName);
|
|
return app ? app.installed : false;
|
|
} catch (error) {
|
|
console.error(`Error checking if app ${appName} is installed:`, error);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
static async getContainers() {
|
|
try {
|
|
// Local implementation - return empty array for now
|
|
//console.log('Loading containers locally...');
|
|
|
|
// TODO: Implement local container detection
|
|
// This would require backend integration to query Docker
|
|
|
|
// Return empty array for now
|
|
return [];
|
|
|
|
} catch (error) {
|
|
console.error('Error loading containers:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
static async loadSystemConfigs() {
|
|
try {
|
|
//console.log('Loading system configs');
|
|
|
|
// Load unified config
|
|
try {
|
|
const response = await fetch('/data/config/generated/configs.json');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
//console.log('✅ Loaded unified system config');
|
|
return data;
|
|
} else {
|
|
console.warn('Failed to load unified config:', response.status);
|
|
throw new Error(`Failed to load unified config: ${response.status}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading unified config:', error);
|
|
throw error;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading system configs:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
static async loadConfig(configType) {
|
|
try {
|
|
//console.log(`Loading ${configType} config`);
|
|
|
|
const response = await fetch(`/data/config/generated/config_${configType}.json`);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load ${configType} config: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error(`Error loading ${configType} data:`, error);
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Category helper functions
|
|
let categories = [];
|
|
|
|
function getCategoryIcon(categoryId) {
|
|
const category = categories.find(cat => cat.id === categoryId);
|
|
return category ? category.icon : '/icons/categories/misc.svg';
|
|
}
|
|
|
|
function getCategoryName(categoryId) {
|
|
const category = categories.find(cat => cat.id === categoryId);
|
|
return category ? category.name : categoryId.charAt(0).toUpperCase() + categoryId.slice(1);
|
|
}
|
|
|
|
function getCategoryDescription(categoryId) {
|
|
const category = categories.find(cat => cat.id === categoryId);
|
|
return category ? category.description : '';
|
|
}
|
|
|
|
// Global apps variable for backward compatibility
|
|
let apps = [];
|
|
|
|
// Global system configs variable
|
|
let systemConfigs = [];
|
|
|
|
// Initialize apps and categories data
|
|
async function initializeData() {
|
|
try {
|
|
// Determine current page/route and load appropriate data
|
|
const currentPath = window.location.pathname;
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
|
|
if (currentPath === '/dashboard' || currentPath === '/') {
|
|
// Dashboard: Only installed apps + system info (no categories needed)
|
|
await loadDashboardData();
|
|
} else if (currentPath.startsWith('/apps') || currentPath.startsWith('/app') || searchParams.has('apps') || searchParams.has('app')) {
|
|
// Apps page: All apps + categories (no system configs needed)
|
|
await loadAppsPageData();
|
|
} else if (currentPath.startsWith('/admin') || currentPath.startsWith('/config') || currentPath.startsWith('/ssh') || searchParams.has('config')) {
|
|
// Admin area (config + SSH): system configs + apps + categories
|
|
await loadConfigDetailData();
|
|
} else {
|
|
// Default: Load all data for SPA
|
|
await loadAppsPageData();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error initializing data:', error);
|
|
}
|
|
}
|
|
|
|
// Dashboard update tracking
|
|
let lastDashboardUpdate = null;
|
|
let lastInstalledCount = 0;
|
|
let lastSystemDataHash = null;
|
|
|
|
// Dashboard-specific data loading
|
|
async function loadDashboardData() {
|
|
// console.log('🔄 Loading dashboard data...');
|
|
|
|
// Load all apps with installation status
|
|
const allApps = await DataLoader.loadApps();
|
|
apps = allApps; // All apps, not just installed
|
|
categories = []; // Dashboard doesn't need categories
|
|
systemConfigs = []; // Dashboard doesn't need system configs
|
|
|
|
// Calculate installed apps count
|
|
const installedCount = allApps.filter(app => app.installed === true || app.installed === 'true').length;
|
|
|
|
// Check for updates
|
|
const hasNewApps = installedCount !== lastInstalledCount;
|
|
const currentTime = new Date();
|
|
|
|
// Load system info for dashboard display (this waits for DOM elements)
|
|
await loadSystemInfo();
|
|
|
|
// Update installed count and show update indicator
|
|
const installedCountEl = document.getElementById('installed-count');
|
|
if (installedCountEl) {
|
|
const oldValue = installedCountEl.textContent;
|
|
installedCountEl.textContent = installedCount;
|
|
|
|
// Don't show notification for automatic updates - only manual reloads
|
|
// if (hasNewApps) {
|
|
// showUpdateIndicator(`New apps detected: ${installedCount - lastInstalledCount > 0 ? '+' + (installedCount - lastInstalledCount) : 'Updated'}`);
|
|
// }
|
|
} else {
|
|
console.warn('⚠️ installed-count element not found');
|
|
}
|
|
|
|
// Update last update timestamp
|
|
updateLastUpdateTime(currentTime);
|
|
|
|
// Store current values for next comparison
|
|
lastInstalledCount = installedCount;
|
|
lastDashboardUpdate = currentTime;
|
|
|
|
// Start countdown to next automatic update
|
|
startUpdateCountdown();
|
|
|
|
// Show/refresh the "out of date" banner on the dashboard.
|
|
window.updateNotifier?.renderDashboardBanner();
|
|
|
|
// console.log('✅ Dashboard data loaded successfully');
|
|
}
|
|
|
|
// Countdown timer for next automatic update
|
|
let updateCountdownInterval = null;
|
|
|
|
function startUpdateCountdown() {
|
|
// Clear any existing countdown
|
|
if (updateCountdownInterval) {
|
|
clearInterval(updateCountdownInterval);
|
|
}
|
|
|
|
// Use existing countdown element from HTML
|
|
const countdownEl = document.getElementById('update-countdown');
|
|
if (!countdownEl) {
|
|
console.warn('Update countdown element not found in HTML');
|
|
return;
|
|
}
|
|
|
|
// Update countdown every second
|
|
updateCountdownInterval = setInterval(() => {
|
|
const now = new Date();
|
|
const nextUpdate = new Date(lastDashboardUpdate.getTime() + 60000); // 60 seconds from last update
|
|
const timeLeft = Math.max(0, Math.floor((nextUpdate - now) / 1000));
|
|
|
|
if (timeLeft > 0) {
|
|
countdownEl.textContent = `Next update: ${timeLeft}s`;
|
|
} else {
|
|
countdownEl.textContent = 'Updating...';
|
|
// Actually update the dashboard data
|
|
updateDashboardData().then(() => {
|
|
// After update completes, reset the last update time and restart countdown
|
|
lastDashboardUpdate = new Date();
|
|
startUpdateCountdown(); // Restart the countdown
|
|
});
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
// Actually update dashboard data elements
|
|
async function updateDashboardData() {
|
|
try {
|
|
console.log('🔄 Auto-updating dashboard data...');
|
|
|
|
// Directly update system info (simpler than full dashboard reload)
|
|
await loadSystemInfo();
|
|
|
|
// Reload apps to get updated installed count
|
|
const allApps = await DataLoader.loadApps();
|
|
apps = allApps;
|
|
|
|
// Update installed count
|
|
const installedCount = allApps.filter(app => app.installed === true || app.installed === 'true').length;
|
|
const installedCountEl = document.getElementById('installed-count');
|
|
if (installedCountEl) {
|
|
installedCountEl.textContent = installedCount;
|
|
}
|
|
|
|
console.log('✅ Dashboard data updated successfully');
|
|
} catch (error) {
|
|
console.error('❌ Auto-update failed:', error);
|
|
}
|
|
}
|
|
|
|
// Update last update timestamp display (simplified - just for tracking)
|
|
function updateLastUpdateTime(time) {
|
|
// No timestamp display - just store the time for countdown
|
|
}
|
|
|
|
// Calculate time ago string
|
|
function getTimeAgo(date) {
|
|
const now = new Date();
|
|
const diff = Math.floor((now - date) / 1000); // seconds
|
|
|
|
if (diff < 60) return 'just now';
|
|
if (diff < 3600) return `${Math.floor(diff / 60)} min ago`;
|
|
if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
|
|
return `${Math.floor(diff / 86400)} days ago`;
|
|
}
|
|
|
|
// Apps page data loading
|
|
async function loadAppsPageData() {
|
|
//console.log('Loading apps page data (all apps + categories)...');
|
|
|
|
// Load apps and categories in parallel
|
|
try {
|
|
const [appsData, sidebarCategoriesData, configCategoriesData] = await Promise.all([
|
|
DataLoader.loadApps(),
|
|
DataLoader.loadCategories(),
|
|
DataLoader.loadConfigCategories()
|
|
]);
|
|
|
|
//console.log('🔍 DataLoader Results:');
|
|
//console.log(' - appsData length:', appsData?.length || 0);
|
|
//console.log(' - sidebarCategoriesData type:', typeof sidebarCategoriesData);
|
|
//console.log(' - sidebarCategoriesData keys:', Object.keys(sidebarCategoriesData || {}));
|
|
//console.log(' - configCategoriesData type:', typeof configCategoriesData);
|
|
//console.log(' - configCategoriesData keys:', Object.keys(configCategoriesData || {}));
|
|
|
|
apps = appsData;
|
|
categories = sidebarCategoriesData; // For sidebar
|
|
systemConfigs = []; // Apps page doesn't need system configs
|
|
|
|
//console.log(`Apps page loaded: ${apps.length} apps, ${categories.length} categories`);
|
|
////console.log('Apps array:', apps);
|
|
////console.log('Categories array:', categories);
|
|
|
|
// Trigger custom event for data loaded
|
|
window.dispatchEvent(new CustomEvent('dataLoaded', {
|
|
detail: {
|
|
apps,
|
|
categories: categories, // For sidebar
|
|
sidebarCategories: categories, // Explicit sidebar categories
|
|
configCategories: configCategoriesData, // For config tabs
|
|
systemConfigs
|
|
}
|
|
}));
|
|
} catch (error) {
|
|
console.error('❌ Promise.all failed:', error);
|
|
// Fallback: try loading individually
|
|
try {
|
|
const appsData = await DataLoader.loadApps();
|
|
const sidebarCategoriesData = await DataLoader.loadCategories();
|
|
apps = appsData;
|
|
categories = sidebarCategoriesData;
|
|
systemConfigs = [];
|
|
|
|
// Trigger custom event for data loaded (fallback)
|
|
window.dispatchEvent(new CustomEvent('dataLoaded', {
|
|
detail: {
|
|
apps,
|
|
categories: categories, // For sidebar
|
|
sidebarCategories: categories, // Explicit sidebar categories
|
|
configCategories: {}, // Empty for fallback
|
|
systemConfigs
|
|
}
|
|
}));
|
|
} catch (individualError) {
|
|
console.error('❌ Individual loading failed:', individualError);
|
|
apps = [];
|
|
categories = {};
|
|
systemConfigs = [];
|
|
}
|
|
}
|
|
}
|
|
|
|
// Config detail page data loading
|
|
async function loadConfigDetailData() {
|
|
|
|
// Load everything needed for config management
|
|
const [appsData, categoriesData, systemConfigsData] = await Promise.all([
|
|
DataLoader.loadApps(),
|
|
DataLoader.loadCategories(),
|
|
DataLoader.loadSystemConfigs()
|
|
]);
|
|
|
|
apps = appsData;
|
|
categories = categoriesData;
|
|
systemConfigs = systemConfigsData;
|
|
|
|
////console.log(`Config detail loaded: ${apps.length} apps, ${categories.length} categories, ${systemConfigs.length} system configs`);
|
|
}
|
|
|
|
// Load system information for dashboard
|
|
async function loadSystemInfo() {
|
|
try {
|
|
//console.log('Loading system data');
|
|
|
|
// Add timestamp to prevent browser caching
|
|
const timestamp = Date.now();
|
|
|
|
// Load system info from files generated by LibrePortal commands
|
|
const systemResponse = await fetch(`/data/system/system_info.json?t=${timestamp}`);
|
|
const diskResponse = await fetch(`/data/system/disk_usage.json?t=${timestamp}`);
|
|
const memoryResponse = await fetch(`/data/system/memory_usage.json?t=${timestamp}`);
|
|
|
|
if (!systemResponse.ok || !diskResponse.ok || !memoryResponse.ok) {
|
|
throw new Error(`Failed to load system files: system=${systemResponse.status}, disk=${diskResponse.status}, memory=${memoryResponse.status}`);
|
|
}
|
|
|
|
const systemData = await systemResponse.json();
|
|
const diskData = await diskResponse.json();
|
|
const memoryData = await memoryResponse.json();
|
|
|
|
//console.log('System data:', systemData);
|
|
//console.log('Disk data:', diskData);
|
|
//console.log('Memory data:', memoryData);
|
|
|
|
// Prepare system data
|
|
const osInfo = systemData.os || 'Unknown';
|
|
const cleanOs = osInfo.includes('Ubuntu') ? 'Linux Ubuntu' :
|
|
osInfo.includes('Debian') ? 'Linux Debian' :
|
|
osInfo.includes('CentOS') ? 'Linux CentOS' :
|
|
osInfo.split(' ')[0]; // Take first part like "Linux"
|
|
|
|
const diskChartData = diskData.root || diskData;
|
|
//console.log('Disk chart data:', diskChartData);
|
|
|
|
// Wait for all dashboard elements to be available
|
|
await waitForDashboardElements();
|
|
|
|
// Now update all elements
|
|
const systemInfoEl = document.getElementById('system-info');
|
|
const uptimeEl = document.getElementById('uptime-info');
|
|
const memoryEl = document.getElementById('memory-info');
|
|
|
|
if (systemInfoEl) {
|
|
systemInfoEl.textContent = cleanOs;
|
|
// console.log('✅ Updated OS:', cleanOs);
|
|
} else {
|
|
console.warn('⚠️ system-info element not found');
|
|
}
|
|
|
|
if (uptimeEl) {
|
|
uptimeEl.textContent = systemData.uptime || 'Unknown';
|
|
// console.log('✅ Updated uptime:', systemData.uptime);
|
|
} else {
|
|
console.warn('⚠️ uptime-info element not found');
|
|
}
|
|
|
|
// Update memory info - use the text field which should be properly formatted
|
|
if (memoryEl) {
|
|
memoryEl.textContent = memoryData.text || 'Unknown';
|
|
// console.log('✅ Updated memory:', memoryData.text);
|
|
} else {
|
|
console.warn('⚠️ memory-info element not found');
|
|
}
|
|
|
|
// Update disk usage chart. disk_usage.json reports df's 1K blocks, so
|
|
// normalise to bytes — the donut compares against byte-valued app/docker
|
|
// totals. (LiveSystem already emits bytes.)
|
|
updateDiskChart({ used: (diskChartData.used || 0) * 1024, total: (diskChartData.total || 0) * 1024 });
|
|
loadStorageBreakdown();
|
|
|
|
// Make the disk card open the full Storage breakdown. onclick (not
|
|
// addEventListener) so a dashboard re-mount can't stack duplicate handlers.
|
|
const diskCardEl = document.getElementById('disk-stat-card');
|
|
if (diskCardEl) {
|
|
const goStorage = () => window.navigateToRoute && window.navigateToRoute('/admin/config/system/storage');
|
|
diskCardEl.onclick = goStorage;
|
|
diskCardEl.onkeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goStorage(); } };
|
|
}
|
|
|
|
// Attach the 1 Hz live stream so the headline values tick like an
|
|
// instrument. The static fetch above gave us a complete first paint; the
|
|
// stream takes over for tactile updates without a page refresh.
|
|
attachDashboardLive();
|
|
|
|
} catch (error) {
|
|
console.error('Error loading system info:', error);
|
|
// Fallback values
|
|
const systemInfoEl = document.getElementById('system-info');
|
|
const uptimeEl = document.getElementById('uptime-info');
|
|
const memoryEl = document.getElementById('memory-info');
|
|
|
|
if (systemInfoEl) systemInfoEl.textContent = 'Linux';
|
|
if (uptimeEl) uptimeEl.textContent = 'Unknown';
|
|
if (memoryEl) memoryEl.textContent = 'Unknown';
|
|
|
|
// Mock disk usage for demo - wait for DOM elements
|
|
waitForDashboardElements().then(() => {
|
|
updateDiskChart({ used: 50, total: 100 });
|
|
});
|
|
}
|
|
}
|
|
|
|
// Wire the dashboard's headline values to the 1 Hz live SSE stream. Idempotent
|
|
// — repeated calls swap the previous subscription for a fresh one so a SPA
|
|
// re-mount of the dashboard doesn't double up. We listen via LiveSystem (a
|
|
// singleton EventSource manager), so adding this subscription is essentially
|
|
// free even with the Admin → System page open in another tab — same backend
|
|
// ticker feeds both. Cleanup hangs off a route-change check: if the dashboard
|
|
// DOM goes away we drop the sub on the next sample.
|
|
let _dashboardLiveUnsub = null;
|
|
function attachDashboardLive() {
|
|
if (!window.LiveSystem) return;
|
|
if (_dashboardLiveUnsub) { try { _dashboardLiveUnsub(); } catch (_) {} _dashboardLiveUnsub = null; }
|
|
_dashboardLiveUnsub = window.LiveSystem.subscribe((s) => {
|
|
const memoryEl = document.getElementById('memory-info');
|
|
const diskCard = document.getElementById('disk-donut');
|
|
if (!memoryEl && !diskCard) {
|
|
// Dashboard isn't on screen anymore — release the sub.
|
|
if (_dashboardLiveUnsub) { try { _dashboardLiveUnsub(); } catch (_) {} _dashboardLiveUnsub = null; }
|
|
return;
|
|
}
|
|
if (memoryEl && s && s.memory && Number.isFinite(s.memory.total) && s.memory.total > 0) {
|
|
const usedGb = (s.memory.used / 1073741824).toFixed(2);
|
|
const totalGb = (s.memory.total / 1073741824).toFixed(2);
|
|
const pct = (s.memory.percent ?? 0).toFixed(1);
|
|
const next = `${usedGb} GB / ${totalGb} GB - ${pct}%`;
|
|
if (memoryEl.textContent !== next) memoryEl.textContent = next;
|
|
}
|
|
if (diskCard && Array.isArray(s?.disks) && s.disks.length) {
|
|
const root = s.disks.find((d) => d.mount === '/') || s.disks[0];
|
|
if (root && Number.isFinite(root.total) && root.total > 0) {
|
|
updateDiskChart({ used: root.used, total: root.total });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Wait for dashboard elements to be available
|
|
function waitForDashboardElements() {
|
|
return new Promise((resolve) => {
|
|
const checkElements = () => {
|
|
const donutEl = document.getElementById('disk-donut');
|
|
const percentText = document.getElementById('disk-percent');
|
|
const systemInfoEl = document.getElementById('system-info');
|
|
const uptimeEl = document.getElementById('uptime-info');
|
|
const memoryEl = document.getElementById('memory-info');
|
|
const installedCountEl = document.getElementById('installed-count');
|
|
|
|
if (donutEl && percentText && systemInfoEl && uptimeEl && memoryEl && installedCountEl) {
|
|
resolve();
|
|
} else {
|
|
// Check again after 100ms
|
|
setTimeout(checkElements, 100);
|
|
}
|
|
};
|
|
|
|
checkElements();
|
|
});
|
|
}
|
|
|
|
// Per-app + Docker storage totals (bytes) for the disk donut breakdown. Fetched
|
|
// separately from the live disk used/total because they come from different
|
|
// sources (the du-based generator + docker df) and change slowly.
|
|
let _diskBreakdown = { apps: 0, docker: 0 };
|
|
let _lastDisk = null; // { used, total } in bytes, last value we drew
|
|
|
|
function _fmtBytes(n) {
|
|
n = Number(n) || 0;
|
|
const u = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
let i = 0;
|
|
while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
|
|
return `${n.toFixed(i ? 1 : 0)} ${u[i]}`;
|
|
}
|
|
|
|
// Hand-rolled SVG donut. Segments: [{ color, value }]; the ring fills
|
|
// proportionally and any remainder shows as the track.
|
|
function _diskDonutSvg(segments) {
|
|
const total = segments.reduce((t, s) => t + (s.value || 0), 0) || 1;
|
|
const r = 42, circ = 2 * Math.PI * r, sw = 13;
|
|
let acc = 0;
|
|
const arcs = segments.map((s) => {
|
|
const frac = (s.value || 0) / total;
|
|
const len = circ * frac;
|
|
const off = circ * (1 - acc);
|
|
acc += frac;
|
|
return len > 0
|
|
? `<circle cx="60" cy="60" r="${r}" fill="none" stroke="${s.color}" stroke-width="${sw}" stroke-dasharray="${len.toFixed(2)} ${(circ - len).toFixed(2)}" stroke-dashoffset="${off.toFixed(2)}" style="transition:stroke-dasharray .4s ease"/>`
|
|
: '';
|
|
}).join('');
|
|
return `<svg viewBox="0 0 120 120" class="disk-donut-svg" aria-hidden="true">
|
|
<g transform="rotate(-90 60 60)">
|
|
<circle cx="60" cy="60" r="${r}" fill="none" stroke="rgba(var(--text-rgb), 0.08)" stroke-width="${sw}"/>
|
|
${arcs}
|
|
</g>
|
|
</svg>`;
|
|
}
|
|
|
|
// Fetch the storage breakdown once and redraw the donut with it.
|
|
async function loadStorageBreakdown() {
|
|
try {
|
|
const [app, dock] = await Promise.all([
|
|
fetch(`/data/system/app_storage.json?t=${Date.now()}`).then((r) => (r.ok ? r.json() : null)).catch(() => null),
|
|
fetch('/api/system/storage').then((r) => (r.ok ? r.json() : null)).catch(() => null),
|
|
]);
|
|
_diskBreakdown = {
|
|
apps: (app && Number(app.total_local)) || 0, // on-disk app data (root device)
|
|
docker: (dock && Number(dock.total)) || 0, // images + build cache
|
|
};
|
|
if (_lastDisk) updateDiskChart(_lastDisk);
|
|
} catch (_) { /* leave the donut as a plain used/free split */ }
|
|
}
|
|
|
|
// Draw the disk donut: a slice for Apps, Docker, Other (the rest of used) and
|
|
// Free, with disk % used in the centre. used/total are bytes.
|
|
function updateDiskChart(data) {
|
|
const donutEl = document.getElementById('disk-donut');
|
|
const percentText = document.getElementById('disk-percent');
|
|
if (!donutEl || !percentText) return; // dashboard not on screen yet
|
|
|
|
let used, total;
|
|
if (data && data.root) { used = data.root.used; total = data.root.total; }
|
|
else if (data) { used = data.used; total = data.total; }
|
|
used = Number(used) || 0;
|
|
total = Number(total) || 0;
|
|
if (total <= 0) return;
|
|
_lastDisk = { used, total };
|
|
|
|
const percentage = Math.round((used / total) * 100);
|
|
percentText.textContent = `${percentage}%`;
|
|
percentText.style.color = percentage > 90 ? 'var(--status-danger)'
|
|
: percentage > 75 ? 'var(--status-warning)' : '';
|
|
|
|
// Apps and Docker are subsets of "used"; clamp so rounding/measurement skew
|
|
// can never make the slices exceed what's actually used.
|
|
const apps = Math.max(0, Math.min(_diskBreakdown.apps, used));
|
|
const docker = Math.max(0, Math.min(_diskBreakdown.docker, used - apps));
|
|
const other = Math.max(0, used - apps - docker);
|
|
const free = Math.max(0, total - used);
|
|
|
|
donutEl.innerHTML = _diskDonutSvg([
|
|
{ color: 'var(--accent)', value: apps },
|
|
{ color: 'var(--status-info)', value: docker },
|
|
{ color: 'rgba(var(--text-rgb), 0.35)', value: other },
|
|
{ color: 'rgba(var(--text-rgb), 0.12)', value: free },
|
|
]);
|
|
|
|
const legendEl = document.getElementById('disk-legend');
|
|
if (legendEl) {
|
|
const row = (cls, label, val) =>
|
|
`<div class="disk-leg-row"><span class="disk-leg-dot ${cls}"></span><span class="disk-leg-k">${label}</span><span class="disk-leg-v">${_fmtBytes(val)}</span></div>`;
|
|
legendEl.innerHTML = row('apps', 'Apps', apps) + row('docker', 'Docker', docker)
|
|
+ row('other', 'Other', other) + row('free', 'Free', free);
|
|
}
|
|
}
|
|
|
|
// Minimal data loading (fallback)
|
|
async function loadMinimalData() {
|
|
//console.log('Loading minimal data...');
|
|
|
|
apps = [];
|
|
categories = [];
|
|
systemConfigs = [];
|
|
}
|
|
|
|
// Preload essential data for smooth navigation
|
|
async function preloadOtherPagesData(currentPage) {
|
|
//console.log('Preloading essential data for navigation...');
|
|
|
|
try {
|
|
// No preloading needed - data loads fresh each page
|
|
//console.log('Preloading complete (no caching)');
|
|
|
|
} catch (error) {
|
|
console.error('Error preloading navigation data:', error);
|
|
}
|
|
}
|
|
|
|
// Data initialization is now handled by SystemLoader
|
|
// initializeData() will be called centrally
|