style(haproxy): Migrate backends.js to KISS theme
Rewrote HAProxy Backends dashboard to use KissTheme: - Removed external dashboard.css dependency - Replaced all hp- classes with kiss- classes and inline styles - Self-contained inline CSS using KISS variables - Backend cards with server lists, health check info - Add backend form with mode, balance, health check options - Add/edit server modals with quick service selector - Delete confirmations and toast notifications - Consistent styling with vhosts.js Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
7ea2ff43ba
commit
053c49217c
@ -6,7 +6,7 @@
|
|||||||
'require secubox/kiss-theme';
|
'require secubox/kiss-theme';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* HAProxy Backends Management
|
* HAProxy Backends Management - KISS Style
|
||||||
* Copyright (C) 2025 CyberMind.fr
|
* Copyright (C) 2025 CyberMind.fr
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@ -14,12 +14,6 @@ return view.extend({
|
|||||||
title: _('Backends'),
|
title: _('Backends'),
|
||||||
|
|
||||||
load: function() {
|
load: function() {
|
||||||
// Load CSS
|
|
||||||
var cssLink = document.createElement('link');
|
|
||||||
cssLink.rel = 'stylesheet';
|
|
||||||
cssLink.href = L.resource('haproxy/dashboard.css');
|
|
||||||
document.head.appendChild(cssLink);
|
|
||||||
|
|
||||||
return api.listBackends().then(function(result) {
|
return api.listBackends().then(function(result) {
|
||||||
var backends = (result && result.backends) || result || [];
|
var backends = (result && result.backends) || result || [];
|
||||||
return Promise.all([
|
return Promise.all([
|
||||||
@ -37,6 +31,7 @@ return view.extend({
|
|||||||
var servers = (serversResult && serversResult.servers) || serversResult || [];
|
var servers = (serversResult && serversResult.servers) || serversResult || [];
|
||||||
var exposedResult = data[2] || {};
|
var exposedResult = data[2] || {};
|
||||||
self.exposedServices = (exposedResult && exposedResult.services) || exposedResult || [];
|
self.exposedServices = (exposedResult && exposedResult.services) || exposedResult || [];
|
||||||
|
var K = KissTheme;
|
||||||
|
|
||||||
// Group servers by backend
|
// Group servers by backend
|
||||||
var serversByBackend = {};
|
var serversByBackend = {};
|
||||||
@ -47,189 +42,188 @@ return view.extend({
|
|||||||
serversByBackend[s.backend].push(s);
|
serversByBackend[s.backend].push(s);
|
||||||
});
|
});
|
||||||
|
|
||||||
var content = E('div', { 'class': 'haproxy-dashboard' }, [
|
var content = K.E('div', {}, [
|
||||||
// Page Header
|
// Page Header
|
||||||
E('div', { 'class': 'hp-page-header' }, [
|
K.E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;' }, [
|
||||||
E('div', {}, [
|
K.E('div', {}, [
|
||||||
E('h1', { 'class': 'hp-page-title' }, [
|
K.E('h2', { 'style': 'margin: 0; font-size: 24px; display: flex; align-items: center; gap: 10px;' }, [
|
||||||
E('span', { 'class': 'hp-page-title-icon' }, '\u{1F5C4}'),
|
K.E('span', {}, '🗄️'),
|
||||||
'Backends'
|
'Backends'
|
||||||
]),
|
]),
|
||||||
E('p', { 'class': 'hp-page-subtitle' }, 'Manage backend server pools and load balancing settings')
|
K.E('p', { 'style': 'margin: 4px 0 0; color: var(--kiss-muted, #94a3b8); font-size: 14px;' },
|
||||||
]),
|
'Manage backend server pools and load balancing settings')
|
||||||
E('a', {
|
])
|
||||||
'href': L.url('admin/services/haproxy/overview'),
|
|
||||||
'class': 'hp-btn hp-btn-secondary'
|
|
||||||
}, ['\u2190', ' Back to Overview'])
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// Add Backend Card
|
// Add Backend Card
|
||||||
E('div', { 'class': 'hp-card' }, [
|
K.E('div', { 'class': 'kiss-card' }, [
|
||||||
E('div', { 'class': 'hp-card-header' }, [
|
K.E('div', { 'class': 'kiss-card-title' }, ['➕ ', 'Add Backend']),
|
||||||
E('div', { 'class': 'hp-card-title' }, [
|
K.E('div', { 'class': 'kiss-grid kiss-grid-2', 'style': 'gap: 16px; margin-bottom: 16px;' }, [
|
||||||
E('span', { 'class': 'hp-card-title-icon' }, '\u2795'),
|
K.E('div', {}, [
|
||||||
'Add Backend'
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Name'),
|
||||||
])
|
K.E('input', {
|
||||||
]),
|
|
||||||
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' }, 'Name'),
|
|
||||||
E('input', {
|
|
||||||
'type': 'text',
|
'type': 'text',
|
||||||
'id': 'new-backend-name',
|
'id': 'new-backend-name',
|
||||||
'class': 'hp-form-input',
|
'placeholder': 'web-servers',
|
||||||
'placeholder': 'web-servers'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'hp-form-group' }, [
|
K.E('div', {}, [
|
||||||
E('label', { 'class': 'hp-form-label' }, 'Mode'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Mode'),
|
||||||
E('select', { 'id': 'new-backend-mode', 'class': 'hp-form-input' }, [
|
K.E('select', {
|
||||||
E('option', { 'value': 'http', 'selected': true }, 'HTTP'),
|
'id': 'new-backend-mode',
|
||||||
E('option', { 'value': 'tcp' }, 'TCP')
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
|
}, [
|
||||||
|
K.E('option', { 'value': 'http', 'selected': true }, 'HTTP'),
|
||||||
|
K.E('option', { 'value': 'tcp' }, 'TCP')
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'hp-form-group' }, [
|
K.E('div', {}, [
|
||||||
E('label', { 'class': 'hp-form-label' }, 'Balance Algorithm'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Balance Algorithm'),
|
||||||
E('select', { 'id': 'new-backend-balance', 'class': 'hp-form-input' }, [
|
K.E('select', {
|
||||||
E('option', { 'value': 'roundrobin', 'selected': true }, 'Round Robin'),
|
'id': 'new-backend-balance',
|
||||||
E('option', { 'value': 'leastconn' }, 'Least Connections'),
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
E('option', { 'value': 'source' }, 'Source IP Hash'),
|
}, [
|
||||||
E('option', { 'value': 'uri' }, 'URI Hash'),
|
K.E('option', { 'value': 'roundrobin', 'selected': true }, 'Round Robin'),
|
||||||
E('option', { 'value': 'first' }, 'First Available')
|
K.E('option', { 'value': 'leastconn' }, 'Least Connections'),
|
||||||
|
K.E('option', { 'value': 'source' }, 'Source IP Hash'),
|
||||||
|
K.E('option', { 'value': 'uri' }, 'URI Hash'),
|
||||||
|
K.E('option', { 'value': 'first' }, 'First Available')
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'hp-form-group' }, [
|
K.E('div', {}, [
|
||||||
E('label', { 'class': 'hp-form-label' }, 'Health Check'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Health Check'),
|
||||||
E('select', { 'id': 'new-backend-health', 'class': 'hp-form-input' }, [
|
K.E('select', {
|
||||||
E('option', { 'value': '' }, 'None'),
|
'id': 'new-backend-health',
|
||||||
E('option', { 'value': 'httpchk' }, 'HTTP Check')
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
|
}, [
|
||||||
|
K.E('option', { 'value': '' }, 'None'),
|
||||||
|
K.E('option', { 'value': 'httpchk' }, 'HTTP Check')
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'hp-form-group' }, [
|
K.E('div', { 'style': 'grid-column: span 2;' }, [
|
||||||
E('label', { 'class': 'hp-form-label' }, 'Health Check URI'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Health Check URI'),
|
||||||
E('input', {
|
K.E('input', {
|
||||||
'type': 'text',
|
'type': 'text',
|
||||||
'id': 'new-backend-health-uri',
|
'id': 'new-backend-health-uri',
|
||||||
'class': 'hp-form-input',
|
'placeholder': '/_stcore/health or /health',
|
||||||
'placeholder': '/_stcore/health or /health'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-primary',
|
'class': 'kiss-btn kiss-btn-green',
|
||||||
'style': 'margin-top: 16px;',
|
|
||||||
'click': function() { self.handleAddBackend(); }
|
'click': function() { self.handleAddBackend(); }
|
||||||
}, ['\u2795', ' Add Backend'])
|
}, '➕ Add Backend')
|
||||||
])
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// Backends List
|
// Backends List
|
||||||
E('div', { 'class': 'hp-card' }, [
|
K.E('div', { 'class': 'kiss-card' }, [
|
||||||
E('div', { 'class': 'hp-card-header' }, [
|
K.E('div', { 'class': 'kiss-card-title' }, ['📋 ', 'Configured Backends (', String(backends.length), ')']),
|
||||||
E('div', { 'class': 'hp-card-title' }, [
|
backends.length === 0 ?
|
||||||
E('span', { 'class': 'hp-card-title-icon' }, '\u{1F4CB}'),
|
K.E('div', { 'style': 'text-align: center; padding: 40px 20px; color: var(--kiss-muted);' }, [
|
||||||
'Configured Backends (' + backends.length + ')'
|
K.E('div', { 'style': 'font-size: 48px; margin-bottom: 12px;' }, '🗄️'),
|
||||||
])
|
K.E('div', { 'style': 'font-size: 16px;' }, 'No backends configured'),
|
||||||
]),
|
K.E('div', { 'style': 'font-size: 13px; margin-top: 6px;' }, 'Add a backend above to create a server pool')
|
||||||
E('div', { 'class': 'hp-card-body' },
|
]) :
|
||||||
backends.length === 0 ? [
|
K.E('div', { 'style': 'display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px;' },
|
||||||
E('div', { 'class': 'hp-empty' }, [
|
|
||||||
E('div', { 'class': 'hp-empty-icon' }, '\u{1F5C4}'),
|
|
||||||
E('div', { 'class': 'hp-empty-text' }, 'No backends configured'),
|
|
||||||
E('div', { 'class': 'hp-empty-hint' }, 'Add a backend above to create a server pool')
|
|
||||||
])
|
|
||||||
] : [
|
|
||||||
E('div', { 'class': 'hp-backends-grid' },
|
|
||||||
backends.map(function(backend) {
|
backends.map(function(backend) {
|
||||||
return self.renderBackendCard(backend, serversByBackend[backend.id] || []);
|
return self.renderBackendCard(backend, serversByBackend[backend.id] || []);
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
]
|
|
||||||
)
|
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return KissTheme.wrap([content], 'admin/services/haproxy/backends');
|
return KissTheme.wrap(content, 'admin/services/haproxy/backends');
|
||||||
},
|
},
|
||||||
|
|
||||||
renderBackendCard: function(backend, servers) {
|
renderBackendCard: function(backend, servers) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
var K = KissTheme;
|
||||||
|
|
||||||
return E('div', { 'class': 'hp-backend-card', 'data-id': backend.id }, [
|
return K.E('div', {
|
||||||
|
'data-id': backend.id,
|
||||||
|
'style': 'background: var(--kiss-bg2, #111827); border: 1px solid var(--kiss-line, #1e293b); border-radius: 12px; overflow: hidden;'
|
||||||
|
}, [
|
||||||
// Header
|
// Header
|
||||||
E('div', { 'class': 'hp-backend-header' }, [
|
K.E('div', { 'style': 'padding: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--kiss-line, #1e293b);' }, [
|
||||||
E('div', {}, [
|
K.E('div', {}, [
|
||||||
E('h4', { 'style': 'margin: 0 0 4px 0;' }, backend.name),
|
K.E('h4', { 'style': 'margin: 0 0 4px 0; font-size: 16px; font-weight: 600;' }, backend.name),
|
||||||
E('small', { 'style': 'color: var(--hp-text-muted);' }, [
|
K.E('small', { 'style': 'color: var(--kiss-muted, #94a3b8); font-size: 12px;' }, [
|
||||||
backend.mode.toUpperCase(),
|
backend.mode.toUpperCase(),
|
||||||
' \u2022 ',
|
' • ',
|
||||||
this.getBalanceLabel(backend.balance)
|
this.getBalanceLabel(backend.balance)
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'style': 'display: flex; gap: 8px; align-items: center;' }, [
|
K.E('div', { 'style': 'display: flex; gap: 8px; align-items: center;' }, [
|
||||||
E('span', {
|
K.badge(backend.enabled ? '✅ Enabled' : '⛔ Disabled', backend.enabled ? 'green' : 'red'),
|
||||||
'class': 'hp-badge ' + (backend.enabled ? 'hp-badge-success' : 'hp-badge-danger')
|
K.E('button', {
|
||||||
}, backend.enabled ? 'Enabled' : 'Disabled'),
|
'class': 'kiss-btn',
|
||||||
E('button', {
|
'style': 'padding: 6px 10px; font-size: 12px;',
|
||||||
'class': 'hp-btn hp-btn-sm hp-btn-primary',
|
|
||||||
'click': function() { self.showEditBackendModal(backend); }
|
'click': function() { self.showEditBackendModal(backend); }
|
||||||
}, '\u270F')
|
}, '✏️')
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// Health check info
|
// Health check info
|
||||||
backend.health_check ? E('div', { 'style': 'padding: 8px 16px; background: var(--hp-bg-tertiary, #f5f5f5); font-size: 12px; color: var(--hp-text-muted);' }, [
|
backend.health_check ? K.E('div', { 'style': 'padding: 8px 16px; background: var(--kiss-bg, #0f172a); font-size: 12px; color: var(--kiss-muted, #94a3b8);' }, [
|
||||||
'\u{1F3E5} Health Check: ',
|
'🏥 Health Check: ',
|
||||||
E('code', {}, backend.health_check + (backend.health_check_uri ? ' ' + backend.health_check_uri : ''))
|
K.E('code', { 'style': 'background: var(--kiss-bg2); padding: 2px 6px; border-radius: 4px;' },
|
||||||
|
backend.health_check + (backend.health_check_uri ? ' ' + backend.health_check_uri : ''))
|
||||||
]) : null,
|
]) : null,
|
||||||
|
|
||||||
// Servers
|
// Servers
|
||||||
E('div', { 'class': 'hp-backend-servers' },
|
K.E('div', { 'style': 'padding: 12px 16px;' },
|
||||||
servers.length === 0 ? [
|
servers.length === 0 ? [
|
||||||
E('div', { 'style': 'padding: 20px; text-align: center; color: var(--hp-text-muted);' }, [
|
K.E('div', { 'style': 'padding: 20px; text-align: center; color: var(--kiss-muted, #94a3b8);' }, [
|
||||||
E('div', {}, '\u{1F4E6} No servers configured'),
|
K.E('div', {}, '📦 No servers configured'),
|
||||||
E('small', {}, 'Add a server to this backend')
|
K.E('small', {}, 'Add a server to this backend')
|
||||||
])
|
])
|
||||||
] : servers.map(function(server) {
|
] : servers.map(function(server) {
|
||||||
return E('div', { 'class': 'hp-server-item' }, [
|
return K.E('div', {
|
||||||
E('div', { 'class': 'hp-server-info' }, [
|
'style': 'display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--kiss-bg, #0f172a); border-radius: 8px; margin-bottom: 8px;'
|
||||||
E('span', { 'class': 'hp-server-name' }, server.name),
|
}, [
|
||||||
E('span', { 'class': 'hp-server-address' }, server.address + ':' + server.port)
|
K.E('div', {}, [
|
||||||
|
K.E('span', { 'style': 'font-weight: 500; font-size: 14px;' }, server.name),
|
||||||
|
K.E('span', { 'style': 'color: var(--kiss-muted); font-size: 13px; margin-left: 10px; font-family: monospace;' },
|
||||||
|
server.address + ':' + server.port)
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'hp-server-actions' }, [
|
K.E('div', { 'style': 'display: flex; gap: 6px; align-items: center;' }, [
|
||||||
E('span', { 'class': 'hp-badge hp-badge-secondary', 'style': 'font-size: 11px;' }, 'W:' + server.weight),
|
K.E('span', { 'style': 'font-size: 11px; padding: 2px 6px; background: var(--kiss-bg2); border-radius: 4px; color: var(--kiss-muted);' }, 'W:' + server.weight),
|
||||||
server.check ? E('span', { 'class': 'hp-badge hp-badge-info', 'style': 'font-size: 11px;' }, '\u2713 Check') : null,
|
server.check ? K.badge('✓ Check', 'blue') : null,
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-sm hp-btn-secondary',
|
'class': 'kiss-btn',
|
||||||
'style': 'padding: 2px 6px;',
|
'style': 'padding: 4px 8px; font-size: 11px;',
|
||||||
'click': function() { self.showEditServerModal(server, backend); }
|
'click': function() { self.showEditServerModal(server, backend); }
|
||||||
}, '\u270F'),
|
}, '✏️'),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-sm hp-btn-danger',
|
'class': 'kiss-btn kiss-btn-red',
|
||||||
'style': 'padding: 2px 6px;',
|
'style': 'padding: 4px 8px; font-size: 11px;',
|
||||||
'click': function() { self.handleDeleteServer(server); }
|
'click': function() { self.handleDeleteServer(server); }
|
||||||
}, '\u2715')
|
}, '✕')
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
|
|
||||||
// Footer Actions
|
// Footer Actions
|
||||||
E('div', { 'class': 'hp-backend-footer' }, [
|
K.E('div', { 'style': 'padding: 12px 16px; border-top: 1px solid var(--kiss-line, #1e293b); display: flex; justify-content: space-between; align-items: center;' }, [
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-sm hp-btn-primary',
|
'class': 'kiss-btn kiss-btn-blue',
|
||||||
|
'style': 'padding: 6px 12px; font-size: 12px;',
|
||||||
'click': function() { self.showAddServerModal(backend); }
|
'click': function() { self.showAddServerModal(backend); }
|
||||||
}, ['\u2795', ' Add Server']),
|
}, '➕ Add Server'),
|
||||||
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
K.E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-sm ' + (backend.enabled ? 'hp-btn-secondary' : 'hp-btn-success'),
|
'class': 'kiss-btn ' + (backend.enabled ? '' : 'kiss-btn-green'),
|
||||||
|
'style': 'padding: 6px 12px; font-size: 12px;',
|
||||||
'click': function() { self.handleToggleBackend(backend); }
|
'click': function() { self.handleToggleBackend(backend); }
|
||||||
}, backend.enabled ? 'Disable' : 'Enable'),
|
}, backend.enabled ? '⏸️ Disable' : '▶️ Enable'),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-sm hp-btn-danger',
|
'class': 'kiss-btn kiss-btn-red',
|
||||||
|
'style': 'padding: 6px 12px; font-size: 12px;',
|
||||||
'click': function() { self.handleDeleteBackend(backend); }
|
'click': function() { self.handleDeleteBackend(backend); }
|
||||||
}, 'Delete')
|
}, '🗑️ Delete')
|
||||||
])
|
])
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
@ -276,82 +270,75 @@ return view.extend({
|
|||||||
|
|
||||||
showEditBackendModal: function(backend) {
|
showEditBackendModal: function(backend) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
var K = KissTheme;
|
||||||
|
|
||||||
ui.showModal('Edit Backend: ' + backend.name, [
|
var modalContent = K.E('div', { 'style': 'max-width: 480px;' }, [
|
||||||
E('div', { 'style': 'max-width: 500px;' }, [
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Name'),
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Name'),
|
K.E('input', {
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
|
||||||
E('input', {
|
|
||||||
'type': 'text',
|
'type': 'text',
|
||||||
'id': 'edit-backend-name',
|
'id': 'edit-backend-name',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'value': backend.name,
|
'value': backend.name,
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
|
]),
|
||||||
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Mode'),
|
||||||
|
K.E('select', {
|
||||||
|
'id': 'edit-backend-mode',
|
||||||
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
|
}, [
|
||||||
|
K.E('option', { 'value': 'http', 'selected': backend.mode === 'http' }, 'HTTP'),
|
||||||
|
K.E('option', { 'value': 'tcp', 'selected': backend.mode === 'tcp' }, 'TCP')
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Mode'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Balance Algorithm'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('select', {
|
||||||
E('select', { 'id': 'edit-backend-mode', 'class': 'cbi-input-select', 'style': 'width: 100%;' }, [
|
'id': 'edit-backend-balance',
|
||||||
E('option', { 'value': 'http', 'selected': backend.mode === 'http' }, 'HTTP'),
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
E('option', { 'value': 'tcp', 'selected': backend.mode === 'tcp' }, 'TCP')
|
}, [
|
||||||
])
|
K.E('option', { 'value': 'roundrobin', 'selected': backend.balance === 'roundrobin' }, 'Round Robin'),
|
||||||
|
K.E('option', { 'value': 'leastconn', 'selected': backend.balance === 'leastconn' }, 'Least Connections'),
|
||||||
|
K.E('option', { 'value': 'source', 'selected': backend.balance === 'source' }, 'Source IP Hash'),
|
||||||
|
K.E('option', { 'value': 'uri', 'selected': backend.balance === 'uri' }, 'URI Hash'),
|
||||||
|
K.E('option', { 'value': 'first', 'selected': backend.balance === 'first' }, 'First Available')
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Balance Algorithm'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Health Check'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('select', {
|
||||||
E('select', { 'id': 'edit-backend-balance', 'class': 'cbi-input-select', 'style': 'width: 100%;' }, [
|
'id': 'edit-backend-health',
|
||||||
E('option', { 'value': 'roundrobin', 'selected': backend.balance === 'roundrobin' }, 'Round Robin'),
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
E('option', { 'value': 'leastconn', 'selected': backend.balance === 'leastconn' }, 'Least Connections'),
|
}, [
|
||||||
E('option', { 'value': 'source', 'selected': backend.balance === 'source' }, 'Source IP Hash'),
|
K.E('option', { 'value': '', 'selected': !backend.health_check }, 'None'),
|
||||||
E('option', { 'value': 'uri', 'selected': backend.balance === 'uri' }, 'URI Hash'),
|
K.E('option', { 'value': 'httpchk', 'selected': backend.health_check === 'httpchk' }, 'HTTP Check')
|
||||||
E('option', { 'value': 'first', 'selected': backend.balance === 'first' }, 'First Available')
|
|
||||||
])
|
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Health Check'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Health Check URI'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('input', {
|
||||||
E('select', { 'id': 'edit-backend-health', 'class': 'cbi-input-select', 'style': 'width: 100%;' }, [
|
|
||||||
E('option', { 'value': '', 'selected': !backend.health_check }, 'None'),
|
|
||||||
E('option', { 'value': 'httpchk', 'selected': backend.health_check === 'httpchk' }, 'HTTP Check')
|
|
||||||
])
|
|
||||||
])
|
|
||||||
]),
|
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Health Check URI'),
|
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
|
||||||
E('input', {
|
|
||||||
'type': 'text',
|
'type': 'text',
|
||||||
'id': 'edit-backend-health-uri',
|
'id': 'edit-backend-health-uri',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'value': backend.health_check_uri || '',
|
'value': backend.health_check_uri || '',
|
||||||
'placeholder': '/_stcore/health or /health',
|
'placeholder': '/_stcore/health or /health',
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
}),
|
}),
|
||||||
E('small', { 'style': 'color: var(--hp-text-muted);' }, 'For Streamlit use: /_stcore/health')
|
K.E('small', { 'style': 'color: var(--kiss-muted); font-size: 11px; margin-top: 4px; display: block;' }, 'For Streamlit use: /_stcore/health')
|
||||||
|
]),
|
||||||
|
K.E('div', { 'style': 'margin-bottom: 20px;' }, [
|
||||||
|
K.E('label', { 'style': 'display: flex; align-items: center; gap: 8px; cursor: pointer;' }, [
|
||||||
|
K.E('input', { 'type': 'checkbox', 'id': 'edit-backend-enabled', 'checked': backend.enabled }),
|
||||||
|
'✅ Enabled'
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Status'),
|
K.E('button', {
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
'class': 'kiss-btn',
|
||||||
E('label', {}, [
|
|
||||||
E('input', { 'type': 'checkbox', 'id': 'edit-backend-enabled', 'checked': backend.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
|
'click': ui.hideModal
|
||||||
}, 'Cancel'),
|
}, 'Cancel'),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-primary',
|
'class': 'kiss-btn kiss-btn-green',
|
||||||
'click': function() {
|
'click': function() {
|
||||||
var name = document.getElementById('edit-backend-name').value.trim();
|
var name = document.getElementById('edit-backend-name').value.trim();
|
||||||
var mode = document.getElementById('edit-backend-mode').value;
|
var mode = document.getElementById('edit-backend-mode').value;
|
||||||
@ -375,9 +362,11 @@ return view.extend({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 'Save Changes')
|
}, '💾 Save Changes')
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
ui.showModal('Edit: ' + backend.name, [modalContent]);
|
||||||
},
|
},
|
||||||
|
|
||||||
handleToggleBackend: function(backend) {
|
handleToggleBackend: function(backend) {
|
||||||
@ -397,21 +386,20 @@ return view.extend({
|
|||||||
|
|
||||||
handleDeleteBackend: function(backend) {
|
handleDeleteBackend: function(backend) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
var K = KissTheme;
|
||||||
|
|
||||||
ui.showModal('Delete Backend', [
|
var modalContent = K.E('div', {}, [
|
||||||
E('div', { 'style': 'margin-bottom: 16px;' }, [
|
K.E('p', { 'style': 'margin: 0 0 12px;' }, 'Are you sure you want to delete this backend and all its servers?'),
|
||||||
E('p', { 'style': 'margin: 0;' }, 'Are you sure you want to delete this backend and all its servers?'),
|
K.E('div', {
|
||||||
E('div', {
|
'style': 'padding: 12px 16px; background: var(--kiss-bg2, #111827); border-radius: 8px; font-family: monospace; margin-bottom: 20px;'
|
||||||
'style': 'margin-top: 12px; padding: 12px; background: var(--hp-bg-tertiary, #f5f5f5); border-radius: 8px; font-family: monospace;'
|
}, backend.name),
|
||||||
}, backend.name)
|
K.E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
||||||
]),
|
K.E('button', {
|
||||||
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
'class': 'kiss-btn',
|
||||||
E('button', {
|
|
||||||
'class': 'hp-btn hp-btn-secondary',
|
|
||||||
'click': ui.hideModal
|
'click': ui.hideModal
|
||||||
}, 'Cancel'),
|
}, 'Cancel'),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-danger',
|
'class': 'kiss-btn kiss-btn-red',
|
||||||
'click': function() {
|
'click': function() {
|
||||||
ui.hideModal();
|
ui.hideModal();
|
||||||
api.deleteBackend(backend.id).then(function(res) {
|
api.deleteBackend(backend.id).then(function(res) {
|
||||||
@ -423,21 +411,24 @@ return view.extend({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 'Delete')
|
}, '🗑️ Delete')
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
ui.showModal('Delete Backend', [modalContent]);
|
||||||
},
|
},
|
||||||
|
|
||||||
showAddServerModal: function(backend) {
|
showAddServerModal: function(backend) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
var K = KissTheme;
|
||||||
var exposedServices = self.exposedServices || [];
|
var exposedServices = self.exposedServices || [];
|
||||||
|
|
||||||
// Build service selector options
|
// Build service selector options
|
||||||
var serviceOptions = [E('option', { 'value': '' }, '-- Select a service --')];
|
var serviceOptions = [K.E('option', { 'value': '' }, '-- Select a service --')];
|
||||||
exposedServices.forEach(function(svc) {
|
exposedServices.forEach(function(svc) {
|
||||||
var label = svc.name + ' (' + svc.address + ':' + svc.port + ')';
|
var label = svc.name + ' (' + svc.address + ':' + svc.port + ')';
|
||||||
if (svc.category) label += ' [' + svc.category + ']';
|
if (svc.category) label += ' [' + svc.category + ']';
|
||||||
serviceOptions.push(E('option', {
|
serviceOptions.push(K.E('option', {
|
||||||
'value': JSON.stringify(svc),
|
'value': JSON.stringify(svc),
|
||||||
'data-name': svc.name,
|
'data-name': svc.name,
|
||||||
'data-address': svc.address,
|
'data-address': svc.address,
|
||||||
@ -445,16 +436,13 @@ return view.extend({
|
|||||||
}, label));
|
}, label));
|
||||||
});
|
});
|
||||||
|
|
||||||
ui.showModal('Add Server to ' + backend.name, [
|
var modalContent = K.E('div', { 'style': 'max-width: 480px;' }, [
|
||||||
E('div', { 'style': 'max-width: 500px;' }, [
|
|
||||||
// Quick service selector
|
// Quick service selector
|
||||||
exposedServices.length > 0 ? E('div', { 'class': 'cbi-value' }, [
|
exposedServices.length > 0 ? K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Quick Select'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Quick Select'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('select', {
|
||||||
E('select', {
|
|
||||||
'id': 'modal-service-select',
|
'id': 'modal-service-select',
|
||||||
'class': 'cbi-input-select',
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;',
|
||||||
'style': 'width: 100%;',
|
|
||||||
'change': function(ev) {
|
'change': function(ev) {
|
||||||
var val = ev.target.value;
|
var val = ev.target.value;
|
||||||
if (val) {
|
if (val) {
|
||||||
@ -465,81 +453,66 @@ return view.extend({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, serviceOptions),
|
}, serviceOptions),
|
||||||
E('small', { 'style': 'color: var(--hp-text-muted); display: block; margin-top: 4px;' },
|
K.E('small', { 'style': 'color: var(--kiss-muted); font-size: 11px; margin-top: 4px; display: block;' },
|
||||||
'Select a known service to auto-fill details, or enter manually below')
|
'Select a known service to auto-fill details, or enter manually below')
|
||||||
])
|
|
||||||
]) : null,
|
]) : null,
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Server Name'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Server Name'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('input', {
|
||||||
E('input', {
|
|
||||||
'type': 'text',
|
'type': 'text',
|
||||||
'id': 'modal-server-name',
|
'id': 'modal-server-name',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'placeholder': 'server1',
|
'placeholder': 'server1',
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
])
|
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'class': 'kiss-grid kiss-grid-2', 'style': 'gap: 16px; margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Address'),
|
K.E('div', {}, [
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Address'),
|
||||||
E('input', {
|
K.E('input', {
|
||||||
'type': 'text',
|
'type': 'text',
|
||||||
'id': 'modal-server-address',
|
'id': 'modal-server-address',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'placeholder': '192.168.1.10',
|
'placeholder': '192.168.1.10',
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
])
|
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', {}, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Port'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Port'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('input', {
|
||||||
E('input', {
|
|
||||||
'type': 'number',
|
'type': 'number',
|
||||||
'id': 'modal-server-port',
|
'id': 'modal-server-port',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'placeholder': '8080',
|
'placeholder': '8080',
|
||||||
'value': '80',
|
'value': '80',
|
||||||
'min': '1',
|
'min': '1',
|
||||||
'max': '65535',
|
'max': '65535',
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Weight'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Weight'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('input', {
|
||||||
E('input', {
|
|
||||||
'type': 'number',
|
'type': 'number',
|
||||||
'id': 'modal-server-weight',
|
'id': 'modal-server-weight',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'value': '100',
|
'value': '100',
|
||||||
'min': '0',
|
'min': '0',
|
||||||
'max': '256',
|
'max': '256',
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
}),
|
}),
|
||||||
E('small', { 'style': 'color: var(--hp-text-muted);' }, 'Higher weight = more traffic (0-256)')
|
K.E('small', { 'style': 'color: var(--kiss-muted); font-size: 11px; margin-top: 4px; display: block;' }, 'Higher weight = more traffic (0-256)')
|
||||||
|
]),
|
||||||
|
K.E('div', { 'style': 'margin-bottom: 20px;' }, [
|
||||||
|
K.E('label', { 'style': 'display: flex; align-items: center; gap: 8px; cursor: pointer;' }, [
|
||||||
|
K.E('input', { 'type': 'checkbox', 'id': 'modal-server-check', 'checked': true }),
|
||||||
|
'🏥 Enable health check'
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Options'),
|
K.E('button', {
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
'class': 'kiss-btn',
|
||||||
E('label', {}, [
|
|
||||||
E('input', { 'type': 'checkbox', 'id': 'modal-server-check', 'checked': true }),
|
|
||||||
' Enable health check'
|
|
||||||
])
|
|
||||||
])
|
|
||||||
])
|
|
||||||
]),
|
|
||||||
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
|
'click': ui.hideModal
|
||||||
}, 'Cancel'),
|
}, 'Cancel'),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-primary',
|
'class': 'kiss-btn kiss-btn-green',
|
||||||
'click': function() {
|
'click': function() {
|
||||||
var name = document.getElementById('modal-server-name').value.trim();
|
var name = document.getElementById('modal-server-name').value.trim();
|
||||||
var address = document.getElementById('modal-server-address').value.trim();
|
var address = document.getElementById('modal-server-address').value.trim();
|
||||||
@ -562,91 +535,77 @@ return view.extend({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 'Add Server')
|
}, '➕ Add Server')
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
ui.showModal('Add Server to ' + backend.name, [modalContent]);
|
||||||
},
|
},
|
||||||
|
|
||||||
showEditServerModal: function(server, backend) {
|
showEditServerModal: function(server, backend) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
var K = KissTheme;
|
||||||
|
|
||||||
ui.showModal('Edit Server: ' + server.name, [
|
var modalContent = K.E('div', { 'style': 'max-width: 480px;' }, [
|
||||||
E('div', { 'style': 'max-width: 500px;' }, [
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Server Name'),
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Server Name'),
|
K.E('input', {
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
|
||||||
E('input', {
|
|
||||||
'type': 'text',
|
'type': 'text',
|
||||||
'id': 'edit-server-name',
|
'id': 'edit-server-name',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'value': server.name,
|
'value': server.name,
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
])
|
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'class': 'kiss-grid kiss-grid-2', 'style': 'gap: 16px; margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Address'),
|
K.E('div', {}, [
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Address'),
|
||||||
E('input', {
|
K.E('input', {
|
||||||
'type': 'text',
|
'type': 'text',
|
||||||
'id': 'edit-server-address',
|
'id': 'edit-server-address',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'value': server.address,
|
'value': server.address,
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
])
|
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', {}, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Port'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Port'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('input', {
|
||||||
E('input', {
|
|
||||||
'type': 'number',
|
'type': 'number',
|
||||||
'id': 'edit-server-port',
|
'id': 'edit-server-port',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'value': server.port,
|
'value': server.port,
|
||||||
'min': '1',
|
'min': '1',
|
||||||
'max': '65535',
|
'max': '65535',
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'margin-bottom: 16px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Weight'),
|
K.E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase; display: block; margin-bottom: 6px;' }, 'Weight'),
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
K.E('input', {
|
||||||
E('input', {
|
|
||||||
'type': 'number',
|
'type': 'number',
|
||||||
'id': 'edit-server-weight',
|
'id': 'edit-server-weight',
|
||||||
'class': 'cbi-input-text',
|
|
||||||
'value': server.weight,
|
'value': server.weight,
|
||||||
'min': '0',
|
'min': '0',
|
||||||
'max': '256',
|
'max': '256',
|
||||||
'style': 'width: 100%;'
|
'style': 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;'
|
||||||
})
|
})
|
||||||
|
]),
|
||||||
|
K.E('div', { 'style': 'margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;' }, [
|
||||||
|
K.E('label', { 'style': 'display: flex; align-items: center; gap: 8px; cursor: pointer;' }, [
|
||||||
|
K.E('input', { 'type': 'checkbox', 'id': 'edit-server-check', 'checked': server.check }),
|
||||||
|
'🏥 Enable health check'
|
||||||
|
]),
|
||||||
|
K.E('label', { 'style': 'display: flex; align-items: center; gap: 8px; cursor: pointer;' }, [
|
||||||
|
K.E('input', { 'type': 'checkbox', 'id': 'edit-server-enabled', 'checked': server.enabled }),
|
||||||
|
'✅ Enabled'
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'cbi-value' }, [
|
K.E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
||||||
E('label', { 'class': 'cbi-value-title' }, 'Options'),
|
K.E('button', {
|
||||||
E('div', { 'class': 'cbi-value-field' }, [
|
'class': 'kiss-btn',
|
||||||
E('div', { 'style': 'display: flex; flex-direction: column; gap: 8px;' }, [
|
|
||||||
E('label', {}, [
|
|
||||||
E('input', { 'type': 'checkbox', 'id': 'edit-server-check', 'checked': server.check }),
|
|
||||||
' Enable health check'
|
|
||||||
]),
|
|
||||||
E('label', {}, [
|
|
||||||
E('input', { 'type': 'checkbox', 'id': 'edit-server-enabled', 'checked': server.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
|
'click': ui.hideModal
|
||||||
}, 'Cancel'),
|
}, 'Cancel'),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-primary',
|
'class': 'kiss-btn kiss-btn-green',
|
||||||
'click': function() {
|
'click': function() {
|
||||||
var name = document.getElementById('edit-server-name').value.trim();
|
var name = document.getElementById('edit-server-name').value.trim();
|
||||||
var address = document.getElementById('edit-server-address').value.trim();
|
var address = document.getElementById('edit-server-address').value.trim();
|
||||||
@ -671,28 +630,29 @@ return view.extend({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 'Save Changes')
|
}, '💾 Save Changes')
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
ui.showModal('Edit: ' + server.name, [modalContent]);
|
||||||
},
|
},
|
||||||
|
|
||||||
handleDeleteServer: function(server) {
|
handleDeleteServer: function(server) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
var K = KissTheme;
|
||||||
|
|
||||||
ui.showModal('Delete Server', [
|
var modalContent = K.E('div', {}, [
|
||||||
E('div', { 'style': 'margin-bottom: 16px;' }, [
|
K.E('p', { 'style': 'margin: 0 0 12px;' }, 'Are you sure you want to delete this server?'),
|
||||||
E('p', { 'style': 'margin: 0;' }, 'Are you sure you want to delete this server?'),
|
K.E('div', {
|
||||||
E('div', {
|
'style': 'padding: 12px 16px; background: var(--kiss-bg2, #111827); border-radius: 8px; font-family: monospace; margin-bottom: 20px;'
|
||||||
'style': 'margin-top: 12px; padding: 12px; background: var(--hp-bg-tertiary, #f5f5f5); border-radius: 8px; font-family: monospace;'
|
}, server.name + ' (' + server.address + ':' + server.port + ')'),
|
||||||
}, server.name + ' (' + server.address + ':' + server.port + ')')
|
K.E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
||||||
]),
|
K.E('button', {
|
||||||
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
'class': 'kiss-btn',
|
||||||
E('button', {
|
|
||||||
'class': 'hp-btn hp-btn-secondary',
|
|
||||||
'click': ui.hideModal
|
'click': ui.hideModal
|
||||||
}, 'Cancel'),
|
}, 'Cancel'),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-danger',
|
'class': 'kiss-btn kiss-btn-red',
|
||||||
'click': function() {
|
'click': function() {
|
||||||
ui.hideModal();
|
ui.hideModal();
|
||||||
var inline = server.inline ? 1 : 0;
|
var inline = server.inline ? 1 : 0;
|
||||||
@ -705,30 +665,31 @@ return view.extend({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 'Delete')
|
}, '🗑️ Delete')
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
ui.showModal('Delete Server', [modalContent]);
|
||||||
},
|
},
|
||||||
|
|
||||||
showToast: function(message, type) {
|
showToast: function(message, type) {
|
||||||
var existing = document.querySelector('.hp-toast');
|
var existing = document.querySelector('.kiss-toast');
|
||||||
if (existing) existing.remove();
|
if (existing) existing.remove();
|
||||||
|
|
||||||
var iconMap = {
|
var icons = { success: '✅', error: '❌', warning: '⚠️' };
|
||||||
'success': '\u2705',
|
var colors = {
|
||||||
'error': '\u274C',
|
success: 'var(--kiss-green, #00C853)',
|
||||||
'warning': '\u26A0\uFE0F'
|
error: 'var(--kiss-red, #FF1744)',
|
||||||
|
warning: 'var(--kiss-yellow, #fbbf24)'
|
||||||
};
|
};
|
||||||
|
|
||||||
var toast = E('div', { 'class': 'hp-toast ' + (type || '') }, [
|
var toast = document.createElement('div');
|
||||||
E('span', {}, iconMap[type] || '\u2139\uFE0F'),
|
toast.className = 'kiss-toast';
|
||||||
message
|
toast.style.cssText = 'position: fixed; bottom: 80px; right: 20px; padding: 12px 20px; border-radius: 8px; background: var(--kiss-card, #161e2e); border: 1px solid ' + (colors[type] || 'var(--kiss-line)') + '; color: var(--kiss-text, #e2e8f0); font-size: 14px; display: flex; align-items: center; gap: 10px; z-index: 9999; box-shadow: 0 4px 20px rgba(0,0,0,0.3);';
|
||||||
]);
|
toast.innerHTML = (icons[type] || 'ℹ️') + ' ' + message;
|
||||||
document.body.appendChild(toast);
|
|
||||||
|
|
||||||
setTimeout(function() {
|
document.body.appendChild(toast);
|
||||||
toast.remove();
|
setTimeout(function() { toast.remove(); }, 4000);
|
||||||
}, 4000);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSaveApply: null,
|
handleSaveApply: null,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user