diff options
| -rw-r--r-- | web/src/containers/logfile/LogFile.jsx | 15 | ||||
| -rw-r--r-- | web/src/index.css | 4 | ||||
| -rw-r--r-- | web/src/pages/LogFile.jsx | 4 |
3 files changed, 16 insertions, 7 deletions
diff --git a/web/src/containers/logfile/LogFile.jsx b/web/src/containers/logfile/LogFile.jsx index a7b433d20..4f026eee5 100644 --- a/web/src/containers/logfile/LogFile.jsx +++ b/web/src/containers/logfile/LogFile.jsx @@ -18,6 +18,13 @@ import { connect } from 'react-redux' import { Panel } from 'react-bootstrap' import { Link } from 'react-router-dom' + +function updateSelection (event) { + const lineClicked = Number(event.currentTarget.innerText) + window.location.hash = '#' + lineClicked +} + + class LogFile extends React.Component { static propTypes = { build: PropTypes.object, @@ -49,11 +56,9 @@ class LogFile extends React.Component { <tbody> {data.map((line) => ( ((!severity || (line.severity >= severity)) && - <tr key={line.index}> - <td className="line-number"> - <a name={line.index} href={'#'+(line.index)}> - {line.index} - </a> + <tr key={line.index} className={'ln-' + line.index}> + <td className="line-number" onClick={updateSelection}> + {line.index} </td> <td> <span className={'zuul-log-sev-'+(line.severity||0)}> diff --git a/web/src/index.css b/web/src/index.css index 5755e886e..b638a4600 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -247,12 +247,16 @@ pre.zuul-log-output } .zuul-log-output .line-number { + display: inline; + -webkit-touch-callout: none; + -khtml-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: right; padding-right: 1em; + cursor: pointer; color: #555; } diff --git a/web/src/pages/LogFile.jsx b/web/src/pages/LogFile.jsx index 833dc731d..7455bc912 100644 --- a/web/src/pages/LogFile.jsx +++ b/web/src/pages/LogFile.jsx @@ -48,7 +48,7 @@ class LogFilePage extends Refreshable { highlightDidUpdate = (lines) => { const getLine = (nr) => { - return document.getElementsByName(nr)[0].parentNode.parentNode + return document.getElementsByClassName('ln-' + nr)[0] } const getEnd = (lines) => { if (lines.length > 1 && lines[1] > lines[0]) { @@ -87,7 +87,7 @@ class LogFilePage extends Refreshable { componentDidUpdate () { const lines = this.props.location.hash.substring(1).split('-').map(Number) if (lines.length > 0) { - const element = document.getElementsByName(lines[0]) + const element = document.getElementsByClassName('ln-' + lines[0]) // Lines are loaded if (element.length > 0) { // Move line into view |