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

Extracted count badge into a separate component which is reused between scoutsuite rules button and monkey events button

This commit is contained in:
VakarisZ 2021-02-05 11:03:27 +02:00
parent 6cb4280f89
commit bcfa8fff78
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js
View File

@ -1,10 +1,11 @@
import React, {Component, Fragment} from 'react'; import React, {Component, Fragment} from 'react';
import EventsModal from './EventsModal'; import EventsModal from './EventsModal';
import {Badge, Button} from 'react-bootstrap'; import {Button} from 'react-bootstrap';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faList } from '@fortawesome/free-solid-svg-icons/faList'; import { faList } from '@fortawesome/free-solid-svg-icons/faList';
import CountBadge from '../../ui-components/CountBadge';
export default class EventsButton extends Component { export default class EventsButton extends Component {
constructor(props) { constructor(props) {
@ -33,16 +34,11 @@ export default class EventsButton extends Component {
exportFilename={this.props.exportFilename}/> exportFilename={this.props.exportFilename}/>
<div className="text-center" style={{'display': 'grid'}}> <div className="text-center" style={{'display': 'grid'}}>
<Button variant={'monkey-info'} size={'lg'} onClick={this.show}> <Button variant={'monkey-info'} size={'lg'} onClick={this.show}>
<FontAwesomeIcon icon={faList}/> Events {this.createEventsAmountBadge()} <FontAwesomeIcon icon={faList}/> Events <CountBadge count={this.props.event_count} />
</Button> </Button>
</div> </div>
</Fragment>; </Fragment>;
} }
createEventsAmountBadge() {
const eventsAmountBadgeContent = this.props.event_count > 9 ? '9+' : this.props.event_count;
return <Badge variant={'monkey-info-light'}>{eventsAmountBadgeContent}</Badge>;
}
} }
EventsButton.propTypes = { EventsButton.propTypes = {

12
monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/scoutsuite/ScoutSuiteRuleButton.js
View File

@ -5,6 +5,7 @@ import * as PropTypes from 'prop-types';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faList} from '@fortawesome/free-solid-svg-icons/faList'; import {faList} from '@fortawesome/free-solid-svg-icons/faList';
import ScoutSuiteRuleModal from './ScoutSuiteRuleModal'; import ScoutSuiteRuleModal from './ScoutSuiteRuleModal';
import CountBadge from '../../../ui-components/CountBadge';
export default class ScoutSuiteRuleButton extends Component { export default class ScoutSuiteRuleButton extends Component {
constructor(props) { constructor(props) {
@ -28,7 +29,7 @@ export default class ScoutSuiteRuleButton extends Component {
<div className="text-center" style={{'display': 'grid'}}> <div className="text-center" style={{'display': 'grid'}}>
<Button variant={'monkey-info'} size={'lg'} onClick={this.toggleModal}> <Button variant={'monkey-info'} size={'lg'} onClick={this.toggleModal}>
<FontAwesomeIcon icon={faList}/> Rules <FontAwesomeIcon icon={faList}/> Rules
&nbsp;<RuleCountBadge count={this.props.scoutsuite_rules.length}/> &nbsp;<CountBadge count={this.props.scoutsuite_rules.length}/>
</Button> </Button>
</div> </div>
</>); </>);
@ -39,15 +40,6 @@ export default class ScoutSuiteRuleButton extends Component {
} }
} }
function RuleCountBadge(props) {
const MAX_RULE_COUNT_TO_SHOW = 9;
const TEXT_FOR_LARGE_RULE_COUNT = MAX_RULE_COUNT_TO_SHOW + '+';
const ruleCountText = props.count > MAX_RULE_COUNT_TO_SHOW ?
TEXT_FOR_LARGE_RULE_COUNT : props.count;
return <Badge variant={'monkey-info-light'}>{ruleCountText}</Badge>;
}
ScoutSuiteRuleButton.propTypes = { ScoutSuiteRuleButton.propTypes = {
scoutsuite_rules: PropTypes.array, scoutsuite_rules: PropTypes.array,
scoutsuite_data: PropTypes.object scoutsuite_data: PropTypes.object

18
monkey/monkey_island/cc/ui/src/components/ui-components/CountBadge.js Normal file
View File

@ -0,0 +1,18 @@
import {Badge} from 'react-bootstrap';
import React from 'react';
function CountBadge(props) {
const TEXT_FOR_LARGE_RULE_COUNT = props.maxCount + '+';
const ruleCountText = props.count > props.maxCount ?
TEXT_FOR_LARGE_RULE_COUNT : props.count;
return <Badge variant={'monkey-info-light'}>{ruleCountText}</Badge>;
}
CountBadge.defaultProps = {
maxCount: 9
}
export default CountBadge;