ES6 Plato on Github
Report Home
Summary Display
components/Menu/Menu.js
Maintainability
72.52
Lines of code
199
Difficulty
30.15
Estimated Errors
1.39
Function weight
By Complexity
By SLOC
import React from 'react'; import { Link } from 'react-router-dom'; import { LinkContainer } from 'react-router-bootstrap' import { Glyphicon, Nav, NavItem, Navbar, NavDropdown, MenuItem } from 'react-bootstrap'; import logo from '../../images/ebs.gif'; import './Menu.css'; import './glyhicon-spinner.css'; import BreadCrumbs from '../Breadcrumbs/BreadCrumbs.js'; import _ from 'lodash'; import UI from './../../config/ui/config.js'; export class Menu extends React.Component { constructor(props) { super(props); this.onLogOutClicked = this.onLogOutClicked.bind(this); } getNewTag(){ return <sub style={{ color: 'red', fontSize: '10px', marginLeft: '5px' }}>NEW</sub>; } onLogOutClicked(e) { this.props.doLogOut(); } getLoggedOutRender() { return <Navbar fluid inverse fixedTop> <Navbar.Header> <Navbar.Brand> <Link to="/investigations" ><img alt="" src={logo} className='logo' /></Link> </Navbar.Brand> <Navbar.Toggle /> </Navbar.Header> </Navbar>; } getOpenDataMenuItem() { if (this.props.datacollections.fetching) { return <LinkContainer to='/public'> <NavItem eventKey={3} href='/public'> Open Data<span style={{ marginLeft: '10px' }} className="glyphicon glyphicon-repeat fast-right-spinner"></span> </NavItem> </LinkContainer>; } return <LinkContainer to='/public'> <NavItem eventKey={3} href='/public'> Open Data<span className="badge" style={{ marginLeft: '10px' }}>{this.props.datacollections.data.length}</span> </NavItem> </LinkContainer>; } getClosedDataMenuItem() { if (!this.props.investigations.initialized){ if (this.props.investigations.fetching) { return <LinkContainer to='/closed'> <NavItem eventKey={4} href='/closed'> Closed Data<span style={{ marginLeft: '10px' }} class="glyphicon glyphicon-repeat fast-right-spinner"></span> </NavItem> </LinkContainer>; } } return <LinkContainer to='/closed'> <NavItem eventKey={4} href='/closed'> Closed Data<span className="badge" style={{ marginLeft: '10px' }}>{this.props.investigations.data.length}</span> </NavItem> </LinkContainer>; } render() { /** If there is not sessionId it means that we are not already been authenticated **/ if ((!this.props.user) || (!this.props.user.sessionId)) { return this.getLoggedOutRender(); } return (<div> <Navbar inverse collapseOnSelect> <Navbar.Header> <Navbar.Brand> <a href="/">{UI.menu.applicationTittle}</a> </Navbar.Brand> <Navbar.Toggle /> </Navbar.Header> <Navbar.Collapse> <Nav> { UI.menu.isSearchVisible && <LinkContainer to='/search'> <NavItem eventKey={2}> <span> <Glyphicon style={{ fontSize: '20px' }} glyph="glyphicon glyphicon-search" /> </span> </NavItem> </LinkContainer> } <LinkContainer to='/investigations'> <NavItem eventKey={3} > My Data<span className="badge" style={{ marginLeft: '10px' }}>{this.props.myInvestigations.data.length}</span> </NavItem> </LinkContainer> { UI.menu.isOpenDataVisible && this.getOpenDataMenuItem() } { UI.menu.isClosedDataVisible && this.getClosedDataMenuItem() } { UI.menu.isMySelectionVisible && this.props.selection.datasetIds.length > 0 && <LinkContainer to='/selection'> <NavItem eventKey={3}> My Selection<span className="badge" style={{ marginLeft: '10px' }}>{this.props.selection.datasetIds.length}</span> </NavItem> </LinkContainer> } { (this.props.user.isAdministrator || this.props.scientistInstrumentInvestigations.data.length > 0) && <ManagerMenu user={this.props.user} getNewTag={this.getNewTag} scientistInstrumentInvestigations={this.props.scientistInstrumentInvestigations}></ManagerMenu> } </Nav> <Nav pullRight> <NavItem eventKey={2} onClick={this.onLogOutClicked} > <Glyphicon glyph="glyphicon glyphicon-log-out" /> Log out <strong>{this.props.user.fullName}</strong> </NavItem> </Nav> </Navbar.Collapse> </Navbar> <BreadCrumbs breadcrumbsList={this.props.breadcrumbsList}></BreadCrumbs> </div>) } } class ManagerMenu extends React.Component { getBeamlineList(instruments){ if (this.props.scientistInstrumentInvestigations.fetching) { return <LinkContainer to='/usermanagement'> <MenuItem eventKey={3.3}> Fetching beamlines<span style={{ marginLeft: '10px' }} className="glyphicon glyphicon-repeat fast-right-spinner"></span> </MenuItem> </LinkContainer>; } if (instruments && instruments.length > 0){ var _this = this; function getInvestigationCountByBeamlineName(beamlineName){ return <span className="badge" style={{ marginLeft: '10px' }}> {_.filter(_this.props.scientistInstrumentInvestigations.data, function(inv){ if (inv.investigationInstruments.length === 0) return; return inv.investigationInstruments[0].instrument.name === beamlineName}).length} </span>; } var items = instruments.sort().map((value, index) => { if (value) return <LinkContainer to={"/investigations?beamline="+ value}><MenuItem eventKey={3 + "." + index} key={index}>{value} {getInvestigationCountByBeamlineName(value)}</MenuItem></LinkContainer> }); return items; } return null; } render(){ var instruments = _.uniq(_.map(this.props.scientistInstrumentInvestigations.data, function(inv){ if (inv.investigationInstruments.length > 0){ return inv.investigationInstruments[0].instrument.name; } })); const navDropdownTitle = (<span>Manager <span className="badge" style={{ marginLeft: '10px' }}> { this.props.scientistInstrumentInvestigations.fetching && <span style={{ marginLeft: '10px' }} className="glyphicon glyphicon-repeat fast-right-spinner"></span> } { this.props.scientistInstrumentInvestigations.fetched && instruments.length } </span></span> ); return <NavDropdown eventKey={3} title={navDropdownTitle} id="basic-nav-dropdown"> <LinkContainer to='/usermanagement'> <MenuItem eventKey={3.3}> <Glyphicon glyph="user" /> <span style={{ marginLeft: '10px' }} >Beamline Managers {this.props.getNewTag()}</span> </MenuItem> </LinkContainer> { this.props.user.isAdministrator && <LinkContainer to='/manager/stats'> <MenuItem eventKey={3.4}> <Glyphicon glyph="stats" /> <span style={{ marginLeft: '10px' }} >Data Statistics {this.props.getNewTag()}</span> </MenuItem> </LinkContainer> } <MenuItem divider /> { this.getBeamlineList(instruments)} </NavDropdown> } }