diff --git a/.gitattributes b/.gitattributes
index 803896696012fed33d039cf2bf56830c365ef839..5b28f1d0c3ba9588e0c8f279f060d5b63ffdbf3d 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1850,50 +1850,48 @@ LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.css -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.test.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/api_configuration.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeight.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.css -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeightDiv/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/styles.module.scss -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/ObservationInspectTag.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.css -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.scss -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationDetails.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList.css -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.css -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.scss -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.css -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.scss -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestDetails.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.css -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.scss -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.css -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.scss -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.scss -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaIdSelector/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaTypeSelector/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/DateRangeSelector/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/ErrorTypesSelector/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/ErrorsOnlySelector/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/MultiSelectDropdown/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/PeriodSelector/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationAutoComplete/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationAutoComplete/styles.scss -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationGroupSelector/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/TestTypeSelector/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/styles.module.css -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/styles.module.scss -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/lofar_logo.svg -text svneol=unset#image/svg%2Bxml
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/index.css -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/index.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/logo.svg -text svneol=unset#image/svg
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/DetailsPage.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/RTSMPage.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/styles.module.scss -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/styles.module.scss -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationStatistics/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/styles.module.scss -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/styles.module.scss -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/styles.module.scss -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationTestPage.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/index.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/antennaOverviewPageActions.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/appInitDataActions.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/landingPageActions.js -text
@@ -1919,7 +1917,6 @@ LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-variables.scss -
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.scss -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/LOFARDefinitions.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/constants.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/grid.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/highlightClass.js -text
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
index 5c4c238b5b2a2972d80a129fb1112b7519637c69..46c57f05f5fc2a04c0bd39dab7c75886ef9d4506 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
@@ -1,11 +1,10 @@
import React, { Component } from 'react';
-import LandingPage from './pages/LandingPage.js'
-import StationOverviewPage from './pages/StationOverviewPage.js'
-import TilesPage from './pages/TilesPage.js'
-import DetailsPage from './pages/DetailsPage.js'
+import LandingPage from 'pages/LandingPage'
+import StationOverviewPage from 'pages/StationOverviewPage'
+import TilesPage from 'pages/TilesPage'
import { connect } from "react-redux";
-import { fetchErrorTypes, fetchStations } from "./redux/actions/appInitDataActions.js";
+import { fetchErrorTypes, fetchStations } from "redux/actions/appInitDataActions.js";
import {
//BrowserRouter as Router,
@@ -13,7 +12,7 @@ import {
Switch
} from 'react-router-dom';
import { ConnectedRouter as Router } from 'connected-react-router';
-import { history } from "./redux/store.js";
+import { history } from "redux/store.js";
import './App.css';
@@ -34,7 +33,6 @@ class AppC extends Component {
<Route exact path="/" component={LandingPage}/>
<Route path="/station_overview/:name?" component={StationOverviewPage}/>
<Route exact path="/tiles/:antenna?" component={TilesPage}/>
- <Route exact path="/details" component={DetailsPage}/>
</Switch>
</div>
</Router>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/index.js
similarity index 95%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/index.js
index 29dfba285ad2998660421ddeb35bac548a4fe20c..71fd6af21263073ab1a8664983aea067030cfead 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/index.js
@@ -3,9 +3,12 @@ import axios from 'axios';
import {Alert} from 'reactstrap';
+// CSS
+import styles from './styles.module.scss'
+
function Spinner() {
- return <div className="autoloader-loading"></div>;
+ return <div className={styles.autoloader_loading}></div>;
}
@@ -130,7 +133,7 @@ function AutoLoadWrapper(WrappedComponent) {
}
return(
- <div className="autoloader-container">
+ <div className={styles.autoloader_container}>
{loadingHtml}
{errorHtml}
<WrappedComponent data={this.state.data} isLoading={this.state.isLoading} {...this.props} />
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeight.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeightDiv/index.js
similarity index 92%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeight.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeightDiv/index.js
index f36a94934af6d9cc28eaf3c7986d37549a94afbb..6f10235f5cb28691209a677e125cf6a3bdf70239 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeight.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeightDiv/index.js
@@ -1,18 +1,18 @@
import React from "react";
/*
- * FillHeight: Creates a div that fills the remaining height of the viewport.
+ * FillHeightDiv: Creates a div that fills the remaining height of the viewport.
* Window resize is monitored to scale the div accordingly.
*
* This component uses the 'render prop' pattern where the 'children' prop is used
* as the render function. The height of the div (in an object) is passed to
* the function for use by subcomponents. E.g.:
*
- * <FillHeight>
+ * <FillHeightDiv>
* { (props) => <MyComponent hgt={props.height} /> }
- * </FillHeight>
+ * </FillHeightDiv>
*/
-class FillHeight extends React.Component {
+class FillHeightDiv extends React.Component {
static defaultProps = {
className: 'fill-height-container', // classname for the container div
@@ -85,4 +85,4 @@ class FillHeight extends React.Component {
}
};
-export default FillHeight;
+export default FillHeightDiv;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..fab2bb89efd508c959c60078c51855d3bb297a96
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/index.js
@@ -0,0 +1,73 @@
+import React, { PureComponent } from 'react';
+import { Link } from 'react-router-dom';
+import { Collapse,
+ Nav,
+ NavbarToggler,
+ Navbar,
+ NavbarBrand,
+ NavItem,
+ NavLink } from 'reactstrap';
+
+// CSS
+import styles from './styles.module.scss'
+
+
+class Header extends PureComponent {
+
+ state = {
+ isOpen: false
+ }
+
+ toggle = () => {
+ this.setState({
+ isOpen:!this.state.isOpen
+ });
+ }
+
+ check_status(item){
+ //console.log(this.props.active_page.pathname)
+ if (this.props.active_page.pathname === item){
+ return "active"
+ }
+ }
+
+ render() {
+ return (
+ <Navbar className={styles.header_navbar} dark expand="lg">
+ <NavbarBrand className={styles.header_brand}>
+ <h1>
+ <em>LOFAR</em> Station monitor <span>v0.1</span>
+ </h1>
+ </NavbarBrand>
+ <NavbarToggler onClick={this.toggle} />
+ <Collapse isOpen={this.state.isOpen} navbar>
+ <Nav className="ml-auto" navbar>
+ <NavItem className={this.check_status("/")}>
+ <NavLink tag={Link} to="/">
+ <h3>Dashboard</h3>
+ </NavLink>
+ </NavItem>
+ <NavItem className={this.check_status("/station_overview")}>
+ <NavLink tag={Link} to="/station_overview">
+ <h3>Station Overview</h3>
+ </NavLink>
+ </NavItem>
+ <NavItem className={this.check_status("/tiles")}>
+ <NavLink tag={Link} to="/tiles">
+ <h3>Tiles</h3>
+ </NavLink>
+ </NavItem>
+ { /*}
+ <NavItem className={this.check_status("/details")}>
+ <NavLink tag={Link} to="/details">
+ <h3>Details</h3>
+ </NavLink>
+ </NavItem>
+ */ }
+ </Nav>
+ </Collapse>
+ </Navbar>);
+ }
+}
+
+export default Header;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/styles.module.scss
similarity index 59%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.scss
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/styles.module.scss
index f0e366076c6e65a817143c04335f09578bab6f08..bd89058b7d2f1f4605a3bc42a914ea3894752229 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/styles.module.scss
@@ -1,17 +1,17 @@
-@import '../themes/lofar-variables.scss';
+@import '../../themes/lofar-variables.scss';
-.header-navbar.navbar {
+:local(.header_navbar):global(.navbar) {
background-color: $primary;
padding: .3rem 1rem;
color: white;
}
-.header-brand em {
+:local .header_brand em {
font-weight: bold;
font-style: normal;
}
-.header-brand span {
+:local .header_brand span {
color: $secondary-dark;
font-size: 1.5rem;
font-style: italic;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.css
deleted file mode 100644
index 5621f63474414e48e745aa3863172fe5abd38c11..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.css
+++ /dev/null
@@ -1,13 +0,0 @@
-/* COLORS */
-/* Color palette interface (created with https://material.io/tools/color/) */
-/* font color */
-/* font color */
-/* Data colors */
-.hoverable:hover {
- background-color: #b6b6ba; }
-
-.table-wrapper {
- width: 10em;
- max-height: 10em;
- overflow: auto;
- display: block; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.css
deleted file mode 100644
index b7172e7d24fd1e8a071985ffb4592b35bc7f0e36..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.css
+++ /dev/null
@@ -1,77 +0,0 @@
-/* COLORS */
-/* Color palette interface (created with https://material.io/tools/color/) */
-/* font color */
-/* font color */
-/* Data colors */
-.react-autosuggest__container {
- position: relative;
- display: inline-block; }
-
-.react-autosuggest__container svg {
- font-size: 1.2rem; }
-
-.react-autosuggest__container button.btn.btn-info {
- padding: .25rem .3rem; }
-
-/*
-.react-autosuggest__input {
-}
-*/
-.react-autosuggest__container .react-autosuggest__input {
- border-radius: 0; }
-
-.react-autosuggest__suggestions-container {
- display: none; }
-
-.react-autosuggest__container--open .react-autosuggest__suggestions-container {
- display: block;
- position: absolute;
- width: 100%;
- border: 1px solid #aaa;
- background-color: #fff;
- color: black;
- font-family: Helvetica, sans-serif;
- font-weight: 300;
- font-size: 16px;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- z-index: 2000;
- overflow-y: auto;
- max-height: 30em; }
-
-.react-autosuggest__suggestions-list {
- margin: 0;
- padding: 0;
- list-style-type: none; }
-
-.react-autosuggest__suggestion {
- cursor: pointer;
- padding: 10px 20px; }
-
-.react-autosuggest__suggestion:not(:first-child) {
- border-top: 1px solid #ddd; }
-
-.react-autosuggest__suggestion--focused {
- background-color: #0C7EAF;
- color: #fff; }
-
-.suggestion-content {
- display: flex;
- align-items: center;
- background-repeat: no-repeat; }
-
-.react-autosuggest__suggestion--highlighted {
- background-color: #86868a; }
-
-.react-autosuggest__container .btn-clear {
- position: absolute;
- right: 4px;
- top: 0;
- bottom: 0;
- height: 100%;
- margin: auto;
- cursor: pointer;
- color: #b6b6ba; }
-
-.react-autosuggest__container .btn-clear:hover {
- color: #86868a; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationDetails.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationDetails.js
deleted file mode 100644
index 94be8877bb218d3ee2435cfa3b0a984e35495993..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationDetails.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { Component } from 'react';
-import { Table, Badge, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
-import { unique_id } from '../utils/utils.js'
-import './StationOverview.css'
-
-
-/**
- * StationTestBadge; class to render one stationtest badge in the SORow.
- */
-class StationTestBadge extends Component {
-
- constructor(props) {
- super(props);
-
- this.id = unique_id();
- this.togglePopover = this.togglePopover.bind(this);
- this.state = {
- popoverOpen: false
- };
- }
-
- getClass() {
- let color = this.props.data.total_component_errors>0 ? "so-red" : "so-green";
- return "so-stationtestbadge " + color;
- }
-
- togglePopover() {
- this.setState({
- popoverOpen: !this.state.popoverOpen
- });
- }
-
- render () {
- let data = this.props.data;
- return (
- <div>
- <div id={ this.id } onMouseOver={this.togglePopover} onMouseOut={this.togglePopover} className={ this.getClass() }>{ this.props.data.total_component_errors }</div>
- <Popover placement="auto" isOpen={this.state.popoverOpen} target={ this.id } toggle={this.togglePopover}>
- <PopoverHeader>{this.props.station}</PopoverHeader>
- <PopoverBody>
- <strong>Start:</strong> { data.start_datetime}<br/>
- <strong>End:</strong> { data.end_datetime }<br/>
- <strong>Checks:</strong> { data.checks }
- </PopoverBody>
- </Popover>
- </div>
- );
- }
-}
-
-
-/**
- * RTSMBadge; class to render one RTSM badge in the SORow.
- */
-class RTSMBadge extends Component {
-
- getClass() {
- let color = this.props.data.total_component_errors>0 ? "so-red" : "so-green";
- return "so-pill " + color;
- }
-
- render () {
- let data = this.props.data;
- return <div className="so-rtsmbadge">{ data.observation_id }<span className={ this.getClass() }>{ data.total_component_errors }</span></div>;
- }
-}
-
-
-/**
- * SORow; Class to render the row for a station in the StationOverview.
- */
-class SORow extends Component {
-
- renderStationName() {
- return this.props.data.station_name;
- }
-
- renderStationTests() {
- let data = this.props.data;
- return data.station_tests.map( (testData) => <StationTestBadge station={data.station_name} data={ testData } /> );
- }
-
- renderRTSM() {
- if (! this.props.data.rtsm || this.props.data.rtsm.length == 0) {
- return "No RTSM data found"
- }
- return this.props.data.rtsm.map( (testData) => <RTSMBadge data={ testData } /> );
- }
-
- render() {
- return (
- <tr>
- <th scope="row">{ this.renderStationName() }</th>
- <td>{ this.renderStationTests() }</td>
- <td>{ this.renderRTSM() }</td>
- </tr>
- );
- }
-}
-
-
-/**
- * StationDetails class.
- */
-class StationDetails extends Component {
-
- getTableRows() {
- return this.props.data.map( (stationData) => <SORow data={ stationData } /> );
- }
-
- render() {
- return (
- <div className="station-overview-ctrl">
- <Table size="sm" className="so-table">
- <thead>
- <tr>
- <th>Name</th>
- <th>Station tests</th>
- <th>Latest observations</th>
- </tr>
- </thead>
- <tbody>
- { this.getTableRows() }
- </tbody>
- </Table>
- </div>
- );
- }
-
-}
-
-export default StationOverview;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.css
deleted file mode 100644
index 11a0240c2c57a99f62ab7ef9cb93dbed336b962b..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/* COLORS */
-/* Color palette interface (created with https://material.io/tools/color/) */
-/* font color */
-/* font color */
-/* Data colors */
-.so, .so-serious, .so-alarming, .so-warning, .so-good {
- font-weight: 600 !important; }
-
-.so-serious {
- background-color: #f17171;
- color: white; }
-
-.so-alarming {
- background-color: #ffcd74;
- color: black; }
-
-.so-warning {
- background-color: #fbfb83;
- color: black; }
-
-.so-good {
- background-color: #6fbd6f;
- color: white; }
-
-.station-overview-ctrl {
- font-size: .9rem; }
-
-.so-table {
- width: auto !important; }
-
-.so-table th {
- padding-right: 1.4em !important; }
-
-.so-stationtestbadge {
- float: left;
- width: 1.4rem;
- height: 1.4rem;
- line-height: 1.4rem;
- border: 1px solid #999;
- border-radius: .2rem;
- padding: 0;
- text-align: center;
- margin-left: 1px;
- font-size: 90%; }
-
-/* General badge styling */
-.so-badge {
- float: left;
- height: 1.4rem;
- line-height: 1.4rem;
- background: #e8e8ec;
- border: 1px solid #86868a;
- border-radius: .2rem;
- padding: 0 0.5em;
- text-align: left;
- margin-left: 2px;
- font-size: 90%; }
-
-/* RTSM Badge styling */
-.so-rtsmbadge {
- width: 7em; }
-
-.so-stationtestbadge:hover,
-.so-badge:hover {
- color: #fff;
- background-color: #86868a;
- border-color: #86868a; }
-
-.so-pill {
- display: block;
- float: right;
- padding: .25em .45em;
- font-size: 90%;
- font-weight: 500;
- line-height: 1;
- text-align: center;
- white-space: nowrap;
- vertical-align: baseline;
- border-radius: 1em;
- margin-top: 0.1rem;
- margin-left: 0.5em; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.css
deleted file mode 100644
index 5dc5cc855b3ac5b93a00c83e21d2f5335ee67476..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.css
+++ /dev/null
@@ -1,13 +0,0 @@
-/* COLORS */
-/* Color palette interface (created with https://material.io/tools/color/) */
-/* font color */
-/* font color */
-/* Data colors */
-.stcv-header {
- padding: .5rem 0;
- color: #86868a; }
-
-.stcv img {
- cursor: pointer;
- display: block;
- width: 90%; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestDetails.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestDetails.js
deleted file mode 100644
index 788d33be71fca89f31b1de028cf6fa0830d35273..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestDetails.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, {Component} from 'react';
-import {withRouter} from "react-router";
-import {Table, Popover, PopoverHeader, PopoverBody} from 'reactstrap';
-import {unique_id} from '../utils/utils.js'
-import AutoLoadWrapper from '../utils/autoLoader.js'
-import './StationOverview.css'
-
-/**
- * StationTestDetails class.
- */
-class StationTestDetailsC extends Component {
-
- render() {
- return (<div >
- funny
- </div>);
- }
-
-}
-
-/* Add some magic; use the AutoLoadWrapper to create a HOC that handles the
- auto-loading of the data for StationOverviewC.
- */
-const StationTestDetails = AutoLoadWrapper(StationTestDetailsC);
-
-export default StationTestDetails;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.css
deleted file mode 100644
index 89cff5e0be1d41048634d5039ce833dec87d90cf..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.sts-toolbar {
- position: absolute;
- right: 0.5rem;
- top: 0.1rem;
- display: inline-block; }
-
-.sts-table {
- width: auto !important;
- text-align: center;
- font-size: .9rem; }
-
-.sts-table th {
- word-break: break-all;
- min-width: 3em; }
-
-.sts-table td {
- text-align: center; }
-
-.sts-table.table-sm td, .sts-table.table-sm th {
- padding: .2rem; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.scss
deleted file mode 100644
index e96c2c8a3acc41507b5c065720f74a9857699fd8..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.sts-toolbar {
- position: absolute;
- right: 0.5rem;
- top: 0.1rem;
- display: inline-block;
-}
-
-.sts-table {
- width: auto!important;
- text-align: center;
- font-size: .9rem;
-}
-
-.sts-table th {
- word-break: break-all;
- min-width: 3em;
-}
-
-.sts-table td {
- text-align: center;
-}
-
-.sts-table.table-sm td, .sts-table.table-sm th {
- padding: .2rem;
-}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
deleted file mode 100644
index aefc047c97d4cbd290e08d3f3cbf7705b5d5904f..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/* COLORS */
-/* Color palette interface (created with https://material.io/tools/color/) */
-/* font color */
-/* font color */
-/* Data colors */
-.stv-table {
- font-size: .9rem; }
-
-.stv-table.table-sm td, .stv-table.table-sm th {
- padding: .1rem;
- min-width: 1.8em; }
-
-.stv-tableheader {
- position: relative;
- background-color: white;
- text-align: center; }
-
-.stv-rtsm-summary-row {
- background-color: #eeeeee; }
-
-.stv-component-status {
- text-align: center;
- font-size: 90%; }
-
-.stv-component-status.highlight,
-.stv-testline.highlight {
- background-color: #86868a !important;
- color: white; }
-
-.stv-testline.highlight td:first-child::before {
- content: "> "; }
-
-.stv-testline-header {
- width: 12rem !important;
- min-width: 12rem !important; }
-
-.stv-component-status:hover {
- color: #fff;
- background-color: #86868a;
- border-color: #86868a; }
-
-.stv-rtsm-summary-badge {
- background-color: #fbfb83;
- color: black;
- text-shadow: 1px 2px white;
- font-size: 80%;
- text-align: center; }
-
-.stv-rtsm-summary-row .row-header {
- width: 12rem !important;
- min-width: 12rem !important;
- cursor: pointer; }
-
-.tab-navbar {
- min-height: 2em !important; }
-
-.clickable-nav-link, .clickable-tab-active, .clickable-tab-unactive {
- border-style: none; }
-
-.clickable-tab-active {
- color: white !important;
- background-color: #4a6889; }
-
-.clickable-tab {
- cursor: pointer;
- color: #001832; }
-
-.clickable-tab:hover {
- color: #4a6889; }
-
-@keyframes animation-open {
- from {
- transform: rotate(0deg); }
- to {
- transform: rotate(180deg); } }
-
-@keyframes animation-close {
- from {
- transform: rotate(180deg); }
- to {
- transform: rotate(0deg); } }
-
-.stv-rtsm-summary-row .dropdownbutton {
- display: inline;
- float: right;
- animation: animation-close;
- animation-duration: 100ms;
- animation-iteration-count: 1;
- animation-timing-function: linear; }
-
-.stv-rtsm-summary-row .dropdownbutton-up {
- transform: rotate(180deg);
- animation: animation-open;
- animation-duration: 100ms;
- animation-iteration-count: 1;
- animation-timing-function: linear; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaIdSelector/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaIdSelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8c9ba08417b9b578b13c755d2cbd9da5b458c7b
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaIdSelector/index.js
@@ -0,0 +1,78 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import {Button, ButtonGroup, Input} from 'reactstrap';
+import {
+ setDateRange,
+ setTestType,
+ setErrorTypes,
+ setStationGroup,
+ setErrorsOnly,
+ setPeriod, setAntennaID,
+ setAntennaType
+} from "redux/actions/mainFiltersActions";
+import {stationTypeFromName} from "utils/LOFARDefinitions";
+// History handling
+import { push } from 'connected-react-router';
+import { store } from "redux/store.js";
+
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import {AntennaIdsPerTypeStationType} from 'utils/LOFARDefinitions.js'
+
+// CSS
+import styles from './styles.module.scss'
+import 'react-datepicker/dist/react-datepicker.css';
+
+
+
+/**
+ * Radio buttons for Antenna Id
+ */
+class AntennaIdSelectorC extends Component {
+
+ antennaIdList(type, stationType){
+ const antennaIdRange = AntennaIdsPerTypeStationType[stationType][type];
+ let options = [];
+ for(let i=antennaIdRange.start; i<antennaIdRange.end; i++){
+ options.push(<option key={i} value={i}>{i}</option>);
+ }
+ return options
+ }
+ onSelectedAntenna = (e) => {
+ //this.props.setAntennaID(Number(e.target.value));
+ store.dispatch(push(`?antenna_id=${e.target.value}`))
+ };
+
+ render() {
+ const stationType = stationTypeFromName(this.props.selectedStation);
+
+ const options = this.antennaIdList(this.props.antennaType, stationType);
+
+ return (
+ <div className={styles.toolbar_ctrl}>
+ <label>Antenna id </label>
+ <Input type="select"
+ value={this.props.antennaId}
+ onChange={this.onSelectedAntenna}
+ bsSize="sm"
+ style={{display:"inline-block", width:"auto"}}>
+ {options}
+ </Input>
+ </div>);
+ }
+
+}
+
+const mapStateAntennaIdSelector = state => {
+ return {
+ selectedStation: state.mainFilters.selectedStation,
+ antennaId: state.mainFilters.antennaId,
+ antennaType: state.mainFilters.antennaType
+ };
+};
+
+const mapDispatchAntennaIdSelector = {
+ setAntennaID
+};
+
+export const AntennaIdSelector = connect(mapStateAntennaIdSelector, mapDispatchAntennaIdSelector)(AntennaIdSelectorC);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaTypeSelector/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaTypeSelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..11175fcb39cf4f7e421f6a498d0e4b39f7eed814
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaTypeSelector/index.js
@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import {Button, ButtonGroup, Input} from 'reactstrap';
+import {
+ setDateRange,
+ setTestType,
+ setErrorTypes,
+ setStationGroup,
+ setErrorsOnly,
+ setPeriod, setAntennaID,
+ setAntennaType
+} from "redux/actions/mainFiltersActions";
+import {stationTypeFromName} from "utils/LOFARDefinitions";
+// History handling
+import { push } from 'connected-react-router';
+import { store } from "redux/store.js";
+
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import {AntennaIdsPerTypeStationType} from 'utils/LOFARDefinitions.js'
+
+// CSS
+import styles from './styles.module.scss'
+import 'react-datepicker/dist/react-datepicker.css';
+
+
+/**
+ * Radio buttons for Antenna Type
+ */
+class AntennaTypeSelectorC extends Component {
+
+ onAntennaTypeClick = (e) => {
+ let type = e.currentTarget.innerHTML;
+ //this.props.setAntennaType(type);
+
+ store.dispatch(push(`?antenna_type=${type}`))
+ }
+
+ render() {
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Type </label>
+ <ButtonGroup size="sm">
+ <Button color="info" onClick={this.onAntennaTypeClick} active={this.props.antennaType === 'HBA'}>HBA</Button>
+ <Button color="info" onClick={this.onAntennaTypeClick} active={this.props.antennaType === 'LBH'}>LBH</Button>
+ <Button color="info" onClick={this.onAntennaTypeClick} active={this.props.antennaType === 'LBL'}>LBL</Button>
+ </ButtonGroup>
+ </div>);
+ }
+}
+
+const mapStateAntennaTypeSelector = state => {
+ return {
+ antennaType: state.mainFilters.antennaType
+ };
+};
+
+const mapDispatchAntennaTypeSelector = {
+ setAntennaType
+};
+
+export const AntennaTypeSelector = connect(mapStateAntennaTypeSelector, mapDispatchAntennaTypeSelector)(AntennaTypeSelectorC);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/DateRangeSelector/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/DateRangeSelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..99d6da739efe7ba84bb1a1afc800f56da5e1c4cd
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/DateRangeSelector/index.js
@@ -0,0 +1,126 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import {Button, ButtonGroup, Input} from 'reactstrap';
+import {
+ setDateRange,
+ setTestType,
+ setErrorTypes,
+ setStationGroup,
+ setErrorsOnly,
+ setPeriod, setAntennaID,
+ setAntennaType
+} from "redux/actions/mainFiltersActions";
+import {stationTypeFromName} from "utils/LOFARDefinitions";
+// History handling
+import { push } from 'connected-react-router';
+import { store } from "redux/store.js";
+
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import {AntennaIdsPerTypeStationType} from 'utils/LOFARDefinitions.js'
+
+// CSS
+import styles from './styles.module.scss'
+import 'react-datepicker/dist/react-datepicker.css';
+
+
+/**
+ * Class to display a secondary header for selecting data filters.
+ * The state is managed by the LandingPage class.
+ */
+class DateRangeSelectorC extends Component {
+
+ handleChange(obj) {
+ var startDate = obj.startDate,
+ endDate = obj.endDate;
+
+ startDate = startDate || this.props.startDate;
+ endDate = endDate || this.props.endDate;
+
+ if (startDate.isAfter(endDate)) {
+ endDate = startDate;
+ }
+
+ this.props.setDateRange({
+ startDate: startDate,
+ endDate: endDate
+ });
+ };
+
+ handleChangeStart = (startDate) => {
+ return this.handleChange({
+ startDate: startDate
+ });
+ };
+
+ handleChangeEnd = (endDate) => {
+ return this.handleChange({
+ endDate: endDate
+ });
+ };
+
+ onPeriodClick = (i) => {
+ this.handleChange({
+ startDate: moment().subtract(i, 'days'),
+ endDate: moment()
+ });
+
+ }
+
+ periodIsActive(ndays) {
+ let now = moment().format("YYYY-MMM-DD"),
+ past = moment().subtract(ndays, 'days').format("YYYY-MMM-DD");
+ if (this.props.endDate.format("YYYY-MMM-DD") === now && this.props.startDate.format("YYYY-MMM-DD") === past) {
+ return true;
+ }
+ return false;
+ }
+
+ render() {
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Period </label>
+ <ButtonGroup size="sm">
+ <Button color="info" onClick={() => this.onPeriodClick(7)} active={this.periodIsActive(7)}>1 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(14)} active={this.periodIsActive(14)}>2 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(28)} active={this.periodIsActive(28)}>4 wk</Button>
+ </ButtonGroup>
+
+ <div style={{display: 'inline-block', width: '7em'}}>
+ <DatePicker
+ selected={this.props.startDate}
+ selectsStart
+ dateFormat="YYYY-MMM-DD"
+ className='form-control form-control-sm'
+ startDate={this.props.startDate}
+ endDate={this.props.endDate}
+ onChange={this.handleChangeStart}
+ />
+ </div>
+
+ <div style={{display: 'inline-block', width: '7em'}}>
+ <DatePicker
+ selected={this.props.endDate}
+ selectsEnd
+ dateFormat="YYYY-MMM-DD"
+ className='form-control form-control-sm'
+ startDate={this.props.startDate}
+ endDate={this.props.endDate}
+ onChange={this.handleChangeEnd}
+ />
+ </div>
+ </div>);
+ }
+}
+
+const mapStateDateRangeSelector = state => {
+ return {
+ startDate: state.mainFilters.startDate,
+ endDate: state.mainFilters.endDate
+ };
+};
+
+const mapDispatchDateRangeSelector = {
+ setDateRange
+};
+
+export const DateRangeSelector = connect(mapStateDateRangeSelector, mapDispatchDateRangeSelector)(DateRangeSelectorC);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/ErrorTypesSelector/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/ErrorTypesSelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..958950d9ebbeeea453edcc49640c2443e5a6c496
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/ErrorTypesSelector/index.js
@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import {Button, ButtonGroup, Input} from 'reactstrap';
+import {
+ setDateRange,
+ setTestType,
+ setErrorTypes,
+ setStationGroup,
+ setErrorsOnly,
+ setPeriod, setAntennaID,
+ setAntennaType
+} from "redux/actions/mainFiltersActions";
+import {stationTypeFromName} from "utils/LOFARDefinitions";
+// History handling
+import { push } from 'connected-react-router';
+import { store } from "redux/store.js";
+
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import {AntennaIdsPerTypeStationType} from 'utils/LOFARDefinitions.js'
+
+// CSS
+import styles from './styles.module.scss'
+import 'react-datepicker/dist/react-datepicker.css';
+
+/**
+ * Class to display a secondary header for selecting data filters.
+ * The state is managed by the LandingPage class.
+ */
+class ErrorTypesSelectorC extends Component {
+
+ onSelectionErrorTypes = (errorTypes) => {
+ this.props.setErrorTypes(errorTypes)
+ }
+
+ render() {
+ const errorTypes = this.props.errorTypes.map(item => ({value:item, label:item}))
+
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Error type </label>
+ <MultiSelectDropdown
+ className="form-input"
+ placeHolder="All"
+ options={errorTypes}
+ selectedItems={this.props.selectedErrorTypes}
+ onSelectionChange={this.onSelectionErrorTypes}
+ />
+ </div>);
+ }
+}
+
+const mapStateErrorTypesSelector = state => {
+ return {
+ selectedErrorTypes: state.mainFilters.selectedErrorTypes,
+ errorTypes: state.appInitData.errorTypes
+ };
+};
+
+const mapDispatchErrorTypesSelector = {
+ setErrorTypes
+};
+
+export const ErrorTypesSelector = connect(mapStateErrorTypesSelector, mapDispatchErrorTypesSelector)(ErrorTypesSelectorC);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/ErrorsOnlySelector/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/ErrorsOnlySelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1a7cb04082ebf45e8fa6ea0e784b7eb502831ba2
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/ErrorsOnlySelector/index.js
@@ -0,0 +1,56 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import {Button, ButtonGroup, Input} from 'reactstrap';
+import {
+ setDateRange,
+ setTestType,
+ setErrorTypes,
+ setStationGroup,
+ setErrorsOnly,
+ setPeriod, setAntennaID,
+ setAntennaType
+} from "redux/actions/mainFiltersActions";
+import {stationTypeFromName} from "utils/LOFARDefinitions";
+// History handling
+import { push } from 'connected-react-router';
+import { store } from "redux/store.js";
+
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import {AntennaIdsPerTypeStationType} from 'utils/LOFARDefinitions.js'
+
+// CSS
+import styles from './styles.module.scss'
+import 'react-datepicker/dist/react-datepicker.css';
+
+
+/*
+ * Toggle button for "errorsOnly"
+ */
+class ErrorsOnlySelectorC extends Component {
+
+ onErrorsOnlyClick = () => {
+ this.props.setErrorsOnly(!this.props.errorsOnly);
+ }
+
+ render() {
+ return (
+ <div className={styles.toolbar_ctrl}>
+ <Button color="info" size="sm" onClick={this.onErrorsOnlyClick} active={this.props.errorsOnly}>
+ Errors only
+ </Button>
+ </div>);
+ }
+}
+
+const mapStateErrorsOnlySelector = state => {
+ return {
+ errorsOnly: state.mainFilters.errorsOnly
+ };
+};
+
+const mapDispatchErrorsOnlySelector = {
+ setErrorsOnly
+};
+
+export const ErrorsOnlySelector = connect(mapStateErrorsOnlySelector, mapDispatchErrorsOnlySelector)(ErrorsOnlySelectorC);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/MultiSelectDropdown/index.js
similarity index 100%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/MultiSelectDropdown/index.js
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/PeriodSelector/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/PeriodSelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d6d8f0ee3b20fcb2f3fcaf672b55a8b72a1d734b
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/PeriodSelector/index.js
@@ -0,0 +1,62 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import {Button, ButtonGroup, Input} from 'reactstrap';
+import {
+ setDateRange,
+ setTestType,
+ setErrorTypes,
+ setStationGroup,
+ setErrorsOnly,
+ setPeriod, setAntennaID,
+ setAntennaType
+} from "redux/actions/mainFiltersActions";
+import {stationTypeFromName} from "utils/LOFARDefinitions";
+// History handling
+import { push } from 'connected-react-router';
+import { store } from "redux/store.js";
+
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import {AntennaIdsPerTypeStationType} from 'utils/LOFARDefinitions.js'
+
+// CSS
+import styles from './styles.module.scss'
+import 'react-datepicker/dist/react-datepicker.css';
+
+
+
+/**
+ * Class to display a secondary header for selecting data filters.
+ * The state is managed by the LandingPage class.
+ */
+class PeriodSelectorC extends Component {
+
+ onPeriodClick(i) {
+ this.props.setPeriod(i);
+ }
+
+ render() {
+
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Period </label>
+ <ButtonGroup size="sm">
+ <Button color="info" onClick={() => this.onPeriodClick(7)} active={this.props.period === 7}>1 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(14)} active={this.props.period === 14}>2 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(21)} active={this.props.period === 21}>3 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(28)} active={this.props.period === 28}>4 wk</Button>
+ </ButtonGroup>
+ </div>);
+ }
+}
+
+const mapStatePeriodSelector = state => {
+ return {
+ period: state.mainFilters.period
+ };
+};
+
+const mapDispatchPeriodSelector = {
+ setPeriod
+};
+
+export const PeriodSelector = connect(mapStatePeriodSelector, mapDispatchPeriodSelector)(PeriodSelectorC);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationAutoComplete/index.js
similarity index 96%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationAutoComplete/index.js
index b8def694ce7dd4d59935ce50205f8c53ffc93d28..83314600049556dcd1e734478bddcf0925e5754f 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationAutoComplete/index.js
@@ -10,10 +10,11 @@ import {
// History handling
import { push } from 'connected-react-router';
-import { store } from "../redux/store.js";
+import { store } from "redux/store.js";
// CSS
-import './StationAutoComplete.scss'
+import './styles.scss'
+import toolbarStyles from '../styles.module.scss'
/**
@@ -210,11 +211,12 @@ class StationAutoCompleteC extends Component {
// The key on AutoComplete is important, see the desc of AutoComplete
// That's the main reason why this wrapper exists.
return(
- <div className="toolbar-ctrl">
+ <div className={toolbarStyles.toolbar_ctrl}>
<AutoComplete key={this.props.selectedStation}
stations={this.props.stations}
selectedStation={this.props.selectedStation}
- onChange={this.onStationChange}/>
+ onChange={this.onStationChange}
+ />
</div>
);
}
@@ -231,4 +233,4 @@ const mapStateToPropsToolBar = state => {
const StationAutoComplete = connect(mapStateToPropsToolBar)(StationAutoCompleteC);
-export default StationAutoComplete;
+export { StationAutoComplete };
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationAutoComplete/styles.scss
similarity index 97%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.scss
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationAutoComplete/styles.scss
index 4b7f44a72a7e1696fe817bb016af9a41a53b7e6b..160c494558ff70b94aeab51ef2bc1582f884661d 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationAutoComplete/styles.scss
@@ -1,5 +1,5 @@
-@import '../themes/lofar-variables.scss';
+@import '../../../themes/lofar-variables.scss';
.react-autosuggest__container {
position: relative;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationGroupSelector/index.js
similarity index 93%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationGroupSelector/index.js
index 0ffb52a22ab4ae8ffd5ebed86e0b3cdf08d0d938..1434fca822f8eabcac5a94758d0a5de205853846 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationGroupSelector/index.js
@@ -9,18 +9,18 @@ import {
setErrorsOnly,
setPeriod, setAntennaID,
setAntennaType
-} from "../redux/actions/mainFiltersActions";
-import {stationTypeFromName} from "../utils/LOFARDefinitions";
+} from "redux/actions/mainFiltersActions";
+import {stationTypeFromName} from "utils/LOFARDefinitions";
// History handling
import { push } from 'connected-react-router';
-import { store } from "../redux/store.js";
+import { store } from "redux/store.js";
import DatePicker from 'react-datepicker';
import moment from 'moment';
-import MultiSelectDropdown from '../components/MultiSelectDropdown.js'
-import {AntennaIdsPerTypeStationType} from '../utils/LOFARDefinitions.js'
+import {AntennaIdsPerTypeStationType} from 'utils/LOFARDefinitions.js'
+
// CSS
-import './Toolbar.css'
+import styles from './styles.module.scss'
import 'react-datepicker/dist/react-datepicker.css';
@@ -77,7 +77,7 @@ class DateRangeSelectorC extends Component {
}
render() {
- return (<div className="toolbar-ctrl">
+ return (<div className={styles.toolbar_ctrl}>
<label>Period </label>
<ButtonGroup size="sm">
<Button color="info" onClick={() => this.onPeriodClick(7)} active={this.periodIsActive(7)}>1 wk</Button>
@@ -137,7 +137,7 @@ class TestTypeSelectorC extends Component {
}
render() {
- return (<div className="toolbar-ctrl">
+ return (<div className={styles.toolbar_ctrl}>
<label>Type </label>
<ButtonGroup size="sm">
<Button color="info" onClick={() => this.onTestTypeClick('B')} active={this.props.testType === 'B'}>BOTH</Button>
@@ -174,7 +174,7 @@ class AntennaTypeSelectorC extends Component {
}
render() {
- return (<div className="toolbar-ctrl">
+ return (<div className={styles.toolbar_ctrl}>
<label>Type </label>
<ButtonGroup size="sm">
<Button color="info" onClick={this.onAntennaTypeClick} active={this.props.antennaType === 'HBA'}>HBA</Button>
@@ -222,7 +222,7 @@ class AntennaIdSelectorC extends Component {
const options = this.antennaIdList(this.props.antennaType, stationType);
return (
- <div className="toolbar-ctrl">
+ <div className={styles.toolbar_ctrl}>
<label>Antenna id </label>
<Input type="select"
value={this.props.antennaId}
@@ -264,7 +264,7 @@ class ErrorTypesSelectorC extends Component {
render() {
const errorTypes = this.props.errorTypes.map(item => ({value:item, label:item}))
- return (<div className="toolbar-ctrl">
+ return (<div className={styles.toolbar_ctrl}>
<label>Error type </label>
<MultiSelectDropdown
className="form-input"
@@ -302,7 +302,7 @@ class StationGroupSelectorC extends Component {
}
render() {
- return (<div className="toolbar-ctrl">
+ return (<div className={styles.toolbar_ctrl}>
<label htmlFor="selected-group">Station group </label>
<select className="form-control custom-select custom-select-sm" id="selected-group"
value={this.props.selectedStationGroup}
@@ -341,7 +341,7 @@ class ErrorsOnlySelectorC extends Component {
render() {
return (
- <div className="toolbar-ctrl">
+ <div className={styles.toolbar_ctrl}>
<Button color="info" size="sm" onClick={this.onErrorsOnlyClick} active={this.props.errorsOnly}>
Errors only
</Button>
@@ -375,7 +375,7 @@ class PeriodSelectorC extends Component {
render() {
- return (<div className="toolbar-ctrl">
+ return (<div className={styles.toolbar_ctrl}>
<label>Period </label>
<ButtonGroup size="sm">
<Button color="info" onClick={() => this.onPeriodClick(7)} active={this.props.period === 7}>1 wk</Button>
@@ -400,7 +400,6 @@ const mapDispatchPeriodSelector = {
export const PeriodSelector = connect(mapStatePeriodSelector, mapDispatchPeriodSelector)(PeriodSelectorC);
-
/*
* Toolbar: the wrapper for all toolbar components. Use as:
* <Toolbar>
@@ -411,7 +410,10 @@ export const PeriodSelector = connect(mapStatePeriodSelector, mapDispatchPeriodS
*/
export function Toolbar(props) {
- return (<div className="toolbar-top">
+ return (<div className={styles.toolbar_top}>
{props.children}
</div>);
}
+
+
+export { StationAutoComplete } from './StationAutoComplete';
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/TestTypeSelector/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/TestTypeSelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1434fca822f8eabcac5a94758d0a5de205853846
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/TestTypeSelector/index.js
@@ -0,0 +1,419 @@
+import React, {Component} from 'react';
+import {connect} from "react-redux";
+import {Button, ButtonGroup, Input} from 'reactstrap';
+import {
+ setDateRange,
+ setTestType,
+ setErrorTypes,
+ setStationGroup,
+ setErrorsOnly,
+ setPeriod, setAntennaID,
+ setAntennaType
+} from "redux/actions/mainFiltersActions";
+import {stationTypeFromName} from "utils/LOFARDefinitions";
+// History handling
+import { push } from 'connected-react-router';
+import { store } from "redux/store.js";
+
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import {AntennaIdsPerTypeStationType} from 'utils/LOFARDefinitions.js'
+
+// CSS
+import styles from './styles.module.scss'
+import 'react-datepicker/dist/react-datepicker.css';
+
+
+/**
+ * Class to display a secondary header for selecting data filters.
+ * The state is managed by the LandingPage class.
+ */
+class DateRangeSelectorC extends Component {
+
+ handleChange(obj) {
+ var startDate = obj.startDate,
+ endDate = obj.endDate;
+
+ startDate = startDate || this.props.startDate;
+ endDate = endDate || this.props.endDate;
+
+ if (startDate.isAfter(endDate)) {
+ endDate = startDate;
+ }
+
+ this.props.setDateRange({
+ startDate: startDate,
+ endDate: endDate
+ });
+ };
+
+ handleChangeStart = (startDate) => {
+ return this.handleChange({
+ startDate: startDate
+ });
+ };
+
+ handleChangeEnd = (endDate) => {
+ return this.handleChange({
+ endDate: endDate
+ });
+ };
+
+ onPeriodClick = (i) => {
+ this.handleChange({
+ startDate: moment().subtract(i, 'days'),
+ endDate: moment()
+ });
+
+ }
+
+ periodIsActive(ndays) {
+ let now = moment().format("YYYY-MMM-DD"),
+ past = moment().subtract(ndays, 'days').format("YYYY-MMM-DD");
+ if (this.props.endDate.format("YYYY-MMM-DD") === now && this.props.startDate.format("YYYY-MMM-DD") === past) {
+ return true;
+ }
+ return false;
+ }
+
+ render() {
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Period </label>
+ <ButtonGroup size="sm">
+ <Button color="info" onClick={() => this.onPeriodClick(7)} active={this.periodIsActive(7)}>1 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(14)} active={this.periodIsActive(14)}>2 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(28)} active={this.periodIsActive(28)}>4 wk</Button>
+ </ButtonGroup>
+
+ <div style={{display: 'inline-block', width: '7em'}}>
+ <DatePicker
+ selected={this.props.startDate}
+ selectsStart
+ dateFormat="YYYY-MMM-DD"
+ className='form-control form-control-sm'
+ startDate={this.props.startDate}
+ endDate={this.props.endDate}
+ onChange={this.handleChangeStart}
+ />
+ </div>
+
+ <div style={{display: 'inline-block', width: '7em'}}>
+ <DatePicker
+ selected={this.props.endDate}
+ selectsEnd
+ dateFormat="YYYY-MMM-DD"
+ className='form-control form-control-sm'
+ startDate={this.props.startDate}
+ endDate={this.props.endDate}
+ onChange={this.handleChangeEnd}
+ />
+ </div>
+ </div>);
+ }
+}
+
+const mapStateDateRangeSelector = state => {
+ return {
+ startDate: state.mainFilters.startDate,
+ endDate: state.mainFilters.endDate
+ };
+};
+
+const mapDispatchDateRangeSelector = {
+ setDateRange
+};
+
+export const DateRangeSelector = connect(mapStateDateRangeSelector, mapDispatchDateRangeSelector)(DateRangeSelectorC);
+
+
+
+/**
+ * Radio buttons for Test Type
+ */
+class TestTypeSelectorC extends Component {
+
+ onTestTypeClick(type) {
+ this.props.setTestType(type);
+ }
+
+ render() {
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Type </label>
+ <ButtonGroup size="sm">
+ <Button color="info" onClick={() => this.onTestTypeClick('B')} active={this.props.testType === 'B'}>BOTH</Button>
+ <Button color="info" onClick={() => this.onTestTypeClick('S')} active={this.props.testType === 'S'}>ST-TEST</Button>
+ <Button color="info" onClick={() => this.onTestTypeClick('R')} active={this.props.testType === 'R'}>RTSM</Button>
+ </ButtonGroup>
+ </div>);
+ }
+}
+
+const mapStateTestTypeSelector = state => {
+ return {
+ testType: state.mainFilters.testType
+ };
+};
+
+const mapDispatchTestTypeSelector = {
+ setTestType
+};
+
+export const TestTypeSelector = connect(mapStateTestTypeSelector, mapDispatchTestTypeSelector)(TestTypeSelectorC);
+
+
+/**
+ * Radio buttons for Antenna Type
+ */
+class AntennaTypeSelectorC extends Component {
+
+ onAntennaTypeClick = (e) => {
+ let type = e.currentTarget.innerHTML;
+ //this.props.setAntennaType(type);
+
+ store.dispatch(push(`?antenna_type=${type}`))
+ }
+
+ render() {
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Type </label>
+ <ButtonGroup size="sm">
+ <Button color="info" onClick={this.onAntennaTypeClick} active={this.props.antennaType === 'HBA'}>HBA</Button>
+ <Button color="info" onClick={this.onAntennaTypeClick} active={this.props.antennaType === 'LBH'}>LBH</Button>
+ <Button color="info" onClick={this.onAntennaTypeClick} active={this.props.antennaType === 'LBL'}>LBL</Button>
+ </ButtonGroup>
+ </div>);
+ }
+}
+
+const mapStateAntennaTypeSelector = state => {
+ return {
+ antennaType: state.mainFilters.antennaType
+ };
+};
+
+const mapDispatchAntennaTypeSelector = {
+ setAntennaType
+};
+
+export const AntennaTypeSelector = connect(mapStateAntennaTypeSelector, mapDispatchAntennaTypeSelector)(AntennaTypeSelectorC);
+
+
+/**
+ * Radio buttons for Antenna Id
+ */
+class AntennaIdSelectorC extends Component {
+
+ antennaIdList(type, stationType){
+ const antennaIdRange = AntennaIdsPerTypeStationType[stationType][type];
+ let options = [];
+ for(let i=antennaIdRange.start; i<antennaIdRange.end; i++){
+ options.push(<option key={i} value={i}>{i}</option>);
+ }
+ return options
+ }
+ onSelectedAntenna = (e) => {
+ //this.props.setAntennaID(Number(e.target.value));
+ store.dispatch(push(`?antenna_id=${e.target.value}`))
+ };
+
+ render() {
+ const stationType = stationTypeFromName(this.props.selectedStation);
+
+ const options = this.antennaIdList(this.props.antennaType, stationType);
+
+ return (
+ <div className={styles.toolbar_ctrl}>
+ <label>Antenna id </label>
+ <Input type="select"
+ value={this.props.antennaId}
+ onChange={this.onSelectedAntenna}
+ bsSize="sm"
+ style={{display:"inline-block", width:"auto"}}>
+ {options}
+ </Input>
+ </div>);
+ }
+
+}
+
+const mapStateAntennaIdSelector = state => {
+ return {
+ selectedStation: state.mainFilters.selectedStation,
+ antennaId: state.mainFilters.antennaId,
+ antennaType: state.mainFilters.antennaType
+ };
+};
+
+const mapDispatchAntennaIdSelector = {
+ setAntennaID
+};
+
+export const AntennaIdSelector = connect(mapStateAntennaIdSelector, mapDispatchAntennaIdSelector)(AntennaIdSelectorC);
+
+
+/**
+ * Class to display a secondary header for selecting data filters.
+ * The state is managed by the LandingPage class.
+ */
+class ErrorTypesSelectorC extends Component {
+
+ onSelectionErrorTypes = (errorTypes) => {
+ this.props.setErrorTypes(errorTypes)
+ }
+
+ render() {
+ const errorTypes = this.props.errorTypes.map(item => ({value:item, label:item}))
+
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Error type </label>
+ <MultiSelectDropdown
+ className="form-input"
+ placeHolder="All"
+ options={errorTypes}
+ selectedItems={this.props.selectedErrorTypes}
+ onSelectionChange={this.onSelectionErrorTypes}
+ />
+ </div>);
+ }
+}
+
+const mapStateErrorTypesSelector = state => {
+ return {
+ selectedErrorTypes: state.mainFilters.selectedErrorTypes,
+ errorTypes: state.appInitData.errorTypes
+ };
+};
+
+const mapDispatchErrorTypesSelector = {
+ setErrorTypes
+};
+
+export const ErrorTypesSelector = connect(mapStateErrorTypesSelector, mapDispatchErrorTypesSelector)(ErrorTypesSelectorC);
+
+
+
+/*
+ *
+ */
+class StationGroupSelectorC extends Component {
+
+ onStationGroupChange = (e) => {
+ this.props.setStationGroup(e.target.value);
+ }
+
+ render() {
+ return (<div className={styles.toolbar_ctrl}>
+ <label htmlFor="selected-group">Station group </label>
+ <select className="form-control custom-select custom-select-sm" id="selected-group"
+ value={this.props.selectedStationGroup}
+ onChange={this.onStationGroupChange}
+ style={{ width: 'auto' }}>
+ <option value="A">All stations</option>
+ <option value="C">Core stations</option>
+ <option value="R">Remote stations</option>
+ <option value="I">ILT stations</option>
+ </select>
+ </div>);
+ }
+}
+
+const mapStateStationGroupSelector = state => {
+ return {
+ selectedStationGroup: state.mainFilters.selectedStationGroup
+ };
+};
+
+const mapDispatchStationGroupSelector = {
+ setStationGroup
+};
+
+export const StationGroupSelector = connect(mapStateStationGroupSelector, mapDispatchStationGroupSelector)(StationGroupSelectorC);
+
+
+/*
+ * Toggle button for "errorsOnly"
+ */
+class ErrorsOnlySelectorC extends Component {
+
+ onErrorsOnlyClick = () => {
+ this.props.setErrorsOnly(!this.props.errorsOnly);
+ }
+
+ render() {
+ return (
+ <div className={styles.toolbar_ctrl}>
+ <Button color="info" size="sm" onClick={this.onErrorsOnlyClick} active={this.props.errorsOnly}>
+ Errors only
+ </Button>
+ </div>);
+ }
+}
+
+const mapStateErrorsOnlySelector = state => {
+ return {
+ errorsOnly: state.mainFilters.errorsOnly
+ };
+};
+
+const mapDispatchErrorsOnlySelector = {
+ setErrorsOnly
+};
+
+export const ErrorsOnlySelector = connect(mapStateErrorsOnlySelector, mapDispatchErrorsOnlySelector)(ErrorsOnlySelectorC);
+
+
+
+/**
+ * Class to display a secondary header for selecting data filters.
+ * The state is managed by the LandingPage class.
+ */
+class PeriodSelectorC extends Component {
+
+ onPeriodClick(i) {
+ this.props.setPeriod(i);
+ }
+
+ render() {
+
+ return (<div className={styles.toolbar_ctrl}>
+ <label>Period </label>
+ <ButtonGroup size="sm">
+ <Button color="info" onClick={() => this.onPeriodClick(7)} active={this.props.period === 7}>1 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(14)} active={this.props.period === 14}>2 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(21)} active={this.props.period === 21}>3 wk</Button>
+ <Button color="info" onClick={() => this.onPeriodClick(28)} active={this.props.period === 28}>4 wk</Button>
+ </ButtonGroup>
+ </div>);
+ }
+}
+
+const mapStatePeriodSelector = state => {
+ return {
+ period: state.mainFilters.period
+ };
+};
+
+const mapDispatchPeriodSelector = {
+ setPeriod
+};
+
+export const PeriodSelector = connect(mapStatePeriodSelector, mapDispatchPeriodSelector)(PeriodSelectorC);
+
+
+/*
+ * Toolbar: the wrapper for all toolbar components. Use as:
+ * <Toolbar>
+ * <StationAutoComplete />
+ * <TestTypeSelector />
+ * <..>
+ * </Toolbar>
+ */
+export function Toolbar(props) {
+
+ return (<div className={styles.toolbar_top}>
+ {props.children}
+ </div>);
+}
+
+
+export { StationAutoComplete } from './StationAutoComplete';
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e05205b933384ad5ef0e7b651b2ffead9b98c762
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+// CSS
+import styles from './styles.module.scss'
+
+
+/*
+ * Toolbar: the wrapper for all toolbar components. Use as:
+ * <Toolbar>
+ * <StationAutoComplete />
+ * <TestTypeSelector />
+ * <..>
+ * </Toolbar>
+ */
+export function Toolbar(props) {
+
+ return (<div className={styles.toolbar_top}>
+ {props.children}
+ </div>);
+}
+
+
+export { AntennaIdSelector } from './AntennaIdSelector';
+export { AntennaTypeSelector } from './AntennaTypeSelector';
+export { DateRangeSelector } from './DateRangeSelector';
+export { ErrorTypesSelector } from './ErrorTypesSelector';
+export { ErrorsOnlySelector } from './ErrorsOnlySelector';
+export { PeriodSelector } from './PeriodSelector';
+export { StationAutoComplete } from './StationAutoComplete';
+export { StationGroupSelector } from './StationGroupSelector';
+export { TestTypeSelector } from './TestTypeSelector';
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/styles.module.css
similarity index 57%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.css
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/styles.module.css
index ad6dc8f2444266c9f8b7fd79ad3da630df61288d..b8ca7468f979ddd5bb2a4dbb22e9e5a95bd332bd 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/styles.module.css
@@ -3,40 +3,38 @@
/* font color */
/* font color */
/* Data colors */
-.toolbar-top {
+:local .toolbar_top {
background-color: #4a6889;
color: #ffffff;
padding: 5px 10px;
/* Note: same padding as ResponsiveGridLayout */
width: 100%;
- overflow: visible; }
-
-.toolbar-top {
+ overflow: visible;
font-weight: 500; }
-.toolbar-top .btn-info:not(:disabled):not(.disabled).active,
-.sts-toolbar .btn-info:not(:disabled):not(.disabled).active,
-.toolbar-top .btn-info:not(:disabled):not(.disabled):active,
-.toolbar-top .show > .btn-info.dropdown-toggle {
+:local .toolbar_top :global .btn-info:not(:disabled):not(.disabled).active,
+:local .toolbar_top :global .btn-info:not(:disabled):not(.disabled):active,
+:local .toolbar_top :global .show > .btn-info.dropdown-toggle {
color: white;
background-color: #86868a;
border-color: #86868a; }
-.toolbar-top .btn-info,
-.sts-toolbar .btn-info {
+:local .toolbar_top :global .btn-info {
color: white;
background-color: #b6b6ba;
border-color: #b6b6ba; }
-.toolbar-top .btn-info:hover,
-.sts-toolbar .btn-info:hover {
+:local .toolbar_top :global .btn-info:hover {
color: white;
background-color: #86868a;
border-color: #86868a; }
-.react-datepicker-popper {
- z-index: 2 !important; }
-
-.toolbar-ctrl {
+:local .toolbar_ctrl {
display: inline-block;
margin-right: 1em; }
+
+/*
+ * Global overrides
+ */
+:global .react-datepicker-popper {
+ z-index: 2 !important; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/styles.module.scss
similarity index 53%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.scss
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/styles.module.scss
index 050a6d5954be21965c598b77519a4a12954eda6a..39a5f2d6a50a1bfd21ed22b423d947733a6c4970 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/styles.module.scss
@@ -1,44 +1,44 @@
-@import '../themes/lofar-variables.scss';
+@import '../../themes/lofar-variables.scss';
+// TODO check if we want to override bootstrap classes globally
-.toolbar-top {
+:local .toolbar_top {
background-color: $primary-light;
color: $primary-color;
padding: 5px 10px; /* Note: same padding as ResponsiveGridLayout */
width: 100%;
overflow: visible;
-}
-
-.toolbar-top {
font-weight: 500;
}
-.toolbar-top .btn-info:not(:disabled):not(.disabled).active,
-.sts-toolbar .btn-info:not(:disabled):not(.disabled).active,
-.toolbar-top .btn-info:not(:disabled):not(.disabled):active,
-.toolbar-top .show>.btn-info.dropdown-toggle {
+:local .toolbar_top :global .btn-info:not(:disabled):not(.disabled).active,
+:local .toolbar_top :global .btn-info:not(:disabled):not(.disabled):active,
+:local .toolbar_top :global .show>.btn-info.dropdown-toggle {
color: $secondary-color;
background-color: $secondary-dark;
border-color: $secondary-dark;
}
-.toolbar-top .btn-info,
-.sts-toolbar .btn-info {
+:local .toolbar_top :global .btn-info {
color: $secondary-color;
background-color: $secondary;
border-color: $secondary;
}
-.toolbar-top .btn-info:hover,
-.sts-toolbar .btn-info:hover {
+:local .toolbar_top :global .btn-info:hover {
color: $secondary-color;
background-color: $secondary-dark;
border-color: $secondary-dark;
}
-.react-datepicker-popper {
- z-index: 2 !important;
-}
-.toolbar-ctrl {
+:local .toolbar_ctrl {
display: inline-block;
margin-right: 1em;
}
+
+/*
+ * Global overrides
+ */
+
+:global .react-datepicker-popper {
+ z-index: 2 !important;
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css
deleted file mode 100644
index 504f1c3657d8fc1676916b406bac7dd4679edd07..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/* COLORS */
-/* Color palette interface (created with https://material.io/tools/color/) */
-/* font color */
-/* font color */
-/* Data colors */
-.header-navbar.navbar {
- background-color: #1c3e5c;
- padding: .3rem 1rem;
- color: white; }
-
-.header-brand em {
- font-weight: bold;
- font-style: normal; }
-
-.header-brand span {
- color: #86868a;
- font-size: 1.5rem;
- font-style: italic; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js
deleted file mode 100644
index bc1daa61bf8fb50dd1da8380f4ee3d4d84b773b5..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { Collapse,
- Nav,
- NavbarToggler,
- Navbar,
- NavbarBrand,
- NavItem,
- NavLink } from 'reactstrap';
-
-// CSS
-import './header.scss'
-
-
-class Header extends Component {
-
- state = {
- isOpen: false
- }
-
- toggle = () => {
- this.setState({
- isOpen:!this.state.isOpen
- });
- }
-
- check_status(item){
- //console.log(this.props.active_page.pathname)
- if (this.props.active_page.pathname === item){
- return "active"
- }
- }
-
- render() {
- return (
- <Navbar className="header-navbar" dark expand="lg">
- <NavbarBrand className='header-brand'><h1><em>LOFAR</em> Station monitor <span>v0.1</span></h1></NavbarBrand>
- <NavbarToggler onClick={this.toggle} />
- <Collapse isOpen={this.state.isOpen} navbar>
- <Nav className="ml-auto" navbar>
- <NavItem className={this.check_status("/")}>
- <NavLink tag={Link} to="/"><h3>Dashboard</h3></NavLink>
- </NavItem>
- <NavItem className={this.check_status("/station_overview")}>
- <NavLink tag={Link} to="/station_overview"><h3>Station Overview</h3></NavLink>
- </NavItem>
- <NavItem className={this.check_status("/tiles")}>
- <NavLink tag={Link} to="/tiles"><h3>Tiles</h3></NavLink>
- </NavItem>
- { /*}
- <NavItem className={this.check_status("/details")}>
- <NavLink tag={Link} to="/details"><h3>Details</h3></NavLink>
- </NavItem>
- */ }
- </Nav>
- </Collapse>
- </Navbar>);
- }
-}
-
-export default Header;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/DetailsPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/DetailsPage.js
deleted file mode 100644
index 047689ab7e1dba2e6b74bdd050c6a8b14bb242f1..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/DetailsPage.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { Component } from 'react';
-import Header from '../components/header.js'
-
-class DetailsPage extends Component {
-
- render() {
-
- return (
- <div>
- <Header active_page={this.props.location} />
- <div>Details Overview!</div>
- </div>
- );
- }
-}
-
-export default DetailsPage;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/index.js
similarity index 93%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/index.js
index 8bd24331a9b1fed54c786e8e68bbc650cc50ae14..b92e6a0058e10580e33123c2e97da465688a16da 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/index.js
@@ -1,13 +1,13 @@
import React, { Component } from 'react';
import { Table, Tooltip } from 'reactstrap';
-import { unique_id } from '../utils/utils.js'
-import AutoLoadWrapper from '../utils/autoLoader.js'
+import { unique_id } from 'utils/utils.js'
+import AutoLoadWrapper from 'components/AutoLoadWrapper'
import * as moment from 'moment';
-import { datetime_format } from '../utils/constants'
-import { highlightClass, unHighlightClass } from '../utils/highlightClass'
-import ObservationInspectTag from './ObservationInspectTag.js'
+import { datetime_format } from 'utils/constants'
+import { highlightClass, unHighlightClass } from 'utils/highlightClass'
+import ObservationInspectTag from 'components/ObservationInspectTag.js'
// CSS
-import './LatestObservations.css'
+import './styles.module.scss'
/**
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/styles.module.scss
similarity index 76%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/styles.module.scss
index d1199fbe15d96ead401f3bc8d3678f7ac038afde..3bc30f9c08e977f8309410d7e26e1090ca0108c0 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../themes/lofar-variables.scss';
+@import '../../../../themes/lofar-variables.scss';
.hoverable {
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/index.js
similarity index 97%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/index.js
index d61e96a4f824764cc59971de04c8cf6e6699f172..eb641e00543638ea046c42b9b7403420815646b0 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/index.js
@@ -1,13 +1,13 @@
import React, {Component, PureComponent} from 'react';
import {withRouter} from "react-router";
import {Table, Popover, PopoverHeader, PopoverBody} from 'reactstrap';
-import {unique_id} from '../utils/utils.js'
-import AutoLoadWrapper from '../utils/autoLoader.js'
+import {unique_id} from 'utils/utils.js'
+import AutoLoadWrapper from 'components/AutoLoadWrapper'
import * as moment from 'moment';
-import { datetime_format } from '../utils/constants'
+import { datetime_format } from 'utils/constants'
// CSS
-import './StationOverview.css'
+import './styles.module.scss'
/**
* Badge; class to render a badge with label and pill.
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/styles.module.scss
similarity index 96%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.scss
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/styles.module.scss
index 3997fddaefd41b8483d319f88e83315327157938..0faf3c494cc2cd616d0193e3a80545d47228fda0 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../themes/lofar-variables.scss';
+@import '../../../../themes/lofar-variables.scss';
.so {
font-weight: 600 !important;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationStatistics/index.js
similarity index 98%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationStatistics/index.js
index 9fd2a6e3d046d0f0f83c7cf4f3b27f657d57458d..7b61864ea77d6d527472c39735319946efbd34c7 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationStatistics/index.js
@@ -1,5 +1,5 @@
import React, {Component} from 'react';
-import AutoLoadWrapper from '../utils/autoLoader.js'
+import AutoLoadWrapper from 'components/AutoLoadWrapper'
import ReactVegaLite from 'react-vega-lite'
import {
Navbar,
@@ -9,7 +9,7 @@ import {
NavbarBrand
} from 'reactstrap';
import {connect} from 'react-redux';
-import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from '../redux/actions/landingPageActions'
+import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from 'redux/actions/landingPageActions'
class ToolBarC extends Component {
constructor(props){
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/index.js
similarity index 96%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/index.js
index ccd0605aca97e0709674aa70b6df9b1599341dd4..9cc8d9741c8be32fd87beea160fefcf666c375c9 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/index.js
@@ -1,16 +1,16 @@
import React, { Component } from 'react';
import { connect } from "react-redux";
import { Table, Button } from 'reactstrap';
-import { unique_id } from '../utils/utils.js'
-import { componentErrorTypes } from '../utils/constants.js'
-import AutoLoadWrapper from '../utils/autoLoader.js'
+import { unique_id } from 'utils/utils.js'
+import { componentErrorTypes } from 'utils/constants.js'
+import AutoLoadWrapper from 'components/AutoLoadWrapper'
import * as moment from 'moment';
-import { date_format, time_format } from '../utils/constants'
+import { date_format, time_format } from 'utils/constants'
//import stdata from '../testdata/station_test_summary.js'
// CSS
-import './StationTestSummary.css'
+import './styles.module.scss'
/**
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/styles.module.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/styles.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..74466a9233dba71bd3cfc2e225ba045e8dfc24e7
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/styles.module.scss
@@ -0,0 +1,46 @@
+@import '../../../../themes/lofar-variables.scss';
+
+.sts-toolbar {
+ position: absolute;
+ right: 0.5rem;
+ top: 0.1rem;
+ display: inline-block;
+}
+
+.sts-toolbar .btn-info:not(:disabled):not(.disabled).active {
+ color: $secondary-color;
+ background-color: $secondary-dark;
+ border-color: $secondary-dark;
+}
+
+.sts-toolbar .btn-info {
+ color: $secondary-color;
+ background-color: $secondary;
+ border-color: $secondary;
+}
+
+.sts-toolbar .btn-info:hover {
+ color: $secondary-color;
+ background-color: $secondary-dark;
+ border-color: $secondary-dark;
+}
+
+
+.sts-table {
+ width: auto!important;
+ text-align: center;
+ font-size: .9rem;
+}
+
+.sts-table th {
+ word-break: break-all;
+ min-width: 3em;
+}
+
+.sts-table td {
+ text-align: center;
+}
+
+.sts-table.table-sm td, .sts-table.table-sm th {
+ padding: .2rem;
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/index.js
similarity index 88%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/index.js
index fab99a8ad74b55a98f47719114ace6126ae3ef7f..6cc42aff94aa183c0b7f2f0b2f9102ee46662451 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/index.js
@@ -1,23 +1,23 @@
import React, {Component} from 'react';
-import Header from '../components/header.js'
+import Header from 'components/Header'
-import StationOverview from '../components/StationOverview.js';
-import StationTestSummary from '../components/StationTestSummary.js';
-import LatestObservations from '../components/LatestObservations.js';
-import StationStatistics from '../components/StationStatistics.js';
+import StationOverview from './components/StationOverview';
+import StationTestSummary from './components/StationTestSummary';
+import LatestObservations from './components/LatestObservations';
+import StationStatistics from './components/StationStatistics';
import {Responsive, WidthProvider} from 'react-grid-layout';
import * as moment from 'moment';
import { connect } from "react-redux";
-import { setNewLayout } from "../redux/actions/landingPageActions";
-import { composeQueryString } from '../utils/utils.js';
-import { createGridPanel } from '../utils/grid.js';
-import { Toolbar, StationGroupSelector, ErrorTypesSelector, ErrorsOnlySelector, PeriodSelector } from '../components/Toolbar'
+import { setNewLayout } from "redux/actions/landingPageActions";
+import { composeQueryString } from 'utils/utils.js';
+import { createGridPanel } from 'utils/grid.js';
+import { Toolbar, StationGroupSelector, ErrorTypesSelector, ErrorsOnlySelector, PeriodSelector } from 'components/Toolbar'
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
-import '../themes/lofar-styles.css';
+import 'themes/lofar-styles.css';
const ResponsiveGridLayout = WidthProvider(Responsive);
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/RTSMPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/RTSMPage.js
deleted file mode 100644
index 44f33298742bcfb1b1e903e2332410edbd1113c0..0000000000000000000000000000000000000000
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/RTSMPage.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React, { Component } from 'react';
-
-class RTSMPage extends Component {
- render() {
- return (
- <div>RTSM</div>
- );
- }
-}
-
-export default RTSMPage;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/index.js
similarity index 96%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/index.js
index 679263de7c633c9e8028d472726985f9ae18794c..75e92bf85a63ea5a0add3069227375f7e5205ea8 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/index.js
@@ -1,13 +1,14 @@
import React, {Component} from 'react';
import {connect} from "react-redux";
-import {unpinChildPanelData} from '../redux/actions/stationOverviewPageActions'
+import {unpinChildPanelData} from 'redux/actions/stationOverviewPageActions'
import {Badge, Button, Modal, ModalBody, ModalHeader, Table} from 'reactstrap';
import {IoMdCloseCircleOutline as CloseIcon} from 'react-icons/io';
-import './StationOverview.css'
-import './StationTestView.css'
-import '../themes/lofar-styles.css'
+
+//import './StationOverview.css'
+//import './StationTestView.css'
+import 'themes/lofar-styles.css'
// CSS
-import './StationTestChildView.css';
+import './styles.module.scss';
class StationTestChildViewC extends Component {
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/styles.module.scss
similarity index 73%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.scss
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/styles.module.scss
index 72e949dee621482cf79152d61fa331d3a0be851b..0c7954fea3e131d4c2773ba5c554ed631f9b2b0c 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../themes/lofar-variables.scss';
+@import '../../../../themes/lofar-variables.scss';
.stcv-header {
padding: .5rem 0;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js
similarity index 96%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js
index 60824482bf264510ed02871cc4be2b72fc9c4068..fa7f5ef701ad811e03c33f2ea01c7b1863321e43 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js
@@ -2,7 +2,7 @@ import React, {
Component
} from 'react';
import {connect} from "react-redux";
-import {setChildPanelData} from '../redux/actions/stationOverviewPageActions'
+import {setChildPanelData} from 'redux/actions/stationOverviewPageActions'
import {
Badge,
NavItem,
@@ -12,21 +12,21 @@ import {
Nav
} from 'reactstrap';
import {IoMdArrowDropdown as DropDownIcon} from 'react-icons/io';
-import AutoLoadWrapper from '../utils/autoLoader.js'
-import * as LOFARDefinitions from '../utils/LOFARDefinitions'
-import {datetime_format} from '../utils/constants'
-import {renderDateRange} from '../utils/utils'
+import AutoLoadWrapper from 'components/AutoLoadWrapper'
+import * as LOFARDefinitions from 'utils/LOFARDefinitions'
+import {datetime_format} from 'utils/constants'
+import {renderDateRange} from 'utils/utils'
import ReactTableContainer from "react-table-container";
import moment from 'moment';
import {withRouter} from "react-router";
import classNames from "classnames";
-import FillHeight from '../components/FillHeight.js';
+import FillHeightDiv from 'components/FillHeightDiv';
// CSS
-import '../themes/lofar-styles.css';
-import './StationOverview.css';
-import './StationTestView.css';
+//import 'themes/lofar-styles.css';
+//import './StationOverview.css';
+import './styles.module.scss';
class GenericStatusTdC extends Component {
@@ -445,7 +445,7 @@ class StationTestViewC extends Component {
)
}
</Nav>
- <FillHeight className="border-right">
+ <FillHeightDiv className="border-right">
{ ({height}) => (
<TabContent activeTab={this.state.activeTab}>
{componentTypes.map((componentType, key) =>
@@ -461,7 +461,7 @@ class StationTestViewC extends Component {
)}
</TabContent>
)}
- </FillHeight>
+ </FillHeightDiv>
</div>);
}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/styles.module.scss
similarity index 95%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/styles.module.scss
index 31c17f5985150fdcb3c2d6d3642e3db82565db34..ba75f7d6d1554ffec57c77e5950c88e276e482c5 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/styles.module.scss
@@ -1,4 +1,6 @@
-@import '../themes/lofar-variables.scss';
+@import '../../../../themes/lofar-variables.scss';
+
+//@import '../../../../components/StationOverview.scss';
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js
similarity index 86%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js
index 36cdae18940b23258fb11bd201dd12cd685ed968..d43050b541e42c8efbb3855a77c3b477b6e20209 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js
@@ -3,12 +3,11 @@ import {connect} from "react-redux";
import {Alert, Container, Row, Col} from 'reactstrap';
import moment from 'moment';
-import Header from '../components/header.js'
-import StationAutoComplete from '../components/StationAutoComplete';
-import StationTestView from '../components/StationTestView';
-import StationTestChildView from '../components/StationTestChildView';
-import { composeQueryString } from '../utils/utils.js';
-import { Toolbar, DateRangeSelector, TestTypeSelector, ErrorTypesSelector } from '../components/Toolbar'
+import Header from 'components/Header'
+import StationTestView from './components/StationTestView';
+import StationTestChildView from './components/StationTestChildView';
+import { composeQueryString } from 'utils/utils.js';
+import { Toolbar, StationAutoComplete, DateRangeSelector, TestTypeSelector, ErrorTypesSelector } from 'components/Toolbar'
/*
* Display an Alert
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js
similarity index 97%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js
index c0766214a0e77550525a9f0c3d37b1c9cde89ca5..062809bb5160452994cedee40156b5a9af268c73 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js
@@ -17,9 +17,9 @@ import {
Col
} from 'reactstrap';
import { IoMdCloseCircleOutline as CloseIcon} from 'react-icons/io';
-import {pinAntennaError, selectAntennaError} from '../redux/actions/antennaOverviewPageActions';
-import {LOFARTESTS} from '../utils/LOFARDefinitions';
-import {datetime_format} from '../utils/constants';
+import {pinAntennaError, selectAntennaError} from 'redux/actions/antennaOverviewPageActions';
+import {LOFARTESTS} from 'utils/LOFARDefinitions';
+import {datetime_format} from 'utils/constants';
import {connect} from "react-redux";
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/index.js
similarity index 95%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/index.js
index 9fe8768a0c929773dda40cf8ad24fb8f23a9e4ef..6da9191d116a4cb396acefa3712508000100da1c 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaView.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/index.js
@@ -3,21 +3,21 @@ import React, {
} from 'react';
import ReactTableContainer from 'react-table-container';
-import AutoLoadWrapper from '../utils/autoLoader.js';
+import AutoLoadWrapper from 'components/AutoLoadWrapper';
import {connect} from 'react-redux';
-import {componentErrorTypes, datetime_format} from "../utils/constants.js";
+import {componentErrorTypes, datetime_format} from "utils/constants.js";
import moment from 'moment';
import { IoMdArrowDropdown as DropDownIcon} from 'react-icons/io';
+import FillHeightDiv from 'components/FillHeightDiv';
-import {selectAntennaError, pinAntennaError} from '../redux/actions/antennaOverviewPageActions';
-import {renderDateRange} from '../utils/utils';
+import {selectAntennaError, pinAntennaError} from 'redux/actions/antennaOverviewPageActions';
+import {renderDateRange} from 'utils/utils';
import classnames from 'classnames';
// CSS
-import './StationOverview.scss';
-import './StationTestView.scss';
-import FillHeight from './FillHeight.js';
+//import './StationOverview.scss';
+//import './StationTestView.scss';
class GenericStatusC extends Component {
@@ -125,7 +125,7 @@ class AntennaErrorLineC extends Component {
</React.Fragment>);
}
-
+
composeTestLine(data) {
let line = [];
@@ -320,7 +320,7 @@ class AntennaViewC extends Component {
}
render() {
-
+
const jsx = (
<ReactTableContainer width="100%" height={this.props.height+'px'}>
<table className="stv-table table-sm table-hover table-bordered">
@@ -335,9 +335,9 @@ class AntennaViewC extends Component {
const AntennaViewContent = function(props){
return (
- <FillHeight className="border-right">
+ <FillHeightDiv className="border-right">
{ ({height}) => <AntennaViewC {...props} height={height} />}
- </FillHeight>
+ </FillHeightDiv>
)
}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/index.js
similarity index 84%
rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage.js
rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/index.js
index 43eabbd06801579f4a781667db46c262d5461728..055b1884b24ebebc7e8c919f1c4b840be5814ab5 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/index.js
@@ -1,13 +1,12 @@
import React, { Component } from 'react';
-import Header from '../components/header.js'
+import Header from 'components/Header'
import moment from 'moment'
import {connect} from "react-redux";
-import StationAutoComplete from '../components/StationAutoComplete';
-import { Toolbar, DateRangeSelector, TestTypeSelector, AntennaTypeSelector, AntennaIdSelector } from '../components/Toolbar'
+import { Toolbar, StationAutoComplete, DateRangeSelector, TestTypeSelector, AntennaTypeSelector, AntennaIdSelector } from 'components/Toolbar'
import {Alert, Container, Col, Row} from "reactstrap";
-import { composeQueryString } from '../utils/utils.js';
-import AntennaErrorDetails from '../components/AntennaErrorDetails'
-import AntennaView from '../components/AntennaView';
+import { composeQueryString } from 'utils/utils.js';
+import AntennaErrorDetails from './components/AntennaErrorDetails'
+import AntennaView from './components/AntennaView';
// Component to display an alert
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
index 3a0c2bded0cb8179f7727639a6d37e2cfcd3716c..1493df8336d788818e5843c59525468facb7b9eb 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
@@ -30,30 +30,6 @@ img {
.react-grid-item > .react-resizable-handle::after {
border-color: #bce8f1; }
-.autoloader-container {
- position: relative;
- height: 100%; }
-
-/* autoLoader; CSS spinner*/
-.autoloader-loading {
- position: absolute;
- top: 2.25em;
- /* Check with height of .react-grid-item-header */
- left: 0.25em;
- border: 0.55rem solid #e8e8ec;
- border-top: 0.55rem solid #4a6889;
- border-radius: 50%;
- width: 3rem;
- height: 3rem;
- animation: spin 2s linear infinite;
- z-index: 1000; }
-
-@keyframes spin {
- 0% {
- transform: rotate(0deg); }
- 100% {
- transform: rotate(360deg); } }
-
/* Reacstrap only support sm, md and lg */
.btn-group-xs > .btn,
.btn.btn-xs {
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
index a06cfc16b5fc08b0b54b81b4d4e37317f9cd0a84..94479b2e6f91f8805e3a50fb5fe0718df46b9667 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
@@ -39,29 +39,6 @@ $griditem-color: $secondary-dark;
}
-.autoloader-container {
- position: relative;
- height: 100%;
-}
-/* autoLoader; CSS spinner*/
-.autoloader-loading {
- position: absolute;
- top: 2.25em; /* Check with height of .react-grid-item-header */
- left: 0.25em;
- border: .55rem solid $secondary-light;
- border-top: .55rem solid $primary-light;
- border-radius: 50%;
- width: 3rem;
- height: 3rem;
- animation: spin 2s linear infinite;
- z-index: 1000;
-}
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-
/* Reacstrap only support sm, md and lg */
.btn-group-xs>.btn,
.btn.btn-xs {
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
index aab891291b8281dacb619f0553f7465bc3fde7de..f9fa8399cc2d2dc2500ce735fadba5ee413dc866 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
@@ -6349,30 +6349,6 @@ img {
.react-grid-item > .react-resizable-handle::after {
border-color: #bce8f1; }
-.autoloader-container {
- position: relative;
- height: 100%; }
-
-/* autoLoader; CSS spinner*/
-.autoloader-loading {
- position: absolute;
- top: 2.25em;
- /* Check with height of .react-grid-item-header */
- left: 0.25em;
- border: 0.55rem solid #e8e8ec;
- border-top: 0.55rem solid #4a6889;
- border-radius: 50%;
- width: 3rem;
- height: 3rem;
- animation: spin 2s linear infinite;
- z-index: 1000; }
-
-@keyframes spin {
- 0% {
- transform: rotate(0deg); }
- 100% {
- transform: rotate(360deg); } }
-
/* Reacstrap only support sm, md and lg */
.btn-group-xs > .btn,
.btn.btn-xs {