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:
parent
d7b79f05a6
commit
f695820f2e
|
@ -92,6 +92,14 @@ function buildExternalTableLink(ref) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function describeRef(ref) {
|
||||||
|
if (ref.change) {
|
||||||
|
return `Change ${ref.change}`
|
||||||
|
} else {
|
||||||
|
return `Ref ${ref.ref}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function renderRefInfo(ref) {
|
function renderRefInfo(ref) {
|
||||||
const refinfo = ref.branch ? (
|
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 }
|
||||||
|
|
|
@ -24,6 +24,7 @@ import 'moment-duration-format'
|
||||||
import { Chart, ChartBar, ChartAxis, ChartLegend, ChartTooltip } from '@patternfly/react-charts'
|
import { Chart, ChartBar, ChartAxis, ChartLegend, ChartTooltip } from '@patternfly/react-charts'
|
||||||
|
|
||||||
import { buildResultLegendData, buildsBarStyle } from './Misc'
|
import { buildResultLegendData, buildsBarStyle } from './Misc'
|
||||||
|
import { describeRef } from '../../Misc'
|
||||||
|
|
||||||
|
|
||||||
function BuildsetGanttChart(props) {
|
function BuildsetGanttChart(props) {
|
||||||
|
@ -40,15 +41,17 @@ function BuildsetGanttChart(props) {
|
||||||
const origin = moment_tz.utc(sortedByStartTime[builds.length - 1].start_time).tz(timezone)
|
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 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) => {
|
const data = sortedByStartTime.map((build) => {
|
||||||
return {
|
return {
|
||||||
x: build.job_name,
|
x: build.uuid,
|
||||||
y0: build.start_time ? (moment_tz.utc(build.start_time).tz(timezone) - origin) / 1000 : 0,
|
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,
|
y: build.end_time ? (moment_tz.utc(build.end_time).tz(timezone) - origin) / 1000 : 0,
|
||||||
result: build.result,
|
result: build.result,
|
||||||
started: moment_tz.utc(build.start_time).tz(timezone).format('YYYY-MM-DD HH:mm:ss'),
|
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'),
|
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}
|
legendData={legendData}
|
||||||
legendComponent={<ChartLegend data={chartLegend} itemsPerRow={4} style={{labels: {fill: horizontalLegendTextColor}}} />}
|
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
|
<ChartAxis
|
||||||
dependentAxis
|
dependentAxis
|
||||||
showGrid
|
showGrid
|
||||||
|
@ -114,7 +120,7 @@ function BuildsetGanttChart(props) {
|
||||||
style={ buildsBarStyle }
|
style={ buildsBarStyle }
|
||||||
labelComponent={
|
labelComponent={
|
||||||
<ChartTooltip constrainToVisibleArea/>}
|
<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>
|
</Chart>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue