From 393e5999e3cc76bd055bb82da2227b0f997cfb25 Mon Sep 17 00:00:00 2001
From: Mattia Mancini <mancini@astron.nl>
Date: Mon, 22 Oct 2018 12:44:59 +0000
Subject: [PATCH] OSB-29: add test type selection and averaging window in
station statistics
---
.../maintenancedb_view/public/index.html | 2 +-
.../src/components/LatestObservations.css | 6 ++
.../src/components/LatestObservations.js | 19 +++--
.../src/components/LatestObservations.scss | 7 ++
.../src/components/StationStatistics.js | 71 +++++++++++++++----
.../src/components/StationTestSummary.js | 2 +-
.../src/pages/LandingPage.js | 19 ++---
.../src/redux/actions/actionTypes.js | 5 +-
.../src/redux/actions/actions.js | 21 +++++-
.../src/redux/reducers/index.js | 4 +-
.../src/redux/reducers/mainFilters.js | 2 +-
.../src/utils/autoLoader.js | 2 +-
12 files changed, 125 insertions(+), 35 deletions(-)
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/public/index.html b/LCU/Maintenance/MDB_WebView/maintenancedb_view/public/index.html
index 220f25585d0..e3bf9b465f6 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/public/index.html
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.css
index d851907ef40..3ec2c0158b7 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.css
@@ -5,3 +5,9 @@
/* Data colors */
.hoverable:hover {
background-color: #bdbdbd; }
+
+.table-wrapper {
+ width: 10em;
+ max-height: 10em;
+ overflow: auto;
+ display: block; }
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 fcaab40a1b2..13d6edba1f4 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js
@@ -28,11 +28,16 @@ class RTSMBadge extends Component {
class SORow extends Component {
constructor(props){
super(props);
- this.state = {popoverOpen:false};
+ this.state = {popoverOpen:false, mouseOverPopup:false};
this.id = unique_id();
this.togglePopover = this.togglePopover.bind(this);
+ this.mouseDown = this.mouseDown.bind(this);
}
+ mouseDown(e){
+ if(e.button === 1)
+ this.setState({mouseOverPopup: !this.state.mouseOverPopup});
+ }
renderObservationID() {
return this.props.data.observation_id;
}
@@ -46,7 +51,9 @@ class SORow extends Component {
}
togglePopover(){
- this.setState({popoverOpen: !this.state.popoverOpen});
+ if(this.state.mouseOverPopup === false){
+ this.setState({popoverOpen: !this.state.popoverOpen});
+ }
}
render() {
@@ -55,20 +62,22 @@ class SORow extends Component {
const stations_and_errors = data.station_involved.map((station) =>
<tr><th scope="row">{station.station_name}</th> <td>{station.n_errors}</td></tr>)
return (
- <tr id={this.id} onMouseOver={this.togglePopover} onMouseOut={this.togglePopover} className="hoverable">
+ <tr id={this.id} onMouseOver={this.togglePopover} onMouseOut={this.togglePopover}
+ onMouseDown={this.mouseDown}
+ className="hoverable">
<th scope="row">{ this.renderObservationID() }</th>
<td>{ moment(start_datetime).format('lll') }</td>
<td>{ this.renderStationsInvolved() }</td>
<td>{ this.renderStationsWithProblems() }</td>
<td>{ total_component_errors }</td>
- <Popover placement="auto" isOpen={this.state.popoverOpen} target={ this.id } toggle={this.togglePopover}>
+ <Popover placement="auto-start" isOpen={this.state.popoverOpen} target={ this.id }>
<PopoverHeader>{data.observation_id}</PopoverHeader>
<PopoverBody>
<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 size="sm" className="so-table table-wrapper">
<thead><th>Station name</th><th>errors</th></thead>
<tbody>{stations_and_errors}</tbody>
</Table>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss
index 49e45e5ae46..d1199fbe15d 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss
@@ -7,3 +7,10 @@
.hoverable:hover {
background-color: $secondary;
}
+
+.table-wrapper {
+ width: 10em;
+ max-height: 10em;
+ overflow: auto;
+ display: block;
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
index 0c7ea0ef249..a17e7475443 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
@@ -2,28 +2,65 @@ import React, { Component } from 'react';
import AutoLoadWrapper from '../utils/autoLoader.js'
import { unique_id } from '../utils/utils.js'
import ReactVegaLite from 'react-vega-lite'
-import { Table, Badge, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
-/**
- * SORow; Class to render the row for a station in the StationOverview.
- */
-class SORow extends Component {
- render() {
+import { Table, Badge, Popover, PopoverHeader, PopoverBody, Form, Input } from 'reactstrap';
+import { connect } from 'react-redux';
+import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from '../redux/actions/actions'
- return (
- <tr className="hoverable">
- <th scope="row">{ "ciao" }</th>
- </tr>
- );
+class ToolBarC extends Component {
+
+ setAveragingWindow(e){
+ this.props.setStationStatisticsAveragingWindow(e.target.value);
+ }
+
+ setTestType(e){
+ this.props.setStationStatisticsTestType(e.target.value);
+ }
+ render(){
+ return (<div className="sts-toolbar">
+ <Form inline>
+ <select className="form-control custom-select custom-select-sm"
+ id="selected-group" value={this.props.test_type}
+ onChange={(e)=>this.setTestType(e)}
+ style={{width: 'auto'}}>
+ <option value="B">Both test types</option>
+ <option value="R">RTSM</option>
+ <option value="S">StationTest</option>
+ </select>
+ <Input type="select" className="form-control custom-select custom-select-sm"
+ onChange={(e)=>this.setAveragingWindow(e)}>
+ <option value={1}>day</option>
+ <option value={7}>week</option>
+ <option value={30}>month</option>
+ </Input>
+ </Form>
+ </div>);
}
}
+
+const mapDispatchToPropsToolBar = {
+ setStationStatisticsAveragingWindow,
+ setStationStatisticsTestType
+};
+
+
+const ToolBar = connect(null, mapDispatchToPropsToolBar)(ToolBarC);
+
+
class StationStatisticsC extends Component {
+ constructor(props){
+ super(props);
+ this.state = {};
+ this.ref = React.createRef();
+ this.getErrorsPerTypeSpec.bind(this);
+ }
getErrorsPerStation() {
if(this.props.data.errors_per_station !== undefined){
return {values:this.props.data.errors_per_station};
}
}
+
getErrorsPerType() {
if(this.props.data.errors_per_type !== undefined){
return {values:this.props.data.errors_per_type};
@@ -31,7 +68,7 @@ class StationStatisticsC extends Component {
}
getErrorsPerTypeSpec(){
- return {"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
+ let base_schema = {"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"mark": "bar",
"encoding": {
"x": {
@@ -50,13 +87,21 @@ class StationStatisticsC extends Component {
}
}
}
+ return base_schema;
}
render() {
return (
- <div className="station-statistics-ctrl">
+ <React.Fragment>
+ <h5 className="react-grid-item-header">
+ Station statistics
+ <ToolBar />
+ </h5>
+ <div className="react-grid-item-body" id="plot" ref={this.ref} >
<ReactVegaLite spec={this.getErrorsPerTypeSpec()}
data={this.getErrorsPerType()} />
</div>
+ </React.Fragment>
+
);
}
}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js
index 3357a5d0c0e..ccb8efd0962 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js
@@ -37,7 +37,7 @@ class STSRow extends Component {
return (
<tr>
- <th scope="row" style={{"white-space": "nowrap"}}>{ this.renderStartDate() }</th>
+ <th scope="row" style={{whiteSpace: "nowrap"}}>{ this.renderStartDate() }</th>
<th>{ props.time }</th>
<th>{ props.station }</th>
<td>{ component }</td>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
index e0c56fa1cc6..bedc1099080 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
@@ -94,17 +94,17 @@ class ToolBarC extends Component {
}
-const mapStateToProps = state => {
- return { ...state.mainFilters };
+const mapStateToPropsToolBar = state => {
+ return { ...state.mainFilters};
};
-const mapDispatchToProps = {
+const mapDispatchToPropsToolBar = {
setStationGroup,
setErrorsOnly,
setPeriod
};
-const ToolBar = connect(mapStateToProps, mapDispatchToProps)(ToolBarC);
+const ToolBar = connect(mapStateToPropsToolBar, mapDispatchToPropsToolBar)(ToolBarC);
@@ -142,10 +142,11 @@ class LandingPageC extends Component {
return `/api/view/ctrl_latest_observation?format=json&station_group=${this.props.selectedStationGroup}&from_date=${nDaysAgo_String}&errors_only=${this.props.errorsOnly}`;
}
getStationStatisticsURL() {
- var nDaysAgo = moment().add(-this.props.period*100, 'days').format('YYYY-MM-DD');
+ var nDaysAgo = moment().add(-this.props.period, 'days').format('YYYY-MM-DD');
var now = moment().format('YYYY-MM-DD');
- var averaging_interval = 12
- return `/api/view/ctrl_stationtest_statistics?format=json&from_date=${nDaysAgo}&to_date=${now}&averaging_interval=${averaging_interval}`;
+ var averaging_interval = this.props.station_statistics.averaging_window
+ var test_type = this.props.station_statistics.test_type
+ return `/api/view/ctrl_stationtest_statistics?format=json&from_date=${nDaysAgo}&to_date=${now}&averaging_interval=${averaging_interval}&test_type=${test_type}`;
}
render() {
return (<div>
@@ -165,7 +166,7 @@ class LandingPageC extends Component {
body: <StationTestSummary url={this.getStationTestSummaryURL()}/>
})}
{createGridPanel({
- key: "br", renderHeader: true, title: "Station Statistics",
+ key: "br", renderHeader: false,
body: <StationStatistics url={this.getStationStatisticsURL()}/> })}
</ResponsiveGridLayout>
</div>);
@@ -174,7 +175,7 @@ class LandingPageC extends Component {
const LandingPage = connect(state => {
- return { ...state.mainFilters };
+ return { ...state.mainFilters, ...state.landing_page };
}, null)(LandingPageC);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js
index cbd63119b2b..3851ef1eb48 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js
@@ -2,8 +2,9 @@
export const SET_STATION_GROUP = "SET_STATION_GROUP";
export const SET_ERRORS_ONLY = "SET_ERRORS_ONLY";
export const SET_PERIOD = "SET_PERIOD";
-
-
export const FETCH_ERRORTYPES_BEGIN = 'FETCH_ERRORTYPES_BEGIN';
export const FETCH_ERRORTYPES_SUCCESS = 'FETCH_ERRORTYPES_SUCCESS';
export const FETCH_ERRORTYPES_FAILURE = 'FETCH_ERRORTYPES_FAILURE';
+export const SET_COMPONENT_SIZES = "SET_COMPONENT_SIZES";
+export const SET_AVERAGING_WINDOW = "SET_AVERAGING_WINDOW";
+export const SET_TEST_TYPE = "SET_TEST_TYPE";
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js
index da41c7fc67a..b50cd773e7c 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js
@@ -1,5 +1,8 @@
-import { SET_STATION_GROUP, SET_ERRORS_ONLY, SET_PERIOD } from "./actionTypes";
+import { SET_STATION_GROUP,
+ SET_ERRORS_ONLY,
+ SET_PERIOD,
+ SET_COMPONENT_SIZES, SET_AVERAGING_WINDOW, SET_TEST_TYPE } from "./actionTypes";
@@ -17,3 +20,19 @@ export const setPeriod = period => ({
type: SET_PERIOD,
payload: { period }
});
+
+
+export const setComponentsSizes = (componentName, componentSizes) => ({
+ type: SET_COMPONENT_SIZES,
+ payload: { componentName: componentSizes }
+});
+
+export const setStationStatisticsAveragingWindow = averagingWindow => ({
+ type: SET_AVERAGING_WINDOW,
+ payload: { averagingWindow }
+});
+
+export const setStationStatisticsTestType = test_type => ({
+ type: SET_TEST_TYPE,
+ payload: { test_type }
+});
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js
index 471fbf229cf..1f7d586d6ba 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js
@@ -1,8 +1,10 @@
import { combineReducers } from "redux";
import appInitData from "./appInitData";
import mainFilters from "./mainFilters";
+import landingPageReducers from "./landingPageReducers";
export default combineReducers({
appInitData,
- mainFilters
+ mainFilters,
+ landing_page:landingPageReducers
});
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
index 01dceb7460b..80eef4ef107 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
@@ -6,7 +6,7 @@ import {
const initialState = {
- selectedStationGroup: 'R',
+ selectedStationGroup: 'A',
errorsOnly: false,
period: 14 // days
};
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js
index be9df5808a2..c6fd9b85eb8 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js
@@ -95,7 +95,7 @@ function AutoLoadWrapper(WrappedComponent) {
}
render() {
- console.log('render');
+ console.log('render', this);
let loadingHtml = "";
if (this.state.isLoading) {
loadingHtml = <div className="alLoading"></div>;
--
GitLab