Simplify bug column in intermittents table a bit (#3352)

* Bug ID -> Bug
* Left align column
* Make the bug number itself a link to the bug, instead of an additional link
* Use CSS instead of javascript to show/hide details link

ui/css/intermittent-failures.css

@@ -41,6 +41,24 @@ h1, .subheader {
   color: lightgray;
 }
 
+.bug-column-header {
+    text-align: left;
+    margin-left: 10px;
+}
+
+.bug-column {
+    text-align: left;
+    margin-left: 5px;
+}
+
+.bug-column .bug-details {
+    display: none;
+}
+
+.bug-column:hover .bug-details {
+    display: initial;
+}
+
 /* overriding bootstrap default input style */
 input {
   padding: .4em 1em;

ui/intermittent-failures/BugColumn.jsx

@@ -9,17 +9,9 @@ import { getBugUrl } from '../helpers/urlHelper';
 class BugColumn extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      displayBugDetails: false,
-    };
-    this.displayBugText = this.displayBugText.bind(this);
     this.updateStateData = this.updateStateData.bind(this);
   }
 
-  displayBugText() {
-    this.setState({ displayBugDetails: !this.state.displayBugDetails });
-  }
-
   updateStateData() {
     // bugdetailsview inherits data from the main view
     const { data, updateDates, updateTree, updateBugDetails, from, to, tree } = this.props;
@@ -33,12 +25,13 @@ class BugColumn extends React.Component {
     const { tree, from, to } = this.props;
     const { id } = this.props.data;
     return (
-      <div onMouseEnter={this.displayBugText} onMouseLeave={this.displayBugText}>
-        <span className="text-primary">{id}</span><span className={`ml-1 small-text ${this.state.displayBugDetails ? '' : 'hidden'}`}>
+      <div>
+        <a className="ml-1" target="_blank" href={getBugUrl(id)}>{id}</a>
+        &nbsp;
+        <span className="ml-1 small-text bug-details">
           <Link onClick={this.updateStateData} to={{ pathname: '/bugdetails', search: `?startday=${from}&endday=${to}&tree=${tree}&bug=${id}` }}>
             details
           </Link>
-          <a className="ml-1" target="_blank" href={getBugUrl(id)}>bugzilla</a>
         </span>
       </div>
     );

ui/intermittent-failures/MainView.jsx

@@ -71,8 +71,11 @@ class MainView extends React.Component {
     const { bugs, tableFailureMessage, graphFailureMessage, from, to, tree, bugzillaData, graphs } = this.props;
     const columns = [
       {
-        Header: 'Bug ID',
+        Header: 'Bug',
         accessor: 'id',
+        headerClassName: 'bug-column-header',
+        className: 'bug-column',
+        maxWidth: 150,
         Cell: props => <BugColumn data={props.original} />,
       },
       {