Merge branch 'main' into screenshot/fix-resize-during-capture

package.json

@@ -554,7 +554,6 @@
     "@types/cmd-shim": "^2.0.0",
     "@types/color": "^3.0.3",
     "@types/compression-webpack-plugin": "^2.0.2",
-    "@types/cypress-cucumber-preprocessor": "^1.14.1",
     "@types/cytoscape": "^3.14.0",
     "@types/d3": "^3.5.43",
     "@types/d3-array": "^1.2.7",
@@ -810,15 +809,14 @@
     "cpy": "^8.1.1",
     "css-loader": "^3.4.2",
     "cssnano": "^4.1.11",
-    "cypress": "^9.2.1",
+    "cypress": "^9.6.1",
     "cypress-axe": "^0.14.0",
-    "cypress-cucumber-preprocessor": "^2.5.2",
     "cypress-file-upload": "^5.0.8",
-    "cypress-multi-reporters": "^1.5.0",
+    "cypress-multi-reporters": "^1.6.0",
     "cypress-pipe": "^2.0.0",
-    "cypress-react-selector": "^2.3.13",
-    "cypress-real-events": "^1.6.0",
-    "cypress-recurse": "^1.13.1",
+    "cypress-react-selector": "^2.3.17",
+    "cypress-real-events": "^1.7.0",
+    "cypress-recurse": "^1.20.0",
     "debug": "^2.6.9",
     "delete-empty": "^2.0.0",
     "dependency-check": "^4.1.0",

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

@@ -30,7 +30,6 @@ export const RULE_FAILED = `failed`;
 export const INTERNAL_FEATURE_FLAGS = {
   showBenchmarks: true,
   showManageRulesMock: false,
-  showRisksMock: false,
   showFindingsGroupBy: true,
 } as const;
 

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

@@ -8,6 +8,7 @@
 import React, { useMemo } from 'react';
 import {
   EuiBasicTable,
+  EuiBasicTableColumn,
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,46 +18,6 @@ import {
 import { ComplianceDashboardData, GroupedFindingsEvaluation } from '../../../../common/types';
 import { CompactFormattedNumber } from '../../../components/compact_formatted_number';
 import * as TEXT from '../translations';
-import { INTERNAL_FEATURE_FLAGS } from '../../../../common/constants';
-
-const mockData = [
-  {
-    name: 'pods',
-    totalFindings: 2,
-    totalPassed: 1,
-    totalFailed: 1,
-  },
-  {
-    name: 'etcd',
-    totalFindings: 5,
-    totalPassed: 0,
-    totalFailed: 5,
-  },
-  {
-    name: 'cluster',
-    totalFindings: 2,
-    totalPassed: 2,
-    totalFailed: 0,
-  },
-  {
-    name: 'system',
-    totalFindings: 10,
-    totalPassed: 6,
-    totalFailed: 4,
-  },
-  {
-    name: 'api',
-    totalFindings: 19100,
-    totalPassed: 2100,
-    totalFailed: 17000,
-  },
-  {
-    name: 'server',
-    totalFindings: 7,
-    totalPassed: 4,
-    totalFailed: 3,
-  },
-];
 
 export interface RisksTableProps {
   data: ComplianceDashboardData['groupedFindingsEvaluation'];
@@ -81,13 +42,16 @@ export const RisksTable = ({
   onCellClick,
   onViewAllClick,
 }: RisksTableProps) => {
-  const columns = useMemo(
+  const columns: Array<EuiBasicTableColumn<GroupedFindingsEvaluation>> = useMemo(
     () => [
       {
         field: 'name',
+        truncateText: true,
         name: TEXT.CIS_SECTION,
         render: (name: GroupedFindingsEvaluation['name']) => (
-          <EuiLink onClick={() => onCellClick(name)}>{name}</EuiLink>
+          <EuiLink onClick={() => onCellClick(name)} className="eui-textTruncate">
+            {name}
+          </EuiLink>
         ),
       },
       {
@@ -119,7 +83,7 @@ export const RisksTable = ({
       <EuiFlexItem>
         <EuiBasicTable<GroupedFindingsEvaluation>
           rowHeader="name"
-          items={INTERNAL_FEATURE_FLAGS.showRisksMock ? getTopRisks(mockData, maxItems) : items}
+          items={items}
           columns={columns}
         />
       </EuiFlexItem>

x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx

@@ -9,88 +9,56 @@ import {
   EuiCodeBlock,
   EuiFlexItem,
   EuiSpacer,
-  EuiDescriptionList,
   EuiTextColor,
   EuiFlyout,
   EuiFlyoutHeader,
   EuiTitle,
   EuiFlyoutBody,
   EuiTabs,
   EuiTab,
-  EuiFlexGrid,
-  EuiCard,
   EuiFlexGroup,
-  EuiIcon,
   type PropsOf,
   EuiMarkdownFormat,
 } from '@elastic/eui';
 import { assertNever } from '@kbn/std';
-import moment from 'moment';
 import type { CspFinding } from '../types';
 import { CspEvaluationBadge } from '../../../components/csp_evaluation_badge';
 import * as TEXT from '../translations';
-import cisLogoIcon from '../../../assets/icons/cis_logo.svg';
-import k8sLogoIcon from '../../../assets/icons/k8s_logo.svg';
 import { ResourceTab } from './resource_tab';
 import { JsonTab } from './json_tab';
+import { OverviewTab } from './overview_tab';
+import { RuleTab } from './rule_tab';
 
 const tabs = [
-  { title: TEXT.REMEDIATION, id: 'remediation' },
+  { title: TEXT.OVERVIEW, id: 'overview' },
+  { title: TEXT.RULE, id: 'rule' },
   { title: TEXT.RESOURCE, id: 'resource' },
-  { title: TEXT.GENERAL, id: 'general' },
   { title: TEXT.JSON, id: 'json' },
 ] as const;
 
-const CodeBlock: React.FC<PropsOf<typeof EuiCodeBlock>> = (props) => (
+export const CodeBlock: React.FC<PropsOf<typeof EuiCodeBlock>> = (props) => (
   <EuiCodeBlock isCopyable paddingSize="s" overflowHeight={300} {...props} />
 );
 
-const Markdown: React.FC<PropsOf<typeof EuiMarkdownFormat>> = (props) => (
+export const Markdown: React.FC<PropsOf<typeof EuiMarkdownFormat>> = (props) => (
   <EuiMarkdownFormat textSize="s" {...props} />
 );
 
 type FindingsTab = typeof tabs[number];
 
-type EuiListItemsProps = NonNullable<PropsOf<typeof EuiDescriptionList>['listItems']>[number];
-
-interface Card {
-  title: string;
-  listItems: Array<[EuiListItemsProps['title'], EuiListItemsProps['description']]>;
-}
-
 interface FindingFlyoutProps {
   onClose(): void;
   findings: CspFinding;
 }
 
-const Cards = ({ data }: { data: Card[] }) => (
-  <EuiFlexGrid direction="column" gutterSize={'l'}>
-    {data.map((card) => (
-      <EuiFlexItem key={card.title} style={{ display: 'block' }}>
-        <EuiCard textAlign="left" title={card.title} hasBorder>
-          <EuiDescriptionList
-            compressed={false}
-            type="column"
-            listItems={card.listItems.map((v) => ({ title: v[0], description: v[1] }))}
-            style={{ flexFlow: 'column' }}
-            descriptionProps={{
-              style: { width: '100%' },
-            }}
-          />
-        </EuiCard>
-      </EuiFlexItem>
-    ))}
-  </EuiFlexGrid>
-);
-
 const FindingsTab = ({ tab, findings }: { findings: CspFinding; tab: FindingsTab }) => {
   switch (tab.id) {
-    case 'remediation':
-      return <Cards data={getRemediationCards(findings)} />;
+    case 'overview':
+      return <OverviewTab data={findings} />;
+    case 'rule':
+      return <RuleTab data={findings} />;
     case 'resource':
       return <ResourceTab data={findings} />;
-    case 'general':
-      return <Cards data={getGeneralCards(findings)} />;
     case 'json':
       return <JsonTab data={findings} />;
     default:
@@ -131,55 +99,3 @@ export const FindingsRuleFlyout = ({ onClose, findings }: FindingFlyoutProps) =>
     </EuiFlyout>
   );
 };
-
-const getGeneralCards = ({ rule, ...rest }: CspFinding): Card[] => [
-  {
-    title: TEXT.RULE,
-    listItems: [
-      [TEXT.RULE_EVALUATED_AT, moment(rest['@timestamp']).format('MMMM D, YYYY @ HH:mm:ss.SSS')],
-      [
-        TEXT.FRAMEWORK_SOURCES,
-        <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem grow={false}>
-            <EuiIcon type={cisLogoIcon} size="xxl" />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiIcon type={k8sLogoIcon} size="xxl" />
-          </EuiFlexItem>
-        </EuiFlexGroup>,
-      ],
-      [TEXT.CIS_SECTION, rule.section],
-      [TEXT.PROFILE_APPLICABILITY, <Markdown>{rule.profile_applicability}</Markdown>],
-      [TEXT.BENCHMARK, rule.benchmark.name],
-      [TEXT.NAME, rule.name],
-      [TEXT.DESCRIPTION, <Markdown>{rule.description}</Markdown>],
-      [TEXT.AUDIT, <Markdown>{rule.audit}</Markdown>],
-      [TEXT.REFERENCES, <Markdown>{rule.references}</Markdown>],
-    ],
-  },
-];
-
-const getRemediationCards = ({ result, rule, ...rest }: CspFinding): Card[] => [
-  {
-    title: TEXT.RESULT_DETAILS,
-    listItems: [
-      result.expected
-        ? [TEXT.EXPECTED, <CodeBlock>{JSON.stringify(result.expected, null, 2)}</CodeBlock>]
-        : ['', ''],
-      [TEXT.EVIDENCE, <CodeBlock>{JSON.stringify(result.evidence, null, 2)}</CodeBlock>],
-      [
-        TEXT.RULE_EVALUATED_AT,
-        <span>{moment(rest['@timestamp']).format('MMMM D, YYYY @ HH:mm:ss.SSS')}</span>,
-      ],
-    ],
-  },
-  {
-    title: TEXT.REMEDIATION,
-    listItems: [
-      ['', <Markdown>{rule.remediation}</Markdown>],
-      [TEXT.IMPACT, <Markdown>{rule.impact}</Markdown>],
-      [TEXT.DEFAULT_VALUE, <Markdown>{rule.default_value}</Markdown>],
-      [TEXT.RATIONALE, <Markdown>{rule.rationale}</Markdown>],
-    ],
-  },
-];