ui: reorganize dashboard and sidebar navigation
- Remove 'Workloads with Issues' table from main dashboard - Create new 'Requests & Limits' section in sidebar under 'Analysis' - Replace empty 'Workloads' section (Pods, Deployments, Services) with 'Requests & Limits' - Move workloads table functionality to dedicated 'Requests & Limits' page - Update navigation logic to handle new section - Improve dashboard focus on metrics and cluster overview - Clean up sidebar by removing non-functional menu items
This commit is contained in:
@@ -1064,31 +1064,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sidebar-section">
|
<div class="sidebar-section">
|
||||||
<h3 class="sidebar-section-title">Workloads</h3>
|
<h3 class="sidebar-section-title">Analysis</h3>
|
||||||
<ul class="sidebar-nav">
|
<ul class="sidebar-nav">
|
||||||
<li class="sidebar-nav-item">
|
<li class="sidebar-nav-item">
|
||||||
<a href="#" class="sidebar-nav-link">
|
<a href="#" class="sidebar-nav-link" data-section="requests-limits">
|
||||||
<i class="fas fa-cube sidebar-nav-icon"></i>
|
<i class="fas fa-exclamation-triangle sidebar-nav-icon"></i>
|
||||||
<span>Pods</span>
|
<span>Requests & Limits</span>
|
||||||
<i class="fas fa-chevron-right sidebar-nav-arrow"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="sidebar-nav-item">
|
|
||||||
<a href="#" class="sidebar-nav-link">
|
|
||||||
<i class="fas fa-layer-group sidebar-nav-icon"></i>
|
|
||||||
<span>Deployments</span>
|
|
||||||
<i class="fas fa-chevron-right sidebar-nav-arrow"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="sidebar-nav-item">
|
|
||||||
<a href="#" class="sidebar-nav-link">
|
|
||||||
<i class="fas fa-server sidebar-nav-icon"></i>
|
|
||||||
<span>Services</span>
|
|
||||||
<i class="fas fa-chevron-right sidebar-nav-arrow"></i>
|
|
||||||
</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>
|
||||||
@@ -1193,6 +1178,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Requests & Limits Section -->
|
||||||
|
<section id="requests-limits-section" class="section-hidden">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1 class="page-title">Requests & Limits Analysis</h1>
|
||||||
|
<p class="page-description">Analyze workloads with resource configuration issues and missing requests/limits</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Workloads Table Card -->
|
<!-- Workloads Table Card -->
|
||||||
<div class="openshift-card">
|
<div class="openshift-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
@@ -1201,14 +1195,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>
|
||||||
|
|
||||||
<!-- Smart Recommendations Section -->
|
<!-- Smart Recommendations Section -->
|
||||||
@@ -1401,7 +1395,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Refresh buttons
|
// Refresh buttons
|
||||||
document.getElementById('refresh-workloads').addEventListener('click', loadWorkloadScanner);
|
document.getElementById('refresh-workloads').addEventListener('click', loadRequestsLimits);
|
||||||
document.getElementById('refresh-historical').addEventListener('click', loadHistoricalAnalysis);
|
document.getElementById('refresh-historical').addEventListener('click', loadHistoricalAnalysis);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1425,37 +1419,49 @@
|
|||||||
// Load section data
|
// Load section data
|
||||||
if (section === 'workload-scanner') {
|
if (section === 'workload-scanner') {
|
||||||
loadWorkloadScanner();
|
loadWorkloadScanner();
|
||||||
} else if (section === 'smart-recommendations') {
|
} else if (section === 'requests-limits') {
|
||||||
loadSmartRecommendations();
|
loadRequestsLimits();
|
||||||
|
} else if (section === 'smart-recommendations') {
|
||||||
|
loadSmartRecommendations();
|
||||||
} else if (section === 'vpa-management') {
|
} else if (section === 'vpa-management') {
|
||||||
loadVPAManagement();
|
loadVPAManagement();
|
||||||
} else if (section === 'historical-analysis') {
|
} else if (section === 'historical-analysis') {
|
||||||
loadHistoricalAnalysis();
|
loadHistoricalAnalysis();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadWorkloadScanner() {
|
async function loadWorkloadScanner() {
|
||||||
try {
|
try {
|
||||||
showLoading('workloads-table-container');
|
|
||||||
|
|
||||||
// Load cluster status
|
// Load cluster status
|
||||||
const clusterResponse = await fetch('/api/v1/cluster/status');
|
const clusterResponse = await fetch('/api/v1/cluster/status');
|
||||||
const clusterData = await clusterResponse.json();
|
const clusterData = await clusterResponse.json();
|
||||||
|
|
||||||
|
currentData = { cluster: clusterData };
|
||||||
|
|
||||||
|
// Update metrics cards
|
||||||
|
updateMetricsCards(clusterData);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading workload scanner data:', error);
|
||||||
|
showError('metrics-grid', 'Failed to load cluster data');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadRequestsLimits() {
|
||||||
|
try {
|
||||||
|
showLoading('workloads-table-container');
|
||||||
|
|
||||||
// Load validations
|
// Load validations
|
||||||
const validationsResponse = await fetch('/api/v1/validations');
|
const validationsResponse = await fetch('/api/v1/validations');
|
||||||
const validationsData = await validationsResponse.json();
|
const validationsData = await validationsResponse.json();
|
||||||
|
|
||||||
currentData = { cluster: clusterData, validations: validationsData };
|
currentData = { validations: validationsData };
|
||||||
|
|
||||||
// Update metrics cards
|
|
||||||
updateMetricsCards(clusterData);
|
|
||||||
|
|
||||||
// Update workloads table
|
// Update workloads table
|
||||||
updateWorkloadsTable(validationsData);
|
updateWorkloadsTable(validationsData);
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error loading workload scanner data:', error);
|
console.error('Error loading requests & limits data:', error);
|
||||||
showError('workloads-table-container', 'Failed to load workload data');
|
showError('workloads-table-container', 'Failed to load workload data');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user