ui: reorganize sidebar with new structure and sections

- Reorganize sidebar: Home, Analysis, Recommendations, Settings
- Move Analysis section to second position (after Home)
- Create new Recommendations section with Historical Based and VPA Management
- Integrate Smart Recommendations into VPA Management section
- Remove Observe section (Metrics/Logs - available in OpenShift console)
- Add Settings section for future configuration options
- Update navigation logic for all new sections
- Improve interface focus on app's core purpose

app/static/index.html

@@ -1045,24 +1045,6 @@
             </div>
         </div>
         
-        <div class="sidebar-section">
-            <h3 class="sidebar-section-title">VPA</h3>
-            <ul class="sidebar-nav">
-                <li class="sidebar-nav-item">
-                    <a href="#" class="sidebar-nav-link" data-section="smart-recommendations">
-                        <i class="fas fa-lightbulb sidebar-nav-icon"></i>
-                        <span>Smart Recommendations</span>
-                    </a>
-                </li>
-                <li class="sidebar-nav-item">
-                    <a href="#" class="sidebar-nav-link" data-section="vpa-management">
-                        <i class="fas fa-cogs sidebar-nav-icon"></i>
-                        <span>VPA Management</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        
         <div class="sidebar-section">
             <h3 class="sidebar-section-title">Analysis</h3>
             <ul class="sidebar-nav">
@@ -1076,20 +1058,30 @@
         </div>
         
         <div class="sidebar-section">
-            <h3 class="sidebar-section-title">Observe</h3>
+            <h3 class="sidebar-section-title">Recommendations</h3>
             <ul class="sidebar-nav">
                 <li class="sidebar-nav-item">
-                    <a href="#" class="sidebar-nav-link">
+                    <a href="#" class="sidebar-nav-link" data-section="historical-analysis">
-                        <i class="fas fa-chart-bar sidebar-nav-icon"></i>
+                        <i class="fas fa-chart-line sidebar-nav-icon"></i>
-                        <span>Metrics</span>
+                        <span>Historical Based</span>
-                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
                     </a>
                 </li>
                 <li class="sidebar-nav-item">
-                    <a href="#" class="sidebar-nav-link">
+                    <a href="#" class="sidebar-nav-link" data-section="vpa-management">
-                        <i class="fas fa-search sidebar-nav-icon"></i>
+                        <i class="fas fa-cogs sidebar-nav-icon"></i>
-                        <span>Logs</span>
+                        <span>VPA Management</span>
-                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        
+        <div class="sidebar-section">
+            <h3 class="sidebar-section-title">Settings</h3>
+            <ul class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link" data-section="settings">
+                        <i class="fas fa-cog sidebar-nav-icon"></i>
+                        <span>Configuration</span>
                     </a>
                 </li>
             </ul>
@@ -1205,17 +1197,35 @@
             </div>
         </section>
 
-        <!-- Smart Recommendations Section -->
+
-        <section id="smart-recommendations-section" class="section-hidden">
+            <!-- VPA Management Section -->
+        <section id="vpa-management-section" class="section-hidden">
             <div class="page-header">
-                <h1 class="page-title">Smart Recommendations</h1>
+                <h1 class="page-title">VPA Management & Recommendations</h1>
-                <p class="page-description">AI-powered recommendations for resource optimization and VPA activation</p>
+                <p class="page-description">Manage Vertical Pod Autoscaler configurations, monitor VPA status, and apply smart recommendations</p>
+            </div>
+
+            <!-- VPA Management Content -->
+            <div class="openshift-card">
+                <div class="card-header">
+                    <h2 class="card-title">VPA Status</h2>
+                    <button class="openshift-button" onclick="loadVPAManagement()">
+                        <i class="fas fa-sync-alt"></i>
+                        Refresh
+                    </button>
+                </div>
+                <div class="table-content" id="vpa-management-container">
+                    <div class="loading-spinner">
+                        <i class="fas fa-spinner fa-spin"></i>
+                        Loading VPA data...
+                    </div>
+                </div>
             </div>
 
             <!-- Smart Recommendations Content -->
-            <div class="openshift-card">
+            <div class="openshift-card" style="margin-top: 24px;">
                 <div class="card-header">
-                    <h2 class="card-title">VPA Recommendations</h2>
+                    <h2 class="card-title">Smart Recommendations</h2>
                     <div class="card-actions">
                         <button class="openshift-button" onclick="loadSmartRecommendations()">
                             <i class="fas fa-sync-alt"></i>
@@ -1285,31 +1295,6 @@
             </div>
         </section>
 
-            <!-- VPA Management Section -->
-        <section id="vpa-management-section" class="section-hidden">
-            <div class="page-header">
-                <h1 class="page-title">VPA Management</h1>
-                <p class="page-description">Manage Vertical Pod Autoscaler configurations and monitor VPA status</p>
-                    </div>
-
-            <!-- VPA Management Content -->
-            <div class="openshift-card">
-                <div class="card-header">
-                    <h2 class="card-title">VPA Status</h2>
-                    <button class="openshift-button" onclick="loadVPAManagement()">
-                        <i class="fas fa-sync-alt"></i>
-                        Refresh
-                    </button>
-                </div>
-                <div class="table-content" id="vpa-management-container">
-                    <div class="loading-spinner">
-                        <i class="fas fa-spinner fa-spin"></i>
-                        Loading VPA data...
-            </div>
-                </div>
-            </div>
-        </section>
-
             <!-- Historical Analysis Section -->
         <section id="historical-analysis-section" class="section-hidden">
             <div class="page-header">
@@ -1356,6 +1341,31 @@
                 </div>
             </div>
         </section>
+
+        <!-- Settings Section -->
+        <section id="settings-section" class="section-hidden">
+            <div class="page-header">
+                <h1 class="page-title">Configuration Settings</h1>
+                <p class="page-description">Configure analysis thresholds, ratios, and parameters for resource optimization</p>
+            </div>
+
+            <!-- Settings Content -->
+            <div class="openshift-card">
+                <div class="card-header">
+                    <h2 class="card-title">Analysis Parameters</h2>
+                    <button class="openshift-button" onclick="loadSettings()">
+                        <i class="fas fa-sync-alt"></i>
+                        Refresh
+                    </button>
+                </div>
+                <div class="table-content" id="settings-container">
+                    <div class="loading-spinner">
+                        <i class="fas fa-spinner fa-spin"></i>
+                        Loading settings...
+                    </div>
+                </div>
+            </div>
+        </section>
     </main>
 
     <!-- JavaScript -->
@@ -1421,12 +1431,12 @@
                 loadWorkloadScanner();
             } else if (section === 'requests-limits') {
                 loadRequestsLimits();
-            } else if (section === 'smart-recommendations') {
-                loadSmartRecommendations();
             } else if (section === 'vpa-management') {
                 loadVPAManagement();
             } else if (section === 'historical-analysis') {
                 loadHistoricalAnalysis();
+            } else if (section === 'settings') {
+                loadSettings();
             }
         }
         
@@ -1466,6 +1476,28 @@
             }
         }
         
+        // Load settings
+        async function loadSettings() {
+            try {
+                showLoading('settings-container');
+                
+                // TODO: Implement settings loading
+                // For now, show placeholder
+                document.getElementById('settings-container').innerHTML = `
+                    <div style="text-align: center; padding: 40px; color: var(--pf-global--Color--300);">
+                        <i class="fas fa-cog" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--Color--400);"></i>
+                        <h3>Settings Configuration</h3>
+                        <p>Configure analysis thresholds, ratios, and parameters for resource optimization.</p>
+                        <p style="margin-top: 16px; font-style: italic;">Coming soon...</p>
+                    </div>
+                `;
+                
+            } catch (error) {
+                console.error('Error loading settings:', error);
+                showError('settings-container', 'Failed to load settings');
+            }
+        }
+        
         // Load smart recommendations
         async function loadSmartRecommendations() {
             try {