Skip to content

Commit

Permalink
Fixes additional tooltip issues on the Deployments page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jdrodjpl
jdrodjpl committed Jan 28, 2025
1 parent 3ab24e5 commit 1000a96
Showing 1 changed file with 41 additions and 29 deletions.
70 changes: 41 additions & 29 deletions install/cws-ui/deployments.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@
const refreshRateVar = "CWS_DASH_DEPLOY_REFRESH_RATE-" + username;
const hideSuspendedProcVar = "CWS_DASH_DEPLOY_HIDE_SUS-" + username;
const tooltipTriggerList = document.querySelectorAll('.progress-bar[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
// Initialize tooltips for process status summary only
const summaryTooltips = document.querySelectorAll('#stat-bar-cws-reserved-total .progress-bar[data-bs-toggle="tooltip"]')
const tooltipList = [...summaryTooltips].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
//GLOBAL VARIABLES
Expand Down Expand Up @@ -203,18 +204,6 @@
$("#stat-bar-" + name + " div.bar-failedToStart").attr('data-bs-title', statsCounts.fts + " Failed to Start");
$("#stat-bar-" + name + " div.bar-incident").attr('data-bs-title', statsCounts.incident + " Incidents");
// Update/initialize the tooltips
document.querySelectorAll('.progress-bar[data-bs-toggle="tooltip"]').forEach(el => {
const tooltipInstance = bootstrap.Tooltip.getInstance(el);
if (tooltipInstance) {
if (tooltipInstance._config) {
tooltipInstance._config.title = el.dataset.bsTitle;
}
tooltipInstance.update();
} else {
new bootstrap.Tooltip(el);
}
});
}
Expand Down Expand Up @@ -375,6 +364,23 @@
});
refreshTotalStatUI('cws-reserved-total', statsTotalVal);
// Initialize tooltips for progress bars
const progressBars = document.querySelectorAll('.progress');
progressBars.forEach(container => {
const tooltipTriggers = container.querySelectorAll('.progress-bar[data-bs-toggle="tooltip"]');
tooltipTriggers.forEach(el => {
let tooltip = bootstrap.Tooltip.getInstance(el);
if (tooltip) {
tooltip.dispose();
}
new bootstrap.Tooltip(el, {
trigger: 'hover',
placement: 'top',
container: container
});
});
});
refreshing = false;
},
Expand Down Expand Up @@ -595,26 +601,19 @@
var html = '<div class="stat-txt">' + instanceText.join('&nbsp;&nbsp;') + '</div>' +
'<div class="progress" data-pdk="' + data.key + '">' +
'<div class="progress-bar bg-danger bar-error" style="width:' + pcts.error + '%"' +
' data-bs-toggle="tooltip" data-bs-title="' + (stats.error || 0) + ' Errors">' +
'<div class="progress-bar bg-danger bar-error" style="width:' + pcts.error + '%" data-bs-toggle="tooltip" data-bs-title="' + (stats.error || 0) + ' Failed">' +
'<span class="sr-only"></span></div>' +
'<div class="progress-bar bg-warning bar-pending" style="width:' + pcts.pending + '%"' +
' data-bs-toggle="tooltip" data-bs-title="' + (stats.pending || 0) + ' Pending">' +
'<div class="progress-bar bg-warning bar-pending" style="width:' + pcts.pending + '%" data-bs-toggle="tooltip" data-bs-title="' + (stats.pending || 0) + ' Pending">' +
'<span class="sr-only"></span></div>' +
'<div class="progress-bar progress-bar-disabled bar-disabled" style="width:' + pcts.disabled + '%"' +
' data-bs-toggle="tooltip" data-bs-title="' + (stats.disabled || 0) + ' Disabled">' +
'<div class="progress-bar progress-bar-disabled bar-disabled" style="width:' + pcts.disabled + '%" data-bs-toggle="tooltip" data-bs-title="' + (stats.disabled || 0) + ' Disabled">' +
'<span class="sr-only"></span></div>' +
'<div class="progress-bar progress-bar-info bar-active" style="width:' + pcts.active + '%"' +
' data-bs-toggle="tooltip" data-bs-title="' + (stats.active || 0) + ' Active">' +
'<div class="progress-bar progress-bar-info bar-active" style="width:' + pcts.active + '%" data-bs-toggle="tooltip" data-bs-title="' + (stats.active || 0) + ' Running">' +
'<span class="sr-only"></span></div>' +
'<div class="progress-bar progress-bar-success bar-completed" style="width:' + pcts.completed + '%"' +
' data-bs-toggle="tooltip" data-bs-title="' + (stats.completed || 0) + ' Completed">' +
'<div class="progress-bar progress-bar-success bar-completed" style="width:' + pcts.completed + '%" data-bs-toggle="tooltip" data-bs-title="' + (stats.completed || 0) + ' Completed">' +
'<span class="sr-only"></span></div>' +
'<div class="progress-bar bar-failedToStart" style="width:' + pcts.fts + '%"' +
' data-bs-toggle="tooltip" data-bs-title="' + (stats.fts || 0) + ' Failed to Start">' +
'<div class="progress-bar bar-failedToStart" style="width:' + pcts.fts + '%" data-bs-toggle="tooltip" data-bs-title="' + (stats.fts || 0) + ' Failed to Start">' +
'<span class="sr-only"></span></div>' +
'<div class="progress-bar bar-incident" style="width:' + pcts.incident + '%"' +
' data-bs-toggle="tooltip" data-bs-title="' + (stats.incident || 0) + ' Incidents">' +
'<div class="progress-bar bar-incident" style="width:' + pcts.incident + '%" data-bs-toggle="tooltip" data-bs-title="' + (stats.incident || 0) + ' Incidents">' +
'<span class="sr-only"></span></div></div>';
return html;
}
Expand Down Expand Up @@ -647,6 +646,19 @@
//REDRAW THE TABLE TO REFLECT THE NEW DATA
$("#process-table").DataTable().draw();
// Initialize tooltips for progress bars after initial table draw
const progressBars = document.querySelectorAll('.progress');
progressBars.forEach(container => {
const tooltipTriggers = container.querySelectorAll('.progress-bar[data-bs-toggle="tooltip"]');
tooltipTriggers.forEach(el => {
new bootstrap.Tooltip(el, {
trigger: 'hover',
placement: 'top',
container: container
});
});
});
//ADD DOWNLOAD BUTTON & HIDE SUSPENDED CHECKBOX TO DIVS CREATED BY DATATABLE (DOM OPTION)
$('<button id="download-btn" class="btn btn-primary btn-sm" onclick="downloadJSON()"><img height="16" width="16" src="/${base}/images/download.svg" style="margin-right: 3px;" />Download</button>').appendTo(".above-table-buttons");
$('<div class="form-check form-check-inline"><input class="form-check-input" name="hide-suspended" id="hide-sus-btn" type="checkbox" style="align-self: center;"><label class="form-check-label" for="hide-sus-btn">Hide All Suspended Processes</label></div>').appendTo(".above-table-buttons");
Expand Down Expand Up @@ -921,7 +933,7 @@
</div>

<div class="progress-bar progress-bar-info bar-active" data-bs-toggle="tooltip"
data-bs-title="0 Active">
data-bs-title="0 Running">
<span class="sr-only"></span>
</div>

Expand Down

0 comments on commit 1000a96

Please sign in to comment.