zuul/zuul
Code Issues Proposed changes

JS: Break log viewer out of the panel

Browse Source 
Confining the log view to a patternfly panel means that the inner
panel needs to be horizontally scrolled, but to get to the horizontal
scrollbar, you have to go to the bottom of the log.  Instead, render
the logs outside of any panels, with no overflow handling and let
the browser do what it does natually.

Change-Id: I8258ecf6feb036ee15aae3e314363376d71292de
This commit is contained in:
James E. Blair
2019-08-15 14:20:56 -07:00
parent 4178bb8909
commit a4919d7c7a
2 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/containers/logfile/LogFile.jsx
View File

@@ -30,27 +30,29 @@ class LogFile extends React.Component {
render () {
const { build, data, severity } = this.props
return (
<Panel>
<Panel.Heading>Build result {build.uuid}</Panel.Heading>
<Panel.Body>
<Link to="?">All</Link>&nbsp;
<Link to="?severity=1">Debug</Link>&nbsp;
<Link to="?severity=2">Info</Link>&nbsp;
<Link to="?severity=3">Warning</Link>&nbsp;
<Link to="?severity=4">Error</Link>&nbsp;
<Link to="?severity=5">Trace</Link>&nbsp;
<Link to="?severity=6">Audit</Link>&nbsp;
<Link to="?severity=7">Critical</Link>&nbsp;
<pre className="zuul-log-output">
{data.map((line) => (
((!severity || (line.severity >= severity)) &&
<span key={line.index} className={'zuul-log-sev-'+(line.severity||0)}>
<a name={line.index} href={'#'+(line.index)}>{line.text+'\n'}</a>
</span>)
))}
</pre>
</Panel.Body>
</Panel>
<React.Fragment>
<Panel>
<Panel.Heading>Build result {build.uuid}</Panel.Heading>
<Panel.Body>
<Link to="?">All</Link>&nbsp;
<Link to="?severity=1">Debug</Link>&nbsp;
<Link to="?severity=2">Info</Link>&nbsp;
<Link to="?severity=3">Warning</Link>&nbsp;
<Link to="?severity=4">Error</Link>&nbsp;
<Link to="?severity=5">Trace</Link>&nbsp;
<Link to="?severity=6">Audit</Link>&nbsp;
<Link to="?severity=7">Critical</Link>&nbsp;
</Panel.Body>
</Panel>
<pre className="zuul-log-output">
{data.map((line) => (
((!severity || (line.severity >= severity)) &&
<span key={line.index} className={'zuul-log-sev-'+(line.severity||0)}>
<a name={line.index} href={'#'+(line.index)}>{line.text+'\n'}</a>
</span>)
))}
</pre>
</React.Fragment>
)
}
}

6
web/src/index.css
View File

@@ -239,3 +239,9 @@ pre.version {
{
padding-left: 4em;
}
pre.zuul-log-output
{
overflow: inherit;
background-color: inherit;
border: none;
}