OSB-31: replaced popover component with tooltip

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js

 import React, { Component } from 'react';
-import { Table, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
+import { Table, Popover, PopoverHeader, PopoverBody, Tooltip } from 'reactstrap';
 import { unique_id } from '../utils/utils.js'
 import AutoLoadWrapper from '../utils/autoLoader.js'
 import * as moment from 'moment';
@@ -10,40 +10,11 @@ import './LatestObservations.css'
 class SORow extends Component {
     constructor(props){
         super(props);
-        this.state = {mouseOverRow:false, mouseOverPopover:false, popoverOpen: false};
+        this.state = {popoverOpen: false};
         this.id = unique_id();
         this.togglePopover = this.togglePopover.bind(this);
     }
 
-    onMouseOverPopover(e){
-        this.setState({mouseOverPopover: true});
-
-    }
-
-    onMouseOutPopover(e){
-        setTimeout(
-            function () {
-                if(this.state.mouseOverRow === false && this.state.mouseOverPopover === false){
-                    this.setState({popoverOpen: false})
-                }
-
-                this.setState({mouseOverPopover: false});
-            }.bind(this), 100)
-    }
-
-    onMouseOverRow(){
-        this.setState({mouseOverRow: true, popoverOpen: true})
-    }
-
-    onMouseOutRow(){
-        this.setState({mouseOverRow: false})
-        setTimeout(
-            function () {
-                if(this.state.mouseOverPopover === false){
-                    this.setState({popoverOpen: false})
-                }
-            }.bind(this), 100)
-    }
 
     renderObservationID() {
         return this.props.data.observation_id;
@@ -67,9 +38,7 @@ class SORow extends Component {
     }
 
     togglePopover(){
-        if(this.state.mouseOverPopup === false){
-            this.setState({popoverOpen: !this.state.popoverOpen});
-        }
+        this.setState({popoverOpen: !this.state.popoverOpen});
     }
     render() {
         const data = this.props.data;
@@ -82,29 +51,31 @@ class SORow extends Component {
                 <td>{station.n_errors}</td>
             </tr>);
         return (
-            <tr id={this.id} onMouseOver={()=> this.onMouseOverRow()} onMouseLeave={()=>this.onMouseOutRow()}
-                className="hoverable">
+            <tr id={this.id}  className="hoverable">
                 <th scope="row">{ this.renderObservationID() }</th>
                 <td>{ moment(start_datetime).format('lll') }</td>
                 <td>{ station_involved_list.length }</td>
                 <td>{ this.renderStationsWithProblems(station_involved_list) }</td>
                 <td>{ total_component_errors }</td>
 
-                <Popover placement="auto-start" isOpen={this.state.popoverOpen} target={ this.id }>
-                  <div onMouseOver={(e)=> this.onMouseOverPopover(e)} onMouseOut={(e)=>this.onMouseOutPopover(e)}>
-                  <PopoverHeader>{data.observation_id}</PopoverHeader>
-                  <PopoverBody>
+                <Tooltip placement="auto" isOpen={this.state.popoverOpen}
+                    target={ this.id }
+                    toggle={this.togglePopover}
+                    style={{backgroundColor: "white", color:"black", opacity: "1"}}
+                    autohide={false}>
+                  <div className='popover-header'>{data.observation_id}</div>
+                  <div>
 
                     <strong>Start:</strong> { start_datetime}<br/>
                     <strong>End:</strong> { end_datetime }<br/>
                     <strong>Mode:</strong> { mode.join(',') }<br/>
                     <Table size="sm" className="so-table table-wrapper">
-                    <thead><tr><th>Station name</th><th>errors</th></tr></thead>
-                    <tbody>{stations_and_errors}</tbody>
+                        <thead><tr><th>Station name</th><th>errors</th></tr></thead>
+                        <tbody>{stations_and_errors}</tbody>
                     </Table>
-                  </PopoverBody>
                   </div>
-                </Popover>
+
+              </Tooltip>
             </tr>
         );
     }

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js

@@ -119,7 +119,7 @@ class GenericStatus extends Component {
         const jsx = (
             <Tooltip isOpen={this.state.isPopOverOpen}
                      target={this.id} style={{backgroundColor: "white", color: "black"}}
-                     autohide='false'
+                     autohide={false}
                      placement='auto' toggle={this.togglePopOver}>
                 <h5>Errors details</h5>
                 <Table size='sm'>
@@ -410,7 +410,7 @@ class StationTestViewC extends Component {
         const firstComponent = Object.keys(this.props.data)[0]
         if(this.state !== undefined && this.state.activeTab === undefined && firstComponent !== undefined){
             this.setState({
-                activeTab: Object.keys(this.props.data)[0]
+                activeTab: firstComponent
             })
         }
     }