mirror of
https://github.com/ansible/awx.git
synced 2026-01-16 20:30:46 -03:30
245 lines
12 KiB
JavaScript
245 lines
12 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import { I18nProvider, I18n } from '@lingui/react';
|
|
import { t } from '@lingui/macro';
|
|
import {
|
|
Redirect,
|
|
Switch,
|
|
withRouter
|
|
} from 'react-router-dom';
|
|
|
|
import {
|
|
BackgroundImage,
|
|
BackgroundImageSrc,
|
|
Nav,
|
|
NavList,
|
|
Page,
|
|
PageHeader,
|
|
PageSidebar,
|
|
Toolbar,
|
|
ToolbarGroup,
|
|
ToolbarItem
|
|
} from '@patternfly/react-core';
|
|
import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
|
|
|
|
import api from './api';
|
|
import { API_LOGOUT } from './endpoints';
|
|
|
|
import HelpDropdown from './components/HelpDropdown';
|
|
import LogoutButton from './components/LogoutButton';
|
|
import TowerLogo from './components/TowerLogo';
|
|
import ConditionalRedirect from './components/ConditionalRedirect';
|
|
import NavExpandableGroup from './components/NavExpandableGroup';
|
|
|
|
import Applications from './pages/Applications';
|
|
import Credentials from './pages/Credentials';
|
|
import CredentialTypes from './pages/CredentialTypes';
|
|
import Dashboard from './pages/Dashboard';
|
|
import InstanceGroups from './pages/InstanceGroups';
|
|
import Inventories from './pages/Inventories';
|
|
import InventoryScripts from './pages/InventoryScripts';
|
|
import Jobs from './pages/Jobs';
|
|
import Login from './pages/Login';
|
|
import ManagementJobs from './pages/ManagementJobs';
|
|
import NotificationTemplates from './pages/NotificationTemplates';
|
|
import Organizations from './pages/Organizations';
|
|
import Portal from './pages/Portal';
|
|
import Projects from './pages/Projects';
|
|
import Schedules from './pages/Schedules';
|
|
import AuthSettings from './pages/AuthSettings';
|
|
import JobsSettings from './pages/JobsSettings';
|
|
import SystemSettings from './pages/SystemSettings';
|
|
import UISettings from './pages/UISettings';
|
|
import License from './pages/License';
|
|
import Teams from './pages/Teams';
|
|
import Templates from './pages/Templates';
|
|
import Users from './pages/Users';
|
|
|
|
import ja from '../build/locales/ja/messages';
|
|
import en from '../build/locales/en/messages';
|
|
|
|
const catalogs = { en, ja };
|
|
|
|
// This spits out the language and the region. Example: es-US
|
|
const language = (navigator.languages && navigator.languages[0])
|
|
|| navigator.language
|
|
|| navigator.userLanguage;
|
|
|
|
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
|
|
|
|
|
|
class App extends React.Component {
|
|
constructor (props) {
|
|
super(props);
|
|
|
|
const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
|
|
this.state = {
|
|
isNavOpen
|
|
};
|
|
}
|
|
|
|
onNavToggle = () => {
|
|
this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
|
|
};
|
|
|
|
onLogoClick = () => {
|
|
this.setState({ activeGroup: 'views_group' });
|
|
}
|
|
|
|
onDevLogout = async () => {
|
|
await api.get(API_LOGOUT);
|
|
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
|
|
}
|
|
|
|
render () {
|
|
const { isNavOpen } = this.state;
|
|
const { logo, loginInfo, history } = this.props;
|
|
|
|
const PageToolbar = (
|
|
<Toolbar>
|
|
<ToolbarGroup>
|
|
<ToolbarItem>
|
|
<HelpDropdown />
|
|
</ToolbarItem>
|
|
<ToolbarItem>
|
|
<LogoutButton onDevLogout={() => this.onDevLogout()} />
|
|
</ToolbarItem>
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
);
|
|
|
|
return (
|
|
<I18nProvider language={languageWithoutRegionCode} catalogs={catalogs}>
|
|
<Fragment>
|
|
<BackgroundImage
|
|
src={{
|
|
[BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
|
|
[BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
|
|
[BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
|
|
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
|
|
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
|
|
[BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
|
|
[BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
|
|
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
|
|
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
|
|
}}
|
|
/>
|
|
<Switch>
|
|
<ConditionalRedirect
|
|
shouldRedirect={() => api.isAuthenticated()}
|
|
redirectPath="/"
|
|
path="/login"
|
|
component={() => <Login logo={logo} loginInfo={loginInfo} />}
|
|
/>
|
|
<Fragment>
|
|
<Page
|
|
header={(
|
|
<PageHeader
|
|
logo={<TowerLogo onClick={this.onLogoClick} />}
|
|
toolbar={PageToolbar}
|
|
showNavToggle
|
|
onNavToggle={this.onNavToggle}
|
|
/>
|
|
)}
|
|
sidebar={(
|
|
<PageSidebar
|
|
isNavOpen={isNavOpen}
|
|
nav={(
|
|
<I18n>
|
|
{({ i18n }) => (
|
|
<Nav aria-label={i18n._(t`Primary Navigation`)}>
|
|
<NavList>
|
|
<NavExpandableGroup
|
|
groupId="views_group"
|
|
title={i18n._("Views")}
|
|
routes={[
|
|
{ path: '/home', title: i18n._('Dashboard') },
|
|
{ path: '/jobs', title: i18n._('Jobs') },
|
|
{ path: '/schedules', title: i18n._('Schedules') },
|
|
{ path: '/portal', title: i18n._('Portal Mode') },
|
|
]}
|
|
/>
|
|
<NavExpandableGroup
|
|
groupId="resources_group"
|
|
title={i18n._("Resources")}
|
|
routes={[
|
|
{ path: '/templates', title: i18n._('Templates') },
|
|
{ path: '/credentials', title: i18n._('Credentials') },
|
|
{ path: '/projects', title: i18n._('Projects') },
|
|
{ path: '/inventories', title: i18n._('Inventories') },
|
|
{ path: '/inventory_scripts', title: i18n._('Inventory Scripts') }
|
|
]}
|
|
/>
|
|
<NavExpandableGroup
|
|
groupId="access_group"
|
|
title={i18n._("Access")}
|
|
routes={[
|
|
{ path: '/organizations', title: i18n._('Organizations') },
|
|
{ path: '/users', title: i18n._('Users') },
|
|
{ path: '/teams', title: i18n._('Teams') }
|
|
]}
|
|
/>
|
|
<NavExpandableGroup
|
|
groupId="administration_group"
|
|
title={i18n._("Administration")}
|
|
routes={[
|
|
{ path: '/credential_types', title: i18n._('Credential Types') },
|
|
{ path: '/notification_templates', title: i18n._('Notifications') },
|
|
{ path: '/management_jobs', title: i18n._('Management Jobs') },
|
|
{ path: '/instance_groups', title: i18n._('Instance Groups') },
|
|
{ path: '/applications', title: i18n._('Integrations') }
|
|
]}
|
|
/>
|
|
<NavExpandableGroup
|
|
groupId="settings_group"
|
|
title={i18n._("Settings")}
|
|
routes={[
|
|
{ path: '/auth_settings', title: i18n._('Authentication') },
|
|
{ path: '/jobs_settings', title: i18n._('Jobs') },
|
|
{ path: '/system_settings', title: i18n._('System') },
|
|
{ path: '/ui_settings', title: i18n._('User Interface') },
|
|
{ path: '/license', title: i18n._('License') }
|
|
]}
|
|
/>
|
|
</NavList>
|
|
</Nav>
|
|
)}
|
|
</I18n>
|
|
)}
|
|
/>
|
|
)}
|
|
useCondensed
|
|
>
|
|
<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} />
|
|
<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" path="/credentials" component={Credentials} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/notification_templates" component={NotificationTemplates} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
|
|
<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>
|
|
</I18nProvider>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(App);
|