[Cloud Posture] Rule flyout updates (#132327)

elastic · May 18, 2022 · b009d50 · b009d50
1 parent cd3f9ac
commit b009d50
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 146 deletions.
diff --git a/x-pack/plugins/cloud_security_posture/common/schemas/csp_rule.ts b/x-pack/plugins/cloud_security_posture/common/schemas/csp_rule.ts
@@ -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>;
diff --git a/x-pack/plugins/cloud_security_posture/common/schemas/csp_rule_template.ts b/x-pack/plugins/cloud_security_posture/common/schemas/csp_rule_template.ts
@@ -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>;
diff --git a/.../plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx b/.../plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx
@@ -6,7 +6,6 @@
  */
 import React, { useState } from 'react';
 import {
-  EuiCodeBlock,
   EuiFlexItem,
   EuiSpacer,
   EuiTextColor,
@@ -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' },
@@ -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} />
 );
@@ -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) {

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/overview_tab.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/overview_tab.tsx
@@ -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'>;
@@ -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>,
@@ -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,

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/rule_tab.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/rule_tab.tsx
@@ -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,
@@ -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,
@@ -59,5 +48,5 @@ const getRuleList = ({ rule }: CspFinding) => [
 ];
 
 export const RuleTab = ({ data }: { data: CspFinding }) => (
-  <EuiDescriptionList listItems={getRuleList(data)} />
+  <EuiDescriptionList listItems={getRuleList(data.rule)} />
 );
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_container.test.tsx b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_container.test.tsx
@@ -60,6 +60,10 @@ const getRuleMock = ({
       package_policy_id: packagePolicyId,
       policy_id: policyId,
       enabled,
+      benchmark: {
+        name: chance.word(),
+        version: chance.sentence(),
+      },
     },
   } as RuleSavedObject);
 

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_flyout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_flyout.tsx
@@ -8,7 +8,6 @@ import React, { useState } from 'react';
 import {
   EuiSpacer,
   EuiFlyout,
-  type EuiDescriptionListProps,
   EuiToolTip,
   EuiFlyoutHeader,
   EuiFlyoutBody,
@@ -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';
@@ -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');
 
@@ -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>
@@ -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)} />
     </EuiFlexItem>
   </EuiFlexGroup>
 );
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx
@@ -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%',
   },
   {

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/translations.ts b/x-pack/plugins/cloud_security_posture/public/pages/rules/translations.ts
@@ -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',
@@ -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',
 });
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -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",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -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": "すべて選択",