Merge pull request #3190 from jaredevantabor/notifications-popover

Fix for recent job popovers for notification templates and inventory syncs

awx/ui/client/src/dashboard/hosts/dashboard-hosts.list.js

@@ -31,6 +31,7 @@ export default function(){
                 awTipPlacement: 'right',
                 dataPlacement: 'right',
                 awPopOver: '{{ host.job_status_html }}',
+                dataTitle: '{{host.job_status_title}}',
                 ngClick:'viewHost(host.id)',
                 columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2 List-staticColumn--smallStatus'
             },

awx/ui/client/src/inventories/list/inventory-list.controller.js

@@ -50,16 +50,9 @@ function InventoriesList($scope, $rootScope, $location, $log,
             "aw-pop-over": html,
             "data-popover-title": title,
             "data-placement": "right" });
+        elem.removeAttr('ng-click');
         $compile(elem)($scope);
-        elem.on('shown.bs.popover', function() {
+        $scope.triggerPopover(event);
-            $('.popover').each(function() {
-                $compile($(this))($scope);  //make nested directives work!
-            });
-            $('.popover-content, .popover-title').click(function() {
-                elem.popover('hide');
-            });
-        });
-        elem.popover('show');
     }
 
     view.inject(InventoryList, { mode: mode, scope: $scope });
@@ -250,6 +243,14 @@ function InventoriesList($scope, $rootScope, $location, $log,
     });
 
     $scope.showGroupSummary = function(event, id) {
+        try{
+            var elem = $(event.target).parent();
+            // if the popover is visible already, then exit the function here
+            if(elem.data()['bs.popover'].tip().hasClass('in')){
+                return;
+            }
+        }
+        catch(err){
             var inventory;
             if (!Empty(id)) {
                 inventory = Find({ list: $scope.inventories, key: 'id', val: id });
@@ -267,9 +268,18 @@ function InventoriesList($scope, $rootScope, $location, $log,
                         });
                 }
             }
+        }
     };
 
     $scope.showHostSummary = function(event, id) {
+        try{
+            var elem = $(event.target).parent();
+            // if the popover is visible already, then exit the function here
+            if(elem.data()['bs.popover'].tip().hasClass('in')){
+                return;
+            }
+        }
+        catch(err){
             var url, inventory;
             if (!Empty(id)) {
                 inventory = Find({ list: $scope.inventories, key: 'id', val: id });
@@ -290,6 +300,7 @@ function InventoriesList($scope, $rootScope, $location, $log,
                         });
                 }
             }
+        }
     };
 
     $scope.viewJob = function(url) {

awx/ui/client/src/notifications/notification-templates-list/list.controller.js

@@ -28,6 +28,7 @@ export default
                 Wait('stop');
                 if (scope.notification_templates) {
                     scope.notification_templates.forEach(function(notification_template, i) {
+                        setStatus(notification_template);
                         scope.notification_type_options.forEach(function(type) {
                             if (type.value === notification_template.notification_type) {
                                 scope.notification_templates[i].notification_type = type.label;
@@ -74,51 +75,8 @@ export default
                 callback: 'choicesReadyNotifierList'
             });
 
-            function attachElem(event, html, title) {
+            function setStatus(notification_template) {
-                var elem = $(event.target).parent();
+                var html, recent_notifications = notification_template.summary_fields.recent_notifications;
-                try {
-                    elem.tooltip('hide');
-                    elem.popover('destroy');
-                }
-                catch(err) {
-                    //ignore
-                }
-
-                $('.popover').each(function() {
-                    // remove lingering popover <div>. Seems to be a bug in TB3 RC1
-                    $(this).remove();
-                });
-                $('.tooltip').each( function() {
-                    // close any lingering tool tipss
-                    $(this).hide();
-                });
-                elem.attr({
-                    "aw-pop-over": html,
-                    "data-popover-title": title,
-                    "data-placement": "right" });
-                $compile(elem)(scope);
-                elem.on('shown.bs.popover', function() {
-                    $('.popover').each(function() {
-                        $compile($(this))(scope);  //make nested directives work!
-                    });
-                    $('.popover-content, .popover-title').click(function() {
-                        elem.popover('hide');
-                    });
-                });
-                elem.popover('show');
-            }
-
-            scope.showSummary = function(event, id) {
-                setTimeout(function(){
-                    if (!Empty(id)) {
-                        var recent_notifications,
-                        html, title = "Recent Notifications";
-
-                        scope.notification_templates.forEach(function(notification_template){
-                            if(notification_template.id === id){
-                                recent_notifications = notification_template.summary_fields.recent_notifications;
-                            }
-                        });
                 if (recent_notifications.length > 0) {
                     html = "<table class=\"table table-condensed flyout\" style=\"width: 100%\">\n";
                     html += "<thead>\n";
@@ -141,10 +99,8 @@ export default
                 else {
                     html = "<p>No recent notifications.</p>\n";
                 }
-                        attachElem(event, html, title);
+                notification_template.template_status_html = html;
             }
-                }, 100);
-            };
 
             scope.testNotification = function(){
                 var name = $filter('sanitize')(this.notification_template.name),

awx/ui/client/src/notifications/notificationTemplates.list.js

@@ -19,17 +19,14 @@ export default function(){
         fields: {
             status: {
                 label: '',
-                columnClass: 'List-staticColumn--smallStatus',
+                iconOnly: true,
                 searchable: false,
                 nosort: true,
-                ngClick: "null",
+                icon: 'icon-job-{{ notification_template.status }}',
-                iconOnly: true,
+                awPopOver: '{{ notification_template.template_status_html }}',
-                excludeModal: true,
+                dataTitle: "Recent Notifications",
-                icons: [{
+                dataPlacement: 'right',
-                    icon: "{{ 'icon-job-' + notification_template.status }}",
+                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2 List-staticColumn--smallStatus'
-                    ngClick: "showSummary($event, notification_template.id)",
-                    ngClass: ""
-                }]
             },
             name: {
                 key: true,

awx/ui/client/src/shared/directives.js

@@ -576,6 +576,10 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
                 template = '<div id="' + element[0].id + '_popover_container" class="popover" role="tooltip"><div class="arrow"></div><h3 id="' + element[0].id + '_popover_title" class="popover-title"></h3><div id="' + element[0].id + '_popover_content" class="popover-content"></div></div>';
             }
 
+            scope.triggerPopover = function(e){
+                showPopover(e);
+            };
+
             if (attrs.awPopOverWatch) {
                 $(element).popover({
                     placement: placement,

awx/ui/client/src/shared/generator-helpers.js

@@ -371,7 +371,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
         } else if (field.link || (field.key && (field.link === undefined || field.link))) {
             html += "<a href=\"#/" + base + "/{{" + list.iterator + ".id }}\" ";
         } else {
-            html += "<a href=\"\">";
+            html += "<a href=\"\"";
         }
         if (field.awDroppable) {
             html += Attr(field, 'awDroppable');
@@ -394,7 +394,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
         if (field.awPopOver) {
             html += "aw-pop-over=\"" + field.awPopOver + "\" ";
             html += (field.dataPlacement) ? "data-placement=\"" + field.dataPlacement + "\" " : "";
-            html += (field.dataTitle) ? "data-title=\"" + field.dataTitle + "\" " : "";
+            html += (field.dataTitle) ? "over-title=\"" + field.dataTitle + "\" " : "";
         }
         html += (field.ngClass) ? Attr(field, 'ngClass') : '';
         html += (field.ngEllipsis) ? "data-ng-bind=\"" + list.iterator + "." + fld + "\" data-ellipsis " : "";