mirror of
https://github.com/ansible/awx.git
synced 2026-02-01 09:38:10 -03:30
Add help dropdown and about modal
This commit is contained in:
Marliana Lara
@@ -1,9 +1,105 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
AboutModal,
|
||||
TextContent,
|
||||
TextList,
|
||||
TextListItem } from '@patternfly/react-core';
|
||||
|
||||
const About = () => (
|
||||
<div>
|
||||
<h2>About</h2>
|
||||
</div>
|
||||
);
|
||||
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 api from '../api';
|
||||
import { API_CONFIG } from '../endpoints';
|
||||
|
||||
class About extends React.Component {
|
||||
unmounting = false;
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
config: {},
|
||||
error: false
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount () {
|
||||
try {
|
||||
const { data } = await api.get(API_CONFIG);
|
||||
this.safeSetState({ config: data });
|
||||
} catch (error) {
|
||||
this.safeSetState({ error });
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.unmounting = true;
|
||||
}
|
||||
|
||||
safeSetState = obj => !this.unmounting && this.setState(obj);
|
||||
|
||||
createSpeechBubble = (version) => {
|
||||
let text = `Tower ${version}`;
|
||||
let top = '';
|
||||
let bottom = '';
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
top += '_';
|
||||
bottom += '-';
|
||||
}
|
||||
|
||||
top = ` __${top}__ \n`;
|
||||
text = `< ${text} >\n`;
|
||||
bottom = ` --${bottom}-- `;
|
||||
|
||||
return top + text + bottom;
|
||||
}
|
||||
|
||||
handleModalToggle = () => {
|
||||
const { onAboutModalClose } = this.props;
|
||||
onAboutModalClose();
|
||||
};
|
||||
|
||||
render () {
|
||||
const { isOpen } = this.props;
|
||||
const { config = {}, error } = this.state;
|
||||
const { ansible_version = 'loading', version = 'loading' } = config;
|
||||
|
||||
return (
|
||||
<AboutModal
|
||||
isOpen={isOpen}
|
||||
onClose={this.handleModalToggle}
|
||||
productName="Ansible Tower"
|
||||
trademark="Copyright 2018 Red Hat, Inc."
|
||||
brandImageSrc={brandImg}
|
||||
brandImageAlt="Brand Image"
|
||||
logoImageSrc={logoImg}
|
||||
logoImageAlt="AboutModal Logo"
|
||||
heroImageSrc={heroImg}
|
||||
>
|
||||
<pre>
|
||||
{ this.createSpeechBubble(version) }
|
||||
{`
|
||||
\\
|
||||
\\ ^__^
|
||||
(oo)\\_______
|
||||
(__) A )\\
|
||||
||----w |
|
||||
|| ||
|
||||
`}
|
||||
</pre>
|
||||
|
||||
<TextContent>
|
||||
<TextList component="dl">
|
||||
<TextListItem component="dt">Ansible Version</TextListItem>
|
||||
<TextListItem component="dd">{ ansible_version }</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
{ error ? <div>error</div> : ''}
|
||||
</AboutModal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default About;
|
||||
|
||||
61
src/components/HelpDropdown.jsx
Normal file
61
src/components/HelpDropdown.jsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
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"
|
||||
>
|
||||
Help
|
||||
</DropdownItem>,
|
||||
<DropdownItem
|
||||
onClick={() => this.setState({ showAboutModal: true })}
|
||||
key="about"
|
||||
>
|
||||
About
|
||||
</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;
|
||||
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { Brand } from '@patternfly/react-core';
|
||||
|
||||
import TowerLogoHeader from './tower-logo-header.svg';
|
||||
import TowerLogoHeaderHover from './tower-logo-header-hover.svg';
|
||||
import TowerLogoHeader from '../../../images/tower-logo-header.svg';
|
||||
import TowerLogoHeaderHover from '../../../images/tower-logo-header-hover.svg';
|
||||
|
||||
class TowerLogo extends Component {
|
||||
constructor (props) {
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 100 35" style="enable-background:new 0 0 100 35;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#5FBDBE;}
|
||||
.st1{fill:#1D1D1D;}
|
||||
</style>
|
||||
<g id="Layer_1_1_">
|
||||
<g>
|
||||
<path class="st0" d="M43.6,11.8v11.6h-1.5V11.8h-3.8v-1.4h9v1.3L43.6,11.8L43.6,11.8z"/>
|
||||
<path class="st0" d="M54.4,23.7c-3.3,0-5.3-2.7-5.3-6.7s2.2-6.7,5.4-6.7c3.3,0,5.4,2.7,5.4,6.7S57.6,23.7,54.4,23.7z M54.4,11.6
|
||||
c-2.2,0-3.9,2.1-3.9,5.3s1.6,5.4,4,5.4c2.3,0,3.9-2.1,3.9-5.3S56.6,11.6,54.4,11.6L54.4,11.6z"/>
|
||||
<path class="st0" d="M72.8,23.5h-1.6l-2-8.2c-0.2-0.9-0.5-2.2-0.6-2.9c-0.1,0.9-0.4,2-0.6,2.9l-2,8.2h-1.6l-2.7-13h1.5l1.5,8.2
|
||||
c0.1,0.9,0.4,2.3,0.5,2.9c0.1-0.6,0.4-2,0.6-2.8l2.1-8.4h1.5l2.1,8.4c0.2,0.9,0.5,2.2,0.6,2.8c0.1-0.6,0.3-2,0.5-2.9l1.5-8.2h1.4
|
||||
L72.8,23.5z"/>
|
||||
<path class="st0" d="M78,23.5V10.4h7.8v1.3h-6.4v4.1h3.7v1.4h-3.7V22h6.7v1.3C86.3,23.5,78,23.5,78,23.5z"/>
|
||||
<path class="st0" d="M95,17.8l2.8,5.6h-1.6l-2.8-5.5h-3v5.5h-1.5v-13H94c2.3,0,4,1.2,4,3.7c0.2,1.7-1,3.4-2.7,3.7
|
||||
C95.2,17.8,95.2,17.8,95,17.8z M94,11.8h-3.6v4.8h3.5c1.8,0,2.8-0.9,2.8-2.4S95.8,11.8,94,11.8L94,11.8z"/>
|
||||
</g>
|
||||
<circle class="st0" cx="16.8" cy="17.3" r="15.7"/>
|
||||
<path class="st1" d="M24.2,23.6L18,8.5C17.8,8,17.1,7.7,16.6,8c-0.2,0.1-0.4,0.3-0.5,0.5L9.2,25h2.4l2.7-6.8l8,6.6
|
||||
c0.2,0.2,0.5,0.3,0.9,0.4c0.5,0.1,1.1-0.3,1.2-1v-0.1V24C24.3,23.9,24.3,23.7,24.2,23.6z M17,11.2l4.1,10.1l-6.2-4.8L17,11.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,25 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 100 35" style="enable-background:new 0 0 100 35;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill:#1D1D1D;}
|
||||
</style>
|
||||
<g id="Layer_1_1_">
|
||||
<g>
|
||||
<path class="st0" d="M43.6,11.8v11.6h-1.5V11.8h-3.8v-1.4h9v1.3L43.6,11.8L43.6,11.8z"/>
|
||||
<path class="st0" d="M54.4,23.7c-3.3,0-5.3-2.7-5.3-6.7s2.2-6.7,5.4-6.7c3.3,0,5.4,2.7,5.4,6.7S57.6,23.7,54.4,23.7z M54.4,11.6
|
||||
c-2.2,0-3.9,2.1-3.9,5.3s1.6,5.4,4,5.4c2.3,0,3.9-2.1,3.9-5.3S56.6,11.6,54.4,11.6L54.4,11.6z"/>
|
||||
<path class="st0" d="M72.8,23.5h-1.6l-2-8.2c-0.2-0.9-0.5-2.2-0.6-2.9c-0.1,0.9-0.4,2-0.6,2.9l-2,8.2h-1.6l-2.7-13h1.5l1.5,8.2
|
||||
c0.1,0.9,0.4,2.3,0.5,2.9c0.1-0.6,0.4-2,0.6-2.8l2.1-8.4h1.5l2.1,8.4c0.2,0.9,0.5,2.2,0.6,2.8c0.1-0.6,0.3-2,0.5-2.9l1.5-8.2h1.4
|
||||
L72.8,23.5z"/>
|
||||
<path class="st0" d="M78,23.5V10.4h7.8v1.3h-6.4v4.1h3.7v1.4h-3.7V22h6.7v1.3C86.3,23.5,78,23.5,78,23.5z"/>
|
||||
<path class="st0" d="M95,17.8l2.8,5.6h-1.6l-2.8-5.5h-3v5.5h-1.5v-13H94c2.3,0,4,1.2,4,3.7c0.2,1.7-1,3.4-2.7,3.7
|
||||
C95.2,17.8,95.2,17.8,95,17.8z M94,11.8h-3.6v4.8h3.5c1.8,0,2.8-0.9,2.8-2.4S95.8,11.8,94,11.8L94,11.8z"/>
|
||||
</g>
|
||||
<circle class="st0" cx="16.8" cy="17.3" r="15.7"/>
|
||||
<path class="st1" d="M24.2,23.6L18,8.5C17.8,8,17.1,7.7,16.6,8c-0.2,0.1-0.4,0.3-0.5,0.5L9.2,25h2.4l2.7-6.8l8,6.6
|
||||
c0.2,0.2,0.5,0.3,0.9,0.4c0.5,0.1,1.1-0.3,1.2-1v-0.1V24C24.3,23.9,24.3,23.7,24.2,23.6z M17,11.2l4.1,10.1l-6.2-4.8L17,11.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
Reference in New Issue
Block a user