zuul
/
zuul
Code Issues Proposed changes

Add early failure indication to the web UI 

This changes the job progress bar to red, and also the job's component
of the queue item progress bar to red in the case where an early failure
in the job is detected.  This lets users see what has caused the queue
item to flip to the failure status before the first failure report.

It also adds some explanatory text to the job progress bar mouseover.

Change-Id: Ic9fd1eb000b6a6fce44d2c820dedc02fb0ca9438
This commit is contained in:
James E. Blair 2023-07-29 13:30:14 -07:00
parent 6c0ffe565f
commit cfe7ca6155
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/containers/status/ChangePanel.jsx
View File

@ -152,6 +152,9 @@ class ChangePanel extends React.Component {
className = ' progress-bar-info' className = ' progress-bar-info'
break break
default: default:
if (job.pre_fail) {
className = ' progress-bar-danger'
}
break break
} }
return <div className={'progress-bar' + className} return <div className={'progress-bar' + className}
@ -183,11 +186,11 @@ class ChangePanel extends React.Component {
) )
} }
renderJobProgressBar (elapsedTime, remainingTime) { renderJobProgressBar (job, elapsedTime, remainingTime) {
let progressPercent = 100 * (elapsedTime / (elapsedTime + let progressPercent = 100 * (elapsedTime / (elapsedTime +
remainingTime)) remainingTime))
// Show animation in preparation phase // Show animation in preparation phase
let className let className = ''
let progressWidth = progressPercent let progressWidth = progressPercent
let title = '' let title = ''
let remaining = remainingTime let remaining = remainingTime
@ -195,9 +198,12 @@ class ChangePanel extends React.Component {
progressWidth = 100 progressWidth = 100
progressPercent = 0 progressPercent = 0
className = 'progress-bar-striped progress-bar-animated' className = 'progress-bar-striped progress-bar-animated'
} else if (job.pre_fail) {
className = 'progress-bar-danger'
title += 'Early failure detected.\n'
} }
if (remaining !== null) { if (remaining !== null) {
title = 'Estimated time remaining: ' + moment.duration(remaining).format({ title += 'Estimated time remaining: ' + moment.duration(remaining).format({
template: 'd [days] h [hours] m [minutes] s [seconds]', template: 'd [days] h [hours] m [minutes] s [seconds]',
largest: 2, largest: 2,
minValue: 30, minValue: 30,
@ -291,7 +297,7 @@ class ChangePanel extends React.Component {
let resultBar let resultBar
let result = this.jobStrResult(job) let result = this.jobStrResult(job)
if (result === 'in progress') { if (result === 'in progress') {
resultBar = this.renderJobProgressBar(job_times.elapsed, job_times.remaining) resultBar = this.renderJobProgressBar(job, job_times.elapsed, job_times.remaining)
} else { } else {
resultBar = this.renderJobStatusLabel(job, result) resultBar = this.renderJobStatusLabel(job, result)
} }