CyberMind-FR
bd032be85f
Fixed issue where first page load would show empty apps/modules list, requiring a refresh to display data. Changes: - Added error handling in refreshData() for both apps.js and modules.js - Added null/empty data checks before storing results - Fixed render() to use data parameter first, then fallback to cached instance data - Added console logging for debugging empty responses - Added user-friendly error notifications when API calls fail The render function now properly uses: var apps = (data && data.apps) || this.appsData || []; var modules = (data && data.modules) || this.modulesData || []; This ensures the data passed from load() is used on first render, preventing the empty state on initial page load. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
496 lines
15 KiB
JavaScript
496 lines
15 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require ui';
|
|
'require dom';
|
|
'require secubox/api as API';
|
|
'require secubox-theme/theme as Theme';
|
|
'require secubox/nav as SecuNav';
|
|
'require secubox-theme/cascade as Cascade';
|
|
'require poll';
|
|
|
|
// Load global theme CSS
|
|
document.head.appendChild(E('link', {
|
|
'rel': 'stylesheet',
|
|
'type': 'text/css',
|
|
'href': L.resource('secubox-theme/secubox-theme.css')
|
|
}));
|
|
document.head.appendChild(E('link', {
|
|
'rel': 'stylesheet',
|
|
'type': 'text/css',
|
|
'href': L.resource('secubox-theme/themes/cyberpunk.css')
|
|
}));
|
|
document.head.appendChild(E('link', {
|
|
'rel': 'stylesheet',
|
|
'type': 'text/css',
|
|
'href': L.resource('secubox/modules.css')
|
|
}));
|
|
|
|
// Initialize global theme respecting LuCI selection
|
|
var secuLang = (typeof L !== 'undefined' && L.env && L.env.lang) ||
|
|
(document.documentElement && document.documentElement.getAttribute('lang')) ||
|
|
(navigator.language ? navigator.language.split('-')[0] : 'en');
|
|
Theme.init({ language: secuLang });
|
|
|
|
return view.extend({
|
|
modulesData: [],
|
|
currentFilter: 'all',
|
|
filterLayer: null,
|
|
|
|
load: function() {
|
|
return this.refreshData();
|
|
},
|
|
|
|
refreshData: function() {
|
|
var self = this;
|
|
return API.getModules().then(function(data) {
|
|
if (!data) {
|
|
console.warn('getModules returned empty data');
|
|
return { modules: [] };
|
|
}
|
|
self.modulesData = data.modules || [];
|
|
return data;
|
|
}).catch(function(err) {
|
|
console.error('Error loading modules:', err);
|
|
ui.addNotification(null, E('p', _('Failed to load modules: ') + err.message), 'error');
|
|
return { modules: [] };
|
|
});
|
|
},
|
|
|
|
render: function(data) {
|
|
var self = this;
|
|
var modules = (data && data.modules) || this.modulesData || [];
|
|
|
|
var defaultFilter = this.currentFilter || 'all';
|
|
var container = E('div', {
|
|
'class': 'secubox-modules-page',
|
|
'data-cascade-root': 'modules'
|
|
}, [
|
|
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/core/variables.css') }),
|
|
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/common.css') }),
|
|
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/secubox.css') }),
|
|
SecuNav.renderTabs('modules'),
|
|
this.renderHeader(modules),
|
|
this.renderFilterTabs(),
|
|
E('div', {
|
|
'id': 'modules-grid',
|
|
'class': 'secubox-modules-grid sb-cascade-layer',
|
|
'data-cascade-layer': 'view',
|
|
'data-cascade-role': 'modules',
|
|
'data-cascade-depth': '3',
|
|
'data-cascade-filter': defaultFilter
|
|
}, this.renderModuleCards(modules, defaultFilter))
|
|
]);
|
|
|
|
// Auto-refresh
|
|
poll.add(function() {
|
|
return self.refreshData().then(function() {
|
|
self.updateModulesGrid();
|
|
});
|
|
}, 30);
|
|
|
|
return container;
|
|
},
|
|
|
|
renderHeader: function(modules) {
|
|
var stats = this.getModuleStats(modules);
|
|
|
|
return E('div', { 'class': 'sh-page-header sh-page-header-lite' }, [
|
|
E('div', {}, [
|
|
E('h2', { 'class': 'sh-page-title' }, [
|
|
E('span', { 'class': 'sh-page-title-icon' }, '📦'),
|
|
_('SecuBox Modules')
|
|
]),
|
|
E('p', { 'class': 'sh-page-subtitle' },
|
|
_('Manage and monitor all SecuBox modules'))
|
|
]),
|
|
E('div', { 'class': 'sh-header-meta' }, [
|
|
this.renderHeaderChip('total', '🏷️', _('Total'), stats.total),
|
|
this.renderHeaderChip('installed', '💾', _('Installed'), stats.installed),
|
|
this.renderHeaderChip('active', '🟢', _('Active'), stats.enabled, stats.enabled ? 'success' : ''),
|
|
this.renderHeaderChip('inactive', '⚪', _('Disabled'), stats.disabled, stats.disabled ? 'warn' : ''),
|
|
this.renderHeaderChip('available', '📦', _('Available'), stats.available)
|
|
])
|
|
]);
|
|
},
|
|
|
|
renderFilterTabs: function() {
|
|
var self = this;
|
|
var tabs = [
|
|
{ id: 'all', label: _('All Modules'), icon: '📦' },
|
|
{ id: 'security', label: _('Security'), icon: '🛡️' },
|
|
{ id: 'monitoring', label: _('Monitoring'), icon: '📊' },
|
|
{ id: 'network', label: _('Network'), icon: '🌐' },
|
|
{ id: 'system', label: _('System'), icon: '⚙️' }
|
|
];
|
|
|
|
this.filterLayer = Cascade.createLayer({
|
|
id: 'secubox-module-filters',
|
|
type: 'tabs',
|
|
role: 'categories',
|
|
depth: 2,
|
|
className: 'secubox-filter-tabs sh-nav-tabs secubox-nav-tabs secubox-module-tabs',
|
|
items: tabs.map(function(tab) {
|
|
return {
|
|
id: tab.id,
|
|
label: tab.label,
|
|
icon: tab.icon,
|
|
state: tab.id === self.currentFilter ? 'active' : null
|
|
};
|
|
}),
|
|
active: this.currentFilter,
|
|
onSelect: function(item, ev) {
|
|
ev.preventDefault();
|
|
self.filterModules(item.id);
|
|
}
|
|
});
|
|
|
|
return this.filterLayer;
|
|
},
|
|
|
|
renderModuleCards: function(modules, filter) {
|
|
var self = this;
|
|
|
|
var filtered = filter === 'all' ? modules :
|
|
modules.filter(function(m) { return m.category === filter; });
|
|
|
|
if (filtered.length === 0) {
|
|
return E('div', { 'class': 'secubox-empty-state' }, [
|
|
E('div', { 'class': 'secubox-empty-icon' }, '📭'),
|
|
E('div', { 'class': 'secubox-empty-title' }, 'No modules found'),
|
|
E('div', { 'class': 'secubox-empty-text' }, 'Try selecting a different category')
|
|
]);
|
|
}
|
|
|
|
return filtered.map(function(module) {
|
|
return self.renderModuleCard(module);
|
|
});
|
|
},
|
|
|
|
resolveModuleVersion: function(module) {
|
|
if (!module)
|
|
return '—';
|
|
|
|
var candidates = [
|
|
module.version,
|
|
module.pkg_version,
|
|
module.package_version,
|
|
module.packageVersion,
|
|
module.Version
|
|
];
|
|
|
|
for (var i = 0; i < candidates.length; i++) {
|
|
var value = candidates[i];
|
|
if (typeof value === 'number')
|
|
return String(value);
|
|
if (typeof value === 'string' && value.trim())
|
|
return value.trim();
|
|
}
|
|
|
|
return '—';
|
|
},
|
|
|
|
renderModuleCard: function(module) {
|
|
var self = this;
|
|
var status = module.status || 'unknown';
|
|
var isInstalled = module.installed;
|
|
var statusClass = isInstalled ? status : 'not-installed';
|
|
|
|
// Status label mapping (v0.3.1)
|
|
var statusLabels = {
|
|
'active': '✓ Activé',
|
|
'disabled': '○ Désactivé',
|
|
'error': '⚠️ Erreur',
|
|
'unknown': '? Inconnu',
|
|
'not-installed': '- Not Installed'
|
|
};
|
|
|
|
var statusLabel = isInstalled ? (statusLabels[status] || '○ Désactivé') : statusLabels['not-installed'];
|
|
var versionLabel = this.resolveModuleVersion(module);
|
|
|
|
return E('div', {
|
|
'class': 'secubox-module-card secubox-module-' + statusClass,
|
|
'data-cascade-item': module.id || module.name,
|
|
'data-cascade-category': module.category || 'other',
|
|
'data-cascade-status': status,
|
|
'data-module-installed': module.installed ? '1' : '0',
|
|
'data-module-enabled': module.enabled ? '1' : '0',
|
|
'data-module-access': statusClass,
|
|
'data-cascade-depth': '4',
|
|
'style': 'border-left: 4px solid ' + (module.color || '#64748b')
|
|
}, [
|
|
// Card Header
|
|
E('div', { 'class': 'secubox-module-card-header' }, [
|
|
E('div', { 'class': 'secubox-module-icon' }, module.icon || '📦'),
|
|
E('div', { 'class': 'secubox-module-info' }, [
|
|
E('h3', { 'class': 'secubox-module-name' }, module.name || module.id),
|
|
E('div', { 'class': 'secubox-module-meta' }, [
|
|
E('span', { 'class': 'secubox-module-category' },
|
|
this.getCategoryIcon(module.category) + ' ' + (module.category || 'other')),
|
|
E('span', { 'class': 'secubox-module-version' },
|
|
versionLabel === '—' ? versionLabel : 'v' + versionLabel)
|
|
])
|
|
]),
|
|
E('div', {
|
|
'class': 'secubox-status-indicator secubox-status-' + statusClass,
|
|
'title': statusLabel
|
|
})
|
|
]),
|
|
|
|
// Card Body
|
|
E('div', { 'class': 'secubox-module-card-body' }, [
|
|
E('p', { 'class': 'secubox-module-description' },
|
|
module.description || 'No description available'),
|
|
|
|
E('div', { 'class': 'secubox-module-details' }, [
|
|
E('div', { 'class': 'secubox-module-detail' }, [
|
|
E('span', { 'class': 'secubox-detail-label' }, 'Package:'),
|
|
E('code', { 'class': 'secubox-detail-value' }, module.package || 'N/A')
|
|
]),
|
|
E('div', { 'class': 'secubox-module-detail' }, [
|
|
E('span', { 'class': 'secubox-detail-label' }, 'Status:'),
|
|
E('span', {
|
|
'class': 'secubox-detail-value secubox-status-text-' + statusClass
|
|
}, statusLabel)
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Card Actions
|
|
E('div', {
|
|
'class': 'secubox-module-card-actions sb-cascade-layer',
|
|
'data-cascade-layer': 'actions',
|
|
'data-cascade-role': 'module-actions',
|
|
'data-cascade-depth': '5'
|
|
},
|
|
this.renderModuleActions(module))
|
|
]);
|
|
},
|
|
|
|
renderModuleActions: function(module) {
|
|
var self = this;
|
|
var actions = [];
|
|
|
|
if (!module.installed) {
|
|
actions.push(
|
|
E('button', {
|
|
'class': 'secubox-btn secubox-btn-secondary secubox-btn-sm sb-cascade-item',
|
|
'data-cascade-action': 'install',
|
|
'data-module-target': module.id,
|
|
'disabled': true
|
|
}, [
|
|
E('span', { 'class': 'sb-cascade-label' }, '📥 Install')
|
|
])
|
|
);
|
|
} else {
|
|
// Enable/Disable button (v0.3.1)
|
|
if (module.enabled) {
|
|
actions.push(
|
|
E('button', {
|
|
'class': 'secubox-btn secubox-btn-danger secubox-btn-sm sb-cascade-item',
|
|
'data-cascade-action': 'disable',
|
|
'data-module-target': module.id,
|
|
'click': function() {
|
|
self.disableModule(module);
|
|
}
|
|
}, [
|
|
E('span', { 'class': 'sb-cascade-label' }, '⏹️ Désactiver')
|
|
])
|
|
);
|
|
} else {
|
|
actions.push(
|
|
E('button', {
|
|
'class': 'secubox-btn secubox-btn-success secubox-btn-sm sb-cascade-item',
|
|
'data-cascade-action': 'enable',
|
|
'data-module-target': module.id,
|
|
'click': function() {
|
|
self.enableModule(module);
|
|
}
|
|
}, [
|
|
E('span', { 'class': 'sb-cascade-label' }, '▶️ Activer')
|
|
])
|
|
);
|
|
}
|
|
|
|
// Dashboard link
|
|
var dashboardPath = this.getModuleDashboardPath(module.id);
|
|
if (dashboardPath) {
|
|
actions.push(
|
|
E('a', {
|
|
'href': L.url(dashboardPath),
|
|
'class': 'secubox-btn secubox-btn-primary secubox-btn-sm sb-cascade-item',
|
|
'data-cascade-action': 'navigate',
|
|
'data-module-target': module.id
|
|
}, [
|
|
E('span', { 'class': 'sb-cascade-label' }, '📊 Dashboard')
|
|
])
|
|
);
|
|
}
|
|
}
|
|
|
|
return actions;
|
|
},
|
|
|
|
getModuleDashboardPath: function(moduleId) {
|
|
var paths = {
|
|
'crowdsec': 'admin/secubox/crowdsec/overview',
|
|
'netdata': 'admin/secubox/netdata/dashboard',
|
|
'netifyd': 'admin/secubox/netifyd/overview',
|
|
'wireguard': 'admin/secubox/wireguard/overview',
|
|
'network_modes': 'admin/secubox/network/modes/overview',
|
|
'client_guardian': 'admin/secubox/client-guardian/overview',
|
|
'system_hub': 'admin/secubox/system-hub/overview',
|
|
'bandwidth_manager': 'admin/secubox/bandwidth-manager/overview',
|
|
'auth_guardian': 'admin/secubox/auth-guardian/overview',
|
|
'media_flow': 'admin/secubox/mediaflow/dashboard',
|
|
'vhost_manager': 'admin/secubox/vhosts/overview',
|
|
'traffic_shaper': 'admin/secubox/traffic-shaper/overview',
|
|
'cdn_cache': 'admin/secubox/cdn-cache/overview',
|
|
'ksm_manager': 'admin/secubox/ksm-manager/overview',
|
|
'mqtt_bridge': 'admin/secubox/network/mqtt-bridge/overview'
|
|
};
|
|
return paths[moduleId] || null;
|
|
},
|
|
|
|
getCategoryIcon: function(category) {
|
|
var icons = {
|
|
'security': '🛡️',
|
|
'monitoring': '📊',
|
|
'network': '🌐',
|
|
'system': '⚙️',
|
|
'other': '📦'
|
|
};
|
|
return icons[category] || icons['other'];
|
|
},
|
|
|
|
// Enable module (v0.3.1)
|
|
enableModule: function(module) {
|
|
var self = this;
|
|
ui.showModal(_('Activation du module'), [
|
|
E('p', {}, 'Activation de ' + module.name + '...')
|
|
]);
|
|
|
|
API.enableModule(module.id).then(function(result) {
|
|
ui.hideModal();
|
|
if (result && result.success !== false) {
|
|
ui.addNotification(null, E('p', module.name + ' activé avec succès'), 'info');
|
|
self.refreshData().then(function() {
|
|
self.updateModulesGrid();
|
|
});
|
|
} else {
|
|
ui.addNotification(null, E('p', 'Échec de l\'activation de ' + module.name), 'error');
|
|
}
|
|
}).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', 'Erreur: ' + err.message), 'error');
|
|
});
|
|
},
|
|
|
|
// Disable module (v0.3.1)
|
|
disableModule: function(module) {
|
|
var self = this;
|
|
ui.showModal(_('Désactivation du module'), [
|
|
E('p', {}, 'Désactivation de ' + module.name + '...')
|
|
]);
|
|
|
|
API.disableModule(module.id).then(function(result) {
|
|
ui.hideModal();
|
|
if (result && result.success !== false) {
|
|
ui.addNotification(null, E('p', module.name + ' désactivé avec succès'), 'info');
|
|
self.refreshData().then(function() {
|
|
self.updateModulesGrid();
|
|
});
|
|
} else {
|
|
ui.addNotification(null, E('p', 'Échec de la désactivation de ' + module.name), 'error');
|
|
}
|
|
}).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', 'Erreur: ' + err.message), 'error');
|
|
});
|
|
},
|
|
|
|
// DEPRECATED: Keeping for backward compatibility
|
|
startModule: function(module) {
|
|
return this.enableModule(module);
|
|
},
|
|
|
|
stopModule: function(module) {
|
|
return this.disableModule(module);
|
|
},
|
|
|
|
restartModule: function(module) {
|
|
var self = this;
|
|
return this.disableModule(module).then(function() {
|
|
return self.enableModule(module);
|
|
});
|
|
},
|
|
|
|
filterModules: function(category) {
|
|
this.currentFilter = category || this.currentFilter || 'all';
|
|
var grid = document.getElementById('modules-grid');
|
|
if (grid) {
|
|
grid.setAttribute('data-cascade-filter', this.currentFilter);
|
|
dom.content(grid, this.renderModuleCards(this.modulesData, this.currentFilter));
|
|
}
|
|
if (this.filterLayer) {
|
|
Cascade.setActiveItem(this.filterLayer, this.currentFilter);
|
|
}
|
|
},
|
|
|
|
getModuleStats: function(modules) {
|
|
var list = modules || [];
|
|
var installed = list.filter(function(m) { return m.installed; }).length;
|
|
var enabled = list.filter(function(m) { return m.enabled; }).length;
|
|
var disabled = Math.max(installed - enabled, 0);
|
|
var available = Math.max(list.length - installed, 0);
|
|
|
|
return {
|
|
total: list.length,
|
|
installed: installed,
|
|
enabled: enabled,
|
|
disabled: disabled,
|
|
available: available
|
|
};
|
|
},
|
|
|
|
renderHeaderChip: function(id, icon, label, value, tone) {
|
|
return E('div', { 'class': 'sh-header-chip' + (tone ? ' ' + tone : '') }, [
|
|
E('span', { 'class': 'sh-chip-icon' }, icon),
|
|
E('div', { 'class': 'sh-chip-text' }, [
|
|
E('span', { 'class': 'sh-chip-label' }, label),
|
|
E('strong', { 'id': 'secubox-modules-chip-' + id }, value.toString())
|
|
])
|
|
]);
|
|
},
|
|
|
|
updateHeaderStats: function() {
|
|
var stats = this.getModuleStats(this.modulesData);
|
|
this.setHeaderChipValue('total', stats.total);
|
|
this.setHeaderChipValue('installed', stats.installed);
|
|
this.setHeaderChipValue('active', stats.enabled, stats.enabled ? 'success' : '');
|
|
this.setHeaderChipValue('inactive', stats.disabled, stats.disabled ? 'warn' : '');
|
|
this.setHeaderChipValue('available', stats.available);
|
|
},
|
|
|
|
setHeaderChipValue: function(id, value, tone) {
|
|
var target = document.getElementById('secubox-modules-chip-' + id);
|
|
if (target)
|
|
target.textContent = value.toString();
|
|
|
|
var chip = target && target.closest('.sh-header-chip');
|
|
if (chip) {
|
|
chip.classList.remove('success', 'warn');
|
|
if (tone)
|
|
chip.classList.add(tone);
|
|
}
|
|
},
|
|
|
|
updateModulesGrid: function() {
|
|
this.filterModules(this.currentFilter || 'all');
|
|
this.updateHeaderStats();
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|