-
- ${rec.workload_list && rec.workload_list.length > 0 ? `
-
- ` : ''}
-
- ${rec.implementation_steps && rec.implementation_steps.length > 0 ? `
-
- ` : ''}
-
-
- ${rec.vpa_yaml ? `
-
- ` : ''}
-
- ${rec.kubectl_commands && rec.kubectl_commands.length > 0 ? `
-
- ` : ''}
-
-
-
-
+ // Update bulk select counters
+ document.getElementById('total-recommendations').textContent = data.recommendations.length;
+ document.getElementById('page-recommendations').textContent = data.recommendations.length;
+
+ const recommendationsHtml = data.recommendations.map((rec, index) => `
+
+
+
+
+
${rec.description}
+
+
+
+
+
`).join('');
container.innerHTML = recommendationsHtml;
+ updateBulkSelectUI();
+ }
+
+ // Bulk Select Functions
+ function toggleBulkSelect() {
+ const menu = document.getElementById('bulk-select-menu');
+ const toggle = document.getElementById('bulk-select-toggle');
+ const isOpen = menu.style.display !== 'none';
+
+ menu.style.display = isOpen ? 'none' : 'block';
+ toggle.setAttribute('aria-expanded', !isOpen);
+ }
+
+ function toggleRecommendationSelection(index) {
+ const checkbox = document.getElementById(`checkbox-${index}`);
+ const card = document.getElementById(`recommendation-${index}`);
+
+ if (checkbox.checked) {
+ window.selectedRecommendations.add(index);
+ card.classList.add('selected');
+ } else {
+ window.selectedRecommendations.delete(index);
+ card.classList.remove('selected');
+ }
+
+ updateBulkSelectUI();
+ }
+
+ function selectAllRecommendations() {
+ const checkboxes = document.querySelectorAll('.recommendation-checkbox');
+ checkboxes.forEach((checkbox, index) => {
+ checkbox.checked = true;
+ window.selectedRecommendations.add(index);
+ document.getElementById(`recommendation-${index}`).classList.add('selected');
+ });
+ updateBulkSelectUI();
+ toggleBulkSelect();
+ }
+
+ function selectPageRecommendations() {
+ const checkboxes = document.querySelectorAll('.recommendation-checkbox');
+ checkboxes.forEach((checkbox, index) => {
+ checkbox.checked = true;
+ window.selectedRecommendations.add(index);
+ document.getElementById(`recommendation-${index}`).classList.add('selected');
+ });
+ updateBulkSelectUI();
+ toggleBulkSelect();
+ }
+
+ function deselectAllRecommendations() {
+ const checkboxes = document.querySelectorAll('.recommendation-checkbox');
+ checkboxes.forEach((checkbox, index) => {
+ checkbox.checked = false;
+ window.selectedRecommendations.delete(index);
+ document.getElementById(`recommendation-${index}`).classList.remove('selected');
+ });
+ updateBulkSelectUI();
+ toggleBulkSelect();
+ }
+
+ function updateBulkSelectUI() {
+ const selectedCount = window.selectedRecommendations ? window.selectedRecommendations.size : 0;
+ const totalCount = window.currentRecommendations ? window.currentRecommendations.length : 0;
+
+ document.getElementById('bulk-select-text').textContent = `${selectedCount} selected`;
+ document.getElementById('selected-count').textContent = selectedCount;
+
+ const bulkActions = document.getElementById('bulk-actions');
+ if (selectedCount > 0) {
+ bulkActions.style.display = 'flex';
+ } else {
+ bulkActions.style.display = 'none';
+ }
+ }
+
+ async function applySelectedRecommendations() {
+ if (!window.selectedRecommendations || window.selectedRecommendations.size === 0) {
+ alert('No recommendations selected');
+ return;
+ }
+
+ const selectedIndices = Array.from(window.selectedRecommendations);
+ const selectedRecommendations = selectedIndices.map(index => window.currentRecommendations[index]);
+
+ try {
+ showLoading('smart-recommendations-container');
+
+ const results = [];
+ for (const rec of selectedRecommendations) {
+ try {
+ const response = await fetch('/api/v1/recommendations/apply', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ ...rec,
+ dry_run: false
+ })
+ });
+
+ if (response.ok) {
+ const result = await response.json();
+ results.push({ success: true, recommendation: rec.title, result });
+ } else {
+ results.push({ success: false, recommendation: rec.title, error: 'Failed to apply' });
+ }
+ } catch (error) {
+ results.push({ success: false, recommendation: rec.title, error: error.message });
+ }
+ }
+
+ // Show results
+ const successCount = results.filter(r => r.success).length;
+ const failCount = results.filter(r => !r.success).length;
+
+ alert(`Applied ${successCount} recommendations successfully. ${failCount} failed.`);
+
+ // Refresh recommendations
+ loadSmartRecommendations();
+
+ } catch (error) {
+ console.error('Error applying selected recommendations:', error);
+ alert('Error applying recommendations: ' + error.message);
+ }
+ }
+
+ async function previewSelectedRecommendations() {
+ if (!window.selectedRecommendations || window.selectedRecommendations.size === 0) {
+ alert('No recommendations selected');
+ return;
+ }
+
+ const selectedIndices = Array.from(window.selectedRecommendations);
+ const selectedRecommendations = selectedIndices.map(index => window.currentRecommendations[index]);
+
+ try {
+ const results = [];
+ for (const rec of selectedRecommendations) {
+ try {
+ const response = await fetch('/api/v1/recommendations/apply', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ ...rec,
+ dry_run: true
+ })
+ });
+
+ if (response.ok) {
+ const result = await response.json();
+ results.push({ success: true, recommendation: rec, result });
+ } else {
+ results.push({ success: false, recommendation: rec, error: 'Failed to preview' });
+ }
+ } catch (error) {
+ results.push({ success: false, recommendation: rec, error: error.message });
+ }
+ }
+
+ showRecommendationPreview(results);
+
+ } catch (error) {
+ console.error('Error previewing selected recommendations:', error);
+ alert('Error previewing recommendations: ' + error.message);
+ }
}
// Load VPA management