Render links for ref_url if build.change isnt' set

The web ui would only properly render ref_url links if build.change was
set. Set up conditions to check if build.change is set and fallback to
the build.newrev value if not. This way we render a clickable link using
the commit sha1.

Change-Id: I5eb9cb1c7cc0f64d6d7504347c01a6450ffb1507

web/src/Misc.jsx

@@ -43,4 +43,48 @@ ExternalLink.propTypes = {
     children: PropTypes.node,
 }
 
-export { ExternalLink }
+function buildExternalLink(buildish) {
+  /* TODO (felix): What should we show for periodic builds
+      here? They don't provide a change, but the ref_url is
+      also not usable */
+  if (buildish.ref_url && buildish.change) {
+    return (
+      <ExternalLink target={buildish.ref_url}>
+        <strong>Change </strong>
+        {buildish.change},{buildish.patchset}
+      </ExternalLink>
+    )
+  } else if (buildish.ref_url && buildish.newrev) {
+    return (
+      <ExternalLink target={buildish.ref_url}>
+        <strong>Revision </strong>
+        {buildish.newrev.slice(0,7)}
+      </ExternalLink>
+    )
+  }
+
+  return null
+}
+
+function buildExternalTableLink(buildish) {
+  /* TODO (felix): What should we show for periodic builds
+      here? They don't provide a change, but the ref_url is
+      also not usable */
+  if (buildish.ref_url && buildish.change) {
+    return (
+      <ExternalLink target={buildish.ref_url}>
+        {buildish.change},{buildish.patchset}
+      </ExternalLink>
+    )
+  } else if (buildish.ref_url && buildish.newrev) {
+    return (
+      <ExternalLink target={buildish.ref_url}>
+        {buildish.newrev.slice(0,7)}
+      </ExternalLink>
+    )
+  }
+
+  return null
+}
+
+export { ExternalLink, buildExternalLink, buildExternalTableLink }

web/src/containers/build/Build.jsx

@@ -40,10 +40,12 @@ import * as moment from 'moment'
 import 'moment-duration-format'
 
 import { BuildResultBadge, BuildResultWithIcon, IconProperty } from './Misc'
-import { ExternalLink } from '../../Misc'
+import { buildExternalLink, ExternalLink } from '../../Misc'
 
 function Build(props) {
   const { build, tenant, timezone, fetchable } = props
+  const build_link = buildExternalLink(build)
+
   return (
     <>
       <Title
@@ -72,19 +74,11 @@ function Build(props) {
         <Flex flex={{ lg: 'flex_1' }}>
           <FlexItem>
             <List style={{ listStyle: 'none' }}>
-              {/* TODO (felix): What should we show for periodic builds
-                  here? They don't provide a change, but the ref_url is
-                  also not usable */}
-              {build.change && (
+              {build_link && (
                 <IconProperty
                   WrapElement={ListItem}
                   icon={<CodeIcon />}
-                  value={
-                    <ExternalLink target={build.ref_url}>
-                      <strong>Change </strong>
-                      {build.change},{build.patchset}
-                    </ExternalLink>
-                  }
+                  value={build_link}
                 />
               )}
               {/* TODO (felix): Link to project page in Zuul */}

web/src/containers/build/BuildTable.jsx

@@ -45,7 +45,7 @@ import 'moment-duration-format'
 import * as moment from 'moment'
 
 import { BuildResult, BuildResultWithIcon, IconProperty } from './Misc'
-import { ExternalLink } from '../../Misc'
+import { buildExternalTableLink } from '../../Misc'
 
 function BuildTable(props) {
   const { builds, fetching, onClearFilters, tenant, timezone } = props
@@ -98,6 +98,8 @@ function BuildTable(props) {
         className="zuul-stretched-link"
       />
     )
+    const build_link = buildExternalTableLink(build)
+
     return {
       cells: [
         {
@@ -141,11 +143,9 @@ function BuildTable(props) {
           title: (
             <>
               {buildResultLink}
-              {build.change && (
+              {build_link && (
                 <span style={{ zIndex: 1, position: 'relative' }}>
-                  <ExternalLink target={build.ref_url}>
-                    {build.change},{build.patchset}
-                  </ExternalLink>
+                  {build_link}
                 </span>
               )}
             </>

web/src/containers/build/Buildset.jsx

@@ -25,11 +25,12 @@ import {
   StreamIcon,
 } from '@patternfly/react-icons'
 
-import { ExternalLink } from '../../Misc'
+import { buildExternalLink } from '../../Misc'
 import { BuildResultBadge, BuildResultWithIcon, IconProperty } from './Misc'
 
 function Buildset(props) {
   const { buildset, fetchable } = props
+  const buildset_link = buildExternalLink(buildset)
 
   return (
     <>
@@ -53,16 +54,11 @@ function Buildset(props) {
                   show the respective icon here (GithubIcon, GitlabIcon,
                   GitIcon - AFAIK the Gerrit icon is not very popular among
                   icon frameworks like fontawesome */}
-              {buildset.change && (
+              {buildset_link && (
                 <IconProperty
                   WrapElement={ListItem}
                   icon={<CodeIcon />}
-                  value={
-                    <ExternalLink target={buildset.ref_url}>
-                      <strong>Change </strong>
-                      {buildset.change},{buildset.patchset}
-                    </ExternalLink>
-                  }
+                  value={buildset_link}
                 />
               )}
               {/* TODO (felix): Link to project page in Zuul */}

web/src/containers/build/BuildsetTable.jsx

@@ -41,7 +41,7 @@ import {
 } from '@patternfly/react-table'
 
 import { BuildResult, BuildResultWithIcon, IconProperty } from './Misc'
-import { ExternalLink } from '../../Misc'
+import { buildExternalTableLink } from '../../Misc'
 
 function BuildsetTable(props) {
   const { buildsets, fetching, onClearFilters, tenant } = props
@@ -80,6 +80,8 @@ function BuildsetTable(props) {
         className="zuul-stretched-link"
       />
     )
+    const buildset_link = buildExternalTableLink(buildset)
+
     return {
       cells: [
         {
@@ -114,11 +116,9 @@ function BuildsetTable(props) {
           title: (
             <>
               {buildsetResultLink}
-              {buildset.change && (
+              {buildset_link && (
                 <span style={{ zIndex: 1, position: 'relative' }}>
-                  <ExternalLink target={buildset.ref_url}>
-                    {buildset.change},{buildset.patchset}
-                  </ExternalLink>
+                  {buildset_link}
                 </span>
               )}
             </>