UI: Add external link icon to Ransomware report

This commit is contained in:
Mike Salvatore 2021-09-27 14:19:27 -04:00
parent 7d9386c266
commit e67066dd0d
4 changed files with 45 additions and 42 deletions

View File

@ -3,19 +3,20 @@ import IslandHttpClient from '../../IslandHttpClient';
import {FileEncryptionTable, TableRow} from './FileEncryptionTable'; import {FileEncryptionTable, TableRow} from './FileEncryptionTable';
import NumberedReportSection from './NumberedReportSection'; import NumberedReportSection from './NumberedReportSection';
import LoadingIcon from '../../ui-components/LoadingIcon'; import LoadingIcon from '../../ui-components/LoadingIcon';
import ExternalLink from '../common/ExternalLink';
const ATTACK_DESCRIPTION = 'After the attacker or malware has propagated through your network, \ const ATTACK_DESCRIPTION = <>
your data is at risk on any machine the attacker can access. It can be \ After the attacker or malware has propagated through your network,
encrypted and held for ransom, exfiltrated, or manipulated in \ your data is at risk on any machine the attacker can access. It can be
whatever way the attacker chooses. \ encrypted and held for ransom, exfiltrated, or manipulated in
<br /> \ whatever way the attacker chooses.
<br /> \ <br />
<a \ <br />
href="https://www.guardicore.com/blog/what-are-ransomware-costs/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report" \ <ExternalLink
target="_blank" \ url="https://www.guardicore.com/blog/what-are-ransomware-costs/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report"
> \ text="Learn about the financial impact of ransomware on Guardicore's blog"
Learn about the financial impact of ransomware on Guardicore\'s blog. \ />
</a>'; </>
const HOSTNAME_REGEX = /^(.* - )?(\S+) :.*$/; const HOSTNAME_REGEX = /^(.* - )?(\S+) :.*$/;

View File

@ -3,22 +3,23 @@ import IslandHttpClient from '../../IslandHttpClient';
import NumberedReportSection from './NumberedReportSection'; import NumberedReportSection from './NumberedReportSection';
import LoadingIcon from '../../ui-components/LoadingIcon'; import LoadingIcon from '../../ui-components/LoadingIcon';
import {renderLimitedArray} from '../common/RenderArrays'; import {renderLimitedArray} from '../common/RenderArrays';
import ExternalLink from '../common/ExternalLink';
const BREACH_DESCRIPTION = <>
Ransomware attacks start after machines in the internal network get
compromised. The initial compromise was simulated by running Monkey Agents
manually. Detecting ransomware at this stage will minimize the impact to the
organization.
<br />
<br />
<ExternalLink
url="https://www.guardicore.com/blog/4-techniques-for-early-ransomware-detection/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report"
text="Learn techniques for early ransomware detection on Guardicore's blog"
/>
</>
function BreachSection() { function BreachSection() {
const [machines, setMachines] = useState(null); const [machines, setMachines] = useState(null);
let description = 'Ransomware attacks start after machines in the internal network get \
compromised. The initial compromise was simulated by running Monkey Agents \
manually. Detecting ransomware at this stage will minimize the impact to the \
organization. \
<br /> \
<br /> \
<a \
href="https://www.guardicore.com/blog/4-techniques-for-early-ransomware-detection/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report" \
target="_blank" \
> \
Learn techniques for early ransomware detection on Guardicore\'s blog. \
</a>';
useEffect(() => { useEffect(() => {
IslandHttpClient.get('/api/exploitations/manual') IslandHttpClient.get('/api/exploitations/manual')
@ -27,7 +28,7 @@ function BreachSection() {
if(machines !== null){ if(machines !== null){
let body = getBreachSectionBody(machines); let body = getBreachSectionBody(machines);
return (<NumberedReportSection index={1} title={'Breach'} description={description} body={body}/>) return (<NumberedReportSection index={1} title={'Breach'} description={BREACH_DESCRIPTION} body={body}/>)
} else { } else {
return <LoadingIcon /> return <LoadingIcon />
} }

View File

@ -2,19 +2,20 @@ import React, {ReactElement} from 'react';
import NumberedReportSection from './NumberedReportSection'; import NumberedReportSection from './NumberedReportSection';
import pluralize from 'pluralize' import pluralize from 'pluralize'
import BreachedServersComponent from '../security/BreachedServers'; import BreachedServersComponent from '../security/BreachedServers';
import ExternalLink from '../common/ExternalLink';
const LATERAL_MOVEMENT_DESCRIPTION = 'After the initial breach, the attacker will begin the Lateral \ const LATERAL_MOVEMENT_DESCRIPTION = <>
Movement phase of the attack. They will employ various \ After the initial breach, the attacker will begin the Lateral
techniques in order to compromise other systems in your \ Movement phase of the attack. They will employ various
network. \ techniques in order to compromise other systems in your
<br /> \ network.
<br /> \ <br />
<a \ <br />
href="https://www.guardicore.com/blog/stopping-ransomware-with-segmentation/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report" \ <ExternalLink
target="_blank" \ url="https://www.guardicore.com/blog/stopping-ransomware-with-segmentation/?utm_medium=monkey-request&utm_source=web-report&utm_campaign=monkey-security-report"
> \ text="See some real-world examples on Guardicore's blog"
See some real-world examples on Guardicore\'s blog. \ />
</a>'; </>
type PropagationStats = { type PropagationStats = {
num_scanned_nodes: number, num_scanned_nodes: number,

View File

@ -5,7 +5,7 @@ import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
type Props = { type Props = {
index: number, index: number,
title: string, title: string,
description: string, description: ReactFragment,
body: ReactFragment body: ReactFragment
} }
@ -14,7 +14,7 @@ function NumberedReportSection(props: Props): ReactElement {
<div className='numbered-report-section'> <div className='numbered-report-section'>
<Header index={props.index} title={props.title} /> <Header index={props.index} title={props.title} />
<div className='indented'> <div className='indented'>
<Description text={props.description} /> <Description description={props.description} />
{props.body} {props.body}
</div> </div>
</div> </div>
@ -27,11 +27,11 @@ function Header({index, title}: {index: number, title: string}): ReactElement {
) )
} }
function Description({text}: {text: string}): ReactElement { function Description({description}: {description: ReactFragment}): ReactElement {
return ( return (
<div className='alert alert-secondary description'> <div className='alert alert-secondary description'>
<FontAwesomeIcon icon={faInfoCircle} className='alert-icon'/> <FontAwesomeIcon icon={faInfoCircle} className='alert-icon'/>
<span dangerouslySetInnerHTML={{__html: text}} /> <span>{description}</span>
</div> </div>
) )
} }