Fix dashboard loading loop and freezing the page

This commit is contained in:
Jamie Curnow 2025-02-06 13:38:47 +10:00
parent 34c703f8b4
commit c4df89df1f
No known key found for this signature in database
GPG Key ID: FFBB624C43388E9E
2 changed files with 466 additions and 472 deletions

View File

@ -4,444 +4,438 @@ const Tokens = require('./tokens');
module.exports = { module.exports = {
/** /**
* @param {String} route * @param {String} route
* @param {Object} [options] * @param {Object} [options]
* @returns {Boolean} * @returns {Boolean}
*/ */
navigate: function (route, options) { navigate: function (route, options) {
options = options || {}; options = options || {};
Backbone.history.navigate(route.toString(), options); Backbone.history.navigate(route.toString(), options);
return true; return true;
}, },
/** /**
* Login * Login
*/ */
showLogin: function () { showLogin: function () {
window.location = '/login'; window.location = '/login';
}, },
/** /**
* Users * Users
*/ */
showUsers: function () { showUsers: function () {
let controller = this; const controller = this;
if (Cache.User.isAdmin()) { if (Cache.User.isAdmin()) {
require(['./main', './users/main'], (App, View) => { require(['./main', './users/main'], (App, View) => {
controller.navigate('/users'); controller.navigate('/users');
App.UI.showAppContent(new View()); App.UI.showAppContent(new View());
}); });
} else { } else {
this.showDashboard(); this.showDashboard();
} }
}, },
/** /**
* User Form * User Form
* *
* @param [model] * @param [model]
*/ */
showUserForm: function (model) { showUserForm: function (model) {
if (Cache.User.isAdmin()) { if (Cache.User.isAdmin()) {
require(['./main', './user/form'], function (App, View) { require(['./main', './user/form'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* User Permissions Form * User Permissions Form
* *
* @param model * @param model
*/ */
showUserPermissions: function (model) { showUserPermissions: function (model) {
if (Cache.User.isAdmin()) { if (Cache.User.isAdmin()) {
require(['./main', './user/permissions'], function (App, View) { require(['./main', './user/permissions'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* User Password Form * User Password Form
* *
* @param model * @param model
*/ */
showUserPasswordForm: function (model) { showUserPasswordForm: function (model) {
if (Cache.User.isAdmin() || model.get('id') === Cache.User.get('id')) { if (Cache.User.isAdmin() || model.get('id') === Cache.User.get('id')) {
require(['./main', './user/password'], function (App, View) { require(['./main', './user/password'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* User Delete Confirm * User Delete Confirm
* *
* @param model * @param model
*/ */
showUserDeleteConfirm: function (model) { showUserDeleteConfirm: function (model) {
if (Cache.User.isAdmin() && model.get('id') !== Cache.User.get('id')) { if (Cache.User.isAdmin() && model.get('id') !== Cache.User.get('id')) {
require(['./main', './user/delete'], function (App, View) { require(['./main', './user/delete'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Dashboard * Dashboard
*/ */
showDashboard: function () { showDashboard: function () {
let controller = this; const controller = this;
require(['./main', './dashboard/main'], (App, View) => {
controller.navigate('/');
App.UI.showAppContent(new View());
});
},
require(['./main', './dashboard/main'], (App, View) => { /**
controller.navigate('/'); * Nginx Proxy Hosts
App.UI.showAppContent(new View()); */
}); showNginxProxy: function () {
}, if (Cache.User.isAdmin() || Cache.User.canView('proxy_hosts')) {
const controller = this;
/** require(['./main', './nginx/proxy/main'], (App, View) => {
* Nginx Proxy Hosts controller.navigate('/nginx/proxy');
*/ App.UI.showAppContent(new View());
showNginxProxy: function () { });
if (Cache.User.isAdmin() || Cache.User.canView('proxy_hosts')) { }
let controller = this; },
require(['./main', './nginx/proxy/main'], (App, View) => { /**
controller.navigate('/nginx/proxy'); * Nginx Proxy Host Form
App.UI.showAppContent(new View()); *
}); * @param [model]
} */
}, showNginxProxyForm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('proxy_hosts')) {
require(['./main', './nginx/proxy/form'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
/** /**
* Nginx Proxy Host Form * Proxy Host Delete Confirm
* *
* @param [model] * @param model
*/ */
showNginxProxyForm: function (model) { showNginxProxyDeleteConfirm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('proxy_hosts')) { if (Cache.User.isAdmin() || Cache.User.canManage('proxy_hosts')) {
require(['./main', './nginx/proxy/form'], function (App, View) { require(['./main', './nginx/proxy/delete'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Proxy Host Delete Confirm * Nginx Redirection Hosts
* */
* @param model showNginxRedirection: function () {
*/ if (Cache.User.isAdmin() || Cache.User.canView('redirection_hosts')) {
showNginxProxyDeleteConfirm: function (model) { const controller = this;
if (Cache.User.isAdmin() || Cache.User.canManage('proxy_hosts')) { require(['./main', './nginx/redirection/main'], (App, View) => {
require(['./main', './nginx/proxy/delete'], function (App, View) { controller.navigate('/nginx/redirection');
App.UI.showModalDialog(new View({model: model})); App.UI.showAppContent(new View());
}); });
} }
}, },
/** /**
* Nginx Redirection Hosts * Nginx Redirection Host Form
*/ *
showNginxRedirection: function () { * @param [model]
if (Cache.User.isAdmin() || Cache.User.canView('redirection_hosts')) { */
let controller = this; showNginxRedirectionForm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('redirection_hosts')) {
require(['./main', './nginx/redirection/form'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
require(['./main', './nginx/redirection/main'], (App, View) => { /**
controller.navigate('/nginx/redirection'); * Proxy Redirection Delete Confirm
App.UI.showAppContent(new View()); *
}); * @param model
} */
}, showNginxRedirectionDeleteConfirm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('redirection_hosts')) {
require(['./main', './nginx/redirection/delete'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
/** /**
* Nginx Redirection Host Form * Nginx Stream Hosts
* */
* @param [model] showNginxStream: function () {
*/ if (Cache.User.isAdmin() || Cache.User.canView('streams')) {
showNginxRedirectionForm: function (model) { const controller = this;
if (Cache.User.isAdmin() || Cache.User.canManage('redirection_hosts')) { require(['./main', './nginx/stream/main'], (App, View) => {
require(['./main', './nginx/redirection/form'], function (App, View) { controller.navigate('/nginx/stream');
App.UI.showModalDialog(new View({model: model})); App.UI.showAppContent(new View());
}); });
} }
}, },
/** /**
* Proxy Redirection Delete Confirm * Stream Form
* *
* @param model * @param [model]
*/ */
showNginxRedirectionDeleteConfirm: function (model) { showNginxStreamForm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('redirection_hosts')) { if (Cache.User.isAdmin() || Cache.User.canManage('streams')) {
require(['./main', './nginx/redirection/delete'], function (App, View) { require(['./main', './nginx/stream/form'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Nginx Stream Hosts * Stream Delete Confirm
*/ *
showNginxStream: function () { * @param model
if (Cache.User.isAdmin() || Cache.User.canView('streams')) { */
let controller = this; showNginxStreamDeleteConfirm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('streams')) {
require(['./main', './nginx/stream/delete'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
require(['./main', './nginx/stream/main'], (App, View) => { /**
controller.navigate('/nginx/stream'); * Nginx Dead Hosts
App.UI.showAppContent(new View()); */
}); showNginxDead: function () {
} if (Cache.User.isAdmin() || Cache.User.canView('dead_hosts')) {
}, const controller = this;
require(['./main', './nginx/dead/main'], (App, View) => {
controller.navigate('/nginx/404');
App.UI.showAppContent(new View());
});
}
},
/** /**
* Stream Form * Dead Host Form
* *
* @param [model] * @param [model]
*/ */
showNginxStreamForm: function (model) { showNginxDeadForm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('streams')) { if (Cache.User.isAdmin() || Cache.User.canManage('dead_hosts')) {
require(['./main', './nginx/stream/form'], function (App, View) { require(['./main', './nginx/dead/form'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Stream Delete Confirm * Dead Host Delete Confirm
* *
* @param model * @param model
*/ */
showNginxStreamDeleteConfirm: function (model) { showNginxDeadDeleteConfirm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('streams')) { if (Cache.User.isAdmin() || Cache.User.canManage('dead_hosts')) {
require(['./main', './nginx/stream/delete'], function (App, View) { require(['./main', './nginx/dead/delete'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Nginx Dead Hosts * Help Dialog
*/ *
showNginxDead: function () { * @param {String} title
if (Cache.User.isAdmin() || Cache.User.canView('dead_hosts')) { * @param {String} content
let controller = this; */
showHelp: function (title, content) {
require(['./main', './help/main'], function (App, View) {
App.UI.showModalDialog(new View({title: title, content: content}));
});
},
require(['./main', './nginx/dead/main'], (App, View) => { /**
controller.navigate('/nginx/404'); * Nginx Access
App.UI.showAppContent(new View()); */
}); showNginxAccess: function () {
} if (Cache.User.isAdmin() || Cache.User.canView('access_lists')) {
}, const controller = this;
require(['./main', './nginx/access/main'], (App, View) => {
controller.navigate('/nginx/access');
App.UI.showAppContent(new View());
});
}
},
/** /**
* Dead Host Form * Nginx Access List Form
* *
* @param [model] * @param [model]
*/ */
showNginxDeadForm: function (model) { showNginxAccessListForm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('dead_hosts')) { if (Cache.User.isAdmin() || Cache.User.canManage('access_lists')) {
require(['./main', './nginx/dead/form'], function (App, View) { require(['./main', './nginx/access/form'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Dead Host Delete Confirm * Access List Delete Confirm
* *
* @param model * @param model
*/ */
showNginxDeadDeleteConfirm: function (model) { showNginxAccessListDeleteConfirm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('dead_hosts')) { if (Cache.User.isAdmin() || Cache.User.canManage('access_lists')) {
require(['./main', './nginx/dead/delete'], function (App, View) { require(['./main', './nginx/access/delete'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Help Dialog * Nginx Certificates
* */
* @param {String} title showNginxCertificates: function () {
* @param {String} content if (Cache.User.isAdmin() || Cache.User.canView('certificates')) {
*/ const controller = this;
showHelp: function (title, content) { require(['./main', './nginx/certificates/main'], (App, View) => {
require(['./main', './help/main'], function (App, View) { controller.navigate('/nginx/certificates');
App.UI.showModalDialog(new View({title: title, content: content})); App.UI.showAppContent(new View());
}); });
}, }
},
/** /**
* Nginx Access * Nginx Certificate Form
*/ *
showNginxAccess: function () { * @param [model]
if (Cache.User.isAdmin() || Cache.User.canView('access_lists')) { */
let controller = this; showNginxCertificateForm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('certificates')) {
require(['./main', './nginx/certificates/form'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
require(['./main', './nginx/access/main'], (App, View) => { /**
controller.navigate('/nginx/access'); * Certificate Renew
App.UI.showAppContent(new View()); *
}); * @param model
} */
}, showNginxCertificateRenew: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('certificates')) {
require(['./main', './nginx/certificates/renew'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
/** /**
* Nginx Access List Form * Certificate Delete Confirm
* *
* @param [model] * @param model
*/ */
showNginxAccessListForm: function (model) { showNginxCertificateDeleteConfirm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('access_lists')) { if (Cache.User.isAdmin() || Cache.User.canManage('certificates')) {
require(['./main', './nginx/access/form'], function (App, View) { require(['./main', './nginx/certificates/delete'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Access List Delete Confirm * Certificate Test Reachability
* *
* @param model * @param model
*/ */
showNginxAccessListDeleteConfirm: function (model) { showNginxCertificateTestReachability: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('access_lists')) { if (Cache.User.isAdmin() || Cache.User.canManage('certificates')) {
require(['./main', './nginx/access/delete'], function (App, View) { require(['./main', './nginx/certificates/test'], function (App, View) {
App.UI.showModalDialog(new View({model: model})); App.UI.showModalDialog(new View({model: model}));
}); });
} }
}, },
/** /**
* Nginx Certificates * Audit Log
*/ */
showNginxCertificates: function () { showAuditLog: function () {
if (Cache.User.isAdmin() || Cache.User.canView('certificates')) { const controller = this;
let controller = this; if (Cache.User.isAdmin()) {
require(['./main', './audit-log/main'], (App, View) => {
controller.navigate('/audit-log');
App.UI.showAppContent(new View());
});
} else {
this.showDashboard();
}
},
require(['./main', './nginx/certificates/main'], (App, View) => { /**
controller.navigate('/nginx/certificates'); * Audit Log Metadata
App.UI.showAppContent(new View()); *
}); * @param model
} */
}, showAuditMeta: function (model) {
if (Cache.User.isAdmin()) {
require(['./main', './audit-log/meta'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
/** /**
* Nginx Certificate Form * Settings
* */
* @param [model] showSettings: function () {
*/ const controller = this;
showNginxCertificateForm: function (model) { if (Cache.User.isAdmin()) {
if (Cache.User.isAdmin() || Cache.User.canManage('certificates')) { require(['./main', './settings/main'], (App, View) => {
require(['./main', './nginx/certificates/form'], function (App, View) { controller.navigate('/settings');
App.UI.showModalDialog(new View({model: model})); App.UI.showAppContent(new View());
}); });
} } else {
}, this.showDashboard();
}
},
/** /**
* Certificate Renew * Settings Item Form
* *
* @param model * @param model
*/ */
showNginxCertificateRenew: function (model) { showSettingForm: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('certificates')) { if (Cache.User.isAdmin()) {
require(['./main', './nginx/certificates/renew'], function (App, View) { if (model.get('id') === 'default-site') {
App.UI.showModalDialog(new View({model: model})); require(['./main', './settings/default-site/main'], function (App, View) {
}); App.UI.showModalDialog(new View({model: model}));
} });
}, }
}
},
/** /**
* Certificate Delete Confirm * Logout
* */
* @param model logout: function () {
*/ Tokens.dropTopToken();
showNginxCertificateDeleteConfirm: function (model) { this.showLogin();
if (Cache.User.isAdmin() || Cache.User.canManage('certificates')) { }
require(['./main', './nginx/certificates/delete'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
/**
* Certificate Test Reachability
*
* @param model
*/
showNginxCertificateTestReachability: function (model) {
if (Cache.User.isAdmin() || Cache.User.canManage('certificates')) {
require(['./main', './nginx/certificates/test'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
/**
* Audit Log
*/
showAuditLog: function () {
let controller = this;
if (Cache.User.isAdmin()) {
require(['./main', './audit-log/main'], (App, View) => {
controller.navigate('/audit-log');
App.UI.showAppContent(new View());
});
} else {
this.showDashboard();
}
},
/**
* Audit Log Metadata
*
* @param model
*/
showAuditMeta: function (model) {
if (Cache.User.isAdmin()) {
require(['./main', './audit-log/meta'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
/**
* Settings
*/
showSettings: function () {
let controller = this;
if (Cache.User.isAdmin()) {
require(['./main', './settings/main'], (App, View) => {
controller.navigate('/settings');
App.UI.showAppContent(new View());
});
} else {
this.showDashboard();
}
},
/**
* Settings Item Form
*
* @param model
*/
showSettingForm: function (model) {
if (Cache.User.isAdmin()) {
if (model.get('id') === 'default-site') {
require(['./main', './settings/default-site/main'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
}
},
/**
* Logout
*/
logout: function () {
Tokens.dropTopToken();
this.showLogin();
}
}; };

View File

@ -6,85 +6,85 @@ const Helpers = require('../../lib/helpers');
const template = require('./main.ejs'); const template = require('./main.ejs');
module.exports = Mn.View.extend({ module.exports = Mn.View.extend({
template: template, template: template,
id: 'dashboard', id: 'dashboard',
columns: 0, columns: 0,
stats: {}, stats: {},
ui: { ui: {
links: 'a' links: 'a'
}, },
events: { events: {
'click @ui.links': function (e) { 'click @ui.links': function (e) {
e.preventDefault(); e.preventDefault();
Controller.navigate($(e.currentTarget).attr('href'), true); Controller.navigate($(e.currentTarget).attr('href'), true);
} }
}, },
templateContext: function () { templateContext: function () {
let view = this; const view = this;
return { return {
getUserName: function () { getUserName: function () {
return Cache.User.get('nickname') || Cache.User.get('name'); return Cache.User.get('nickname') || Cache.User.get('name');
}, },
getHostStat: function (type) { getHostStat: function (type) {
if (view.stats && typeof view.stats.hosts !== 'undefined' && typeof view.stats.hosts[type] !== 'undefined') { if (view.stats && typeof view.stats.hosts !== 'undefined' && typeof view.stats.hosts[type] !== 'undefined') {
return Helpers.niceNumber(view.stats.hosts[type]); return Helpers.niceNumber(view.stats.hosts[type]);
} }
return '-'; return '-';
}, },
canShow: function (perm) { canShow: function (perm) {
return Cache.User.isAdmin() || Cache.User.canView(perm); return Cache.User.isAdmin() || Cache.User.canView(perm);
}, },
columns: view.columns columns: view.columns
}; };
}, },
onRender: function () { onRender: function () {
let view = this; const view = this;
if (typeof view.stats.hosts === 'undefined') {
Api.Reports.getHostStats()
.then(response => {
if (!view.isDestroyed()) {
view.stats.hosts = response;
view.render();
}
})
.catch(err => {
console.log(err);
});
}
},
Api.Reports.getHostStats() /**
.then(response => { * @param {Object} [model]
if (!view.isDestroyed()) { */
view.stats.hosts = response; preRender: function (model) {
view.render(); this.columns = 0;
}
})
.catch(err => {
console.log(err);
});
},
/** // calculate the available columns based on permissions for the objects
* @param {Object} [model] // and store as a variable
*/ const perms = ['proxy_hosts', 'redirection_hosts', 'streams', 'dead_hosts'];
preRender: function (model) {
this.columns = 0;
// calculate the available columns based on permissions for the objects perms.map(perm => {
// and store as a variable this.columns += Cache.User.isAdmin() || Cache.User.canView(perm) ? 1 : 0;
//let view = this; });
let perms = ['proxy_hosts', 'redirection_hosts', 'streams', 'dead_hosts'];
perms.map(perm => { // Prevent double rendering on initial calls
this.columns += Cache.User.isAdmin() || Cache.User.canView(perm) ? 1 : 0; if (typeof model !== 'undefined') {
}); this.render();
}
},
// Prevent double rendering on initial calls initialize: function () {
if (typeof model !== 'undefined') { this.preRender();
this.render(); this.listenTo(Cache.User, 'change', this.preRender);
} }
},
initialize: function () {
this.preRender();
this.listenTo(Cache.User, 'change', this.preRender);
}
}); });