From f695820f2e30377d8489f547bee1251bccfb0367 Mon Sep 17 00:00:00 2001
From: "James E. Blair" <jim@acmegating.com>
Date: Tue, 19 Mar 2024 10:51:58 -0700
Subject: [PATCH] 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
---
 web/src/Misc.jsx                         | 10 +++++++++-
 web/src/containers/charts/GanttChart.jsx | 12 +++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/web/src/Misc.jsx b/web/src/Misc.jsx
index fafd318e3d..1da9d109ca 100644
--- a/web/src/Misc.jsx
+++ b/web/src/Misc.jsx
@@ -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 }
diff --git a/web/src/containers/charts/GanttChart.jsx b/web/src/containers/charts/GanttChart.jsx
index 5c92f7b29d..45819f84de 100644
--- a/web/src/containers/charts/GanttChart.jsx
+++ b/web/src/containers/charts/GanttChart.jsx
@@ -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>