Make task errors expandable

Add a 'more/less' button for displaying the unabridged stdout/stderr
in case is longer than the default max_lines.

Move styling from inline to the stylesheet and reuses existing
logging styles.

Change-Id: Ic7f25d3bd1495da143147e1e7d2e1473367d775d

2 files changed, 53 insertions, 5 deletions

diff --git a/web/src/containers/build/BuildOutput.jsx b/web/src/containers/build/BuildOutput.jsx
index 8e25c0cfd..cdd748931 100644
--- a/web/src/containers/build/BuildOutput.jsx
+++ b/web/src/containers/build/BuildOutput.jsx
@@ -13,6 +13,7 @@
 // under the License.
 
 import * as React from 'react'
+import { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Panel } from 'react-bootstrap'
 import {
@@ -54,6 +55,7 @@ class BuildOutput extends React.Component {
   }
 
   renderFailedTask (host, task) {
+    const max_lines = 42
     return (
       <Panel key={host + task.zuul_log_id}>
         <Panel.Heading>{host}: {task.name}</Panel.Heading>
@@ -71,14 +73,31 @@ class BuildOutput extends React.Component {
             <pre key="exc" style={{ color: 'red' }}>{task.exception}</pre>
           )}
           {task.stdout_lines && task.stdout_lines.length > 0 && (
-            <pre key="stdout" style={{ whiteSpace: 'pre-wrap' }} title="stdout">
-              {task.stdout_lines.slice(-42).join('\n')}
-            </pre>
+            <Fragment>
+              {task.stdout_lines.length > max_lines && (
+                <details className={`${'foldable'} ${'stdout'}`}><summary></summary>
+                  <pre key="stdout" title="stdout">
+                    {task.stdout_lines.slice(0, -max_lines).join('\n')}
+                  </pre>
+                </details>)}
+            <pre key="stdout" title="stdout">
+              {task.stdout_lines.slice(-max_lines).join('\n')}
+              </pre>
+              </Fragment>
           )}
           {task.stderr_lines && task.stderr_lines.length > 0 && (
-            <pre key="stderr" style={{whiteSpace: 'pre-wrap', color: 'red'}} title="stderr">
-              {task.stderr_lines.slice(-42).join('\n')}
+            <Fragment>
+              {task.stderr_lines.length > max_lines && (
+                  <details className={`${'foldable'} ${'stderr'}`}><summary></summary>
+                    <pre key="stderr" title="stderr">
+                      {task.stderr_lines.slice(0, -max_lines).join('\n')}
+                    </pre>
+                  </details>
+                )}
+            <pre key="stderr" title="stderr">
+              {task.stderr_lines.slice(-max_lines).join('\n')}
             </pre>
+            </Fragment>
           )}
         </Panel.Body>
       </Panel>
diff --git a/web/src/index.css b/web/src/index.css
index 476a55905..2d8849b8b 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -272,3 +272,32 @@ pre.zuul-log-output
 .highlight {
   background: rgb(255, 255, 204);
 }
+
+details.foldable pre {
+    white-space: pre-wrap;
+}
+
+details.stderr pre {
+    color: #9b0000;
+}
+
+/* Used to make the "more/less" fold,  look like a normal hyperlink */
+details.foldable summary
+{
+    color: #0088ce;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+details.foldable summary:hover
+{
+    text-decoration: underline;
+}
+
+details.foldable summary::before {
+    content: "more";
+}
+
+details.foldable[open] summary::before {
+    content: "less";
+}