Skip to content

Commit 3cb813a

Browse files
jbudzjbudz
authored
Merge branch 'main' into renovate/main-babel
2 parents 7589ab7 + bebcd35 commit 3cb813a

File tree

28 files changed

+296
-515
lines changed

28 files changed

+296
-515
lines changed

‎x-pack/plugins/cloud_security_posture/common/constants.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export const INTERNAL_FEATURE_FLAGS = {
4040
showManageRulesMock: false,
4141
showFindingFlyoutEvidence: false,
4242
showFindingsGroupBy: true,
43-
showNewDashboard: false,
4443
} as const;
4544

4645
export const CSP_RULE_SAVED_OBJECT_TYPE = 'csp_rule';

‎x-pack/plugins/cloud_security_posture/public/common/api/use_cis_kubernetes_integration.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ export const useCisKubernetesIntegration = () => {
2121
const { http } = useKibana().services;
2222

2323
return useQuery<GetInfoResponse, DefaultPackagesInstallationError>(['integrations'], () =>
24-
http.get<GetInfoResponse>(epmRouteService.getInfoPath(CLOUD_SECURITY_POSTURE_PACKAGE_NAME), {
25-
query: { experimental: true },
26-
})
24+
http.get<GetInfoResponse>(epmRouteService.getInfoPath(CLOUD_SECURITY_POSTURE_PACKAGE_NAME))
2725
);
2826
};

‎x-pack/plugins/cloud_security_posture/public/components/chart_panel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
6060

6161
return (
6262
<EuiPanel hasBorder={hasBorder} hasShadow={false} data-test-subj="chart-panel">
63-
<EuiFlexGroup direction="column" gutterSize="none" style={{ height: '100%' }}>
63+
<EuiFlexGroup direction="column" gutterSize="m" style={{ height: '100%' }}>
6464
<EuiFlexItem grow={false}>
6565
{title && (
6666
<EuiTitle size="xs">

‎x-pack/plugins/cloud_security_posture/public/components/cis_benchmark_icon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,6 @@ const getBenchmarkIdIconType = (props: Props): string => {
3030

3131
export const CISBenchmarkIcon = (props: Props) => (
3232
<EuiToolTip content={props.name}>
33-
<EuiIcon type={getBenchmarkIdIconType(props)} size="xxl" css={props.style} />
33+
<EuiIcon type={getBenchmarkIdIconType(props)} size="xl" css={props.style} />
3434
</EuiToolTip>
3535
);

‎x-pack/plugins/cloud_security_posture/public/components/csp_counter_card.tsx

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,31 @@
55
* 2.0.
66
*/
77

8-
import React from 'react';
8+
import React, { MouseEventHandler } from 'react';
99
import { css } from '@emotion/react';
10-
import { EuiCard, EuiIcon, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';
11-
import type { EuiTextProps, EuiCardProps } from '@elastic/eui';
10+
import { EuiIcon, EuiPanel, EuiStat, useEuiTheme } from '@elastic/eui';
11+
import type { EuiStatProps } from '@elastic/eui';
1212

13-
export type CspCounterCardProps = Pick<EuiCardProps, 'onClick' | 'id' | 'title' | 'description'> & {
14-
descriptionColor?: EuiTextProps['color'];
15-
};
13+
export interface CspCounterCardProps {
14+
id: string;
15+
onClick?: MouseEventHandler<HTMLButtonElement>;
16+
title: EuiStatProps['title'];
17+
titleColor?: EuiStatProps['titleColor'];
18+
description: EuiStatProps['description'];
19+
}
1620

1721
export const CspCounterCard = (counter: CspCounterCardProps) => {
1822
const { euiTheme } = useEuiTheme();
1923

2024
return (
21-
<EuiCard
22-
title={
23-
<EuiTitle size="xxxs">
24-
<h6>{counter.title}</h6>
25-
</EuiTitle>
26-
}
25+
<EuiPanel
2726
hasBorder
2827
onClick={counter.onClick}
2928
paddingSize="m"
30-
textAlign="left"
31-
layout="vertical"
3229
css={css`
3330
position: relative;
31+
display: flex;
32+
align-items: center;
3433
3534
:hover .euiIcon {
3635
color: ${euiTheme.colors.primary};
@@ -39,21 +38,29 @@ export const CspCounterCard = (counter: CspCounterCardProps) => {
3938
`}
4039
data-test-subj={counter.id}
4140
>
42-
<EuiText color={counter.descriptionColor}>
43-
<EuiTitle size="xs">
44-
<h3>{counter.description}</h3>
45-
</EuiTitle>
46-
</EuiText>
41+
<EuiStat
42+
css={{
43+
height: '100%',
44+
display: 'flex',
45+
flexDirection: 'column',
46+
justifyContent: 'space-around',
47+
}}
48+
titleSize="s"
49+
title={counter.title}
50+
titleColor={counter.titleColor}
51+
descriptionElement="h6"
52+
description={counter.description}
53+
/>
4754
{counter.onClick && (
4855
<EuiIcon
4956
type="link"
5057
css={css`
5158
position: absolute;
52-
top: ${euiTheme.size.m};
53-
right: ${euiTheme.size.m};
59+
top: ${euiTheme.size.s};
60+
right: ${euiTheme.size.s};
5461
`}
5562
/>
5663
)}
57-
</EuiCard>
64+
</EuiPanel>
5865
);
5966
};

‎x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/cases_table.tsx

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/cloud_posture_score_chart.tsx

Lines changed: 107 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -10,100 +10,51 @@ import {
1010
AreaSeries,
1111
Axis,
1212
Chart,
13-
ElementClickListener,
1413
niceTimeFormatByDay,
15-
Partition,
16-
PartitionElementEvent,
17-
PartitionLayout,
1814
Settings,
1915
timeFormatter,
2016
} from '@elastic/charts';
21-
import { EuiFlexGroup, EuiText, EuiHorizontalRule, EuiFlexItem } from '@elastic/eui';
17+
import {
18+
useEuiTheme,
19+
EuiFlexGroup,
20+
EuiFlexItem,
21+
EuiLink,
22+
EuiText,
23+
EuiTitle,
24+
type EuiLinkButtonProps,
25+
type EuiTextProps,
26+
EuiToolTip,
27+
EuiToolTipProps,
28+
} from '@elastic/eui';
2229
import { FormattedDate, FormattedTime } from '@kbn/i18n-react';
2330
import moment from 'moment';
24-
import { statusColors } from '../../../common/constants';
25-
import type { PostureTrend, Stats } from '../../../../common/types';
26-
import { CompactFormattedNumber } from '../../../components/compact_formatted_number';
31+
import { i18n } from '@kbn/i18n';
2732
import { RULE_FAILED, RULE_PASSED } from '../../../../common/constants';
33+
import { CompactFormattedNumber } from '../../../components/compact_formatted_number';
34+
import type { Evaluation, PostureTrend, Stats } from '../../../../common/types';
2835
import { useKibana } from '../../../common/hooks/use_kibana';
2936

3037
interface CloudPostureScoreChartProps {
38+
compact?: boolean;
3139
trend: PostureTrend[];
3240
data: Stats;
3341
id: string;
34-
partitionOnElementClick: (elements: PartitionElementEvent[]) => void;
42+
onEvalCounterClick: (evaluation: Evaluation) => void;
3543
}
3644

3745
const getPostureScorePercentage = (postureScore: number): string => `${Math.round(postureScore)}%`;
3846

39-
const ScoreChart = ({
40-
data: { totalPassed, totalFailed },
41-
id,
42-
partitionOnElementClick,
43-
}: Omit<CloudPostureScoreChartProps, 'trend'>) => {
44-
const data = [
45-
{ label: RULE_PASSED, value: totalPassed },
46-
{ label: RULE_FAILED, value: totalFailed },
47-
];
48-
const {
49-
services: { charts },
50-
} = useKibana();
51-
52-
return (
53-
<Chart size={{ height: 90, width: 90 }}>
54-
<Settings
55-
theme={[
56-
// theme overrides
57-
{
58-
partition: {
59-
linkLabel: { maximumSection: Infinity, maxCount: 0 },
60-
outerSizeRatio: 0.75,
61-
emptySizeRatio: 0.7,
62-
},
63-
},
64-
// theme
65-
charts.theme.useChartsTheme(),
66-
]}
67-
baseTheme={charts.theme.useChartsBaseTheme()}
68-
onElementClick={partitionOnElementClick as ElementClickListener}
69-
/>
70-
<Partition
71-
id={id}
72-
data={data}
73-
valueGetter="percent"
74-
valueAccessor={(d) => d.value}
75-
layout={PartitionLayout.sunburst}
76-
layers={[
77-
{
78-
groupByRollup: (d: { label: string }) => d.label,
79-
shape: {
80-
fillColor: (d, index) =>
81-
d.dataName === RULE_PASSED ? statusColors.success : statusColors.danger,
82-
},
83-
},
84-
]}
85-
/>
86-
</Chart>
87-
);
88-
};
89-
9047
const PercentageInfo = ({
48+
compact,
9149
postureScore,
92-
totalPassed,
93-
totalFindings,
94-
}: CloudPostureScoreChartProps['data']) => {
50+
}: CloudPostureScoreChartProps['data'] & { compact?: CloudPostureScoreChartProps['compact'] }) => {
51+
const { euiTheme } = useEuiTheme();
9552
const percentage = getPostureScorePercentage(postureScore);
9653

9754
return (
98-
<EuiFlexGroup direction="column" justifyContent="center">
99-
<EuiText style={{ fontSize: 40, fontWeight: 'bold', lineHeight: 1 }}>{percentage}</EuiText>
100-
<EuiText size="xs">
101-
<CompactFormattedNumber number={totalPassed} />
102-
{'/'}
103-
<CompactFormattedNumber number={totalFindings} />
104-
{' Findings passed'}
105-
</EuiText>
106-
</EuiFlexGroup>
55+
<EuiTitle css={{ fontSize: compact ? euiTheme.size.l : euiTheme.size.xxl }}>
56+
<h3>{percentage}</h3>
57+
</EuiTitle>
10758
);
10859
};
10960

@@ -149,38 +100,94 @@ const ComplianceTrendChart = ({ trend }: { trend: PostureTrend[] }) => {
149100
tickFormat={timeFormatter(niceTimeFormatByDay(2))}
150101
ticks={4}
151102
/>
152-
<Axis
153-
ticks={3}
154-
id="left-axis"
155-
position="left"
156-
showGridLines
157-
domain={{ min: 0, max: 100 }}
158-
tickFormat={(rawScore) => getPostureScorePercentage(rawScore)}
159-
/>
103+
<Axis ticks={3} id="left-axis" position="left" showGridLines domain={{ min: 0, max: 100 }} />
160104
</Chart>
161105
);
162106
};
163107

108+
const CounterLink = ({
109+
text,
110+
count,
111+
color,
112+
onClick,
113+
tooltipContent,
114+
}: {
115+
count: number;
116+
text: string;
117+
color: EuiTextProps['color'];
118+
onClick: EuiLinkButtonProps['onClick'];
119+
tooltipContent: EuiToolTipProps['content'];
120+
}) => {
121+
const { euiTheme } = useEuiTheme();
122+
123+
return (
124+
<EuiToolTip content={tooltipContent}>
125+
<EuiLink color="text" onClick={onClick} css={{ display: 'flex' }}>
126+
<EuiText color={color} style={{ fontWeight: euiTheme.font.weight.medium }} size="s">
127+
<CompactFormattedNumber number={count} abbreviateAbove={999} />
128+
&nbsp;
129+
</EuiText>
130+
<EuiText size="s">{text}</EuiText>
131+
</EuiLink>
132+
</EuiToolTip>
133+
);
134+
};
135+
164136
export const CloudPostureScoreChart = ({
165137
data,
166138
trend,
167-
id,
168-
partitionOnElementClick,
169-
}: CloudPostureScoreChartProps) => (
170-
<EuiFlexGroup direction="column" gutterSize="none">
171-
<EuiFlexItem grow={4}>
172-
<EuiFlexGroup direction="row">
173-
<EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
174-
<ScoreChart {...{ id, data, partitionOnElementClick }} />
175-
</EuiFlexItem>
176-
<EuiFlexItem>
177-
<PercentageInfo {...data} />
178-
</EuiFlexItem>
179-
</EuiFlexGroup>
180-
</EuiFlexItem>
181-
<EuiHorizontalRule margin="xs" />
182-
<EuiFlexItem grow={6}>
183-
<ComplianceTrendChart trend={trend} />
184-
</EuiFlexItem>
185-
</EuiFlexGroup>
186-
);
139+
onEvalCounterClick,
140+
compact,
141+
}: CloudPostureScoreChartProps) => {
142+
const { euiTheme } = useEuiTheme();
143+
144+
return (
145+
<EuiFlexGroup
146+
direction="column"
147+
justifyContent="spaceBetween"
148+
style={{ height: '100%' }}
149+
gutterSize="none"
150+
>
151+
<EuiFlexItem grow={2}>
152+
<EuiFlexGroup direction="row" justifyContent="spaceBetween" gutterSize="none">
153+
<EuiFlexItem grow={false}>
154+
<PercentageInfo {...data} compact={compact} />
155+
</EuiFlexItem>
156+
<EuiFlexItem grow={false}>
157+
<EuiFlexGroup
158+
justifyContent="flexEnd"
159+
gutterSize="none"
160+
alignItems={compact ? 'center' : 'flexStart'}
161+
style={{ paddingRight: euiTheme.size.xl }}
162+
>
163+
<CounterLink
164+
text="passed"
165+
count={data.totalPassed}
166+
color="success"
167+
onClick={() => onEvalCounterClick(RULE_PASSED)}
168+
tooltipContent={i18n.translate(
169+
'xpack.csp.cloudPostureScoreChart.counterLink.passedFindingsTooltip',
170+
{ defaultMessage: 'Passed findings' }
171+
)}
172+
/>
173+
&nbsp;{`-`}&nbsp;
174+
<CounterLink
175+
text="failed"
176+
count={data.totalFailed}
177+
color="danger"
178+
onClick={() => onEvalCounterClick(RULE_FAILED)}
179+
tooltipContent={i18n.translate(
180+
'xpack.csp.cloudPostureScoreChart.counterLink.failedFindingsTooltip',
181+
{ defaultMessage: 'Failed findings' }
182+
)}
183+
/>
184+
</EuiFlexGroup>
185+
</EuiFlexItem>
186+
</EuiFlexGroup>
187+
</EuiFlexItem>
188+
<EuiFlexItem grow={compact ? 8 : 6}>
189+
<ComplianceTrendChart trend={trend} />
190+
</EuiFlexItem>
191+
</EuiFlexGroup>
192+
);
193+
};

0 commit comments

Comments
 (0)