import React from 'react'; import { Nav, NavList } from '@patternfly/react-core'; import EventEmitter from 'wolfy87-eventemitter'; import { NavLink, Route, Switch } from 'react-router-dom'; import { Dashboard } from './dashboard'; import { ReportBuilder } from './report-builder'; import { RunList } from './run-list'; import { Run } from './run'; import { ResultList } from './result-list'; import { Result } from './result'; import { Settings } from './settings'; import { View, IbutsuPage } from './components'; import { HttpClient } from './services/http'; import { getActiveProject } from './utilities'; import './app.css'; export class App extends React.Component { constructor(props) { super(props); this.eventEmitter = new EventEmitter(); this.state = { uploadFileName: '', importId: '', notifications: [], searchValue: '', views: [] }; this.eventEmitter.on('projectChange', () => { this.getViews(); }); } getViews() { let params = {'filter': ['type=view', 'navigable=true']}; let project = getActiveProject(); if (project) { params['filter'].push('project_id=' + project.id); } HttpClient.get([Settings.serverUrl, 'widget-config'], params) .then(response => HttpClient.handleResponse(response)) .then(data => { data.widgets.forEach(widget => { if (project) { widget.params['project'] = project.id; } else { delete widget.params['project']; } }); this.setState({views: data.widgets}); }); } componentDidMount() { this.getViews(); } render() { document.title = 'Ibutsu'; const { views } = this.state; const navigation = ( <Nav onSelect={this.onNavSelect} theme="dark" aria-label="Nav"> <NavList> <li className="pf-c-nav__item"> <NavLink to="/" className="pf-c-nav__link" activeClassName="pf-m-active" exact>Dashboard</NavLink> </li> <li className="pf-c-nav__item"> <NavLink to="/runs" className="pf-c-nav__link" activeClassName="pf-m-active">Runs</NavLink> </li> <li className="pf-c-nav__item"> <NavLink to="/results" className="pf-c-nav__link" activeClassName="pf-m-active">Test Results</NavLink> </li> <li className="pf-c-nav__item"> <NavLink to="/reports" className="pf-c-nav__link" activeClassName="pf-m-active">Report Builder</NavLink> </li> {views && views.map(view => ( <li className="pf-c-nav__item" key={view.id}> <NavLink to={`/view/${view.id}`} className="pf-c-nav__link" activeClassName="pf-m-active">{view.title}</NavLink> </li> ))} </NavList> </Nav> ); return ( <React.Fragment> <IbutsuPage eventEmitter={this.eventEmitter} navigation={navigation}> <Switch> <Route path="/" exact render={routerProps => ( <Dashboard eventEmitter={this.eventEmitter} {...routerProps} /> )} /> <Route path="/runs" exact render={routerProps => ( <RunList eventEmitter={this.eventEmitter} {...routerProps} /> )} /> <Route path="/results" exact render={routerProps => ( <ResultList eventEmitter={this.eventEmitter} {...routerProps} /> )} /> <Route path="/reports" exact render={routerProps => ( <ReportBuilder eventEmitter={this.eventEmitter} {...routerProps} /> )} /> <Route path="/runs/:id" component={Run} /> <Route path="/results/:id" component={Result} /> <Route path="/view/:id" component={View} /> </Switch> </IbutsuPage> </React.Fragment> ); } }