p20319658
/
monkey
forked from p34709852/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

More work and styling of monkey run page components

This commit is contained in:
VakarisZ 2020-08-25 11:30:12 +03:00
parent 522644238b
commit e42c4a0fa2
13 changed files with 153 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js
View File

@ -2,42 +2,53 @@ import {Button, Card, Nav} from 'react-bootstrap';
import CopyToClipboard from 'react-copy-to-clipboard';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faClipboard} from '@fortawesome/free-solid-svg-icons/faClipboard';
import React, {useState} from 'react';
import React, {useEffect, useState} from 'react';
import PropTypes from 'prop-types';
export default function commandDisplay(props) {
const [selectedVariant, setSelectedVariant] = useState(props.commands[0].name);
const [selectedCommand, setSelectedCommand] = useState(props.commands[0]);
function setSelectedCommandByName(type){
setSelectedCommand(getCommandByName(props.commands, type));
}
function getCommandByName(commands, type){
return commands.find((command) => {return command.type === type});
}
useEffect(() => {
let sameTypeCommand = getCommandByName(props.commands, selectedCommand.type);
if( sameTypeCommand !== undefined){
setSelectedCommand(sameTypeCommand);
} else {
setSelectedCommand(props.commands[0]);
}
}, [props.commands]);
function renderNav() {
return (
<Nav variant='pills' fill activeKey={selectedVariant} onSelect={setSelectedVariant}>
<Nav variant='pills' fill activeKey={selectedCommand.type} onSelect={setSelectedCommandByName}>
{props.commands.map(command => {
return (
<Nav.Item key={command.name}>
<Nav.Link eventKey={command.name}>{command.name}</Nav.Link>
<Nav.Item key={command.type}>
<Nav.Link eventKey={command.type}>{command.type}</Nav.Link>
</Nav.Item>);
})}
</Nav>);
}
function getCommandByName(name, commands) {
commands.forEach((command) => {
})
}
return (
<>
{renderNav()}
<Card style={{'margin': '0.5em'}}>
<div style={{'overflow': 'auto', 'padding': '0.5em'}}>
<CopyToClipboard text={props.commands[0].name} className="pull-right btn-sm">
<CopyToClipboard text={selectedCommand.type} className="pull-right btn-sm">
<Button style={{margin: '-0.5em'}} title="Copy to Clipboard">
<FontAwesomeIcon icon={faClipboard}/>
</Button>
</CopyToClipboard>
<code>{props.commands[0].command}</code>
<code>{selectedCommand.command}</code>
</div>
</Card>
</>
@ -46,7 +57,7 @@ export default function commandDisplay(props) {
commandDisplay.propTypes = {
commands: PropTypes.arrayOf(PropTypes.exact({
name: PropTypes.string,
type: PropTypes.string,
command: PropTypes.string
}))
}

8
monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/LocalManualRunOptions.js
View File

@ -37,11 +37,11 @@ const getContents = (props) => {
function generateCommands() {
if(osType === OS_TYPES.WINDOWS_64 || osType === OS_TYPES.WINDOWS_32) {
return [{name: 'CMD', command: GenerateLocalWindowsCmd(selectedIp, osType)},
{name: 'Powershell', command: GenerateLocalWindowsPowershell(selectedIp, osType)}]
return [{type: 'CMD', command: GenerateLocalWindowsCmd(selectedIp, osType)},
{type: 'Powershell', command: GenerateLocalWindowsPowershell(selectedIp, osType)}]
} else {
return [{name: 'CURL', command: GenerateLocalLinuxCurl(selectedIp, osType)},
{name: 'WGET', command: GenerateLocalLinuxWget(selectedIp, osType)}]
return [{type: 'CURL', command: GenerateLocalLinuxCurl(selectedIp, osType)},
{type: 'WGET', command: GenerateLocalLinuxWget(selectedIp, osType)}]
}
}

28
monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/ManualRunOptions.js
View File

@ -3,6 +3,10 @@ import NextSelectionButton from '../../ui-components/inline-selection/NextSelect
import LocalManualRunOptions from './LocalManualRunOptions';
import AuthComponent from '../../AuthComponent';
import BackButton from '../../ui-components/inline-selection/BackButton';
import {faLaptopCode} from '@fortawesome/free-solid-svg-icons/faLaptopCode';
import {faNetworkWired} from '@fortawesome/free-solid-svg-icons/faNetworkWired';
import {faCogs} from '@fortawesome/free-solid-svg-icons/faCogs';
import {Container} from 'react-bootstrap';
function ManualRunOptions(props) {
@ -41,16 +45,22 @@ function ManualRunOptions(props) {
function getDefaultContents() {
return (
<div className={`container inline-selection-component`}>
<NextSelectionButton text={'Local'} onButtonClick={() => {
setComponent(LocalManualRunOptions, {ips: ips, setComponent: setComponent})
}}/>
<NextSelectionButton text={'Remote'} onButtonClick={() => {
}}/>
<NextSelectionButton text={'Automation'} onButtonClick={() => {
}}/>
<Container className={'inline-selection-component'}>
<NextSelectionButton text={'Local'}
description={'Run on a machine via command.'}
icon={faLaptopCode}
onButtonClick={() => {setComponent(LocalManualRunOptions,
{ips: ips, setComponent: setComponent})}}/>
<NextSelectionButton text={'Remote'}
description={'Run using remote command execution.'}
icon={faNetworkWired}
onButtonClick={() => {}}/>
<NextSelectionButton text={'Automation'}
description={'Run using automation tools like ansible or chef.'}
icon={faCogs}
onButtonClick={() => {}}/>
<BackButton onClick={props.disableManualOptions} />
</div>
</Container>
);
}

0
monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RunOptions.js
View File

5
monkey/monkey_island/cc/ui/src/components/ui-components/DropdownSelect.js
View File

@ -11,7 +11,7 @@ export default function DropdownSelect(props) {
} else if (typeof data === 'object') {
return generateDropdownItemsFromObject(data);
} else {
throw "Component can only generate dropdown intems from lists and objects."
throw 'Component can only generate dropdown items from arrays and objects.'
}
}
@ -35,7 +35,8 @@ export default function DropdownSelect(props) {
return (
<Dropdown.Item onClick={() => { setSelectedOption(key);
props.onClick(key)}}
active={(key === selectedOption)}>
active={(key === selectedOption)}
key={value}>
{value}
</Dropdown.Item>);
}

15
monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/BackButton.js
View File

@ -1,12 +1,19 @@
import {Button} from 'react-bootstrap';
import {Button, Col, Row} from 'react-bootstrap';
import React from 'react';
import PropTypes from 'prop-types';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCaretLeft} from '@fortawesome/free-solid-svg-icons/faCaretLeft';
export default function backButton(props) {
return (
<Button variant={'secondary'} onClick={props.onClick}>
Back
</Button>
<Row>
<Col lg={8} md={10} sm={12}>
<Button variant={'outline-dark'} onClick={props.onClick} className={'back-button'}>
<FontAwesomeIcon icon={faCaretLeft} />
<h1>Back</h1>
</Button>
</Col>
</Row>
)
}

5
monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js
View File

@ -2,15 +2,16 @@ import React from 'react';
import PropTypes from 'prop-types';
import BackButton from './BackButton';
import ManualRunOptions from '../../pages/RunMonkeyPage/ManualRunOptions';
import Container from 'react-bootstrap';
export default function InlineSelection(WrappedComponent, props, previousComponent){
return (
<div className={`container inline-selection-component`}>
<Container className={'inline-selection-component'}>
{previousComponent === undefined ? '' :
<BackButton onClick={() => {setPreviousComponent(props, previousComponent)}}/>}
<WrappedComponent {...props}/>
</div>
</Container>
)
}

24
monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js
View File

@ -1,17 +1,31 @@
import {Button} from 'react-bootstrap';
import {Button, Row, Col} from 'react-bootstrap';
import React from 'react';
import PropTypes from 'prop-types';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faAngleRight} from '@fortawesome/free-solid-svg-icons';
export default function nextSelectionButton(props) {
console.log(props);
let description = props.description !== undefined ? (<p>{props.description}</p>) : ''
let icon = props.icon !== undefined ? (<FontAwesomeIcon icon={props.icon}/>) : ''
return (
<Button variant={'outline-monkey'} size='lg' className={'selection-button'}
onClick={props.onButtonClick}>
{props.text}
</Button>
<Row>
<Col lg={8} md={10} sm={12}>
<Button variant={'outline-monkey'} size='lg' className={'selection-button'}
onClick={props.onButtonClick}>
{icon}
<h1>{props.text}</h1>
{description}
<FontAwesomeIcon icon={faAngleRight} className={'angle-right'}/>
</Button>
</Col>
</Row>
)
}
nextSelectionButton.propTypes = {
text: PropTypes.string,
description: PropTypes.string,
icon: FontAwesomeIcon,
onButtonClick: PropTypes.func
}

4
monkey/monkey_island/cc/ui/src/styles/Main.scss
View File

@ -11,7 +11,9 @@
@import 'components/InfoPane';
@import 'components/PreviewPane';
@import 'components/AdvancedMultiSelect';
@import 'components/InlineSelection';
@import 'components/inline-selection/InlineSelection';
@import 'components/inline-selection/NextSelectionButton';
@import 'components/inline-selection/BackButton';
// Define custom elements after bootstrap import

8
monkey/monkey_island/cc/ui/src/styles/components/InlineSelection.scss
View File

@ -1,8 +0,0 @@
.inline-selection-component.container {
display: flex;
justify-content: center;
}
.inline-selection-component.container .selection-button{
margin: 0 5px 0 5px;
}

20
monkey/monkey_island/cc/ui/src/styles/components/inline-selection/BackButton.scss Normal file
View File

@ -0,0 +1,20 @@
.inline-selection-component .back-button {
width: 100%;
text-align: left;
}
.inline-selection-component .back-button h1{
font-size: 1.3em;
margin-top: 5px;
margin-bottom: 5px;
text-align: left;
display: inline-block;
}
.inline-selection-component .back-button svg{
font-size: 1.5em;
display: inline-block;
margin-right: 10px;
position: relative;
top: 1px;
}

12
monkey/monkey_island/cc/ui/src/styles/components/inline-selection/InlineSelection.scss Normal file
View File

@ -0,0 +1,12 @@
//.inline-selection-component.container {
// display: flex;
// justify-content: center;
//}
//
//.inline-selection-component.container .selection-button{
// margin: 0 5px 0 5px;
//}
.inline-selection-component .selection-button {
width: 100%;
}

34
monkey/monkey_island/cc/ui/src/styles/components/inline-selection/NextSelectionButton.scss Normal file
View File

@ -0,0 +1,34 @@
.inline-selection-component .selection-button {
width: 100%;
text-align: left;
margin-bottom: 20px;
padding-right: 40px;
}
.inline-selection-component .selection-button svg,
.inline-selection-component .selection-button h1 {
display: inline-block;
}
.inline-selection-component .selection-button h1 {
margin: 0;
font-size: 1.3em;
}
.inline-selection-component .selection-button p {
margin: 0;
font-size: 0.8em;
}
.inline-selection-component .selection-button svg {
margin-bottom: 1px;
margin-right: 7px;
}
.inline-selection-component .selection-button .angle-right {
display: inline-block;
position: absolute;
right: 23px;
top: 22%;
font-size: 1.7em;
}