Skip to content

Commit f7e9459

Browse files
authored
Merge pull request #74 from exadel-inc/bugfix/ERM-70
[ERM-70;71;73] Bugfixes, add history button
2 parents 2d3ad44 + 68b89d0 commit f7e9459

5 files changed

Lines changed: 62 additions & 22 deletions

File tree

ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/css/console-ui.checkboxlist.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,10 @@
118118
.rollout-manager-scope {
119119
width: fit-content;
120120
}
121+
122+
#rollout-history-btn {
123+
margin-right: auto;
124+
}
121125
}
122126

123127
/* Cloud styles */

ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/css/console-ui.status-dialog.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
.rollout-manager-logger-dialog {
2+
coral-dialog-content {
3+
overflow-y: auto;
4+
}
5+
26
.rollout-processing-status {
37
font-weight: 500;
48
margin-bottom: 1em;
59
}
610

711
.rollout-logs-list {
12+
position: relative;
813
margin-block: 0;
914
list-style: none;
1015
padding: 0;
11-
overflow-y: auto;
1216

1317
.rollout-log-item > coral-icon {
1418
margin-right: 5px;
1519
vertical-align: text-top;
20+
pointer-events: auto;
1621
}
1722

1823
.rollout-log-item > label {
@@ -33,6 +38,8 @@
3338

3439
#rollout-manager-status-popup {
3540
z-index: 10031; /* more than coral-dialog */
41+
display: block;
42+
width: fit-content;
3643
top: 60px;
3744
left: 50%;
3845
transform: translate(-50%, 0);

ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/js/console-ui.dialog.js

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121

2222
const LOGGER_DIALOG_CLASS = 'rollout-manager-logger-dialog';
2323
const BASE_DIALOG_CLASS = 'rollout-manager-dialog';
24+
const POPUP_HIDE_DELAY = 6000;
2425

2526
let baseDialog;
2627

@@ -33,6 +34,7 @@
3334
}).on('coral-overlay:close', function (e) {
3435
if (baseDialog.classList.contains(LOGGER_DIALOG_CLASS)) {
3536
baseDialog.classList.remove(LOGGER_DIALOG_CLASS);
37+
document.body.querySelectorAll('.erm-error-tooltip').forEach((tooltip) => tooltip.remove());
3638
ns.removeOpenDialogKey();
3739
}
3840
e.target.remove();
@@ -48,24 +50,22 @@
4850
const PUBLISH_SUCCESS_MSG = Granite.I18n.get('Publishing started');
4951
const PUBLISH_ERROR_MSG = Granite.I18n.get('Publishing is denied.');
5052
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})');
5254

5355
function isLoggerDialog(dialog) {
5456
return dialog.classList.contains(LOGGER_DIALOG_CLASS);
5557
}
5658

5759
function loggerDialogFinished(dialog, statusText) {
5860
if (!isLoggerDialog(dialog)) return;
59-
dialog.querySelector('.rollout-processing-status').textContent = statusText;
61+
dialog.querySelector('.rollout-processing-status').textContent = statusText.startsWith('Completed') ? 'Completed' : statusText;
6062
}
6163

6264
function updateLoggerDialogStatus(dialog, queue) {
6365
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);
6969
}
7070

7171
function updateLog(dialog, message) {
@@ -76,35 +76,52 @@
7676
.first();
7777
if (!itemToUpdate.length) return;
7878

79-
const { type, result } = message;
80-
switch (type) {
79+
switch (message.type) {
8180
case 'rollout':
82-
handleRollout(itemToUpdate, result);
81+
handleRollout(itemToUpdate, message);
8382
break;
8483

8584
case 'activation':
86-
handleActivation(itemToUpdate, result);
85+
handleActivation(itemToUpdate, message);
8786
break;
8887
}
8988
}
9089

91-
function handleRollout(item, result) {
90+
function handleRollout(item, message) {
9291
const $icon = item.find('coral-icon');
9392
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);
9596
$icon.addClass('updated');
9697
}
9798

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) {
99116
if (item.find('.rollout-activation-status').length) return;
100117

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;
103120

104121
$('<i>')
105122
.addClass('rollout-activation-status')
106123
.toggleClass('error', isError)
107-
.text(message)
124+
.text(activationMessage)
108125
.appendTo(item);
109126
}
110127

@@ -146,7 +163,7 @@
146163
dialog.content.innerHTML = '';
147164
dialog.footer.innerHTML = '';
148165
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);
150167
$('<div class="rollout-processing-status">').append(waitIcon, $label).appendTo(dialog.content);
151168
dialog.classList.add(LOGGER_DIALOG_CLASS);
152169
const closeBtn = new Coral.Button();
@@ -177,18 +194,20 @@
177194
const popup = new Coral.Alert();
178195
popup.id = 'rollout-manager-status-popup';
179196
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}`;
181199
document.body.append(popup);
182200
setTimeout(() => {
183201
$(popup).fadeOut();
184202
popup.remove();
185-
}, 3000);
203+
}, POPUP_HIDE_DELAY);
186204
}
187205
ns.showStatusMessage = showStatusMessage;
188206

189207
// Rollout dialog related constants
190208
const CANCEL_LABEL = Granite.I18n.get('Cancel');
191209
const DIALOG_LABEL = Granite.I18n.get('Rollout');
210+
const HISTORY_LABEL = Granite.I18n.get('Rollout History');
192211
const ROLLOUT_AND_PUBLISH_LABEL = Granite.I18n.get('Rollout and Publish');
193212
const ROLLOUT_AND_PUBLISH_CONFIRMATION = Granite.I18n.get('Warning: Publishing action');
194213
const CONFIRMATION_MESSAGE = Granite.I18n.get(
@@ -414,6 +433,7 @@
414433
dialog.on('click.rm-dialog', CHECKBOX_SELECT_ALL, onSelectAllClick);
415434
dialog.on('click.rm-dialog', '.rollout-manager-expand', onExpandButtonClick);
416435
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'));
417437
dialog.one('coral-overlay:close', function () {
418438
dialog.off('.rm-dialog');
419439
deferred.reject();
@@ -452,8 +472,10 @@
452472
const deferred = $.Deferred();
453473

454474
const dialog = initRolloutDialog(selectedPath);
475+
const $rolloutHistoryBtn = $('<button id="rollout-history-btn" is="coral-button" variant="secondary">').text(HISTORY_LABEL);
455476
const $rolloutBtn = $('<button id="rolloutButton" data-dialog-action="rollout" is="coral-button" variant="primary" coral-close>').text(DIALOG_LABEL);
456477
const $submitBtn = $('<button id="rolloutAndPublishButton" data-dialog-action="rolloutPublish" is="coral-button" variant="primary">').text(ROLLOUT_AND_PUBLISH_LABEL);
478+
$rolloutHistoryBtn.prependTo(dialog.footer);
457479
$rolloutBtn.appendTo(dialog.footer);
458480
$submitBtn.appendTo(dialog.footer);
459481

ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/js/rollout-utils.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
const startIdArray = getStartIdArray();
3636
createStatusUpdater(logger, startIdArray, !!dialogData.length)
3737
.catch((e) => {
38+
ns.removeActiveTasksKey();
3839
logger ? logger.finished(`${PROCESSING_ERROR_MSG} ${e}`) : console.log(`${PROCESSING_ERROR_MSG} ${e}`);
3940
});
4041
});
@@ -53,6 +54,7 @@
5354
}
5455
} catch (e) {
5556
if (e.statusText === 'Aborted requested') return;
57+
ns.removeActiveTasksKey();
5658
logger.finished(`${PROCESSING_ERROR_MSG} ${e}`);
5759
}
5860
}
@@ -94,7 +96,7 @@
9496
const currentIdArray = id.split(';');
9597
const isAbortRequest = currentIdArray.some((item) => !startIdSet.has(item));
9698
response = await getStatusInfo(isAbortRequest, firstAttempt, id, offset);
97-
if (!response.failedAttempt) response.tasks.forEach((task) => handleTaskResponse(task, logger));
99+
if (!response.failedAttempt && response.tasks) response.tasks.forEach((task) => handleTaskResponse(task, logger));
98100
firstAttempt = false;
99101
await promisifyTimeout(STATUS_UPDATE_INTERVAL);
100102
}

ui.apps/src/main/content/jcr_root/apps/etoolbox-rollout-manager/clientlibs/rollout-manager-ui/js/storage-utils.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,11 @@
5252
return data.filter((item) => item.id !== id);
5353
}
5454

55+
function removeActiveTasksKey() {
56+
sessionStorage.removeItem(ACTIVE_TASKS_ID);
57+
}
58+
ns.removeActiveTasksKey = removeActiveTasksKey;
59+
5560
function removeOpenDialogKey() {
5661
sessionStorage.removeItem(OPEN_DIALOG_KEY);
5762
}

0 commit comments

Comments
 (0)