zuul
/
zuul
Code Issues Proposed changes

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
This commit is contained in:
Sorin Sbarnea 2020-04-27 14:22:54 +01:00
parent b79a83f323
commit fe03022787
2 changed files with 53 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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