[Cloud Security][Findings] Add Vulnerabilities and Configurations tab…

…s to the Findings page (elastic#152414)

x-pack/plugins/cloud_security_posture/public/common/hooks/use_navigate_findings.test.ts

@@ -42,7 +42,7 @@ describe('useNavigateFindings', () => {
     });
 
     expect(push).toHaveBeenCalledWith({
-      pathname: '/cloud_security_posture/findings/default',
+      pathname: '/cloud_security_posture/findings/configurations',
       search:
         "cspq=(filters:!((meta:(alias:!n,disabled:!f,key:foo,negate:!f,type:phrase),query:(match_phrase:(foo:1)))),query:(language:kuery,query:''))",
     });
@@ -60,7 +60,7 @@ describe('useNavigateFindings', () => {
     });
 
     expect(push).toHaveBeenCalledWith({
-      pathname: '/cloud_security_posture/findings/default',
+      pathname: '/cloud_security_posture/findings/configurations',
       search:
         "cspq=(filters:!((meta:(alias:!n,disabled:!f,key:foo,negate:!t,type:phrase),query:(match_phrase:(foo:1)))),query:(language:kuery,query:''))",
     });

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

@@ -62,7 +62,7 @@ export const benchmarksNavigation: Record<CspBenchmarksPage, CspPageNavigationIt
 export const findingsNavigation = {
   findings_default: {
     name: NAV_ITEMS_NAMES.FINDINGS,
-    path: `${CLOUD_SECURITY_POSTURE_BASE_PATH}/findings/default`,
+    path: `${CLOUD_SECURITY_POSTURE_BASE_PATH}/findings/configurations`,
     id: 'cloud_security_posture-findings-default',
   },
   findings_by_resource: {
@@ -75,6 +75,11 @@ export const findingsNavigation = {
     path: `${CLOUD_SECURITY_POSTURE_BASE_PATH}/findings/resource/:resourceId`,
     id: 'cloud_security_posture-findings-resourceId',
   },
+  vulnerabilities: {
+    name: NAV_ITEMS_NAMES.FINDINGS,
+    path: `${CLOUD_SECURITY_POSTURE_BASE_PATH}/findings/vulnerabilities`,
+    id: 'cloud_security_posture-findings-vulnerabilities',
+  },
 };
 
 const ELASTIC_BASE_SHORT_URL = 'https://ela.st';

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/benchmarks_section.test.tsx

@@ -15,7 +15,7 @@ import { KSPM_POLICY_TEMPLATE } from '../../../../common/constants';
 import {
   DASHBOARD_TABLE_COLUMN_SCORE_TEST_ID,
   DASHBOARD_TABLE_HEADER_SCORE_TEST_ID,
-} from '../../findings/test_subjects';
+} from '../test_subjects';
 
 describe('<BenchmarksSection />', () => {
   const renderBenchmarks = (alterMockData = {}) =>

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx

@@ -32,7 +32,7 @@ import { dashboardColumnsGrow, getPolicyTemplateQuery } from './summary_section'
 import {
   DASHBOARD_TABLE_COLUMN_SCORE_TEST_ID,
   DASHBOARD_TABLE_HEADER_SCORE_TEST_ID,
-} from '../../findings/test_subjects';
+} from '../test_subjects';
 
 const CLUSTER_DEFAULT_SORT_ORDER = 'asc';
 

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/test_subjects.ts

@@ -14,3 +14,5 @@ export const DASHBOARD_COUNTER_CARDS = {
   RESOURCES_EVALUATED: 'dashboard-counter-card-resources-evaluated',
   FAILING_FINDINGS: 'dashboard-counter-card-failing-findings',
 };
+export const DASHBOARD_TABLE_HEADER_SCORE_TEST_ID = 'csp:dashboard-sections-table-header-score';
+export const DASHBOARD_TABLE_COLUMN_SCORE_TEST_ID = 'csp:dashboard-sections-table-column-score';

x-pack/plugins/cloud_security_posture/public/pages/findings/findings.test.tsx → x-pack/plugins/cloud_security_posture/public/pages/configurations/configurations.test.tsx

@@ -9,7 +9,7 @@ import Chance from 'chance';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { of } from 'rxjs';
 import { useLatestFindingsDataView } from '../../common/api/use_latest_findings_data_view';
-import { Findings } from './findings';
+import { Configurations } from './configurations';
 import { TestProvider } from '../../test/test_provider';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks';
@@ -61,7 +61,7 @@ const renderFindingsPage = () => {
         licensing: licensingMock.createStart(),
       }}
     >
-      <Findings />
+      <Configurations />
     </TestProvider>
   );
 };

x-pack/plugins/cloud_security_posture/public/pages/configurations/configurations.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { Redirect, Switch, useLocation } from 'react-router-dom';
+import { Route } from '@kbn/shared-ux-router';
+import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
+import { useCspSetupStatusApi } from '../../common/api/use_setup_status_api';
+import { NoFindingsStates } from '../../components/no_findings_states';
+import { CloudPosturePage } from '../../components/cloud_posture_page';
+import { useLatestFindingsDataView } from '../../common/api/use_latest_findings_data_view';
+import { cloudPosturePages, findingsNavigation } from '../../common/navigation/constants';
+import { FindingsByResourceContainer } from './latest_findings_by_resource/findings_by_resource_container';
+import { LatestFindingsContainer } from './latest_findings/latest_findings_container';
+
+export const Configurations = () => {
+  const location = useLocation();
+  const dataViewQuery = useLatestFindingsDataView();
+  const getSetupStatus = useCspSetupStatusApi();
+
+  const hasFindings = getSetupStatus.data?.status === 'indexed';
+  if (!hasFindings) return <NoFindingsStates />;
+
+  return (
+    <CloudPosturePage query={dataViewQuery}>
+      <Switch>
+        <Route
+          exact
+          path={cloudPosturePages.findings.path}
+          render={() => (
+            <Redirect
+              to={{
+                pathname: findingsNavigation.findings_default.path,
+                search: location.search,
+              }}
+            />
+          )}
+        />
+        <Route
+          path={findingsNavigation.findings_default.path}
+          render={() => (
+            <TrackApplicationView viewId={findingsNavigation.findings_default.id}>
+              <LatestFindingsContainer dataView={dataViewQuery.data!} />
+            </TrackApplicationView>
+          )}
+        />
+        <Route
+          path={findingsNavigation.findings_by_resource.path}
+          render={() => <FindingsByResourceContainer dataView={dataViewQuery.data!} />}
+        />
+        <Route path="*" render={() => <Redirect to={findingsNavigation.findings_default.path} />} />
+      </Switch>
+    </CloudPosturePage>
+  );
+};

x-pack/plugins/cloud_security_posture/public/pages/configurations/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './configurations';

x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_container.tsx → x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_container.tsx

@@ -8,7 +8,6 @@ import React, { useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { Evaluation } from '../../../../common/types';
-import { CloudPosturePageTitle } from '../../../components/cloud_posture_page_title';
 import type { FindingsBaseProps } from '../types';
 import { FindingsTable } from './latest_findings_table';
 import { FindingsSearchBar } from '../layout/findings_search_bar';
@@ -24,7 +23,7 @@ import {
   useBaseEsQuery,
   usePersistedQuery,
 } from '../utils/utils';
-import { LimitedResultsBar, PageTitle, PageTitleText } from '../layout/findings_layout';
+import { LimitedResultsBar } from '../layout/findings_layout';
 import { FindingsGroupBySelector } from '../layout/findings_group_by_selector';
 import { useUrlQuery } from '../../../common/hooks/use_url_query';
 import { usePageSlice } from '../../../common/hooks/use_page_slice';
@@ -143,10 +142,8 @@ export const LatestFindingsContainer = ({ dataView }: FindingsBaseProps) => {
         }}
         loading={findingsGroupByNone.isFetching}
       />
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <LatestFindingsPageTitle />
-        </EuiFlexItem>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup justifyContent="flexEnd">
         <EuiFlexItem grow={false} style={{ width: 400 }}>
           {!error && <FindingsGroupBySelector type="default" />}
         </EuiFlexItem>
@@ -210,17 +207,3 @@ export const LatestFindingsContainer = ({ dataView }: FindingsBaseProps) => {
     </div>
   );
 };
-
-const LatestFindingsPageTitle = () => (
-  <PageTitle>
-    <PageTitleText
-      title={
-        <CloudPosturePageTitle
-          title={i18n.translate('xpack.csp.findings.latestFindings.latestFindingsPageTitle', {
-            defaultMessage: 'Findings',
-          })}
-        />
-      }
-    />
-  </PageTitle>
-);

x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings_by_resource/findings_by_resource_container.tsx → x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings_by_resource/findings_by_resource_container.tsx

@@ -11,7 +11,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
 import type { Evaluation } from '../../../../common/types';
-import { CloudPosturePageTitle } from '../../../components/cloud_posture_page_title';
 import { FindingsSearchBar } from '../layout/findings_search_bar';
 import * as TEST_SUBJECTS from '../test_subjects';
 import { useUrlQuery } from '../../../common/hooks/use_url_query';
@@ -27,7 +26,7 @@ import {
   useBaseEsQuery,
   usePersistedQuery,
 } from '../utils/utils';
-import { LimitedResultsBar, PageTitle, PageTitleText } from '../layout/findings_layout';
+import { LimitedResultsBar } from '../layout/findings_layout';
 import { FindingsGroupBySelector } from '../layout/findings_group_by_selector';
 import { findingsNavigation } from '../../../common/navigation/constants';
 import { ResourceFindings } from './resource_findings/resource_findings_container';
@@ -123,21 +122,8 @@ const LatestFindingsByResource = ({ dataView }: FindingsBaseProps) => {
         }}
         loading={findingsGroupByResource.isFetching}
       />
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <PageTitle>
-            <PageTitleText
-              title={
-                <CloudPosturePageTitle
-                  title={i18n.translate(
-                    'xpack.csp.findings.findingsByResource.findingsByResourcePageTitle',
-                    { defaultMessage: 'Findings' }
-                  )}
-                />
-              }
-            />
-          </PageTitle>
-        </EuiFlexItem>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup justifyContent="flexEnd">
         <EuiFlexItem grow={false} style={{ width: 400 }}>
           {!error && <FindingsGroupBySelector type="resource" />}
         </EuiFlexItem>

x-pack/plugins/cloud_security_posture/public/pages/findings/test_subjects.ts → x-pack/plugins/cloud_security_posture/public/pages/configurations/test_subjects.ts

@@ -37,6 +37,3 @@ export const RESOURCES_FINDINGS_TABLE_EMPTY_STATE = 'resource_findings_table_emp
 export const RESOURCES_FINDINGS_TABLE = 'resource_findings_table';
 export const getResourceFindingsTableRowTestId = (id: string) =>
   `resource_findings_table_row_${id}`;
-
-export const DASHBOARD_TABLE_HEADER_SCORE_TEST_ID = 'csp:dashboard-sections-table-header-score';
-export const DASHBOARD_TABLE_COLUMN_SCORE_TEST_ID = 'csp:dashboard-sections-table-column-score';

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

@@ -5,32 +5,80 @@
  * 2.0.
  */
 import React from 'react';
-import { Redirect, Switch, useLocation } from 'react-router-dom';
+import {
+  EuiBetaBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
+import { Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
 import { Route } from '@kbn/shared-ux-router';
-import { TrackApplicationView } from '@kbn/usage-collection-plugin/public';
-import { useCspSetupStatusApi } from '../../common/api/use_setup_status_api';
-import { NoFindingsStates } from '../../components/no_findings_states';
-import { CloudPosturePage } from '../../components/cloud_posture_page';
-import { useLatestFindingsDataView } from '../../common/api/use_latest_findings_data_view';
+import { Configurations } from '../configurations';
 import { cloudPosturePages, findingsNavigation } from '../../common/navigation/constants';
-import { FindingsByResourceContainer } from './latest_findings_by_resource/findings_by_resource_container';
-import { LatestFindingsContainer } from './latest_findings/latest_findings_container';
+import { Vulnerabilities } from '../vulnerabilities';
 
 export const Findings = () => {
+  const history = useHistory();
   const location = useLocation();
-  const dataViewQuery = useLatestFindingsDataView();
-  const getSetupStatus = useCspSetupStatusApi();
-
-  const hasFindings = getSetupStatus.data?.status === 'indexed';
-  if (!hasFindings) return <NoFindingsStates />;
 
+  const navigateToVulnerabilitiesTab = () => {
+    history.push({ pathname: findingsNavigation.vulnerabilities.path });
+  };
+  const navigateToConfigurationsTab = () => {
+    history.push({ pathname: findingsNavigation.findings_default.path });
+  };
   return (
-    <CloudPosturePage query={dataViewQuery}>
+    <>
+      <EuiTitle size="l">
+        <h1>
+          <FormattedMessage id="xpack.csp.findings.title" defaultMessage="Findings" />
+        </h1>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiTabs size="l">
+        <EuiTab
+          key="vuln_mgmt"
+          onClick={navigateToVulnerabilitiesTab}
+          isSelected={location.pathname === findingsNavigation.vulnerabilities.path}
+        >
+          <EuiFlexGroup responsive={false} alignItems="center" direction="row" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <FormattedMessage
+                id="xpack.csp.findings.tabs.vulnerabilities"
+                defaultMessage="Vulnerabilities"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBetaBadge
+                css={css`
+                  display: block;
+                `}
+                label="Beta"
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiTab>
+        <EuiTab
+          key="configurations"
+          onClick={navigateToConfigurationsTab}
+          isSelected={location.pathname !== findingsNavigation.vulnerabilities.path}
+        >
+          <FormattedMessage
+            id="xpack.csp.findings.tabs.configurations"
+            defaultMessage="Configurations"
+          />
+        </EuiTab>
+      </EuiTabs>
       <Switch>
         <Route
           exact
           path={cloudPosturePages.findings.path}
-          component={() => (
+          render={() => (
             <Redirect
               to={{
                 pathname: findingsNavigation.findings_default.path,
@@ -39,23 +87,12 @@ export const Findings = () => {
             />
           )}
         />
-        <Route
-          path={findingsNavigation.findings_default.path}
-          render={() => (
-            <TrackApplicationView viewId={findingsNavigation.findings_default.id}>
-              <LatestFindingsContainer dataView={dataViewQuery.data!} />
-            </TrackApplicationView>
-          )}
-        />
-        <Route
-          path={findingsNavigation.findings_by_resource.path}
-          render={() => <FindingsByResourceContainer dataView={dataViewQuery.data!} />}
-        />
-        <Route
-          path={'*'}
-          component={() => <Redirect to={findingsNavigation.findings_default.path} />}
-        />
+
+        <Route path={findingsNavigation.findings_default.path} component={Configurations} />
+        <Route path={findingsNavigation.vulnerabilities.path} component={Vulnerabilities} />
+        <Route path={findingsNavigation.findings_by_resource.path} component={Configurations} />
+        <Route path="*" render={() => <Redirect to={findingsNavigation.findings_default.path} />} />
       </Switch>
-    </CloudPosturePage>
+    </>
   );
 };

x-pack/plugins/cloud_security_posture/public/pages/index.ts

@@ -6,6 +6,7 @@
  */
 
 export { Findings } from './findings';
+export { Configurations } from './configurations';
 export * from './compliance_dashboard';
 export { Benchmarks } from './benchmarks';
 export { Rules } from './rules';

x-pack/plugins/cloud_security_posture/public/pages/rules/rules_flyout.tsx

@@ -18,8 +18,8 @@ import {
   EuiFlexGroup,
 } 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 { getRuleList } from '../configurations/findings_flyout/rule_tab';
+import { getRemediationList } from '../configurations/findings_flyout/overview_tab';
 import type { RuleSavedObject } from './use_csp_rules';
 import * as TEST_SUBJECTS from './test_subjects';
 

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './vulnerabilities';