merge

x-pack/plugins/cloud_security_posture/public/components/quick_nav.tsx

@@ -0,0 +1,139 @@
+/*
+ * 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, { useState, useMemo } from 'react';
+import {
+  EuiSpacer,
+  EuiButtonIcon,
+  EuiIcon,
+  EuiKeyPadMenu,
+  EuiKeyPadMenuItem,
+  EuiPopover,
+  EuiPopoverTitle,
+} from '@elastic/eui';
+import { useHistory } from 'react-router-dom';
+import { useCspIntegrationLink } from '../common/navigation/use_csp_integration_link';
+import {
+  VULN_MGMT_POLICY_TEMPLATE,
+  CSPM_POLICY_TEMPLATE,
+  KSPM_POLICY_TEMPLATE,
+} from '../../common/constants';
+import { cloudPosturePages, findingsNavigation } from '../common/navigation/constants';
+
+export const QuickNav = () => {
+  const context = 'vuln';
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const cnvmMgmtIntegrationLink = useCspIntegrationLink(VULN_MGMT_POLICY_TEMPLATE);
+  const cspmMgmtIntegrationLink = useCspIntegrationLink(CSPM_POLICY_TEMPLATE);
+  const kspmMgmtIntegrationLink = useCspIntegrationLink(KSPM_POLICY_TEMPLATE);
+  const history = useHistory();
+
+  const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButtonIcon display="fill" iconType={'doubleArrowLeft'} onClick={onButtonClick} size="m" />
+  );
+
+  const quickNavList = useMemo(
+    () => [
+      {
+        context: 'Vulnerability Management',
+        items: [
+          {
+            beta: true,
+            label: 'Vulnerability Dashboard',
+            icon: 'dashboardApp',
+            isSelectedUrl: cloudPosturePages.vulnerability_dashboard.path,
+            onClick: () => history.push(cloudPosturePages.vulnerability_dashboard.path),
+            betaBadgeLabel: 'Beta',
+            betaBadgeTooltipContent: 'This module is not GA. Please help us by reporting any bugs.',
+            betaBadgeIconType: 'beta',
+          },
+          {
+            label: 'Vulnerabilities Findings',
+            icon: 'sqlApp',
+            isSelectedUrl: findingsNavigation.vulnerabilities.path,
+            onClick: () => history.push(findingsNavigation.vulnerabilities.path),
+          },
+          {
+            label: 'CNVM Integration',
+            icon: 'fleetApp',
+            disabled: !cnvmMgmtIntegrationLink,
+            href: cnvmMgmtIntegrationLink,
+          },
+        ],
+      },
+      {
+        context: 'Compliance Management',
+        items: [
+          {
+            label: 'Compliance Dashboard',
+            icon: 'dashboardApp',
+            isSelectedUrl: cloudPosturePages.dashboard.path,
+            onClick: () => history.push(cloudPosturePages.dashboard.path),
+          },
+          {
+            label: 'Compliance Findings',
+            icon: 'sqlApp',
+            isSelectedUrl: findingsNavigation.findings_default.path,
+            onClick: () => history.push(findingsNavigation.findings_default.path),
+          },
+          {
+            label: 'Benchmark Rules',
+            icon: 'indexPatternApp',
+            isSelectedUrl: cloudPosturePages.benchmarks.path,
+            onClick: () => history.push(cloudPosturePages.benchmarks.path),
+          },
+          {
+            label: 'CSPM Integration',
+            icon: 'fleetApp',
+            disabled: !cspmMgmtIntegrationLink,
+            href: cspmMgmtIntegrationLink,
+          },
+          {
+            label: 'KSPM Integration',
+            icon: 'fleetApp',
+            disabled: !kspmMgmtIntegrationLink,
+            href: kspmMgmtIntegrationLink,
+          },
+        ],
+      },
+    ],
+    [cnvmMgmtIntegrationLink, cspmMgmtIntegrationLink, kspmMgmtIntegrationLink, history]
+  );
+
+  console.log(history.location);
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      anchorPosition="leftUp"
+    >
+      <nav>
+        {quickNavList.map((quickNavGroup, i) => (
+          <>
+            <EuiPopoverTitle>{quickNavGroup.context}</EuiPopoverTitle>
+            <EuiKeyPadMenu>
+              {quickNavGroup.items.map((keyPadMenuItem) => (
+                <EuiKeyPadMenuItem
+                  {...keyPadMenuItem}
+                  isSelected={history.location.pathname.includes(keyPadMenuItem.isSelectedUrl)}
+                >
+                  <EuiIcon type={keyPadMenuItem.icon} size="l" />
+                </EuiKeyPadMenuItem>
+              ))}
+            </EuiKeyPadMenu>
+            {i !== quickNavList.length - 1 && <EuiSpacer />}
+          </>
+        ))}
+      </nav>
+    </EuiPopover>
+  );
+};

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

@@ -34,6 +34,7 @@ import * as TEST_SUBJ from './test_subjects';
 import { LOCAL_STORAGE_PAGE_SIZE_BENCHMARK_KEY } from '../../common/constants';
 import { usePageSize } from '../../common/hooks/use_page_size';
 import { useKibana } from '../../common/hooks/use_kibana';
+import { QuickNav } from '../../components/quick_nav';
 
 const SEARCH_DEBOUNCE_MS = 300;
 
@@ -160,7 +161,7 @@ export const Benchmarks = () => {
             )}
           />
         }
-        rightSideItems={[<AddCisIntegrationButton />]}
+        rightSideItems={[<QuickNav />, <AddCisIntegrationButton />]}
         bottomBorder
       />
       <EuiSpacer />

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

@@ -10,6 +10,7 @@ import { EuiEmptyPrompt, EuiIcon, EuiLink, EuiPageHeader, EuiSpacer } from '@ela
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { QuickNav } from '../../components/quick_nav';
 import { NO_FINDINGS_STATUS_TEST_SUBJ } from '../../components/test_subjects';
 import { useCspIntegrationLink } from '../../common/navigation/use_csp_integration_link';
 import type {
@@ -343,6 +344,7 @@ export const ComplianceDashboard = () => {
           />
         }
         tabs={tabs.map(({ content, ...rest }) => rest)}
+        rightSideItems={[<QuickNav />]}
       />
       <EuiSpacer />
       <div

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

@@ -21,6 +21,7 @@ import { Route } from '@kbn/shared-ux-router';
 import { Configurations } from '../configurations';
 import { cloudPosturePages, findingsNavigation } from '../../common/navigation/constants';
 import { Vulnerabilities } from '../vulnerabilities';
+import { QuickNav } from '../../components/quick_nav';
 
 export const Findings = () => {
   const history = useHistory();
@@ -44,9 +45,16 @@ export const Findings = () => {
   return (
     <>
       <EuiTitle size="l">
-        <h1>
-          <FormattedMessage id="xpack.csp.findings.title" defaultMessage="Findings" />
-        </h1>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <h1>
+              <FormattedMessage id="xpack.csp.findings.title" defaultMessage="Findings" />
+            </h1>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <QuickNav />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiTitle>
       <EuiSpacer />
       <EuiTabs size="l">

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

@@ -29,6 +29,7 @@ import { CloudPosturePage } from '../../components/cloud_posture_page';
 import { useSecuritySolutionContext } from '../../application/security_solution_context';
 import * as TEST_SUBJECTS from './test_subjects';
 import { getEnabledCspIntegrationDetails } from '../../common/utils/get_enabled_csp_integration_details';
+import { QuickNav } from '../../components/quick_nav';
 
 const getRulesSharedValues = (
   packageInfo?: PackagePolicy
@@ -111,6 +112,7 @@ export const Rules = ({ match: { params } }: RouteComponentProps<PageUrlParams>)
           )
         }
         rightSideItems={[
+          <QuickNav />,
           <EuiButtonEmpty
             iconType="gear"
             size="xs"

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

@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
 import { useVulnerabilityDashboardApi } from '../../common/api/use_vulnerability_dashboard_api';
 import { VulnerabilityTrendGraph } from './vulnerability_trend_graph';
+import { QuickNav } from '../../components/quick_nav';
 import { useCspSetupStatusApi } from '../../common/api/use_setup_status_api';
 import { NoVulnerabilitiesStates } from '../../components/no_vulnerabilities_states';
 import {
@@ -37,6 +38,7 @@ export const VulnerabilityDashboard = () => {
             })}
           />
         }
+        rightSideItems={[<QuickNav />]}
       />
       {getSetupStatus?.data?.vuln_mgmt?.status !== 'indexed' ? (
         <NoVulnerabilitiesStates />