Envoy Configuration Dashboard

- × - -

- + -

Add/Update Generic Secret

@@ -327,13 +334,14 @@ which allows the parser to recognize your configuration.

- ✅ Allow Upsert: If a secret with the same name exists, update its configuration instead of failing. + ✅ Allow Upsert: If a secret with the same name exists, update its configuration instead + of failing.

- Secret YAML: + Secret YAML:

Paste the full YAML configuration for the new reusable extension config(s) - below and submit. This is typically used to define **Lua filters** or **WASM extensions** that are referenced by multiple listeners/routes. + below and submit. This is typically used to define **Lua filters** or **WASM extensions** that are + referenced by multiple listeners/routes. You can provide a single config object, or a list of configs under the resources key to load multiple at once:

@@ -368,14 +377,16 @@ which allows the parser to recognize your configuration.

- ✅ Allow Upsert: If a config with the same name exists, update its configuration instead of failing. + ✅ Allow Upsert: If a config with the same name exists, update its configuration instead + of failing.

- ExtensionConfig YAML: - + ExtensionConfig YAML: +

- - - - - - - - - \ No newline at end of file diff --git a/static/js/api/baseApi.js b/static/js/api/baseApi.js new file mode 100644 index 0000000..5b45cfe --- /dev/null +++ b/static/js/api/baseApi.js @@ -0,0 +1,35 @@ +// static/js/api/baseApi.js +import { API_BASE_URL } from '../store/configStore.js'; + +export async function request(endpoint, options = {}) { + const url = `${API_BASE_URL}${endpoint}`; + const defaultHeaders = { + 'Content-Type': 'application/json', + }; + + const config = { + ...options, + headers: { + ...defaultHeaders, + ...options.headers, + }, + }; + + try { + const response = await fetch(url, config); + if (!response.ok) { + const errorBody = await response.text(); + throw new Error(`HTTP Error ${response.status}: ${errorBody}`); + } + + // Return text if format is yaml, otherwise try to parse JSON + const contentType = response.headers.get('content-type'); + if (contentType && contentType.includes('application/json')) { + return await response.json(); + } + return await response.text(); + } catch (error) { + console.error(`API Request failed for ${endpoint}:`, error); + throw error; + } +} diff --git a/static/js/api/clustersService.js b/static/js/api/clustersService.js new file mode 100644 index 0000000..44422b8 --- /dev/null +++ b/static/js/api/clustersService.js @@ -0,0 +1,29 @@ +// static/js/api/clustersService.js +import { request } from './baseApi.js'; + +export async function fetchClusters() { + return await request('/list-clusters'); +} + +export async function toggleClusterStatus(name, action) { + let endpoint = (action === 'remove') ? '/remove-cluster' : `/${action}-cluster`; + return await request(endpoint, { + method: 'POST', + body: JSON.stringify({ name }) + }); +} + +export async function addCluster(yaml, upsert = false) { + const payload = { yaml }; + if (upsert) { + payload.upsert = true; + } + return await request('/add-cluster', { + method: 'POST', + body: JSON.stringify(payload) + }); +} + +export async function fetchClusterYaml(name) { + return await request(`/get-cluster?name=${name}&format=yaml`); +} diff --git a/static/js/api/extensionConfigsService.js b/static/js/api/extensionConfigsService.js new file mode 100644 index 0000000..90fe841 --- /dev/null +++ b/static/js/api/extensionConfigsService.js @@ -0,0 +1,35 @@ +// static/js/api/extensionConfigsService.js +import { request } from './baseApi.js'; + +export async function fetchExtensionConfigs() { + return await request('/list-extension-configs'); +} + +export async function toggleExtensionConfigStatus(name, action) { + return await request(`/${action}-extension-config`, { + method: 'POST', + body: JSON.stringify({ name }) + }); +} + +export async function addExtensionConfig(yaml, upsert = false) { + const payload = { yaml }; + if (upsert) { + payload.upsert = true; + } + return await request('/add-extension-config', { + method: 'POST', + body: JSON.stringify(payload) + }); +} + +export async function removeExtensionConfig(name) { + return await request('/remove-extension-config', { + method: 'POST', + body: JSON.stringify({ name }) + }); +} + +export async function fetchExtensionConfigYaml(name) { + return await request(`/get-extension-config?name=${name}&format=yaml`); +} diff --git a/static/js/api/listenersService.js b/static/js/api/listenersService.js new file mode 100644 index 0000000..9e901fd --- /dev/null +++ b/static/js/api/listenersService.js @@ -0,0 +1,53 @@ +// static/js/api/listenersService.js +import { request } from './baseApi.js'; + +export async function fetchListeners() { + return await request('/list-listeners'); +} + +export async function toggleListenerStatus(name, action) { + return await request(`/${action}-listener`, { + method: 'POST', + body: JSON.stringify({ name }) + }); +} + +export async function addListener(yaml, upsert = false) { + const payload = { yaml }; + if (upsert) { + payload.upsert = true; + } + return await request('/add-listener', { + method: 'POST', + body: JSON.stringify(payload) + }); +} + +export async function appendFilterChain(listenerName, yaml, upsert = false) { + const payload = { listener_name: listenerName, yaml }; + if (upsert) { + payload.upsert = true; + } + return await request('/append-filter-chain', { + method: 'POST', + body: JSON.stringify(payload) + }); +} + +export async function removeFilterChain(listenerName, domainName) { + return await request('/remove-filter-chain', { + method: 'POST', + body: JSON.stringify({ listener_name: listenerName, domain_name: domainName }) + }); +} + +export async function removeListener(name) { + return await request('/remove-listener', { + method: 'POST', + body: JSON.stringify({ name }) + }); +} + +export async function fetchListenerYaml(name) { + return await request(`/get-listener?name=${name}&format=yaml`); +} diff --git a/static/js/api/secretsService.js b/static/js/api/secretsService.js new file mode 100644 index 0000000..218b6de --- /dev/null +++ b/static/js/api/secretsService.js @@ -0,0 +1,55 @@ +// static/js/api/secretsService.js +import { request } from './baseApi.js'; + +export async function fetchSecrets() { + return await request('/list-secrets'); +} + +export async function toggleSecretStatus(name, action) { + return await request(`/${action}-secret`, { + method: 'POST', + body: JSON.stringify({ name }) + }); +} + +export async function addSecret(yaml, upsert = false) { + const payload = { yaml }; + if (upsert) { + payload.upsert = true; + } + return await request('/add-secret', { + method: 'POST', + body: JSON.stringify(payload) + }); +} + +export async function removeSecret(name) { + return await request('/remove-secret', { + method: 'POST', + body: JSON.stringify({ name }) + }); +} + +export async function manualRenewCertificate(domain) { + return await request('/renew-certificate', { + method: 'POST', + body: JSON.stringify({ domain }) + }); +} + +export async function updateRotationSettings(secretName, domain, enabled, renewBefore) { + const payload = { + secret_name: secretName, + associated_domain: domain, + rotation_enabled: enabled, + renew_before: `${renewBefore * 24}h` + }; + return await request('/update-rotation-settings', { + method: 'POST', + body: JSON.stringify(payload) + }); +} + +export async function fetchSecretYaml(name) { + return await request(`/get-secret?name=${name}&format=yaml`); +} diff --git a/static/js/app.js b/static/js/app.js new file mode 100644 index 0000000..9ac83f0 --- /dev/null +++ b/static/js/app.js @@ -0,0 +1,69 @@ +// static/js/app.js +import { CONSISTENCY_POLL_INTERVAL } from './store/configStore.js'; +import { checkConsistency, showConsistencyModal, resolveConsistency } from './components/consistency.js'; +import { renderClustersTable } from './components/clustersTable.js'; +import { renderListenersTable } from './components/listenersTable.js'; +import { renderSecretsTable } from './components/secretsTable.js'; +import { renderExtensionConfigsTable } from './components/extensionConfigsTable.js'; +import { showModal, hideModal, setupEscKeyHandler, setupBackdropClickHandler } from './components/modals.js'; +import { copyToClipboard, downloadYaml } from './components/configActions.js'; +import { submitCluster, submitListener, submitFilterChain, submitSecret, submitExtensionConfig } from './components/resourceForms.js'; + +function switchTab(modalContent, tabName) { + modalContent.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); + modalContent.querySelectorAll('.code-block').forEach(content => content.style.display = 'none'); + const activeBtn = modalContent.querySelector(`.tab-button[data-tab="${tabName}"]`); + const isSecret = modalContent.closest('#secretConfigModal'); + const contentIdPrefix = isSecret ? 'secret-modal' : 'modal'; + const activeContent = document.getElementById(`${contentIdPrefix}-${tabName}-content`); + if (activeBtn) activeBtn.classList.add('active'); + if (activeContent) activeContent.style.display = 'block'; +} + +window.switchTab = switchTab; + +// Consolidate everything into a global object if needed for inline HTML compatibility, +// but better to remove inline handlers. I will do both for now during transition. + +async function loadAllData() { + await Promise.all([ + renderListenersTable(), + renderClustersTable(), + renderSecretsTable(), + renderExtensionConfigsTable() + ]); +} + +// Attach to window for the remaining inline handlers in index.html during transition +window.loadAllData = loadAllData; +window.checkConsistency = checkConsistency; +window.showConsistencyModal = showConsistencyModal; +window.resolveConsistency = resolveConsistency; +window.hideModal = (id) => hideModal(id); +window.showModal = (id) => showModal(id); +window.downloadYaml = downloadYaml; +window.copyToClipboard = copyToClipboard; + +// Forms +window.submitNewCluster = submitCluster; +window.submitNewListener = submitListener; +window.submitNewFilterChain = submitFilterChain; +window.submitNewSecret = submitSecret; +window.submitNewExtensionConfig = submitExtensionConfig; + +// Modal launchers (Add/Update) +window.showAddListenerModal = () => showModal('addListenerModal'); +window.showAddClusterModal = () => showModal('addClusterModal'); +window.showAddSecretModal = () => showModal('addSecretModal'); +window.showAddExtensionConfigModal = () => showModal('addExtensionConfigModal'); +window.showAddFilterChainModal = (name) => { + document.getElementById('add-fc-listener-name').value = name; + showModal('addFilterChainModal'); +}; + +// Initial load +window.onload = () => { + loadAllData(); + checkConsistency(); + setInterval(checkConsistency, CONSISTENCY_POLL_INTERVAL); +}; diff --git a/static/js/components/clustersTable.js b/static/js/components/clustersTable.js new file mode 100644 index 0000000..4d0ea90 --- /dev/null +++ b/static/js/components/clustersTable.js @@ -0,0 +1,134 @@ +// static/js/components/clustersTable.js +import { configStore, cleanupConfigStore } from '../store/configStore.js'; +import { fetchClusters, toggleClusterStatus, fetchClusterYaml } from '../api/clustersService.js'; +import { setupConfigModal } from './modals.js'; + +function getClusterEndpointDetails(cluster) { + try { + const endpoints = cluster.load_assignment?.endpoints; + if (!endpoints?.length) return '(No Endpoints)'; + const lbEndpoints = endpoints[0].lb_endpoints; + if (!lbEndpoints?.length) return '(No LB Endpoints)'; + + const endpointObj = lbEndpoints[0].HostIdentifier?.Endpoint || lbEndpoints[0].endpoint; + const address = endpointObj.address.Address.SocketAddress.address; + const port = endpointObj.address.Address.SocketAddress.PortSpecifier.PortValue; + + const tls = cluster.transport_socket ? 'TLS/SSL' : ''; + return `${address}:${port} ${tls}`; + } catch { + return '(Config Error)'; + } +} + +export async function renderClustersTable() { + const tableBody = document.getElementById('cluster-table-body'); + if (!tableBody) return; + + tableBody.innerHTML = 'Loading...'; + + try { + const clusterResponse = await fetchClusters(); + const allClusters = [ + ...(clusterResponse.enabled || []).map(c => ({ ...c, status: 'Enabled', configData: c })), + ...(clusterResponse.disabled || []).map(c => ({ ...c, status: 'Disabled', configData: c })) + ]; + + if (!allClusters.length) { + tableBody.innerHTML = 'No clusters found.'; + configStore.clusters = {}; + return; + } + + cleanupConfigStore(); + configStore.clusters = allClusters.reduce((acc, c) => { + const existingYaml = acc[c.name]?.yaml; + acc[c.name] = { ...c.configData, yaml: existingYaml }; + return acc; + }, configStore.clusters); + + tableBody.innerHTML = ''; + allClusters.forEach(cluster => { + const row = tableBody.insertRow(); + if (cluster.status === 'Disabled') row.classList.add('disabled-row'); + + const clusterNameCell = row.insertCell(); + const clusterLink = document.createElement('a'); + clusterLink.href = '#'; + clusterLink.innerHTML = `${cluster.name}`; + clusterLink.addEventListener('click', (e) => { + e.preventDefault(); + showClusterConfig(cluster.name); + }); + clusterNameCell.appendChild(clusterLink); + + row.insertCell().textContent = cluster.status; + row.insertCell().innerHTML = getClusterEndpointDetails(cluster); + row.insertCell().textContent = `${cluster.connect_timeout?.seconds || 0}.${(cluster.connect_timeout?.nanos / 1e6 || 0).toFixed(0).padStart(3, '0')}s`; + + const actionsCell = row.insertCell(); + if (cluster.status === 'Enabled') { + const disableBtn = document.createElement('button'); + disableBtn.className = 'action-button disable'; + disableBtn.textContent = 'Disable'; + disableBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`Are you sure you want to DISABLE cluster: ${cluster.name}?`)) { + handleStatusToggle(cluster.name, 'disable'); + } + }; + actionsCell.appendChild(disableBtn); + } else { + const enableBtn = document.createElement('button'); + enableBtn.className = 'action-button enable'; + enableBtn.textContent = 'Enable'; + enableBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`Are you sure you want to ENABLE cluster: ${cluster.name}?`)) { + handleStatusToggle(cluster.name, 'enable'); + } + }; + actionsCell.appendChild(enableBtn); + + const removeBtn = document.createElement('button'); + removeBtn.className = 'action-button remove'; + removeBtn.textContent = 'Remove'; + removeBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`⚠️ WARNING: Are you absolutely sure you want to PERMANENTLY REMOVE cluster: ${cluster.name}? This action cannot be undone.`)) { + handleStatusToggle(cluster.name, 'remove'); + } + }; + actionsCell.appendChild(removeBtn); + } + }); + } catch (error) { + tableBody.innerHTML = `🚨 Cluster Error: ${error.message}`; + } +} + +async function handleStatusToggle(name, action) { + try { + await toggleClusterStatus(name, action); + cleanupConfigStore(); + renderClustersTable(); + } catch (error) { + alert(`Failed to ${action} cluster '${name}'. Error: ${error.message}`); + } +} + +async function showClusterConfig(name) { + const config = configStore.clusters[name]; + if (!config) return; + + let yamlData = config.yaml || 'Loading YAML...'; + if (yamlData === 'Loading YAML...') { + try { + yamlData = await fetchClusterYaml(name); + configStore.clusters[name].yaml = yamlData; + } catch (error) { + yamlData = `Error fetching YAML: ${error.message}`; + } + } + setupConfigModal(`Full Config for Cluster: ${name}`, config, yamlData); +} diff --git a/static/js/components/configActions.js b/static/js/components/configActions.js new file mode 100644 index 0000000..2e1976d --- /dev/null +++ b/static/js/components/configActions.js @@ -0,0 +1,50 @@ +// static/js/components/configActions.js + +export function copyToClipboard() { + const yamlContent = document.getElementById('modal-yaml-content').textContent; + const jsonContent = document.getElementById('modal-json-content').textContent; + + // Determine which tab is active + const yamlActive = document.getElementById('modal-yaml-content').style.display !== 'none'; + const contentToCopy = yamlActive ? yamlContent : jsonContent; + + if (!contentToCopy || contentToCopy.trim() === '') { + alert("No content available to copy."); + return; + } + + navigator.clipboard.writeText(contentToCopy).then(() => { + const btn = document.getElementById('copy-config-button'); + const originalText = btn.textContent; + btn.textContent = '✅ Copied!'; + setTimeout(() => { + btn.textContent = originalText; + }, 2000); + }).catch(err => { + console.error('Failed to copy: ', err); + alert('Failed to copy to clipboard.'); + }); +} + +export function downloadYaml() { + const yamlContent = document.getElementById('modal-yaml-content').textContent; + if (!yamlContent || yamlContent.trim() === '' || yamlContent === 'Loading YAML...') { + alert("No YAML content available to download."); + return; + } + + const title = document.getElementById('modal-title').textContent + .replace(/\s+/g, '_') + .replace(/[^\w\-]/g, ''); + + const blob = new Blob([yamlContent], { type: 'text/yaml' }); + const url = URL.createObjectURL(blob); + + const a = document.createElement('a'); + a.href = url; + a.download = title ? `${title}.yaml` : 'config.yaml'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); +} diff --git a/static/js/components/consistency.js b/static/js/components/consistency.js new file mode 100644 index 0000000..38ab62b --- /dev/null +++ b/static/js/components/consistency.js @@ -0,0 +1,66 @@ +// static/js/components/consistency.js +import { API_BASE_URL, inconsistencyData, setInconsistencyData, CONSISTENCY_POLL_INTERVAL } from '../store/configStore.js'; +import { request } from '../api/baseApi.js'; +import { showModal, hideModal } from './modals.js'; + +export async function checkConsistency() { + const button = document.getElementById('consistency-button'); + if (!button) return; + + const hasPreviousConflict = inconsistencyData !== null; + + button.textContent = 'Checking...'; + button.classList.add('loading'); + button.classList.remove('consistent', 'inconsistent', 'error', 'loading'); // Reset before applying new state + + try { + const data = await request('/is-consistent'); + const consistencyStatus = data.consistent; + const isNewConflict = consistencyStatus.inconsistent === true; + const stateChanged = isNewConflict !== hasPreviousConflict; + + if (isNewConflict) { + button.textContent = '🚨 CONFLICT'; + button.classList.add('inconsistent'); + button.disabled = false; + setInconsistencyData(consistencyStatus); + } else { + button.textContent = '✅ Consistent'; + button.classList.add('consistent'); + button.disabled = true; + setInconsistencyData(null); + hideModal('consistencyModal'); + } + } catch (error) { + button.classList.add('error'); + button.textContent = '❌ Error'; + button.disabled = true; + setInconsistencyData(null); + console.error("Consistency check failed:", error); + } +} + +export function showConsistencyModal() { + if (!inconsistencyData || inconsistencyData.inconsistent === false) return; + + const cacheOnly = inconsistencyData['cache-only'] || {}; + const dbOnly = inconsistencyData['db-only'] || {}; + + document.getElementById('cache-only-count').textContent = Object.keys(cacheOnly).length; + document.getElementById('cache-only-data').textContent = JSON.stringify(cacheOnly, null, 2); + + document.getElementById('db-only-count').textContent = Object.keys(dbOnly).length; + document.getElementById('db-only-data').textContent = JSON.stringify(dbOnly, null, 2); + + showModal('consistencyModal'); +} + +export async function resolveConsistency(strategy) { + try { + await request(`/resolve-consistency?strategy=${strategy}`, { method: 'POST' }); + alert(`Consistency resolution (${strategy}) successful.`); + checkConsistency(); + } catch (error) { + alert(`Failed to resolve consistency. Error: ${error.message}`); + } +} diff --git a/static/js/components/extensionConfigsTable.js b/static/js/components/extensionConfigsTable.js new file mode 100644 index 0000000..09d86ce --- /dev/null +++ b/static/js/components/extensionConfigsTable.js @@ -0,0 +1,119 @@ +// static/js/components/extensionConfigsTable.js +import { configStore, cleanupConfigStore } from '../store/configStore.js'; +import { fetchExtensionConfigs, toggleExtensionConfigStatus, removeExtensionConfig, fetchExtensionConfigYaml } from '../api/extensionConfigsService.js'; +import { setupConfigModal } from './modals.js'; + +export async function renderExtensionConfigsTable() { + const tableBody = document.getElementById('extensionconfig-table-body'); + if (!tableBody) return; + + tableBody.innerHTML = 'Loading...'; + + try { + const configResponse = await fetchExtensionConfigs(); + const allConfigs = [ + ...(configResponse.enabled || []).map(c => ({ ...c, status: 'Enabled', configData: c })), + ...(configResponse.disabled || []).map(c => ({ ...c, status: 'Disabled', configData: c })) + ]; + + if (!allConfigs.length) { + tableBody.innerHTML = 'No matches found.'; + configStore.extension_configs = {}; + return; + } + + cleanupConfigStore(); + configStore.extension_configs = allConfigs.reduce((acc, c) => { + const existing = acc[c.name] || {}; + acc[c.name] = { ...c.configData, yaml: existing.yaml }; + return acc; + }, configStore.extension_configs); + + tableBody.innerHTML = ''; + allConfigs.forEach(config => { + const row = tableBody.insertRow(); + if (config.status === 'Disabled') row.classList.add('disabled-row'); + + const nameCell = row.insertCell(); + const nameLink = document.createElement('a'); + nameLink.href = '#'; + nameLink.innerHTML = `${config.name}`; + nameLink.onclick = (e) => { + e.preventDefault(); + showExtensionConfig(config.name); + }; + nameCell.appendChild(nameLink); + + row.insertCell().textContent = config.status; + row.insertCell().textContent = config.typed_config?.['@type'] || 'N/A'; + + const actionsCell = row.insertCell(); + if (config.status === 'Enabled') { + const disableBtn = document.createElement('button'); + disableBtn.className = 'action-button disable'; + disableBtn.textContent = 'Disable'; + disableBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`Are you sure you want to DISABLE config: ${config.name}?`)) { + handleStatusToggle(config.name, 'disable'); + } + }; + actionsCell.appendChild(disableBtn); + } else { + const enableBtn = document.createElement('button'); + enableBtn.className = 'action-button enable'; + enableBtn.textContent = 'Enable'; + enableBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`Are you sure you want to ENABLE config: ${config.name}?`)) { + handleStatusToggle(config.name, 'enable'); + } + }; + actionsCell.appendChild(enableBtn); + + const removeBtn = document.createElement('button'); + removeBtn.className = 'action-button remove'; + removeBtn.textContent = 'Remove'; + removeBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`⚠️ WARNING: Are you absolutely sure you want to PERMANENTLY REMOVE config: ${config.name}? This action cannot be undone.`)) { + handleStatusToggle(config.name, 'remove'); + } + }; + actionsCell.appendChild(removeBtn); + } + }); + } catch (error) { + tableBody.innerHTML = `🚨 ExtensionConfig Error: ${error.message}`; + } +} + +async function handleStatusToggle(name, action) { + try { + if (action === 'remove') { + await removeExtensionConfig(name); + } else { + await toggleExtensionConfigStatus(name, action); + } + cleanupConfigStore(); + renderExtensionConfigsTable(); + } catch (error) { + alert(`Failed to ${action} config '${name}'. Error: ${error.message}`); + } +} + +async function showExtensionConfig(name) { + const config = configStore.extension_configs[name]; + if (!config) return; + + let yamlData = config.yaml || 'Loading YAML...'; + if (yamlData === 'Loading YAML...') { + try { + yamlData = await fetchExtensionConfigYaml(name); + configStore.extension_configs[name].yaml = yamlData; + } catch (error) { + yamlData = `Error fetching YAML: ${error.message}`; + } + } + setupConfigModal(`Full Config for ExtensionConfig: ${name}`, config, yamlData); +} diff --git a/static/js/components/listenersTable.js b/static/js/components/listenersTable.js new file mode 100644 index 0000000..148a782 --- /dev/null +++ b/static/js/components/listenersTable.js @@ -0,0 +1,263 @@ +// static/js/components/listenersTable.js +import { configStore, cleanupConfigStore } from '../store/configStore.js'; +import { fetchListeners, toggleListenerStatus, removeListener, fetchListenerYaml, removeFilterChain } from '../api/listenersService.js'; +import { setupConfigModal, showModal } from './modals.js'; +import { extractFilterChainByDomain, dumpYaml } from '../utils/yamlUtils.js'; + +function getDomainRouteTable(filterChains, listenerName) { + if (!filterChains || filterChains.length === 0) return 'N/A'; + + const listenerStore = configStore.listeners[listenerName] || {}; + listenerStore.filterChains = filterChains; + configStore.listeners[listenerName] = listenerStore; + + const domainConfigs = filterChains.map((chain, index) => { + const domains = chain.filter_chain_match?.server_names || ["(default)"]; + const filters = chain.filters?.map(f => f.name.replace(/^envoy\.filters\./, '')) || []; + const routeType = filters.some(f => f.includes('http_connection_manager')) ? 'HTTP' : 'TCP'; + + const allDomainsTitle = domains.join(', '); + const memoryKey = `${listenerName}_${index}`; + + if (!configStore.filterChainDomains) { + configStore.filterChainDomains = {}; + } + configStore.filterChainDomains[memoryKey] = domains; + + const item = document.createElement('div'); + item.className = 'domain-config-item'; + + const header = document.createElement('div'); + header.className = 'domain-header'; + + const link = document.createElement('div'); + link.className = 'domain-name-link'; + link.textContent = allDomainsTitle; + link.addEventListener('click', () => showDomainConfig(listenerName, index, allDomainsTitle)); + + const filterList = document.createElement('div'); + filterList.className = 'filter-list'; + filters.forEach(f => { + const badge = document.createElement('span'); + badge.className = 'filter-badge'; + badge.textContent = f; + filterList.appendChild(badge); + }); + + header.appendChild(link); + header.appendChild(filterList); + + const routeTypeDisplay = document.createElement('div'); + routeTypeDisplay.className = 'route-type-display'; + routeTypeDisplay.innerHTML = `${routeType} Route `; + + const removeBtn = document.createElement('button'); + removeBtn.className = 'action-button remove-chain-button'; + removeBtn.title = `Remove Filter Chain for ${allDomainsTitle}`; + removeBtn.textContent = 'Remove Chain'; + removeBtn.addEventListener('click', (e) => { + e.stopPropagation(); + handleRemoveFilterChain(listenerName, domains); + }); + + routeTypeDisplay.appendChild(removeBtn); + item.appendChild(header); + item.appendChild(routeTypeDisplay); + + return item.outerHTML; + }); + + return `

${domainConfigs.join('')}

`; +} + +async function showDomainConfig(listenerName, chainIndex, allDomainsTitle) { + const listenerConfig = configStore.listeners[listenerName]; + if (!listenerConfig || !listenerConfig.filterChains || !listenerConfig.filterChains[chainIndex]) return; + + const jsonData = listenerConfig.filterChains[chainIndex]; + let fullListenerYaml = listenerConfig.yaml || 'Loading YAML...'; + + if (fullListenerYaml === 'Loading YAML...') { + try { + fullListenerYaml = await fetchListenerYaml(listenerName); + configStore.listeners[listenerName].yaml = fullListenerYaml; + } catch (error) { + fullListenerYaml = `Error fetching YAML: ${error.message}`; + } + } + + const domainName = jsonData.filter_chain_match?.server_names?.[0] || "*"; + let yamlData; + if (fullListenerYaml.startsWith('Error')) { + yamlData = fullListenerYaml; + } else { + yamlData = extractFilterChainByDomain(fullListenerYaml, domainName); + if (yamlData === null) { + try { + yamlData = dumpYaml(jsonData); + } catch (e) { + yamlData = `Could not extract or dump YAML. Error: ${e.message}`; + } + } + } + + const modalTitle = `Filter Chain for Domains: ${allDomainsTitle} (${listenerName})`; + setupConfigModal(modalTitle, jsonData, yamlData, 'json'); +} + +async function handleRemoveFilterChain(listenerName, domains) { + const domainList = domains.join(', '); + const isDefault = domains.length === 1 && domains[0] === '(default)'; + const confirmMsg = isDefault + ? `⚠️ WARNING: You are about to remove the DEFAULT filter chain for listener: ${listenerName}. This will likely break the listener. Continue?` + : `Are you sure you want to REMOVE the filter chain for domains: ${domainList} on listener: ${listenerName}?`; + + if (!confirm(confirmMsg)) return; + + try { + await removeFilterChain(listenerName, domains); + cleanupConfigStore(); + renderListenersTable(); + } catch (error) { + alert(`Failed to remove filter chain. Error: ${error.message}`); + } +} + +function getListenerRowData(listener) { + const socketAddr = listener.address?.Address?.SocketAddress; + const address = socketAddr?.address || 'N/A'; + const port = socketAddr?.PortSpecifier?.PortValue || 'N/A'; + const tlsIndicator = listener.filter_chains?.some(c => c.transport_socket) || listener.listener_filters?.some(f => f.name.includes('tls_inspector')) + ? 'TLS' + : ''; + + return { + name: listener.name, + address: `${address}:${port} ${tlsIndicator}`, + domains: getDomainRouteTable(listener.filter_chains, listener.name), + status: listener.status || 'Enabled' + }; +} + +export async function renderListenersTable() { + const tableBody = document.getElementById('listener-table-body'); + if (!tableBody) return; + + tableBody.innerHTML = 'Loading...'; + + try { + const listenerResponse = await fetchListeners(); + const allListeners = [ + ...(listenerResponse.enabled || []).map(l => ({ ...l, status: 'Enabled', configData: l })), + ...(listenerResponse.disabled || []).map(l => ({ ...l, status: 'Disabled', configData: l })) + ]; + + if (!allListeners.length) { + tableBody.innerHTML = 'No listeners found.'; + configStore.listeners = {}; + return; + } + + configStore.listeners = allListeners.reduce((acc, l) => { + const existing = acc[l.name] || {}; + acc[l.name] = { ...l.configData, yaml: existing.yaml, filterChains: existing.filterChains }; + return acc; + }, configStore.listeners); + + tableBody.innerHTML = ''; + allListeners.forEach(listener => { + const rowData = getListenerRowData(listener); + const row = tableBody.insertRow(); + if (rowData.status === 'Disabled') row.classList.add('disabled-row'); + + const nameCell = row.insertCell(); + const nameLink = document.createElement('a'); + nameLink.href = '#'; + nameLink.innerHTML = `${rowData.name}`; + nameLink.onclick = (e) => { + e.preventDefault(); + showListenerConfig(listener.name); + }; + nameCell.appendChild(nameLink); + + row.insertCell().textContent = rowData.status; + row.insertCell().innerHTML = rowData.address; + row.insertCell().innerHTML = rowData.domains; + + const actionsCell = row.insertCell(); + + const addBtn = document.createElement('button'); + addBtn.className = 'action-button add'; + addBtn.textContent = 'Add/Update'; + addBtn.onclick = () => window.showAddFilterChainModal(listener.name); + actionsCell.appendChild(addBtn); + + if (rowData.status === 'Enabled') { + const disableBtn = document.createElement('button'); + disableBtn.className = 'action-button disable'; + disableBtn.textContent = 'Disable'; + disableBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`Are you sure you want to DISABLE listener: ${listener.name}?`)) { + handleStatusToggle(listener.name, 'disable'); + } + }; + actionsCell.appendChild(disableBtn); + } else { + const enableBtn = document.createElement('button'); + enableBtn.className = 'action-button enable'; + enableBtn.textContent = 'Enable'; + enableBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`Are you sure you want to ENABLE listener: ${listener.name}?`)) { + handleStatusToggle(listener.name, 'enable'); + } + }; + actionsCell.appendChild(enableBtn); + + const removeBtn = document.createElement('button'); + removeBtn.className = 'action-button remove'; + removeBtn.textContent = 'Remove'; + removeBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`⚠️ WARNING: Are you absolutely sure you want to PERMANENTLY REMOVE listener: ${listener.name}? This action cannot be undone.`)) { + handleStatusToggle(listener.name, 'remove'); + } + }; + actionsCell.appendChild(removeBtn); + } + }); + } catch (error) { + tableBody.innerHTML = `🚨 Listener Error: ${error.message}`; + } +} + +async function handleStatusToggle(name, action) { + try { + if (action === 'remove') { + await removeListener(name); + } else { + await toggleListenerStatus(name, action); + } + cleanupConfigStore(); + renderListenersTable(); + } catch (error) { + alert(`Failed to ${action} listener '${name}'. Error: ${error.message}`); + } +} + +async function showListenerConfig(name) { + const config = configStore.listeners[name]; + if (!config) return; + + let yamlData = config.yaml || 'Loading YAML...'; + if (yamlData === 'Loading YAML...') { + try { + yamlData = await fetchListenerYaml(name); + configStore.listeners[name].yaml = yamlData; + } catch (error) { + yamlData = `Error fetching YAML: ${error.message}`; + } + } + setupConfigModal(`Full Config for Listener: ${name}`, config, yamlData); +} diff --git a/static/js/components/modals.js b/static/js/components/modals.js new file mode 100644 index 0000000..687792f --- /dev/null +++ b/static/js/components/modals.js @@ -0,0 +1,45 @@ +// static/js/components/modals.js +import { switchTab } from '../global_legacy.js'; // Temporary link to legacy switchTab if needed, or refactor it + +export function showModal(modalId) { + const modal = document.getElementById(modalId); + if (modal) { + modal.style.display = 'block'; + } +} + +export function hideModal(modalId) { + const modal = document.getElementById(modalId); + if (modal) { + modal.style.display = 'none'; + } +} + +export function setupConfigModal(title, jsonData, yamlData, defaultTab = 'yaml') { + document.getElementById('modal-title').textContent = title; + document.getElementById('modal-json-content').textContent = JSON.stringify(jsonData, null, 2); + document.getElementById('modal-yaml-content').textContent = yamlData; + + const modalContent = document.getElementById('configModal')?.querySelector('.modal-content'); + if (modalContent && window.switchTab) { + window.switchTab(modalContent, defaultTab); + } + showModal('configModal'); +} + +export function setupEscKeyHandler(closeFunctions) { + window.addEventListener('keydown', (event) => { + if (event.key === 'Escape') { + closeFunctions.forEach(fn => fn()); + } + }); +} + +export function setupBackdropClickHandler(modalIdMap) { + window.addEventListener('click', (event) => { + if (event.target.classList.contains('modal')) { + const closeFn = modalIdMap[event.target.id]; + if (closeFn) closeFn(); + } + }); +} diff --git a/static/js/components/resourceForms.js b/static/js/components/resourceForms.js new file mode 100644 index 0000000..8b9a53a --- /dev/null +++ b/static/js/components/resourceForms.js @@ -0,0 +1,92 @@ +// static/js/components/resourceForms.js +import { cleanupConfigStore } from '../store/configStore.js'; +import { addCluster } from '../api/clustersService.js'; +import { addListener, appendFilterChain } from '../api/listenersService.js'; +import { addSecret } from '../api/secretsService.js'; +import { addExtensionConfig } from '../api/extensionConfigsService.js'; +import { renderClustersTable } from './clustersTable.js'; +import { renderListenersTable } from './listenersTable.js'; +import { renderSecretsTable } from './secretsTable.js'; +import { renderExtensionConfigsTable } from './extensionConfigsTable.js'; +import { hideModal } from './modals.js'; + +export async function submitCluster() { + const yaml = document.getElementById('add-cluster-yaml-input').value.trim(); + const upsert = document.getElementById('add-cluster-upsert-flag')?.checked; + if (!yaml) return alert('Please paste the cluster YAML configuration.'); + + try { + await addCluster(yaml, upsert); + alert('Cluster successfully added!'); + hideModal('addClusterModal'); + cleanupConfigStore(); + renderClustersTable(); + } catch (error) { + alert(`Failed to add cluster. Error: ${error.message}`); + } +} + +export async function submitListener() { + const yaml = document.getElementById('add-listener-yaml-input').value.trim(); + const upsert = document.getElementById('add-listener-upsert-flag')?.checked; + if (!yaml) return alert('Please paste the listener YAML configuration.'); + + try { + await addListener(yaml, upsert); + alert('Listener successfully added!'); + hideModal('addListenerModal'); + cleanupConfigStore(); + renderListenersTable(); + } catch (error) { + alert(`Failed to add listener. Error: ${error.message}`); + } +} + +export async function submitFilterChain() { + const listenerName = document.getElementById('add-fc-listener-name').value; + const yaml = document.getElementById('add-fc-yaml-input').value.trim(); + const upsert = document.getElementById('add-filter-chain-upsert-flag')?.checked; + if (!yaml) return alert('Please paste the filter chain YAML configuration.'); + + try { + await appendFilterChain(listenerName, yaml, upsert); + alert(`Successfully updated filter chain for '${listenerName}'.`); + hideModal('addFilterChainModal'); + cleanupConfigStore(); + renderListenersTable(); + } catch (error) { + alert(`Failed to append filter chain. Error: ${error.message}`); + } +} + +export async function submitSecret() { + const yaml = document.getElementById('add-secret-yaml-input').value.trim(); + const upsert = document.getElementById('add-secret-upsert-flag')?.checked; + if (!yaml) return alert('Please paste the secret YAML configuration.'); + + try { + await addSecret(yaml, upsert); + alert('Secret successfully added!'); + hideModal('addSecretModal'); + cleanupConfigStore(); + renderSecretsTable(); + } catch (error) { + alert(`Failed to add secret. Error: ${error.message}`); + } +} + +export async function submitExtensionConfig() { + const yaml = document.getElementById('add-extension-config-yaml-input').value.trim(); + const upsert = document.getElementById('add-extension-config-upsert-flag')?.checked; + if (!yaml) return alert('Please paste the ExtensionConfig YAML configuration.'); + + try { + await addExtensionConfig(yaml, upsert); + alert('ExtensionConfig successfully added!'); + hideModal('addExtensionConfigModal'); + cleanupConfigStore(); + renderExtensionConfigsTable(); + } catch (error) { + alert(`Failed to add ExtensionConfig. Error: ${error.message}`); + } +} diff --git a/static/js/components/secretsTable.js b/static/js/components/secretsTable.js new file mode 100644 index 0000000..07ebd77 --- /dev/null +++ b/static/js/components/secretsTable.js @@ -0,0 +1,121 @@ +// static/js/components/secretsTable.js +import { configStore, cleanupConfigStore } from '../store/configStore.js'; +import { fetchSecrets, toggleSecretStatus, removeSecret, fetchSecretYaml } from '../api/secretsService.js'; +import { setupConfigModal } from './modals.js'; + +export async function renderSecretsTable() { + const tableBody = document.getElementById('secret-table-body'); + if (!tableBody) return; + + tableBody.innerHTML = 'Loading...'; + + try { + const secretResponse = await fetchSecrets(); + const allSecrets = [ + ...(secretResponse.enabled || []).map(s => ({ ...s, status: 'Enabled', configData: s })), + ...(secretResponse.disabled || []).map(s => ({ ...s, status: 'Disabled', configData: s })) + ]; + + if (!allSecrets.length) { + tableBody.innerHTML = 'No secrets found.'; + configStore.secrets = {}; + return; + } + + cleanupConfigStore(); + configStore.secrets = allSecrets.reduce((acc, s) => { + const existing = acc[s.name] || {}; + acc[s.name] = { ...s.configData, yaml: existing.yaml }; + return acc; + }, configStore.secrets); + + tableBody.innerHTML = ''; + allSecrets.forEach(secret => { + const row = tableBody.insertRow(); + if (secret.status === 'Disabled') row.classList.add('disabled-row'); + + const nameCell = row.insertCell(); + const nameLink = document.createElement('a'); + nameLink.href = '#'; + nameLink.innerHTML = `${secret.name}`; + nameLink.onclick = (e) => { + e.preventDefault(); + showSecretConfig(secret.name); + }; + nameCell.appendChild(nameLink); + + row.insertCell().textContent = secret.status; + + const secretType = secret.tls_certificate ? 'TLS Certificate' : (secret.generic_secret ? 'Generic Secret' : 'Unknown'); + row.insertCell().textContent = secretType; + + const actionsCell = row.insertCell(); + if (secret.status === 'Enabled') { + const disableBtn = document.createElement('button'); + disableBtn.className = 'action-button disable'; + disableBtn.textContent = 'Disable'; + disableBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`Are you sure you want to DISABLE secret: ${secret.name}?`)) { + handleStatusToggle(secret.name, 'disable'); + } + }; + actionsCell.appendChild(disableBtn); + } else { + const enableBtn = document.createElement('button'); + enableBtn.className = 'action-button enable'; + enableBtn.textContent = 'Enable'; + enableBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`Are you sure you want to ENABLE secret: ${secret.name}?`)) { + handleStatusToggle(secret.name, 'enable'); + } + }; + actionsCell.appendChild(enableBtn); + + const removeBtn = document.createElement('button'); + removeBtn.className = 'action-button remove'; + removeBtn.textContent = 'Remove'; + removeBtn.onclick = (e) => { + e.stopPropagation(); + if (confirm(`⚠️ WARNING: Are you absolutely sure you want to PERMANENTLY REMOVE secret: ${secret.name}? This action cannot be undone.`)) { + handleStatusToggle(secret.name, 'remove'); + } + }; + actionsCell.appendChild(removeBtn); + } + }); + } catch (error) { + tableBody.innerHTML = `🚨 Secret Error: ${error.message}`; + } +} + +async function handleStatusToggle(name, action) { + try { + if (action === 'remove') { + await removeSecret(name); + } else { + await toggleSecretStatus(name, action); + } + cleanupConfigStore(); + renderSecretsTable(); + } catch (error) { + alert(`Failed to ${action} secret '${name}'. Error: ${error.message}`); + } +} + +async function showSecretConfig(name) { + const config = configStore.secrets[name]; + if (!config) return; + + let yamlData = config.yaml || 'Loading YAML...'; + if (yamlData === 'Loading YAML...') { + try { + yamlData = await fetchSecretYaml(name); + configStore.secrets[name].yaml = yamlData; + } catch (error) { + yamlData = `Error fetching YAML: ${error.message}`; + } + } + setupConfigModal(`Full Config for Secret: ${name}`, config, yamlData); +} diff --git a/static/js/store/configStore.js b/static/js/store/configStore.js new file mode 100644 index 0000000..9ccd829 --- /dev/null +++ b/static/js/store/configStore.js @@ -0,0 +1,52 @@ +// static/js/store/configStore.js + +export let API_BASE_URL = window.location.href; +API_BASE_URL = API_BASE_URL.replace(/\/$/, ""); + +/** + * Global In-Memory Store + */ +export const configStore = { + clusters: {}, + listeners: {}, + secrets: {}, + extension_configs: {} +}; + +/** + * Cleans up the cached YAML data in configStore for all resources. + */ +export function cleanupConfigStore() { + for (const name in configStore.clusters) { + if (configStore.clusters.hasOwnProperty(name)) { + configStore.clusters[name].yaml = 'Loading YAML...'; + } + } + + for (const name in configStore.listeners) { + if (configStore.listeners.hasOwnProperty(name)) { + configStore.listeners[name].yaml = 'Loading YAML...'; + } + } + for (const name in configStore.secrets) { + if (configStore.secrets.hasOwnProperty(name)) { + configStore.secrets[name].yaml = 'Loading YAML...'; + } + } + for (const name in configStore.extension_configs) { + if (configStore.extension_configs.hasOwnProperty(name)) { + configStore.extension_configs[name].yaml = 'Loading YAML...'; + } + } +} + +export const CONSISTENCY_POLL_INTERVAL = 5000; +export let inconsistencyData = null; + +export function setInconsistencyData(data) { + inconsistencyData = data; +} + +export function getInconsistencyData() { + return inconsistencyData; +} diff --git a/static/js/utils/yamlUtils.js b/static/js/utils/yamlUtils.js new file mode 100644 index 0000000..ba985eb --- /dev/null +++ b/static/js/utils/yamlUtils.js @@ -0,0 +1,61 @@ +// static/js/utils/yamlUtils.js + +/** + * Extracts the YAML section for a specific domain from the filterChains array. + */ +export function extractFilterChainByDomain(yamlData, domainName) { + if (typeof jsyaml === 'undefined') { + console.error("Error: YAML parser (js-yaml) is required but not found."); + return null; + } + + let fullConfig; + try { + const allDocs = jsyaml.loadAll(yamlData); + fullConfig = allDocs.find(doc => doc && typeof doc === 'object'); + } catch (e) { + console.error("Error parsing YAML data:", e); + return null; + } + + if (!fullConfig || !Array.isArray(fullConfig.filterChains)) { + console.warn("Input YAML does not contain a 'filterChains' array, or the main document was not found."); + return null; + } + + let matchingChain; + if (domainName === "*" && fullConfig.filterChains.length > 0) { + matchingChain = fullConfig.filterChains.find(chain => { + return chain.filterChainMatch == null; + }); + } else { + matchingChain = fullConfig.filterChains.find(chain => { + const serverNames = chain.filterChainMatch?.serverNames; + return serverNames && serverNames.includes(domainName); + }); + } + + if (!matchingChain) { + console.log(`No filterChain found for domain: ${domainName}`); + return null; + } + + try { + const outputYaml = jsyaml.dump(matchingChain, { + indent: 2, + lineWidth: -1, + flowLevel: -1 + }); + return outputYaml.trim(); + } catch (e) { + console.error("Error dumping YAML data:", e); + return null; + } +} + +export function dumpYaml(data) { + if (typeof jsyaml === 'undefined') { + throw new Error("YAML parser (js-yaml) is required but not found."); + } + return jsyaml.dump(data, { indent: 2, lineWidth: -1, flowLevel: -1 }).trim(); +} diff --git a/static/listeners.js b/static/listeners.js deleted file mode 100755 index e1cb233..0000000 --- a/static/listeners.js +++ /dev/null @@ -1,405 +0,0 @@ -// listeners.js -import { - API_BASE_URL, - configStore, - cleanupConfigStore, // Re-import from global -} from './global.js'; - -// We assume 'showModal' is defined elsewhere or is not needed as all modals are now handled directly -// Or, if showModal is used, it should be a general modal function from global.js or a separate modals.js file. -// For this consolidation, we'll assume showModal is a simple function defined here or in a helper file. - -// NOTE: Since global.js now exports showListenerConfigModal and showDomainConfig, -// we don't need to import them from a non-existent './modals.js' or './data_fetchers.js'. - - -// ========================================================================= -// MODAL HELPERS (If showModal is truly a helper needed by this module, define it) -// ========================================================================= -// Assuming a simplified showModal is needed for a single element ID: -function showModal(modalId) { - const modal = document.getElementById(modalId); - if (modal) { - modal.style.display = 'block'; - } -} - -// ========================================================================= -// LISTENER UTILITIES (Unchanged) -// ========================================================================= - -function getDomainRouteTable(filterChains, listenerName) { - if (!filterChains || filterChains.length === 0) return 'N/A'; - - // Store filter chains in memory for robust retrieval in showDomainConfig (imported from global) - const listenerStore = configStore.listeners[listenerName] || {}; - listenerStore.filterChains = filterChains; - - // Store the listener configuration back into the store - configStore.listeners[listenerName] = listenerStore; - - - const domainConfigs = filterChains.map((chain, index) => { - const domains = chain.filter_chain_match?.server_names || ["(default)"]; - const filters = chain.filters?.map(f => f.name.replace(/^envoy\.filters\./, '')) || []; - const routeType = filters.some(f => f.includes('http_connection_manager')) ? 'HTTP' : 'TCP'; - - const primaryDomainName = domains[0]; - - const allDomainsTitle = domains.join(', '); - const modalTitle = `Filter Chain for Domains: ${allDomainsTitle} (${listenerName})`; - - // Use the listener name and chain index for a unique memory reference - const memoryKey = `${listenerName}_${index}`; - - // Temporarily store the domains array with the key so removeFilterChain can retrieve it - if (!configStore.filterChainDomains) { - configStore.filterChainDomains = {}; - } - configStore.filterChainDomains[memoryKey] = domains; - - - // Handlers are attached to the window via global.js or this file's export/window attachment - return ` -

- ${allDomainsTitle} -

- -

- ${routeType} Route - -

- `; - }); - - return `

${domainConfigs.join('')}

`; -} - -function getListenerRowData(listener) { - const socketAddr = listener.address?.Address?.SocketAddress; - const address = socketAddr?.address || 'N/A'; - const port = socketAddr?.PortSpecifier?.PortValue || 'N/A'; - const addressString = `${address}:${port}`; - const isTlsInspector = listener.listener_filters?.some(f => f.name.includes('tls_inspector')); - const isTlsInChain = listener.filter_chains?.some(c => c.transport_socket); - const tlsIndicator = (isTlsInspector || isTlsInChain) - ? 'TLS' - : ''; - - return { - name: listener.name, - address: `${addressString} ${tlsIndicator}`, - domains: getDomainRouteTable(listener.filter_chains, listener.name), - status: listener.status || 'Enabled', - rawData: listener - }; -} - -// ========================================================================= -// CORE API LOGIC (Unchanged) -// ========================================================================= - -async function toggleListenerStatus(listenerName, action) { - let url = ''; - if (action === 'remove') { - url = `${API_BASE_URL}/remove-listener`; - } else { - url = `${API_BASE_URL}/${action}-listener`; - } - - const payload = { name: listenerName }; - - try { - const response = await fetch(url, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload) - }); - - if (!response.ok) { - const errorBody = await response.text(); - throw new Error(`HTTP Error ${response.status}: ${errorBody}`); - } - - console.log(`Listener '${listenerName}' successfully ${action}d.`); - cleanupConfigStore(); // Clean up global cache - listListeners(); // Reload listeners - } catch (error) { - console.error(`Failed to ${action} listener '${listenerName}':`, error); - alert(`Failed to ${action} listener '${listenerName}'. Check console for details.`); - } -} - -/** - * Public export for refreshing the listener list. (Unchanged) - */ -export async function listListeners() { - const tableBody = document.getElementById('listener-table-body'); - if (!tableBody) { - console.error("Could not find element with ID 'listener-table-body'."); - return; - } - - tableBody.innerHTML = - 'Loading...'; - - try { - const response = await fetch(`${API_BASE_URL}/list-listeners`); - if (!response.ok) throw new Error(response.statusText); - - const listenerResponse = await response.json(); - const allListeners = [ - ...(listenerResponse.enabled || []).map(l => ({ ...l, status: 'Enabled', configData: l })), - ...(listenerResponse.disabled || []).map(l => ({ ...l, status: 'Disabled', configData: l })) - ]; - - if (!allListeners.length) { - tableBody.innerHTML = - 'No listeners found.'; - // Clear store if no listeners are found - configStore.listeners = {}; - return; - } - - // Store full configs in memory by name - configStore.listeners = allListeners.reduce((acc, l) => { - // Preserve existing YAML, and initialize filterChains - const existing = acc[l.name] || {}; - acc[l.name] = { - ...l.configData, - yaml: existing.yaml, - // Do not reset filterChains here; getDomainRouteTable will set the *new* list. - filterChains: existing.filterChains - }; - return acc; - }, configStore.listeners); - - tableBody.innerHTML = ''; - allListeners.forEach(listener => { - // Call getDomainRouteTable, which now stores filterChains in memory - const rowData = getListenerRowData(listener); - - const row = tableBody.insertRow(); - if (rowData.status === 'Disabled') row.classList.add('disabled-row'); - - let actionButtons = ''; - - // Add Filter Chain button (references function in global.js, attached to window) - actionButtons += ``; - - // Existing logic for disable/enable/remove (references functions in this module, attached to window) - if (rowData.status === 'Enabled') { - actionButtons += ``; - } else { - // When disabled, show Enable and Remove buttons - actionButtons += ` - - - `; - } - - // Listener Name Hyperlink (Updated to use new modal function from global) - const listenerNameCell = row.insertCell(); - listenerNameCell.innerHTML = - `${rowData.name}`; - - row.insertCell().textContent = rowData.status; - row.insertCell().innerHTML = rowData.address; - row.insertCell().innerHTML = rowData.domains; - row.insertCell().innerHTML = actionButtons; - }); - } catch (error) { - tableBody.innerHTML = `🚨 Listener Error: ${error.message}`; - console.error("Listener Fetch/Parse Error:", error); - } -} - - -/** - * Core logic to remove a specific filter chain from a listener based on its domains. (Unchanged) - */ -export async function removeFilterChain(listenerName, domains, event) { - if (event) event.stopPropagation(); - - const domainList = domains.join(', '); - if (domains.length === 1 && domains[0] === '(default)') { - // Special handling for default chain - if (!confirm(`⚠️ WARNING: You are about to remove the DEFAULT filter chain for listener: ${listenerName}. This will likely break the listener. Continue?`)) { - return; - } - } else if (!confirm(`Are you sure you want to REMOVE the filter chain for domains: ${domainList} on listener: ${listenerName}?`)) { - return; - } - - const url = `${API_BASE_URL}/remove-filter-chain`; - - const payload = { - listener_name: listenerName, - domains: domains - }; - - try { - const response = await fetch(url, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload) - }); - - if (!response.ok) { - const errorBody = await response.text(); - throw new Error(`HTTP Error ${response.status}: ${errorBody}`); - } - - console.log(`Filter chain for domains '${domainList}' on listener '${listenerName}' successfully removed.`); - cleanupConfigStore(); // Clean up global cache - listListeners(); // Reload the listener list to refresh the UI - } catch (error) { - console.error(`Failed to remove filter chain for '${domainList}' on listener '${listenerName}':`, error); - alert(`Failed to remove filter chain for '${domainList}' on listener '${listenerName}'. Check console for details.`); - } -} - -/** - * Submits the new listener YAML to the /add-listener endpoint. - * - * MODIFIED: Now checks for an 'allow-upsert' checkbox and adds 'upsert: true' to the payload. - */ -export async function submitNewListener() { - const yamlInput = document.getElementById('add-listener-yaml-input'); - // --- NEW: Get the checkbox element and its state --- - const upsertCheckbox = document.getElementById('add-listener-upsert-flag'); - // -------------------------------------------------- - const listenerYaml = yamlInput.value.trim(); - - if (!listenerYaml) { - alert('Please paste the Listener YAML configuration.'); - return; - } - - try { - // Simple YAML validation is assumed to be handled by js-yaml globally - - const payload = { - yaml: listenerYaml - }; - - // --- NEW: Add upsert flag to payload if checkbox is checked --- - if (upsertCheckbox && upsertCheckbox.checked) { - payload.upsert = true; - } - // -------------------------------------------------------------- - - const url = `${API_BASE_URL}/add-listener`; - - const response = await fetch(url, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload) - }); - - if (!response.ok) { - const errorBody = await response.text(); - throw new Error(`HTTP Error ${response.status}: ${errorBody}`); - } - - console.log(`New listener successfully added.`); - alert('Listener successfully added! The dashboard will now refresh.'); - - // Clear input and hide modal - yamlInput.value = ''; - // --- NEW: Uncheck the box upon success/closing --- - if (upsertCheckbox) { - upsertCheckbox.checked = false; - } - // ------------------------------------------------- - hideAddListenerModal(); - - cleanupConfigStore(); // Clean up global cache - listListeners(); // Reload the listener list to refresh the UI - - } catch (error) { - console.error(`Failed to add new listener:`, error); - alert(`Failed to add new listener. Check console for details. Error: ${error.message}`); - } -} - - -// ========================================================================= -// UI EXPORTED FUNCTIONS (Unchanged) -// ========================================================================= - -export function disableListener(listenerName, event) { - event.stopPropagation(); - if (confirm(`Are you sure you want to DISABLE listener: ${listenerName}?`)) { - toggleListenerStatus(listenerName, 'disable'); - } -} - -export function enableListener(listenerName, event) { - event.stopPropagation(); - if (confirm(`Are you sure you want to ENABLE listener: ${listenerName}?`)) { - toggleListenerStatus(listenerName, 'enable'); - } -} - -export function removeListener(listenerName, event) { - event.stopPropagation(); - if (confirm(`⚠️ WARNING: Are you absolutely sure you want to PERMANENTLY REMOVE listener: ${listenerName}? This action cannot be undone.`)) { - toggleListenerStatus(listenerName, 'remove'); - } -} - -/** - * UI entrypoint for removing a filter chain using a memory key. (Unchanged) - * @param {string} listenerName - The name of the listener. - * @param {string} memoryKey - The key used to retrieve the domains array from configStore. - * @param {Event} event - The click event to stop propagation. - */ -export function removeFilterChainByRef(listenerName, memoryKey, event) { - event.stopPropagation(); - - const domains = configStore.filterChainDomains?.[memoryKey]; - - if (!domains) { - console.error(`Error: Could not find domains array in memory for key: ${memoryKey}`); - alert('Failed to find filter chain configuration in memory. Please refresh the page and try again.'); - return; - } - - // Call the core logic with the retrieved array - removeFilterChain(listenerName, domains, event); -} - -/** - * Shows the modal for adding a new full listener. (Unchanged) - */ -export function showAddListenerModal() { - // We'll use the local simple showModal if it exists, or just direct DOM manipulation - document.getElementById('addListenerModal').style.display = 'block'; -} - -/** - * Hides the modal for adding a new full listener. (Unchanged) - */ -export function hideAddListenerModal() { - const modal = document.getElementById('addListenerModal'); - if (modal) { - modal.style.display = 'none'; - // Clear the input when closing - document.getElementById('add-listener-yaml-input').value = ''; - } -} \ No newline at end of file diff --git a/static/modals.js b/static/modals.js deleted file mode 100755 index f9a5ea5..0000000 --- a/static/modals.js +++ /dev/null @@ -1,458 +0,0 @@ -// modals.js -import { setInconsistencyData, inconsistencyData } from './global.js'; -import { loadAllData } from './data_loader.js'; // Will be imported later -import { configStore, API_BASE_URL } from './global.js'; - -// ========================================================================= -// UTILITY HANDLERS (Copy & Download) -// ========================================================================= - -export function copyToClipboard(tabName) { - let contentToCopy = ''; - - // Get content safely - if (tabName === 'json') { - const jsonContentElement = document.getElementById('modal-json-content'); - contentToCopy = jsonContentElement?.textContent?.trim() || ''; - } else if (tabName === 'yaml') { - const yamlContentElement = document.getElementById('modal-yaml-content'); - contentToCopy = yamlContentElement?.textContent?.trim() || ''; - } - - if (!contentToCopy) { - alert(`No ${tabName.toUpperCase()} content found to copy.`); - return; - } - - // Clipboard API - navigator.clipboard.writeText(contentToCopy) - .then(() => { - const copyButton = document.getElementById('copy-config-button'); - if (copyButton) { - // Instead of replacing innerHTML (which may destroy icons/styles), - // we temporarily change text via a data attribute or title - const originalLabel = copyButton.dataset.label || copyButton.textContent; - copyButton.dataset.label = originalLabel; - - copyButton.classList.add('copied'); // optional styling via CSS - copyButton.textContent = '✅ Copied!'; - setTimeout(() => { - copyButton.textContent = originalLabel; - copyButton.classList.remove('copied'); - }, 1500); - } else { - alert('Configuration copied to clipboard!'); - } - }) - .catch(err => { - console.error('Failed to copy text: ', err); - alert('Failed to copy text. Please try again or check browser permissions.'); - }); -} - -/** - * Downloads the YAML configuration content. - */ -export function downloadYaml() { - const yamlContent = document.getElementById('modal-yaml-content').textContent; - if (!yamlContent || yamlContent.trim() === '') { - alert("No YAML content available to download."); - return; - } - - // Use modal title as filename fallback - const title = document.getElementById('modal-title').textContent - .replace(/\s+/g, '_') - .replace(/[^\w\-]/g, ''); - - const blob = new Blob([yamlContent], { type: 'text/yaml' }); - const url = URL.createObjectURL(blob); - - const a = document.createElement('a'); - a.href = url; - a.download = title ? `${title}.yaml` : 'config.yaml'; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - URL.revokeObjectURL(url); -} - -// ========================================================================= -// GENERIC MODAL HANDLERS -// ========================================================================= - -/** - * Shows any modal element by its ID. (NEW GENERIC FUNCTION) - * @param {string} modalId - The ID of the modal element to display. - */ -export function showModal(modalId) { - const modal = document.getElementById(modalId); - if (modal) { - modal.style.display = 'block'; - } -} - -/** - * Hides any modal element by its ID. (NEW GENERIC FUNCTION) - * @param {string} modalId - The ID of the modal element to hide. Defaults to 'configModal'. - */ -export function hideModal(modalId = 'configModal') { - const modal = document.getElementById(modalId); - modal?.querySelector('.modal-content')?.querySelector(".tab-controls")?.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); - if (modal) { - modal.style.display = 'none'; - } -} - - -// ========================================================================= -// CONFIGURATION DISPLAY MODAL HANDLERS (JSON/YAML tabs) -// ========================================================================= - -export function switchTab(modalContent, tabName) { - // Deactivate all tab buttons - const tabSelection = modalContent.querySelector('.tab-selection'); - if (tabSelection) { - tabSelection.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); - } - - // Hide all code blocks - modalContent.querySelectorAll('.code-block').forEach(content => { - content.style.display = 'none'; - }); - - // Activate selected tab button and content - const activeBtn = modalContent.querySelector(`.tab-button[data-tab="${tabName}"]`); - const activeContent = document.getElementById(`modal-${tabName}-content`); - if (activeBtn) activeBtn.classList.add('active'); - if (activeContent) activeContent.style.display = 'block'; - - // Ensure copy button copies from the correct tab - const copyButton = document.getElementById('copy-config-button'); - if (copyButton) { - // Remove any existing event listener safely - const newHandler = () => copyToClipboard(tabName); - copyButton.replaceWith(copyButton.cloneNode(true)); // clone to remove old listeners - const newCopyButton = document.getElementById('copy-config-button'); - newCopyButton.addEventListener('click', newHandler); - } -} - - -/** - * Displays the main configuration modal (with JSON/YAML tabs). (RENAMED FROM showModal) - * @param {string} title - The modal title. - * @param {object} jsonData - The configuration data object (for JSON tab). - * @param {string} yamlData - The configuration data as a YAML string. - * @param {string} [defaultTab='yaml'] - The tab to show by default. - */ -export function showConfigModal(title, jsonData, yamlData, defaultTab = 'yaml') { - document.getElementById('modal-title').textContent = title; - - // 1. Check if the 'yaml' key exists in the jsonData object. - // The "yaml" attribute is only used for storing yaml context, when we display it in the frontent, - // we should exclude it from the display to confuse the user. - if (jsonData && jsonData.yaml !== undefined) { - // 2. Use the delete operator to remove the key - delete jsonData.yaml; - } - - // Populate JSON content - document.getElementById('modal-json-content').textContent = - JSON.stringify(jsonData, null, 2); - - // Populate YAML content - document.getElementById('modal-yaml-content').textContent = yamlData; - - // Default to the specified tab - const modalContent = document.getElementById('configModal')?.querySelector('.modal-content'); - if (modalContent) { - // This call to switchTab will also set the initial handler for the copy button - switchTab(modalContent, defaultTab); - } - - // Use generic showModal - showModal('configModal'); -} - -/** - * Hides the main configuration modal (configModal). (Uses generic hideModal) - */ -export function hideConfigModal() { - hideModal('configModal'); -} - -/** - * Sets up click handlers for the tab buttons in the main modal. - */ -export function setupModalTabs() { - const modalContent = document.getElementById('configModal')?.querySelector('.modal-content'); - if (!modalContent) return; - - modalContent.querySelectorAll('.tab-button').forEach(button => { - button.addEventListener('click', (event) => { - const tabName = event.target.getAttribute('data-tab'); - // The switchTab function now includes the logic to update the copy button's target - switchTab(modalContent, tabName); - }); - }); -} - -// ========================================================================= -// ADD FILTER CHAIN MODAL HANDLERS -// ========================================================================= - -/** - * Shows the modal for adding a new filter chain to a listener. - * @param {string} listenerName - The name of the listener to modify. - */ -export function showAddFilterChainModal(listenerName) { - // 1. Set the listener name in the hidden input for form submission - document.getElementById('add-fc-listener-name').value = listenerName; - - // 2. Set the title - document.getElementById('add-fc-modal-title').textContent = - `Add New Filter Chain to: ${listenerName}`; - - // 3. Clear any previous YAML content - const yamlInput = document.getElementById('add-fc-yaml-input'); - yamlInput.value = ''; - - // 4. Show the modal (using generic showModal) - showModal('addFilterChainModal'); - - // 5. Provide a template to guide the user (optional) - yamlInput.placeholder = -`# Paste your new Filter Chain YAML here. -# NOTE: The root key should be the filter chain object itself. -filter_chain_match: - server_names: ["new.example.com"] -...`; -} - -/** - * Closes the Add Filter Chain modal. (Uses generic hideModal) - */ -export function hideAddFilterChainModal() { - hideModal('addFilterChainModal'); -} - - -// ========================================================================= -// CONSISTENCY MODAL HANDLERS -// ========================================================================= - -export function showConsistencyModal() { - if (!inconsistencyData || inconsistencyData.inconsistent === false) return; - - // Populate modal content - const cacheOnly = inconsistencyData['cache-only'] || {}; - const dbOnly = inconsistencyData['db-only'] || {}; - - document.getElementById('cache-only-count').textContent = - Object.keys(cacheOnly).length; - document.getElementById('cache-only-data').textContent = - JSON.stringify(cacheOnly, null, 2); - - document.getElementById('db-only-count').textContent = - Object.keys(dbOnly).length; - document.getElementById('db-only-data').textContent = - JSON.stringify(dbOnly, null, 2); - - // Use generic showModal - showModal('consistencyModal'); -} - -export function hideConsistencyModal() { - hideModal('consistencyModal'); -} - -// ========================================================================= -// ADD CLUSTER MODAL HANDLERS (Placeholder, assuming definitions are elsewhere) -// ========================================================================= - -// Assuming these are defined elsewhere and attached to window, -// or are intended to be moved here: -// export function showAddClusterModal() { showModal('addClusterModal'); } -// export function hideAddClusterModal() { hideModal('addClusterModal'); } - - -// ========================================================================= -// WINDOW EVENT LISTENERS -// ========================================================================= - -window.addEventListener('keydown', (event) => { - // Check for Escape key to close all modals - if (event.key === 'Escape') { - hideConfigModal(); - hideAddFilterChainModal(); - hideConsistencyModal(); - // Assuming other hideModal functions (like hideAddClusterModal) are either imported or globally attached. - // For example: - // window.hideAddClusterModal?.(); - // window.hideAddListenerModal?.(); - // window.hideAddSecretModal?.(); - } -}); - -// Close modal when clicking outside of the content (on the backdrop) -window.addEventListener('click', (event) => { - const modal = document.getElementById('configModal'); - const addFCModal = document.getElementById('addFilterChainModal'); - const consistencyModal = document.getElementById('consistencyModal'); - const addListenerModal = document.getElementById('addListenerModal'); - const addClusterModal = document.getElementById('addClusterModal'); - - if (event.target === modal) { - hideConfigModal(); - } - if (event.target === addFCModal) { - hideAddFilterChainModal(); - } - if (event.target === consistencyModal) { - hideConsistencyModal(); - } - if (event.target === addListenerModal) { - // Call global function if defined externally - // window.hideAddListenerModal?.(); - // Or hide using generic function if it belongs here: - hideModal('addListenerModal'); - } - if (event.target === addClusterModal) { - // Call global function if defined externally - // window.hideAddClusterModal?.(); - // Or hide using generic function if it belongs here: - hideModal('addClusterModal'); - } -}); - -// ========================================================================= -// CONFIG-SPECIFIC MODAL LAUNCHERS (Fetch & Display) -// ========================================================================= - -/** - * Fetches and displays the full configuration for a listener in the tabbed modal. - */ -export async function showListenerConfigModal(listenerName) { - const config = configStore.listeners[listenerName]; - if (!config) { - showConfigModal(`🚨 Error: Listener Not Found`, { name: listenerName, error: 'Configuration data missing from memory.' }, 'Error: Listener not in memory.'); - return; - } - - let yamlData = configStore.listeners[listenerName]?.yaml || 'Loading YAML...'; - - if (yamlData === 'Loading YAML...') { - try { - const response = await fetch(`${API_BASE_URL}/get-listener?name=${listenerName}&format=yaml`); - if (!response.ok) { - yamlData = `Error fetching YAML: ${response.status} ${response.statusText}`; - } else { - yamlData = await response.text(); - configStore.listeners[listenerName].yaml = yamlData; // Store YAML - } - } catch (error) { - console.error("Failed to fetch YAML listener config:", error); - yamlData = `Network Error fetching YAML: ${error.message}`; - } - } - - // Use the renamed function - showConfigModal(`Full Config for Listener: ${listenerName}`, config, yamlData); -} - - -/** - * Fetches and displays the full configuration for a secret in the tabbed modal. - */ -export async function showSecretConfigModal(secretName) { - const config = configStore.secrets[secretName]; - if (!config) { - showConfigModal(`🚨 Error: Secret Not Found`, { name: secretName, error: 'Configuration data missing from memory.' }, 'Error: Secret not in memory.'); - return; - } - - let yamlData = configStore.secrets[secretName]?.yaml || 'Loading YAML...'; - - if (yamlData === 'Loading YAML...') { - try { - const response = await fetch(`${API_BASE_URL}/get-secret?name=${secretName}&format=yaml`); - if (!response.ok) { - yamlData = `Error fetching YAML: ${response.status} ${response.statusText}`; - } else { - yamlData = await response.text(); - configStore.secrets[secretName].yaml = yamlData; // Store YAML - } - } catch (error) { - console.error("Failed to fetch YAML listener config:", error); - yamlData = `Network Error fetching YAML: ${error.message}`; - } - } - - // Use the renamed function - showConfigModal(`Full Config for Secret: ${secretName}`, config, yamlData); -} - -/** - * Fetches and displays the full configuration for a cluster in the tabbed modal. - */ -export async function showClusterConfigModal(clusterName) { - const config = configStore.clusters[clusterName]; - if (!config) { - showConfigModal(`🚨 Error: Cluster Not Found`, { name: clusterName, error: 'Configuration data missing from memory.' }, 'Error: Cluster not in memory.'); - return; - } - - let yamlData = configStore.clusters[clusterName]?.yaml || 'Loading YAML...'; - - if (yamlData === 'Loading YAML...') { - try { - const response = await fetch(`${API_BASE_URL}/get-cluster?name=${clusterName}&format=yaml`); - if (!response.ok) { - yamlData = `Error fetching YAML: ${response.status} ${response.statusText}`; - } else { - yamlData = await response.text(); - configStore.clusters[clusterName].yaml = yamlData; // Store YAML - } - } catch (error) { - console.error("Failed to fetch YAML cluster config:", error); - yamlData = `Network Error fetching YAML: ${error.message}`; - } - } - - showConfigModal(`Full Config for Cluster: ${clusterName}`, config, yamlData); -} - -// ========================================================================= -// NEW: EXTENSION CONFIG MODAL HANDLER -// ========================================================================= - -/** - * Fetches and displays the full configuration for an ExtensionConfig in the tabbed modal. - */ -export async function showExtensionConfigModal(configName) { - const config = configStore.extension_configs[configName]; - if (!config) { - showConfigModal(`🚨 Error: ExtensionConfig Not Found`, { name: configName, error: 'Configuration data missing from memory.' }, 'Error: ExtensionConfig not in memory.'); - return; - } - - let yamlData = configStore.extension_configs[configName]?.yaml || 'Loading YAML...'; - - if (yamlData === 'Loading YAML...') { - try { - const response = await fetch(`${API_BASE_URL}/get-extensionconfig?name=${configName}&format=yaml`); - if (!response.ok) { - yamlData = `Error fetching YAML: ${response.status} ${response.statusText}`; - } else { - yamlData = await response.text(); - configStore.extension_configs[configName].yaml = yamlData; // Store YAML - } - } catch (error) { - console.error("Failed to fetch YAML ExtensionConfig:", error); - yamlData = `Network Error fetching YAML: ${error.message}`; - } - } - - showConfigModal(`Full Config for ExtensionConfig: ${configName}`, config, yamlData); -} \ No newline at end of file diff --git a/static/secrets.js b/static/secrets.js deleted file mode 100755 index acffb93..0000000 --- a/static/secrets.js +++ /dev/null @@ -1,896 +0,0 @@ -import { API_BASE_URL, configStore, cleanupConfigStore } from './global.js'; - - -/** - * Extracts a concise description of the secret type (e.g., TlsCertificate). - * @param {object} secret - The secret configuration object. - * @returns {string} A string describing the secret type. - */ -function getSecretTypeDetails(secret) { - try { - const secretType = secret.Type; - if (!secretType) return '(Unknown Type)'; - - // Find the key that is not 'name' or 'Type' itself - const typeKeys = Object.keys(secretType); - const typeName = typeKeys.find(key => key !== 'name'); - - let typeDetails = ''; - if (typeName) { - // Convert 'TlsCertificate' to 'TLS Certificate' - typeDetails = typeName.replace(/([A-Z])/g, ' $1').trim(); - } else { - typeDetails = '(Generic)'; - } - - // ADD: Append validity status for TLS Certificates - if (typeName === 'TlsCertificate' && secret.validityStatus) { - const statusText = secret.validityStatus; // 'Valid' or 'Invalid' - const statusClass = statusText.toLowerCase(); // 'valid' or 'invalid' - typeDetails += ` ${statusText}`; - } - -// NEW: Append rotation status for TLS Certificates with HOVER DETAILS - if (typeName === 'TlsCertificate' && secret.rotationStatus === 'Enabled') { - const rotationInfo = secret.rotationDetails; - let tooltipContent = 'Auto Rotation Enabled.'; // Renamed from tooltipText to tooltipContent - - if (rotationInfo) { - // 1. Convert renew_before to display format - let renewBeforeDisplay = rotationInfo.renew_before || 'N/A'; - const hoursMatch = renewBeforeDisplay.match(/(\d+)h/); - if (hoursMatch) { - const hours = parseInt(hoursMatch[1], 10); - const days = Math.round(hours / 24); - renewBeforeDisplay = `${days}d (${hours}h)`; - } - - const rotationStatusText = rotationInfo.rotation_enabled ? 'Active' : 'Configured (Disabled)'; - const expiresAtText = rotationInfo.expires_at || 'N/A'; - const remainDaysText = rotationInfo.remain_days || 'N/A'; - - // 2. Assemble the full tooltip content with actual newlines - // This content will be used by our CSS tooltip. - tooltipContent = ` -Rotation Status: ${rotationStatusText} -Domain: ${rotationInfo.domain} -Secret Name: ${rotationInfo.secret_name} -Renew Before: ${renewBeforeDisplay} -Remain Days: ${remainDaysText} -Expires At: ${expiresAtText} - `.trim(); - } - - // --- IMPORTANT CHANGE HERE --- - // Remove the 'title' attribute and use 'data-tooltip' instead. - // The 'title' attribute can be kept as a fallback for accessibility, - // but the CSS tooltip will take precedence. - typeDetails += ``; - } - return typeDetails; - - } catch { - return '(Config Error)'; - } -} - -/** - * Checks if a secret is a TLS Certificate. - * @param {object} secret - The secret configuration object. - * @returns {boolean} True if the secret is a TLS Certificate. - */ -function isTlsCertificate(secret) { - try { - const typeKeys = Object.keys(secret.Type); - return typeKeys.some(key => key === 'TlsCertificate'); - } catch { - return false; - } -} - - -// ========================================================================= -// CERTIFICATE LOGIC (API & Modal) (Modified/New) -// ========================================================================= - -/** - * Calls the backend API to parse and retrieve certificate details. - * @param {string} certificatePem - The PEM encoded certificate string. - * @returns {Promise

Existing Listeners (Click a domain/filter for details)

Add/Update Listener

Add/Update Cluster

Add/Update Generic Secret

Add/Update ExtensionConfig

TLS Certificate Details

Certificate Rotation Settings

Certificate Rotation Settings

TLS Certificate Details: ${secretName}

Error Parsing Certificate: ${secretName}

Change Rotation Settings