From a6282e2498beab0b58bf644fc5d2764304194d42 Mon Sep 17 00:00:00 2001 From: Jordan Date: Wed, 22 May 2024 21:12:51 +0300 Subject: [PATCH 1/4] adde desc list --- .../csp_inline_description_list.tsx | 35 +++++++++++++++++-- .../findings_flyout/findings_flyout.tsx | 35 +++++++++++++++++++ .../findings_flyout/overview_tab.tsx | 12 ------- 3 files changed, 67 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/cloud_security_posture/public/components/csp_inline_description_list.tsx b/x-pack/plugins/cloud_security_posture/public/components/csp_inline_description_list.tsx index e573ff02252748..6992b205b79c62 100644 --- a/x-pack/plugins/cloud_security_posture/public/components/csp_inline_description_list.tsx +++ b/x-pack/plugins/cloud_security_posture/public/components/csp_inline_description_list.tsx @@ -6,12 +6,41 @@ */ import React from 'react'; -import { EuiDescriptionList, useEuiTheme, type EuiDescriptionListProps } from '@elastic/eui'; +import { EuiDescriptionList, useEuiTheme, EuiIcon, EuiCopy } from '@elastic/eui'; +import type { EuiDescriptionListProps } from '@elastic/eui'; +import { css } from '@emotion/react'; -const getModifiedTitlesListItems = (listItems: EuiDescriptionListProps['listItems']) => +const CopyButton = ({ copyText }: { copyText: string }) => ( + + {(copy) => ( + + )} + +); + +const getModifiedTitlesListItems = (listItems?: EuiDescriptionListProps['listItems']) => listItems ?.filter((item) => !!item?.title && !!item?.description) - .map((item) => ({ ...item, title: `${item.title}:` })); + .map((item) => ({ + ...item, + title: `${item.title}:`, + description: + typeof item.description === 'string' ? ( + + {item.description} + + ) : ( + item.description + ), + })); // eui size m is 12px which is too small, and next after it is base which is 16px which is too big const fontSize = '1rem'; diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx index 160b9c463c907a..f65a4ae7a30768 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx @@ -23,11 +23,15 @@ import { EuiPagination, EuiFlyoutFooter, EuiToolTip, + EuiDescriptionListProps, } from '@elastic/eui'; import { assertNever } from '@kbn/std'; import { i18n } from '@kbn/i18n'; import type { HttpSetup } from '@kbn/core/public'; import { generatePath } from 'react-router-dom'; +import { css } from '@emotion/react/dist/emotion-react.cjs'; +import { euiThemeVars } from '@kbn/ui-theme'; +import { truthy } from '../../../../common/utils/helpers'; import { benchmarksNavigation } from '../../../common/navigation/constants'; import cisLogoIcon from '../../../assets/icons/cis_logo.svg'; import { CspFinding } from '../../../../common/schemas/csp_finding'; @@ -43,6 +47,8 @@ import { BenchmarkName } from '../../../../common/types_old'; import { FINDINGS_FLYOUT } from '../test_subjects'; import { useKibana } from '../../../common/hooks/use_kibana'; import { createDetectionRuleFromBenchmarkRule } from '../utils/create_detection_rule_from_benchmark'; +import { CspInlineDescriptionList } from '../../../components/csp_inline_description_list'; +import { FINDINGS_VULNERABILITY_FLYOUT_DESCRIPTION_LIST } from '../../vulnerabilities/test_subjects'; const tabs = [ { @@ -112,6 +118,24 @@ export const CisKubernetesIcons = ({ ); +const getFlyoutDescriptionList = (finding: CspFinding): EuiDescriptionListProps['listItems'] => + [ + finding.resource?.id && { + title: i18n.translate( + 'xpack.csp.vulnerabilities.vulnerabilitiesFindingFlyout.flyoutDescriptionList.resourceId', + { defaultMessage: 'Resource ID' } + ), + description: finding.resource.id, + }, + finding.resource?.name && { + title: i18n.translate( + 'xpack.csp.vulnerabilities.vulnerabilitiesFindingFlyout.flyoutDescriptionList.resourceName', + { defaultMessage: 'Resource Name' } + ), + description: finding.resource.name, + }, + ].filter(truthy); + const FindingsTab = ({ tab, findings }: { findings: CspFinding; tab: FindingsTab }) => { const { application } = useKibana().services; @@ -164,6 +188,17 @@ export const FindingsRuleFlyout = ({ +
+ +
{tabs.map((v) => ( diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/overview_tab.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/overview_tab.tsx index 42808c02f50508..c3c58c420956cb 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/overview_tab.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/overview_tab.tsx @@ -77,18 +77,6 @@ const getDetailsList = (data: CspFinding, ruleFlyoutLink: string, discoverIndexL }), description: moment(data['@timestamp']).format(CSP_MOMENT_FORMAT), }, - { - title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.resourceIdTitle', { - defaultMessage: 'Resource ID', - }), - description: data.resource.id, - }, - { - title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.resourceNameTitle', { - defaultMessage: 'Resource Name', - }), - description: data.resource.name, - }, { title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.frameworkSourcesTitle', { defaultMessage: 'Framework Sources', From 92ff75ebf38361822b9a95d3c66b9ee6f6ab2cc9 Mon Sep 17 00:00:00 2001 From: Jordan Date: Wed, 5 Jun 2024 15:10:57 +0300 Subject: [PATCH 2/4] review comments --- .../findings_flyout/findings_flyout.tsx | 16 +++++++--------- .../public/pages/configurations/test_subjects.ts | 3 +++ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx index f65a4ae7a30768..1e576fef9f3686 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx @@ -29,7 +29,7 @@ import { assertNever } from '@kbn/std'; import { i18n } from '@kbn/i18n'; import type { HttpSetup } from '@kbn/core/public'; import { generatePath } from 'react-router-dom'; -import { css } from '@emotion/react/dist/emotion-react.cjs'; +import { css } from '@emotion/react'; import { euiThemeVars } from '@kbn/ui-theme'; import { truthy } from '../../../../common/utils/helpers'; import { benchmarksNavigation } from '../../../common/navigation/constants'; @@ -44,11 +44,10 @@ import { RuleTab } from './rule_tab'; import type { BenchmarkId } from '../../../../common/types_old'; import { CISBenchmarkIcon } from '../../../components/cis_benchmark_icon'; import { BenchmarkName } from '../../../../common/types_old'; -import { FINDINGS_FLYOUT } from '../test_subjects'; +import { FINDINGS_FLYOUT, FINDINGS_MISCONFIGS_FLYOUT_DESCRIPTION_LIST } from '../test_subjects'; import { useKibana } from '../../../common/hooks/use_kibana'; import { createDetectionRuleFromBenchmarkRule } from '../utils/create_detection_rule_from_benchmark'; import { CspInlineDescriptionList } from '../../../components/csp_inline_description_list'; -import { FINDINGS_VULNERABILITY_FLYOUT_DESCRIPTION_LIST } from '../../vulnerabilities/test_subjects'; const tabs = [ { @@ -121,15 +120,14 @@ export const CisKubernetesIcons = ({ const getFlyoutDescriptionList = (finding: CspFinding): EuiDescriptionListProps['listItems'] => [ finding.resource?.id && { - title: i18n.translate( - 'xpack.csp.vulnerabilities.vulnerabilitiesFindingFlyout.flyoutDescriptionList.resourceId', - { defaultMessage: 'Resource ID' } - ), + title: i18n.translate('xpack.csp.findings.findingsFlyout.flyoutDescriptionList.resourceId', { + defaultMessage: 'Resource ID', + }), description: finding.resource.id, }, finding.resource?.name && { title: i18n.translate( - 'xpack.csp.vulnerabilities.vulnerabilitiesFindingFlyout.flyoutDescriptionList.resourceName', + 'xpack.csp.findings.findingsFlyout.flyoutDescriptionList.resourceName', { defaultMessage: 'Resource Name' } ), description: finding.resource.name, @@ -195,7 +193,7 @@ export const FindingsRuleFlyout = ({ `} > diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/test_subjects.ts b/x-pack/plugins/cloud_security_posture/public/pages/configurations/test_subjects.ts index b465b58f458879..b8a670e8ba58be 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/test_subjects.ts +++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/test_subjects.ts @@ -33,3 +33,6 @@ export const RESOURCES_FINDINGS_CONTAINER = 'resources_findings_container'; export const RESOURCES_FINDINGS_TABLE = 'resource_findings_table'; export const getResourceFindingsTableRowTestId = (id: string) => `resource_findings_table_row_${id}`; + +export const FINDINGS_MISCONFIGS_FLYOUT_DESCRIPTION_LIST = + 'misconfigs-findings-flyout-description-list'; From 0068556104207bd93f37009d68b17089276644d4 Mon Sep 17 00:00:00 2001 From: Jordan Date: Wed, 5 Jun 2024 16:21:17 +0300 Subject: [PATCH 3/4] i18 --- x-pack/plugins/translations/translations/fr-FR.json | 2 -- x-pack/plugins/translations/translations/ja-JP.json | 2 -- x-pack/plugins/translations/translations/zh-CN.json | 2 -- 3 files changed, 6 deletions(-) diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 11ed11bd9a7635..5bd2c669c58640 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -12811,8 +12811,6 @@ "xpack.csp.findings.findingsFlyout.overviewTab.indexTitle": "Index", "xpack.csp.findings.findingsFlyout.overviewTab.rationaleTitle": "Environnement", "xpack.csp.findings.findingsFlyout.overviewTab.remediationTitle": "Résolution", - "xpack.csp.findings.findingsFlyout.overviewTab.resourceIdTitle": "ID ressource", - "xpack.csp.findings.findingsFlyout.overviewTab.resourceNameTitle": "Nom de ressource", "xpack.csp.findings.findingsFlyout.overviewTab.ruleNameTitle": "Nom de règle", "xpack.csp.findings.findingsFlyout.overviewTab.ruleNameTooltip": "Gérer la règle", "xpack.csp.findings.findingsFlyout.overviewTab.ruleTagsTitle": "Balises de règle", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 1875ea6d86efc2..e052eb6a0aba67 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -12792,8 +12792,6 @@ "xpack.csp.findings.findingsFlyout.overviewTab.indexTitle": "インデックス", "xpack.csp.findings.findingsFlyout.overviewTab.rationaleTitle": "根拠", "xpack.csp.findings.findingsFlyout.overviewTab.remediationTitle": "修正", - "xpack.csp.findings.findingsFlyout.overviewTab.resourceIdTitle": "リソースID", - "xpack.csp.findings.findingsFlyout.overviewTab.resourceNameTitle": "リソース名", "xpack.csp.findings.findingsFlyout.overviewTab.ruleNameTitle": "ルール名", "xpack.csp.findings.findingsFlyout.overviewTab.ruleNameTooltip": "ルールの管理", "xpack.csp.findings.findingsFlyout.overviewTab.ruleTagsTitle": "ルールタグ", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 95b7203e9d1dcf..b4277a501aecc7 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -12817,8 +12817,6 @@ "xpack.csp.findings.findingsFlyout.overviewTab.indexTitle": "索引", "xpack.csp.findings.findingsFlyout.overviewTab.rationaleTitle": "理由", "xpack.csp.findings.findingsFlyout.overviewTab.remediationTitle": "补救", - "xpack.csp.findings.findingsFlyout.overviewTab.resourceIdTitle": "资源 ID", - "xpack.csp.findings.findingsFlyout.overviewTab.resourceNameTitle": "资源名称", "xpack.csp.findings.findingsFlyout.overviewTab.ruleNameTitle": "规则名称", "xpack.csp.findings.findingsFlyout.overviewTab.ruleNameTooltip": "管理规则", "xpack.csp.findings.findingsFlyout.overviewTab.ruleTagsTitle": "规则标签", From 31bdc0330d2ed16678ff4bde956cc2e5b39fb35e Mon Sep 17 00:00:00 2001 From: Jordan Date: Sun, 9 Jun 2024 17:04:50 +0300 Subject: [PATCH 4/4] fix tests --- .../vulnerability_finding_flyout.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.test.tsx b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.test.tsx index da7587cfc8ad03..4cefa850bf127d 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.test.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.test.tsx @@ -40,7 +40,7 @@ describe('', () => { getByText(mockVulnerabilityHit.vulnerability.description); const descriptionList = getByTestId(FINDINGS_VULNERABILITY_FLYOUT_DESCRIPTION_LIST); expect(descriptionList.textContent).toEqual( - `Resource ID:${mockVulnerabilityHit.resource?.id}Resource Name:${mockVulnerabilityHit.resource?.name}Package:${mockVulnerabilityHit.package.name}Version:${mockVulnerabilityHit.package.version}` + `Resource ID:${mockVulnerabilityHit.resource?.id} Resource Name:${mockVulnerabilityHit.resource?.name} Package:${mockVulnerabilityHit.package.name} Version:${mockVulnerabilityHit.package.version} ` ); getByText(mockVulnerabilityHit.vulnerability.severity!); });