@@ -531,6 +534,8 @@
+
+
@@ -538,6 +543,9 @@
+
+
+
diff --git a/src/public/js/tabs.js b/src/public/js/tabs.js
index 0beb18fd1..3ab7b8cee 100644
--- a/src/public/js/tabs.js
+++ b/src/public/js/tabs.js
@@ -7,6 +7,7 @@ PulseApp.ui.tabs = (() => {
let nestedTabContentContainer = null;
let mainTabsContainer = null;
let logSessionArea = null;
+ let loadedTabs = new Set();
function init() {
tabs = Array.from(document.querySelectorAll('.tab'));
@@ -40,19 +41,40 @@ PulseApp.ui.tabs = (() => {
}
});
}
+
+ // Mark main tab as loaded since it's shown by default
+ loadedTabs.add('main');
}
function activateMainTab(clickedTab, tabId) {
if (clickedTab.classList.contains('pointer-events-none')) return;
- tabs.forEach(t => styleMainTab(t, false)); // Use the helper
- tabContents.forEach(content => content.classList.add('hidden'));
+ tabs.forEach(t => {
+ styleMainTab(t, false);
+ // Update ARIA attributes
+ t.setAttribute('aria-selected', 'false');
+ t.setAttribute('tabindex', '-1');
+ });
+ tabContents.forEach(content => {
+ content.classList.add('hidden');
+ content.setAttribute('aria-hidden', 'true');
+ });
- styleMainTab(clickedTab, true); // Use the helper
+ styleMainTab(clickedTab, true);
+ // Update ARIA attributes for active tab
+ clickedTab.setAttribute('aria-selected', 'true');
+ clickedTab.setAttribute('tabindex', '0');
const activeContent = document.getElementById(tabId);
if (activeContent) {
activeContent.classList.remove('hidden');
+ activeContent.setAttribute('aria-hidden', 'false');
+
+ // Lazy load tab content
+ if (!loadedTabs.has(tabId)) {
+ loadTabContent(tabId);
+ loadedTabs.add(tabId);
+ }
if (tabId === 'main') {
activateNestedTab('nested-tab-dashboard');
@@ -70,6 +92,18 @@ PulseApp.ui.tabs = (() => {
console.warn('[Tabs] PulseApp.ui.backups not available for updateBackupsTab')
}
}
+
+ if (tabId === 'storage') {
+ if (PulseApp.ui && PulseApp.ui.storage) {
+ PulseApp.ui.storage.updateStorageTab();
+ }
+ }
+
+ if (tabId === 'pbs') {
+ if (PulseApp.ui && PulseApp.ui.pbs) {
+ PulseApp.ui.pbs.updatePBSTab();
+ }
+ }
}
}
@@ -349,9 +383,38 @@ PulseApp.ui.tabs = (() => {
}
}
+ function loadTabContent(tabId) {
+ // Load tab-specific data only when the tab is first accessed
+ switch(tabId) {
+ case 'main':
+ // Main tab is loaded by default
+ break;
+ case 'storage':
+ if (PulseApp.ui && PulseApp.ui.storage) {
+ console.log(`[Tabs] Lazy loading ${tabId} content`);
+ // Storage data is already fetched, just update the UI
+ }
+ break;
+ case 'backups':
+ if (PulseApp.ui && PulseApp.ui.backups) {
+ console.log(`[Tabs] Lazy loading ${tabId} content`);
+ // Backups data is fetched on demand in updateBackupsTab
+ }
+ break;
+ case 'pbs':
+ if (PulseApp.ui && PulseApp.ui.pbs) {
+ console.log(`[Tabs] Lazy loading ${tabId} content`);
+ // PBS data is already fetched, just update the UI
+ }
+ break;
+ }
+ }
+
return {
init,
activateNestedTab,
- updateTabAvailability
+ updateTabAvailability,
+ addLogTab,
+ removeLogTabAndContent
};
})();
diff --git a/src/public/js/tooltips.js b/src/public/js/tooltips.js
index 11c6014ee..e8b6dbac4 100644
--- a/src/public/js/tooltips.js
+++ b/src/public/js/tooltips.js
@@ -27,9 +27,20 @@ PulseApp.tooltips = (() => {
}
function handleMouseOver(event) {
- const target = event.target.closest('.metric-tooltip-trigger, .storage-tooltip-trigger');
+ const target = event.target.closest('[data-tooltip], .metric-tooltip-trigger, .storage-tooltip-trigger, .truncate');
if (target) {
- const tooltipText = target.getAttribute('data-tooltip');
+ let tooltipText = target.getAttribute('data-tooltip');
+
+ // Auto-generate tooltip for truncated text
+ if (!tooltipText && target.classList.contains('truncate')) {
+ const fullText = target.textContent.trim();
+ const title = target.getAttribute('title');
+ // Only show tooltip if text is actually truncated
+ if ((title && title !== fullText) || target.scrollWidth > target.clientWidth) {
+ tooltipText = title || fullText;
+ }
+ }
+
if (tooltipText && tooltipElement) {
tooltipElement.textContent = tooltipText;
positionTooltip(event);
diff --git a/src/public/js/ui/backups.js b/src/public/js/ui/backups.js
index f2db8b4be..17879e967 100644
--- a/src/public/js/ui/backups.js
+++ b/src/public/js/ui/backups.js
@@ -293,6 +293,7 @@ PulseApp.ui.backups = (() => {
const loadingMsg = document.getElementById('backups-loading-message');
const noDataMsg = document.getElementById('backups-no-data-message');
const statusTextElement = document.getElementById('backups-status-text');
+ const pbsSummaryElement = document.getElementById('pbs-instances-summary');
if (!tableContainer || !tableBody || !loadingMsg || !noDataMsg || !statusTextElement) {
console.error("UI elements for Backups tab not found!");
@@ -321,6 +322,45 @@ PulseApp.ui.backups = (() => {
const backupStatusByGuest = allGuests.map(guest => _determineGuestBackupStatus(guest, snapshotsByGuest.get(`${guest.vmid}-${guest.type === 'qemu' ? 'vm' : 'ct'}`) || [], tasksByGuest.get(`${guest.vmid}-${guest.type === 'qemu' ? 'vm' : 'ct'}`) || [], dayBoundaries, threeDaysAgo, sevenDaysAgo));
const filteredBackupStatus = _filterBackupData(backupStatusByGuest, backupsSearchInput);
+ // Calculate PBS instances summary - only show if multiple PBS instances
+ const pbsDataArray = PulseApp.state.get('pbsDataArray') || [];
+ const pbsSummaryDismissed = PulseApp.state.get('pbsSummaryDismissed') || false;
+
+ if (pbsSummaryElement) {
+ if (pbsDataArray.length > 1 && !pbsSummaryDismissed) {
+ const pbsSummary = pbsDataArray.map(pbs => {
+ const backupCount = (pbs.datastores || []).reduce((total, ds) =>
+ total + (ds.snapshots ? ds.snapshots.length : 0), 0);
+ return `${pbs.pbsInstanceName}: ${backupCount} backups`;
+ }).join(' | ');
+
+ pbsSummaryElement.innerHTML = `
+
+
+ PBS Instances (${pbsDataArray.length}): ${pbsSummary}
+ • Showing aggregated backup data from all instances
+
+
+
| ${message} |
`;
}
- let message = "No guests match the current filters";
- if (filterDescription.length > 0) message += ` (${filterDescription.join('; ')})`;
- message += ".";
- tableBodyEl.innerHTML = `| ${message} |
`;
}
_updateDashboardStatusMessage(statusElementEl, visibleCount, visibleNodes, groupByNode, filterGuestType, filterStatus, searchInput, thresholdState);
@@ -831,15 +902,15 @@ PulseApp.ui.dashboard = (() => {
row.innerHTML = `
${guest.name} |
${typeIcon} |
- ${guest.id} |
- ${uptimeDisplay} |
+ ${guest.id} |
+ ${uptimeDisplay} |
${cpuBarHTML} |
${memoryBarHTML} |
${diskBarHTML} |
- ${diskReadCell} |
- ${diskWriteCell} |
- ${netInCell} |
- ${netOutCell} |
+ ${diskReadCell} |
+ ${diskWriteCell} |
+ ${netInCell} |
+ ${netOutCell} |
`;
return row;
}
diff --git a/src/public/js/ui/nodes.js b/src/public/js/ui/nodes.js
index 567624911..8b00eb6fd 100644
--- a/src/public/js/ui/nodes.js
+++ b/src/public/js/ui/nodes.js
@@ -130,12 +130,18 @@ PulseApp.ui.nodes = (() => {
console.error('Critical element #node-summary-cards-container not found for node summary cards update!');
return;
}
- container.innerHTML = ''; // Clear previous content
-
+
+ // Show loading skeletons if no data yet
if (!nodes || nodes.length === 0) {
+ if (PulseApp.ui.loadingSkeletons) {
+ PulseApp.ui.loadingSkeletons.showNodeCardsSkeleton(container, 3);
+ return;
+ }
container.innerHTML = 'No node data available for summary.
';
return;
}
+
+ container.innerHTML = ''; // Clear previous content
const numNodes = nodes.length;
diff --git a/src/public/js/ui/storage.js b/src/public/js/ui/storage.js
index 97788f7fb..313cbcf73 100644
--- a/src/public/js/ui/storage.js
+++ b/src/public/js/ui/storage.js
@@ -121,7 +121,11 @@ PulseApp.ui.storage = (() => {
const nodes = PulseApp.state.get('nodesData') || [];
if (!Array.isArray(nodes) || nodes.length === 0) {
- contentDiv.innerHTML = 'No node or storage data available.
';
+ if (PulseApp.ui.emptyStates) {
+ contentDiv.innerHTML = PulseApp.ui.emptyStates.createEmptyState('no-storage');
+ } else {
+ contentDiv.innerHTML = 'No node or storage data available.
';
+ }
return;
}
@@ -137,7 +141,11 @@ PulseApp.ui.storage = (() => {
const nodeKeys = Object.keys(storageByNode);
if (nodeKeys.length === 0) {
- contentDiv.innerHTML = 'No storage data found associated with nodes.
';
+ if (PulseApp.ui.emptyStates) {
+ contentDiv.innerHTML = PulseApp.ui.emptyStates.createEmptyState('no-storage');
+ } else {
+ contentDiv.innerHTML = 'No storage data found associated with nodes.
';
+ }
return;
}
@@ -173,7 +181,11 @@ PulseApp.ui.storage = (() => {
if (nodeStorageData.length === 0) {
const noDataRow = document.createElement('tr');
- noDataRow.innerHTML = `No storage configured or found for this node. | `;
+ if (PulseApp.ui.emptyStates) {
+ noDataRow.innerHTML = `${PulseApp.ui.emptyStates.createEmptyState('no-storage')} | `;
+ } else {
+ noDataRow.innerHTML = `No storage configured or found for this node. | `;
+ }
tbody.appendChild(noDataRow);
return;
}