Loading historical data...
-
-
+
+
@@ -909,6 +1198,10 @@
// Load section data
if (section === 'workload-scanner') {
loadWorkloadScanner();
+ } else if (section === 'smart-recommendations') {
+ loadSmartRecommendations();
+ } else if (section === 'vpa-management') {
+ loadVPAManagement();
} else if (section === 'historical-analysis') {
loadHistoricalAnalysis();
}
@@ -940,12 +1233,477 @@
}
}
+ // Load smart recommendations
+ async function loadSmartRecommendations() {
+ try {
+ showLoading('smart-recommendations-container');
+
+ const response = await fetch('/api/v1/smart-recommendations');
+ const data = await response.json();
+ updateSmartRecommendations(data);
+ } catch (error) {
+ console.error('Error loading smart recommendations:', error);
+ document.getElementById('smart-recommendations-container').innerHTML =
+ '
Failed to load recommendations
';
+ }
+ }
+
+ // Update smart recommendations
+ function updateSmartRecommendations(data) {
+ const container = document.getElementById('smart-recommendations-container');
+
+ // Store recommendations globally for button functions
+ window.currentRecommendations = data.recommendations || [];
+
+ if (!data || !data.recommendations || data.recommendations.length === 0) {
+ container.innerHTML = `
+
+
+
No Recommendations Available
+
No smart recommendations found for the current cluster state.
+
+ `;
+ return;
+ }
+
+ const recommendationsHtml = data.recommendations.map(rec => `
+
+
+
+
${rec.description}
+
+ ${rec.workload_list && rec.workload_list.length > 0 ? `
+
+
Affected Workloads:
+
+ ${rec.workload_list.map(workload => {
+ // Extract priority from workload string (e.g., "example (shishika01) - HIGH")
+ const priorityMatch = workload.match(/\s-\s(\w+)$/);
+ const priority = priorityMatch ? priorityMatch[1].toLowerCase() : 'low';
+ const priorityColor = getPriorityColor(priority);
+ return `- ${workload}
`;
+ }).join('')}
+
+
+ ` : ''}
+
+ ${rec.implementation_steps && rec.implementation_steps.length > 0 ? `
+
+
Implementation Steps:
+
+ ${rec.implementation_steps.map(step => `- ${step}
`).join('')}
+
+
+ ` : ''}
+
+
+ ${rec.vpa_yaml ? `
+
+ ` : ''}
+
+ ${rec.kubectl_commands && rec.kubectl_commands.length > 0 ? `
+
+ ` : ''}
+
+
+
+
+
+
+
+ `).join('');
+
+ container.innerHTML = recommendationsHtml;
+ }
+
+ // Load VPA management
+ async function loadVPAManagement() {
+ try {
+ showLoading('vpa-management-container');
+
+ const response = await fetch('/api/v1/vpa-status');
+ const data = await response.json();
+ updateVPAManagement(data);
+ } catch (error) {
+ console.error('Error loading VPA management:', error);
+ document.getElementById('vpa-management-container').innerHTML =
+ '
Failed to load VPA data
';
+ }
+ }
+
+ // Update VPA management
+ function updateVPAManagement(data) {
+ const container = document.getElementById('vpa-management-container');
+
+ container.innerHTML = `
+
+
+
VPA Management
+
VPA management features coming soon...
+
+ This section will show VPA status, configurations, and management options.
+
+
+ `;
+ }
+
+ // Helper functions for recommendations
+ function getRecommendationIcon(type) {
+ switch(type) {
+ case 'vpa_activation': return 'fa-rocket';
+ case 'resource_config': return 'fa-cog';
+ case 'ratio_adjustment': return 'fa-balance-scale';
+ default: return 'fa-lightbulb';
+ }
+ }
+
+ function getPriorityColor(priority) {
+ switch(priority) {
+ case 'critical': return 'var(--pf-global--danger-color--100)';
+ case 'high': return 'var(--pf-global--warning-color--100)';
+ case 'medium': return 'var(--pf-global--info-color--100)';
+ case 'low': return 'var(--pf-global--Color--300)';
+ default: return 'var(--pf-global--Color--300)';
+ }
+ }
+
+ // Show VPA YAML in Code Editor Modal
+ function downloadVPAYAML(workloadName, namespace) {
+ // Find the recommendation data
+ const recommendations = window.currentRecommendations || [];
+ const recommendation = recommendations.find(rec =>
+ rec.workload_name === workloadName && rec.namespace === namespace
+ );
+
+ if (!recommendation || !recommendation.vpa_yaml) {
+ alert('VPA YAML not available for this recommendation');
+ return;
+ }
+
+ // Create modal with PatternFly Code Editor
+ const modal = document.createElement('div');
+ modal.className = 'modal';
+ modal.style.display = 'block';
+ modal.innerHTML = `
+
+
+
+
+
+
+
+
${recommendation.vpa_yaml}
+
+
+
+
+
+ `;
+
+ document.body.appendChild(modal);
+
+ // Store YAML content globally for copy/download functions
+ window.currentVPAYAML = recommendation.vpa_yaml;
+ window.currentVPAFileName = `vpa-${workloadName}-${namespace}.yaml`;
+
+ // Close modal when clicking outside
+ modal.addEventListener('click', function(e) {
+ if (e.target === modal) {
+ modal.remove();
+ }
+ });
+ }
+
+ // Download VPA YAML file
+ function downloadVPAYAMLFile(workloadName, namespace) {
+ if (!window.currentVPAYAML) return;
+
+ const blob = new Blob([window.currentVPAYAML], { type: 'text/yaml' });
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = window.currentVPAFileName || `vpa-${workloadName}-${namespace}.yaml`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ window.URL.revokeObjectURL(url);
+ }
+
+ // Copy VPA YAML to clipboard
+ function copyVPAYAMLToClipboard() {
+ if (!window.currentVPAYAML) return;
+
+ navigator.clipboard.writeText(window.currentVPAYAML).then(() => {
+ // Show temporary success message
+ const buttons = document.querySelectorAll('button[onclick*="copyVPAYAMLToClipboard"]');
+ buttons.forEach(button => {
+ const originalText = button.innerHTML;
+ button.innerHTML = '
Copied!';
+ button.style.color = 'var(--pf-global--success-color--100)';
+
+ setTimeout(() => {
+ button.innerHTML = originalText;
+ button.style.color = '';
+ }, 2000);
+ });
+ }).catch(err => {
+ console.error('Failed to copy to clipboard:', err);
+ alert('Failed to copy to clipboard');
+ });
+ }
+
+ // Apply smart recommendation
+ async function applySmartRecommendation(workloadName, namespace, recommendationType, priority) {
+ try {
+ // Find the recommendation data
+ const recommendations = window.currentRecommendations || [];
+ const recommendation = recommendations.find(rec =>
+ rec.workload_name === workloadName &&
+ rec.namespace === namespace &&
+ rec.recommendation_type === recommendationType &&
+ rec.priority === priority
+ );
+
+ if (!recommendation) {
+ alert('Recommendation not found');
+ return;
+ }
+
+ // Confirm action
+ const confirmed = confirm(`Are you sure you want to apply this recommendation?\n\n${recommendation.title}\n\nThis will make changes to your cluster.`);
+ if (!confirmed) return;
+
+ // Apply recommendation
+ const response = await fetch('/api/v1/recommendations/apply', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ ...recommendation,
+ dry_run: false
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const result = await response.json();
+
+ // Show success message
+ alert(`Recommendation applied successfully!\n\n${result.message}`);
+
+ // Refresh recommendations
+ loadSmartRecommendations();
+
+ } catch (error) {
+ console.error('Error applying recommendation:', error);
+ alert(`Failed to apply recommendation: ${error.message}`);
+ }
+ }
+
+ // Preview smart recommendation
+ async function previewSmartRecommendation(workloadName, namespace, recommendationType, priority) {
+ try {
+ // Find the recommendation data
+ const recommendations = window.currentRecommendations || [];
+ const recommendation = recommendations.find(rec =>
+ rec.workload_name === workloadName &&
+ rec.namespace === namespace &&
+ rec.recommendation_type === recommendationType &&
+ rec.priority === priority
+ );
+
+ if (!recommendation) {
+ alert('Recommendation not found');
+ return;
+ }
+
+ // Preview recommendation (dry run)
+ const response = await fetch('/api/v1/recommendations/apply', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ ...recommendation,
+ dry_run: true
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const result = await response.json();
+
+ // Show preview modal
+ showRecommendationPreview(result);
+
+ } catch (error) {
+ console.error('Error previewing recommendation:', error);
+ alert(`Failed to preview recommendation: ${error.message}`);
+ }
+ }
+
+ // Show recommendation preview modal
+ function showRecommendationPreview(result) {
+ const modal = document.createElement('div');
+ modal.className = 'modal';
+ modal.style.display = 'block';
+ modal.innerHTML = `
+
+
+
+
+
${result.title}
+
${result.description}
+
+
+ ${result.implementation_steps && result.implementation_steps.length > 0 ? `
+
+
Implementation Steps:
+
+ ${result.implementation_steps.map(step => `- ${step}
`).join('')}
+
+
+ ` : ''}
+
+ ${result.kubectl_commands && result.kubectl_commands.length > 0 ? `
+
+
Kubectl Commands:
+
+ ${result.kubectl_commands.map(cmd => `
${cmd}
`).join('')}
+
+
+ ` : ''}
+
+
+
+
+
+
+ `;
+
+ document.body.appendChild(modal);
+
+ // Close modal when clicking outside
+ modal.addEventListener('click', function(e) {
+ if (e.target === modal) {
+ modal.remove();
+ }
+ });
+ }
+
+ // Show OpenShift Commands
+ function showOpenShiftCommands(workloadName, namespace) {
+ // Find the recommendation data
+ const recommendations = window.currentRecommendations || [];
+ const recommendation = recommendations.find(rec =>
+ rec.workload_name === workloadName && rec.namespace === namespace
+ );
+
+ if (!recommendation || !recommendation.kubectl_commands) {
+ alert('OpenShift commands not available for this recommendation');
+ return;
+ }
+
+ // Create modal with commands
+ const modal = document.createElement('div');
+ modal.className = 'modal';
+ modal.style.display = 'block'; // Force display
+ modal.innerHTML = `
+
+
+
+
Namespace: ${namespace}
+
Commands:
+
${recommendation.kubectl_commands.join('\n')}
+
+
+ `;
+
+ document.body.appendChild(modal);
+
+ // Close modal when clicking outside
+ modal.addEventListener('click', function(e) {
+ if (e.target === modal) {
+ modal.remove();
+ }
+ });
+ }
+
async function loadHistoricalAnalysis() {
try {
showLoading('historical-workloads-container');
+ // Get selected time range
+ const timeRange = document.getElementById('timeRangeSelect')?.value || '24h';
+
// Load historical data
- const response = await fetch('/api/v1/historical-analysis');
+ const response = await fetch(`/api/v1/historical-analysis?time_range=${timeRange}`);
const data = await response.json();
updateHistoricalWorkloads(data);
@@ -956,11 +1714,32 @@
}
}
+ // Alias for the select onchange
+ function loadHistoricalWorkloads() {
+ loadHistoricalAnalysis();
+ }
+
function updateMetricsCards(data) {
document.getElementById('total-workloads').textContent = data.total_pods || 0;
document.getElementById('total-namespaces').textContent = data.total_namespaces || 0;
- document.getElementById('critical-issues').textContent = data.critical_issues || 0;
+ document.getElementById('critical-issues').textContent = data.total_errors || 0;
document.getElementById('total-warnings').textContent = data.total_warnings || 0;
+
+ // Update overcommit metrics
+ if (data.overcommit) {
+ document.getElementById('cpu-overcommit').textContent = `${data.overcommit.cpu_overcommit_percent || 0}%`;
+ document.getElementById('memory-overcommit').textContent = `${data.overcommit.memory_overcommit_percent || 0}%`;
+ document.getElementById('namespaces-in-overcommit').textContent = data.overcommit.namespaces_in_overcommit || 0;
+ document.getElementById('resource-utilization').textContent = `${data.overcommit.resource_utilization || 0}%`;
+
+ // Store overcommit data for modal display
+ window.overcommitData = data.overcommit;
+ } else {
+ document.getElementById('cpu-overcommit').textContent = '0%';
+ document.getElementById('memory-overcommit').textContent = '0%';
+ document.getElementById('namespaces-in-overcommit').textContent = '0';
+ document.getElementById('resource-utilization').textContent = '0%';
+ }
}
function updateWorkloadsTable(data) {
@@ -1001,8 +1780,8 @@
No Issues Found
All workloads are properly configured
-
-
- `;
- document.body.appendChild(modal);
-
- // Add close functionality
+
+