Skip to content
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

[Cloud Posture] Dashboard Redesign - data counter cards #144565

Merged
merged 17 commits into from
Nov 9, 2022
Merged

[Cloud Posture] Dashboard Redesign - data counter cards #144565

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4892f6f
init
JordanSh Oct 30, 2022
17aafaf
layout done
JordanSh Oct 30, 2022
cd404f4
layout fine tuning
JordanSh Oct 30, 2022
2ea6c1a
Merge branch 'main' of https://github.com/elastic/kibana into new-csp…
JordanSh Oct 31, 2022
1be7828
base component created
JordanSh Oct 31, 2022
ed8605f
working on number abbv
JordanSh Nov 2, 2022
322a336
ui progress
JordanSh Nov 2, 2022
cbe7151
ui progress
JordanSh Nov 3, 2022
80787e7
added query
JordanSh Nov 3, 2022
8f05630
added tests
JordanSh Nov 7, 2022
e23bca1
merge
JordanSh Nov 7, 2022
99177fa
minor changes
JordanSh Nov 7, 2022
602cf74
added empty state test
JordanSh Nov 7, 2022
8737c28
review fixes
JordanSh Nov 8, 2022
8649448
flag
JordanSh Nov 8, 2022
5d86a1f
prop names
JordanSh Nov 8, 2022
b277484
minor change
JordanSh Nov 8, 2022
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
6 changes: 3 additions & 3 deletions x-pack/plugins/cloud_security_posture/public/components/compact_formatted_number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ export const CompactFormattedNumber = ({
abbreviateAbove?: number;
}) => {
if (number <= abbreviateAbove) {
return <span>{number.toLocaleString('en-US')}</span>;
return <span>{number.toLocaleString()}</span>;
}

return (
<EuiToolTip content={number.toLocaleString('en-US')}>
<EuiToolTip content={number.toLocaleString()}>
<span>
{number.toLocaleString('en-US', {
{number.toLocaleString(undefined, {
notation: 'compact',
maximumFractionDigits: 1,
})}
Expand Down
41 changes: 18 additions & 23 deletions x-pack/plugins/cloud_security_posture/public/components/csp_counter_card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,43 @@

import React from 'react';
import { css } from '@emotion/react';
import { EuiCard, EuiIcon, EuiStat, useEuiTheme } from '@elastic/eui';
import type { EuiStatProps, EuiCardProps } from '@elastic/eui';
import { EuiCard, EuiIcon, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';
import type { EuiTextProps, EuiCardProps } from '@elastic/eui';

export type CspCounterCardProps = Pick<EuiCardProps, 'onClick' | 'id'> &
Pick<EuiStatProps, 'title' | 'description' | 'titleColor' | 'isLoading'>;
export type CspCounterCardProps = Pick<EuiCardProps, 'onClick' | 'id' | 'title' | 'description'> & {
descriptionColor?: EuiTextProps['color'];
};

export const CspCounterCard = ({ counter }: { counter: CspCounterCardProps }) => {
export const CspCounterCard = (counter: CspCounterCardProps) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider de-structuring props in the arguments: ({ title, onClick, id, description, descriptionColor })

const { euiTheme } = useEuiTheme();

return (
<EuiCard
title=""
title={
<EuiTitle size="xxxs">
<h6>{counter.title}</h6>
</EuiTitle>
}
hasBorder
onClick={counter.onClick}
paddingSize="m"
textAlign="left"
layout="vertical"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the default and can be omitted as we don't really care about the layout since we don't use an icon, we only care about the text alignment

css={css`
position: relative;

.euiCard__title {
display: none;
}

:hover .euiIcon {
color: ${euiTheme.colors.primary};
transition: ${euiTheme.animation.normal};
}
`}
data-test-subj={counter.id}
>
<EuiStat
descriptionElement="h5"
titleSize="s"
isLoading={counter.isLoading}
description={counter.description}
title={counter.title || 0}
titleColor={counter.titleColor}
css={css`
display: flex;
flex-direction: column;
gap: ${euiTheme.size.m};
`}
/>
<EuiText color={counter.descriptionColor}>
<EuiTitle size="xs">
<h3>{counter.description}</h3>
</EuiTitle>
</EuiText>
{counter.onClick && (
<EuiIcon
type="link"
Expand Down
22 changes: 1 addition & 21 deletions ...sture/public/pages/compliance_dashboard/dashboard_sections/cloud_summary_section.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

import React from 'react';
import { coreMock } from '@kbn/core/public/mocks';
import { render } from '@testing-library/react';
import { expectIdsInDoc } from '../../../test/utils';
import { DASHBOARD_COUNTER_CARDS } from '../test_subjects';
Expand All @@ -16,28 +15,9 @@ import { TestProvider } from '../../../test/test_provider';
import { screen } from '@testing-library/react';

describe('<CloudSummarySection />', () => {
Copy link
Contributor

@ari-aviran ari-aviran Nov 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd expect tests here to verify the rest of the functionality of the section (risks table, score chart, etc.) If you consider this out of scope please open a task

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah i'll add those tests here on every new component task, its already listed in the tasks

beforeEach(() => {
jest.resetAllMocks();
});

const renderCloudSummarySection = (alterMockData = {}) => {
const mockCore = coreMock.createStart();

render(
<TestProvider
core={{
...mockCore,
application: {
...mockCore.application,
capabilities: {
...mockCore.application.capabilities,
// This is required so that the `noDataConfig` view will show the action button
navLinks: { integrations: true },
},
},
}}
>
{/* <ComplianceDashboard />*/}
<TestProvider>
<CloudSummarySection complianceData={{ ...mockDashboardData, ...alterMockData }} />
</TestProvider>
);
Expand Down
18 changes: 10 additions & 8 deletions ...ty_posture/public/pages/compliance_dashboard/dashboard_sections/cloud_summary_section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,31 +67,33 @@ export const CloudSummarySection = ({
() => [
{
id: DASHBOARD_COUNTER_CARDS.CLUSTERS_EVALUATED,
title: <CompactFormattedNumber number={complianceData.clusters.length} />,
description: i18n.translate(
title: i18n.translate(
'xpack.csp.dashboard.summarySection.counterCard.clustersEvaluatedDescription',
{ defaultMessage: 'Clusters Evaluated' }
),
description: <CompactFormattedNumber number={complianceData.clusters.length} />,
},
{
id: DASHBOARD_COUNTER_CARDS.RESOURCES_EVALUATED,
title: <CompactFormattedNumber number={complianceData.stats.resourcesEvaluated || 0} />,
description: i18n.translate(
title: i18n.translate(
'xpack.csp.dashboard.summarySection.counterCard.resourcesEvaluatedDescription',
{ defaultMessage: 'Resources Evaluated' }
),
description: (
<CompactFormattedNumber number={complianceData.stats.resourcesEvaluated || 0} />
),
onClick: () => {
navToFindingsByResource();
},
},
{
id: DASHBOARD_COUNTER_CARDS.FAILING_FINDINGS,
title: <CompactFormattedNumber number={complianceData.stats.totalFailed} />,
description: i18n.translate(
title: i18n.translate(
'xpack.csp.dashboard.summarySection.counterCard.failingFindingsDescription',
{ defaultMessage: 'Failing Findings' }
),
titleColor: complianceData.stats.totalFailed > 0 ? 'danger' : 'text',
description: <CompactFormattedNumber number={complianceData.stats.totalFailed} />,
descriptionColor: complianceData.stats.totalFailed > 0 ? 'danger' : 'text',
onClick: () => {
navToFindings({ 'result.evaluation': RULE_FAILED });
},
Expand All @@ -112,7 +114,7 @@ export const CloudSummarySection = ({
<EuiFlexGroup direction="column">
{counters.map((counter) => (
<EuiFlexItem key={counter.id}>
<CspCounterCard counter={counter} />
<CspCounterCard {...counter} />
</EuiFlexItem>
))}
</EuiFlexGroup>
Expand Down