From d1f3612955248d93c131988d314b1f331813564a Mon Sep 17 00:00:00 2001
From: Mattia Mancini <mancini@astron.nl>
Date: Wed, 7 Nov 2018 11:01:40 +0000
Subject: [PATCH] OSB-31: replaced popover component with tooltip
---
.../src/components/LatestObservations.js | 59 +++++--------------
.../src/components/StationTestView.js | 4 +-
2 files changed, 17 insertions(+), 46 deletions(-)
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js
index e1f1d62520f..92dc56b7c9e 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js
@@ -1,5 +1,5 @@
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>
);
}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
index 2d3996a4c4d..bbe7286e44b 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
+++ b/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
})
}
}
--
GitLab