p17860254
/
monkey
forked from p15670423/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

More work on Run monkey page

This commit is contained in:
VakarisZ 2020-08-31 10:35:39 +03:00
parent e42c4a0fa2
commit d8a0a6d7a8
11 changed files with 114 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,7 @@ export default function commandDisplay(props) {
function renderNav() {
return (
<Nav variant='pills' fill activeKey={selectedCommand.type} onSelect={setSelectedCommandByName}>
<Nav variant='tabs' activeKey={selectedCommand.type} onSelect={setSelectedCommandByName}>
{props.commands.map(command => {
return (
<Nav.Item key={command.type}>
@ -39,9 +39,9 @@ export default function commandDisplay(props) {
}
return (
<>
<div className={'command-display'}>
{renderNav()}
<Card style={{'margin': '0.5em'}}>
<Card>
<div style={{'overflow': 'auto', 'padding': '0.5em'}}>
<CopyToClipboard text={selectedCommand.type} className="pull-right btn-sm">
<Button style={{margin: '-0.5em'}} title="Copy to Clipboard">
@ -51,7 +51,7 @@ export default function commandDisplay(props) {
<code>{selectedCommand.command}</code>
</div>
</Card>
</>
</div>
)
}

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

@ -11,7 +11,7 @@ import CommandDisplay from './CommandDisplay';
const LocalManualRunOptions = (props) => {
return InlineSelection(getContents, props, ManualRunOptions)
return InlineSelection(getContents, props)
}
const getContents = (props) => {
@ -47,8 +47,8 @@ const getContents = (props) => {
return (
<>
<DropdownSelect defaultKey={'win64'} options={osTypes} onClick={setOsType}/>
<DropdownSelect defaultKey={0} options={props.ips} onClick={setIp}/>
<DropdownSelect defaultKey={'win64'} options={osTypes} onClick={setOsType} variant={'outline-monkey'}/>
<DropdownSelect defaultKey={0} options={props.ips} onClick={setIp} variant={'outline-monkey'}/>
<CommandDisplay commands={commands}/>
</>
)

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

@ -2,11 +2,12 @@ import React, {useEffect, useState} from 'react';
import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
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';
import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
import {cloneDeep} from 'lodash';
function ManualRunOptions(props) {
@ -44,23 +45,31 @@ function ManualRunOptions(props) {
}
function getDefaultContents() {
const newProps = cloneDeep({...props, onBackButtonClick: props.disableManualOptions});
return InlineSelection(defaultContents, newProps);
}
function defaultContents() {
return (
<Container className={'inline-selection-component'}>
<>
<NextSelectionButton text={'Local'}
description={'Run on a machine via command.'}
icon={faLaptopCode}
onButtonClick={() => {setComponent(LocalManualRunOptions,
{ips: ips, setComponent: setComponent})}}/>
onButtonClick={() => {
setComponent(LocalManualRunOptions,
{ips: ips, setComponent: setComponent})
}}/>
<NextSelectionButton text={'Remote'}
description={'Run using remote command execution.'}
icon={faNetworkWired}
onButtonClick={() => {}}/>
onButtonClick={() => {
}}/>
<NextSelectionButton text={'Automation'}
description={'Run using automation tools like ansible or chef.'}
icon={faCogs}
onButtonClick={() => {}}/>
<BackButton onClick={props.disableManualOptions} />
</Container>
onButtonClick={() => {
}}/>
</>
);
}

30
monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RemoteRunOptions.js Normal file
View File

@ -0,0 +1,30 @@
import React, {useEffect, useState} from 'react';
import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
import LocalManualRunOptions from './LocalManualRunOptions';
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 InlineSelection from '../../ui-components/inline-selection/InlineSelection';
import ManualRunOptions from './ManualRunOptions';
const RemoteRunOptions = (props) => {
return InlineSelection(getContents, props)
}
function getContents() {
return (
<>
<NextSelectionButton text={'Local'}
description={'Run on a machine via command.'}
icon={faLaptopCode}
onButtonClick={() => {
setComponent(LocalManualRunOptions,
{ips: ips, setComponent: setComponent})
}}/>
</>
);
}
export default ManualRunOptions;

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

@ -44,7 +44,7 @@ export default function DropdownSelect(props) {
return (
<>
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
<Dropdown.Toggle variant={props.variant !== undefined ? props.variant : 'success'} id='dropdown-basic'>
{props.options[selectedOption]}
</Dropdown.Toggle>

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

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

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

@ -2,28 +2,41 @@ import React from 'react';
import PropTypes from 'prop-types';
import BackButton from './BackButton';
import ManualRunOptions from '../../pages/RunMonkeyPage/ManualRunOptions';
import Container from 'react-bootstrap';
import {Col, Row, Container} from 'react-bootstrap';
export default function InlineSelection(WrappedComponent, props, previousComponent){
export default function InlineSelection(WrappedComponent, props) {
return (
<Container className={'inline-selection-component'}>
{previousComponent === undefined ? '' :
<BackButton onClick={() => {setPreviousComponent(props, previousComponent)}}/>}
<Row>
<Col lg={8} md={10} sm={12}>
<WrappedComponent {...props}/>
{renderBackButton(props)}
</Col>
</Row>
</Container>
)
}
function setPreviousComponent(props, previousComponent) {
if(previousComponent === ManualRunOptions){
function renderBackButton(props){
if(props.onBackButtonClick !== undefined){
return (<BackButton onClick={props.onBackButtonClick}/>);
} else if(props.previousComponent === undefined){
return (<BackButton onClick={() => {setPreviousComponent(props, props.previousComponent)}}/>);
}
}
function setPreviousComponent(props) {
if (props.previousComponent === ManualRunOptions) {
return props.setComponent()
} else {
return props.setComponent(previousComponent, props)
return props.setComponent(props.previousComponent, props)
}
}
InlineSelection.propTypes = {
setComponent: PropTypes.func,
ips: PropTypes.arrayOf(PropTypes.string)
ips: PropTypes.arrayOf(PropTypes.string),
previousComponent: PropTypes.object,
onBackButtonClick: PropTypes.func
}

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

@ -5,12 +5,11 @@ 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 (
<Row>
<Col lg={8} md={10} sm={12}>
<Col>
<Button variant={'outline-monkey'} size='lg' className={'selection-button'}
onClick={props.onButtonClick}>
{icon}
@ -25,7 +24,6 @@ export default function nextSelectionButton(props) {
nextSelectionButton.propTypes = {
text: PropTypes.string,
description: PropTypes.string,
icon: FontAwesomeIcon,
onButtonClick: PropTypes.func
}

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

@ -14,6 +14,7 @@
@import 'components/inline-selection/InlineSelection';
@import 'components/inline-selection/NextSelectionButton';
@import 'components/inline-selection/BackButton';
@import 'components/inline-selection/CommandDisplay';
// Define custom elements after bootstrap import

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

@ -0,0 +1,21 @@
.command-display {
margin-top: 30px;
}
.command-display .nav-tabs .nav-item a{
font-size: 0.8em;
color: $monkey-black;
}
.command-display .nav-tabs .nav-item a.active{
color: $monkey-alt;
}
.command-display .nav-tabs{
border-bottom: none;
}
.command-display div.card{
margin: 0;
border-top-left-radius: 0;
}

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

@ -1,12 +1,17 @@
//.inline-selection-component.container {
// display: flex;
// justify-content: center;
//}
//
//.inline-selection-component.container .selection-button{
// margin: 0 5px 0 5px;
//}
.inline-selection-component.container{
padding: 0;
margin-left: 15px;
}
.inline-selection-component .selection-button {
width: 100%;
}
.inline-selection-component .dropdown {
display: inline-block;
margin-right: 10px;
}
.inline-selection-component .command-display {
margin-bottom: 20px;
}