sovereign 1.0.0b123__py3-none-any.whl → 1.0.0b134__py3-none-any.whl

sovereign/templates/resources.html

@@ -5,278 +5,28 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-    <script>
-      // Only store resource metadata (names/identifiers), not full content
-      const resourceNames = [
-        {% for resource in resources %}
-          "{{ resource.name or resource.cluster_name or 'Unknown' }}"{% if not loop.last %},{% endif %}
-        {% endfor %}
-      ];
-      const resources = resourceNames.map((name, index) => ({ name: name, index: index }));
-      let filteredResources = [...resources];
-
-      // Function to set envoy_version cookie and reload page
-      function setEnvoyVersion(version) {
-        document.cookie = `envoy_version=${version}; path=/ui/resources/; max-age=31536000`;
-        window.location.reload();
-      }
-    </script>
-    <style>
-        #filterInput {
-            font-family: monospace;
-        }
-        .filtered {
-            display: none;
-        }
-        .tooltip {
-          position: relative;
-          display: inline-block;
-          cursor: help;
-        }
-        .tooltip .tooltip-text {
-          visibility: hidden;
-          width: 220px;
-          background-color: #363636;
-          color: #fff;
-          text-align: left;
-          padding: 0.5rem;
-          border-radius: 6px;
-          position: absolute;
-          z-index: 1;
-          top: 125%;
-          left: 50%;
-          margin-left: -110px;
-          opacity: 0;
-          transition: opacity 0.3s;
-          font-size: 0.875rem;
-        }
-        .tooltip:hover .tooltip-text {
-          visibility: visible;
-          opacity: 1;
-        }
-        
-        /* Side panel styles - using Bulma-compatible approach */
-        .side-panel {
-          position: fixed;
-          top: 0;
-          right: -100%;
-          width: 95%;
-          max-width: 1200px;
-          min-width: 400px;
-          height: 100vh;
-          z-index: 1000;
-          transition: right 0.3s ease-in-out;
-          overflow-y: auto;
-        }
-        
-        .side-panel.is-active {
-          right: 0;
-        }
-        
-        /* Responsive side panel sizing */
-        @media (min-width: 768px) {
-          .side-panel { width: 75%; right: -75%; }
-        }
-        
-        @media (min-width: 1024px) {
-          .side-panel { width: 65%; right: -65%; }
-        }
-        
-        @media (min-width: 1400px) {
-          .side-panel { width: 55%; right: -55%; }
-        }
-        
-        @media (min-width: 1600px) {
-          .side-panel { width: 50%; right: -50%; }
-        }
-        
-        @media (max-width: 480px) {
-          .side-panel { width: 95%; min-width: 300px; right: -95%; }
-        }
-        
-        .json-container {
-          position: relative;
-        }
-        
-        .json-header {
-          padding: 1rem;
-          border-bottom: 1px solid #555;
-          background-color: #2d2d2d;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        
-        
-        .json-content {
-          background-color: #1e1e1e;
-          border: none;
-          border-radius: 0;
-          padding: 1rem;
-          font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'Consolas', monospace;
-          font-size: 0.875rem;
-          line-height: 1.5;
-          white-space: pre-wrap;
-          word-wrap: break-word;
-          max-height: calc(100vh - 250px);
-          overflow-y: auto;
-          color: #d4d4d4;
-          margin: 0;
-        }
-        
-        /* JSON Syntax Highlighting - VS Code Dark+ theme colors */
-        .json-key {
-          color: #9cdcfe;
-          font-weight: 400;
-        }
-        
-        .json-string {
-          color: #ce9178;
-        }
-        
-        .json-number {
-          color: #b5cea8;
-        }
-        
-        .json-boolean {
-          color: #569cd6;
-          font-weight: 500;
-        }
-        
-        .json-null {
-          color: #569cd6;
-          font-weight: 500;
-          font-style: italic;
-        }
-        
-        .json-punctuation {
-          color: #d4d4d4;
-        }
-        
-        /* Improve readability */
-        .json-content::-webkit-scrollbar {
-          width: 8px;
-        }
-        
-        .json-content::-webkit-scrollbar-track {
-          background: #2d2d2d;
-        }
-        
-        .json-content::-webkit-scrollbar-thumb {
-          background: #555;
-          border-radius: 4px;
-        }
-        
-        .json-content::-webkit-scrollbar-thumb:hover {
-          background: #666;
-        }
-        
-        /* Collapsible JSON */
-        .json-toggle {
-          cursor: pointer;
-          user-select: none;
-          color: #808080;
-          margin-right: 0.25rem;
-          font-family: monospace;
-          font-size: 0.875rem;
-        }
-        
-        .json-toggle:hover {
-          color: #fff;
-        }
-        
-        .json-collapsible {
-          margin-left: 1rem;
-        }
-        
-        .json-collapsed {
-          display: none;
-        }
-        
-        .loading-spinner {
-          display: inline-block;
-          width: 20px;
-          height: 20px;
-          border: 3px solid #f3f3f3;
-          border-top: 3px solid #433fca;
-          border-radius: 50%;
-          animation: spin 1s linear infinite;
-        }
-        
-        @keyframes spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
-        
-        /* Prevent body scroll when side panel is open */
-        body.side-panel-open {
-          overflow: hidden;
-        }
-        
-        /* Backdrop overlay for side panel */
-        .side-panel-backdrop {
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0, 0, 0, 0.5);
-          z-index: 999;
-          opacity: 0;
-          visibility: hidden;
-          transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-        }
-        
-        .side-panel-backdrop.is-active {
-          opacity: 1;
-          visibility: visible;
-        }
-        
-        /* Show backdrop on smaller screens */
-        @media (max-width: 1024px) {
-          .side-panel-backdrop.is-active {
-            opacity: 1;
-            visibility: visible;
-          }
-        }
-        
-        /* Minimal custom styles - using Bulma classes for most styling */
-        .json-chunk-controls {
-          background-color: #2d2d2d;
-          border-bottom: 1px solid #555;
-        }
-        
-        /* Preferences details styling */
-        details summary {
-          list-style: none;
-        }
-        
-        details summary::-webkit-details-marker {
-          display: none;
-        }
-        
-        details summary::before {
-          content: "▶";
-          margin-right: 0.5rem;
-          transition: transform 0.2s;
-        }
-        
-        details[open] summary::before {
-          transform: rotate(90deg);
-        }
-    </style>
-
+    <link rel="stylesheet" href="/static/resources.css">
+    <script src="/static/resources.js"></script>
+    <script src="/static/panel.js"></script>
 {% endblock %}
 
 
 {%- block body %}
     <div class="content">
+        {% if error %}
+        <span class="panel-icon">
+            <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        </span>
+        <div class="notification is-danger">
+            {{ error }}
+        </div>
+        {% endif %}
         <p class="content">
         <div class="columns">
             <div class="column is-narrow">
                 <div class="dropdown is-hoverable">
                     <div class="dropdown-trigger">
-                        <button class="button is-dark" aria-haspopup="true" aria-controls="dropdown-menu">
+                        <button class="button is-primary" aria-haspopup="true" aria-controls="dropdown-menu">
                             <span>Template Version</span>
                             <span class="icon is-small">
                                 <i class="fas fa-angle-down" aria-hidden="false"></i>
@@ -301,8 +51,9 @@
             <!-- node expression box --> 
             <div class="column">
                 <form id="filterForm">
-                    <input id="filterInput" class="input is-dark" type="text" placeholder="Node filter expression"/>
+                    <input id="filterInput" class="input" type="text" placeholder="Node filter expression"/>
                 </form>
+                <p id="filterMessage" class="help"></p>
             </div>
             <div class="column is-narrow">
                 <div class="tooltip">
@@ -322,9 +73,10 @@
         </div>
     </div>
 
+
     {% set count = resources|length %}
     {% if count > 0 %}
-    <nav class="panel is-dark" id="resources">
+    <nav class="panel is-primary" id="resources">
         <p class="panel-heading">
             {{ resource_type|capitalize }}
         </p>
@@ -361,14 +113,19 @@
             </p>
         </div>
     </nav>
+        {% if count < 10 %}
+            {% set hidden = "display: none;" %}
+        {% endif %}
+        <div style="{{ hidden }}">
         <nav class="pagination is-right is-small" role="navigation" aria-label="pagination">
           <a id="prev-btn" class="pagination-previous">Previous</a>
           <a id="next-btn" class="pagination-next">Next</a>
           <ul id="page-numbers" class="pagination-list"></ul>
         </nav>
+        </div>
 
         {% if resource_type == 'routes' %}
-            <nav class="panel">
+            <nav class="panel is-primary">
               <p class="panel-heading">Virtual Hosts</p>
               <div class="panel-block">
                 <p class="control has-icons-left">
@@ -393,6 +150,9 @@
                          data-category="{{ resource['name'] }}"
                          href="#"
                          onclick="loadVirtualHostInSidePanel('{{ resource['name'] }}', '{{ virtualhost['name'] }}'); return false;">
+                      <p class="tag is-small is-primary">
+                          {{ resource['name'] }}
+                      </p>
                       <span class="panel-icon">
                           <i class="fas fa-arrow-right" aria-hidden="true"></i>
                       </span>
@@ -406,7 +166,7 @@
                     <div class="notification is-danger">
                         No resources found
                         <script>
-                          setTimeout(() => location.reload(), 2000);
+                          setTimeout(() => location.reload(), 6000);
                         </script>
                     </div>
                   {% endif %}
@@ -480,576 +240,21 @@
 {% block footer %}
 <div class="content has-text-centered is-small">
     <script src="/static/node_expression.js"></script>
-    <script src="/static/panel.js"></script>
     <script>
-    // Side panel functionality
-    function openSidePanel() {
-        document.getElementById('sidePanel').classList.add('is-active');
-        document.getElementById('sidePanelBackdrop').classList.add('is-active');
-        document.body.classList.add('side-panel-open');
-    }
-    
-    function closeSidePanel() {
-        document.getElementById('sidePanel').classList.remove('is-active');
-        document.getElementById('sidePanelBackdrop').classList.remove('is-active');
-        document.body.classList.remove('side-panel-open');
-    }
-    
-    function showLoading() {
-        document.getElementById('sidePanelContent').innerHTML = `
-            <div style="text-align: center; padding: 2rem;">
-                <div class="loading-spinner"></div>
-                <p style="margin-top: 1rem;">Loading resource data...</p>
-            </div>
-        `;
-    }
-    
-    function showError(message) {
-        document.getElementById('sidePanelContent').innerHTML = `
-            <div class="notification is-danger">
-                <strong>Error:</strong> ${message}
-            </div>
-        `;
-    }
-    
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    
-    function syntaxHighlight(json) {
-        if (typeof json !== 'string') {
-            json = JSON.stringify(json, null, 2);
-        }
-        
-        // Escape HTML first
-        json = escapeHtml(json);
-        
-        // Apply syntax highlighting
-        json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
-            let cls = 'json-number';
-            if (/^"/.test(match)) {
-                if (/:$/.test(match)) {
-                    cls = 'json-key';
-                    // Remove the colon from the match for styling, we'll add it back
-                    match = match.slice(0, -1);
-                    return '<span class="' + cls + '">' + match + '</span><span class="json-punctuation">:</span>';
-                } else {
-                    cls = 'json-string';
-                }
-            } else if (/true|false/.test(match)) {
-                cls = 'json-boolean';
-            } else if (/null/.test(match)) {
-                cls = 'json-null';
-            }
-            return '<span class="' + cls + '">' + match + '</span>';
-        });
-        
-        // Highlight punctuation (brackets, braces, commas)
-        json = json.replace(/([{}[\],])/g, '<span class="json-punctuation">$1</span>');
-        
-        return json;
-    }
-    
-    function makeJsonCollapsible(element) {
-        // This function would add collapsible functionality
-        // For now, we'll keep it simple and just return the element
-        // Future enhancement: add click handlers for { } and [ ] to collapse/expand
-        return element;
-    }
-    
-    function copyToClipboard(text) {
-        if (navigator.clipboard && window.isSecureContext) {
-            // Use the modern clipboard API
-            navigator.clipboard.writeText(text).then(() => {
-                showCopySuccess();
-            }).catch(err => {
-                console.error('Failed to copy: ', err);
-                fallbackCopyTextToClipboard(text);
-            });
-        } else {
-            // Fallback for older browsers
-            fallbackCopyTextToClipboard(text);
-        }
-    }
-    
-    function fallbackCopyTextToClipboard(text) {
-        const textArea = document.createElement("textarea");
-        textArea.value = text;
-        textArea.style.top = "0";
-        textArea.style.left = "0";
-        textArea.style.position = "fixed";
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        
-        try {
-            const successful = document.execCommand('copy');
-            if (successful) {
-                showCopySuccess();
-            }
-        } catch (err) {
-            console.error('Fallback: Oops, unable to copy', err);
-        }
-        
-        document.body.removeChild(textArea);
-    }
-    
-    function showCopySuccess() {
-        const copyBtn = document.querySelector('.copy-button');
-        if (copyBtn) {
-            const originalText = copyBtn.textContent;
-            copyBtn.textContent = 'Copied!';
-            copyBtn.style.backgroundColor = '#48c774';
-            setTimeout(() => {
-                copyBtn.textContent = originalText;
-                copyBtn.style.backgroundColor = '#433fca';
-            }, 2000);
-        }
-    }
-    
-    // Global variables for chunked loading
-    let currentResourceData = null;
-    let currentChunkSize = 1000; // lines
-    let currentChunkIndex = 0;
-    let totalChunks = 0;
-    
-    // Helper function to generate preferences section HTML
-    function getPreferencesHtml() {
-        const currentThreshold = localStorage.getItem('jsonSizeThreshold') || 0.5;
-        const autoChunk = localStorage.getItem('autoChunkLargeJson') === 'true';
-        
-        return `
-            <details class="has-background-grey-darker">
-                <summary class="has-background-grey-dark has-text-white-ter p-3 is-clickable" style="cursor: pointer;">
-                    <span class="is-size-7">Display Preferences</span>
-                </summary>
-                <div class="box has-background-grey-dark has-text-white-ter m-0" style="border-radius: 0;">
-                    <div class="content is-small">
-                        <div class="field">
-                            <label class="checkbox has-text-white-ter">
-                                <input type="checkbox" id="autoChunkPreference" ${autoChunk ? 'checked' : ''} 
-                                       onchange="event.stopPropagation(); updateAutoChunkPreference(this.checked)" 
-                                       class="mr-2">
-                                Always use chunked view for large files
-                            </label>
-                        </div>
-                        <div class="field is-grouped">
-                            <div class="control">
-                                <label class="label is-small has-text-white-ter">Size threshold:</label>
-                            </div>
-                            <div class="control">
-                                <div class="select is-dark is-small">
-                                    <select id="thresholdSelector" value="${currentThreshold}" 
-                                            onchange="event.stopPropagation(); updateThresholdPreference(this.value)">
-                                        <option value="0.25" ${currentThreshold == 0.25 ? 'selected' : ''}>250 KB</option>
-                                        <option value="0.5" ${currentThreshold == 0.5 ? 'selected' : ''}>500 KB</option>
-                                        <option value="1" ${currentThreshold == 1 ? 'selected' : ''}>1 MB</option>
-                                        <option value="2" ${currentThreshold == 2 ? 'selected' : ''}>2 MB</option>
-                                        <option value="5" ${currentThreshold == 5 ? 'selected' : ''}>5 MB</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="field is-grouped">
-                            <div class="control">
-                                <button class="button is-link is-small" onclick="event.stopPropagation(); showChunkedJson()">
-                                    Switch to Chunked View
-                                </button>
-                            </div>
-                            <div class="control">
-                                <button class="button is-success is-small" onclick="event.stopPropagation(); showFullJson()">
-                                    Switch to Full View
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </details>
-        `;
-    }
-    
-    // Helper functions to update preferences
-    function updateAutoChunkPreference(checked) {
-        localStorage.setItem('autoChunkLargeJson', checked.toString());
-    }
-    
-    function updateThresholdPreference(threshold) {
-        localStorage.setItem('jsonSizeThreshold', threshold);
-    }
-    
-    async function loadResourceInSidePanel(resourceType, resourceName) {
-        document.getElementById('sidePanelTitle').textContent = `${resourceType}: ${resourceName}`;
-        openSidePanel();
-        showLoading();
-        
-        try {
-            // Get current URL parameters to maintain context
-            const urlParams = new URLSearchParams(window.location.search);
-            const region = urlParams.get('region') || '';
-            const apiVersion = urlParams.get('api_version') || 'v2';
-            
-            // Build the fetch URL with current parameters
-            let fetchUrl = `/ui/resources/${resourceType}/${encodeURIComponent(resourceName)}`;
-            const params = new URLSearchParams();
-            if (region) params.append('region', region);
-            params.append('api_version', apiVersion);
-            
-            if (params.toString()) {
-                fetchUrl += '?' + params.toString();
-            }
-            
-            const response = await fetch(fetchUrl, {
-                credentials: 'same-origin' // Include cookies in the request
-            });
-            
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-            
-            const data = await response.json();
-            const jsonString = JSON.stringify(data, null, 2);
-            const sizeKB = (new Blob([jsonString]).size / 1024).toFixed(1);
-            const sizeMB = sizeKB / 1024;
-            
-            // Store the data globally
-            currentResourceData = {
-                data: data,
-                jsonString: jsonString,
-                sizeKB: sizeKB,
-                sizeMB: sizeMB
-            };
-            
-            // Check if the JSON is large and show warning/chunked view
-            // Use a lower threshold (500KB) to be more conservative about browser performance
-            const threshold = localStorage.getItem('jsonSizeThreshold') || 0.5; // MB
-            if (sizeMB > threshold) {
-                // Check user preference for auto-chunking
-                const autoChunk = localStorage.getItem('autoChunkLargeJson') === 'true';
-                if (autoChunk) {
-                    showChunkedJson();
-                } else {
-                    showLargeJsonWarning(resourceType, resourceName);
-                }
-            } else {
-                showFullJson();
-            }
-        } catch (error) {
-            console.error('Error loading resource:', error);
-            showError(error.message);
-        }
-    }
-    
-    function showLargeJsonWarning(resourceType, resourceName) {
-        const sizeKB = currentResourceData.sizeKB;
-        const sizeMB = currentResourceData.sizeMB;
-        
-        document.getElementById('sidePanelContent').innerHTML = `
-            <div class="notification is-warning">
-                <p>
-                    <strong>Large JSON detected (${sizeKB} KB / ${sizeMB.toFixed(1)} MB)</strong><br>
-                    Loading this much data may slow down your browser. <br>
-                </p>
-                
-                Choose an option:
-                <button class="button is-dark is-small" onclick="event.stopPropagation(); showChunkedJson()">
-                    View in Chunks
-                </button>
-                <button class="button is-dark is-small" onclick="event.stopPropagation(); showFullJson()">
-                    Load Full JSON
-                </button>
-            </div>
-        `;
-    }
-    
-    function showChunkedJson() {
-        const lines = currentResourceData.jsonString.split('\n');
-        totalChunks = Math.ceil(lines.length / currentChunkSize);
-        currentChunkIndex = 0;
-        
-        renderChunkedJson();
-    }
-    
-    function showFullJson() {
-        // Store the JSON string globally for copying
-        window.currentJsonData = currentResourceData.jsonString;
-        
-        document.getElementById('sidePanelContent').innerHTML = `
-            <div class="json-container">
-                <div class="json-header">
-                    <span style="color: #d4d4d4; font-size: 0.875rem;">JSON Response (${currentResourceData.sizeKB} KB) - Full View</span>
-                    <button class="button is-primary is-small" onclick="event.stopPropagation(); copyToClipboard(window.currentJsonData)">
-                        Copy JSON
-                    </button>
-                </div>
-                ${getPreferencesHtml()}
-                <div class="json-content">${syntaxHighlight(currentResourceData.data)}</div>
-            </div>
-        `;
-    }
-    
-    function renderChunkedJson() {
-        const lines = currentResourceData.jsonString.split('\n');
-        const startLine = currentChunkIndex * currentChunkSize;
-        const endLine = Math.min(startLine + currentChunkSize, lines.length);
-        const chunkLines = lines.slice(startLine, endLine);
-        const chunkText = chunkLines.join('\n');
-        
-        // Store current chunk for copying
-        window.currentJsonData = currentResourceData.jsonString; // Always allow copying full JSON
-        window.currentChunkData = chunkText;
-        
-        document.getElementById('sidePanelContent').innerHTML = `
-            <div class="json-container">
-                <div class="json-header">
-                    <span style="color: #d4d4d4; font-size: 0.875rem;">JSON Response (${currentResourceData.sizeKB} KB) - Chunked View</span>
-                    <button class="button is-primary is-small" onclick="event.stopPropagation(); copyToClipboard(window.currentJsonData)">
-                        Copy Full JSON
-                    </button>
-                </div>
-                ${getPreferencesHtml()}
-                <div class="json-chunk-controls p-4">
-                    <div class="field is-grouped is-grouped-multiline">
-                        <div class="control">
-                            <label class="label is-small has-text-white">Lines per chunk:</label>
-                            <div class="select is-dark is-small">
-                                <select onchange="event.stopPropagation(); changeChunkSize(this.value)">
-                                    <option value="50" ${currentChunkSize === 50 ? 'selected' : ''}>50</option>
-                                    <option value="100" ${currentChunkSize === 100 ? 'selected' : ''}>100</option>
-                                    <option value="250" ${currentChunkSize === 250 ? 'selected' : ''}>250</option>
-                                    <option value="500" ${currentChunkSize === 500 ? 'selected' : ''}>500</option>
-                                    <option value="1000" ${currentChunkSize === 1000 ? 'selected' : ''}>1000</option>
-                                    <option value="2000" ${currentChunkSize === 2000 ? 'selected' : ''}>2000</option>
-                                    <option value="5000" ${currentChunkSize === 5000 ? 'selected' : ''}>5000</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="control">
-                            <div class="buttons">
-                                <button class="button is-primary is-small" onclick="event.stopPropagation(); previousChunk()" ${currentChunkIndex === 0 ? 'disabled' : ''}>
-                                    ← Previous
-                                </button>
-                                <button class="button is-primary is-small" onclick="event.stopPropagation(); nextChunk()" ${currentChunkIndex >= totalChunks - 1 ? 'disabled' : ''}>
-                                    Next →
-                                </button>
-                                <button class="button is-info is-small" onclick="event.stopPropagation(); copyToClipboard(window.currentChunkData)">
-                                    Copy Chunk
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <progress class="progress is-primary is-small" value="${endLine}" max="${lines.length}">
-                    Chunk ${currentChunkIndex + 1} of ${totalChunks}
-                </progress>
-                <div class="json-content">${syntaxHighlight(chunkText)}</div>
-            </div>
-        `;
-    }
-    
-    function changeChunkSize(newSize) {
-        currentChunkSize = parseInt(newSize);
-        const lines = currentResourceData.jsonString.split('\n');
-        totalChunks = Math.ceil(lines.length / currentChunkSize);
-        
-        // Adjust current chunk index to stay roughly in the same area
-        const currentLine = currentChunkIndex * currentChunkSize;
-        currentChunkIndex = Math.floor(currentLine / currentChunkSize);
-        currentChunkIndex = Math.min(currentChunkIndex, totalChunks - 1);
-        
-        renderChunkedJson();
-    }
-    
-    function previousChunk() {
-        if (currentChunkIndex > 0) {
-            currentChunkIndex--;
-            renderChunkedJson();
-        }
-    }
-    
-    function nextChunk() {
-        if (currentChunkIndex < totalChunks - 1) {
-            currentChunkIndex++;
-            renderChunkedJson();
-        }
-    }
-    
-    
-    async function loadVirtualHostInSidePanel(routeConfiguration, virtualHost) {
-        document.getElementById('sidePanelTitle').textContent = `Virtual Host: ${virtualHost}`;
-        openSidePanel();
-        showLoading();
-        
-        try {
-            // Get current URL parameters to maintain context
-            const urlParams = new URLSearchParams(window.location.search);
-            const region = urlParams.get('region') || '';
-            const apiVersion = urlParams.get('api_version') || 'v2';
-            
-            // Build the fetch URL with current parameters
-            let fetchUrl = `/ui/resources/routes/${encodeURIComponent(routeConfiguration)}/${encodeURIComponent(virtualHost)}`;
-            const params = new URLSearchParams();
-            if (region) params.append('region', region);
-            params.append('api_version', apiVersion);
-            
-            if (params.toString()) {
-                fetchUrl += '?' + params.toString();
-            }
-            
-            const response = await fetch(fetchUrl, {
-                credentials: 'same-origin' // Include cookies in the request
-            });
-            
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-            
-            const data = await response.json();
-            const jsonString = JSON.stringify(data, null, 2);
-            const sizeKB = (new Blob([jsonString]).size / 1024).toFixed(1);
-            const sizeMB = sizeKB / 1024;
-            
-            // Store the data globally
-            currentResourceData = {
-                data: data,
-                jsonString: jsonString,
-                sizeKB: sizeKB,
-                sizeMB: sizeMB
-            };
-            
-            // Check if the JSON is large and show warning/chunked view
-            const threshold = localStorage.getItem('jsonSizeThreshold') || 0.5; // MB
-            if (sizeMB > threshold) {
-                // Check user preference for auto-chunking
-                const autoChunk = localStorage.getItem('autoChunkLargeJson') === 'true';
-                if (autoChunk) {
-                    showChunkedJson();
-                } else {
-                    showLargeJsonWarning('Virtual Host', virtualHost);
-                }
-            } else {
-                showFullJson();
-            }
-        } catch (error) {
-            console.error('Error loading virtual host:', error);
-            showError(error.message);
-        }
-    }
-    
-    // Close side panel when clicking outside of it
-    document.addEventListener('click', function(event) {
-        const sidePanel = document.getElementById('sidePanel');
-        const backdrop = document.getElementById('sidePanelBackdrop');
-        const isClickInsidePanel = sidePanel.contains(event.target);
-        const isResourceLink = event.target.closest('.panel-block');
-        const isBackdropClick = event.target === backdrop;
-        
-        if ((isBackdropClick || (!isClickInsidePanel && !isResourceLink)) && sidePanel.classList.contains('is-active')) {
-            closeSidePanel();
-        }
-    });
-    
-    // Keyboard shortcuts
-    document.addEventListener('keydown', function(event) {
-        if (event.key === 'Escape') {
-            const sidePanel = document.getElementById('sidePanel');
-            if (sidePanel.classList.contains('is-active')) {
-                closeSidePanel();
-            }
-        }
-    });
-    
-    const perPage = 10;
-    let currentPage = 1;
-
-    function filter_results(id) {
-        const input = document.getElementById(id);
-        const filter = input.value.toLowerCase();
-
-        filteredResources = resources.filter((res) => {
-            const name = res.name || "";
-            return name.toLowerCase().includes(filter);
-        });
-
-        currentPage = 1;
-        renderPage(currentPage);
-        
-        // Update the resource count display
-        const countElement = document.getElementById('resource-count');
-        if (countElement) {
-            const count = filteredResources.length;
-            const plural = count === 1 ? 'resource' : 'resources';
-            countElement.textContent = `${count} ${plural}`;
-        }
-    }
-
-    function renderPage(page) {
-        const container = document.getElementById('resource-container');
-        container.innerHTML = '';
-
-        const start = (page - 1) * perPage;
-        const end = start + perPage;
-        const pageItems = filteredResources.slice(start, end);
-
-        for (const resource of pageItems) {
-          const name = resource.name;
-          const item = document.createElement('a');
-          item.className = 'panel-block has-text-weight-medium';
-          item.href = '#';
-          item.onclick = (e) => {
-              e.preventDefault();
-              loadResourceInSidePanel('{{ resource_type }}', name);
-          };
-          item.innerHTML = `
-              <span class="panel-icon">
-                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
-              </span>
-              ${name}
-          `;
-          container.appendChild(item);
-        }
-        renderPaginationControls();
-    }
-
-    function renderPaginationControls() {
-        const totalPages = Math.ceil(filteredResources.length / perPage);
-        const pageList = document.getElementById('page-numbers');
-        pageList.innerHTML = '';
-
-        for (let i = 1; i <= totalPages; i++) {
-          const li = document.createElement('li');
-          const a = document.createElement('a');
-          a.className = 'pagination-link';
-          if (i === currentPage) a.classList.add('is-current');
-          a.textContent = i;
-          a.addEventListener('click', () => {
-            currentPage = i;
-            renderPage(currentPage);
-          });
-          li.appendChild(a);
-          pageList.appendChild(li);
-        }
-
-        document.getElementById('prev-btn').disabled = currentPage === 1;
-        document.getElementById('next-btn').disabled = currentPage === totalPages;
-    }
-
-    document.getElementById('prev-btn').addEventListener('click', () => {
-    if (currentPage > 1) {
-      currentPage--;
-      renderPage(currentPage);
-    }
-    });
-
-    document.getElementById('next-btn').addEventListener('click', () => {
-    const totalPages = Math.ceil(filteredResources.length / perPage);
-    if (currentPage < totalPages) {
-      currentPage++;
-      renderPage(currentPage);
-    }
-    });
-    renderPage(currentPage);
+      document.addEventListener('DOMContentLoaded', function() {
+        const resourceNames = [
+          {% for resource in resources %}
+            "{{ resource.name or resource.cluster_name or 'Unknown' }}"{% if not loop.last %},{% endif %}
+          {% endfor %}
+        ];
+        if (typeof initializeResources === 'function') {
+          initializeResources(resourceNames, '{{ resource_type }}');
+        }
+      });
+      function setEnvoyVersion(version) {
+        document.cookie = `envoy_version=${version}; path=/ui/resources/; max-age=31536000`;
+        window.location.reload();
+      }
     </script>
 </div>
 {% endblock %}