style(haproxy): Migrate stats.js to KISS theme
Rewrote HAProxy Statistics dashboard to use KissTheme: - Removed CSS import via style element - Replaced all hp- classes with kiss- classes - Stats iframe with KISS-styled border - Logs viewer with line count selector and refresh button - Empty state for disabled stats or stopped service - Consistent styling with vhosts.js and backends.js Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
053c49217c
commit
c5e4d5a903
@ -5,6 +5,11 @@
|
|||||||
'require haproxy.api as api';
|
'require haproxy.api as api';
|
||||||
'require secubox/kiss-theme';
|
'require secubox/kiss-theme';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HAProxy Statistics & Logs - KISS Style
|
||||||
|
* Copyright (C) 2025 CyberMind.fr
|
||||||
|
*/
|
||||||
|
|
||||||
return view.extend({
|
return view.extend({
|
||||||
load: function() {
|
load: function() {
|
||||||
return Promise.all([
|
return Promise.all([
|
||||||
@ -17,107 +22,87 @@ return view.extend({
|
|||||||
var self = this;
|
var self = this;
|
||||||
var status = data[0] || {};
|
var status = data[0] || {};
|
||||||
var logsData = data[1] || {};
|
var logsData = data[1] || {};
|
||||||
|
var K = KissTheme;
|
||||||
|
|
||||||
var statsUrl = 'http://' + window.location.hostname + ':' + (status.stats_port || 8404) + '/stats';
|
var statsUrl = 'http://' + window.location.hostname + ':' + (status.stats_port || 8404) + '/stats';
|
||||||
var statsEnabled = status.stats_enabled;
|
var statsEnabled = status.stats_enabled;
|
||||||
var haproxyRunning = status.haproxy_running;
|
var haproxyRunning = status.haproxy_running;
|
||||||
|
|
||||||
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{1F4CA}'),
|
K.E('span', {}, '📊'),
|
||||||
'Statistics'
|
'Statistics'
|
||||||
]),
|
]),
|
||||||
E('p', { 'class': 'hp-page-subtitle' }, 'View HAProxy statistics and logs')
|
K.E('p', { 'style': 'margin: 4px 0 0; color: var(--kiss-muted, #94a3b8); font-size: 14px;' },
|
||||||
]),
|
'View HAProxy statistics and logs')
|
||||||
E('a', {
|
])
|
||||||
'href': L.url('admin/services/haproxy/overview'),
|
|
||||||
'class': 'hp-btn hp-btn-secondary'
|
|
||||||
}, ['\u2190', ' Back to Overview'])
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// Stats dashboard
|
// Stats dashboard
|
||||||
E('div', { 'class': 'hp-card' }, [
|
K.E('div', { 'class': 'kiss-card' }, [
|
||||||
E('div', { 'class': 'hp-card-header' }, [
|
K.E('div', { 'class': 'kiss-card-title' }, ['📊 ', 'HAProxy Stats Dashboard']),
|
||||||
E('div', { 'class': 'hp-card-title' }, [
|
statsEnabled && haproxyRunning
|
||||||
E('span', { 'class': 'hp-card-title-icon' }, '\u{1F4CA}'),
|
? K.E('div', {}, [
|
||||||
'HAProxy Stats Dashboard'
|
K.E('p', { 'style': 'margin: 0 0 16px; font-size: 14px;' }, [
|
||||||
|
'Stats dashboard available at: ',
|
||||||
|
K.E('a', {
|
||||||
|
'href': statsUrl,
|
||||||
|
'target': '_blank',
|
||||||
|
'style': 'color: var(--kiss-blue, #3b82f6); text-decoration: none;'
|
||||||
|
}, statsUrl)
|
||||||
|
]),
|
||||||
|
K.E('iframe', {
|
||||||
|
'src': statsUrl,
|
||||||
|
'frameborder': '0',
|
||||||
|
'style': 'width: 100%; height: 600px; border: 1px solid var(--kiss-line, #1e293b); border-radius: 8px; background: #fff;'
|
||||||
|
})
|
||||||
|
])
|
||||||
|
: K.E('div', { 'style': 'text-align: center; padding: 40px 20px; color: var(--kiss-muted);' }, [
|
||||||
|
K.E('div', { 'style': 'font-size: 48px; margin-bottom: 12px;' }, '📊'),
|
||||||
|
K.E('div', { 'style': 'font-size: 16px;' },
|
||||||
|
haproxyRunning
|
||||||
|
? 'Stats dashboard is disabled'
|
||||||
|
: 'HAProxy is not running'),
|
||||||
|
K.E('div', { 'style': 'font-size: 13px; margin-top: 6px;' },
|
||||||
|
haproxyRunning
|
||||||
|
? 'Enable it in Settings to view statistics'
|
||||||
|
: 'Start the service to view statistics')
|
||||||
])
|
])
|
||||||
]),
|
|
||||||
E('div', { 'class': 'hp-card-body' },
|
|
||||||
statsEnabled && haproxyRunning
|
|
||||||
? [
|
|
||||||
E('p', { 'style': 'margin-bottom: 16px;' }, [
|
|
||||||
'Stats dashboard available at: ',
|
|
||||||
E('a', { 'href': statsUrl, 'target': '_blank', 'class': 'hp-link' }, statsUrl)
|
|
||||||
]),
|
|
||||||
E('iframe', {
|
|
||||||
'class': 'haproxy-stats-frame',
|
|
||||||
'src': statsUrl,
|
|
||||||
'frameborder': '0',
|
|
||||||
'style': 'width: 100%; height: 600px; border: 1px solid var(--hp-border, #333); border-radius: 8px;'
|
|
||||||
})
|
|
||||||
]
|
|
||||||
: [
|
|
||||||
E('div', { 'class': 'hp-empty' }, [
|
|
||||||
E('div', { 'class': 'hp-empty-icon' }, '\u{1F4CA}'),
|
|
||||||
E('div', { 'class': 'hp-empty-text' },
|
|
||||||
haproxyRunning
|
|
||||||
? 'Stats dashboard is disabled'
|
|
||||||
: 'HAProxy is not running'),
|
|
||||||
E('div', { 'class': 'hp-empty-hint' },
|
|
||||||
haproxyRunning
|
|
||||||
? 'Enable it in Settings to view statistics'
|
|
||||||
: 'Start the service to view statistics')
|
|
||||||
])
|
|
||||||
]
|
|
||||||
)
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// Logs section
|
// Logs section
|
||||||
E('div', { 'class': 'hp-card' }, [
|
K.E('div', { 'class': 'kiss-card' }, [
|
||||||
E('div', { 'class': 'hp-card-header' }, [
|
K.E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;' }, [
|
||||||
E('div', { 'class': 'hp-card-title' }, [
|
K.E('div', { 'class': 'kiss-card-title', 'style': 'margin: 0;' }, ['📝 ', 'Logs']),
|
||||||
E('span', { 'class': 'hp-card-title-icon' }, '\u{1F4DD}'),
|
K.E('div', { 'style': 'display: flex; gap: 12px; align-items: center;' }, [
|
||||||
'Logs'
|
K.E('select', {
|
||||||
]),
|
|
||||||
E('div', { 'style': 'display: flex; gap: 12px; align-items: center;' }, [
|
|
||||||
E('select', {
|
|
||||||
'id': 'log-lines',
|
'id': 'log-lines',
|
||||||
'class': 'hp-form-input',
|
'style': 'padding: 8px 12px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 13px;',
|
||||||
'style': 'width: auto; padding: 6px 12px;',
|
|
||||||
'change': function() { self.refreshLogs(); }
|
'change': function() { self.refreshLogs(); }
|
||||||
}, [
|
}, [
|
||||||
E('option', { 'value': '50' }, 'Last 50 lines'),
|
K.E('option', { 'value': '50' }, 'Last 50 lines'),
|
||||||
E('option', { 'value': '100', 'selected': true }, 'Last 100 lines'),
|
K.E('option', { 'value': '100', 'selected': true }, 'Last 100 lines'),
|
||||||
E('option', { 'value': '200' }, 'Last 200 lines'),
|
K.E('option', { 'value': '200' }, 'Last 200 lines'),
|
||||||
E('option', { 'value': '500' }, 'Last 500 lines')
|
K.E('option', { 'value': '500' }, 'Last 500 lines')
|
||||||
]),
|
]),
|
||||||
E('button', {
|
K.E('button', {
|
||||||
'class': 'hp-btn hp-btn-primary hp-btn-sm',
|
'class': 'kiss-btn kiss-btn-blue',
|
||||||
|
'style': 'padding: 8px 14px; font-size: 13px;',
|
||||||
'click': function() { self.refreshLogs(); }
|
'click': function() { self.refreshLogs(); }
|
||||||
}, ['\u{1F504}', ' Refresh'])
|
}, '🔄 Refresh')
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
E('div', { 'class': 'hp-card-body' }, [
|
K.E('div', {
|
||||||
E('div', {
|
'id': 'logs-container',
|
||||||
'id': 'logs-container',
|
'style': 'background: #0d1117; color: #c9d1d9; font-family: monospace; font-size: 12px; padding: 16px; border-radius: 8px; max-height: 400px; overflow-y: auto; white-space: pre-wrap; border: 1px solid var(--kiss-line, #1e293b);'
|
||||||
'class': 'haproxy-logs',
|
}, logsData.logs || 'No logs available')
|
||||||
'style': 'background: #0d1117; color: #c9d1d9; font-family: monospace; font-size: 12px; padding: 16px; border-radius: 8px; max-height: 400px; overflow-y: auto; white-space: pre-wrap;'
|
|
||||||
}, logsData.logs || 'No logs available')
|
|
||||||
])
|
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Add CSS
|
return KissTheme.wrap(content, 'admin/services/haproxy/stats');
|
||||||
var style = E('style', {}, `
|
|
||||||
@import url('/luci-static/resources/haproxy/dashboard.css');
|
|
||||||
`);
|
|
||||||
content.insertBefore(style, content.firstChild);
|
|
||||||
|
|
||||||
return KissTheme.wrap(content, 'admin/services/haproxy');
|
|
||||||
},
|
},
|
||||||
|
|
||||||
refreshLogs: function() {
|
refreshLogs: function() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user