Add option to show overall duration in buildset table
Change the "duration" colubm header in the buildset table to a dropdown which allows the user to display either the buildset duration (end-start) or overall duration (end-trigger event). Also update the label on the buildset page to say "Buildset duration" to match. Change-Id: Ib208bcf6b9673d2bba52de90ea6682ec650986a9
This commit is contained in:
parent
d6ea2cea58
commit
2e4b605722
|
@ -116,7 +116,7 @@ function Buildset({ buildset, timezone, tenant, user }) {
|
||||||
icon={<OutlinedClockIcon />}
|
icon={<OutlinedClockIcon />}
|
||||||
value={
|
value={
|
||||||
<>
|
<>
|
||||||
<strong>Total build duration </strong>
|
<strong>Buildset duration </strong>
|
||||||
{moment
|
{moment
|
||||||
.duration(totalDuration, 'seconds')
|
.duration(totalDuration, 'seconds')
|
||||||
.format('h [hr] m [min] s [sec]')}{' '}
|
.format('h [hr] m [min] s [sec]')}{' '}
|
||||||
|
|
|
@ -17,6 +17,10 @@ import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
Dropdown,
|
||||||
|
DropdownItem,
|
||||||
|
DropdownPosition,
|
||||||
|
DropdownToggle,
|
||||||
EmptyState,
|
EmptyState,
|
||||||
EmptyStateBody,
|
EmptyStateBody,
|
||||||
EmptyStateIcon,
|
EmptyStateIcon,
|
||||||
|
@ -28,6 +32,7 @@ import {
|
||||||
BuildIcon,
|
BuildIcon,
|
||||||
CodeBranchIcon,
|
CodeBranchIcon,
|
||||||
CodeIcon,
|
CodeIcon,
|
||||||
|
CogIcon,
|
||||||
CubeIcon,
|
CubeIcon,
|
||||||
OutlinedCalendarAltIcon,
|
OutlinedCalendarAltIcon,
|
||||||
OutlinedClockIcon,
|
OutlinedClockIcon,
|
||||||
|
@ -57,6 +62,16 @@ function BuildsetTable({
|
||||||
timezone,
|
timezone,
|
||||||
history,
|
history,
|
||||||
}) {
|
}) {
|
||||||
|
const [isDurationOpen, setIsDurationOpen] = React.useState(false)
|
||||||
|
const [currentDuration, setCurrentDuration] = React.useState(
|
||||||
|
'Buildset Duration'
|
||||||
|
)
|
||||||
|
|
||||||
|
const handleDurationSelect = (event) => {
|
||||||
|
setIsDurationOpen(!isDurationOpen)
|
||||||
|
setCurrentDuration(event.target.innerText)
|
||||||
|
}
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: <IconProperty icon={<CubeIcon />} value="Project" />,
|
title: <IconProperty icon={<CubeIcon />} value="Project" />,
|
||||||
|
@ -80,8 +95,36 @@ function BuildsetTable({
|
||||||
cellTransforms: [truncate],
|
cellTransforms: [truncate],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: <IconProperty icon={<OutlinedClockIcon />} value="Duration" />,
|
title: <Dropdown
|
||||||
|
isText
|
||||||
|
isPlain
|
||||||
|
position={DropdownPosition.left}
|
||||||
|
onSelect={handleDurationSelect}
|
||||||
|
toggle={
|
||||||
|
<DropdownToggle
|
||||||
|
onToggle={next => setIsDurationOpen(next)}
|
||||||
|
// Use a gear instead of a caret which looks likea sort indicator.
|
||||||
|
toggleIndicator={CogIcon}
|
||||||
|
style={{
|
||||||
|
padding: 0,
|
||||||
|
fontWeight: 'var(--pf-c-table--cell-FontWeight)',
|
||||||
|
fontSize: 'var(--pf-c-table--cell-FontSize)',
|
||||||
|
color: 'var(--pf-c-table--cell-Color)'
|
||||||
|
}}
|
||||||
|
id="toggle-id-duration"
|
||||||
|
>
|
||||||
|
<OutlinedClockIcon /> {currentDuration}
|
||||||
|
</DropdownToggle>
|
||||||
|
}
|
||||||
|
isOpen={isDurationOpen}
|
||||||
|
dropdownItems={[
|
||||||
|
<DropdownItem key="buildset">Buildset Duration</DropdownItem>,
|
||||||
|
<DropdownItem key="overall">Overall Duration</DropdownItem>,
|
||||||
|
]}
|
||||||
|
style={{ width: '100%', padding: 0 }}
|
||||||
|
/>,
|
||||||
dataLabel: 'Duration',
|
dataLabel: 'Duration',
|
||||||
|
props: {style: {overflowY: 'visible'}},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: (
|
title: (
|
||||||
|
@ -98,8 +141,14 @@ function BuildsetTable({
|
||||||
function createBuildsetRow(buildset) {
|
function createBuildsetRow(buildset) {
|
||||||
const changeOrRefLink = buildExternalTableLink(buildset)
|
const changeOrRefLink = buildExternalTableLink(buildset)
|
||||||
|
|
||||||
const duration = moment.utc(buildset.last_build_end_time) -
|
let duration
|
||||||
moment.utc(buildset.first_build_start_time)
|
if (currentDuration === 'Buildset Duration') {
|
||||||
|
duration = moment.utc(buildset.last_build_end_time) -
|
||||||
|
moment.utc(buildset.first_build_start_time)
|
||||||
|
} else {
|
||||||
|
duration = moment.utc(buildset.last_build_end_time) -
|
||||||
|
moment.utc(buildset.event_timestamp)
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
// Pass the buildset's uuid as row id, so we can use it later on in the
|
// Pass the buildset's uuid as row id, so we can use it later on in the
|
||||||
|
|
Loading…
Reference in New Issue