Browse Source

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
changes/34/723534/14
Sorin Sbarnea 2 months ago
parent
commit
fe03022787
2 changed files with 53 additions and 5 deletions
  1. +24
    -5
      web/src/containers/build/BuildOutput.jsx
  2. +29
    -0
      web/src/index.css

+ 24
- 5
web/src/containers/build/BuildOutput.jsx View File

@@ -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>


+ 29
- 0
web/src/index.css View File

@@ -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";
}

Loading…
Cancel
Save