Adjust results headings in build console page

Don't display results headings for loops if the loop iteration doesn't
have anything to show.  If none of the iterations have anything to
show, don't show the results attribute at all.  Reduce the headings
several sizes; the loop iteration heading is still larger than the
output key heading, but they are both smaller than before and closer
in size to other text on the page.

Change-Id: I587674cddb79ec247826fff645590f4b03b5c1f8

1 files changed, 38 insertions, 19 deletions

diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx
index b24ea781d..e5067bd1e 100644
--- a/web/src/containers/build/Console.jsx
+++ b/web/src/containers/build/Console.jsx
@@ -74,35 +74,54 @@ class TaskOutput extends React.Component {
     return ''
   }
 
+  shouldIncludeKey(key, value, ignore_underscore) {
+    if (ignore_underscore && key[0] === '_') {
+      return false
+    }
+    if (this.props.include) {
+      if (!this.props.include.includes(key)) {
+        return false
+      }
+      if (value === '') {
+        return false
+      }
+    }
+    return true
+  }
+
   renderResults(value) {
+    const interesting_results = []
+    value.forEach((result, idx) => {
+      const keys = Object.entries(result).filter(([key, value]) => this.shouldIncludeKey(key, value, true))
+      if (keys.length) {
+        interesting_results.push(idx)
+      }
+    })
+
     return (
       <div key='results'>
-        <h3 key='results-header'>results</h3>
-        {value.map((result, idx) => (
-          <div className='zuul-console-task-result' key={idx}>
-            <h2 key={idx}>{idx}: {this.findLoopLabel(result)}</h2>
-            {Object.entries(result).map(([key, value]) => (
-              this.renderData(key, value, true)
-            ))}
-          </div>
-        ))}
+        {interesting_results.length>0 &&
+         <React.Fragment>
+           <h5 key='results-header'>results</h5>
+           {interesting_results.map((idx) => (
+             <div className='zuul-console-task-result' key={idx}>
+               <h4 key={idx}>{idx}: {this.findLoopLabel(value[idx])}</h4>
+               {Object.entries(value[idx]).map(([key, value]) => (
+                 this.renderData(key, value, true)
+               ))}
+             </div>
+           ))}
+         </React.Fragment>
+        }
       </div>
     )
   }
 
   renderData(key, value, ignore_underscore) {
     let ret
-    if (ignore_underscore && key[0] === '_') {
+    if (!this.shouldIncludeKey(key, value, ignore_underscore)) {
       return (<React.Fragment key={key}/>)
     }
-    if (this.props.include) {
-      if (!this.props.include.includes(key)) {
-        return (<React.Fragment key={key}/>)
-      }
-      if (value === '') {
-        return (<React.Fragment key={key}/>)
-      }
-    }
     if (value === null) {
       ret = (
         <pre>
@@ -136,7 +155,7 @@ class TaskOutput extends React.Component {
 
     return (
       <div key={key}>
-        {ret && <h3>{key}</h3>}
+        {ret && <h5>{key}</h5>}
         {ret && ret}
       </div>
     )