cloud-hosting-platform/haproxy-manager-base
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2406d9f995d5d9c79eba63b6f7b4f16740ded2b5
haproxy-manager-base/templates/index.html

396 lines
15 KiB
HTML
Raw Normal View History

Adding web interface
2025-03-06 16:51:29 -08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HAProxy Manager</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.server-list {
margin-top: 10px;
}
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
.server-item, .domain-list-item {
Adding web interface
2025-03-06 16:51:29 -08:00
border: 1px solid #ddd;
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
padding: 15px;
Adding web interface
2025-03-06 16:51:29 -08:00
margin-bottom: 10px;
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
border-radius: 5px;
}
.domain-list-item {
background-color: #f9f9f9;
}
.server-item {
background-color: #fff;
Adding web interface
2025-03-06 16:51:29 -08:00
}
.delete-btn {
background-color: #f44336;
}
.delete-btn:hover {
background-color: #da190b;
}
.domain-list {
margin-top: 20px;
}
.ssl-btn {
background-color: #2196F3;
}
.ssl-btn:hover {
background-color: #0b7dda;
}
.status {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.status.success {
background-color: #dff0d8;
color: #3c763d;
}
.status.error {
background-color: #f2dede;
color: #a94442;
}
Adding config regenerate
2025-03-07 19:06:38 -08:00
.regenerate-btn {
background-color: #ff9800;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 20px;
}
.regenerate-btn:hover {
background-color: #f57c00;
}
Adding web interface
2025-03-06 16:51:29 -08:00
</style>
</head>
<body>
<div class="container">
<h1>HAProxy Domain Manager</h1>
Adding config regenerate
2025-03-07 19:06:38 -08:00
<button onclick="regenerateConfig()" class="regenerate-btn">Regenerate HAProxy Config</button>
Adding reload function and more tweaks for backends
2025-03-09 10:59:03 -07:00
<button onclick="reloadHAProxy()" class="regenerate-btn" style="background-color: #2196F3;">Reload HAProxy</button>
Adding web interface
2025-03-06 16:51:29 -08:00
<form id="domainForm">
<div class="form-group">
<label for="domain">Domain:</label>
<input type="text" id="domain" required placeholder="example.com">
</div>
<div class="form-group">
<label for="backendName">Backend Name:</label>
<input type="text" id="backendName" required placeholder="example_backend">
</div>
<div class="form-group">
<label for="templateOverride">Template Override (optional):</label>
<input type="text" id="templateOverride" placeholder="custom_template">
</div>
<h3>Backend Servers</h3>
<div id="serverList" class="server-list"></div>
<button type="button" onclick="addServerField()">Add Server</button>
<button type="submit">Add Domain</button>
</form>
<h2>Existing Domains</h2>
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
<div id="domainList" class="domain-list"></div>
Adding web interface
2025-03-06 16:51:29 -08:00
</div>
<script>
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
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;
};
Adding web interface
2025-03-06 16:51:29 -08:00
function addServerField() {
const serverList = document.getElementById('serverList');
const serverDiv = document.createElement('div');
serverDiv.className = 'server-item';
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
const serverHTML = `
Adding web interface
2025-03-06 16:51:29 -08:00
<div class="form-group">
<label>Server Name:</label>
<input type="text" class="server-name" required placeholder="server1">
</div>
<div class="form-group">
<label>Server Address:</label>
<input type="text" class="server-address" required placeholder="192.168.1.100">
</div>
<div class="form-group">
<label>Server Port:</label>
<input type="number" class="server-port" required placeholder="8080">
</div>
<div class="form-group">
<label>Server Options:</label>
<input type="text" class="server-options" placeholder="check">
</div>
<button type="button" class="delete-btn" onclick="this.parentElement.remove()">Remove Server</button>
`;
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
serverDiv.innerHTML = serverHTML;
Adding web interface
2025-03-06 16:51:29 -08:00
serverList.appendChild(serverDiv);
}
document.getElementById('domainForm').addEventListener('submit', async (e) => {
e.preventDefault();
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
const serverItems = document.getElementById('serverList').getElementsByClassName('server-item');
troubleshoot errors with web interface
2025-03-06 17:14:42 -08:00
const domainInput = document.getElementById('domain');
const backendNameInput = document.getElementById('backendName');
const templateOverrideInput = document.getElementById('templateOverride');
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');
Fix issue where backend was not getting created
2025-03-06 21:03:08 -08:00
if (!nameInput || !addressInput || !portInput) {
showStatus('Server configuration is incomplete', 'error');
troubleshoot errors with web interface
2025-03-06 17:14:42 -08:00
return;
}
Fix issue where backend was not getting created
2025-03-06 21:03:08 -08:00
if (!nameInput.value || !addressInput.value || !portInput.value) {
showStatus('Please fill in all required server fields', 'error');
troubleshoot errors with web interface
2025-03-06 17:14:42 -08:00
return;
}
servers.push({
name: nameInput.value,
address: addressInput.value,
port: parseInt(portInput.value),
Fix issue where backend was not getting created
2025-03-06 21:03:08 -08:00
options: optionsInput.value || "check"
troubleshoot errors with web interface
2025-03-06 17:14:42 -08:00
});
}
Adding web interface
2025-03-06 16:51:29 -08:00
const data = {
troubleshoot errors with web interface
2025-03-06 17:14:42 -08:00
domain: domainInput.value,
backend_name: backendNameInput.value,
Fix issue where backend was not getting created
2025-03-06 21:03:08 -08:00
template_override: templateOverrideInput.value || null,
Adding web interface
2025-03-06 16:51:29 -08:00
servers: servers
};
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
Adding web interface
2025-03-06 16:51:29 -08:00
try {
const response = await fetch('/api/domain', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
Fix issue where backend was not getting created
2025-03-06 21:03:08 -08:00
const responseData = await response.json();
Adding web interface
2025-03-06 16:51:29 -08:00
if (response.ok) {
Fix issue where backend was not getting created
2025-03-06 21:03:08 -08:00
showStatus(`Domain added successfully! Domain ID: ${responseData.domain_id}`, 'success');
Adding web interface
2025-03-06 16:51:29 -08:00
document.getElementById('domainForm').reset();
troubleshoot errors with web interface
2025-03-06 17:14:42 -08:00
document.getElementById('serverList').innerHTML = '';
fix issue with existing domains and new domains conflicting
2025-03-06 17:45:02 -08:00
addServerField();
loadDomains();
Adding web interface
2025-03-06 16:51:29 -08:00
} else {
Fix issue where backend was not getting created
2025-03-06 21:03:08 -08:00
showStatus('Failed to add domain: ' + (responseData.message || 'Unknown error'), 'error');
Adding web interface
2025-03-06 16:51:29 -08:00
}
} catch (error) {
showStatus('Error: ' + error.message, 'error');
troubleshoot errors with web interface
2025-03-06 17:14:42 -08:00
console.error('Error details:', error);
Adding web interface
2025-03-06 16:51:29 -08:00
}
});
Adding reload function and more tweaks for backends
2025-03-09 10:59:03 -07:00
async function reloadHAProxy() {
try {
const response = await fetch('/api/reload', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
}
});
if (response.ok) {
showStatus('HAProxy reloaded successfully', 'success');
} else {
const data = await response.json();
showStatus('Failed to reload HAProxy: ' + (data.message || 'Unknown error'), 'error');
}
} catch (error) {
showStatus('Error: ' + error.message, 'error');
console.error('Error reloading HAProxy:', error);
}
}
Adding web interface
2025-03-06 16:51:29 -08:00
async function requestSSL(domain) {
try {
const response = await fetch('/api/ssl', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ domain })
});
if (response.ok) {
showStatus(`SSL certificate requested for ${domain}`, 'success');
loadDomains();
} else {
showStatus('Failed to request SSL certificate', 'error');
}
} catch (error) {
showStatus('Error: ' + error.message, 'error');
}
}
async function deleteDomain(domain) {
if (!confirm(`Are you sure you want to delete ${domain}?`)) {
return;
}
try {
const response = await fetch('/api/domain', {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ domain })
});
if (response.ok) {
showStatus(`Domain ${domain} deleted successfully`, 'success');
loadDomains();
} else {
showStatus('Failed to delete domain', 'error');
}
} catch (error) {
showStatus('Error: ' + error.message, 'error');
}
}
Adding config regenerate
2025-03-07 19:06:38 -08:00
async function regenerateConfig() {
try {
const response = await fetch('/api/regenerate', {
fix method to GET instead of POST
2025-03-07 19:13:41 -08:00
method: 'GET',
Adding config regenerate
2025-03-07 19:06:38 -08:00
headers: {
'Content-Type': 'application/json',
}
});
if (response.ok) {
showStatus('HAProxy configuration regenerated successfully', 'success');
} else {
const data = await response.json();
showStatus('Failed to regenerate configuration: ' + (data.message || 'Unknown error'), 'error');
}
} catch (error) {
showStatus('Error: ' + error.message, 'error');
console.error('Error regenerating config:', error);
}
}
function showStatus(message, type) {
const statusDiv = document.createElement('div');
statusDiv.className = `status ${type}`;
statusDiv.textContent = message;
const container = document.querySelector('.container');
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);
}
function loadDomains() {
fetch('/api/domains')
Fix HAProxy 2.6 compatibility for default backend - Replace http-response set-body (HAProxy 2.8+) with local server approach - Add separate Flask server on port 8080 to serve default page - Update default backend template to use local server instead of inline HTML - Maintain all customization features via environment variables - Fix JavaScript error handling for domains API response
2025-07-11 19:27:42 -07:00
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response.json();
})
Adding config regenerate
2025-03-07 19:06:38 -08:00
.then(domains => {
const domainList = document.getElementById('domainList');
domainList.innerHTML = '';
Fix HAProxy 2.6 compatibility for default backend - Replace http-response set-body (HAProxy 2.8+) with local server approach - Add separate Flask server on port 8080 to serve default page - Update default backend template to use local server instead of inline HTML - Maintain all customization features via environment variables - Fix JavaScript error handling for domains API response
2025-07-11 19:27:42 -07:00
// Ensure domains is an array
if (!Array.isArray(domains)) {
console.error('Expected array of domains, got:', typeof domains, domains);
showStatus('Error: Invalid response format from server', 'error');
return;
}
if (domains.length === 0) {
domainList.innerHTML = '<div class="domain-list-item"><p>No domains configured yet. Add your first domain above.</p></div>';
return;
}
Adding config regenerate
2025-03-07 19:06:38 -08:00
domains.forEach(domain => {
const domainDiv = document.createElement('div');
domainDiv.className = 'domain-list-item';
domainDiv.innerHTML = `
<h3>${domain.domain}</h3>
Fix HAProxy 2.6 compatibility for default backend - Replace http-response set-body (HAProxy 2.8+) with local server approach - Add separate Flask server on port 8080 to serve default page - Update default backend template to use local server instead of inline HTML - Maintain all customization features via environment variables - Fix JavaScript error handling for domains API response
2025-07-11 19:27:42 -07:00
<p>Backend: ${domain.backend_name || 'Not configured'}</p>
Adding config regenerate
2025-03-07 19:06:38 -08:00
<p>SSL: ${domain.ssl_enabled ? 'Enabled' : 'Disabled'}</p>
<button onclick="requestSSL('${domain.domain}')" class="ssl-btn">
${domain.ssl_enabled ? 'Renew SSL' : 'Enable SSL'}
</button>
<button onclick="deleteDomain('${domain.domain}')" class="delete-btn">Delete Domain</button>
`;
domainList.appendChild(domainDiv);
});
})
.catch(error => {
console.error('Error loading domains:', error);
showStatus('Error loading domains: ' + error.message, 'error');
});
}
addServerField();
loadDomains();
</script>
</body>
update again for GET Method
2025-03-07 19:29:20 -08:00
</html>
Reference in New Issue Copy Permalink