mirror of
https://github.com/ansible/awx.git
synced 2026-01-15 03:40:42 -03:30
a217a387c6
- Use component state to handle rendering of Ansible Select dropdown based on the number of custom virtualenvs the API returns.
322 lines
14 KiB
JavaScript
322 lines
14 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
<<<<<<< HEAD
|
|
import { I18nProvider, I18n } from '@lingui/react';
|
|
import { t } from '@lingui/macro';
|
|
=======
|
|
import { ConfigContext } from './context';
|
|
|
|
>>>>>>> Implement React Context API
|
|
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, API_CONFIG } 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,
|
|
config: {},
|
|
error: false,
|
|
};
|
|
}
|
|
|
|
onNavToggle = () => {
|
|
this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
|
|
};
|
|
|
|
onDevLogout = async () => {
|
|
await api.get(API_LOGOUT);
|
|
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
|
|
}
|
|
|
|
async componentDidMount() {
|
|
// Grab our config data from the API and store in state
|
|
try {
|
|
const { data } = await api.get(API_CONFIG);
|
|
this.setState({ config: data });
|
|
} catch (error) {
|
|
this.setState({ error });
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { isNavOpen, config } = 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={(
|
|
<Nav aria-label="Primary Navigation">
|
|
<NavList>
|
|
<SideNavItems
|
|
history={history}
|
|
items={[
|
|
{
|
|
groupName: 'views',
|
|
title: 'Views',
|
|
routes: [
|
|
{
|
|
path: 'home',
|
|
title: 'Dashboard'
|
|
},
|
|
{
|
|
path: 'jobs',
|
|
title: 'Jobs'
|
|
},
|
|
{
|
|
path: 'schedules',
|
|
title: 'Schedules'
|
|
},
|
|
{
|
|
path: 'portal',
|
|
title: 'Portal Mode'
|
|
},
|
|
]
|
|
},
|
|
{
|
|
groupName: 'resources',
|
|
title: 'Resources',
|
|
routes: [
|
|
{
|
|
path: 'templates',
|
|
title: 'Templates'
|
|
},
|
|
{
|
|
path: 'credentials',
|
|
title: 'Credentials'
|
|
},
|
|
{
|
|
path: 'projects',
|
|
title: 'Projects'
|
|
},
|
|
{
|
|
path: 'inventories',
|
|
title: 'Inventories'
|
|
},
|
|
{
|
|
path: 'inventory_scripts',
|
|
title: 'Inventory Scripts'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
groupName: 'access',
|
|
title: 'Access',
|
|
routes: [
|
|
{
|
|
path: 'organizations',
|
|
title: 'Organizations'
|
|
},
|
|
{
|
|
path: 'users',
|
|
title: 'Users'
|
|
},
|
|
{
|
|
path: 'teams',
|
|
title: 'Teams'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
groupName: 'administration',
|
|
title: 'Administration',
|
|
routes: [
|
|
{
|
|
path: 'credential_types',
|
|
title: 'Credential Types',
|
|
},
|
|
{
|
|
path: 'notification_templates',
|
|
title: 'Notifications'
|
|
},
|
|
{
|
|
path: 'management_jobs',
|
|
title: 'Management Jobs'
|
|
},
|
|
{
|
|
path: 'instance_groups',
|
|
title: 'Instance Groups'
|
|
},
|
|
{
|
|
path: 'applications',
|
|
title: 'Integrations'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
groupName: 'settings',
|
|
title: 'Settings',
|
|
routes: [
|
|
{
|
|
path: 'auth_settings',
|
|
title: 'Authentication',
|
|
},
|
|
{
|
|
path: 'jobs_settings',
|
|
title: 'Jobs'
|
|
},
|
|
{
|
|
path: 'system_settings',
|
|
title: 'System'
|
|
},
|
|
{
|
|
path: 'ui_settings',
|
|
title: 'User Interface'
|
|
},
|
|
{
|
|
path: 'license',
|
|
title: 'License'
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</NavList>
|
|
</Nav>
|
|
)}
|
|
/>
|
|
)}
|
|
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} />
|
|
<ConfigContext.Provider value={config}>
|
|
<ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
|
|
</ConfigContext.Provider>
|
|
<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);
|