cloud-hosting-platform/haproxy-manager-base
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

troubleshoot errors with web interface
All checks were successful
HAProxy Manager Build and Push / Build-and-Push (push) Successful in 39s
Details

Browse Source
This commit is contained in:
jknapp 2025-03-06 17:14:42 -08:00
parent 9621786175
commit 94f9223bc7
1 changed files with 71 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
templates/index.html
View File

@ -84,9 +84,16 @@
</style> </style>
</head> </head>
<body> <body>
<script>
window.onerror = function(msg, url, lineNo, columnNo, error) {
console.log('Error: ' + msg + '\nURL: ' + url + '\nLine: ' + lineNo + '\nColumn: ' + columnNo + '\nError object: ' + JSON.stringify(error));
return false;
};
</script>
<div class="container"> <div class="container">
<h1>HAProxy Domain Manager</h1> <h1>HAProxy Domain Manager</h1>
<!-- Add Domain Form --> <!-- Add Domain Form -->
<h2>Add New Domain</h2> <h2>Add New Domain</h2>
<form id="domainForm"> <form id="domainForm">
@ -94,7 +101,7 @@
<label for="domain">Domain:</label> <label for="domain">Domain:</label>
<input type="text" id="domain" required placeholder="example.com"> <input type="text" id="domain" required placeholder="example.com">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="backendName">Backend Name:</label> <label for="backendName">Backend Name:</label>
<input type="text" id="backendName" required placeholder="example_backend"> <input type="text" id="backendName" required placeholder="example_backend">
@ -107,7 +114,7 @@
<h3>Backend Servers</h3> <h3>Backend Servers</h3>
<div id="serverList" class="server-list"></div> <div id="serverList" class="server-list"></div>
<button type="button" onclick="addServerField()">Add Server</button> <button type="button" onclick="addServerField()">Add Server</button>
<button type="submit">Add Domain</button> <button type="submit">Add Domain</button>
</form> </form>
@ -151,20 +158,52 @@
document.getElementById('domainForm').addEventListener('submit', async (e) => { document.getElementById('domainForm').addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
const servers = Array.from(document.getElementsByClassName('server-item')).map(item => ({ const domainInput = document.getElementById('domain');
name: item.querySelector('.server-name').value, const backendNameInput = document.getElementById('backendName');
address: item.querySelector('.server-address').value, const templateOverrideInput = document.getElementById('templateOverride');
port: parseInt(item.querySelector('.server-port').value), const serverItems = document.getElementsByClassName('server-item');
options: item.querySelector('.server-options').value
})); if (!domainInput || !backendNameInput) {
showStatus('Required form fields are missing', 'error');
return;
}
if (serverItems.length === 0) {
showStatus('At least one server is required', 'error');
return;
}
const servers = [];
for (const item of serverItems) {
const nameInput = item.querySelector('.server-name');
const addressInput = item.querySelector('.server-address');
const portInput = item.querySelector('.server-port');
const optionsInput = item.querySelector('.server-options');
if (!nameInput || !addressInput || !portInput) {
showStatus('Server configuration is incomplete', 'error');
return;
}
if (!nameInput.value || !addressInput.value || !portInput.value) {
showStatus('Please fill in all required server fields', 'error');
return;
}
servers.push({
name: nameInput.value,
address: addressInput.value,
port: parseInt(portInput.value),
options: optionsInput ? optionsInput.value : ''
});
}
const data = { const data = {
domain: document.getElementById('domain').value, domain: domainInput.value,
backend_name: document.getElementById('backendName').value, backend_name: backendNameInput.value,
template_override: document.getElementById('templateOverride').value || null, template_override: templateOverrideInput ? templateOverrideInput.value : null,
servers: servers servers: servers
}; };
try { try {
const response = await fetch('/api/domain', { const response = await fetch('/api/domain', {
method: 'POST', method: 'POST',
@ -177,12 +216,16 @@
if (response.ok) { if (response.ok) {
showStatus('Domain added successfully!', 'success'); showStatus('Domain added successfully!', 'success');
document.getElementById('domainForm').reset(); document.getElementById('domainForm').reset();
document.getElementById('serverList').innerHTML = '';
addServerField();
loadDomains(); loadDomains();
} else { } else {
showStatus('Failed to add domain', 'error'); const errorData = await response.json();
showStatus('Failed to add domain: ' + (errorData.message || 'Unknown error'), 'error');
} }
} catch (error) { } catch (error) {
showStatus('Error: ' + error.message, 'error'); showStatus('Error: ' + error.message, 'error');
console.error('Error details:', error);
} }
}); });
@ -234,13 +277,23 @@
} }
} }
// Show status message
function showStatus(message, type) { function showStatus(message, type) {
console.log(`Status [${type}]:`, message);
const statusDiv = document.createElement('div'); const statusDiv = document.createElement('div');
statusDiv.className = `status ${type}`; statusDiv.className = `status ${type}`;
statusDiv.textContent = message; statusDiv.textContent = message;
document.querySelector('.container').insertBefore(statusDiv, document.querySelector('.domain-list')); const container = document.querySelector('.container');
setTimeout(() => statusDiv.remove(), 5000); const domainList = document.querySelector('.domain-list');
if (container && domainList) {
container.insertBefore(statusDiv, domainList);
} else {
document.body.appendChild(statusDiv);
}
setTimeout(() => {
if (statusDiv.parentNode) {
statusDiv.remove();
}
}, 5000);
} }
// Load existing domains // Load existing domains
@ -270,4 +323,4 @@
loadDomains(); loadDomains();
</script> </script>
</body> </body>
</html> </html>