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

[Lucio Correia]

Reviewed-By: Lucio Correia <luciojhc at 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 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){
>


-- 
Lucio Correia
Software Engineer
IBM LTC Brazil