feat: Add SecuBox portal header to luci-app-secubox views

- Added SbHeader require and wrapper pattern to all 11 view files
- All views now display SecuBox portal header for consistent navigation
- Maintains existing SecuNav tabs for internal navigation

Views updated:
- dashboard.js
- alerts.js
- apps.js
- modules.js
- modules-debug.js
- modules-minimal.js
- dev-status.js
- settings.js
- help.js
- wizard.js
- monitoring.js

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-01-09 16:28:04 +01:00
parent 4b4d1be2f5
commit 666ad23767
11 changed files with 64 additions and 11 deletions

View File

@ -5,6 +5,7 @@
'require secubox/api as API';
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
'require poll';
// Load theme resources
@ -74,7 +75,10 @@ return view.extend({
});
}, 30);
return container;
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function() {

View File

@ -6,6 +6,7 @@
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-theme/cascade as Cascade';
'require secubox-portal/header as SbHeader';
'require poll';
// Load global theme CSS
@ -113,7 +114,10 @@ return view.extend({
});
}, 10);
return container;
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function(apps) {

View File

@ -6,6 +6,7 @@
'require secubox/api as API';
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
// Load theme resources once
document.head.appendChild(E('link', {
@ -70,7 +71,10 @@ return view.extend({
});
}, 30);
return container;
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function() {

View File

@ -6,6 +6,7 @@
'require secubox/api as API';
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
// Load theme resources
document.head.appendChild(E('link', {
@ -548,13 +549,18 @@ return view.extend({
`)
]);
return E('div', { 'class': 'secubox-dev-status-page' }, [
var container = E('div', { 'class': 'secubox-dev-status-page' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/core/variables.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/common.css') }),
SecuNav.renderTabs('dev-status'),
this.renderHeader(),
main
]);
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function() {

View File

@ -5,6 +5,7 @@
'require secubox/help as Help';
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
// Load theme resources
document.head.appendChild(E('link', {
@ -43,7 +44,7 @@ return view.extend({
var data = status || {};
var helpPages = Help.getAllHelpPages();
return E('div', { 'class': 'secubox-help-page' }, [
var container = E('div', { 'class': 'secubox-help-page' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/core/variables.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/common.css') }),
SecuNav.renderTabs('help'),
@ -52,6 +53,11 @@ return view.extend({
this.renderSupportSection(),
this.renderFooter()
]);
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function(status) {

View File

@ -4,6 +4,7 @@
'require secubox-theme/theme as Theme';
'require secubox/api as API';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
// Load theme resources
document.head.appendChild(E('link', {
@ -49,13 +50,18 @@ return view.extend({
var running = modules.filter(function(m) { return m.running; }).length;
var installed = modules.filter(function(m) { return m.installed; }).length;
return E('div', { 'class': 'secubox-modules-debug' }, [
var container = E('div', { 'class': 'secubox-modules-debug' }, [
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.length, running, installed),
modules.length ? this.renderModuleGrid(modules) : this.renderEmptyState()
]);
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function(total, running, installed) {

View File

@ -3,6 +3,7 @@
'require secubox-theme/theme as Theme';
'require secubox/api as API';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
// Load theme resources
document.head.appendChild(E('link', {
@ -34,7 +35,7 @@ return view.extend({
render: function() {
var status = this.statusData || {};
return E('div', { 'class': 'secubox-modules-minimal' }, [
var container = E('div', { 'class': 'secubox-modules-minimal' }, [
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/common.css') }),
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/secubox.css') }),
SecuNav.renderTabs('modules'),
@ -61,6 +62,11 @@ return view.extend({
])
])
]);
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeaderChip: function(icon, label, value) {

View File

@ -6,6 +6,7 @@
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-theme/cascade as Cascade';
'require secubox-portal/header as SbHeader';
'require poll';
// Load global theme CSS
@ -106,7 +107,10 @@ return view.extend({
});
}, 30);
return container;
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function(modules) {

View File

@ -6,6 +6,7 @@
'require secubox/api as API';
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
// Load theme resources
document.head.appendChild(E('link', {
@ -99,7 +100,10 @@ return view.extend({
this.hideLegacyTabMenu();
return container;
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function() {

View File

@ -6,6 +6,7 @@
'require secubox/api as API';
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
// Load theme resources
document.head.appendChild(E('link', {
@ -444,7 +445,10 @@ return view.extend({
}
});
return container;
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
}, this));
},

View File

@ -4,6 +4,7 @@
'require secubox/api as API';
'require secubox-theme/theme as Theme';
'require secubox/nav as SecuNav';
'require secubox-portal/header as SbHeader';
// Load theme resources
document.head.appendChild(E('link', {
@ -61,7 +62,11 @@ return view.extend({
this.renderProfilesCard(),
this.renderAppsCard()
]);
return container;
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
wrapper.appendChild(SbHeader.render());
wrapper.appendChild(container);
return wrapper;
},
renderHeader: function() {