diff options
author | James E. Blair <jim@acmegating.com> | 2022-02-27 10:53:27 -0800 |
---|---|---|
committer | James E. Blair <jim@acmegating.com> | 2022-03-02 12:44:41 -0800 |
commit | 2e4b60572298e588e89459b561fd978d9f8945d7 (patch) | |
tree | 088842c23d0c14bb0afe0a9ce7fe8dddb5406bbc | |
parent | d6ea2cea5839050065a456a6cafa03cf03062082 (diff) | |
download | zuul-2e4b60572298e588e89459b561fd978d9f8945d7.tar.gz |
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
-rw-r--r-- | web/src/containers/build/Buildset.jsx | 2 | ||||
-rw-r--r-- | web/src/containers/build/BuildsetTable.jsx | 55 |
2 files changed, 53 insertions, 4 deletions
diff --git a/web/src/containers/build/Buildset.jsx b/web/src/containers/build/Buildset.jsx index aeac9c05c..1e9ca86c7 100644 --- a/web/src/containers/build/Buildset.jsx +++ b/web/src/containers/build/Buildset.jsx @@ -116,7 +116,7 @@ function Buildset({ buildset, timezone, tenant, user }) { icon={<OutlinedClockIcon />} value={ <> - <strong>Total build duration </strong> + <strong>Buildset duration </strong> {moment .duration(totalDuration, 'seconds') .format('h [hr] m [min] s [sec]')}{' '} diff --git a/web/src/containers/build/BuildsetTable.jsx b/web/src/containers/build/BuildsetTable.jsx index a66c8a4b7..44b68e0ee 100644 --- a/web/src/containers/build/BuildsetTable.jsx +++ b/web/src/containers/build/BuildsetTable.jsx @@ -17,6 +17,10 @@ import PropTypes from 'prop-types' import { connect } from 'react-redux' import { Button, + Dropdown, + DropdownItem, + DropdownPosition, + DropdownToggle, EmptyState, EmptyStateBody, EmptyStateIcon, @@ -28,6 +32,7 @@ import { BuildIcon, CodeBranchIcon, CodeIcon, + CogIcon, CubeIcon, OutlinedCalendarAltIcon, OutlinedClockIcon, @@ -57,6 +62,16 @@ function BuildsetTable({ timezone, 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 = [ { title: <IconProperty icon={<CubeIcon />} value="Project" />, @@ -80,8 +95,36 @@ function BuildsetTable({ 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', + props: {style: {overflowY: 'visible'}}, }, { title: ( @@ -98,8 +141,14 @@ function BuildsetTable({ function createBuildsetRow(buildset) { const changeOrRefLink = buildExternalTableLink(buildset) - const duration = moment.utc(buildset.last_build_end_time) - - moment.utc(buildset.first_build_start_time) + let duration + 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 { // Pass the buildset's uuid as row id, so we can use it later on in the |