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

Add detailed tooltips for overcommit metrics

Browse Source 
- Add tooltips showing capacity, requests, and calculation details
- Include CPU and Memory capacity/requests in API response
- Add CSS styling for tooltip hover effects
- Show detailed breakdown: Capacity Total, Requests Total, and calculation formula
- Improve user experience with transparent overcommit information
This commit is contained in:
Anderson
2025-10-01 15:33:39 -03:00
parent b7bfd33a28
commit 8984701bf3
2 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/api/routes.py
View File

@@ -196,7 +196,11 @@ async def get_cluster_status(
"cpu_overcommit_percent": cpu_overcommit_percent,
"memory_overcommit_percent": memory_overcommit_percent,
"namespaces_in_overcommit": namespaces_in_overcommit,
"resource_quota_coverage": resource_quota_coverage
"resource_quota_coverage": resource_quota_coverage,
"cpu_capacity": cpu_capacity if 'cpu_capacity' in locals() else 0,
"cpu_requests": cpu_requests if 'cpu_requests' in locals() else 0,
"memory_capacity": memory_capacity if 'memory_capacity' in locals() else 0,
"memory_requests": memory_requests if 'memory_requests' in locals() else 0
}
}

35
app/static/index.html
View File

@@ -199,6 +199,17 @@
border-left-color: #27ae60;
}
.metric-value {
cursor: help;
position: relative;
}
.metric-value:hover {
background-color: #e3f2fd;
border-radius: 4px;
padding: 2px 4px;
}
/* Status Overview */
.status-overview {
display: flex;
@@ -827,11 +838,11 @@
<h3>📊 Cluster Overcommit Summary</h3>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-value" id="cpuOvercommit">-</div>
<div class="metric-value" id="cpuOvercommit" title="CPU Overcommit Details">-</div>
<div class="metric-label">CPU Overcommit</div>
</div>
<div class="metric-card">
<div class="metric-value" id="memoryOvercommit">-</div>
<div class="metric-value" id="memoryOvercommit" title="Memory Overcommit Details">-</div>
<div class="metric-label">Memory Overcommit</div>
</div>
<div class="metric-card">
@@ -1053,8 +1064,24 @@
// Update overcommit metrics
if (data.overcommit) {
document.getElementById('cpuOvercommit').textContent = `${data.overcommit.cpu_overcommit_percent}%`;
document.getElementById('memoryOvercommit').textContent = `${data.overcommit.memory_overcommit_percent}%`;
// CPU Overcommit with detailed tooltip
const cpuElement = document.getElementById('cpuOvercommit');
cpuElement.textContent = `${data.overcommit.cpu_overcommit_percent}%`;
if (data.overcommit.cpu_capacity && data.overcommit.cpu_requests) {
const cpuCapacity = data.overcommit.cpu_capacity;
const cpuRequests = data.overcommit.cpu_requests;
cpuElement.title = `CPU Overcommit Details:\n• Capacity Total: ${cpuCapacity} cores\n• Requests Total: ${cpuRequests} cores\n• Overcommit: ${data.overcommit.cpu_overcommit_percent}% (${cpuRequests} ÷ ${cpuCapacity} × 100)`;
}
// Memory Overcommit with detailed tooltip
const memoryElement = document.getElementById('memoryOvercommit');
memoryElement.textContent = `${data.overcommit.memory_overcommit_percent}%`;
if (data.overcommit.memory_capacity && data.overcommit.memory_requests) {
const memoryCapacityGB = (data.overcommit.memory_capacity / (1024**3)).toFixed(1);
const memoryRequestsGB = (data.overcommit.memory_requests / (1024**3)).toFixed(1);
memoryElement.title = `Memory Overcommit Details:\n• Capacity Total: ${data.overcommit.memory_capacity.toLocaleString()} bytes (≈ ${memoryCapacityGB} GB)\n• Requests Total: ${data.overcommit.memory_requests.toLocaleString()} bytes (≈ ${memoryRequestsGB} GB)\n• Overcommit: ${data.overcommit.memory_overcommit_percent}% (${memoryRequestsGB} ÷ ${memoryCapacityGB} × 100)`;
}
document.getElementById('namespacesInOvercommit').textContent = data.overcommit.namespaces_in_overcommit || 0;
document.getElementById('resourceQuotaCoverage').textContent = `${data.overcommit.resource_quota_coverage}%`;
} else {