Merge "Use internal links in job graph display"

1 files changed, 15 insertions, 5 deletions

diff --git a/web/src/containers/jobgraph/JobGraphDisplay.jsx b/web/src/containers/jobgraph/JobGraphDisplay.jsx
index 8d55c8f54..9bd67e7d2 100644
--- a/web/src/containers/jobgraph/JobGraphDisplay.jsx
+++ b/web/src/containers/jobgraph/JobGraphDisplay.jsx
@@ -16,12 +16,11 @@ import React, { useState, useEffect} from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import * as d3 from 'd3'
+import { useHistory } from 'react-router-dom'
 
 import { makeJobGraphKey, fetchJobGraphIfNeeded } from '../../actions/jobgraph'
 import { graphviz } from 'd3-graphviz'
 
-import { getHomepageUrl } from '../../api'
-
 function makeDot(tenant, pipeline, project, branch, jobGraph) {
   let ret = 'digraph job_graph {\n'
   ret += '  rankdir=LR;\n'
@@ -32,8 +31,11 @@ function makeDot(tenant, pipeline, project, branch, jobGraph) {
     searchParams.append('project', project.name)
     searchParams.append('job', job.name)
     searchParams.append('branch', branch)
-    const url = (getHomepageUrl() + tenant.linkPrefix +
-                 'freeze-job?' + searchParams.toString())
+    // This will appear in the DOM as an "a href=" but we will
+    // manipulate the DOM later to add an onClick callback to make
+    // this an internal link.
+    const url = (tenant.linkPrefix +
+                 '/freeze-job?' + searchParams.toString())
     // Escape ampersands to get it through graphviz and d3; these will
     // appear unescaped in the DOM.
     const escaped_url = url.replace(/&/g, '&')
@@ -53,6 +55,8 @@ function makeDot(tenant, pipeline, project, branch, jobGraph) {
 }
 
 function GraphViz(props) {
+  const history = useHistory()
+
   useEffect(() => {
     const gv = graphviz('#graphviz')
           .options({
@@ -72,7 +76,13 @@ function GraphViz(props) {
       gv._translation.y = val
       gv._originalTransform.y = val
     }
-  }, [props.dot])
+
+    // Mutate the links to be internal links
+    d3.select('.zuul-job-graph').selectAll('.node a').on('click', event => {
+      d3.event.preventDefault()
+      history.push(event.attributes['xlink:href'])
+    })
+  }, [props.dot, history])
 
   return (
     <div className="zuul-job-graph" id="graphviz"/>