web: logfile do not use anchor for line selection

This change removes lines number link and implements a manual click handler
to update the window hash so that line doesn't move under the navbar.

Change-Id: Ia51d5f7704cacfb909ffae02305b0aff121f741b

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)}>

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

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