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

[Rodrigo Trujillo]

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 at 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