|
21 | 21 |
|
22 | 22 | const LOGGER_DIALOG_CLASS = 'rollout-manager-logger-dialog'; |
23 | 23 | const BASE_DIALOG_CLASS = 'rollout-manager-dialog'; |
| 24 | + const POPUP_HIDE_DELAY = 6000; |
24 | 25 |
|
25 | 26 | let baseDialog; |
26 | 27 |
|
|
33 | 34 | }).on('coral-overlay:close', function (e) { |
34 | 35 | if (baseDialog.classList.contains(LOGGER_DIALOG_CLASS)) { |
35 | 36 | baseDialog.classList.remove(LOGGER_DIALOG_CLASS); |
| 37 | + document.body.querySelectorAll('.erm-error-tooltip').forEach((tooltip) => tooltip.remove()); |
36 | 38 | ns.removeOpenDialogKey(); |
37 | 39 | } |
38 | 40 | e.target.remove(); |
|
48 | 50 | const PUBLISH_SUCCESS_MSG = Granite.I18n.get('Publishing started'); |
49 | 51 | const PUBLISH_ERROR_MSG = Granite.I18n.get('Publishing is denied.'); |
50 | 52 | const ROLLOUT_IN_PROGRESS_LABEL = Granite.I18n.get('Rollout in progress ...'); |
51 | | - const ROLLOUT_IS_PENDING_LABEL = Granite.I18n.get('Pending (position in queue: {X} of {Y})'); |
| 53 | + const ROLLOUT_IS_PENDING_LABEL = Granite.I18n.get('Pending (position in queue: {position} of {total})'); |
52 | 54 |
|
53 | 55 | function isLoggerDialog(dialog) { |
54 | 56 | return dialog.classList.contains(LOGGER_DIALOG_CLASS); |
55 | 57 | } |
56 | 58 |
|
57 | 59 | function loggerDialogFinished(dialog, statusText) { |
58 | 60 | if (!isLoggerDialog(dialog)) return; |
59 | | - dialog.querySelector('.rollout-processing-status').textContent = statusText; |
| 61 | + dialog.querySelector('.rollout-processing-status').textContent = statusText.startsWith('Completed') ? 'Completed' : statusText; |
60 | 62 | } |
61 | 63 |
|
62 | 64 | function updateLoggerDialogStatus(dialog, queue) { |
63 | 65 | const processingLabel = dialog.querySelector('.rollout-processing-label'); |
64 | | - if (!processingLabel.textContent.trim() || processingLabel.textContent.trim() !== ROLLOUT_IN_PROGRESS_LABEL) { |
65 | | - processingLabel.innerText = ''; |
66 | | - const labelText = queue ? ROLLOUT_IS_PENDING_LABEL.replace('{X}', queue.position).replace('{Y}', queue.total) : ROLLOUT_IN_PROGRESS_LABEL; |
67 | | - processingLabel.insertAdjacentText('beforeend', labelText); |
68 | | - } |
| 66 | + processingLabel.innerText = ''; |
| 67 | + const labelText = queue ? ROLLOUT_IS_PENDING_LABEL.replace('{position}', queue.position).replace('{total}', queue.total) : ROLLOUT_IN_PROGRESS_LABEL; |
| 68 | + processingLabel.insertAdjacentText('beforeend', labelText); |
69 | 69 | } |
70 | 70 |
|
71 | 71 | function updateLog(dialog, message) { |
|
76 | 76 | .first(); |
77 | 77 | if (!itemToUpdate.length) return; |
78 | 78 |
|
79 | | - const { type, result } = message; |
80 | | - switch (type) { |
| 79 | + switch (message.type) { |
81 | 80 | case 'rollout': |
82 | | - handleRollout(itemToUpdate, result); |
| 81 | + handleRollout(itemToUpdate, message); |
83 | 82 | break; |
84 | 83 |
|
85 | 84 | case 'activation': |
86 | | - handleActivation(itemToUpdate, result); |
| 85 | + handleActivation(itemToUpdate, message); |
87 | 86 | break; |
88 | 87 | } |
89 | 88 | } |
90 | 89 |
|
91 | | - function handleRollout(item, result) { |
| 90 | + function handleRollout(item, message) { |
92 | 91 | const $icon = item.find('coral-icon'); |
93 | 92 | if ($icon.hasClass('updated')) return; |
94 | | - $icon[0].set('icon', result === 'success' ? 'checkmark' : 'close'); |
| 93 | + $icon[0].set('icon', message.result === 'success' ? 'checkmark' : 'close'); |
| 94 | + $icon.attr('id', `erm-tooltip-target-${message.id}`); |
| 95 | + if (message.result === 'error') createErrorTooltip(message, $icon); |
95 | 96 | $icon.addClass('updated'); |
96 | 97 | } |
97 | 98 |
|
98 | | - function handleActivation(item, result) { |
| 99 | + function createErrorTooltip(message, $icon) { |
| 100 | + const tooltip = new Coral.Tooltip().set({ |
| 101 | + content: { |
| 102 | + innerHTML: message.error |
| 103 | + }, |
| 104 | + variant: 'inspect', |
| 105 | + target: `#erm-tooltip-target-${message.id}`, |
| 106 | + placement: 'top', |
| 107 | + interaction: 'off' |
| 108 | + }); |
| 109 | + tooltip.classList.add('erm-error-tooltip'); |
| 110 | + document.body.appendChild(tooltip); |
| 111 | + $icon.on('mouseover', () => tooltip.show()); |
| 112 | + $icon.on('mouseout', () => tooltip.hide()); |
| 113 | + } |
| 114 | + |
| 115 | + function handleActivation(item, message) { |
99 | 116 | if (item.find('.rollout-activation-status').length) return; |
100 | 117 |
|
101 | | - const isError = result === 'error'; |
102 | | - const message = isError ? PUBLISH_ERROR_MSG : PUBLISH_SUCCESS_MSG; |
| 118 | + const isError = message.result === 'error'; |
| 119 | + const activationMessage = isError ? PUBLISH_ERROR_MSG : PUBLISH_SUCCESS_MSG; |
103 | 120 |
|
104 | 121 | $('<i>') |
105 | 122 | .addClass('rollout-activation-status') |
106 | 123 | .toggleClass('error', isError) |
107 | | - .text(message) |
| 124 | + .text(activationMessage) |
108 | 125 | .appendTo(item); |
109 | 126 | } |
110 | 127 |
|
|
146 | 163 | dialog.content.innerHTML = ''; |
147 | 164 | dialog.footer.innerHTML = ''; |
148 | 165 | const waitIcon = new Coral.Wait().set({ size: 'S' }); |
149 | | - const $label = $('<span class="rollout-processing-label">'); |
| 166 | + const $label = $('<span class="rollout-processing-label">').text(ROLLOUT_IN_PROGRESS_LABEL); |
150 | 167 | $('<div class="rollout-processing-status">').append(waitIcon, $label).appendTo(dialog.content); |
151 | 168 | dialog.classList.add(LOGGER_DIALOG_CLASS); |
152 | 169 | const closeBtn = new Coral.Button(); |
|
177 | 194 | const popup = new Coral.Alert(); |
178 | 195 | popup.id = 'rollout-manager-status-popup'; |
179 | 196 | popup.variant = status; |
180 | | - popup.content.textContent = `${DIALOG_LABEL} ${path} ${message.toLowerCase()}`; |
| 197 | + const msg = message.toLowerCase().startsWith('completed') ? 'completed' : message.toLowerCase(); |
| 198 | + popup.content.textContent = `${DIALOG_LABEL} ${path} ${msg}`; |
181 | 199 | document.body.append(popup); |
182 | 200 | setTimeout(() => { |
183 | 201 | $(popup).fadeOut(); |
184 | 202 | popup.remove(); |
185 | | - }, 3000); |
| 203 | + }, POPUP_HIDE_DELAY); |
186 | 204 | } |
187 | 205 | ns.showStatusMessage = showStatusMessage; |
188 | 206 |
|
189 | 207 | // Rollout dialog related constants |
190 | 208 | const CANCEL_LABEL = Granite.I18n.get('Cancel'); |
191 | 209 | const DIALOG_LABEL = Granite.I18n.get('Rollout'); |
| 210 | + const HISTORY_LABEL = Granite.I18n.get('Rollout History'); |
192 | 211 | const ROLLOUT_AND_PUBLISH_LABEL = Granite.I18n.get('Rollout and Publish'); |
193 | 212 | const ROLLOUT_AND_PUBLISH_CONFIRMATION = Granite.I18n.get('Warning: Publishing action'); |
194 | 213 | const CONFIRMATION_MESSAGE = Granite.I18n.get( |
|
414 | 433 | dialog.on('click.rm-dialog', CHECKBOX_SELECT_ALL, onSelectAllClick); |
415 | 434 | dialog.on('click.rm-dialog', '.rollout-manager-expand', onExpandButtonClick); |
416 | 435 | dialog.on('click.rm-dialog', '[data-dialog-action]', onResolve); |
| 436 | + dialog.on('click.rm-dialog', '#rollout-history-btn', () => window.open('/etoolbox/rollout-manager/history.html')); |
417 | 437 | dialog.one('coral-overlay:close', function () { |
418 | 438 | dialog.off('.rm-dialog'); |
419 | 439 | deferred.reject(); |
|
452 | 472 | const deferred = $.Deferred(); |
453 | 473 |
|
454 | 474 | const dialog = initRolloutDialog(selectedPath); |
| 475 | + const $rolloutHistoryBtn = $('<button id="rollout-history-btn" is="coral-button" variant="secondary">').text(HISTORY_LABEL); |
455 | 476 | const $rolloutBtn = $('<button id="rolloutButton" data-dialog-action="rollout" is="coral-button" variant="primary" coral-close>').text(DIALOG_LABEL); |
456 | 477 | const $submitBtn = $('<button id="rolloutAndPublishButton" data-dialog-action="rolloutPublish" is="coral-button" variant="primary">').text(ROLLOUT_AND_PUBLISH_LABEL); |
| 478 | + $rolloutHistoryBtn.prependTo(dialog.footer); |
457 | 479 | $rolloutBtn.appendTo(dialog.footer); |
458 | 480 | $submitBtn.appendTo(dialog.footer); |
459 | 481 |
|
|
0 commit comments