diff --git a/src/opnsense/www/js/opnsense_status.js b/src/opnsense/www/js/opnsense_status.js
index 903dadb16..ac1054185 100644
--- a/src/opnsense/www/js/opnsense_status.js
+++ b/src/opnsense/www/js/opnsense_status.js
@@ -1,5 +1,5 @@
/**
- * Copyright (C) 2022 Deciso B.V.
+ * Copyright (C) 2022-2024 Deciso B.V.
*
* All rights reserved.
*
@@ -25,53 +25,63 @@
* POSSIBILITY OF SUCH DAMAGE.
*/
-function updateStatusDialog(dialog, status, subjectRef = null) {
- let $ret = $('');
+function updateStatusDialog(dialog, status) {
+ let $ret = $(`
+
+ `);
+
let $message = $(
'
' +
- '' +
'' +
'
'
);
- for (let subject in status.data) {
- if (subject === 'System') {
- continue;
- }
- let statusObject = status.data[subject];
- if (status.data[subject].status == "OK") {
- continue;
- }
-
+ for (let [shortname, subject] of Object.entries(status)) {
$message.find('a').last().addClass('__mb');
- let formattedSubject = subject.replace(/([A-Z])/g, ' $1').trim();
- if (status.data[subject].age != undefined) {
- formattedSubject += ' (' + status.data[subject].age + ')';
+ let formattedSubject = subject.title;
+ if (subject.age != undefined) {
+ formattedSubject += ' (' + subject.age + ')';
}
- let listItem = '' +
- '' + formattedSubject + - '
' + statusObject.message + '
'; - let referral = statusObject.logLocation; + let ref = subject.logLocation != null ? `href="${subject.logLocation}"` : ''; + let $closeBtn = ` + + `; + let $listItem = $(` + ++ + + ${formattedSubject} + ${subject.persistent ? '' : $closeBtn} +
+${subject.message}
+ + `) - $message.find('#opn-status-list').append(listItem); + $message.find('#opn-status-list').append($listItem); - $message.find('#dismiss-' + subject).on('click', function (e) { + $message.find('#dismiss-' + shortname).on('click', function (e) { e.preventDefault(); $.ajax('/api/core/system/dismissStatus', { type: 'post', - data: {'subject': subject}, + data: {'subject': shortname}, dialogRef: dialog, - subjectRef: subject, success: function() { - updateSystemStatus().then((data) => { - let newStatus = parseStatus(data); - let $newMessage = updateStatusDialog(this.dialogRef, newStatus, this.subjectRef); - this.dialogRef.setMessage($newMessage); - $('#system_status').attr("class", newStatus.data['System'].icon); - registerStatusDelegate(this.dialogRef, newStatus); - }); + updateSystemStatus(this.dialogRef); } }); }); @@ -81,49 +91,107 @@ function updateStatusDialog(dialog, status, subjectRef = null) { return $ret; } -function parseStatus(data) { - let status = {}; - let severity = BootstrapDialog.TYPE_PRIMARY; - $.each(data, function(subject, statusObject) { - switch (statusObject.status) { - case "Error": - statusObject.icon = 'fa fa-circle text-danger' - if (subject != 'System') break; - severity = BootstrapDialog.TYPE_DANGER; - break; - case "Warning": - statusObject.icon = 'fa fa-circle text-warning'; - if (subject != 'System') break; - severity = BootstrapDialog.TYPE_WARNING; - break; - case "Notice": - statusObject.icon = 'fa fa-circle text-info'; - if (subject != 'System') break; - severity = BootstrapDialog.TYPE_INFO; - break; - default: - statusObject.icon = 'fa fa-circle text-muted'; - if (subject != 'System') break; - break; - } - $('#system_status').removeClass().addClass(statusObject.icon); - }); - status.severity = severity; - status.data = data; - - return status; +function parseStatusIcon(subject) { + switch (subject.status) { + case "ERROR": + subject.icon = 'fa fa-circle text-danger'; + subject.banner = 'alert-danger'; + subject.severity = BootstrapDialog.TYPE_DANGER; + break; + case "WARNING": + subject.icon = 'fa fa-circle text-warning'; + subject.banner ='alert-warning'; + subject.severity = BootstrapDialog.TYPE_WARNING; + break; + case "NOTICE": + subject.icon = 'fa fa-circle text-info'; + subject.banner = 'alert-info'; + subject.severity = BootstrapDialog.TYPE_INFO; + break; + default: + subject.icon = 'fa fa-circle text-muted'; + subject.banner = 'alert-info'; + subject.severity = BootstrapDialog.TYPE_PRIMARY; + break; + } } -function registerStatusDelegate(dialog, status) { - $("#system_status").click(function() { - dialog.setMessage(function(dialogRef) { - let $message = updateStatusDialog(dialogRef, status); - return $message; +function fetchSystemStatus() { + return new Promise((resolve, reject) => { + ajaxGet('/api/core/system/status', {}, function (data) { + resolve(data); }); - dialog.open(); }); } -function updateSystemStatus() { - return $.ajax('/api/core/system/status', { type: 'get', dataType: 'json' }); +function parseStatus(data) { + let system = data.metadata.system; + + // handle initial page load status icon + parseStatusIcon(system); + $('#system_status').removeClass().addClass(system.icon); + + let notifications = {}; + let bannerMessages = {}; + for (let [shortname, subject] of Object.entries(data.subsystems)) { + parseStatusIcon(subject); + + if (subject.status == "OK") + continue; + + if (subject.persistent) { + bannerMessages[shortname] = subject; + } else { + notifications[shortname] = subject; + } + } + + return { + 'banners': bannerMessages, + 'notifications': notifications + }; +} + +function updateSystemStatus(dialog = null) { + fetchSystemStatus().then((data) => { + let status = parseStatus(data); // will also update status icon + + if (dialog != null) { + dialog.setMessage(function(dialogRef) { + return updateStatusDialog(dialogRef, status.notifications); + }) + } + + if (!$.isEmptyObject(status.banners)) { + let banner = Object.values(status.banners)[0]; + $('#notification-banner').addClass(banner.banner).show().html(banner.message); + } + }); + + $("#system_status").click(function() { + fetchSystemStatus().then((data) => { + let translations = data.metadata.translations; + let status = parseStatus(data); + + dialog = new BootstrapDialog({ + title: translations.dialogTitle, + buttons: [{ + id: 'close', + label: translations.dialogCloseButton, + action: function(dialogRef) { + dialogRef.close(); + } + }], + }); + + dialog.setMessage(function(dialogRef) { + // intentionally do banners first, as these should always show on top + // in both cases normal backend sorting applies + return updateStatusDialog(dialogRef, {...status.banners, ...status.notifications}); + }) + + dialog.open(); + }); + }); + } diff --git a/src/www/fbegin.inc b/src/www/fbegin.inc index 7f6072247..f99e46644 100644 --- a/src/www/fbegin.inc +++ b/src/www/fbegin.inc @@ -198,3 +198,8 @@ $aclObj = new \OPNsense\Core\ACL(); + + +
+
+
diff --git a/src/www/head.inc b/src/www/head.inc
index 4c4fa5460..ae0309e14 100644
--- a/src/www/head.inc
+++ b/src/www/head.inc
@@ -183,22 +183,9 @@ $pagetitle .= html_safe(sprintf(' | %s.%s', $config['system']['hostname'], $conf
$('html,aside').scrollTop(($(this).offset().top - navbar_center));
});
- // Create status dialog instance
- let dialog = new BootstrapDialog({
- title: "",
- buttons: [{
- label: "",
- action: function(dialogRef) {
- dialogRef.close();
- }
- }],
- });
-
+ // artifical delay for UX reasons
setTimeout(function () {
- updateSystemStatus().then((data) => {
- let status = parseStatus(data);
- registerStatusDelegate(dialog, status);
- });
+ updateSystemStatus();
}, 500);
// hook in live menu search