External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-20 02:17:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

Update active nav item based on url

Browse Source
This commit is contained in:
Marliana Lara
2018-12-03 13:17:53 -05:00
parent 1e7ab9deed
commit 9341c4660c
3 changed files with 306 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
__tests__/App.test.jsx
View File

@@ -1,5 +1,8 @@
import React from 'react'; import React from 'react';
import { HashRouter as Router } from 'react-router-dom';
import { shallow, mount } from 'enzyme'; import { shallow, mount } from 'enzyme';
import { createMemoryHistory } from 'history'
import App from '../src/App'; import App from '../src/App';
import api from '../src/api'; import api from '../src/api';
import { API_LOGOUT } from '../src/endpoints'; import { API_LOGOUT } from '../src/endpoints';
@@ -21,7 +24,7 @@ describe('<App />', () => {
api.isAuthenticated = jest.fn(); api.isAuthenticated = jest.fn();
api.isAuthenticated.mockReturnValue(false); api.isAuthenticated.mockReturnValue(false);
const appWrapper = mount(<App />); const appWrapper = mount(<Router><App /></Router>);
const login = appWrapper.find(Login); const login = appWrapper.find(Login);
expect(login.length).toBe(1); expect(login.length).toBe(1);
@@ -33,7 +36,7 @@ describe('<App />', () => {
api.isAuthenticated = jest.fn(); api.isAuthenticated = jest.fn();
api.isAuthenticated.mockReturnValue(true); api.isAuthenticated.mockReturnValue(true);
const appWrapper = mount(<App />); const appWrapper = mount(<Router><App /></Router>);
const dashboard = appWrapper.find(Dashboard); const dashboard = appWrapper.find(Dashboard);
expect(dashboard.length).toBe(1); expect(dashboard.length).toBe(1);
@@ -42,39 +45,47 @@ describe('<App />', () => {
}); });
test('onNavSelect sets state.activeItem and state.activeGroup', () => { test('onNavSelect sets state.activeItem and state.activeGroup', () => {
const appWrapper = shallow(<App />); const history = createMemoryHistory('/jobs');
appWrapper.instance().onNavSelect({ itemId: 'foo', groupId: 'bar' }); const appWrapper = shallow(<App.WrappedComponent history={history} />);
expect(appWrapper.state().activeItem).toBe('foo');
appWrapper.instance().onNavSelect({ groupId: 'bar' });
expect(appWrapper.state().activeGroup).toBe('bar'); expect(appWrapper.state().activeGroup).toBe('bar');
}); });
test('onNavToggle sets state.isNavOpen to opposite', () => { test('onNavToggle sets state.isNavOpen to opposite', () => {
const appWrapper = shallow(<App />); const history = createMemoryHistory('/jobs');
const appWrapper = shallow(<App.WrappedComponent history={history} />);
expect(appWrapper.state().isNavOpen).toBe(true); expect(appWrapper.state().isNavOpen).toBe(true);
appWrapper.instance().onNavToggle(); appWrapper.instance().onNavToggle();
expect(appWrapper.state().isNavOpen).toBe(false); expect(appWrapper.state().isNavOpen).toBe(false);
}); });
test('onLogoClick sets selected nav back to defaults', () => { test('onLogoClick sets selected nav back to defaults', () => {
const appWrapper = shallow(<App />); const history = createMemoryHistory('/jobs');
const appWrapper = shallow(<App.WrappedComponent history={history} />);
appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' }); appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
expect(appWrapper.state().activeItem).toBe('bar'); expect(appWrapper.state().activeItem).toBe('bar');
expect(appWrapper.state().activeGroup).toBe('foo'); expect(appWrapper.state().activeGroup).toBe('foo');
appWrapper.instance().onLogoClick(); appWrapper.instance().onLogoClick();
expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP); expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
}); });
test('api.logout called from logout button', async () => { test('api.logout called from logout button', async () => {
api.get = jest.fn().mockImplementation(() => Promise.resolve({})); api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
const appWrapper = mount(<App />); let appWrapper = mount(<Router><App /></Router>);
const logoutButton = appWrapper.find('LogoutButton'); let logoutButton = appWrapper.find('LogoutButton');
logoutButton.props().onDevLogout(); logoutButton.props().onDevLogout();
appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' }); appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
await asyncFlush();
expect(api.get).toHaveBeenCalledTimes(1); expect(api.get).toHaveBeenCalledTimes(1);
expect(api.get).toHaveBeenCalledWith(API_LOGOUT); expect(api.get).toHaveBeenCalledWith(API_LOGOUT);
await asyncFlush();
expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM); console.log(appWrapper.state());
expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP); expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
}); });
}); });

545
src/App.jsx
View File

@@ -1,8 +1,8 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { import {
HashRouter as Router,
Redirect, Redirect,
Switch, Switch,
withRouter
} from 'react-router-dom'; } from 'react-router-dom';
import { import {
@@ -61,13 +61,11 @@ class App extends React.Component {
this.state = { this.state = {
isNavOpen, isNavOpen,
activeGroup: 'views_group', activeGroup: 'views_group',
activeItem: 'views_group_dashboard'
}; };
} }
onNavSelect = result => { onNavSelect = result => {
this.setState({ this.setState({
activeItem: result.itemId,
activeGroup: result.groupId activeGroup: result.groupId
}); });
}; };
@@ -77,16 +75,31 @@ class App extends React.Component {
}; };
onLogoClick = () => { onLogoClick = () => {
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); this.setState({ activeGroup: 'views_group' });
} }
onDevLogout = async () => { onDevLogout = async () => {
console.log('called')
await api.get(API_LOGOUT); await api.get(API_LOGOUT);
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
console.log(this.state);
} }
expand = (path, group) => {
const { history } = this.props;
const { activeGroup } = this.state;
const currentPath = history.location.pathname.split('/')[1];
if ((path === currentPath) && (group !== activeGroup)) {
this.setState({ activeGroup: group });
}
return (path === currentPath);
};
render () { render () {
const { activeItem, activeGroup, isNavOpen } = this.state; console.log('render');
const { activeGroup, isNavOpen } = this.state;
const { logo, loginInfo } = this.props; const { logo, loginInfo } = this.props;
const PageToolbar = ( const PageToolbar = (
@@ -103,279 +116,277 @@ class App extends React.Component {
); );
return ( return (
<Router> <Fragment>
<Fragment> <BackgroundImage
<BackgroundImage src={{
src={{ [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
[BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg', [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
[BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg', [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
[BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg', [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg', [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg', [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
[BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg', [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
[BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg', [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg', [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg' }}
}} />
/> <Switch>
<Switch> <ConditionalRedirect shouldRedirect={() => api.isAuthenticated()} redirectPath="/" path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
<ConditionalRedirect shouldRedirect={() => api.isAuthenticated()} redirectPath="/" path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} /> <Fragment>
<Fragment> <Page
<Page header={(
header={( <PageHeader
<PageHeader logo={<TowerLogo onClick={this.onLogoClick} />}
logo={<TowerLogo onClick={this.onLogoClick} />} toolbar={PageToolbar}
toolbar={PageToolbar} showNavToggle
showNavToggle onNavToggle={this.onNavToggle}
onNavToggle={this.onNavToggle} />
/> )}
)} sidebar={(
sidebar={( <PageSidebar
<PageSidebar isNavOpen={isNavOpen}
isNavOpen={isNavOpen} nav={(
nav={( <Nav onSelect={this.onNavSelect} aria-label="Primary Navigation">
<Nav onSelect={this.onNavSelect} aria-label="Primary Navigation"> <NavList>
<NavList> <NavExpandable
<NavExpandable title="Views"
title="Views" groupId="views_group"
isActive={activeGroup === 'views_group'}
isExpanded={activeGroup === 'views_group'}
>
<NavItem
to="#/home"
groupId="views_group" groupId="views_group"
isActive={activeGroup === 'views_group'} itemId="views_group_dashboard"
isExpanded={activeGroup === 'views_group'} isActive={this.expand('home', 'views_group')}
> >
<NavItem Dashboard
to="#/home" </NavItem>
groupId="views_group" <NavItem
itemId="views_group_dashboard" to="#/jobs"
isActive={activeItem === 'views_group_dashboard'} groupId="views_group"
> itemId="views_group_jobs"
Dashboard isActive={this.expand('jobs', 'views_group')}
</NavItem> >
<NavItem Jobs
to="#/jobs" </NavItem>
groupId="views_group" <NavItem
itemId="views_group_jobs" to="#/schedules"
isActive={activeItem === 'views_group_jobs'} groupId="views_group"
> itemId="views_group_schedules"
Jobs isActive={this.expand('schedules', 'views_group')}
</NavItem> >
<NavItem Schedules
to="#/schedules" </NavItem>
groupId="views_group" <NavItem
itemId="views_group_schedules" to="#/portal"
isActive={activeItem === 'views_group_schedules'} groupId="views_group"
> itemId="views_group_portal"
Schedules isActive={this.expand('portal', 'views_group')}
</NavItem> >
<NavItem My View
to="#/portal" </NavItem>
groupId="views_group" </NavExpandable>
itemId="views_group_portal" <NavExpandable
isActive={activeItem === 'views_group_portal'} title="Resources"
> groupId="resources_group"
My View isActive={activeGroup === 'resources_group'}
</NavItem> isExpanded={activeGroup === 'resources_group'}
</NavExpandable> >
<NavExpandable <NavItem
title="Resources" to="#/templates"
groupId="resources_group" groupId="resources_group"
isActive={activeGroup === 'resources_group'} itemId="resources_group_templates"
isExpanded={activeGroup === 'resources_group'} isActive={this.expand('templates', 'resources_group')}
> >
<NavItem Templates
to="#/templates" </NavItem>
groupId="resources_group" <NavItem
itemId="resources_group_templates" to="#/credentials"
isActive={activeItem === 'resources_group_templates'} groupId="resources_group"
> itemId="resources_group_credentials"
Templates isActive={this.expand('credentials', 'resources_group')}
</NavItem> >
<NavItem Credentials
to="#/credentials" </NavItem>
groupId="resources_group" <NavItem
itemId="resources_group_credentials" to="#/projects"
isActive={activeItem === 'resources_group_credentials'} groupId="resources_group"
> itemId="resources_group_projects"
Credentials isActive={this.expand('projects', 'resources_group')}
</NavItem> >
<NavItem Projects
to="#/projects" </NavItem>
groupId="resources_group" <NavItem
itemId="resources_group_projects" to="#/inventories"
isActive={activeItem === 'resources_group_projects'} groupId="resources_group"
> itemId="resources_group_inventories"
Projects isActive={this.expand('inventories', 'resources_group')}
</NavItem> >
<NavItem Inventories
to="#/inventories" </NavItem>
groupId="resources_group" <NavItem
itemId="resources_group_inventories" to="#/inventory_scripts"
isActive={activeItem === 'resources_group_inventories'} groupId="resources_group"
> itemId="resources_group_inventory_scripts"
Inventories isActive={this.expand('inventory_scripts', 'resources_group')}
</NavItem> >
<NavItem Inventory Scripts
to="#/inventory_scripts" </NavItem>
groupId="resources_group" </NavExpandable>
itemId="resources_group_inventory_scripts" <NavExpandable
isActive={activeItem === 'resources_group_inventory_scripts'} title="Access"
> groupId="access_group"
Inventory Scripts isActive={activeGroup === 'access_group'}
</NavItem> isExpanded={activeGroup === 'access_group'}
</NavExpandable> >
<NavExpandable <NavItem
title="Access" to="#/organizations"
groupId="access_group" groupId="access_group"
isActive={activeGroup === 'access_group'} itemId="access_group_organizations"
isExpanded={activeGroup === 'access_group'} isActive={this.expand('organizations', 'access_group')}
> >
<NavItem Organizations
to="#/organizations" </NavItem>
groupId="access_group" <NavItem
itemId="access_group_organizations" to="#/users"
isActive={activeItem === 'access_group_organizations'} groupId="access_group"
> itemId="access_group_users"
Organizations isActive={this.expand('users', 'access_group')}
</NavItem> >
<NavItem Users
to="#/users" </NavItem>
groupId="access_group" <NavItem
itemId="access_group_users" to="#/teams"
isActive={activeItem === 'access_group_users'} groupId="access_group"
> itemId="access_group_teams"
Users isActive={this.expand('teams', 'access_group')}
</NavItem> >
<NavItem Teams
to="#/teams" </NavItem>
groupId="access_group" </NavExpandable>
itemId="access_group_teams" <NavExpandable
isActive={activeItem === 'access_group_teams'} title="Administration"
> groupId="administration_group"
Teams isActive={activeGroup === 'administration_group'}
</NavItem> isExpanded={activeGroup === 'administration_group'}
</NavExpandable> >
<NavExpandable <NavItem
title="Administration" to="#/credential_types"
groupId="administration_group" groupId="administration_group"
isActive={activeGroup === 'administration_group'} itemId="administration_group_credential_types"
isExpanded={activeGroup === 'administration_group'} isActive={this.expand('credential_types', 'administration_group')}
> >
<NavItem Credential Types
to="#/credential_types" </NavItem>
groupId="administration_group" <NavItem
itemId="administration_group_credential_types" to="#/notification_templates"
isActive={activeItem === 'administration_group_credential_types'} groupId="administration_group"
> itemId="administration_group_notification_templates"
Credential Types isActive={this.expand('notification_templates', 'administration_group')}
</NavItem> >
<NavItem Notification Templates
to="#/notification_templates" </NavItem>
groupId="administration_group" <NavItem
itemId="administration_group_notification_templates" to="#/management_jobs"
isActive={activeItem === 'administration_group_notification_templates'} groupId="administration_group"
> itemId="administration_group_management_jobs"
Notification Templates isActive={this.expand('management_jobs', 'administration_group')}
</NavItem> >
<NavItem Management Jobs
to="#/management_jobs" </NavItem>
groupId="administration_group" <NavItem
itemId="administration_group_management_jobs" to="#/instance_groups"
isActive={activeItem === 'administration_group_management_jobs'} groupId="administration_group"
> itemId="administration_group_instance_groups"
Management Jobs isActive={this.expand('instance_groups', 'administration_group')}
</NavItem> >
<NavItem Instance Groups
to="#/instance_groups" </NavItem>
groupId="administration_group" <NavItem
itemId="administration_group_instance_groups" to="#/applications"
isActive={activeItem === 'administration_group_instance_groups'} groupId="administration_group"
> itemId="administration_group_applications"
Instance Groups isActive={this.expand('applications', 'administration_group')}
</NavItem> >
<NavItem Applications
to="#/applications" </NavItem>
groupId="administration_group" </NavExpandable>
itemId="administration_group_applications" <NavExpandable
isActive={activeItem === 'administration_group_applications'} title="Settings"
> groupId="settings_group"
Applications isActive={activeGroup === 'settings_group'}
</NavItem> isExpanded={activeGroup === 'settings_group'}
</NavExpandable> >
<NavExpandable <NavItem
title="Settings" to="#/auth_settings"
groupId="settings_group" groupId="settings_group"
isActive={activeGroup === 'settings_group'} itemId="settings_group_auth"
isExpanded={activeGroup === 'settings_group'} isActive={this.expand('auth_settings', 'settings_group')}
> >
<NavItem Authentication
to="#/auth_settings" </NavItem>
groupId="settings_group" <NavItem
itemId="settings_group_auth" to="#/jobs_settings"
isActive={activeItem === 'settings_group_auth'} groupId="settings_group"
> itemId="settings_group_jobs"
Authentication isActive={this.expand('jobs_settings', 'settings_group')}
</NavItem> >
<NavItem Jobs
to="#/jobs_settings" </NavItem>
groupId="settings_group" <NavItem
itemId="settings_group_jobs" to="#/system_settings"
isActive={activeItem === 'settings_group_jobs'} groupId="settings_group"
> itemId="settings_group_system"
Jobs isActive={this.expand('system_settings', 'settings_group')}
</NavItem> >
<NavItem System
to="#/system_settings" </NavItem>
groupId="settings_group" <NavItem
itemId="settings_group_system" to="#/ui_settings"
isActive={activeItem === 'settings_group_system'} groupId="settings_group"
> itemId="settings_group_ui"
System isActive={this.expand('ui_settings', 'settings_group')}
</NavItem> >
<NavItem User Interface
to="#/ui_settings" </NavItem>
groupId="settings_group" </NavExpandable>
itemId="settings_group_ui" </NavList>
isActive={activeItem === 'settings_group_ui'} </Nav>
> )}
User Interface />
</NavItem> )}
</NavExpandable> useCondensed
</NavList> >
</Nav> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
)} <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
/> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
)} <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} />
useCondensed <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} />
> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/schedules" component={Schedules} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/portal" component={Portal} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/templates" component={Templates} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credentials" component={Credentials} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} /> <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} /> </Page>
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} /> </Fragment>
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} /> </Switch>
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} /> </Fragment>
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
</Page>
</Fragment>
</Switch>
</Fragment>
</Router>
); );
} }
} }
export default App; export default withRouter(App);

7
src/index.jsx
View File

@@ -1,6 +1,9 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import {
HashRouter as Router
} from 'react-router-dom';
import App from './App'; import App from './App';
import api from './api'; import api from './api';
import { API_ROOT } from './endpoints'; import { API_ROOT } from './endpoints';
@@ -15,8 +18,8 @@ import './components/DataListToolbar/styles.scss';
const el = document.getElementById('app'); const el = document.getElementById('app');
const main = async () => { const main = async () => {
const { custom_logo, custom_login_info } = await api.get(API_ROOT); const { custom_logo, custom_login_info } = await api.get(API_ROOT);
render(<App logo={custom_logo} loginInfo={custom_login_info} />, el); render(<Router><App logo={custom_logo} loginInfo={custom_login_info} /></Router>, el);
}; };
main(); main();