web ui: fix buildset display when no builds

This corrects a problem in the error handler when some request
variables are undefined.

This also handles the case of a buildset with no builds; currently
the REST API omits the builds value in that case, so this updates
usages to handle it.

Change-Id: Ifa09990d08257244f17e77e5c8141bfd8c1cc4d7

3 files changed, 51 insertions, 46 deletions

diff --git a/web/src/actions/build.js b/web/src/actions/build.js
index 6898f84d8..41a5b1b3b 100644
--- a/web/src/actions/build.js
+++ b/web/src/actions/build.js
@@ -332,9 +332,11 @@ const fetchBuildset = (tenant, buildset) => dispatch => {
   dispatch(requestBuildset())
   return API.fetchBuildset(tenant.apiPrefix, buildset)
     .then(response => {
-      response.data.builds.forEach(build => {
-        dispatch(receiveBuild(build.uuid, build))
-      })
+      if (response.data.builds) {
+        response.data.builds.forEach(build => {
+          dispatch(receiveBuild(build.uuid, build))
+        })
+      }
       dispatch(receiveBuildset(buildset, response.data))
     })
     .catch(error => dispatch(failedBuildset(error)))
diff --git a/web/src/actions/errors.js b/web/src/actions/errors.js
index 01a70b77b..3464dcb9c 100644
--- a/web/src/actions/errors.js
+++ b/web/src/actions/errors.js
@@ -26,7 +26,7 @@ export const addError = error => ({
 
 export const addApiError = error => {
   const d = {
-    url: error.request.responseURL || error.url
+    url: (error && error.request && error.request.responseURL) || error.url
   }
   if (error.response) {
     d.text = error.response.statusText
diff --git a/web/src/containers/build/Buildset.jsx b/web/src/containers/build/Buildset.jsx
index 89f246c83..42d4f1e48 100644
--- a/web/src/containers/build/Buildset.jsx
+++ b/web/src/containers/build/Buildset.jsx
@@ -56,27 +56,29 @@ class Buildset extends React.Component {
       }
     })
 
-    buildset.builds.forEach(build => {
-      const row = []
-      buildColumns.forEach(column => {
-        if (column === 'job') {
-          row.push(build.job_name)
-        } else if (column === 'duration') {
-          row.push(moment.duration(build.duration, 'seconds')
-                   .format('h [hr] m [min] s [sec]'))
-        } else if (column === 'voting') {
-          row.push(build.voting ? 'true' : 'false')
-        } else if (column === 'result') {
-          row.push(<Link
-                     to={this.props.tenant.linkPrefix + '/build/' + build.uuid}>
-                     {build.result}
-                   </Link>)
-        } else {
-          row.push(build[column])
-        }
+    if (buildset.builds) {
+      buildset.builds.forEach(build => {
+        const row = []
+        buildColumns.forEach(column => {
+          if (column === 'job') {
+            row.push(build.job_name)
+          } else if (column === 'duration') {
+            row.push(moment.duration(build.duration, 'seconds')
+                     .format('h [hr] m [min] s [sec]'))
+          } else if (column === 'voting') {
+            row.push(build.voting ? 'true' : 'false')
+          } else if (column === 'result') {
+            row.push(<Link
+                       to={this.props.tenant.linkPrefix + '/build/' + build.uuid}>
+                       {build.result}
+                     </Link>)
+          } else {
+            row.push(build[column])
+          }
+        })
+        buildRows.push(row)
       })
-      buildRows.push(row)
-    })
+    }
 
     return (
       <React.Fragment>
@@ -95,30 +97,31 @@ class Buildset extends React.Component {
             </table>
           </Panel.Body>
         </Panel>
-        <Panel>
-          <Panel.Heading>Builds</Panel.Heading>
-          <Panel.Body>
-            <table className="table table-striped table-bordered">
-              <thead>
-                <tr>
-                  {buildColumns.map(item => (
-                    <td key={item}>{item}</td>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {buildset.builds.map((item, idx) => (
-                  <tr key={idx} className={item.result === 'SUCCESS' ? 'success': 'warning'}>
-                    {buildRows[idx].map((item, idx) => (
-                      <td key={idx}>{item}</td>
+        {buildset.builds &&
+          <Panel>
+            <Panel.Heading>Builds</Panel.Heading>
+            <Panel.Body>
+              <table className="table table-striped table-bordered">
+                <thead>
+                  <tr>
+                    {buildColumns.map(item => (
+                      <td key={item}>{item}</td>
                     ))}
                   </tr>
-                ))}
-              </tbody>
-            </table>
-          </Panel.Body>
-        </Panel>
-
+                </thead>
+                <tbody>
+                  {buildset.builds.map((item, idx) => (
+                    <tr key={idx} className={item.result === 'SUCCESS' ? 'success': 'warning'}>
+                      {buildRows[idx].map((item, idx) => (
+                        <td key={idx}>{item}</td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </Panel.Body>
+          </Panel>
+        }
       </React.Fragment>
     )
   }