Skip to content

Commit

Permalink
ux improvements for correlations page
Browse files Browse the repository at this point in the history 
Signed-off-by: Amardeepsingh Siglani <[email protected]>
  • Loading branch information
@amsiglan
amsiglan committed Sep 26, 2023
1 parent b8b3298 commit 657f4d7
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 66 deletions.
2 changes: 1 addition & 1 deletion public/pages/Correlations/components/CorrelationGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const CorrelationGraph: React.FC<CorrelationGraphProps> = ({
getNetwork,
}) => {
return loadingData ? (
<div style={{ margin: '75px 47%' }}>
<div style={{ margin: '0px 47%', height: 800, paddingTop: 384 }}>
<EuiLoadingChart size="xl" className="chart-view-container-loading" />
</div>
) : (
Expand Down
119 changes: 62 additions & 57 deletions public/pages/Correlations/components/FindingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
EuiPanel,
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiButtonIcon,
EuiSpacer,
EuiBadge,
Expand Down Expand Up @@ -42,78 +41,84 @@ export const FindingCard: React.FC<FindingCardProps> = ({
finding,
findings,
}) => {
const correlationHeader = correlationData ? (
<>
<EuiFlexGroup className={'finding-card-header'}>
<EuiFlexItem grow={true}>
<EuiText style={{ fontSize: 22, fontWeight: 300 }}>{correlationData.score}</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
const list = [
{
title: 'Detection rule',
description: detectionRule.name,
},
];

if (finding.correlationRule) {
list.unshift({
title: 'Correlation score',
description: finding.correlationRule.name,
});
}

const badgePadding = '2px 7px';
const { text: severityText, background } = getSeverityColor(detectionRule.severity);

const header = (
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<div>
<EuiBadge color={background} style={{ padding: badgePadding, color: severityText }}>
{getSeverityLabel(detectionRule.severity)}
</EuiBadge>
<EuiBadge color="hollow" style={{ padding: '3px 10px' }}>
{getLabelFromLogType(logType)}
</EuiBadge>
</div>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<div>
<EuiToolTip content={'View finding details'}>
<EuiButtonIcon
aria-label={'View finding details'}
data-test-subj={`view-details-icon`}
iconType={'expand'}
iconType={'inspect'}
onClick={() => DataStore.findings.openFlyout(finding, findings, false)}
/>
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
iconType={'inspect'}
onClick={() => correlationData.onInspect(id, logType)}
iconType={correlationData ? 'pin' : 'pinFilled'}
onClick={() => correlationData?.onInspect(id, logType)}
disabled={!correlationData}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiText size="s">Correlation score</EuiText>
<EuiSpacer size="m" />
</>
) : null;
</div>
</EuiFlexItem>
</EuiFlexGroup>
);

const list = [
{
title: 'Generated',
description: timestamp,
},
{
title: 'Detection rule',
description: detectionRule.name,
},
];
const attrList = <EuiDescriptionList type="column" textStyle="reverse" listItems={list} />;

return (
const relatedFindingCard = (
<EuiPanel>
{correlationHeader}
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="s">
{header}
<EuiSpacer size="s" />
<EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" alignItems="center">
<EuiFlexItem grow={false}>
<div>
<EuiBadge
color={getSeverityColor(detectionRule.severity).background}
style={{ padding: '3px 10px' }}
>
{getSeverityLabel(detectionRule.severity)}
</EuiBadge>
<EuiBadge color="hollow" style={{ padding: '3px 10px' }}>
{getLabelFromLogType(logType)}
</EuiBadge>
</div>
<p>Correlation score</p>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<b>{correlationData?.score}</b>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<span>{timestamp}</span>
</EuiFlexItem>
{!correlationData && (
<EuiFlexItem grow={false}>
<EuiToolTip content={'View finding details'}>
<EuiButtonIcon
aria-label={'View finding details'}
data-test-subj={`view-details-icon`}
iconType={'expand'}
onClick={() => DataStore.findings.openFlyout(finding, findings, false)}
/>
</EuiToolTip>
</EuiFlexItem>
)}
</EuiFlexGroup>
{correlationHeader ? <EuiHorizontalRule margin="s" /> : null}
<EuiHorizontalRule margin="s" />
{attrList}
</EuiPanel>
);

return correlationData ? (
relatedFindingCard
) : (
<EuiPanel>
{header}
<EuiSpacer size="m" />
<EuiDescriptionList type="column" textStyle="reverse" listItems={list} />
{attrList}
</EuiPanel>
);
};
23 changes: 15 additions & 8 deletions public/pages/Correlations/containers/CorrelationsContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
EuiButton,
EuiBadge,
EuiFilterGroup,
EuiHorizontalRule,
} from '@elastic/eui';
import { FilterItem, FilterGroup } from '../components/FilterGroup';
import { CoreServicesContext } from '../../../components/core_services';
Expand Down Expand Up @@ -112,7 +113,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation

async componentDidMount(): Promise<void> {
this.context.chrome.setBreadcrumbs([BREADCRUMBS.SECURITY_ANALYTICS, BREADCRUMBS.CORRELATIONS]);
this.updateState();
this.updateState(true /* onMount */);
this.props.onMount();
}

Expand All @@ -130,8 +131,8 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
}
}

private async updateState() {
if (this.props.location.state) {
private async updateState(onMount: boolean = false) {
if (onMount && this.props.location.state) {
const state = this.props.location.state;

const specificFindingInfo: SpecificFindingCorrelations = {
Expand Down Expand Up @@ -204,7 +205,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
createdEdges.add(possibleCombination1);
});

this.setState({ graphData });
this.setState({ graphData, specificFindingInfo: undefined });
}
}

Expand Down Expand Up @@ -307,19 +308,23 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
private createNodeTooltip = ({ detectionRule, timestamp, logType }: CorrelationFinding) => {
const { text, background } = getSeverityColor(detectionRule.severity);
const tooltipContent = (
<div style={{ backgroundColor: '#535353', color: '#ffffff', padding: '8px' }}>
<EuiFlexGroup alignItems="center">
<div style={{ backgroundColor: '#535353', color: '#ffffff', padding: '15px' }}>
<EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiBadge style={{ color: text }} color={background}>
{getSeverityLabel(detectionRule.severity)}
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<strong>{getLabelFromLogType(logType)}</strong>
<EuiBadge>{getLabelFromLogType(logType)}</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiText>{timestamp}</EuiText>
<EuiHorizontalRule margin="xs" />
<strong>Detection rule</strong>
<EuiSpacer size="s" />
<p>{detectionRule.name}</p>
</div>
);

Expand Down Expand Up @@ -385,6 +390,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
...option,
checked: 'on',
})),
specificFindingInfo: undefined,
});
};

Expand Down Expand Up @@ -435,7 +441,8 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
onClose={this.closeFlyout}
ownFocus={true}
type="push"
maxWidth="300px"
maxWidth="400px"
key={findingCardsData.finding.id}
>
<EuiFlyoutHeader hasBorder>
<EuiFlexGroup>
Expand Down

0 comments on commit 657f4d7

Please sign in to comment.