zuul
/
zuul
Code Issues Proposed changes

Merge "Conditionally render ANSI console text with a black background"

This commit is contained in:
Zuul 2023-05-23 19:50:25 +00:00 committed by Gerrit Code Review
parent c8f88a8154 68d705bad8
commit 3489d22290
2 changed files with 43 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/containers/build/BuildOutput.jsx
View File

@ -40,6 +40,9 @@ import {
TimesCircleIcon,
} from '@patternfly/react-icons'
const ANSI_REGEX = new RegExp('\x33[[0-9;]+m')
class BuildOutputLabel extends React.Component {
static propTypes = {
ok: PropTypes.number,
@ -109,11 +112,32 @@ class BuildOutput extends React.Component {
)
}
renderFailedTask (host, task) {
getLines(lines) {
const max_lines = 42
if (lines && lines.length > 0) {
return [
lines.slice(0, -max_lines).join('\n'),
lines.slice(-max_lines).join('\n')
]
}
return ['', '']
}
renderFailedTask (host, task) {
let zuulOutputClass = 'zuul-build-output'
if (this.props.preferences.darkMode) {
zuulOutputClass = 'zuul-build-output-dark'
zuulOutputClass = 'zuul-build-output-dark'
}
const [stdout_early_lines, stdout_late_lines] = this.getLines(task.stdout_lines)
const [stderr_early_lines, stderr_late_lines] = this.getLines(task.stderr_lines)
// If there is an ANSI color escape string, set a white-on-black
// color scheme so the output looks more like what we would expect in a console.
let term_style = {}
if (ANSI_REGEX.test(stdout_early_lines) ||
ANSI_REGEX.test(stdout_late_lines) ||
ANSI_REGEX.test(stderr_early_lines) ||
ANSI_REGEX.test(stderr_late_lines)) {
term_style = {backgroundColor: 'black', color: 'white'}
}
return (
<Card key={host + task.zuul_log_id} className="zuul-task-summary-failed" style={this.props.preferences.darkMode ? {background: 'var(--pf-global--BackgroundColor--300)'} : {}}>
@ -135,30 +159,30 @@ class BuildOutput extends React.Component {
{task.exception && (
<pre key="exc" style={{ color: 'red' }} title="exc" className={zuulOutputClass}>{task.exception}</pre>
)}
{task.stdout_lines && task.stdout_lines.length > 0 && (
{stdout_late_lines.length > 0 && (
<Fragment>
{task.stdout_lines.length > max_lines && (
{stdout_early_lines.length > 0 && (
<details className={`${'foldable'} ${'stdout'}`}><summary></summary>
<pre key="stdout" title="stdout" className={zuulOutputClass}>
<ReAnsi log={task.stdout_lines.slice(0, -max_lines).join('\n')} />
<pre key="stdout" title="stdout" className={zuulOutputClass} style={term_style}>
<ReAnsi log={stdout_early_lines} />
</pre>
</details>)}
<pre key="stdout" title="stdout" className={zuulOutputClass}>
<ReAnsi log={task.stdout_lines.slice(-max_lines).join('\n')} />
<pre key="stdout" title="stdout" className={zuulOutputClass} style={term_style}>
<ReAnsi log={stdout_late_lines} />
</pre>
</Fragment>
)}
{task.stderr_lines && task.stderr_lines.length > 0 && (
{stderr_late_lines.length > 0 && (
<Fragment>
{task.stderr_lines.length > max_lines && (
{stderr_early_lines.length > 0 && (
<details className={`${'foldable'} ${'stderr'}`}><summary></summary>
<pre key="stderr" title="stderr" className={zuulOutputClass}>
<ReAnsi log={task.stderr_lines.slice(0, -max_lines).join('\n')} />
<pre key="stderr" title="stderr" className={zuulOutputClass} style={term_style}>
<ReAnsi log={stderr_early_lines} />
</pre>
</details>
)}
<pre key="stderr" title="stderr" className={zuulOutputClass}>
<ReAnsi log={task.stderr_lines.slice(-max_lines).join('\n')} />
<pre key="stderr" title="stderr" className={zuulOutputClass} style={term_style}>
<ReAnsi log={stderr_late_lines} />
</pre>
</Fragment>
)}

6
web/src/containers/build/Console.jsx
View File

@ -55,6 +55,7 @@ import {
} from '../../actions/build'
const INTERESTING_KEYS = ['msg', 'cmd', 'stdout', 'stderr']
const ANSI_REGEX = new RegExp('\x33[[0-9;]+m')
class TaskOutput extends React.Component {
@ -119,8 +120,11 @@ class TaskOutput extends React.Component {
</pre>
)
} else if (typeof(value) === 'string') {
// If there is an ANSI color escape string, set a white-on-black
// color scheme so the output looks more like what we would expect in a console.
const style = ANSI_REGEX.test(value) ? {backgroundColor: 'black', color: 'white'} : {}
ret = (
<pre>
<pre style={style}>
<ReAnsi log={value} />
</pre>
)