[PATCH][Wok] UI: Create notification-container and make notifications persistent

There is an issue in frontend that does not allow notification messages to be showed more than once if the problem happens again. Also, when notifications are created, they are showed in different parts of the UI, for each plugin or plugin tab (usually in the alert-container). If some window does not have alert-container, the notification is not showed. This patch creates a notificatoin-container 'on-the-fly' in the windows that Wok is displaying and shows the notification. Notification is check by its message content, instead of the code ID, allowing multiple similar notifications but with different subjects (like different VM names). Notifications are showed again if message was closed but backend returns the same notification massage. Before, messages were nevermore display. Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo@linux.vnet.ibm.com> --- ui/css/src/wok.scss | 4 ++++ ui/css/wok.css | 4 ++++ ui/js/src/wok.main.js | 1 - ui/js/src/wok.utils.js | 13 ++++++++----- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index c4a81d4..0672cdb 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -142,6 +142,10 @@ body { } } +#notification-container .alert { + margin: 10px; +} + // Login @import "modules/login"; // Topbar and navigation diff --git a/ui/css/wok.css b/ui/css/wok.css index 96b9e6e..6da0aa8 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -133,6 +133,10 @@ body { cursor: not-allowed !important; } +#notification-container .alert { + margin: 10px; +} + .login .content .container { width: 100% !important; padding-left: 0 !important; diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js index 55b8d0d..1d49c9e 100644 --- a/ui/js/src/wok.main.js +++ b/ui/js/src/wok.main.js @@ -19,7 +19,6 @@ */ wok.NOTIFICATION_INTERVAL = 2000 -wok.postedNotifications = [] wok.tabMode = {}; wok.config = undefined; diff --git a/ui/js/src/wok.utils.js b/ui/js/src/wok.utils.js index 236bf0a..54f8cf0 100644 --- a/ui/js/src/wok.utils.js +++ b/ui/js/src/wok.utils.js @@ -214,12 +214,15 @@ wok.notificationsLoop = function notificationsLoop() { function(notifications){ if(notifications && notifications.length > 0) { $.each(notifications, function(i, notif) { - if (wok.postedNotifications.indexOf(notif.message) == -1) { - wok.message.notify(notif, '#message-container-area'); - wok.postedNotifications.push(notif.message); + // Check if notification is being displayed + if (!$("#notification-container").length) { + $('.navbar.toolbar').next().prepend('<div id="notification-container"></div>'); } - }) - }; + if (($("#notification-container").find("div:contains('" + notif.message + "')").length) == 0) { + wok.message.notify(notif, '#notification-container'); + } + }); + } setTimeout(notificationsLoop, wok.NOTIFICATION_INTERVAL); }, function(data){ -- 2.1.0

Reviewed-By: Lucio Correia <luciojhc@linux.vnet.ibm.com> On 20-06-2016 14:37, Rodrigo Trujillo wrote:
There is an issue in frontend that does not allow notification messages to be showed more than once if the problem happens again. Also, when notifications are created, they are showed in different parts of the UI, for each plugin or plugin tab (usually in the alert-container). If some window does not have alert-container, the notification is not showed. This patch creates a notificatoin-container 'on-the-fly' in the windows that Wok is displaying and shows the notification. Notification is check by its message content, instead of the code ID, allowing multiple similar notifications but with different subjects (like different VM names). Notifications are showed again if message was closed but backend returns the same notification massage. Before, messages were nevermore display.
Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo@linux.vnet.ibm.com> --- ui/css/src/wok.scss | 4 ++++ ui/css/wok.css | 4 ++++ ui/js/src/wok.main.js | 1 - ui/js/src/wok.utils.js | 13 ++++++++----- 4 files changed, 16 insertions(+), 6 deletions(-)
diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index c4a81d4..0672cdb 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -142,6 +142,10 @@ body { } }
+#notification-container .alert { + margin: 10px; +} + // Login @import "modules/login"; // Topbar and navigation diff --git a/ui/css/wok.css b/ui/css/wok.css index 96b9e6e..6da0aa8 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -133,6 +133,10 @@ body { cursor: not-allowed !important; }
+#notification-container .alert { + margin: 10px; +} + .login .content .container { width: 100% !important; padding-left: 0 !important; diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js index 55b8d0d..1d49c9e 100644 --- a/ui/js/src/wok.main.js +++ b/ui/js/src/wok.main.js @@ -19,7 +19,6 @@ */
wok.NOTIFICATION_INTERVAL = 2000 -wok.postedNotifications = [] wok.tabMode = {};
wok.config = undefined; diff --git a/ui/js/src/wok.utils.js b/ui/js/src/wok.utils.js index 236bf0a..54f8cf0 100644 --- a/ui/js/src/wok.utils.js +++ b/ui/js/src/wok.utils.js @@ -214,12 +214,15 @@ wok.notificationsLoop = function notificationsLoop() { function(notifications){ if(notifications && notifications.length > 0) { $.each(notifications, function(i, notif) { - if (wok.postedNotifications.indexOf(notif.message) == -1) { - wok.message.notify(notif, '#message-container-area'); - wok.postedNotifications.push(notif.message); + // Check if notification is being displayed + if (!$("#notification-container").length) { + $('.navbar.toolbar').next().prepend('<div id="notification-container"></div>'); } - }) - }; + if (($("#notification-container").find("div:contains('" + notif.message + "')").length) == 0) { + wok.message.notify(notif, '#notification-container'); + } + }); + } setTimeout(notificationsLoop, wok.NOTIFICATION_INTERVAL); }, function(data){
-- Lucio Correia Software Engineer IBM LTC Brazil

Applied. Thanks. Regards, Aline Manera
participants (3)
-
Aline Manera
-
Lucio Correia
-
Rodrigo Trujillo