zuul
/
zuul
Code Issues Proposed changes

Fix Gantt chart overlap on dup build names 

If a buildset has more than one build with the same name, the
Gantt chart on the buildset page will render both of them on the
same line which can obscure one of them.

Correct this by telling the chart library that the independent
variable is the build uuid (which is unique) rather than the name,
and then override the axis labels to show the name.

Change-Id: I07b4059ca75748910633f72458db1b5fb8a84041
This commit is contained in:
James E. Blair 2024-03-19 10:51:58 -07:00
parent d7b79f05a6
commit f695820f2e
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/Misc.jsx
View File

@ -92,6 +92,14 @@ function buildExternalTableLink(ref) {
return null
}
function describeRef(ref) {
if (ref.change) {
return `Change ${ref.change}`
} else {
return `Ref ${ref.ref}`
}
}
function renderRefInfo(ref) {
const refinfo = ref.branch ? (
<>
@ -172,4 +180,4 @@ function setDarkMode(darkMode) {
}
}
export { IconProperty, removeHash, ExternalLink, buildExternalLink, buildExternalTableLink, renderRefInfo, ConditionalWrapper, resolveDarkMode, setDarkMode }
export { IconProperty, removeHash, ExternalLink, buildExternalLink, buildExternalTableLink, describeRef, renderRefInfo, ConditionalWrapper, resolveDarkMode, setDarkMode }

12
web/src/containers/charts/GanttChart.jsx
View File

@ -24,6 +24,7 @@ import 'moment-duration-format'
import { Chart, ChartBar, ChartAxis, ChartLegend, ChartTooltip } from '@patternfly/react-charts'
import { buildResultLegendData, buildsBarStyle } from './Misc'
import { describeRef } from '../../Misc'
function BuildsetGanttChart(props) {
@ -40,15 +41,17 @@ function BuildsetGanttChart(props) {
const origin = moment_tz.utc(sortedByStartTime[builds.length - 1].start_time).tz(timezone)
const longestJobName = builds.reduce((a, build) => (a.length < build.job_name.length ? build.job_name : a), '')
const jobNames = builds.map((d) => d.job_name)
const data = sortedByStartTime.map((build) => {
return {
x: build.job_name,
x: build.uuid,
y0: build.start_time ? (moment_tz.utc(build.start_time).tz(timezone) - origin) / 1000 : 0,
y: build.end_time ? (moment_tz.utc(build.end_time).tz(timezone) - origin) / 1000 : 0,
result: build.result,
started: moment_tz.utc(build.start_time).tz(timezone).format('YYYY-MM-DD HH:mm:ss'),
ended: moment_tz.utc(build.end_time).tz(timezone).format('YYYY-MM-DD HH:mm:ss'),
ref: build.ref,
}
})
@ -88,7 +91,10 @@ function BuildsetGanttChart(props) {
legendData={legendData}
legendComponent={<ChartLegend data={chartLegend} itemsPerRow={4} style={{labels: {fill: horizontalLegendTextColor}}} />}
>
<ChartAxis style={{tickLabels: {fill:horizontalLegendTextColor}}} />
<ChartAxis
style={{tickLabels: {fill:horizontalLegendTextColor}}}
tickFormat={((tick, index) => jobNames[index])}
/>
<ChartAxis
dependentAxis
showGrid
@ -114,7 +120,7 @@ function BuildsetGanttChart(props) {
style={ buildsBarStyle }
labelComponent={
<ChartTooltip constrainToVisibleArea/>}
labels={({ datum }) => `${datum.result}\nStarted ${datum.started}\nEnded ${datum.ended}`}
labels={({ datum }) => `${datum.result}\nStarted ${datum.started}\nEnded ${datum.ended}\n${describeRef(datum.ref)}`}
/>
</Chart>
</div>