Render status/result via colorful dot

This commit is contained in:
Martchus 2022-03-12 22:23:01 +01:00
parent 8e8d021eb0
commit c2b05debd2
2 changed files with 59 additions and 5 deletions

View File

@ -52,6 +52,41 @@
#build-action-settings {
width: fit-content;
}
.build-action-state {
border: 0px solid #eee;
border-radius: 100px;
background-color: #eee;
width: 20px;
height: 20px;
display: inline-block;
padding: 2px;
text-align: center;
margin-right: 5px;
}
.build-action-state-Created, .build-action-state-Enqueued {
background-color: #67A2B7;
}
.build-action-state-AwaitingConfirmation {
background-color: #9167b7;
}
.build-action-state-Running {
background-color: #8BDFFF;
}
.build-action-state-Finished, .build-action-result-None {
background-color: #aaaaaa;
}
.build-action-result-Success {
background-color: #59DF24;
}
.build-action-result-Failure {
background-color: #FF4E46;
}
.build-action-result-ConfirmationDeclined {
background-color: #aaaaaa;
}
.build-action-result-Aborted {
background-color: #AF1E11;
}
/* common styling for certain forms */
.form-row {
@ -187,4 +222,4 @@
width: 28px;
height: 28px;
background-size: 28px 28px;
}
}

View File

@ -310,8 +310,8 @@ function showBuildActions(ajaxRequest)
const container = GenericRendering.renderTableFromJsonArray({
rows: responseJson,
rowsPerPage: 10,
columnHeaders: ['', 'ID', 'Task', 'Type', 'Status', 'Result', 'Created', 'Started', 'Runtime', 'Directory', 'Source repo', 'Destination repo', 'Packages', 'Actions'],
columnAccessors: ['checkbox', 'id', 'taskName', 'type', 'status', 'result', 'created', 'started', 'finished', 'directory', 'sourceDbs', 'destinationDbs', 'packageNames', 'actions'],
columnHeaders: ['', 'ID', 'Task', 'Type', 'Created', 'Started', 'Runtime', 'Directory', 'Source repo', 'Destination repo', 'Packages', 'Actions'],
columnAccessors: ['checkbox', 'id', 'taskName', 'type', 'created', 'started', 'finished', 'directory', 'sourceDbs', 'destinationDbs', 'packageNames', 'actions'],
columnSortAccessors: [null, null, null, null, null, null, '_cc'],
customRenderer: {
checkbox: function(value, row) {
@ -321,10 +321,29 @@ function showBuildActions(ajaxRequest)
},
actions: renderBuildActionActions,
id: function(value, row) {
return GenericRendering.renderLink(value, row, function() {
const stateElement = document.createElement('span');
stateElement.classList.add('build-action-state');
const tooltipLines = [];
if (row.status !== undefined) {
const statusInfo = globalInfo.buildActionStates[row.status];
tooltipLines.push('Status: ' + Utils.getProperty(statusInfo, 'name', 'Invalid/unknown'));
if (statusInfo && statusInfo.name) {
stateElement.classList.add('build-action-status-' + statusInfo.name.replace(' ', ''));
}
}
if (row.result !== undefined) {
const resultInfo = globalInfo.buildActionResults[row.result];
tooltipLines.push('Result: ' + Utils.getProperty(resultInfo, 'name', 'Invalid/unknown'));
if (resultInfo && resultInfo.name) {
stateElement.classList.add('build-action-result-' + resultInfo.name.replace(' ', ''));
}
}
stateElement.title = tooltipLines.join('\n');
stateElement.appendChild(GenericRendering.renderLink(value, row, function() {
queryBuildActionDetails(row.id);
return false;
}, 'Show details', undefined, '#build-action-details-section?' + row.id);
}, undefined, undefined, '#build-action-details-section?' + row.id));
return stateElement;
},
taskName: function (value) {
if (!value) {