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

feat: remove sidebar toggle button and ensure data loading

Browse Source 
- Remove hamburger menu button from header
- Remove sidebar toggle JavaScript functionality
- Keep data loading functionality intact
- Maintain OpenShift Console visual identity
This commit is contained in:
Anderson
2025-10-02 11:46:10 -03:00
parent b2b47c4f1c
commit 53ea070957
1 changed files with 46 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/static/index.html
View File

@@ -482,12 +482,12 @@
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin-right: 12px; margin-right: 12px;
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
/* Responsive */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.openshift-sidebar { .openshift-sidebar {
@@ -498,11 +498,11 @@
.openshift-sidebar.open { .openshift-sidebar.open {
transform: translateX(0); transform: translateX(0);
} }
.main-content { .main-content {
margin-left: 0; margin-left: 0;
} }
.dashboard-grid { .dashboard-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -522,9 +522,6 @@
<!-- OpenShift-like Header --> <!-- OpenShift-like Header -->
<header class="openshift-header"> <header class="openshift-header">
<div class="openshift-header-left"> <div class="openshift-header-left">
<button class="hamburger-menu" id="sidebar-toggle">
<i class="fas fa-bars"></i>
</button>
<a href="#" class="openshift-logo">UWRU Scanner</a> <a href="#" class="openshift-logo">UWRU Scanner</a>
</div> </div>
<div class="openshift-header-right"> <div class="openshift-header-right">
@@ -605,8 +602,8 @@
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="sidebar-section"> <div class="sidebar-section">
<h3 class="sidebar-section-title">Observe</h3> <h3 class="sidebar-section-title">Observe</h3>
<ul class="sidebar-nav"> <ul class="sidebar-nav">
@@ -635,40 +632,40 @@
<div class="page-header"> <div class="page-header">
<h1 class="page-title">UWRU Scanner</h1> <h1 class="page-title">UWRU Scanner</h1>
<p class="page-description">User Workloads and Resource Usage Scanner - Identify and analyze workloads with resource configuration issues</p> <p class="page-description">User Workloads and Resource Usage Scanner - Identify and analyze workloads with resource configuration issues</p>
</div> </div>
<!-- Metrics Cards --> <!-- Metrics Cards -->
<div class="metrics-grid" id="metrics-grid"> <div class="metrics-grid" id="metrics-grid">
<div class="metric-card"> <div class="metric-card">
<div class="metric-icon success"> <div class="metric-icon success">
<i class="fas fa-cube"></i> <i class="fas fa-cube"></i>
</div> </div>
<div class="metric-value" id="total-workloads">-</div> <div class="metric-value" id="total-workloads">-</div>
<div class="metric-label">Total Workloads</div> <div class="metric-label">Total Workloads</div>
</div> </div>
<div class="metric-card"> <div class="metric-card">
<div class="metric-icon info"> <div class="metric-icon info">
<i class="fas fa-layer-group"></i> <i class="fas fa-layer-group"></i>
</div> </div>
<div class="metric-value" id="total-namespaces">-</div> <div class="metric-value" id="total-namespaces">-</div>
<div class="metric-label">Namespaces</div> <div class="metric-label">Namespaces</div>
</div> </div>
<div class="metric-card"> <div class="metric-card">
<div class="metric-icon danger"> <div class="metric-icon danger">
<i class="fas fa-exclamation-triangle"></i> <i class="fas fa-exclamation-triangle"></i>
</div> </div>
<div class="metric-value" id="critical-issues">-</div> <div class="metric-value" id="critical-issues">-</div>
<div class="metric-label">Critical Issues</div> <div class="metric-label">Critical Issues</div>
</div> </div>
<div class="metric-card"> <div class="metric-card">
<div class="metric-icon warning"> <div class="metric-icon warning">
<i class="fas fa-exclamation-circle"></i> <i class="fas fa-exclamation-circle"></i>
</div> </div>
<div class="metric-value" id="total-warnings">-</div> <div class="metric-value" id="total-warnings">-</div>
<div class="metric-label">Warnings</div> <div class="metric-label">Warnings</div>
</div>
</div> </div>
</div>
<!-- Workloads Table Card --> <!-- Workloads Table Card -->
<div class="openshift-card"> <div class="openshift-card">
<div class="card-header"> <div class="card-header">
@@ -677,14 +674,14 @@
<i class="fas fa-sync-alt"></i> <i class="fas fa-sync-alt"></i>
Refresh Refresh
</button> </button>
</div> </div>
<div class="table-content" id="workloads-table-container"> <div class="table-content" id="workloads-table-container">
<div class="loading-spinner"> <div class="loading-spinner">
<div class="spinner"></div> <div class="spinner"></div>
Loading workloads... Loading workloads...
</div>
</div>
</div> </div>
</div>
</div>
</section> </section>
<!-- Historical Analysis Section --> <!-- Historical Analysis Section -->
@@ -692,8 +689,8 @@
<div class="page-header"> <div class="page-header">
<h1 class="page-title">Historical Analysis</h1> <h1 class="page-title">Historical Analysis</h1>
<p class="page-description">Resource consumption analysis and historical data</p> <p class="page-description">Resource consumption analysis and historical data</p>
</div> </div>
<!-- Workloads List Card --> <!-- Workloads List Card -->
<div class="openshift-card"> <div class="openshift-card">
<div class="card-header"> <div class="card-header">
@@ -701,8 +698,8 @@
<button class="openshift-button" id="refresh-historical"> <button class="openshift-button" id="refresh-historical">
<i class="fas fa-sync-alt"></i> <i class="fas fa-sync-alt"></i>
Refresh Refresh
</button> </button>
</div> </div>
<div class="table-content" id="historical-workloads-container"> <div class="table-content" id="historical-workloads-container">
<div class="loading-spinner"> <div class="loading-spinner">
<div class="spinner"></div> <div class="spinner"></div>
@@ -710,7 +707,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Workload Details Card (hidden initially) --> <!-- Workload Details Card (hidden initially) -->
<div class="openshift-card section-hidden" id="workload-details-container"> <div class="openshift-card section-hidden" id="workload-details-container">
<div class="card-header"> <div class="card-header">
@@ -719,7 +716,7 @@
<i class="fas fa-times"></i> <i class="fas fa-times"></i>
Close Close
</button> </button>
</div> </div>
<div class="table-content" id="workload-details-content"> <div class="table-content" id="workload-details-content">
<!-- Workload details will be populated here --> <!-- Workload details will be populated here -->
</div> </div>
@@ -732,7 +729,7 @@
// Global variables // Global variables
let currentData = null; let currentData = null;
let currentSection = 'workload-scanner'; let currentSection = 'workload-scanner';
// Initialize the application // Initialize the application
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
initializeApp(); initializeApp();
@@ -756,12 +753,7 @@
showSection(section); showSection(section);
}); });
}); });
// Sidebar toggle
document.getElementById('sidebar-toggle').addEventListener('click', function() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('open');
});
// Close workload details // Close workload details
document.getElementById('close-workload-details').addEventListener('click', function() { document.getElementById('close-workload-details').addEventListener('click', function() {
@@ -789,12 +781,12 @@
document.querySelector(`.sidebar-nav-link[data-section="${section}"]`).classList.add('active'); document.querySelector(`.sidebar-nav-link[data-section="${section}"]`).classList.add('active');
currentSection = section; currentSection = section;
// Load section data // Load section data
if (section === 'workload-scanner') { if (section === 'workload-scanner') {
loadWorkloadScanner(); loadWorkloadScanner();
} else if (section === 'historical-analysis') { } else if (section === 'historical-analysis') {
loadHistoricalAnalysis(); loadHistoricalAnalysis();
} }
} }
@@ -860,7 +852,7 @@
`; `;
return; return;
} }
const tableHTML = ` const tableHTML = `
<table class="table"> <table class="table">
<thead> <thead>
@@ -878,8 +870,8 @@
<td> <td>
<strong style="color: var(--pf-global--Color--100);">${namespace.namespace}</strong> <strong style="color: var(--pf-global--Color--100);">${namespace.namespace}</strong>
</td> </td>
<td>${Object.keys(namespace.pods || {}).length}</td> <td>${Object.keys(namespace.pods || {}).length}</td>
<td>${namespace.total_validations || 0}</td> <td>${namespace.total_validations || 0}</td>
<td> <td>
<span class="status-indicator ${getSeverityClass(namespace)}"> <span class="status-indicator ${getSeverityClass(namespace)}">
${getSeverityText(namespace)} ${getSeverityText(namespace)}
@@ -890,8 +882,8 @@
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
Analyze Analyze
</button> </button>
</td> </td>
</tr> </tr>
`).join('')} `).join('')}
</tbody> </tbody>
</table> </table>
@@ -990,19 +982,19 @@
<div style="padding: 20px; text-align: center; color: var(--pf-global--Color--300);"> <div style="padding: 20px; text-align: center; color: var(--pf-global--Color--300);">
<i class="fas fa-microchip" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--info-color--100);"></i> <i class="fas fa-microchip" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--info-color--100);"></i>
<p>CPU usage data will be displayed here</p> <p>CPU usage data will be displayed here</p>
</div> </div>
</div> </div>
<div class="openshift-card"> <div class="openshift-card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Memory Usage</h3> <h3 class="card-title">Memory Usage</h3>
</div> </div>
<div style="padding: 20px; text-align: center; color: var(--pf-global--Color--300);"> <div style="padding: 20px; text-align: center; color: var(--pf-global--Color--300);">
<i class="fas fa-memory" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--warning-color--100);"></i> <i class="fas fa-memory" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--warning-color--100);"></i>
<p>Memory usage data will be displayed here</p> <p>Memory usage data will be displayed here</p>
</div>
</div> </div>
</div> </div>
</div> `;
`;
} }
function analyzeWorkload(namespace) { function analyzeWorkload(namespace) {
@@ -1043,8 +1035,8 @@
<i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 16px;"></i> <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 16px;"></i>
<h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">Error</h3> <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">Error</h3>
<p style="margin: 0;">${message}</p> <p style="margin: 0;">${message}</p>
</div> </div>
`; `;
} }
</script> </script>
</body> </body>