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] Rule flyout updates #132327

Merged
merged 10 commits into from
May 18, 2022
Merged

[Cloud Posture] Rule flyout updates #132327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7be51af
init commit
JordanSh May 17, 2022
5d05c3e
lint
JordanSh May 17, 2022
fbc7905
clean
JordanSh May 17, 2022
887995d
fix test
JordanSh May 17, 2022
49df675
lint
JordanSh May 17, 2022
84dfed3
tsc fix
JordanSh May 17, 2022
0dc8fd5
fixed schema
JordanSh May 17, 2022
66568c9
removed unusued translation
JordanSh May 18, 2022
a10e7fd
ran node scripts/i18n_check.js --fix
JordanSh May 18, 2022
7a12846
Merge branch 'main' into rule-flyout-updates
JordanSh May 18, 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
4 changes: 4 additions & 0 deletions x-pack/plugins/cloud_security_posture/common/schemas/csp_rule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export const cspRuleSchema = rt.object({
muted: rt.boolean(),
package_policy_id: rt.string(),
policy_id: rt.string(),
section: rt.string(),
audit: rt.string(),
references: rt.string(),
profile_applicability: rt.string(),
});

export type CspRuleSchema = TypeOf<typeof cspRuleSchema>;
4 changes: 4 additions & 0 deletions x-pack/plugins/cloud_security_posture/common/schemas/csp_rule_template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ const cspRuleTemplateSchema = rt.object({
rego_rule_id: rt.string(),
enabled: rt.boolean(),
muted: rt.boolean(),
section: rt.string(),
audit: rt.string(),
references: rt.string(),
profile_applicability: rt.string(),
});
export const cloudSecurityPostureRuleTemplateSavedObjectType = 'csp-rule-template';
export type CloudSecurityPostureRuleTemplateSchema = TypeOf<typeof cspRuleTemplateSchema>;
30 changes: 22 additions & 8 deletions .../plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/
import React, { useState } from 'react';
import {
EuiCodeBlock,
EuiFlexItem,
EuiSpacer,
EuiTextColor,
Expand All @@ -17,17 +16,21 @@ import {
EuiTabs,
EuiTab,
EuiFlexGroup,
type PropsOf,
PropsOf,
EuiCodeBlock,
EuiMarkdownFormat,
EuiIcon,
} from '@elastic/eui';
import { assertNever } from '@kbn/std';
import cisLogoIcon from '../../../assets/icons/cis_logo.svg';
import type { CspFinding } from '../types';
import { CspEvaluationBadge } from '../../../components/csp_evaluation_badge';
import * as TEXT from '../translations';
import { ResourceTab } from './resource_tab';
import { JsonTab } from './json_tab';
import { OverviewTab } from './overview_tab';
import { RuleTab } from './rule_tab';
import k8sLogoIcon from '../../../assets/icons/k8s_logo.svg';

const tabs = [
{ title: TEXT.OVERVIEW, id: 'overview' },
Expand All @@ -36,6 +39,13 @@ const tabs = [
{ title: TEXT.JSON, id: 'json' },
] as const;

type FindingsTab = typeof tabs[number];

interface FindingFlyoutProps {
onClose(): void;
findings: CspFinding;
}

export const CodeBlock: React.FC<PropsOf<typeof EuiCodeBlock>> = (props) => (
<EuiCodeBlock isCopyable paddingSize="s" overflowHeight={300} {...props} />
);
Expand All @@ -44,12 +54,16 @@ export const Markdown: React.FC<PropsOf<typeof EuiMarkdownFormat>> = (props) =>
<EuiMarkdownFormat textSize="s" {...props} />
);

type FindingsTab = typeof tabs[number];

interface FindingFlyoutProps {
onClose(): void;
findings: CspFinding;
}
export const CisKubernetesIcons = () => (
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiIcon type={cisLogoIcon} size="xxl" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type={k8sLogoIcon} size="xxl" />
</EuiFlexItem>
</EuiFlexGroup>
);

const FindingsTab = ({ tab, findings }: { findings: CspFinding; tab: FindingsTab }) => {
switch (tab.id) {
Expand Down
30 changes: 5 additions & 25 deletions x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/overview_tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,13 @@
* 2.0.
*/

import {
EuiAccordion,
EuiDescriptionList,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiPanel,
EuiSpacer,
EuiText,
} from '@elastic/eui';
import { EuiAccordion, EuiDescriptionList, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
import React, { useMemo } from 'react';
import moment from 'moment';
import type { EuiDescriptionListProps, EuiAccordionProps } from '@elastic/eui';
import cisLogoIcon from '../../../assets/icons/cis_logo.svg';
import k8sLogoIcon from '../../../assets/icons/k8s_logo.svg';
import * as TEXT from '../translations';
import { CspFinding } from '../types';
import { CodeBlock, Markdown } from './findings_flyout';
import { CisKubernetesIcons, Markdown, CodeBlock } from './findings_flyout';

type Accordion = Pick<EuiAccordionProps, 'title' | 'id' | 'initialIsOpen'> &
Pick<EuiDescriptionListProps, 'listItems'>;
Expand All @@ -42,24 +31,15 @@ const getDetailsList = (data: CspFinding) => [
},
{
title: TEXT.FRAMEWORK_SOURCES,
description: (
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiIcon type={cisLogoIcon} size="xxl" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type={k8sLogoIcon} size="xxl" />
</EuiFlexItem>
</EuiFlexGroup>
),
description: <CisKubernetesIcons />,
},
{
title: TEXT.CIS_SECTION,
description: data.rule.section,
},
];

const getRemediationList = ({ rule }: CspFinding) => [
export const getRemediationList = (rule: CspFinding['rule']) => [
{
title: '',
description: <Markdown>{rule.remediation}</Markdown>,
Expand Down Expand Up @@ -103,7 +83,7 @@ export const OverviewTab = ({ data }: { data: CspFinding }) => {
initialIsOpen: true,
title: TEXT.REMEDIATION,
id: 'remediationAccordion',
listItems: getRemediationList(data),
listItems: getRemediationList(data.rule),
},
{
initialIsOpen: false,
Expand Down
21 changes: 5 additions & 16 deletions x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/rule_tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@
* 2.0.
*/

import { EuiDescriptionList, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
import { EuiDescriptionList } from '@elastic/eui';
import React from 'react';
import cisLogoIcon from '../../../assets/icons/cis_logo.svg';
import k8sLogoIcon from '../../../assets/icons/k8s_logo.svg';
import * as TEXT from '../translations';
import { CspFinding } from '../types';
import { Markdown } from './findings_flyout';
import { CisKubernetesIcons, Markdown } from './findings_flyout';

const getRuleList = ({ rule }: CspFinding) => [
export const getRuleList = (rule: CspFinding['rule']) => [
{
title: TEXT.NAME,
description: rule.name,
Expand All @@ -24,16 +22,7 @@ const getRuleList = ({ rule }: CspFinding) => [
},
{
title: TEXT.FRAMEWORK_SOURCES,
description: (
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiIcon type={cisLogoIcon} size="xxl" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type={k8sLogoIcon} size="xxl" />
</EuiFlexItem>
</EuiFlexGroup>
),
description: <CisKubernetesIcons />,
},
{
title: TEXT.CIS_SECTION,
Expand All @@ -59,5 +48,5 @@ const getRuleList = ({ rule }: CspFinding) => [
];

export const RuleTab = ({ data }: { data: CspFinding }) => (
<EuiDescriptionList listItems={getRuleList(data)} />
<EuiDescriptionList listItems={getRuleList(data.rule)} />
);
4 changes: 4 additions & 0 deletions x-pack/plugins/cloud_security_posture/public/pages/rules/rules_container.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ const getRuleMock = ({
package_policy_id: packagePolicyId,
policy_id: policyId,
enabled,
benchmark: {
name: chance.word(),
version: chance.sentence(),
},
},
} as RuleSavedObject);

Expand Down
69 changes: 4 additions & 65 deletions x-pack/plugins/cloud_security_posture/public/pages/rules/rules_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import React, { useState } from 'react';
import {
EuiSpacer,
EuiFlyout,
type EuiDescriptionListProps,
EuiToolTip,
EuiFlyoutHeader,
EuiFlyoutBody,
Expand All @@ -20,7 +19,8 @@ import {
EuiFlexGroup,
EuiSwitch,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { getRuleList } from '../findings/findings_flyout/rule_tab';
import { getRemediationList } from '../findings/findings_flyout/overview_tab';
import type { RuleSavedObject } from './use_csp_rules';
import * as TEXT from './translations';
import * as TEST_SUBJECTS from './test_subjects';
Expand All @@ -34,71 +34,10 @@ interface RuleFlyoutProps {
const tabs = [
{ label: TEXT.OVERVIEW, id: 'overview', disabled: false },
{ label: TEXT.REMEDIATION, id: 'remediation', disabled: false },
{ label: TEXT.REGO_CODE, id: 'rego', disabled: true },
] as const;

type RuleTab = typeof tabs[number]['id'];

const getOverviewCard = (rule: RuleSavedObject): EuiDescriptionListProps['listItems'] => [
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.frameworkSourcesLabel', {
defaultMessage: 'Framework Sources',
}),
description: '-', // TODO: add value
},
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.sectionsLabel', {
defaultMessage: 'Sections',
}),
description: '-', // TODO: add value
},
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.profileApplicabilityLabel', {
defaultMessage: 'Profile Applicability',
}),
description: rule.attributes.description || '',
},
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.auditLabel', {
defaultMessage: 'Audit',
}),
description: '-', // TODO: add value
},
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.referencesLabel', {
defaultMessage: 'References',
}),
description: '-', // TODO: add value
},
];

const getRemediationCard = (rule: RuleSavedObject): EuiDescriptionListProps['listItems'] => [
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.remediationLabel', {
defaultMessage: 'Remediation',
}),
description: rule.attributes.remediation,
},
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.impactLabel', {
defaultMessage: 'Impact',
}),
description: rule.attributes.impact,
},
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.defaultValueLabel', {
defaultMessage: 'Default Value',
}),
description: rule.attributes.default_value,
},
{
title: i18n.translate('xpack.csp.rules.ruleFlyout.rationaleLabel', {
defaultMessage: 'Rationale',
}),
description: rule.attributes.rationale,
},
];

export const RuleFlyout = ({ onClose, rule, toggleRule }: RuleFlyoutProps) => {
const [tab, setTab] = useState<RuleTab>('overview');

Expand Down Expand Up @@ -130,7 +69,7 @@ export const RuleFlyout = ({ onClose, rule, toggleRule }: RuleFlyoutProps) => {
<EuiFlyoutBody>
{tab === 'overview' && <RuleOverviewTab rule={rule} toggleRule={() => toggleRule(rule)} />}
{tab === 'remediation' && (
<EuiDescriptionList compressed={false} listItems={getRemediationCard(rule)} />
<EuiDescriptionList compressed={false} listItems={getRemediationList(rule.attributes)} />
)}
</EuiFlyoutBody>
</EuiFlyout>
Expand All @@ -152,7 +91,7 @@ const RuleOverviewTab = ({ rule, toggleRule }: { rule: RuleSavedObject; toggleRu
</span>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList compressed={false} listItems={getOverviewCard(rule)} />
<EuiDescriptionList listItems={getRuleList(rule.attributes)} />
Copy link
Contributor

Choose a reason for hiding this comment

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

is there a difference now that this one doesn't have compressed=false ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

no, false is the default

</EuiFlexItem>
</EuiFlexGroup>
);
4 changes: 2 additions & 2 deletions x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,8 @@ const getColumns = ({
),
},
{
field: 'section', // TODO: what field is this?
name: TEXT.SECTION,
field: 'attributes.section',
name: TEXT.CIS_SECTION,
width: '15%',
},
{
Expand Down
11 changes: 4 additions & 7 deletions x-pack/plugins/cloud_security_posture/public/pages/rules/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,10 @@ export const RULE_NAME = i18n.translate('xpack.csp.rules.rulesTable.rulesTableCo
defaultMessage: 'Rule Name',
});

export const SECTION = i18n.translate('xpack.csp.rules.rulesTable.rulesTableColumn.sectionLabel', {
defaultMessage: 'Section',
});
export const CIS_SECTION = i18n.translate(
'xpack.csp.rules.rulesTable.rulesTableColumn.cisSectionLabel',
{ defaultMessage: 'CIS Section' }
);

export const LAST_MODIFIED = i18n.translate(
'xpack.csp.rules.rulesTable.rulesTableColumn.lastModifiedLabel',
Expand Down Expand Up @@ -80,10 +81,6 @@ export const OVERVIEW = i18n.translate('xpack.csp.rules.ruleFlyout.tabs.overview
defaultMessage: 'Overview',
});

export const REGO_CODE = i18n.translate('xpack.csp.rules.ruleFlyout.tabs.regoCodeTabLabel', {
defaultMessage: 'Rego Code',
});

export const REMEDIATION = i18n.translate('xpack.csp.rules.ruleFlyout.tabs.remediationTabLabel', {
defaultMessage: 'Remediation',
});
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/fr-FR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10119,7 +10119,6 @@
"xpack.csp.rules.rulesTable.rulesTableColumn.enabledLabel": "Activé",
"xpack.csp.rules.rulesTable.rulesTableColumn.lastModifiedLabel": "Dernière modification",
"xpack.csp.rules.rulesTable.rulesTableColumn.nameLabel": "Nom de règle",
"xpack.csp.rules.rulesTable.rulesTableColumn.sectionLabel": "Section",
"xpack.csp.rules.saveButtonLabel": "Enregistrer",
"xpack.csp.rules.searchPlaceholder": "Recherche",
"xpack.csp.rules.selectAllButtonLabel": "Tout sélectionner",
Expand Down
11 changes: 0 additions & 11 deletions x-pack/plugins/translations/translations/ja-JP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10212,22 +10212,11 @@
"xpack.csp.rules.manageIntegrationButtonLabel": "統合を管理",
"xpack.csp.rules.missingRulesMessage": "ルールがありません",
"xpack.csp.rules.refreshButtonLabel": "更新",
"xpack.csp.rules.ruleFlyout.auditLabel": "監査",
"xpack.csp.rules.ruleFlyout.defaultValueLabel": "デフォルト値",
"xpack.csp.rules.ruleFlyout.frameworkSourcesLabel": "フレームワークソース",
"xpack.csp.rules.ruleFlyout.impactLabel": "インパクト",
"xpack.csp.rules.ruleFlyout.profileApplicabilityLabel": "プロファイル適用性",
"xpack.csp.rules.ruleFlyout.rationaleLabel": "根拠",
"xpack.csp.rules.ruleFlyout.referencesLabel": "基準",
"xpack.csp.rules.ruleFlyout.remediationLabel": "修正",
"xpack.csp.rules.ruleFlyout.sectionsLabel": "セクション",
"xpack.csp.rules.ruleFlyout.tabs.overviewTabLabel": "概要",
"xpack.csp.rules.ruleFlyout.tabs.regoCodeTabLabel": "Regoコード",
"xpack.csp.rules.ruleFlyout.tabs.remediationTabLabel": "修正",
"xpack.csp.rules.rulesTable.rulesTableColumn.enabledLabel": "有効",
"xpack.csp.rules.rulesTable.rulesTableColumn.lastModifiedLabel": "最終更新：",
"xpack.csp.rules.rulesTable.rulesTableColumn.nameLabel": "ルール名",
"xpack.csp.rules.rulesTable.rulesTableColumn.sectionLabel": "セクション",
"xpack.csp.rules.saveButtonLabel": "保存",
"xpack.csp.rules.searchPlaceholder": "検索",
"xpack.csp.rules.selectAllButtonLabel": "すべて選択",
Expand Down
Loading