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

Merge remote-tracking branch 'origin/master' into lookup-form-component

Browse Source
This commit is contained in:
kialam
2019-01-07 14:40:35 -05:00
parent c63896fbb6 f521fe5cbc
commit f34ec4be10
49 changed files with 1971 additions and 1136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
src/App.jsx
View File

@@ -1,261 +1,148 @@
import React, { Fragment } from 'react';
import { ConfigContext } from './context';
import { I18nProvider, I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import React, { Component, Fragment } from 'react';
import { global_breakpoint_md } from '@patternfly/react-tokens';
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 About from './components/About';
import NavExpandableGroup from './components/NavExpandableGroup';
import TowerLogo from './components/TowerLogo';
import PageHeaderToolbar from './components/PageHeaderToolbar';
import { ConfigContext } from './context';
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) {
class App extends Component {
constructor (props) {
super(props);
const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
this.state = {
isNavOpen,
config: {},
error: false,
};
}
// initialize with a closed navbar if window size is small
const isNavOpen = typeof window !== 'undefined'
&& window.innerWidth >= parseInt(global_breakpoint_md.value, 10);
onNavToggle = () => {
this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
this.state = {
ansible_version: null,
custom_virtualenvs: null,
isAboutModalOpen: false,
isNavOpen,
version: null,
};
this.fetchConfig = this.fetchConfig.bind(this);
this.onLogout = this.onLogout.bind(this);
this.onAboutModalClose = this.onAboutModalClose.bind(this);
this.onAboutModalOpen = this.onAboutModalOpen.bind(this);
this.onNavToggle = this.onNavToggle.bind(this);
};
onLogoClick = () => {
this.setState({ activeGroup: 'views_group' });
componentDidMount () {
this.fetchConfig();
}
onDevLogout = async () => {
await api.get(API_LOGOUT);
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
}
async fetchConfig () {
const { api } = this.props;
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 });
const { data: { ansible_version, custom_virtualenvs, version } } = await api.getConfig();
this.setState({ ansible_version, custom_virtualenvs, version });
} catch (err) {
this.setState({ ansible_version: null, custom_virtualenvs: null, version: null });
}
}
render() {
const { isNavOpen, config } = this.state;
const { logo, loginInfo, history } = this.props;
async onLogout () {
const { api } = this.props;
const PageToolbar = (
<Toolbar>
<ToolbarGroup>
<ToolbarItem>
<HelpDropdown />
</ToolbarItem>
<ToolbarItem>
<LogoutButton onDevLogout={() => this.onDevLogout()} />
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
);
await api.logout();
window.location.replace('/#/login')
}
onAboutModalOpen () {
this.setState({ isAboutModalOpen: true });
}
onAboutModalClose () {
this.setState({ isAboutModalOpen: false });
}
onNavToggle () {
this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
}
render () {
const {
ansible_version,
custom_virtualenvs,
isAboutModalOpen,
isNavOpen,
version,
} = this.state;
const {
render,
routeGroups = [],
navLabel = '',
} = this.props;
const config = {
ansible_version,
custom_virtualenvs,
version,
};
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'
}}
/>
<Fragment>
<Page
usecondensed="True"
header={(
<PageHeader
showNavToggle
onNavToggle={this.onNavToggle}
logo={<TowerLogo linkTo="/"/>}
toolbar={
<PageHeaderToolbar
isAboutDisabled={!version}
onAboutClick={this.onAboutModalOpen}
onLogoutClick={this.onLogout}
/>
}
/>
)}
sidebar={
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav aria-label={navLabel}>
<NavList>
{routeGroups.map(({ groupId, groupTitle, routes }) => (
<NavExpandableGroup
key={groupId}
groupId={groupId}
groupTitle={groupTitle}
routes={routes}
/>
))}
</NavList>
</Nav>
)}
/>
}
>
<ConfigContext.Provider value={config}>
<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>
{render && render({ routeGroups })}
</ConfigContext.Provider>
</Fragment>
</I18nProvider>
</Page>
<About
ansible_version={ansible_version}
version={version}
isOpen={isAboutModalOpen}
onClose={this.onAboutModalClose}
/>
</Fragment>
);
}
}
export default withRouter(App);
export default App;

69
src/api.js
View File

@@ -1,29 +1,26 @@
import axios from 'axios';
import * as endpoints from './endpoints';
const CSRF_COOKIE_NAME = 'csrftoken';
const CSRF_HEADER_NAME = 'X-CSRFToken';
const API_ROOT = '/api/';
const API_LOGIN = `${API_ROOT}login/`;
const API_LOGOUT = `${API_ROOT}logout/`;
const API_V2 = `${API_ROOT}v2/`;
const API_CONFIG = `${API_V2}config/`;
const API_ORGANIZATIONS = `${API_V2}organizations/`;
const LOGIN_CONTENT_TYPE = 'application/x-www-form-urlencoded';
class APIClient {
constructor () {
this.http = axios.create({
xsrfCookieName: CSRF_COOKIE_NAME,
xsrfHeaderName: CSRF_HEADER_NAME,
});
}
/* eslint class-methods-use-this: ["error", { "exceptMethods": ["getCookie"] }] */
getCookie () {
static getCookie () {
return document.cookie;
}
isAuthenticated () {
let authenticated = false;
constructor (httpAdapter) {
this.http = httpAdapter;
}
const parsed = (`; ${this.getCookie()}`).split('; userLoggedIn=');
isAuthenticated () {
const cookie = this.constructor.getCookie();
const parsed = (`; ${cookie}`).split('; userLoggedIn=');
let authenticated = false;
if (parsed.length === 2) {
authenticated = parsed.pop().split(';').shift() === 'true';
@@ -32,7 +29,7 @@ class APIClient {
return authenticated;
}
async login (username, password, redirect = endpoints.API_CONFIG) {
async login (username, password, redirect = API_CONFIG) {
const un = encodeURIComponent(username);
const pw = encodeURIComponent(password);
const next = encodeURIComponent(redirect);
@@ -40,13 +37,37 @@ class APIClient {
const data = `username=${un}&password=${pw}&next=${next}`;
const headers = { 'Content-Type': LOGIN_CONTENT_TYPE };
await this.http.get(endpoints.API_LOGIN, { headers });
await this.http.post(endpoints.API_LOGIN, data, { headers });
await this.http.get(API_LOGIN, { headers });
const response = await this.http.post(API_LOGIN, data, { headers });
return response;
}
get = (endpoint, params = {}) => this.http.get(endpoint, { params });
logout () {
return this.http.get(API_LOGOUT);
}
post = (endpoint, data) => this.http.post(endpoint, data);
getRoot () {
return this.http.get(API_ROOT);
}
getConfig () {
return this.http.get(API_CONFIG);
}
getOrganizations (params = {}) {
return this.http.get(API_ORGANIZATIONS, { params });
}
createOrganization (data) {
return this.http.post(API_ORGANIZATIONS, data);
}
getOrganizationDetails (id) {
const endpoint = `${API_ORGANIZATIONS}${id}/`;
return this.http.get(endpoint);
}
}
export default new APIClient();
export default APIClient;

2
src/app.scss
View File

@@ -56,7 +56,7 @@
// page header overrides
//
.pf-l-page__main-section.pf-m-condensed {
.pf-c-page__main-section.pf-m-condensed {
padding-top: 16px;
padding-bottom: 16px;
}

78
src/components/About.jsx
View File

@@ -13,10 +13,8 @@ import heroImg from '@patternfly/patternfly-next/assets/images/pfbg_992.jpg';
import brandImg from '../../images/tower-logo-white.svg';
import logoImg from '../../images/tower-logo-login.svg';
import { ConfigContext } from '../context';
class About extends React.Component {
createSpeechBubble = (version) => {
static createSpeechBubble (version) {
let text = `Tower ${version}`;
let top = '';
let bottom = '';
@@ -33,52 +31,56 @@ class About extends React.Component {
return top + text + bottom;
}
handleModalToggle = () => {
const { onAboutModalClose } = this.props;
onAboutModalClose();
};
constructor (props) {
super(props);
this.createSpeechBubble = this.constructor.createSpeechBubble.bind(this);
}
render () {
const { isOpen } = this.props;
const {
ansible_version,
version,
isOpen,
onClose
} = this.props;
const speechBubble = this.createSpeechBubble(version);
return (
<I18n>
{({ i18n }) => (
<ConfigContext.Consumer>
{({ ansible_version, version }) => (
<AboutModal
isOpen={isOpen}
onClose={this.handleModalToggle}
productName="Ansible Tower"
trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
brandImageSrc={brandImg}
brandImageAlt={i18n._(t`Brand Image`)}
logoImageSrc={logoImg}
logoImageAlt={i18n._(t`AboutModal Logo`)}
heroImageSrc={heroImg}
>
<pre>
{this.createSpeechBubble(version)}
{`
<AboutModal
isOpen={isOpen}
onClose={onClose}
productName="Ansible Tower"
trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
brandImageSrc={brandImg}
brandImageAlt={i18n._(t`Brand Image`)}
logoImageSrc={logoImg}
logoImageAlt={i18n._(t`AboutModal Logo`)}
heroImageSrc={heroImg}
>
<pre>
{ speechBubble }
{`
\\
\\ ^__^
\\ ^__^
(oo)\\_______
(__) A )\\
||----w |
|| ||
`}
</pre>
<TextContent>
<TextList component="dl">
<TextListItem component="dt">
<Trans>Ansible Version</Trans>
</TextListItem>
<TextListItem component="dd">{ansible_version}</TextListItem>
</TextList>
</TextContent>
</AboutModal>
)}
</ConfigContext.Consumer>
</pre>
<TextContent>
<TextList component="dl">
<TextListItem component="dt">
<Trans>Ansible Version</Trans>
</TextListItem>
<TextListItem component="dd">{ ansible_version }</TextListItem>
</TextList>
</TextContent>
</AboutModal>
)}
</I18n>
);

25
src/components/Background.jsx Normal file
View File

@@ -0,0 +1,25 @@
import React, { Fragment } from 'react';
import {
BackgroundImage,
BackgroundImageSrc,
} from '@patternfly/react-core';
const backgroundImageConfig = {
[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',
};
export default ({ children }) => (
<Fragment>
<BackgroundImage src={backgroundImageConfig} />
{ children }
</Fragment>
);

23
src/components/ConditionalRedirect.jsx
View File

@@ -1,23 +0,0 @@
import React from 'react';
import {
Route,
Redirect
} from 'react-router-dom';
const ConditionalRedirect = ({
component: Component,
shouldRedirect,
redirectPath,
location,
...props
}) => (shouldRedirect() ? (
<Redirect to={{
pathname: redirectPath,
state: { from: location }
}}
/>
) : (
<Route {...props} render={rest => (<Component {...rest} />)} />
));
export default ConditionalRedirect;

130
src/components/DataListToolbar/DataListToolbar.jsx
View File

@@ -43,47 +43,66 @@ class DataListToolbar extends React.Component {
searchKey: sortedColumnKey,
searchValue: '',
};
this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
this.onSortDropdownToggle = this.onSortDropdownToggle.bind(this);
this.onSortDropdownSelect = this.onSortDropdownSelect.bind(this);
this.onSearchDropdownToggle = this.onSearchDropdownToggle.bind(this);
this.onSearchDropdownSelect = this.onSearchDropdownSelect.bind(this);
this.onSearch = this.onSearch.bind(this);
this.onSort = this.onSort.bind(this);
}
handleSearchInputChange = searchValue => {
handleSearchInputChange (searchValue) {
this.setState({ searchValue });
};
}
onSortDropdownToggle = isSortDropdownOpen => {
onSortDropdownToggle (isSortDropdownOpen) {
this.setState({ isSortDropdownOpen });
};
}
onSortDropdownSelect = ({ target }) => {
onSortDropdownSelect ({ target }) {
const { columns, onSort, sortOrder } = this.props;
const { innerText } = target;
const [{ key }] = columns.filter(({ name }) => name === target.innerText);
const [{ key: searchKey }] = columns.filter(({ name }) => name === innerText);
this.setState({ isSortDropdownOpen: false });
onSort(searchKey, sortOrder);
}
onSort(key, sortOrder);
};
onSearchDropdownToggle = isSearchDropdownOpen => {
onSearchDropdownToggle (isSearchDropdownOpen) {
this.setState({ isSearchDropdownOpen });
};
}
onSearchDropdownSelect = ({ target }) => {
onSearchDropdownSelect ({ target }) {
const { columns } = this.props;
const { innerText } = target;
const targetName = target.innerText;
const [{ key }] = columns.filter(({ name }) => name === targetName);
const [{ key: searchKey }] = columns.filter(({ name }) => name === innerText);
this.setState({ isSearchDropdownOpen: false, searchKey });
}
this.setState({ isSearchDropdownOpen: false, searchKey: key });
};
onSearch () {
const { searchValue } = this.state;
const { onSearch } = this.props;
onSearch(searchValue);
}
onSort () {
const { onSort, sortedColumnKey, sortOrder } = this.props;
const newSortOrder = sortOrder === 'ascending' ? 'descending' : 'ascending';
onSort(sortedColumnKey, newSortOrder);
}
render () {
const { up } = DropdownPosition;
const {
columns,
isAllSelected,
onSearch,
onSelectAll,
onSort,
sortedColumnKey,
sortOrder,
addUrl,
@@ -97,29 +116,15 @@ class DataListToolbar extends React.Component {
searchValue,
} = this.state;
const [searchColumn] = columns
.filter(({ key }) => key === searchKey);
const searchColumnName = searchColumn.name;
const [sortedColumn] = columns
const [{ name: searchColumnName }] = columns.filter(({ key }) => key === searchKey);
const [{ name: sortedColumnName, isNumeric }] = columns
.filter(({ key }) => key === sortedColumnKey);
const sortedColumnName = sortedColumn.name;
const isSortNumeric = sortedColumn.isNumeric;
const displayedSortIcon = () => {
let icon;
if (sortOrder === 'ascending') {
icon = isSortNumeric ? (<SortNumericUpIcon />) : (<SortAlphaUpIcon />);
} else {
icon = isSortNumeric ? (<SortNumericDownIcon />) : (<SortAlphaDownIcon />);
}
return icon;
};
const searchDropdownItems = columns
.filter(({ key }) => key !== searchKey)
.map(({ key, name }) => (
<DropdownItem key={key} component="button">
{ name }
{name}
</DropdownItem>
));
@@ -127,17 +132,26 @@ class DataListToolbar extends React.Component {
.filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
.map(({ key, name }) => (
<DropdownItem key={key} component="button">
{ name }
{name}
</DropdownItem>
));
let SortIcon;
if (isNumeric) {
SortIcon = sortOrder === 'ascending' ? SortNumericUpIcon : SortNumericDownIcon;
} else {
SortIcon = sortOrder === 'ascending' ? SortAlphaUpIcon : SortAlphaDownIcon;
}
return (
<I18n>
{({ i18n }) => (
<div className="awx-toolbar">
<Level>
<LevelItem>
<Toolbar style={{ marginLeft: '20px' }}>
<Toolbar
style={{ marginLeft: '20px' }}
>
<ToolbarGroup>
<ToolbarItem>
<Checkbox
@@ -152,6 +166,7 @@ class DataListToolbar extends React.Component {
<ToolbarItem>
<div className="pf-c-input-group">
<Dropdown
className="searchKeyDropdown"
onToggle={this.onSearchDropdownToggle}
onSelect={this.onSearchDropdownSelect}
direction={up}
@@ -160,7 +175,7 @@ class DataListToolbar extends React.Component {
<DropdownToggle
onToggle={this.onSearchDropdownToggle}
>
{ searchColumnName }
{searchColumnName}
</DropdownToggle>
)}
dropdownItems={searchDropdownItems}
@@ -174,14 +189,16 @@ class DataListToolbar extends React.Component {
<Button
variant="tertiary"
aria-label={i18n._(t`Search`)}
onClick={() => onSearch(searchValue)}
onClick={this.onSearch}
>
<i className="fas fa-search" aria-hidden="true" />
</Button>
</div>
</ToolbarItem>
</ToolbarGroup>
<ToolbarGroup>
<ToolbarGroup
className="sortDropdownGroup"
>
<ToolbarItem>
<Dropdown
onToggle={this.onSortDropdownToggle}
@@ -192,7 +209,7 @@ class DataListToolbar extends React.Component {
<DropdownToggle
onToggle={this.onSortDropdownToggle}
>
{ sortedColumnName }
{sortedColumnName}
</DropdownToggle>
)}
dropdownItems={sortDropdownItems}
@@ -200,23 +217,29 @@ class DataListToolbar extends React.Component {
</ToolbarItem>
<ToolbarItem>
<Button
onClick={() => onSort(sortedColumnKey, sortOrder === 'ascending' ? 'descending' : 'ascending')}
onClick={this.onSort}
variant="plain"
aria-label={i18n._(t`Sort`)}
>
{displayedSortIcon()}
<SortIcon/>
</Button>
</ToolbarItem>
</ToolbarGroup>
{ showExpandCollapse && (
{showExpandCollapse && (
<ToolbarGroup>
<ToolbarItem>
<Button variant="plain" aria-label={i18n._(t`Expand`)}>
<Button
variant="plain"
aria-label={i18n._(t`Expand`)}
>
<BarsIcon />
</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" aria-label={i18n._(t`Collapse`)}>
<Button
variant="plain"
aria-label={i18n._(t`Collapse`)}
>
<EqualsIcon />
</Button>
</ToolbarItem>
@@ -225,14 +248,23 @@ class DataListToolbar extends React.Component {
</Toolbar>
</LevelItem>
<LevelItem>
<Tooltip message={i18n._(t`Delete`)} position="top">
<Button variant="plain" aria-label={i18n._(t`Delete`)}>
<Tooltip
message={i18n._(t`Delete`)}
position="top"
>
<Button
variant="plain"
aria-label={i18n._(t`Delete`)}
>
<TrashAltIcon />
</Button>
</Tooltip>
{addUrl && (
<Link to={addUrl}>
<Button variant="primary" aria-label={i18n._(t`Add`)}>
<Button
variant="primary"
aria-label={i18n._(t`Add`)}
>
<PlusIcon />
</Button>
</Link>

62
src/components/HelpDropdown.jsx
View File

@@ -1,62 +0,0 @@
import React, { Component, Fragment } from 'react';
import { Trans } from '@lingui/macro';
import {
Dropdown,
DropdownItem,
DropdownToggle,
DropdownPosition,
} from '@patternfly/react-core';
import { QuestionCircleIcon } from '@patternfly/react-icons';
import AboutModal from './About';
class HelpDropdown extends Component {
state = {
isOpen: false,
showAboutModal: false
};
render () {
const { isOpen, showAboutModal } = this.state;
const dropdownItems = [
<DropdownItem
href="https://docs.ansible.com/ansible-tower/latest/html/userguide/index.html"
target="_blank"
key="help"
>
<Trans>Help</Trans>
</DropdownItem>,
<DropdownItem
onClick={() => this.setState({ showAboutModal: true })}
key="about"
>
<Trans>About</Trans>
</DropdownItem>
];
return (
<Fragment>
<Dropdown
onSelect={() => this.setState({ isOpen: !isOpen })}
toggle={(
<DropdownToggle onToggle={(isToggleOpen) => this.setState({ isOpen: isToggleOpen })}>
<QuestionCircleIcon />
</DropdownToggle>
)}
isOpen={isOpen}
dropdownItems={dropdownItems}
position={DropdownPosition.right}
/>
{showAboutModal
? (
<AboutModal
isOpen={showAboutModal}
onAboutModalClose={() => this.setState({ showAboutModal: !showAboutModal })}
/>
)
: null }
</Fragment>
);
}
}
export default HelpDropdown;

32
src/components/LogoutButton.jsx
View File

@@ -1,32 +0,0 @@
import React from 'react';
import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
ButtonVariant
} from '@patternfly/react-core';
import { UserIcon } from '@patternfly/react-icons';
const LogoutButton = ({ onDevLogout }) => (
<I18n>
{({ i18n }) => (
<Button
id="button-logout"
aria-label={i18n._(t`Logout`)}
variant={ButtonVariant.plain}
onClick={onDevLogout}
onKeyDown={event => {
if (event.keyCode === 13) {
onDevLogout();
}
}}
>
<UserIcon />
</Button>
)}
</I18n>
);
export default LogoutButton;

15
src/components/NavExpandableGroup.jsx
View File

@@ -14,18 +14,23 @@ class NavExpandableGroup extends Component {
// Extract a list of paths from the route params and store them for later. This creates
// an array of url paths associated with any NavItem component rendered by this component.
this.navItemPaths = routes.map(({ path }) => path);
this.isActiveGroup = this.isActiveGroup.bind(this);
this.isActivePath = this.isActivePath.bind(this);
}
isActiveGroup = () => this.navItemPaths.some(this.isActivePath);
isActiveGroup () {
return this.navItemPaths.some(this.isActivePath);
}
isActivePath = (path) => {
isActivePath (path) {
const { history } = this.props;
return history.location.pathname.startsWith(path);
};
}
render () {
const { routes, groupId, staticContext, ...rest } = this.props;
const { groupId, groupTitle, routes } = this.props;
const isActive = this.isActiveGroup();
return (
@@ -33,7 +38,7 @@ class NavExpandableGroup extends Component {
isActive={isActive}
isExpanded={isActive}
groupId={groupId}
{...rest}
title={groupTitle}
>
{routes.map(({ path, title }) => (
<NavItem

129
src/components/PageHeaderToolbar.jsx Normal file
View File

@@ -0,0 +1,129 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { t } from '@lingui/macro';
import { I18n } from '@lingui/react';
import {
Dropdown,
DropdownItem,
DropdownToggle,
DropdownPosition,
Toolbar,
ToolbarGroup,
ToolbarItem,
} from '@patternfly/react-core';
import {
QuestionCircleIcon,
UserIcon,
} from '@patternfly/react-icons';
const DOCLINK = 'https://docs.ansible.com/ansible-tower/latest/html/userguide/index.html';
class PageHeaderToolbar extends Component {
constructor (props) {
super(props);
this.state = { isHelpOpen: false, isUserOpen: false };
this.onHelpSelect = this.onHelpSelect.bind(this);
this.onHelpToggle = this.onHelpToggle.bind(this);
this.onUserSelect = this.onUserSelect.bind(this);
this.onUserToggle = this.onUserToggle.bind(this);
}
onHelpSelect () {
const { isHelpOpen } = this.state;
this.setState({ isHelpOpen: !isHelpOpen });
}
onUserSelect () {
const { isUserOpen } = this.state;
this.setState({ isUserOpen: !isUserOpen });
}
onHelpToggle (isOpen) {
this.setState({ isHelpOpen: isOpen });
}
onUserToggle (isOpen) {
this.setState({ isUserOpen: isOpen });
}
render () {
const { isHelpOpen, isUserOpen } = this.state;
const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
return (
<I18n>
{({ i18n }) => (
<Toolbar>
<ToolbarGroup>
<ToolbarItem>
<Dropdown
isOpen={isHelpOpen}
position={DropdownPosition.right}
onSelect={this.onHelpSelect}
toggle={(
<DropdownToggle
onToggle={this.onHelpToggle}
>
<QuestionCircleIcon />
</DropdownToggle>
)}
dropdownItems={[
<DropdownItem
key="help"
target="_blank"
href={DOCLINK}
>
{i18n._(t`Help`)}
</DropdownItem>,
<DropdownItem
key="about"
component="button"
isDisabled={isAboutDisabled}
onClick={onAboutClick}
>
{i18n._(t`About`)}
</DropdownItem>
]}
/>
</ToolbarItem>
<ToolbarItem>
<Dropdown
isOpen={isUserOpen}
position={DropdownPosition.right}
onSelect={this.onUserSelect}
toggle={(
<DropdownToggle
onToggle={this.onUserToggle}
>
<UserIcon />
</DropdownToggle>
)}
dropdownItems={[
<DropdownItem key="user">
<Link to="/home">
{i18n._(t`User Details`)}
</Link>
</DropdownItem>,
<DropdownItem
key="logout"
component="button"
onClick={onLogoutClick}
>
{i18n._(t`Logout`)}
</DropdownItem>
]}
/>
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
)}
</I18n>
);
}
}
export default PageHeaderToolbar;

85
src/components/Pagination/Pagination.jsx
View File

@@ -7,14 +7,9 @@ import {
DropdownDirection,
DropdownItem,
DropdownToggle,
Form,
FormGroup,
Level,
LevelItem,
TextInput,
Toolbar,
ToolbarGroup,
ToolbarItem,
Split,
SplitItem,
} from '@patternfly/react-core';
@@ -23,24 +18,32 @@ class Pagination extends Component {
constructor (props) {
super(props);
const { page } = this.props;
const { page } = props;
this.state = { value: page, isOpen: false };
this.onPageChange = this.onPageChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.onFirst = this.onFirst.bind(this);
this.onPrevious = this.onPrevious.bind(this);
this.onNext = this.onNext.bind(this);
this.onLast = this.onLast.bind(this);
this.onTogglePageSize = this.onTogglePageSize.bind(this);
this.onSelectPageSize = this.onSelectPageSize.bind(this);
}
componentDidUpdate (prevProps) {
const { page } = this.props;
if (prevProps.page !== page) {
this.setState({ value: page });
this.onPageChange(page);
}
}
onPageChange = value => {
onPageChange (value) {
this.setState({ value });
};
}
onSubmit = event => {
onSubmit (event) {
const { onSetPage, page, pageCount, page_size } = this.props;
const { value } = this.state;
@@ -51,46 +54,42 @@ class Pagination extends Component {
if (isValid) {
onSetPage(value, page_size);
} else{
} else {
this.setState({ value: page });
}
};
}
onFirst = () => {
const { onSetPage, page_size} = this.props;
onFirst () {
const { onSetPage, page_size } = this.props;
onSetPage(1, page_size);
};
}
onPrevious = () => {
onPrevious () {
const { onSetPage, page, page_size } = this.props;
const previousPage = page - 1;
if (previousPage >= 1) {
onSetPage(previousPage, page_size)
}
};
onSetPage(previousPage, page_size);
}
onNext = () => {
onNext () {
const { onSetPage, page, pageCount, page_size } = this.props;
const nextPage = page + 1;
if (nextPage <= pageCount) {
onSetPage(nextPage, page_size)
}
};
onSetPage(nextPage, page_size);
}
onLast = () => {
onLast () {
const { onSetPage, pageCount, page_size } = this.props;
onSetPage(pageCount, page_size)
};
}
onTogglePageSize = isOpen => {
onTogglePageSize (isOpen) {
this.setState({ isOpen });
};
}
onSelectPageSize = ({ target }) => {
onSelectPageSize ({ target }) {
const { onSetPage } = this.props;
const page = 1;
@@ -99,7 +98,7 @@ class Pagination extends Component {
this.setState({ isOpen: false });
onSetPage(page, page_size);
};
}
render () {
const { up } = DropdownDirection;
@@ -140,22 +139,28 @@ class Pagination extends Component {
isOpen={isOpen}
toggle={(
<DropdownToggle
onToggle={this.onTogglePageSize}>
{ page_size }
className="togglePageSize"
onToggle={this.onTogglePageSize}
>
{page_size}
</DropdownToggle>
)}>
)}
>
{opts.map(option => (
<DropdownItem key={option} component="button">
{ option }
<DropdownItem
key={option}
component="button"
>
{option}
</DropdownItem>
))}
</Dropdown>
<Trans>Per Page</Trans>
<Trans> Per Page</Trans>
</LevelItem>
<LevelItem>
<Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">
<SplitItem>
<Trans>{ itemMin } - { itemMax } of { count }</Trans>
<Trans>{itemMin} - {itemMax} of {count}</Trans>
</SplitItem>
<SplitItem>
<div className="pf-c-input-group">
@@ -196,7 +201,7 @@ class Pagination extends Component {
value={value}
type="text"
onChange={this.onPageChange}
/> of { pageCount }
/> of {pageCount}
</Trans>
</form>
</SplitItem>

40
src/components/Tabs/Tab.jsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import { Link } from 'react-router-dom';
import './tabs.scss';
const Tab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
const tabClasses = () => {
let classes = 'pf-c-tabs__item';
if (tab === currentTab) {
classes += ' pf-m-current';
}
return classes;
};
const tabParams = () => {
const params = new URLSearchParams(location.search);
if (params.get('tab') !== undefined) {
params.set('tab', tab);
} else {
params.append('tab', tab);
}
return `?${params.toString()}`;
};
return (
<li className={tabClasses()}>
<Link
className={'pf-c-tabs__button'}
to={{ pathname: `${match.url}`, search: tabParams(), state: { breadcrumb } }}
replace={tab === currentTab}>
{children}
</Link>
</li>
)
}
export default Tab;

13
src/components/Tabs/Tabs.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import './tabs.scss';
const Tabs = ({ children, labelText }) => (
<div className="pf-c-tabs" aria-label={labelText}>
<ul className="pf-c-tabs__list">
{children}
</ul>
</div>
);
export default Tabs;

50
src/components/Tabs/tabs.scss Normal file
View File

@@ -0,0 +1,50 @@
.at-c-orgPane {
a {
display: block;
}
}
.pf-c-card__header {
--pf-c-card__header--PaddingBottom: 0;
--pf-c-card__header--PaddingX: 0;
--pf-c-card__header--PaddingTop: 0;
}
.pf-c-tabs {
--pf-global--link--Color: #484848;
--pf-global--link--Color--hover: #484848;
--pf-global--link--TextDecoration--hover: none;
&:before {
border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor);
border-top: 1px solid var(--pf-c-tabs__item--BorderColor);
bottom: 0;
content: " ";
left: 0;
position: absolute;
right: 0;
top: 0;
}
.pf-c-tabs__button {
--pf-c-tabs__button--PaddingLeft: 20px;
--pf-c-tabs__button--PaddingRight: 20px;
}
.pf-c-tabs__item.pf-m-current
.pf-c-tabs__button::after {
border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
border-top: none;
}
.pf-c-tabs__item:not(.pf-m-current):hover
.pf-c-tabs__button::after {
border-bottom: 3px solid var(--pf-global--Color--dark-200);
border-top: none;
}
}
.pf-c-breadcrumb__item.heading {
flex: 100%;
font-size: 20px;
}

22
src/components/TowerLogo/TowerLogo.jsx
View File

@@ -12,31 +12,31 @@ class TowerLogo extends Component {
super(props);
this.state = { hover: false };
this.onClick = this.onClick.bind(this);
this.onHover = this.onHover.bind(this);
}
onClick = () => {
const { history, onClick: handleClick } = this.props;
onClick () {
const { history, linkTo } = this.props;
if (!handleClick) return;
if (!linkTo) return;
history.push('/');
history.push(linkTo);
}
handleClick();
};
onHover = () => {
onHover () {
const { hover } = this.state;
this.setState({ hover: !hover });
};
}
render () {
const { hover } = this.state;
const { onClick: handleClick } = this.props;
let src = TowerLogoHeader;
if (hover && handleClick) {
if (hover) {
src = TowerLogoHeaderHover;
}

8
src/endpoints.jsx
View File

@@ -1,8 +0,0 @@
export const API_ROOT = '/api/';
export const API_LOGIN = `${API_ROOT}login/`;
export const API_LOGOUT = `${API_ROOT}logout/`;
export const API_V2 = `${API_ROOT}v2/`;
export const API_CONFIG = `${API_V2}config/`;
export const API_PROJECTS = `${API_V2}projects/`;
export const API_ORGANIZATIONS = `${API_V2}organizations/`;
export const API_INSTANCE_GROUPS = `${API_V2}instance_groups/`;

285
src/index.jsx
View File

@@ -1,27 +1,286 @@
import axios from 'axios';
import React from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import {
HashRouter as Router
HashRouter,
Redirect,
Route,
Switch,
} from 'react-router-dom';
import App from './App';
import api from './api';
import { API_ROOT } from './endpoints';
import {
I18n,
I18nProvider,
} from '@lingui/react';
import { t } from '@lingui/macro';
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/patternfly-next/patternfly.css';
import './app.scss';
import './components/Pagination/styles.scss';
import './components/DataListToolbar/styles.scss';
const el = document.getElementById('app');
import APIClient from './api';
const main = async () => {
const { custom_logo, custom_login_info } = await api.get(API_ROOT);
render(<Router><App logo={custom_logo} loginInfo={custom_login_info} /></Router>, el);
import App from './App';
import Background from './components/Background';
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';
//
// Initialize http
//
const http = axios.create({ xsrfCookieName: 'csrftoken', xsrfHeaderName: 'X-CSRFToken' });
//
// Derive the language and region from global user agent data. Example: es-US
// see: https://developer.mozilla.org/en-US/docs/Web/API/Navigator
//
export function getLanguage (nav) {
const language = (nav.languages && nav.languages[0]) || nav.language || nav.userLanguage;
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
return languageWithoutRegionCode;
};
main();
//
// Function Main
//
export default main;
export async function main (render, api) {
const catalogs = { en, ja };
const language = getLanguage(navigator);
const el = document.getElementById('app');
const { data: { custom_logo, custom_login_info } } = await api.getRoot();
const defaultRedirect = () => (<Redirect to="/home" />);
const loginRoutes = (
<Switch>
<Route
path="/login"
render={() => (
<Login
api={api}
logo={custom_logo}
loginInfo={custom_login_info}
/>
)}
/>
<Redirect to="/login" />
</Switch>
);
return render(
<HashRouter>
<I18nProvider
language={language}
catalogs={catalogs}
>
<I18n>
{({ i18n }) => (
<Background>
{!api.isAuthenticated() ? loginRoutes : (
<Switch>
<Route path="/login" render={defaultRedirect} />
<Route exact path="/" render={defaultRedirect} />
<Route
render={() => (
<App
api={api}
navLabel={i18n._(t`Primary Navigation`)}
routeGroups={[
{
groupTitle: i18n._(t`Views`),
groupId: 'views_group',
routes: [
{
title: i18n._(t`Dashboard`),
path: '/home',
component: Dashboard
},
{
title: i18n._(t`Jobs`),
path: '/jobs',
component: Jobs
},
{
title: i18n._(t`Schedules`),
path: '/schedules',
component: Schedules
},
{
title: i18n._(t`Portal Mode`),
path: '/portal',
component: Portal
},
],
},
{
groupTitle: i18n._(t`Resources`),
groupId: 'resources_group',
routes: [
{
title: i18n._(t`Templates`),
path: '/templates',
component: Templates
},
{
title: i18n._(t`Credentials`),
path: '/credentials',
component: Credentials
},
{
title: i18n._(t`Projects`),
path: '/projects',
component: Projects
},
{
title: i18n._(t`Inventories`),
path: '/inventories',
component: Inventories
},
{
title: i18n._(t`Inventory Scripts`),
path: '/inventory_scripts',
component: InventoryScripts
},
],
},
{
groupTitle: i18n._(t`Access`),
groupId: 'access_group',
routes: [
{
title: i18n._(t`Organizations`),
path: '/organizations',
component: Organizations
},
{
title: i18n._(t`Users`),
path: '/users',
component: Users
},
{
title: i18n._(t`Teams`),
path: '/teams',
component: Teams
},
],
},
{
groupTitle: i18n._(t`Administration`),
groupId: 'administration_group',
routes: [
{
title: i18n._(t`Credential Types`),
path: '/credential_types',
component: CredentialTypes
},
{
title: i18n._(t`Notifications`),
path: '/notification_templates',
component: NotificationTemplates
},
{
title: i18n._(t`Management Jobs`),
path: '/management_jobs',
component: ManagementJobs
},
{
title: i18n._(t`Instance Groups`),
path: '/instance_groups',
component: InstanceGroups
},
{
title: i18n._(t`Integrations`),
path: '/applications',
component: Applications
},
],
},
{
groupTitle: i18n._(t`Settings`),
groupId: 'settings_group',
routes: [
{
title: i18n._(t`Authentication`),
path: '/auth_settings',
component: AuthSettings
},
{
title: i18n._(t`Jobs`),
path: '/jobs_settings',
component: JobsSettings
},
{
title: i18n._(t`System`),
path: '/system_settings',
component: SystemSettings
},
{
title: i18n._(t`User Interface`),
path: '/ui_settings',
component: UISettings
},
{
title: i18n._(t`License`),
path: '/license',
component: License
},
],
},
]}
render={({ routeGroups }) => (
routeGroups
.reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
.map(({ component: PageComponent, path }) => (
<Route
key={path}
path={path}
render={({ match }) => (
<PageComponent
api={api}
match={match}
/>
)}
/>
))
)}
/>
)}
/>
</Switch>
)}
</Background>
)}
</I18n>
</I18nProvider>
</HashRouter>, el);
};
main(ReactDOM.render, new APIClient(http));

73
src/pages/Login.jsx
View File

@@ -8,53 +8,57 @@ import {
} from '@patternfly/react-core';
import towerLogo from '../../images/tower-logo-header.svg';
import api from '../api';
class AtLogin extends Component {
class AWXLogin extends Component {
constructor (props) {
super(props);
this.state = {
username: '',
password: '',
isValidPassword: true,
loading: false
isInputValid: true,
isLoading: false
};
this.onChangeUsername = this.onChangeUsername.bind(this);
this.onChangePassword = this.onChangePassword.bind(this);
this.onLoginButtonClick = this.onLoginButtonClick.bind(this);
}
componentWillUnmount () {
this.unmounting = true; // todo: state management
onChangeUsername (value) {
this.setState({ username: value, isInputValid: true });
}
safeSetState = obj => !this.unmounting && this.setState(obj);
onChangePassword (value) {
this.setState({ password: value, isInputValid: true });
}
handleUsernameChange = value => this.safeSetState({ username: value, isValidPassword: true });
handlePasswordChange = value => this.safeSetState({ password: value, isValidPassword: true });
handleSubmit = async event => {
const { username, password, loading } = this.state;
async onLoginButtonClick (event) {
const { username, password, isLoading } = this.state;
const { api } = this.props;
event.preventDefault();
if (!loading) {
this.safeSetState({ loading: true });
if (isLoading) {
return;
}
try {
await api.login(username, password);
} catch (error) {
if (error.response.status === 401) {
this.safeSetState({ isValidPassword: false });
}
} finally {
this.safeSetState({ loading: false });
this.setState({ isLoading: true });
try {
await api.login(username, password);
} catch (error) {
if (error.response && error.response.status === 401) {
this.setState({ isInputValid: false });
}
} finally {
this.setState({ isLoading: false });
}
}
render () {
const { username, password, isValidPassword } = this.state;
const { logo, alt } = this.props;
const { username, password, isInputValid } = this.state;
const { api, alt, loginInfo, logo } = this.props;
const logoSrc = logo ? `data:image/jpeg;${logo}` : towerLogo;
if (api.isAuthenticated()) {
@@ -65,20 +69,21 @@ class AtLogin extends Component {
<I18n>
{({ i18n }) => (
<LoginPage
mainBrandImgSrc={logoSrc}
mainBrandImgAlt={alt || 'Ansible Tower'}
brandImgSrc={logoSrc}
brandImgAlt={alt || 'Ansible Tower'}
loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
textContent={loginInfo}
>
<LoginForm
usernameLabel={i18n._(t`Username`)}
usernameValue={username}
onChangeUsername={this.handleUsernameChange}
passwordLabel={i18n._(t`Password`)}
passwordValue={password}
onChangePassword={this.handlePasswordChange}
isValidPassword={isValidPassword}
passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
onLoginButtonClick={this.handleSubmit}
usernameValue={username}
passwordValue={password}
isValidPassword={isInputValid}
onChangeUsername={this.onChangeUsername}
onChangePassword={this.onChangePassword}
onLoginButtonClick={this.onLoginButtonClick}
/>
</LoginPage>
)}
@@ -87,4 +92,4 @@ class AtLogin extends Component {
}
}
export default AtLogin;
export default AWXLogin;

38
src/pages/Organizations/components/OrganizationBreadcrumb.jsx
View File

@@ -3,7 +3,9 @@ import { Trans } from '@lingui/macro';
import {
PageSection,
PageSectionVariants,
Title,
Breadcrumb,
BreadcrumbItem,
BreadcrumbHeading
} from '@patternfly/react-core';
import {
Link
@@ -21,20 +23,22 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
.map(({ url, name }, index) => {
let elem;
if (noLastLink && parentObj.length - 1 === index) {
elem = (<Fragment key={name}>{name}</Fragment>);
elem = (<BreadcrumbHeading className="heading" key={name}>{name}</BreadcrumbHeading>);
} else {
elem = (
<Link
key={name}
to={{ pathname: url, state: { breadcrumb: parentObj, organization } }}
>
{name}
</Link>
<BreadcrumbItem key={name}>
<Link
key={name}
to={{ pathname: url, state: { breadcrumb: parentObj, organization } }}
>
{name}
</Link>
</BreadcrumbItem>
);
}
return elem;
})
.reduce((prev, curr) => [prev, ' > ', curr])}
.reduce((prev, curr) => [prev, curr])}
</Fragment>
);
@@ -42,25 +46,31 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
breadcrumb = (
<Fragment>
{generateCrumb()}
{' > '}
{getTabName(currentTab)}
<BreadcrumbHeading className="heading">
{getTabName(currentTab)}
</BreadcrumbHeading>
</Fragment>
);
} else if (location.pathname.indexOf('edit') > -1) {
breadcrumb = (
<Fragment>
{generateCrumb()}
<Trans>{' > edit'}</Trans>
<BreadcrumbHeading className="heading">
<Trans>Edit</Trans>
</BreadcrumbHeading>
</Fragment>
);
} else if (location.pathname.indexOf('add') > -1) {
breadcrumb = (
<Fragment>
{generateCrumb()}
<Trans>{' > add'}</Trans>
<BreadcrumbHeading className="heading">
<Trans>Add</Trans>
</BreadcrumbHeading>
</Fragment>
);
} else {
breadcrumb = (
<Fragment>
{generateCrumb(true)}
@@ -71,7 +81,7 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
return (
<PageSection variant={light} className="pf-m-condensed">
<Title size="2xl">{breadcrumb}</Title>
<Breadcrumb>{breadcrumb}</Breadcrumb>
</PageSection>
);
};

80
src/pages/Organizations/components/OrganizationDetail.jsx
View File

@@ -6,10 +6,7 @@ import {
CardHeader,
CardBody,
PageSection,
PageSectionVariants,
ToolbarGroup,
ToolbarItem,
ToolbarSection,
PageSectionVariants
} from '@patternfly/react-core';
import {
Switch,
@@ -17,39 +14,10 @@ import {
Route
} from 'react-router-dom';
import Tab from '../../../components/Tabs/Tab';
import Tabs from '../../../components/Tabs/Tabs';
import getTabName from '../utils';
import '../tabs.scss';
const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
const tabClasses = () => {
let classes = 'at-c-tabs__tab';
if (tab === currentTab) {
classes += ' at-m-selected';
}
return classes;
};
const updateTab = () => {
const params = new URLSearchParams(location.search);
if (params.get('tab') !== undefined) {
params.set('tab', tab);
} else {
params.append('tab', tab);
}
return `?${params.toString()}`;
};
return (
<ToolbarItem className={tabClasses()}>
<Link to={{ pathname: `${match.url}`, search: updateTab(), state: { breadcrumb } }} replace={tab === currentTab}>
{children}
</Link>
</ToolbarItem>
);
};
const OrganizationDetail = ({
location,
@@ -61,6 +29,7 @@ const OrganizationDetail = ({
}) => {
// TODO: set objectName by param or through grabbing org detail get from api
const { medium } = PageSectionVariants;
const tabList=['details', 'access', 'teams', 'notifications'];
const deleteResourceView = () => (
<Fragment>
@@ -93,34 +62,29 @@ const OrganizationDetail = ({
</Fragment>
);
const detailTabs = (tabs) => (
<I18n>
{({ i18n }) => (
<ToolbarSection aria-label={i18n._(t`Organization detail tabs`)}>
<ToolbarGroup className="at-c-tabs">
{tabs.map(tab => (
<DetailTab
key={tab}
tab={tab}
location={location}
match={match}
currentTab={currentTab}
breadcrumb={parentBreadcrumbObj}
>
{getTabName(tab)}
</DetailTab>
))}
</ToolbarGroup>
</ToolbarSection>
)}
</I18n>
);
return (
<PageSection variant={medium}>
<Card className="at-c-orgPane">
<CardHeader>
{detailTabs(['details', 'users', 'teams', 'admins', 'notifications'])}
<I18n>
{({ i18n }) => (
<Tabs labelText={i18n._(t`Organization detail tabs`)}>
{tabList.map(tab => (
<Tab
key={tab}
tab={tab}
location={location}
match={match}
currentTab={currentTab}
breadcrumb={parentBreadcrumbObj}
>
<Trans>{getTabName(tab)}</Trans>
</Tab>
))}
</Tabs>
)}
</I18n>
</CardHeader>
<CardBody>
{(currentTab && currentTab !== 'details') ? (

11
src/pages/Organizations/components/OrganizationListItem.jsx
View File

@@ -14,7 +14,6 @@ export default ({
name,
userCount,
teamCount,
adminCount,
isSelected,
onSelect,
detailUrl,
@@ -46,7 +45,7 @@ export default ({
</span>
</div>
<div className="pf-c-data-list__cell">
<Link to={`${detailUrl}?tab=users`}>
<Link to={`${detailUrl}?tab=access`}>
<Trans>Users</Trans>
</Link>
<Badge isRead>
@@ -62,14 +61,6 @@ export default ({
{teamCount}
{' '}
</Badge>
<Link to={`${detailUrl}?tab=admins`}>
<Trans>Admins</Trans>
</Link>
<Badge isRead>
{' '}
{adminCount}
{' '}
</Badge>
</div>
<div className="pf-c-data-list__cell" />
</li>

31
src/pages/Organizations/index.jsx
View File

@@ -5,12 +5,31 @@ import OrganizationAdd from './views/Organization.add';
import OrganizationView from './views/Organization.view';
import OrganizationsList from './views/Organizations.list';
const Organizations = ({ match }) => (
export default ({ api, match }) => (
<Switch>
<Route path={`${match.path}/add`} component={OrganizationAdd} />
<Route path={`${match.path}/:id`} component={OrganizationView} />
<Route path={`${match.path}`} component={OrganizationsList} />
<Route
path={`${match.path}/add`}
render={() => (
<OrganizationAdd
api={api}
/>
)}
/>
<Route
path={`${match.path}/:id`}
render={() => (
<OrganizationView
api={api}
/>
)}
/>
<Route
path={`${match.path}`}
render={() => (
<OrganizationsList
api={api}
/>
)}
/>
</Switch>
);
export default Organizations;

18
src/pages/Organizations/tabs.scss
View File

@@ -1,18 +0,0 @@
.at-c-tabs {
padding: 0 5px !important;
margin: 0 -10px !important;
.at-c-tabs__tab {
margin: 0 5px;
}
.at-c-tabs__tab.at-m-selected {
text-decoration: underline;
}
}
.at-c-orgPane {
a {
display: block;
}
}

6
src/pages/Organizations/utils.jsx
View File

@@ -2,12 +2,10 @@ const getTabName = (tab) => {
let tabName = '';
if (tab === 'details') {
tabName = 'Details';
} else if (tab === 'users') {
tabName = 'Users';
} else if (tab === 'access') {
tabName = 'Access';
} else if (tab === 'teams') {
tabName = 'Teams';
} else if (tab === 'admins') {
tabName = 'Admins';
} else if (tab === 'notifications') {
tabName = 'Notifications';
}

11
src/pages/Organizations/views/Organization.add.jsx
View File

@@ -19,11 +19,9 @@ import {
} from '@patternfly/react-core';
import { ConfigContext } from '../../../context';
import { API_ORGANIZATIONS } from '../../../endpoints';
import { API_INSTANCE_GROUPS } from '../../../endpoints';
import api from '../../../api';
import AnsibleSelect from '../../../components/AnsibleSelect';
import Lookup from '../../../components/Lookup';
import AnsibleSelect from '../../../components/AnsibleSelect'
const { light } = PageSectionVariants;
class OrganizationAdd extends React.Component {
@@ -71,8 +69,9 @@ class OrganizationAdd extends React.Component {
}
async onSubmit() {
const { api } = this.props;
const data = Object.assign({}, { ...this.state });
await api.post(API_ORGANIZATIONS, data);
await api.createOrganization(data);
this.resetForm();
}
@@ -81,7 +80,8 @@ class OrganizationAdd extends React.Component {
}
async componentDidMount() {
const { data } = await api.get(API_INSTANCE_GROUPS);
const { api } = this.props;
const { data } = await api.getInstanceGroups();
let results = [];
data.results.map((result) => {
results.push({ id: result.id, name: result.name, isChecked: false });
@@ -92,6 +92,7 @@ class OrganizationAdd extends React.Component {
render() {
const { name, results } = this.state;
const enabled = name.length > 0; // TODO: add better form validation
return (
<Fragment>
<PageSection variant={light} className="pf-m-condensed">

15
src/pages/Organizations/views/Organization.view.jsx
View File

@@ -2,16 +2,13 @@ import React, { Component, Fragment } from 'react';
import { i18nMark } from '@lingui/react';
import {
Switch,
Route
Route,
withRouter,
} from 'react-router-dom';
import OrganizationBreadcrumb from '../components/OrganizationBreadcrumb';
import OrganizationDetail from '../components/OrganizationDetail';
import OrganizationEdit from '../components/OrganizationEdit';
import api from '../../../api';
import { API_ORGANIZATIONS } from '../../../endpoints';
class OrganizationView extends Component {
constructor (props) {
super(props);
@@ -30,6 +27,8 @@ class OrganizationView extends Component {
loading: false,
mounted: false
};
this.fetchOrganization = this.fetchOrganization.bind(this);
}
componentDidMount () {
@@ -47,13 +46,15 @@ class OrganizationView extends Component {
async fetchOrganization () {
const { mounted } = this.state;
const { api } = this.props;
if (mounted) {
this.setState({ error: false, loading: true });
const { match } = this.props;
const { parentBreadcrumbObj, organization } = this.state;
try {
const { data } = await api.get(`${API_ORGANIZATIONS}${match.params.id}/`);
const { data } = await api.getOrganizationDetails(match.params.id);
if (organization === 'loading') {
this.setState({ organization: data });
}
@@ -118,4 +119,4 @@ class OrganizationView extends Component {
}
}
export default OrganizationView;
export default withRouter(OrganizationView);

32
src/pages/Organizations/views/Organizations.list.jsx
View File

@@ -17,9 +17,6 @@ import DataListToolbar from '../../../components/DataListToolbar';
import OrganizationListItem from '../components/OrganizationListItem';
import Pagination from '../../../components/Pagination';
import api from '../../../api';
import { API_ORGANIZATIONS } from '../../../endpoints';
import {
encodeQueryString,
parseQueryString,
@@ -56,6 +53,15 @@ class Organizations extends Component {
results: [],
selected: [],
};
this.onSearch = this.onSearch.bind(this);
this.getQueryParams = this.getQueryParams.bind(this);
this.onSort = this.onSort.bind(this);
this.onSetPage = this.onSetPage.bind(this);
this.onSelectAll = this.onSelectAll.bind(this);
this.onSelect = this.onSelect.bind(this);
this.updateUrl = this.updateUrl.bind(this);
this.fetchOrganizations = this.fetchOrganizations.bind(this);
}
componentDidMount () {
@@ -78,7 +84,7 @@ class Organizations extends Component {
return Object.assign({}, this.defaultParams, searchParams, overrides);
}
onSort = (sortedColumnKey, sortOrder) => {
onSort(sortedColumnKey, sortOrder) {
const { page_size } = this.state;
let order_by = sortedColumnKey;
@@ -90,26 +96,26 @@ class Organizations extends Component {
const queryParams = this.getQueryParams({ order_by, page_size });
this.fetchOrganizations(queryParams);
};
}
onSetPage = (pageNumber, pageSize) => {
onSetPage (pageNumber, pageSize) {
const page = parseInt(pageNumber, 10);
const page_size = parseInt(pageSize, 10);
const queryParams = this.getQueryParams({ page, page_size });
this.fetchOrganizations(queryParams);
};
}
onSelectAll = isSelected => {
onSelectAll (isSelected) {
const { results } = this.state;
const selected = isSelected ? results.map(o => o.id) : [];
this.setState({ selected });
};
}
onSelect = id => {
onSelect (id) {
const { selected } = this.state;
const isSelected = selected.includes(id);
@@ -119,7 +125,7 @@ class Organizations extends Component {
} else {
this.setState({ selected: selected.concat(id) });
}
};
}
updateUrl (queryParams) {
const { history, location } = this.props;
@@ -132,6 +138,7 @@ class Organizations extends Component {
}
async fetchOrganizations (queryParams) {
const { api } = this.props;
const { page, page_size, order_by } = queryParams;
let sortOrder = 'ascending';
@@ -145,7 +152,7 @@ class Organizations extends Component {
this.setState({ error: false, loading: true });
try {
const { data } = await api.get(API_ORGANIZATIONS, queryParams);
const { data } = await api.getOrganizations(queryParams);
const { count, results } = data;
const pageCount = Math.ceil(count / page_size);
@@ -218,7 +225,6 @@ class Organizations extends Component {
parentBreadcrumb={parentBreadcrumb}
userCount={o.summary_fields.related_field_counts.users}
teamCount={o.summary_fields.related_field_counts.teams}
adminCount={o.summary_fields.related_field_counts.admins}
isSelected={selected.includes(o.id)}
onSelect={() => this.onSelect(o.id)}
/>