Add estimated time remaining tooltip to UI
With help from TristanC, this should create a tooltip when users hover over the status bar of a running job, that displays the estimated time left. Change-Id: I8d386ea9dce81088eb09293e4d9643ce448434f4 Signed-off-by: Paul Belanger <pabelanger@redhat.com>
This commit is contained in:
parent
63dbf3476d
commit
09b4b8a5b3
|
@ -16,6 +16,7 @@ import * as React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
|
import * as moment from 'moment'
|
||||||
|
|
||||||
|
|
||||||
class ChangePanel extends React.Component {
|
class ChangePanel extends React.Component {
|
||||||
|
@ -191,14 +192,19 @@ class ChangePanel extends React.Component {
|
||||||
// Show animation in preparation phase
|
// Show animation in preparation phase
|
||||||
let className
|
let className
|
||||||
let progressWidth = progressPercent
|
let progressWidth = progressPercent
|
||||||
|
let title = ''
|
||||||
if (Number.isNaN(progressPercent)) {
|
if (Number.isNaN(progressPercent)) {
|
||||||
progressWidth = 100
|
progressWidth = 100
|
||||||
progressPercent = 0
|
progressPercent = 0
|
||||||
className = 'progress-bar-striped progress-bar-animated'
|
className = 'progress-bar-striped progress-bar-animated'
|
||||||
}
|
}
|
||||||
|
if (remainingTime !== null) {
|
||||||
|
title = 'estimated time remaining ' + moment.duration(remainingTime, 'milliseconds').humanize()
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='progress zuul-job-result'>
|
<div className='progress zuul-job-result'
|
||||||
|
title={title}>
|
||||||
<div className={'progress-bar ' + className}
|
<div className={'progress-bar ' + className}
|
||||||
role='progressbar'
|
role='progressbar'
|
||||||
aria-valuenow={progressPercent}
|
aria-valuenow={progressPercent}
|
||||||
|
|
Loading…
Reference in New Issue