diff --git a/.gitattributes b/.gitattributes
index 162fbbac747589815fffd80371313787a5b763fd..e058e83d793d92f661a53cb2ca6e12087978e66e 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1874,6 +1874,8 @@ LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationTestPage.js -tex
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actions.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/appInitData.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/appInitData.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js -text
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/store.js -text
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json b/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json
index 6a6ea76fff9e4129e26eb23f969668a8defbc2be..359fa9b94b121133f8529fe354a267caab85d457 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json
@@ -33,6 +33,7 @@
"react-vega-lite": "^2.0.2",
"reactstrap": "^6.3.1",
"redux": "^4.0.1",
+ "redux-thunk": "^2.3.0",
"vega": "^4.3.0",
"vega-lite": "^2.6.0"
},
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
index 9ab0dca7a238a464cb1bae5fdcf3842f4e69caa9..9d19c0c0910340e462ee3fcca1f74377984a9d20 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
@@ -3,9 +3,12 @@ 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 Header from './components/header.js'
+import { connect } from "react-redux";
+import { fetchErrorTypes } from "./redux/actions/appInitData.js";
+
+
import './App.css';
import {
BrowserRouter as Router,
@@ -15,11 +18,16 @@ import {
-class App extends Component {
+class AppC extends Component {
constructor(props){
super(props);
}
+
+ componentDidMount( ) {
+ this.props.dispatch(fetchErrorTypes());
+ }
+
render(){
console.log(this.props.location);
return (
@@ -35,4 +43,6 @@ class App extends Component {
}
}
+const App = connect()(AppC);
+
export default App;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js
index 0c02eef6134a71cde45c17ff75f11d78cb9bb7fc..96488ac58939409c549fc264cc11334a27e09c9a 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js
@@ -1,4 +1,5 @@
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'
@@ -34,13 +35,14 @@ class Badge extends Component {
/**
* StationTestBadge; class to render one stationtest badge in the SORow.
*/
-class StationTestBadge extends Component {
+class StationTestBadgeC extends Component {
constructor(props) {
super(props);
this.id = unique_id();
this.togglePopover = this.togglePopover.bind(this);
+ this.onClick = this.onClick.bind(this);
this.state = {
popoverOpen: false
};
@@ -118,6 +120,9 @@ class StationTestBadge extends Component {
}
}
+ const StationTestBadge = withRouter(StationTestBadgeC);
+
+
/**
* RTSMBadge; class to render one RTSM badge in the SORow.
*/
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js
index 65ec944962974f0dfef0962675100fdab79249e2..3357a5d0c0ecb111c08f3dfbb7b575fe9f734591 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestSummary.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
+import { connect } from "react-redux";
import { Table, Popover, PopoverHeader, PopoverBody, Button, ButtonGroup } from 'reactstrap';
import { unique_id, capitalize } from '../utils/utils.js'
import { componentErrorTypes } from '../utils/constants.js'
@@ -76,8 +77,7 @@ class StationTestSummaryC extends Component {
activeErrorTypes = []; // Result of filtering state.errorTypes
state = {
- allErrorTypes: false, // true: error types shown, even when there are no errors for that type
- errorTypes: [] // Result of API call
+ allErrorTypes: false // true: error types shown, even when there are no errors for that type
};
/* Handle changes of selected filters in the ToolBar */
@@ -92,7 +92,7 @@ class StationTestSummaryC extends Component {
let typesFound = {},
retTypes = [];
- if (this.state.errorTypes.length === 0 || this.props.data.length === 0){
+ if (this.props.errorTypes.length === 0 || this.props.data.length === 0){
return [];
}
@@ -107,7 +107,7 @@ class StationTestSummaryC extends Component {
});
// Loop over all error types and check which ones are present in the data
- this.state.errorTypes.forEach((t) => {
+ this.props.errorTypes.forEach((t) => {
if (typesFound[t]) {
retTypes.push(t);
}
@@ -118,30 +118,12 @@ class StationTestSummaryC extends Component {
setActiveErrorTypes() {
if (this.state.allErrorTypes) {
- this.activeErrorTypes = this.state.errorTypes;
+ this.activeErrorTypes = this.props.errorTypes;
} else {
this.activeErrorTypes = this.filterErrorTypes();
}
}
- fetchErrorTypes() {
- axios.get(StationTestSummaryC.errorTypesURL)
- .then(res => {
- this.setState({
- errorTypes: res.data
- });
- })
- .catch(error => {
- console.log(error);
- // Try again in 30s
- setTimeout(() => this.fetchErrorTypes(), 30000);
- });
- }
-
- componentDidMount() {
- this.fetchErrorTypes();
- }
-
getTableRows() {
let rows = [],
prevDate = null;
@@ -176,7 +158,7 @@ class StationTestSummaryC extends Component {
render() {
console.log("render stationTestSummary");
- this.setActiveErrorTypes();
+ this.setActiveErrorTypes();
return (
<React.Fragment>
@@ -206,10 +188,13 @@ class StationTestSummaryC extends Component {
}
+const mapStateToProps = state => {
+ return { ...state.appInitData };
+};
/* Add some magic; use the AutoLoadWrapper to create a HOC that handles the
auto-loading of the data for StationOverviewC.
*/
-const StationTestSummary = AutoLoadWrapper(StationTestSummaryC);
+const StationTestSummary = AutoLoadWrapper( connect(mapStateToProps)(StationTestSummaryC) );
export default StationTestSummary;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js
index c633672acdcb5853fd17d2965bd5eabed08bab19..cbd63119b2bb7a97e9589b57dc2ac977b6286980 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/actionTypes.js
@@ -2,3 +2,8 @@
export const SET_STATION_GROUP = "SET_STATION_GROUP";
export const SET_ERRORS_ONLY = "SET_ERRORS_ONLY";
export const SET_PERIOD = "SET_PERIOD";
+
+
+export const FETCH_ERRORTYPES_BEGIN = 'FETCH_ERRORTYPES_BEGIN';
+export const FETCH_ERRORTYPES_SUCCESS = 'FETCH_ERRORTYPES_SUCCESS';
+export const FETCH_ERRORTYPES_FAILURE = 'FETCH_ERRORTYPES_FAILURE';
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/appInitData.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/appInitData.js
new file mode 100644
index 0000000000000000000000000000000000000000..50d5d2fc83307a9b4e60df7f242f9ac8640cdbec
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/appInitData.js
@@ -0,0 +1,41 @@
+import axios from 'axios';
+import {
+ FETCH_ERRORTYPES_BEGIN,
+ FETCH_ERRORTYPES_SUCCESS,
+ FETCH_ERRORTYPES_FAILURE
+} from "./actionTypes";
+
+
+const errorTypesURL = '/api/view/ctrl_list_component_error_types';
+
+export const fetchErrorTypesBegin = () => ({
+ type: FETCH_ERRORTYPES_BEGIN
+});
+
+export const fetchErrorTypesSuccess = errorTypes => ({
+ type: FETCH_ERRORTYPES_SUCCESS,
+ payload: { errorTypes }
+});
+
+export const fetchErrorTypesFailure = error => ({
+ type: FETCH_ERRORTYPES_FAILURE,
+ payload: { error }
+});
+
+
+export function fetchErrorTypes() {
+ return dispatch => {
+ // Not used: dispatch(fetchErrorTypesBegin());
+
+ return axios.get(errorTypesURL)
+ .then(res => {
+ dispatch(fetchErrorTypesSuccess(res.data));
+ })
+ .catch(error => {
+ console.log("Error fetching error types: "+error);
+ dispatch(fetchErrorTypesFailure(error))
+ // Try again in 30s
+ setTimeout(() => dispatch(fetchErrorTypes()), 10000);
+ });
+ };
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/appInitData.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/appInitData.js
new file mode 100644
index 0000000000000000000000000000000000000000..6440cde71d7f67806285fce5e1a1d17bbc0a4bd3
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/appInitData.js
@@ -0,0 +1,48 @@
+import {
+ FETCH_ERRORTYPES_BEGIN,
+ FETCH_ERRORTYPES_SUCCESS,
+ FETCH_ERRORTYPES_FAILURE
+} from '../actions/actionTypes.js';
+
+
+const initialState = {
+ errorTypesLoaded: false,
+ errorTypes: []
+};
+
+
+export default function (state = initialState, action) {
+ switch(action.type) {
+ case FETCH_ERRORTYPES_BEGIN:
+ // Mark the state as "loading" so we can show a spinner or something
+ // Also, reset any errors. We're starting fresh.
+ return {
+ ...state,
+ errorTypesLoaded: false,
+ errorTypes: []
+ };
+
+ case FETCH_ERRORTYPES_SUCCESS:
+ // All done: set loading "false".
+ // Also, replace the items with the ones from the server
+ return {
+ ...state,
+ errorTypesLoaded: true,
+ errorTypes: action.payload.errorTypes
+ };
+
+ case FETCH_ERRORTYPES_FAILURE:
+ // The request failed, but it did stop, so set loading to "false".
+ // Save the error, and we can display it somewhere
+ return {
+ ...state,
+ errorTypesLoaded: false,
+ // don't: errorTypes: []
+ errorTypesError: action.payload.error
+ };
+
+ default:
+ // ALWAYS have a default case in a reducer
+ return state;
+ }
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js
index 0cc2789786d1d756b94f94f6282633f93759474c..471fbf229cf401155cef101205ae0107fc253f6b 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js
@@ -1,4 +1,8 @@
import { combineReducers } from "redux";
+import appInitData from "./appInitData";
import mainFilters from "./mainFilters";
-export default combineReducers({ mainFilters });
+export default combineReducers({
+ appInitData,
+ mainFilters
+});
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
index fcf3eb9cd9f259e97ed7147ced3bf31614f83fdd..01dceb7460b73f2a77787c07a571baf52bd2db37 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
@@ -1,4 +1,9 @@
-import { SET_STATION_GROUP, SET_ERRORS_ONLY, SET_PERIOD } from "../actions/actionTypes";
+import {
+ SET_STATION_GROUP,
+ SET_ERRORS_ONLY,
+ SET_PERIOD
+} from "../actions/actionTypes";
+
const initialState = {
selectedStationGroup: 'R',
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/store.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/store.js
index cdb92fe1b68dab601fa45b41dca646ab12b4757a..caceabe064b591e78593d2613e2b014129c90d3f 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/store.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/store.js
@@ -1,9 +1,14 @@
-import { createStore } from "redux";
+import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./reducers/index.js";
+import thunk from 'redux-thunk';
+
+// Needed for the chrome Redux DevTools extension
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
rootReducer,
- window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+ /* preloadedState, */
+ composeEnhancers( applyMiddleware(thunk) )
);
export default store;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js
index 7bf4512d95ae4d0c3875a3de62752834062ea6f2..be9df5808a228d69deb951294605dc64b1597862 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/autoLoader.js
@@ -101,11 +101,12 @@ function AutoLoadWrapper(WrappedComponent) {
loadingHtml = <div className="alLoading"></div>;
}
- return( <React.Fragment>
+ return(
+ <React.Fragment>
{loadingHtml}
<WrappedComponent data={this.state.data} {...this.props} />
</React.Fragment>
- );
+ );
}
};
}