diff --git a/.gitattributes b/.gitattributes index 072f4bdd111b3d217aaf3cef7ac9e1a475267a75..1ae33f286de1ba0a4d1b307c3370d8ae0735ce46 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1856,17 +1856,15 @@ 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/AutoLoadWrapper/index.js -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/styles.module.scss -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/EnlargeableImage/index.js -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillViewportHeightDiv/index.js -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown/index.js -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown/styles.module.scss -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/NavigationBar/index.js -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/NavigationBar/styles.module.scss -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/ObservationInspectTag/index.js -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/ObservationInspectTag/styles.module.scss -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PictureWithModal/index.js -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PopoverWithTitle/index.js -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList/index.js -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList/styles.css -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaIdSelector/index.js -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaIdSelector/styles.module.scss -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/AntennaTypeSelector/index.js -text @@ -1907,18 +1905,18 @@ LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/ 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/ComponentType/GenericStatusTd/index.js -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/styles.module.css -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/styles.module.scss -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/index.js -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/styles.module.css -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/styles.module.scss -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/index.js -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/styles.module.css -text -LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/styles.module.scss -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/index.js -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/styles.module.css -text LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/styles.module.scss -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/index.js -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/styles.module.css -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/styles.module.scss -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/index.js -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/styles.module.css -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/styles.module.scss -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/index.js -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/styles.module.css -text +LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/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 diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/index.js index 96f0928460766b222845076c93e4b40769b61718..aad8f7beb5efbcd0206f1c54dbb92602f945915e 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AutoLoadWrapper/index.js @@ -16,6 +16,7 @@ function Spinner() { /** * ErrorAlert: simple component to show a error message + * @arg {string} message - The message text to display */ function ErrorAlert({message}) { return <Alert className="py-1" color="danger"> @@ -27,6 +28,10 @@ function ErrorAlert({message}) { * AutoLoadWrapper: HOC for automatic reloading of data at a specified interval. * See defaultProps fro accepted props, other props are passed through to then * WrappedComponent. + * @param {class} WrappedComponent - The component to wrap. + * @returns {class} The wrapped component. + * @example + * const MyComponentWithLoader = AutoLoadWrapper(MyComponent); */ function AutoLoadWrapper(WrappedComponent) { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PictureWithModal/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/EnlargeableImage/index.js similarity index 83% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PictureWithModal/index.js rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/EnlargeableImage/index.js index e5a5b4fdb5955580bbe79cc0178912553ff5ec4f..54fe7310a3e865bc0a6ed1b51555ddd8da69c538 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PictureWithModal/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/EnlargeableImage/index.js @@ -8,11 +8,16 @@ import { ModalBody } from 'reactstrap'; -// CSS -//import styles from './styles.module.scss' - -class PictureWithModal extends Component { +/** + * EnlargeableImage: + * Creates a clickable <img> tag. When the image is clicked, it is opened in a modal + * and typically enlarged. + * + * @prop {string} url - the URL of the image + * @prop {string} className - classname applied to the Modal + */ +class EnlargeableImage extends Component { state = { modal: false, @@ -66,4 +71,4 @@ class PictureWithModal extends Component { } -export default PictureWithModal; +export default EnlargeableImage; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeightDiv/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillViewportHeightDiv/index.js similarity index 80% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeightDiv/index.js rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillViewportHeightDiv/index.js index 6f10235f5cb28691209a677e125cf6a3bdf70239..b177de6ff20e97684e6c0252ae644d579b33bb96 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillHeightDiv/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/FillViewportHeightDiv/index.js @@ -1,18 +1,24 @@ import React from "react"; -/* - * FillHeightDiv: Creates a div that fills the remaining height of the viewport. +/** + * FillViewportHeightDiv: 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.: * - * <FillHeightDiv> - * { (props) => <MyComponent hgt={props.height} /> } - * </FillHeightDiv> + * @prop {string} className - Class applied to the container div + * @prop {integer} gutterBottom - Bottom margin for the container div + * @prop {integer} minHeight - Mininum height of container div + * @prop {jsx} children - Content of container div + * + * @example + * <FillViewportHeightDiv> + * { (props) => <MyComponent hgt={props.height} /> } + * </FillViewportHeightDiv> */ -class FillHeightDiv extends React.Component { +class FillViewportHeightDiv extends React.Component { static defaultProps = { className: 'fill-height-container', // classname for the container div @@ -85,4 +91,4 @@ class FillHeightDiv extends React.Component { } }; -export default FillHeightDiv; +export default FillViewportHeightDiv; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown/index.js index 0e41514b862095c17e9f89ac648915e0f000cf1d..d9387d1597bdc47d34aad0f4b9778c8aa61ecf5e 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown/index.js @@ -6,6 +6,13 @@ import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap import styles from './styles.module.scss' +/** + * SelectableOption: renders the boilerplate JSX for selectable items in the DropdownMenu. + * + * @prop {bool} isSelected - if the item is selected + * @prop {function} onSelectedItem - callback for click event. Gets the option value as argument. + * @prop {jsx} children - label content + */ function SelectableOption(props) { const selectMark = props.isSelected ? <IsSelectIcon /> : null; @@ -27,6 +34,13 @@ function SelectableOption(props) { ); } +/** + * MultiSelectDropdown: + * Creates a multi-select box. The selectable items are presented in a dropdown. + * + * @props: + * options: list of objects {value, label} + */ export class MultiSelectDropdown extends Component{ state = { @@ -36,34 +50,44 @@ export class MultiSelectDropdown extends Component{ // Toggle the dropdown state toggle = () => { - if(!this.state.isOpen) - { - this.setState({isOpen:true}); - }else if(!this.state.mouseOverMenu){ + if (!this.state.isOpen) { + this.setState({ + isOpen: true + }); + } + else if (!this.state.mouseOverMenu) { this.closeMenu() } } closeMenu(){ - this.setState({isOpen:false}) + this.setState({ + isOpen:false + }) this.props.onSelectionChange(this.getSelectedItemsList()) } itemSelected = (e) => { if (e === 'all'){ - this.setState({selectedItems: {}}) + this.setState({ + selectedItems: {} + }) this.props.onSelectionChange([]) - this.setState({isOpen:false}) + this.setState({ + isOpen:false + }) }else{ const newSelectedItems = this.state.selectedItems newSelectedItems[e] = !newSelectedItems[e] - this.setState({selectedItems: newSelectedItems}) + this.setState({ + selectedItems: newSelectedItems + }) } } getSelectedItemsList (selectedItems) { - if (selectedItems === undefined){ + if (selectedItems === undefined) { selectedItems = this.state.selectedItems; } return Object.keys(selectedItems).filter(item => this.state.selectedItems[item]); @@ -73,34 +97,42 @@ export class MultiSelectDropdown extends Component{ renderLabel(){ const selectedItemsList = this.getSelectedItemsList() - if(selectedItemsList.length === 0 ){ + if (selectedItemsList.length === 0 ) { return this.props.placeHolder; - }else if(selectedItemsList.length <= 4){ + } + else if (selectedItemsList.length <= 4) { return selectedItemsList.join(', ') - }else { + } else { const firstFour = selectedItemsList.slice(0, 4) return firstFour.join(', ') + ', ...' } } isItemSelected = (e) => { - if(this.state.selectedItems.hasOwnProperty(e)) + if (this.state.selectedItems.hasOwnProperty(e)) { return this.state.selectedItems[e]; + } return false } componentDidMount() { const selectedItems = this.state.selectedItems let update = false - if(this.props.selectedItems === undefined) return - for(let item of this.props.selectedItems){ - if(!selectedItems.hasOwnProperty(item) || !selectedItems[item] ){ + if (this.props.selectedItems === undefined) { + return + } + for (let item of this.props.selectedItems) { + if (!selectedItems.hasOwnProperty(item) || !selectedItems[item]) { selectedItems[item] = true; update = true } } - if(update) this.setState({selectedItems: selectedItems}) + if (update) { + this.setState({ + selectedItems: selectedItems + }) + } } mouseOverMenu = () => { @@ -111,7 +143,7 @@ export class MultiSelectDropdown extends Component{ this.setState({mouseOverMenu:false}) } - render(){ + render() { let allOptions = [{value:'all', label:'<ALL>'}].concat(this.props.options) let options = allOptions.map((item, key) => <SelectableOption key={key} value={item.value} isSelected={this.isItemSelected(item.value)} onSelectedItem={this.itemSelected}> diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/NavigationBar/index.js similarity index 81% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/index.js rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/NavigationBar/index.js index fab2bb89efd508c959c60078c51855d3bb297a96..6815e6dc046049db988b01a8e1d73fa8c8efda75 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/NavigationBar/index.js @@ -11,8 +11,11 @@ import { Collapse, // CSS import styles from './styles.module.scss' - -class Header extends PureComponent { +/** + * NavigationBar + * Creates the top navigation bar with app name and collapsable main menu. + */ +class NavigationBar extends PureComponent { state = { isOpen: false @@ -25,7 +28,6 @@ class Header extends PureComponent { } check_status(item){ - //console.log(this.props.active_page.pathname) if (this.props.active_page.pathname === item){ return "active" } @@ -57,17 +59,10 @@ class Header extends PureComponent { <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; +export default NavigationBar; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/styles.module.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/NavigationBar/styles.module.scss similarity index 100% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Header/styles.module.scss rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/NavigationBar/styles.module.scss diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PopoverWithTitle/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PopoverWithTitle/index.js index a78139883e052ad33291502bb7a79e7132f30846..b8525a661e7e7e592de1cf30a165fb3aecd7abe1 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PopoverWithTitle/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/PopoverWithTitle/index.js @@ -1,10 +1,18 @@ import React from 'react'; import {Popover, PopoverHeader, PopoverBody} from 'reactstrap'; -// CSS -//import {styles} from './styles.module.scss' - +/** + * PopoverWithTitle: + * Function component that renders a Popover with a title + * + * @props: + * target: [string] id of the HTML element that triggers the popover + * isOpen: [bool] should the Popover be displayed (true) or hidden (false) + * togglePopover: [function] function that is called to toggle the popover + * title: [string] title of the Popover + * children: [JSX fragment] the body of the Popover + */ const PopoverWithTitle = ({target, isOpen, togglePopover, title, children}) => { if (!isOpen) { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList/index.js deleted file mode 100644 index 605c1fd2503508e6ce468ee7b92f36bcea12e9f5..0000000000000000000000000000000000000000 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList/index.js +++ /dev/null @@ -1,142 +0,0 @@ -import React, { Component } from 'react'; -import { Nav, NavItem, NavLink, InputGroup, Input, InputGroupAddon, - Container, Row, Table, Pagination, PaginationItem, - PaginationLink, Badge, Button } from 'reactstrap'; -import StationTestSummary from './StationTestSummary.js' -import RESTAPI from '../api_configuration.js' -import { Link } from 'react-router-dom'; -import './StationList.css' - -class StationList extends Component { - - constructor(props){ - super(props); - this.state = { - stations: [], - isLoading: null, - query: { - station_name:'', - station_type: '', - from_date:'', - to_date:''} - }; - } - - fillResultUrl(query){ - let parameters = query; - let url = RESTAPI.get_url('station_test', this.props.current_page, parameters); - return url; - } - - fetchData(query){ - this.setState({isLoading:true}); - let current_request = this.fillResultUrl(query) - console.log(current_request) - fetch(current_request).then( - (response) => response.json()).then( - (content) => { - this.setState({total_pages:content.total_pages, - isLoading: false}); - this.setState({stations: content.results}); - } - ); - } - - componentDidMount(){ - this.fetchData(this.state.query); - } - - getNextPageNumber(){ - const current_page = this.props.current_page - return current_page < this.state.total_pages ? - current_page + 1 : - current_page - - } - - getNextPage(){ - return '/stationtest/' + this.getNextPageNumber(); - } - - getPrevPageNumber(){ - const current_page = this.props.current_page - return current_page > 1 ? - current_page - 1 : - current_page - - } - - getPrevPage(){ - return '/stationtest/' + this.getPrevPageNumber(); - } - - stationSelectedEvent(evt){ - let query = this.state.query - query.station_name = evt.target.value - - this.setState({'query': query}); - - this.fetchData(query); - } - - stationTypeSelectedEvent(evt){ - let query = this.state.query - query.station_type = evt.target.value - - this.setState({'query': query}); - this.fetchData(query); - } - - fromDateSelectedEvent(evt){ - let query = this.state.query - query.from_date = evt.target.value - - this.setState({'query': query}); - this.fetchData(query); - } - - toDateSelectedEvent(evt){ - let query = this.state.query - query.to_date = evt.target.value - - this.setState({'query': query}); - this.fetchData(query); - } - - render() { - var station_names = this.state.stations.map( (item)=> <StationTestSummary data={item} key={item.id} />); - const prev_page = this.getPrevPage(); - const next_page = this.getNextPage(); - return ( - <div> - <InputGroup> - <Input type='search' placeholder='Station' - onInput={(evt)=>this.stationSelectedEvent(evt)}></Input> - <Input placeholder='Station type' - onChange={(evt)=>this.stationTypeSelectedEvent(evt)}></Input> - <InputGroupAddon addonType="prepend">From</InputGroupAddon> - <Input type='date' - onChange={(evt)=>this.fromDateSelectedEvent(evt)}></Input> - <InputGroupAddon addonType="prepend">To</InputGroupAddon> - <Input type='date' - onChange={(evt)=>this.toDateSelectedEvent(evt)}></Input> - <Badge> - <div className='pagenumber'> - Page {this.props.current_page} / {this.state.total_pages} - </div> - </Badge> - </InputGroup> - {station_names} - <Nav className="ml-auto float-right"> - <NavItem> - <NavLink href={prev_page}><Button>previous</Button></NavLink> - </NavItem> - <NavItem> - <NavLink href={next_page}><Button>next</Button></NavLink></NavItem> - </Nav> - </div> - ); - } -} - -export default StationList; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList/styles.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList/styles.css deleted file mode 100644 index 8e89d5347497e8c4f18b7f66f9081d16b8e8762a..0000000000000000000000000000000000000000 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationList/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -.pagenumber { - position: relative; - top: 30%; -} 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 index 34aad6cc2ced3487a4c402052991bfa1fd6f1f70..c036c55d4635457a10164758a571435289f63afc 100644 --- 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 @@ -16,7 +16,8 @@ import styles from './styles.module.scss' /** - * Radio buttons for Antenna Id + * AntennaIdSelector: + * Select box for selecting an antenna Id. This component is part of {@link module:Toolbar}. */ class AntennaIdSelectorC extends Component { 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 index fa9d25067b368d5431f5eacd2cd97e20e0129491..0dd827f386bb7561bca453c60a5c3291eed59b54 100644 --- 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 @@ -8,8 +8,8 @@ import MultiSelectDropdown from 'components/MultiSelectDropdown' import toolbarStyles from '../styles.module.scss' /** - * Class to display a secondary header for selecting data filters. - * The state is managed by the LandingPage class. + * ErrorTypesSelector: + * Renders a multi-select dropdown for selecting error types (HIGH_NOISE, LOW_NOISE, ..) */ class ErrorTypesSelectorC extends Component { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationGroupSelector/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationGroupSelector/index.js index d3cb485520d50293de83a9e0bf62a98ada7048bb..c973010ab252b8d159dc93e5ef5cd7b03bd8af4c 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationGroupSelector/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/StationGroupSelector/index.js @@ -5,9 +5,9 @@ import {setStationGroup} from "redux/actions/mainFiltersActions"; // CSS import toolbarStyles from '../styles.module.scss' - -/* - * +/** + * StationGroupSelector: + * Select box for selecting a station group (all, core, remote, ilt) */ class StationGroupSelectorC extends Component { 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 index e05205b933384ad5ef0e7b651b2ffead9b98c762..9e3f193bbfbcb1bdd986efa58fbc4b890da17334 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/Toolbar/index.js @@ -1,10 +1,12 @@ +/** @module Toolbar */ + import React from 'react'; // CSS import styles from './styles.module.scss' -/* +/** * Toolbar: the wrapper for all toolbar components. Use as: * <Toolbar> * <StationAutoComplete /> diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/ObsRow/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/ObsRow/index.js index 9e91e18db360dc8ca338c6c997864fe6ea2d89ec..99228bc8529ff92dbb656e989de114f09da52d67 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/ObsRow/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/ObsRow/index.js @@ -11,7 +11,8 @@ import styles from './styles.module.scss' /** - * SORow; Class to render the row for a station in the StationOverview. + * ObsRow: + * Class to render the (RTSM) row for an observation. */ class ObsRow extends Component { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/index.js index 97d486704891244be012086396e62e4ebaef2094..18a91713fc521b9acb8dd27fa4db3b54b076b7f4 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/LatestObservations/index.js @@ -10,6 +10,8 @@ import styles from './styles.module.scss' /** * TableRows: function component returning the table rows. + * LatestObservations class. + * Component showing a table with the latest observations and number of errors. */ function TableRows({data}) { return data.map( (stationData) => @@ -17,8 +19,10 @@ function TableRows({data}) { ); } + /** - * StationOverview class. + * LatestObservations class. + * Component showing a table with the latest observations and number of errors. */ class LatestObservationsC extends Component { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/Badge/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/Badge/index.js index f84759adfaab171e994edab8ab1ced2e47915459..bc43ec0367209d762812467ca2fe75b62dc3cc85 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/Badge/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/Badge/index.js @@ -1,4 +1,5 @@ import React, {PureComponent} from 'react'; +import classNames from "classnames"; // CSS import styles from './styles.module.scss' @@ -10,14 +11,16 @@ class Badge extends PureComponent { getClass() { let cnt = this.props.count; - let color = cnt > 10 - ? "hilite-serious" - : cnt > 5 - ? "hilite-alarming" - : cnt > 0 - ? "hilite-warning" - : "hilite-good"; - return styles.so_pill+" "+color; + + let cls = classNames({ + [styles.so_pill]: true, + 'hilite-serious': cnt > 10, + 'hilite-alarming': cnt > 5 && cnt <=10, + 'hilite-warning': cnt > 0 && cnt <= 5, + 'hilite-good': cnt === 0 + }); + + return cls; } render() { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/RTSMBadge/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/RTSMBadge/index.js index 4086e9788b0d5924f0dcbdc8412f1a3d4addcfb6..2a2cc8e8cd70a1bcf41f5d1ac613e1ad48c7c31d 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/RTSMBadge/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/RTSMBadge/index.js @@ -7,9 +7,6 @@ import {Table} from 'reactstrap'; import PopoverWithTitle from 'components/PopoverWithTitle' import Badge from '../Badge' -// CSS -//import {styles} from './styles.module.scss' - /** * RTSMBadge; class to render one RTSM badge in the SORow. @@ -22,18 +19,6 @@ class RTSMBadge extends Component { popoverOpen: false }; - getClass() { - let total = this.props.data.total_component_errors; - let color = total > 10 - ? "so-serious" - : total > 5 - ? "so-alarming" - : total > 0 - ? "so-warning" - : "so-good"; - return "so-pill " + color; - } - togglePopover = () => { this.setState({ popoverOpen: !this.state.popoverOpen diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/StationTestBadge/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/StationTestBadge/index.js index 9c74f8a980552a069e3437cb274e04489308e654..855312d9ad16dd99b295b93de73fe4df4daecd37 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/StationTestBadge/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationOverview/StationTestBadge/index.js @@ -4,6 +4,7 @@ import {unique_id} from 'utils/utils.js' import * as moment from 'moment'; import {Table} from 'reactstrap'; import { datetime_format } from 'utils/constants' +import classNames from "classnames"; import PopoverWithTitle from 'components/PopoverWithTitle' import Badge from '../Badge' @@ -23,15 +24,17 @@ class StationTestBadgeC extends Component { }; getClass() { - let total = this.props.data.total_component_errors; - let color = total > 10 - ? "hilite-serious" - : total > 5 - ? "hilite-alarming" - : total > 0 - ? "hilite-warning" - : "hilite-good"; - return styles.stationtestbadge + " " +color; + let cnt = this.props.data.total_component_errors; + + let cls = classNames({ + [styles.stationtestbadge]: true, + 'hilite-serious': cnt > 10, + 'hilite-alarming': cnt > 5 && cnt <=10, + 'hilite-warning': cnt > 0 && cnt <= 5, + 'hilite-good': cnt === 0 + }); + + return cls; } onClick = () => { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationStatistics/Toolbar/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationStatistics/Toolbar/index.js index 3bb226cdc9b40fb7537cf3fde2f2402ba827bb9d..79d2210cec9752c5122a3be6f94c804d812b1bc1 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationStatistics/Toolbar/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationStatistics/Toolbar/index.js @@ -10,6 +10,10 @@ import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from import styles from './styles.module.scss' +/** + * Toolbar + * Toolbar for the station statistics component providing graphing options. + */ class ToolbarC extends Component { state = { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/StationTestRow/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/StationTestRow/index.js index 98913d7f6af927587335c0c0af8776cbf0d79207..878373795f2074031f5792e859023ba086c552e9 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/StationTestRow/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/components/StationTestSummary/StationTestRow/index.js @@ -2,14 +2,10 @@ import React, { Component } from 'react'; import * as moment from 'moment'; import { date_format, time_format } from 'utils/constants' -//import stdata from '../testdata/station_test_summary.js' - -// CSS -//import './styles.module.scss' - /** - * SORow; Class to render the row for a station in the StationOverview. + * StationTestRow + * Class to render the row for a station test. */ class StationTestRow extends Component { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/index.js index 691fb2439824f7910f085763e5375023a2f0bf8f..f1749c3daab64702d056e30d3394e97d2c9d8d46 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage/index.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import Header from 'components/Header' +import NavigationBar from 'components/NavigationBar' import StationOverview from './components/StationOverview'; import StationTestSummary from './components/StationTestSummary'; @@ -21,6 +21,10 @@ import 'react-resizable/css/styles.css'; const ResponsiveGridLayout = WidthProvider(Responsive); +/** + * LandingPage + * The 'dashboard' or home page with responsive grid and panels. + */ class LandingPageC extends Component { getStationOverviewURL() { @@ -97,7 +101,7 @@ class LandingPageC extends Component { render() { return (<div> - <Header active_page={this.props.location}/> + <NavigationBar active_page={this.props.location}/> <Toolbar> <StationGroupSelector /> <ErrorsOnlySelector /> diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/index.js index 6647e5b28d5e3639cb921a14bd1644e4a713c398..9739d9a353ea69a59841812cc2128b5c874f7840 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestChildView/index.js @@ -3,7 +3,7 @@ import {connect} from "react-redux"; import {unpinChildPanelData} from 'redux/actions/stationOverviewPageActions' import {Badge, Button, Table} from 'reactstrap'; import {IoMdCloseCircleOutline as CloseIcon} from 'react-icons/io'; -import PictureWithModal from 'components/PictureWithModal' +import EnlargeableImage from 'components/EnlargeableImage' // CSS @@ -78,7 +78,7 @@ function ErrorDetailRow({data, rowkey}) { } if (data.details.url) { - img = <PictureWithModal url={data.details.url} /> + img = <EnlargeableImage url={data.details.url} /> } return ( diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/index.js index 1a515ab95b936e3a8bb038a23314c920c0384ee8..fe74f561f32816c9e8e259f5e96129348dd589eb 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/index.js @@ -4,8 +4,8 @@ import React, { import {Badge} from 'reactstrap'; import ReactTableContainer from "react-table-container"; -import GenericTestRow from './GenericTestRow'; -import RTSMRows from './RTSMRows'; +import GenericTestRow from '../GenericTestRow'; +import RTSMRows from '../RTSMRows'; // CSS import styles from './styles.module.scss'; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/index.js similarity index 76% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/index.js rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/index.js index ebf31bb3bb613a1fc331805028fcdc1979878801..474d16ef026e171e64d07bea105f44d22621a62c 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/index.js @@ -2,24 +2,26 @@ import React, { Component } from 'react'; import {withRouter} from "react-router"; - +import classNames from "classnames"; // CSS import styles from './styles.module.scss'; +/** + * GenericStatusTd; render a <td> showing the number of errors for an antenna. + * Show the error details in the detail panel on the right on mouse hover. + */ class GenericStatusTdC extends Component { getClass() { - let cls = styles.status; - if (this.props.doHighlight) { - cls += " "+styles.highlight; - } - if (this.props.n_errors > 0) { - cls += ' hilite-serious' - } else { - cls += ' hilite-good' - } + let cls = classNames({ + [styles.status]: true, + [styles.highlight]: this.props.doHighlight, + 'hilite-serious': this.props.n_errors > 0, + 'hilite-good': this.props.n_errors == 0 + }); + return cls; } diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/styles.module.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/styles.module.css similarity index 100% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/styles.module.css rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/styles.module.css diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/styles.module.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/styles.module.scss similarity index 84% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/styles.module.scss rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/styles.module.scss index 3e9e5fa6280b114f79d1a436d9dd5b5bcc7286b7..aa9f18de183f7a215994e66c652b233394bcede3 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericStatusTd/styles.module.scss +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericStatusTd/styles.module.scss @@ -1,4 +1,4 @@ -@import '../../../../../../themes/lofar-variables.scss'; +@import '../../../../../themes/lofar-variables.scss'; :local .status { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/index.js similarity index 100% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/index.js rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/index.js diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/styles.module.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/styles.module.css similarity index 100% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/styles.module.css rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/styles.module.css diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/styles.module.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/styles.module.scss similarity index 82% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/styles.module.scss rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/styles.module.scss index ac6838ed38278a049fea517edceebf08e09c0d8e..2400c854ff42d8d69661ad0a547808c4166d40d2 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/GenericTestRow/styles.module.scss +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/GenericTestRow/styles.module.scss @@ -1,4 +1,4 @@ -@import '../../../../../../themes/lofar-variables.scss'; +@import '../../../../../themes/lofar-variables.scss'; :local .testrow.highlight { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/index.js similarity index 96% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/index.js rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/index.js index 332750cc0b19a01816c7c3a2d89354c91dc99619..55f806c81304b00689560cfec34efff97f96218d 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/index.js @@ -7,11 +7,10 @@ import {renderDateRange} from 'utils/utils' import GenericTestRow from '../GenericTestRow' // CSS -//import styles from './styles.module.scss'; import rtsmStyles from 'themes/rtsm_collapsable.module.scss'; -/* +/** * RTSMSummaryLine: create one table row with percentages of errors per antenna. */ function RTSMSummaryLine(props) { @@ -39,8 +38,8 @@ function RTSMSummaryLine(props) { ); } -/* - * RTSMLines: create summary line + expandable data rows +/** + * RTSMRows: create summary line + expandable data rows */ class RTSMRows extends Component { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/styles.module.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/styles.module.css similarity index 100% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/styles.module.css rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/styles.module.css diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/styles.module.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/styles.module.scss similarity index 100% rename from LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/ComponentType/RTSMRows/styles.module.scss rename to LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/RTSMRows/styles.module.scss diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js index 9f85f95454f5801ad5bb0e97b48fa568f6786245..b9b2272f037b300a06a0af042537a1926a728c37 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js @@ -11,11 +11,10 @@ import { } from 'reactstrap'; import AutoLoadWrapper from 'components/AutoLoadWrapper' import * as LOFARDefinitions from 'utils/LOFARDefinitions' -import FillHeightDiv from 'components/FillHeightDiv'; +import FillViewportHeightDiv from 'components/FillViewportHeightDiv'; import ComponentType from './ComponentType'; // CSS -//import './StationOverview.css'; import styles from './styles.module.scss'; @@ -92,7 +91,7 @@ class StationTestViewC extends Component { ) } </Nav> - <FillHeightDiv className="border-right"> + <FillViewportHeightDiv className="border-right"> { ({height}) => ( <TabContent activeTab={this.state.activeTab}> { @@ -108,7 +107,7 @@ class StationTestViewC extends Component { )} </TabContent> )} - </FillHeightDiv> + </FillViewportHeightDiv> </div>); } diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js index d43050b541e42c8efbb3855a77c3b477b6e20209..0fac2c49260220682a927bb6dd7123732fce67b6 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js @@ -3,7 +3,7 @@ import {connect} from "react-redux"; import {Alert, Container, Row, Col} from 'reactstrap'; import moment from 'moment'; -import Header from 'components/Header' +import NavigationBar from 'components/NavigationBar' import StationTestView from './components/StationTestView'; import StationTestChildView from './components/StationTestChildView'; import { composeQueryString } from 'utils/utils.js'; @@ -83,7 +83,7 @@ class StationOverviewPageC extends Component { return ( <React.Fragment> - <Header active_page={this.props.location} /> + <NavigationBar active_page={this.props.location} /> <Toolbar> <StationAutoComplete /> <TestTypeSelector /> diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js index e4640967316e526eeed6fbe171bad75b6e62ec34..427817033c6e7d056a32746d8eadc01ae90b26d3 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js @@ -18,7 +18,7 @@ import {pinAntennaError, selectAntennaError} from 'redux/actions/antennaOverview import {LOFARTESTS} from 'utils/LOFARDefinitions'; import {datetime_format} from 'utils/constants'; import {connect} from "react-redux"; -import PictureWithModal from 'components/PictureWithModal' +import EnlargeableImage from 'components/EnlargeableImage' // CSS import styles from './styles.module.scss' @@ -127,7 +127,7 @@ class AntennaErrorDetailsC extends Component { </Row> </Col> <Col md="8"> - <PictureWithModal url={RTSMPerPolarization.url} /> + <EnlargeableImage url={RTSMPerPolarization.url} /> </Col> </Row> </Container> diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/AntennaErrorRow/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/AntennaErrorRow/index.js index ce2c6809d71f8cc8d09eb0ba6d8724409b5d7f6a..96da2be1fbd55e48d1a11ca126678bda00c2339d 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/AntennaErrorRow/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/AntennaErrorRow/index.js @@ -10,7 +10,6 @@ import {renderDateRange} from 'utils/utils'; import GenericStatusTd from '../GenericStatusTd' // CSS -//import styles from './styles.module.scss' import rtsmStyles from 'themes/rtsm_collapsable.module.scss'; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/GenericStatusTd/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/GenericStatusTd/index.js index 91cf54077413c372e14f37a80a6bfa4c7691a043..f26b47acb9a96c978ba5cf83329b00a5b310ac66 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/GenericStatusTd/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/GenericStatusTd/index.js @@ -9,6 +9,16 @@ import {selectAntennaError, pinAntennaError} from 'redux/actions/antennaOverview import styles from './styles.module.scss'; +/** + * GenericStatusTd; render a <td> showing the status for an error. Show the error + * details in the detail panel on the right on mouse hover. + * + * @prop {bool} isGood - indicates if this item has errors + * @prop {bool} isPinned - indicates if this item is pinned in the child panel, if so highlight it + * @prop {object} data - the data object + * @prop {function} pinAntennaError - handler to pin this item + * @prop {function} selectAntennaError - mouseOver handler + */ class GenericStatusTdC extends Component { mouseOver = () => { diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/index.js index 7669cdad60708482ebd3e3e54c2788c6c692e39f..d829d76e5135dc39eba3eb61b823b3666a119238 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/index.js @@ -6,15 +6,22 @@ import ReactTableContainer from 'react-table-container'; import AutoLoadWrapper from 'components/AutoLoadWrapper'; import {connect} from 'react-redux'; import {componentErrorTypes} from "utils/constants.js"; -import FillHeightDiv from 'components/FillHeightDiv'; +import FillViewportHeightDiv from 'components/FillViewportHeightDiv'; import AntennaErrorRow from './AntennaErrorRow' // CSS import styles from './styles.module.scss'; - -class AntennaViewC extends Component { +/** + * AntennaTable: component with a chronological table of station test and RTSM + * results for a selected antenna. + * + * @prop {object} data - the data object + * @prop {array} errorTypes - array of all error types (from appInitData reducer) + * @prop {integer} height - height in pixels of the containing <div> + */ +class AntennaTable extends Component { renderHeader() { const errors_columns = this.props.errorTypes.map((error_type, key) => { @@ -58,7 +65,7 @@ class AntennaViewC extends Component { renderBody() { if (this.props.data.hasOwnProperty('errors')) { - let groupedData = AntennaViewC.groupData(this.props.data.errors); + let groupedData = AntennaTable.groupData(this.props.data.errors); return groupedData.map((test, id) => <AntennaErrorRow key={id} data={test} update={this.updateIfContentChanges}/>); } @@ -79,20 +86,25 @@ class AntennaViewC extends Component { } } -const AntennaViewContent = function(props){ +/** + * AntennaViewC; antenna view component to display the test results for a selected antenna. + * + * It gets the props from the mainFilters and appInitData reducers. + */ +const AntennaViewC = function(props){ return ( - <FillHeightDiv className="border-right"> - { ({height}) => <AntennaViewC {...props} height={height} />} - </FillHeightDiv> + <FillViewportHeightDiv className="border-right"> + { ({height}) => <AntennaTable {...props} height={height} />} + </FillViewportHeightDiv> ) } -const AntennaViewController = connect(state => { +const AntennaView = AutoLoadWrapper( connect(state => { return { ...state.mainFilters, ...state.appInitData }; -})(AntennaViewContent); -const AntennaView = AutoLoadWrapper(AntennaViewController); +})(AntennaViewC) ); + export default AntennaView; diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/index.js index 055b1884b24ebebc7e8c919f1c4b840be5814ab5..3e9b64346f75211ee8a1baea254089ec114dd5cb 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/index.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/index.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import Header from 'components/Header' +import NavigationBar from 'components/NavigationBar' import moment from 'moment' import {connect} from "react-redux"; import { Toolbar, StationAutoComplete, DateRangeSelector, TestTypeSelector, AntennaTypeSelector, AntennaIdSelector } from 'components/Toolbar' @@ -48,7 +48,7 @@ class TilesPageC extends Component { return ( <div> - <Header active_page={this.props.location} /> + <NavigationBar active_page={this.props.location} /> <Toolbar> <StationAutoComplete /> <AntennaTypeSelector /> diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/stationOverviewPageReducers.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/stationOverviewPageReducers.js index 75d9e46d994055aabac050d4740a5a8948667cea..f2994bcac1c46b27395bb1e07fc276536274053d 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/stationOverviewPageReducers.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/stationOverviewPageReducers.js @@ -3,7 +3,6 @@ import { UNPIN_CHILD_PANEL_DATA } from '../actions/stationOverviewPageActions.js' -//import { SET_STATION } from "../actions/mainFiltersActions"; import { LOCATION_CHANGE } from "connected-react-router"; const initialState = {