ES6 Plato on Github
Report Home
Summary Display
App.js
Maintainability
76.37
Lines of code
392
Difficulty
33.08
Estimated Errors
2.01
Function weight
By Complexity
By SLOC
import React, { Component } from 'react'; import { connect } from 'react-redux'; import './App.css'; import "babel-polyfill"; import { Panel, Glyphicon, Alert, Grid, Row, Col } from 'react-bootstrap'; import LoginContainer from './containers/LoginContainer.js'; import ExpirationLoginContainer from './containers/ExpirationLoginContainer.js'; import InvestigationsContainer from './containers/InvestigationsContainer.js'; import DataCollectionsContainer from './containers/DataCollectionsContainer.js'; import CameraContainer from './containers/CameraContainer.js'; import MenuContainer from './containers/MenuContainer.js'; import InvestigationContainer from './containers/Investigation/InvestigationContainer.js'; import SearchContainer from './containers/SearchContainer.js'; import SelectionContainer from './containers/Selection/SelectionContainer.js'; import MintSelectionContainer from './containers/Selection/MintSelectionContainer.js'; import UserManagementContainer from './containers/UserManagementContainer.js'; import DataStatisticsContainer from './containers/DataStatisticsContainer.js'; import Footer from './components/Footer.js'; import { BrowserRouter as Router, Route } from "react-router-dom"; import _ from 'lodash'; import tinyParams from 'tiny-params'; import UI from './config/ui/config.js'; import maintenanceImage from './images/maintenance.jpg'; import maintenanceImage2 from './images/maintenance2.jpg'; import maintenanceImage3 from './images/maintenance3.jpg'; import maintenanceImage4 from './images/maintenance4.jpg'; import TagsManagerContainer from './containers/Logbook/Tags/TagsManagerContainer'; class App extends Component { render() { if (UI.status.offline.enabled == true) { return <Router> <div> <Route path="/" component={OfflinePage} /> </div> </Router> } return ( <Router> <div> <Route exact path="/" component={MyDataPage} /> <Route exact path="/home" component={MyDataPage} /> <Route exact path="/search" component={MySearchPage} /> <Route exact path="/investigations" render={props => (<MyDataPage location={props.location} {...this.props} />)} /> <Route exact path="/usermanagement" component={UserManagementPage} /> <Route exact path="/public" render={props => (<OpenDataPage {...this.props} />)} /> <Route exact path="/public/:prefix/:suffix" component={DOIPage} /> <Route exact path="/closed" render={props => (<ClosedDataPage {...this.props} />)} /> <Route exact path="/investigation/:investigationId/datasets" component={DatasetsPage} /> <Route exact path="/investigation/:investigationId/events/tagManager" component={EventTagPage} /> <Route exact path="/investigation/:investigationId/events" component={EventsPage} /> <Route exact path="/investigation/:investigationId/camera" component={CameraPage} /> <Route exact path="/selection" component={SelectionPage} /> <Route exact path="/selection/mint" component={MintSelectionPage} /> <Route exact path="/manager/stats" component={ManagerStatsPage} /> <Footer></Footer> </div> </Router> ); } } class OfflinePage extends React.Component { render() { return ( <div> <MenuContainer /> <Grid style={{ marginTop: 100 }}> <Row> <Col xs={3}><img alt="" src={maintenanceImage} style={{ height: '200px', widht: '200px' }} /></Col> <Col xs={3}></Col> <Col xs={3}><img alt="" src={maintenanceImage3} style={{ height: '200px', widht: '200px' }} /></Col> <Col xs={3}></Col> </Row> <Row> <Col></Col> <Col> <Alert style={{ textAlign: 'center' }} bsStyle="warning"> <strong>Offline Message!</strong><br /> <h1>{UI.status.offline.message}</h1> </Alert> </Col> <Col> <Col xs={3}></Col> <Col xs={3}><img alt="" src={maintenanceImage2} style={{ height: '200px', widht: '200px' }} /></Col> <Col xs={3}></Col> <Col xs={3}><img alt="" src={maintenanceImage4} style={{ height: '200px', widht: '200px' }} /></Col> </Col> </Row> </Grid> <Footer></Footer> </div> ); } } class DOIPage extends React.Component { render() { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <InvestigationContainer doi={this.props.match.params.prefix + "/" + this.props.match.params.suffix} isDOI={true} activeTab={1} {...this.props} /> </div> ); } } class UserManagementPage extends React.Component { render() { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <div style={{ marginTop: '30px', marginLeft: '30px', marginRight: '30px' }}> <UserManagementContainer {...this.props}></UserManagementContainer> </div> </div> ); } } class ManagerStatsPage extends React.Component { render() { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <div style={{ marginTop: '30px', marginLeft: '30px', marginRight: '30px' }}> <DataStatisticsContainer {...this.props}></DataStatisticsContainer> </div> </div> ); } } class SelectionPage extends React.Component { render() { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <SelectionContainer {...this.props} /> </div> ); } } class MintSelectionPage extends React.Component { render() { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <MintSelectionContainer investigationId={this.props.match.params.investigationId} {...this.props} /> </div> ); } } class MySearchPage extends React.Component { render() { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <div style={{ marginTop: '30px', marginLeft: '30px', marginRight: '30px' }}> <SearchContainer linkProposal={true} openData={true} investigations={this.props.myInvestigations} /> </div> </div> ); } } class MyDataPage extends React.Component { render() { var investigations = this.props.myInvestigations; var params = tinyParams(window.location.href) /** Filter by beamline Name */ if (params.beamline) { var _this = this; investigations = { data : _.filter(this.props.scientistInstrumentInvestigations.data, function(inv){ if (inv.investigationInstruments.length == 0){ //** some old investigation might have not instrument **/ return; } return inv.investigationInstruments[0].instrument.name == params.beamline;}), fetching : false, fetched : true } } return ( <div > <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <div style={{ marginTop: '30px', marginLeft: '30px', marginRight: '30px' }}> <InvestigationsContainer showInvestigationStats={true} linkProposal={true} openData={true} investigations={investigations} /> </div> </div> ); } } class ClosedDataPage extends React.Component { render() { if ((!this.props.user) || (!this.props.user.sessionId)) { return <div> <MenuContainer /> <LoginContainer /> </div>; } return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <Panel bsStyle='danger' style={{ marginTop: '30px', marginLeft: '30px', marginRight: '30px' }}> <Panel.Heading> <Panel.Title componentClass="h2"> <Glyphicon glyph="lock" style={{ marginRight: "10px" }} />These investigations are under embargo</Panel.Title> </Panel.Heading> <Panel> <Panel.Body> <InvestigationsContainer showInvestigationStats={this.props.user.isAdministrator} linkProposal={false} investigations={this.props.investigations} openData={false} {...this.props} /> </Panel.Body> </Panel> </Panel> </div> ); } } class OpenDataPage extends React.Component { render() { if ((!this.props.user) || (!this.props.user.sessionId)) { return <div> <MenuContainer /> <LoginContainer /> </div>; } var filterNotPublications = function (data) { return _.filter(data, function (o) { return _.find(o.parameters, function (p) { return (p.name == "instrumentNames" && p.value == "PUBLISHER") }) }); } var filterPublications = function (data) { return _.filter(data, function (o) { return _.find(o.parameters, function (p) { return (p.name == "instrumentNames" && p.value != "PUBLISHER") }) }); } return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <Panel bsStyle="primary" style={{ marginTop: '30px', marginLeft: '30px', marginRight: '30px' }}> <Panel.Heading > <Panel.Title componentClass="h2"> <Glyphicon glyph="eye-open" /> Open Data Collections</Panel.Title> </Panel.Heading> <Panel.Body> <DataCollectionsContainer filterFunction={filterPublications} openData={true} /> </Panel.Body> </Panel> <Panel bsStyle="success" style={{ marginTop: '30px', marginLeft: '30px', marginRight: '30px' }}> <Panel.Heading > <Panel.Title componentClass="h2"> <Glyphicon glyph="eye-open" /> Public Documents</Panel.Title> </Panel.Heading> <Panel.Body> <DataCollectionsContainer filterFunction={filterNotPublications} openData={true} /> </Panel.Body> </Panel> <Panel bsStyle="primary" style={{ marginTop: '30px', marginLeft: '30px', marginRight: '30px' }}> <Panel.Heading > <Panel.Title componentClass="h2"> <Glyphicon glyph="eye-open" /> Open Investigations</Panel.Title> </Panel.Heading> <Panel.Body> <InvestigationsContainer linkProposal={true} investigations={this.props.releasedInvestigations} closedData={false} showInvestigationStats={true} /> </Panel.Body> </Panel> </div> ); } } function DatasetsPage(props) { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <InvestigationContainer activeTab={1} investigationId={props.match.params.investigationId} {...props} /> </div> ); } function EventsPage(props) { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <InvestigationContainer activeTab={3} investigationId={props.match.params.investigationId} {...props} /> </div> ); } function EventTagPage(props) { return ( <div> <MenuContainer /> <LoginContainer /> <ExpirationLoginContainer></ExpirationLoginContainer> <TagsManagerContainer investigationId={props.match.params.investigationId} /> </div> ); } function CameraPage(props) { return ( <div> <CameraContainer investigationId={props.match.params.investigationId} /> </div> ); } function mapStateToProps(state) { return { user: state.user, selection: state.selection, datasets: state.datasets, investigations: state.investigations, myInvestigations: state.myInvestigations, scientistInstrumentInvestigations: state.scientistInstrumentInvestigations, releasedInvestigations: state.releasedInvestigations }; } export default (connect( mapStateToProps )(App));