CyberMind-FR
3a5655451e
- Add showEditVhostModal() for editing virtual host properties - Add showEditBackendModal() for editing backend configuration - Add showEditServerModal() for editing server properties - Modern card-based UI with inline edit/delete actions - Toggle enable/disable for backends - Fix haproxyctl to read server option from backend UCI sections - Add debug logging to container startup script Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
376 lines
12 KiB
JavaScript
376 lines
12 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require dom';
|
|
'require ui';
|
|
'require haproxy.api as api';
|
|
|
|
/**
|
|
* HAProxy Virtual Hosts Management
|
|
* Copyright (C) 2025 CyberMind.fr
|
|
*/
|
|
|
|
return view.extend({
|
|
title: _('Virtual Hosts'),
|
|
|
|
load: function() {
|
|
// Load CSS
|
|
var cssLink = document.createElement('link');
|
|
cssLink.rel = 'stylesheet';
|
|
cssLink.href = L.resource('haproxy/dashboard.css');
|
|
document.head.appendChild(cssLink);
|
|
|
|
return Promise.all([
|
|
api.listVhosts(),
|
|
api.listBackends()
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var self = this;
|
|
var vhosts = (data[0] && data[0].vhosts) || data[0] || [];
|
|
var backends = (data[1] && data[1].backends) || data[1] || [];
|
|
|
|
return E('div', { 'class': 'haproxy-dashboard' }, [
|
|
// Page Header
|
|
E('div', { 'class': 'hp-page-header' }, [
|
|
E('div', {}, [
|
|
E('h1', { 'class': 'hp-page-title' }, [
|
|
E('span', { 'class': 'hp-page-title-icon' }, '\u{1F310}'),
|
|
'Virtual Hosts'
|
|
]),
|
|
E('p', { 'class': 'hp-page-subtitle' }, 'Configure domain-based routing to backend servers')
|
|
]),
|
|
E('a', {
|
|
'href': L.url('admin/services/haproxy/overview'),
|
|
'class': 'hp-btn hp-btn-secondary'
|
|
}, ['\u2190', ' Back to Overview'])
|
|
]),
|
|
|
|
// Add Virtual Host Card
|
|
E('div', { 'class': 'hp-card' }, [
|
|
E('div', { 'class': 'hp-card-header' }, [
|
|
E('div', { 'class': 'hp-card-title' }, [
|
|
E('span', { 'class': 'hp-card-title-icon' }, '\u2795'),
|
|
'Add Virtual Host'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'hp-card-body' }, [
|
|
E('div', { 'class': 'hp-grid hp-grid-2', 'style': 'gap: 16px;' }, [
|
|
E('div', { 'class': 'hp-form-group' }, [
|
|
E('label', { 'class': 'hp-form-label' }, 'Domain'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'new-domain',
|
|
'class': 'hp-form-input',
|
|
'placeholder': 'example.com or *.example.com'
|
|
})
|
|
]),
|
|
E('div', { 'class': 'hp-form-group' }, [
|
|
E('label', { 'class': 'hp-form-label' }, 'Backend'),
|
|
E('select', { 'id': 'new-backend', 'class': 'hp-form-input' },
|
|
[E('option', { 'value': '' }, '-- Select Backend --')].concat(
|
|
backends.map(function(b) {
|
|
return E('option', { 'value': b.id || b.name }, b.name);
|
|
})
|
|
)
|
|
)
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; gap: 24px; flex-wrap: wrap; margin: 16px 0;' }, [
|
|
E('label', { 'class': 'hp-form-checkbox' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'new-ssl', 'checked': true }),
|
|
E('span', {}, 'Enable SSL/TLS')
|
|
]),
|
|
E('label', { 'class': 'hp-form-checkbox' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'new-ssl-redirect', 'checked': true }),
|
|
E('span', {}, 'Force HTTPS redirect')
|
|
]),
|
|
E('label', { 'class': 'hp-form-checkbox' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'new-acme', 'checked': true }),
|
|
E('span', {}, 'Auto-renew with ACME (Let\'s Encrypt)')
|
|
])
|
|
]),
|
|
E('button', {
|
|
'class': 'hp-btn hp-btn-primary',
|
|
'click': function() { self.handleAddVhost(backends); }
|
|
}, ['\u2795', ' Add Virtual Host'])
|
|
])
|
|
]),
|
|
|
|
// Virtual Hosts List
|
|
E('div', { 'class': 'hp-card' }, [
|
|
E('div', { 'class': 'hp-card-header' }, [
|
|
E('div', { 'class': 'hp-card-title' }, [
|
|
E('span', { 'class': 'hp-card-title-icon' }, '\u{1F4CB}'),
|
|
'Configured Virtual Hosts (' + vhosts.length + ')'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'hp-card-body no-padding' },
|
|
vhosts.length === 0 ? [
|
|
E('div', { 'class': 'hp-empty' }, [
|
|
E('div', { 'class': 'hp-empty-icon' }, '\u{1F310}'),
|
|
E('div', { 'class': 'hp-empty-text' }, 'No virtual hosts configured'),
|
|
E('div', { 'class': 'hp-empty-hint' }, 'Add a virtual host above to start routing traffic')
|
|
])
|
|
] : [
|
|
this.renderVhostsTable(vhosts, backends)
|
|
]
|
|
)
|
|
])
|
|
]);
|
|
},
|
|
|
|
renderVhostsTable: function(vhosts, backends) {
|
|
var self = this;
|
|
|
|
var backendMap = {};
|
|
backends.forEach(function(b) {
|
|
backendMap[b.id || b.name] = b.name;
|
|
});
|
|
|
|
return E('table', { 'class': 'hp-table' }, [
|
|
E('thead', {}, [
|
|
E('tr', {}, [
|
|
E('th', {}, 'Domain'),
|
|
E('th', {}, 'Backend'),
|
|
E('th', {}, 'SSL Configuration'),
|
|
E('th', {}, 'Status'),
|
|
E('th', { 'style': 'width: 220px; text-align: right;' }, 'Actions')
|
|
])
|
|
]),
|
|
E('tbody', {}, vhosts.map(function(vh) {
|
|
return E('tr', { 'data-id': vh.id }, [
|
|
E('td', {}, [
|
|
E('div', { 'style': 'font-weight: 600;' }, vh.domain),
|
|
vh.ssl_redirect ? E('small', { 'style': 'color: var(--hp-text-muted); font-size: 12px;' },
|
|
'\u{1F512} Redirects HTTP \u2192 HTTPS') : null
|
|
]),
|
|
E('td', {}, [
|
|
E('span', { 'class': 'hp-mono' }, backendMap[vh.backend] || vh.backend || '-')
|
|
]),
|
|
E('td', {}, [
|
|
vh.ssl ? E('span', { 'class': 'hp-badge hp-badge-info', 'style': 'margin-right: 6px;' }, '\u{1F512} SSL') : null,
|
|
vh.acme ? E('span', { 'class': 'hp-badge hp-badge-success' }, '\u{1F504} ACME') : null,
|
|
!vh.ssl && !vh.acme ? E('span', { 'class': 'hp-badge hp-badge-warning' }, 'No SSL') : null
|
|
].filter(function(e) { return e !== null; })),
|
|
E('td', {}, E('span', {
|
|
'class': 'hp-badge ' + (vh.enabled ? 'hp-badge-success' : 'hp-badge-danger')
|
|
}, vh.enabled ? '\u2705 Active' : '\u26D4 Disabled')),
|
|
E('td', { 'style': 'text-align: right;' }, [
|
|
E('button', {
|
|
'class': 'hp-btn hp-btn-sm hp-btn-primary',
|
|
'style': 'margin-right: 8px;',
|
|
'click': function() { self.showEditVhostModal(vh, backends); }
|
|
}, '\u270F Edit'),
|
|
E('button', {
|
|
'class': 'hp-btn hp-btn-sm ' + (vh.enabled ? 'hp-btn-secondary' : 'hp-btn-success'),
|
|
'style': 'margin-right: 8px;',
|
|
'click': function() { self.handleToggleVhost(vh); }
|
|
}, vh.enabled ? 'Disable' : 'Enable'),
|
|
E('button', {
|
|
'class': 'hp-btn hp-btn-sm hp-btn-danger',
|
|
'click': function() { self.handleDeleteVhost(vh); }
|
|
}, 'Delete')
|
|
])
|
|
]);
|
|
}))
|
|
]);
|
|
},
|
|
|
|
showEditVhostModal: function(vh, backends) {
|
|
var self = this;
|
|
|
|
ui.showModal('Edit Virtual Host: ' + vh.domain, [
|
|
E('div', { 'style': 'max-width: 500px;' }, [
|
|
E('div', { 'class': 'cbi-value' }, [
|
|
E('label', { 'class': 'cbi-value-title' }, 'Domain'),
|
|
E('div', { 'class': 'cbi-value-field' }, [
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'edit-domain',
|
|
'class': 'cbi-input-text',
|
|
'value': vh.domain,
|
|
'style': 'width: 100%;'
|
|
})
|
|
])
|
|
]),
|
|
E('div', { 'class': 'cbi-value' }, [
|
|
E('label', { 'class': 'cbi-value-title' }, 'Backend'),
|
|
E('div', { 'class': 'cbi-value-field' }, [
|
|
E('select', { 'id': 'edit-backend', 'class': 'cbi-input-select', 'style': 'width: 100%;' },
|
|
[E('option', { 'value': '' }, '-- Select Backend --')].concat(
|
|
backends.map(function(b) {
|
|
var selected = (vh.backend === (b.id || b.name)) ? { 'selected': true } : {};
|
|
return E('option', Object.assign({ 'value': b.id || b.name }, selected), b.name);
|
|
})
|
|
)
|
|
)
|
|
])
|
|
]),
|
|
E('div', { 'class': 'cbi-value' }, [
|
|
E('label', { 'class': 'cbi-value-title' }, 'SSL Options'),
|
|
E('div', { 'class': 'cbi-value-field' }, [
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 8px;' }, [
|
|
E('label', {}, [
|
|
E('input', { 'type': 'checkbox', 'id': 'edit-ssl', 'checked': vh.ssl }),
|
|
' Enable SSL/TLS'
|
|
]),
|
|
E('label', {}, [
|
|
E('input', { 'type': 'checkbox', 'id': 'edit-ssl-redirect', 'checked': vh.ssl_redirect }),
|
|
' Force HTTPS redirect'
|
|
]),
|
|
E('label', {}, [
|
|
E('input', { 'type': 'checkbox', 'id': 'edit-acme', 'checked': vh.acme }),
|
|
' Auto-renew with ACME (Let\'s Encrypt)'
|
|
])
|
|
])
|
|
])
|
|
]),
|
|
E('div', { 'class': 'cbi-value' }, [
|
|
E('label', { 'class': 'cbi-value-title' }, 'Status'),
|
|
E('div', { 'class': 'cbi-value-field' }, [
|
|
E('label', {}, [
|
|
E('input', { 'type': 'checkbox', 'id': 'edit-enabled', 'checked': vh.enabled }),
|
|
' Enabled'
|
|
])
|
|
])
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px;' }, [
|
|
E('button', {
|
|
'class': 'hp-btn hp-btn-secondary',
|
|
'click': ui.hideModal
|
|
}, 'Cancel'),
|
|
E('button', {
|
|
'class': 'hp-btn hp-btn-primary',
|
|
'click': function() {
|
|
var domain = document.getElementById('edit-domain').value.trim();
|
|
var backend = document.getElementById('edit-backend').value;
|
|
var ssl = document.getElementById('edit-ssl').checked ? 1 : 0;
|
|
var sslRedirect = document.getElementById('edit-ssl-redirect').checked ? 1 : 0;
|
|
var acme = document.getElementById('edit-acme').checked ? 1 : 0;
|
|
var enabled = document.getElementById('edit-enabled').checked ? 1 : 0;
|
|
|
|
if (!domain) {
|
|
self.showToast('Domain is required', 'error');
|
|
return;
|
|
}
|
|
|
|
ui.hideModal();
|
|
api.updateVhost(vh.id, domain, backend, ssl, sslRedirect, acme, enabled).then(function(res) {
|
|
if (res.success) {
|
|
self.showToast('Virtual host updated', 'success');
|
|
window.location.reload();
|
|
} else {
|
|
self.showToast('Failed: ' + (res.error || 'Unknown error'), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, 'Save Changes')
|
|
])
|
|
]);
|
|
},
|
|
|
|
handleAddVhost: function(backends) {
|
|
var self = this;
|
|
var domain = document.getElementById('new-domain').value.trim();
|
|
var backend = document.getElementById('new-backend').value;
|
|
var ssl = document.getElementById('new-ssl').checked ? 1 : 0;
|
|
var sslRedirect = document.getElementById('new-ssl-redirect').checked ? 1 : 0;
|
|
var acme = document.getElementById('new-acme').checked ? 1 : 0;
|
|
|
|
if (!domain) {
|
|
self.showToast('Please enter a domain name', 'error');
|
|
return;
|
|
}
|
|
|
|
// Validate domain format
|
|
if (!/^(\*\.)?[a-zA-Z0-9][-a-zA-Z0-9]*(\.[a-zA-Z0-9][-a-zA-Z0-9]*)+$/.test(domain)) {
|
|
self.showToast('Invalid domain format', 'error');
|
|
return;
|
|
}
|
|
|
|
return api.createVhost(domain, backend, ssl, sslRedirect, acme, 1).then(function(res) {
|
|
if (res.success) {
|
|
self.showToast('Virtual host "' + domain + '" created', 'success');
|
|
window.location.reload();
|
|
} else {
|
|
self.showToast('Failed: ' + (res.error || 'Unknown error'), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
handleToggleVhost: function(vh) {
|
|
var self = this;
|
|
var newEnabled = vh.enabled ? 0 : 1;
|
|
var action = newEnabled ? 'enabled' : 'disabled';
|
|
|
|
return api.updateVhost(vh.id, null, null, null, null, null, newEnabled).then(function(res) {
|
|
if (res.success) {
|
|
self.showToast('Virtual host ' + action, 'success');
|
|
window.location.reload();
|
|
} else {
|
|
self.showToast('Failed: ' + (res.error || 'Unknown error'), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
handleDeleteVhost: function(vh) {
|
|
var self = this;
|
|
|
|
ui.showModal('Delete Virtual Host', [
|
|
E('div', { 'style': 'margin-bottom: 16px;' }, [
|
|
E('p', { 'style': 'margin: 0;' }, 'Are you sure you want to delete this virtual host?'),
|
|
E('div', {
|
|
'style': 'margin-top: 12px; padding: 12px; background: var(--hp-bg-tertiary, #f5f5f5); border-radius: 8px; font-family: monospace;'
|
|
}, vh.domain)
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
|
E('button', {
|
|
'class': 'hp-btn hp-btn-secondary',
|
|
'click': ui.hideModal
|
|
}, 'Cancel'),
|
|
E('button', {
|
|
'class': 'hp-btn hp-btn-danger',
|
|
'click': function() {
|
|
ui.hideModal();
|
|
api.deleteVhost(vh.id).then(function(res) {
|
|
if (res.success) {
|
|
self.showToast('Virtual host deleted', 'success');
|
|
window.location.reload();
|
|
} else {
|
|
self.showToast('Failed: ' + (res.error || 'Unknown error'), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, 'Delete')
|
|
])
|
|
]);
|
|
},
|
|
|
|
showToast: function(message, type) {
|
|
var existing = document.querySelector('.hp-toast');
|
|
if (existing) existing.remove();
|
|
|
|
var iconMap = {
|
|
'success': '\u2705',
|
|
'error': '\u274C',
|
|
'warning': '\u26A0\uFE0F'
|
|
};
|
|
|
|
var toast = E('div', { 'class': 'hp-toast ' + (type || '') }, [
|
|
E('span', {}, iconMap[type] || '\u2139\uFE0F'),
|
|
message
|
|
]);
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(function() {
|
|
toast.remove();
|
|
}, 4000);
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|