OSB-29: fixed padding of the station statistics

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

 import React, {Component} from 'react';
 import AutoLoadWrapper from '../utils/autoLoader.js'
 import ReactVegaLite from 'react-vega-lite'
-import {Form, Input} from 'reactstrap';
+import {
+    Navbar,
+    Nav,
+    NavItem,
+    Input,
+    NavbarBrand
+} from 'reactstrap';
 import {connect} from 'react-redux';
 import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from '../redux/actions/landingPageActions'
 
 class ToolBarC extends Component {
+    constructor(props){
+        super(props);
 
+        this.state = {isNavbarCollapsed: true};
+    }
     setAveragingWindow(e) {
         this.props.setStationStatisticsAveragingWindow(e.target.value);
     }
@@ -14,29 +24,41 @@ class ToolBarC extends Component {
     setTestType(e) {
         this.props.setStationStatisticsTestType(e.target.value);
     }
+
+    toggle(){
+        this.setState({
+            isNavbarCollapsed: !this.state.isNavbarCollapsed
+        });
+    }
+
     render() {
-        return (<div className="sts-toolbar">
-            <Form inline>
-                <select className="form-control custom-select custom-select-sm" id="selected-group" value={this.props.test_type} onChange={(e) => this.setTestType(e)} style={{
-                        width: 'auto'
-                    }}>
-                    <option value="B">Both test types</option>
-                    <option value="R">RTSM only</option>
-                    <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>
-                    <option value={7}>week</option>
-                    <option value={30}>month</option>
-                </Input>
-                <Input type="select" className="form-control custom-select custom-select-sm" onChange={(e) => this.props.switchHistogramEvent(e)} value={this.props.histogramType}>
-                    <option value="per_error_type">per error type</option>
-                    <option value="per_station">per station</option>
-                </Input>
-            </Form>
-        </div>);
+        return (
+            <Nav className="ml-auto" auto>
+                <NavItem>
+                    <select className="form-control custom-select custom-select-sm" id="selected-group" value={this.props.test_type} onChange={(e) => this.setTestType(e)} style={{
+                            width: 'auto'
+                        }}>
+                        <option value="B">Both test types</option>
+                        <option value="R">RTSM only</option>
+                        <option value="S">StationTest only</option>
+                    </select>
+                </NavItem>
+                <NavItem>
+                    <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>
+                        <option value={7}>week</option>
+                        <option value={30}>month</option>
+                    </Input>
+                </NavItem>
+                <NavItem>
+                    <Input type="select" className="form-control custom-select custom-select-sm" onChange={(e) => this.props.switchHistogramEvent(e)} value={this.props.histogramType}>
+                        <option value="per_error_type">per error type</option>
+                        <option value="per_station">per station</option>
+                    </Input>
+                </NavItem>
+            </Nav>);
     }
 }
 
@@ -166,10 +188,21 @@ class StationStatisticsC extends Component {
 
         }
         return (<React.Fragment>
-            <h5 className="react-grid-item-header">
-                Station statistics
-                <ToolBar histogramType={this.state.histogramType} switchHistogramEvent={e => this.setState({histogramType: e.target.value})}/>
-            </h5>
+            <Navbar
+                className="react-grid-item-header justify-content-between"
+                style={{
+                    padding: "0"
+                }}>
+                <NavbarBrand style={{
+                        padding: "0"
+                    }}>
+                    <h5 className="react-grid-item-header">
+                        Station statistics</h5>
+                </NavbarBrand>
+                <ToolBar style={{
+                        padding: "0"
+                    }} histogramType={this.state.histogramType} switchHistogramEvent={e => this.setState({histogramType: e.target.value})}/>
+            </Navbar>
             <div className="react-grid-item-body" id="plot" ref={this.ref}>
                 <ReactVegaLite spec={spec} data={data} enableHover={true}/>
             </div>