External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-10 22:19:28 -02:30
Code Issues Packages Projects Releases Wiki Activity

Fixing popover for notification template status icon

Browse Source 
the awPopOver directive was getting compiled mutliple times and therefore was triggering the on-click event multiple times
This commit is contained in:
Jared Tabor
2016-08-02 14:42:21 -07:00
parent f4d7388ce2
commit 3f69be1a86
4 changed files with 33 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
awx/ui/client/src/dashboard/hosts/dashboard-hosts.list.js
View File

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

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

@@ -28,6 +28,7 @@ export default
Wait('stop'); Wait('stop');
if (scope.notification_templates) { if (scope.notification_templates) {
scope.notification_templates.forEach(function(notification_template, i) { scope.notification_templates.forEach(function(notification_template, i) {
setStatus(notification_template);
scope.notification_type_options.forEach(function(type) { scope.notification_type_options.forEach(function(type) {
if (type.value === notification_template.notification_type) { if (type.value === notification_template.notification_type) {
scope.notification_templates[i].notification_type = type.label; scope.notification_templates[i].notification_type = type.label;
@@ -74,78 +75,33 @@ export default
callback: 'choicesReadyNotifierList' 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 { if (recent_notifications.length > 0) {
elem.tooltip('hide'); html = "<table class=\"table table-condensed flyout\" style=\"width: 100%\">\n";
elem.popover('destroy'); html += "<thead>\n";
} html += "<tr>";
catch(err) { html += "<th>Status</th>";
//ignore html += "<th>Time</th>";
} html += "</tr>\n";
html += "</thead>\n";
html += "<tbody>\n";
$('.popover').each(function() { recent_notifications.forEach(function(row) {
// remove lingering popover <div>. Seems to be a bug in TB3 RC1 html += "<tr>\n";
$(this).remove(); html += `<td><i class=\"SmartStatus-tooltip--${row.status} fa icon-job-${row.status}"></i></td>`;
}); html += "<td>" + ($filter('longDate')(row.created)).replace(/ /,'<br />') + "</td>\n";
$('.tooltip').each( function() { html += "</tr>\n";
// 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() { html += "</tbody>\n";
elem.popover('hide'); html += "</table>\n";
}); }
}); else {
elem.popover('show'); html = "<p>No recent notifications.</p>\n";
}
notification_template.template_status_html = html;
} }
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";
html += "<tr>";
html += "<th>Status</th>";
html += "<th>Time</th>";
html += "</tr>\n";
html += "</thead>\n";
html += "<tbody>\n";
recent_notifications.forEach(function(row) {
html += "<tr>\n";
html += `<td><i class=\"SmartStatus-tooltip--${row.status} fa icon-job-${row.status}"></i></td>`;
html += "<td>" + ($filter('longDate')(row.created)).replace(/ /,'<br />') + "</td>\n";
html += "</tr>\n";
});
html += "</tbody>\n";
html += "</table>\n";
}
else {
html = "<p>No recent notifications.</p>\n";
}
attachElem(event, html, title);
}
}, 100);
};
scope.testNotification = function(){ scope.testNotification = function(){
var name = $filter('sanitize')(this.notification_template.name), var name = $filter('sanitize')(this.notification_template.name),
pending_retries = 10; pending_retries = 10;

15
awx/ui/client/src/notifications/notificationTemplates.list.js
View File

@@ -19,17 +19,14 @@ export default function(){
fields: { fields: {
status: { status: {
label: '', label: '',
columnClass: 'List-staticColumn--smallStatus', iconOnly: true,
searchable: false, searchable: false,
nosort: true, 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: { name: {
key: true, key: true,

4
awx/ui/client/src/shared/generator-helpers.js
View File

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