Skip to content

[Cloud Security] fix misconfiguration and vulnerability flyout UI issues #225862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexreal1314 merged 2 commits into from
Jul 1, 2025
Merged

[Cloud Security] fix misconfiguration and vulnerability flyout UI issues #225862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b6cb86
fix expandable flyout title and sub title size
alexreal1314 Jun 30, 2025
634d169
improve styling of overview tab in the misconfiguration expandable fl…
alexreal1314 Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 84 additions & 30 deletions ...ugins/cloud_security_posture/public/pages/configurations/findings_flyout/overview_tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,16 @@ import {
EuiPanel,
EuiSpacer,
EuiText,
EuiTitle,
useEuiTheme,
} from '@elastic/eui';
import React, { useMemo } from 'react';
import type { EuiDescriptionListProps, EuiAccordionProps, EuiBasicTableColumn } from '@elastic/eui';
import type {
EuiDescriptionListProps,
EuiAccordionProps,
EuiBasicTableColumn,
EuiThemeComputed,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import {
CDR_MISCONFIGURATIONS_INDEX_PATTERN,
Expand Down Expand Up @@ -82,9 +89,21 @@ const renderTableField = (value: string) => {
return <EuiText size="xs">{EMPTY_VALUE}</EuiText>;
}

return Array.isArray(value) ? (
<MultiValueCellPopover<unknown> items={value} field="" object={{}} renderItem={renderValue} />
) : (
if (Array.isArray(value)) {
return (
<MultiValueCellPopover<unknown>
items={value}
field=""
object={{}}
renderItem={renderValue}
{...(value.length === 1
? { firstItemRenderer: (item) => <TruncatedCopyableText textToCopy={item} /> }
: {})}
/>
);
}

return (
<>
<TruncatedCopyableText textToCopy={value} />
</>
Expand Down Expand Up @@ -138,40 +157,74 @@ const getResourceList = (data: CspFinding) => [
const getDetailsList = (
data: CspFinding,
ruleFlyoutLink?: string,
discoverDataViewLink?: string
discoverDataViewLink?: string,
euiTheme?: EuiThemeComputed<{}>
) => [
{
title: (
<>
<EuiFlexGroup direction="row" gutterSize="m">
<EuiFlexItem>
{i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.ruleDescription', {
defaultMessage: 'Rule Description',
})}
</EuiFlexItem>
<EuiFlexItem>
<EuiLink href={ruleFlyoutLink} target="_blank" css={{ textAlign: 'right' }}>
<EuiIcon type="expand" />
{i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.showRuleDetails', {
defaultMessage: 'Show rule details',
<EuiFlexGroup direction="row" gutterSize="m" css={{ marginBottom: euiTheme?.size.xs }}>
<EuiFlexItem>
<EuiTitle size="xxs">
<h1>
{i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.ruleDescription', {
defaultMessage: 'Rule Description',
})}
</EuiLink>
</EuiFlexItem>
</EuiFlexGroup>
</>
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="xxs">
<h1>
<div
css={{
textAlign: 'right',
display: 'flex',
gap: euiTheme?.size.s,
alignItems: 'center',
justifyContent: 'flex-end',
marginBottom: euiTheme?.size.xs,
}}
>
<EuiIcon type="expand" color="primary" />
<EuiLink href={ruleFlyoutLink} target="_blank" external={false}>
{i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.showRuleDetails', {
defaultMessage: 'Show rule details',
})}
</EuiLink>
</div>
</h1>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
),
description: data.rule?.description ? (
<EuiText size="s">{data.rule?.description}</EuiText>
) : (
EMPTY_VALUE
),
description: data.rule?.description ? <EuiText>{data.rule?.description}</EuiText> : EMPTY_VALUE,
},
{
title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.alertsTitle', {
defaultMessage: 'Alerts',
}),
title: (
<EuiTitle size="xxs" css={{ marginBottom: euiTheme?.size.xs }}>
<h1>
{i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.alertsTitle', {
defaultMessage: 'Alerts',
})}
</h1>
</EuiTitle>
),
description: <FindingsDetectionRuleCounter finding={data} />,
},
{
title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.dataViewTitle', {
defaultMessage: 'Data View',
}),
title: (
<EuiTitle size="xxs" css={{ marginBottom: euiTheme?.size.xs }}>
<h1>
{i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.dataViewTitle', {
defaultMessage: 'Data View',
})}
</h1>
</EuiTitle>
),
description: discoverDataViewLink ? (
<EuiLink href={discoverDataViewLink}>{CDR_MISCONFIGURATIONS_INDEX_PATTERN}</EuiLink>
) : (
Expand Down Expand Up @@ -229,6 +282,7 @@ export const OverviewTab = ({
}) => {
const { discover } = useKibana<CoreStart & CspClientPluginStartDeps>().services;
const cdrMisconfigurationsDataView = useDataView(CDR_MISCONFIGURATIONS_DATA_VIEW_ID_PREFIX);
const { euiTheme } = useEuiTheme();

// link will navigate to our dataview in discover, filtered by the data source of the finding
const discoverDataViewLink = useMemo(
Expand Down Expand Up @@ -265,7 +319,7 @@ export const OverviewTab = ({
defaultMessage: 'About',
}),
id: 'detailsAccordion',
listItems: getDetailsList(data, ruleFlyoutLink, discoverDataViewLink),
listItems: getDetailsList(data, ruleFlyoutLink, discoverDataViewLink, euiTheme),
},
{
initialIsOpen: true,
Expand Down Expand Up @@ -294,7 +348,7 @@ export const OverviewTab = ({
listItems: getEvidenceList(data),
},
].filter(truthy),
[data, discoverDataViewLink, hasEvidence, ruleFlyoutLink]
[data, discoverDataViewLink, euiTheme, hasEvidence, ruleFlyoutLink]
);

return (
Expand Down
26 changes: 12 additions & 14 deletions ...ges/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_right/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,22 +93,20 @@ export const FindingsVulnerabilityFlyoutHeader = ({
href={referenceLink}
target="_blank"
color="primary"
css={{
fontWeight: euiTheme.font.weight.semiBold,
}}
css={css`
display: flex;
align-items: center;
svg {
width: ${euiTheme.base}px;
height: ${euiTheme.base}px;
}
`}
>
{id}
</EuiLink>
</EuiText>
) : (
<EuiText
css={css`
font-weight: ${euiTheme.font.weight.semiBold} !important;
`}
data-test-subj={VULNERABILITY_HEADER_ID}
>
{id}
</EuiText>
<EuiText data-test-subj={VULNERABILITY_HEADER_ID}>{id}</EuiText>
);
};

Expand All @@ -121,10 +119,10 @@ export const FindingsVulnerabilityFlyoutHeader = ({
>
<EuiFlexItem grow={false}>
<EuiTitle
size="m"
size="s"
css={css`
line-height: 32px;
font-weight: bold;
font-weight: ${euiTheme.font.weight.semiBold};
line-height: ${euiTheme.size.xl};
`}
>
{renderVulnerabilityId()}
Expand Down