anobre/openshift-resource-governance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement fullscreen loading modal with blur background

Browse Source
This commit is contained in:
Anderson
2025-10-06 09:53:18 -03:00
parent 19926a37d8
commit 56a13424ba
1 changed files with 92 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/static/index.html
View File

@@ -1745,22 +1745,78 @@
}
// Loading Functions
function showLoadingOverlay(containerId, message = 'Loading...') {
const container = document.getElementById(containerId);
if (!container) return;
function showFullscreenLoading(message = 'Analyzing Cluster Resources', submessage = 'Please wait while we analyze your cluster resources...') {
// Create fullscreen loading modal
const loadingModal = document.createElement('div');
loadingModal.id = 'fullscreen-loading';
loadingModal.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(21, 21, 21, 0.95);
backdrop-filter: blur(10px);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--pf-global--Color--100);
font-family: var(--pf-global--FontFamily--sans-serif);
`;
const loadingHTML = `
<div class="pf-c-empty-state" style="padding: 2rem;">
<div class="pf-c-empty-state__icon">
<i class="fas fa-spinner fa-spin" style="font-size: 3rem; color: var(--pf-global--primary-color--100);"></i>
loadingModal.innerHTML = `
<div style="text-align: center; max-width: 600px; padding: 2rem;">
<div style="margin-bottom: 2rem;">
<i class="fas fa-spinner fa-spin" style="font-size: 4rem; color: var(--pf-global--primary-color--100);"></i>
</div>
<h1 style="font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--pf-global--Color--100); font-weight: 600;">
${message}
</h1>
<p style="font-size: 1.2rem; margin: 0 0 2rem 0; color: var(--pf-global--Color--300);">
${submessage}
</p>
<div style="background: var(--pf-global--BackgroundColor--300); border-radius: 8px; padding: 1rem; margin: 1rem 0;">
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
<i class="fas fa-server" style="margin-right: 0.5rem; color: var(--pf-global--primary-color--100);"></i>
<span>Connecting to OpenShift API...</span>
</div>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
<i class="fas fa-chart-line" style="margin-right: 0.5rem; color: var(--pf-global--primary-color--100);"></i>
<span>Querying Prometheus metrics...</span>
</div>
<div style="display: flex; align-items: center; justify-content: center;">
<i class="fas fa-cogs" style="margin-right: 0.5rem; color: var(--pf-global--primary-color--100);"></i>
<span>Analyzing resource usage patterns...</span>
</div>
</div>
<div style="margin-top: 2rem;">
<div style="width: 300px; height: 4px; background: var(--pf-global--BackgroundColor--300); border-radius: 2px; overflow: hidden;">
<div id="loading-progress" style="width: 0%; height: 100%; background: linear-gradient(90deg, var(--pf-global--primary-color--100), var(--pf-global--info-color--100)); transition: width 0.3s ease;"></div>
</div>
<h1 class="pf-c-title pf-m-lg">${message}</h1>
<div class="pf-c-empty-state__body">
<p>Please wait while we analyze your cluster resources...</p>
</div>
</div>
`;
container.innerHTML = loadingHTML;
document.body.appendChild(loadingModal);
// Animate progress bar
let progress = 0;
const progressInterval = setInterval(() => {
progress += Math.random() * 15;
if (progress > 90) progress = 90;
document.getElementById('loading-progress').style.width = progress + '%';
}, 200);
return { modal: loadingModal, progressInterval };
}
function hideFullscreenLoading() {
const loadingModal = document.getElementById('fullscreen-loading');
if (loadingModal) {
loadingModal.remove();
}
}
function showChartLoading(containerId, message = 'Loading chart...') {
@@ -1787,6 +1843,10 @@
function updateLoadingProgress(loaded, total) {
const progress = Math.round((loaded / total) * 100);
const progressBar = document.getElementById('loading-progress');
if (progressBar) {
progressBar.style.width = progress + '%';
}
console.log(`Loading progress: ${progress}% (${loaded}/${total})`);
}
@@ -1857,24 +1917,43 @@
}
async function loadWorkloadScanner() {
let loadingModal = null;
try {
// Show loading overlay for metrics
showLoadingOverlay('metrics-grid', 'Analyzing Cluster Resources');
// Show fullscreen loading modal
loadingModal = showFullscreenLoading(
'Analyzing Cluster Resources',
'Please wait while we analyze your cluster resources and generate insights...'
);
// Load cluster status
const clusterResponse = await fetch('/api/v1/cluster/status');
const clusterData = await clusterResponse.json();
// Update progress
updateLoadingProgress(1, 3);
// Update metrics cards
updateMetricsCards(clusterData);
// Update progress
updateLoadingProgress(2, 3);
// Load dashboard charts with loading states
await loadDashboardCharts();
// Update progress
updateLoadingProgress(3, 3);
currentData = { cluster: clusterData };
// Hide loading modal after a short delay
setTimeout(() => {
hideFullscreenLoading();
}, 500);
} catch (error) {
console.error('Error loading workload scanner data:', error);
hideFullscreenLoading();
showError('metrics-grid', 'Failed to load cluster data');
}
}
@@ -2020,13 +2099,6 @@
// Dashboard Charts Functions
async function loadDashboardCharts() {
try {
// Show loading for all charts
showChartLoading('resource-utilization-chart', 'Loading Resource Trends...');
showChartLoading('namespace-distribution-chart', 'Analyzing Namespace Distribution...');
showChartLoading('issues-timeline-chart', 'Loading Issues Timeline...');
showChartLoading('top-workloads-chart', 'Identifying Top Workloads...');
showChartLoading('overcommit-chart', 'Calculating Overcommit Status...');
// Load all charts in parallel
await Promise.all([
loadResourceUtilizationTrend(),