OSB-29: merge layout reducers into landingPageReducers

.gitattributes

@@ -1878,7 +1878,6 @@ LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/actions/appInitData.js
 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/landingPageReducers.js -text
-LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/layout.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
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/registerServiceWorker.js -text

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

 import React, { Component } from 'react';
-import { Table, Badge, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
+import { Table, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
 import { unique_id } from '../utils/utils.js'
 import AutoLoadWrapper from '../utils/autoLoader.js'
 import * as moment from 'moment';
 import './LatestObservations.css'
-
-/**
- * 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.
  */
@@ -71,7 +53,10 @@ class SORow extends Component {
 
         const {total_component_errors, start_datetime, end_datetime, mode} = data;
         const stations_and_errors = station_involved_list.map((station) =>
-        <tr><th scope="row">{station.station_name}</th><td>{station.n_errors}</td></tr>)
+            <tr key={station.station_name}>
+                <th scope="row">{station.station_name}</th>
+                <td>{station.n_errors}</td>
+            </tr>);
         return (
             <tr id={this.id} onMouseOver={this.togglePopover} onMouseOut={this.togglePopover}
                 onMouseDown={this.mouseDown}
@@ -106,7 +91,7 @@ class SORow extends Component {
 class LatestObservationsC extends Component {
 
     getTableRows() {
-        return this.props.data.map( (stationData) => <SORow data={ stationData } /> );
+        return this.props.data.map( (stationData) => <SORow key={stationData.observation_id} data={ stationData } /> );
     }
 
     render() {

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

@@ -77,7 +77,7 @@ class StationTestBadgeC extends Component {
             let errors = Object.keys(comp_sum).sort();
             rows.push(
                 <tr key={unique_id()}>
-                    <th>{component}</th><td>{ errors.map((e) => <Badge count={comp_sum[e]} label={e}/> ) }</td>
+                    <th>{component}</th><td>{ errors.map((id, e) => <Badge key={id} count={comp_sum[e]} label={e}/> ) }</td>
                 </tr>
             );
         });
@@ -121,7 +121,7 @@ class StationTestBadgeC extends Component {
 }
 
  const StationTestBadge = withRouter(StationTestBadgeC);
- 
+
 
 /**
  * RTSMBadge; class to render one RTSM badge in the SORow.
@@ -158,7 +158,7 @@ class RTSMBadge extends Component {
         let badges = "";
 
         let errors = Object.keys(summary).sort();
-        badges = errors.map((e) => <Badge count={summary[e]} label={e}/> );
+        badges = errors.map((i, e) => <Badge key={i} count={summary[e]} label={e}/> );
 
         return (
             <Popover placement="auto" isOpen={this.state.popoverOpen} target={ this.id } toggle={this.togglePopover}>
@@ -209,14 +209,17 @@ class SORow extends Component {
 
     renderStationTests() {
         let data = this.props.data;
-        return data.station_tests.map( (testData) => <StationTestBadge station={data.station_name} data={ testData } /> );
+        let station_name = data.station_name;
+        return data.station_tests.map( (testData) => <StationTestBadge key={[station_name, testData.start_datetime].join("_")} 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 } /> );
+
+        return this.props.data.rtsm.map( (testData) =>
+        <RTSMBadge key={ testData.observation_id } data={ testData } /> );
     }
 
     render() {
@@ -238,7 +241,7 @@ class StationOverviewC extends Component {
 
     getTableRows() {
         let d = this.props.data;
-        return d.map( (stationData) => <SORow key={stationData.station_name} data={ stationData } /> );
+        return d.map( (stationData) => <SORow key={ stationData.station_name }  data={ stationData } /> );
     }
 
     render() {

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

 import React, { Component } from 'react';
 import AutoLoadWrapper from '../utils/autoLoader.js'
-import { unique_id } from '../utils/utils.js'
 import ReactVegaLite from 'react-vega-lite'
-import { Table, Badge, Popover, PopoverHeader, PopoverBody, Form, Input } from 'reactstrap';
+import { Form, Input } from 'reactstrap';
 import { connect } from 'react-redux';
 import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from '../redux/actions/actions'
 
@@ -27,6 +26,7 @@ class ToolBarC extends Component {
                     <option value="S">StationTest only</option>
                 </select>
                 <Input type="select" className="form-control custom-select custom-select-sm"
+                     style={{top:"0rem !important"}}
                      onChange={(e)=>this.setAveragingWindow(e)}
                      value={this.props.averaging_window}>
                     <option value={1}>day</option>
@@ -82,7 +82,6 @@ class StationStatisticsC extends Component {
                 "mark": {"type":"bar"},
                 "autosize": {
                     "type": "fit",
-                    "resize": true,
                     "contains": "padding"
                 },
                 "config":{

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js

@@ -18,32 +18,6 @@ import '../themes/lofar-styles.css';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
-/* Configuration of the responsive panels for ResponsiveGridLayout */
-const layout = {
-    breakpoints: {
-        md: 996,
-        xxs: 0
-    },
-    cols: {
-        md: 12,
-        xxs: 1
-    },
-    panels: {
-        md: [
-            {i: 'ul', x: 0, y: 0, w: 8, h: 3 },
-            {i: 'ur', x: 9, y: 0, w: 4, h: 3 },
-            {i: 'bl', x: 0, y: 0, w: 8, h: 2 },
-            {i: 'br', x: 9, y: 0, w: 4, h: 2 }
-        ],
-        xxs: [
-            {i: 'ul', x: 0, y: 0, w: 1, h: 3 },
-            {i: 'ur', x: 0, y: 0, w: 1, h: 3 },
-            {i: 'bl', x: 0, y: 0, w: 1, h: 2 },
-            {i: 'br', x: 0, y: 0, w: 1, h: 2 }
-        ]
-    }
-};
-
 /**
  * Class to display a secondary header for selecting data filters.
  * The state is managed by the LandingPage class.
@@ -149,7 +123,7 @@ class LandingPageC extends Component {
         return (<div>
             <Header active_page={this.props.location}/>
             <ToolBar />
-            <ResponsiveGridLayout className="layout" layouts={this.props.panels} measureBeforeMount={true} breakpoints={this.props.breakpoints} cols={this.props.cols} onResizeStop={e=>this.props.setNewLayout(e)}>
+            <ResponsiveGridLayout className="layout" layouts={this.props.layout.panels} measureBeforeMount={true} breakpoints={this.props.layout.breakpoints} cols={this.props.layout.cols} onResizeStop={e=>this.props.setNewLayout(e)}>
                 {createGridPanel({
                     key: "ul", renderHeader: true, title: "Station overview",
                     body: <StationOverview url={this.getStationOverviewURL()}/>
@@ -171,7 +145,7 @@ class LandingPageC extends Component {
 }
 
 const LandingPage = connect(state => {
-    return  { ...state.mainFilters, ...state.landing_page, ...state.layout };
+    return  { ...state.mainFilters, ...state.landing_page };
 }, {setNewLayout})(LandingPageC);
 
 export default LandingPage;

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/index.js

@@ -2,11 +2,10 @@ import { combineReducers } from "redux";
 import appInitData from "./appInitData";
 import mainFilters from "./mainFilters";
 import landingPageReducers from "./landingPageReducers";
-import layout from "./layout";
+
 
 export default combineReducers({
     appInitData,
     mainFilters,
     landing_page:landingPageReducers,
-    layout:layout
 });

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/landingPageReducers.js

-import { SET_AVERAGING_WINDOW, SET_TEST_TYPE } from '../actions/actionTypes.js'
+import { SET_AVERAGING_WINDOW,
+   SET_TEST_TYPE,
+   SET_COMPONENT_SIZES } from '../actions/actionTypes.js'
 
-const initialState = { station_statistics :
-    { averaging_window: 1,
-      test_type: 'B'}
+const initialState = {
+    station_statistics : {
+      averaging_window: 1,
+      test_type: 'B'},
+    layout: {
+        breakpoints: {
+            md: 996,
+            xxs: 0
+        },
+        cols: {
+            md: 12,
+            xxs: 1
+        },
+        panels: {
+            md: [
+                {i: 'ul', x: 0, y: 0, w: 8, h: 3 },
+                {i: 'ur', x: 9, y: 0, w: 4, h: 3 },
+                {i: 'bl', x: 0, y: 0, w: 8, h: 2 },
+                {i: 'br', x: 9, y: 0, w: 4, h: 2 }
+            ],
+            xxs: [
+                {i: 'ul', x: 0, y: 0, w: 1, h: 3 },
+                {i: 'ur', x: 0, y: 0, w: 1, h: 3 },
+                {i: 'bl', x: 0, y: 0, w: 1, h: 2 },
+                {i: 'br', x: 0, y: 0, w: 1, h: 2 }
+            ]
+        },
+        current_layout: {}
+    }
   };
 
 
@@ -22,6 +50,14 @@ export default function(state = initialState, action) {
                                   test_type: action.payload.test_type}
               };
         }
+        case SET_COMPONENT_SIZES: {
+            return {
+                ...state,
+                layout: {...state.layout,
+                        current_layout: action.payload
+                      }
+            };
+        }
         default:
             return state;
     }

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/layout.js

-import { SET_COMPONENT_SIZES } from '../actions/actionTypes.js'
-
-const initialState = {
-    breakpoints: {
-        md: 996,
-        xxs: 0
-    },
-    cols: {
-        md: 12,
-        xxs: 1
-    },
-    panels: {
-        md: [
-            {i: 'ul', x: 0, y: 0, w: 8, h: 3 },
-            {i: 'ur', x: 9, y: 0, w: 4, h: 3 },
-            {i: 'bl', x: 0, y: 0, w: 8, h: 2 },
-            {i: 'br', x: 9, y: 0, w: 4, h: 2 }
-        ],
-        xxs: [
-            {i: 'ul', x: 0, y: 0, w: 1, h: 3 },
-            {i: 'ur', x: 0, y: 0, w: 1, h: 3 },
-            {i: 'bl', x: 0, y: 0, w: 1, h: 2 },
-            {i: 'br', x: 0, y: 0, w: 1, h: 2 }
-        ]
-    },
-    current_layout: {}
-};
-
-export default function(state = initialState, action) {
-    switch (action.type) {
-        case SET_COMPONENT_SIZES: {
-            return {
-                ...state,
-                current_layout: action.payload
-            };
-        }
-        default:
-            return state;
-    }
-}