JS: add line numbers to log file

Add line numbers to each line of the log file and make these the
hyperlinks/anchors.  This frees up the line itself to be plain
text (if the line text is a hyperlink, it's difficult to select
it for copy/paste).

Change-Id: I1c08782bf743c93bdb77f23327035006f9a43675

web/src/containers/logfile/LogFile.jsx

@@ -45,12 +45,25 @@ class LogFile extends React.Component {
           </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>)
-          ))}
+          <table>
+            <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>
+                   </td>
+                   <td>
+                     <span className={'zuul-log-sev-'+(line.severity||0)}>
+                       {line.text+'\n'}
+                     </span>
+                   </td>
+                 </tr>
+                )))}
+            </tbody>
+          </table>
         </pre>
       </React.Fragment>
     )

web/src/index.css

@@ -245,3 +245,13 @@ pre.zuul-log-output
     background-color: inherit;
     border: none;
 }
+.zuul-log-output .line-number
+{
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: right;
+  padding-right: 1em;
+  color: #555;
+}

web/src/pages/LogFile.jsx

@@ -49,7 +49,8 @@ class LogFilePage extends Refreshable {
       if (element.length) {
         const header = document.getElementsByClassName('navbar')
         if (header.length) {
-          window.scroll(0, element[0].offsetTop - header[0].offsetHeight)
+          element[0].scrollIntoView()
+          window.scroll(0, window.scrollY - header[0].offsetHeight)
         }
       }
     }