diff --git a/app/static/index.html b/app/static/index.html index 64afbc2..04253d0 100644 --- a/app/static/index.html +++ b/app/static/index.html @@ -239,7 +239,7 @@ .modal-content { background-color: #fefefe; margin: 5% auto; - padding: 20px; + padding: 0; border: 1px solid #888; border-radius: 8px; width: 80%; @@ -248,6 +248,25 @@ overflow-y: auto; } + .modal-header { + background: #f8f9fa; + padding: 20px; + border-bottom: 1px solid #dee2e6; + border-radius: 8px 8px 0 0; + display: flex; + justify-content: space-between; + align-items: center; + } + + .modal-header h2 { + margin: 0; + color: #495057; + } + + .modal-body { + padding: 20px; + } + .close { color: #aaa; float: right; @@ -342,6 +361,28 @@ color: #6c757d; font-size: 0.9em; } + + /* Fix Modal Styles */ + .fix-details { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + } + + .fix-info { + background: #f8f9fa; + padding: 15px; + border-radius: 5px; + margin: 15px 0; + } + + .fix-info ul { + margin: 10px 0; + padding-left: 20px; + } + + .fix-actions { + margin-top: 20px; + text-align: right; + } /* Problem Summary Table */ .problem-summary { @@ -1051,57 +1092,162 @@ return html; } - // Show namespace details in a simple alert (temporary solution) + // Show namespace details in modal function showNamespaceDetailsSimple(namespaceName, detailsHtml) { - // Create a simple text summary for the alert + // Create modal if it doesn't exist + let modal = document.getElementById('namespaceModal'); + if (!modal) { + modal = document.createElement('div'); + modal.id = 'namespaceModal'; + modal.className = 'modal'; + modal.innerHTML = ` +
+
+

šŸ“‹ Namespace Analysis

+ × +
+
+
+ `; + document.body.appendChild(modal); + + // Add close functionality + modal.querySelector('.close').onclick = () => modal.style.display = 'none'; + modal.onclick = (e) => { + if (e.target === modal) modal.style.display = 'none'; + }; + } + + // Create detailed content const namespace = currentData.namespaces.find(ns => ns.namespace === namespaceName); if (!namespace) return; - let summary = `šŸ“‹ ${namespaceName} - Detailed Analysis\n\n`; - summary += `Pods: ${Object.keys(namespace.pods || {}).length}\n`; - summary += `Total Issues: ${namespace.total_validations || 0}\n\n`; + let content = ` +
+

šŸ“‹ ${namespaceName} - Detailed Analysis

+
+

Pods: ${Object.keys(namespace.pods || {}).length}

+

Total Issues: ${namespace.total_validations || 0}

+

Severity Breakdown:

+ +
+
+

šŸ” Pod Analysis

+ `; - // Add severity breakdown - const breakdown = namespace.severity_breakdown || {}; - summary += `Severity Breakdown:\n`; - summary += `- Errors: ${breakdown.error || 0}\n`; - summary += `- Warnings: ${breakdown.warning || 0}\n`; - summary += `- Info: ${breakdown.info || 0}\n\n`; - - // Add pod details - summary += `Pod Analysis:\n`; + // Add details for each pod Object.values(namespace.pods || {}).forEach(pod => { - summary += `\nšŸ“¦ ${pod.pod_name}\n`; - summary += `Status: ${pod.phase}\n`; - summary += `Node: ${pod.node_name}\n`; + content += ` +
+
šŸ“¦ ${pod.pod_name}
+

Status: ${pod.phase}

+

Node: ${pod.node_name}

+
+
Containers:
+ `; - // Add container details pod.containers.forEach(container => { const hasRequests = Object.keys(container.resources?.requests || {}).length > 0; const hasLimits = Object.keys(container.resources?.limits || {}).length > 0; - summary += `\n Container: ${container.name}\n`; - summary += ` Image: ${container.image}\n`; - summary += ` Requests: ${hasRequests ? JSON.stringify(container.resources.requests) : 'āŒ Not defined'}\n`; - summary += ` Limits: ${hasLimits ? JSON.stringify(container.resources.limits) : 'āŒ Not defined'}\n`; + content += ` +
+

${container.name} (${container.image})

+

Requests: ${hasRequests ? JSON.stringify(container.resources.requests) : 'āŒ Not defined'}

+

Limits: ${hasLimits ? JSON.stringify(container.resources.limits) : 'āŒ Not defined'}

+
+ `; }); - // Add validation details + content += ` +
+
+
Issues Found:
+ `; + if (pod.validations && pod.validations.length > 0) { - summary += `\n Issues Found:\n`; pod.validations.forEach(validation => { - summary += ` - ${validation.rule_name}: ${validation.message}\n`; - summary += ` Recommendation: ${validation.recommendation}\n`; + const severityClass = `severity-${validation.severity}`; + content += ` +
+

${validation.rule_name}: ${validation.message}

+

Recommendation: ${validation.recommendation}

+
+ `; }); + } else { + content += `

No issues found for this pod.

`; } + + content += ` +
+
+ `; }); - alert(summary); + content += ` +
+
+ `; + + // Populate and show modal + document.getElementById('modalBody').innerHTML = content; + modal.style.display = 'block'; } // Fix namespace - placeholder for now function fixNamespace(namespaceName) { - alert(`Fix functionality for namespace "${namespaceName}" will be implemented in Phase 2.\n\nThis will include:\n- Auto-generating resource recommendations\n- Creating YAML patches\n- Applying fixes via OpenShift API`); + // Create modal if it doesn't exist + let modal = document.getElementById('fixModal'); + if (!modal) { + modal = document.createElement('div'); + modal.id = 'fixModal'; + modal.className = 'modal'; + modal.innerHTML = ` +
+
+

šŸ”§ Fix Namespace

+ × +
+
+
+ `; + document.body.appendChild(modal); + + // Add close functionality + modal.querySelector('.close').onclick = () => modal.style.display = 'none'; + modal.onclick = (e) => { + if (e.target === modal) modal.style.display = 'none'; + }; + } + + // Create content + let content = ` +
+

šŸ”§ Fix Namespace: ${namespaceName}

+
+

Status: Coming Soon in Phase 2

+

This functionality will include:

+ +
+ +
+
+
+ `; + + // Populate and show modal + document.getElementById('fixModalBody').innerHTML = content; + modal.style.display = 'block'; } // Apply filters