feat: scan CVE listing

src/components/Navigation/constants.ts

@@ -359,10 +359,17 @@
                 icon: 'ic-chart-line-up',
             },
             {
-                title: 'Security Scans',
-                dataTestId: 'security-scans',
-                id: 'security-center-security-scans',
-                href: COMMON_URLS.SECURITY_CENTER_SCANS,
+                title: 'Vulnerabilities',
+                dataTestId: 'security-vulnerabilities',
+                id: 'security-center-security-vulnerabilities',
+                href: COMMON_URLS.SECURITY_CENTER_VULNERABILITIES,
+                icon: 'ic-bug',
+            },
+            {
+                title: 'Security Enablement',
+                dataTestId: 'security-enablement',
+                id: 'security-center-security-enablement',
+                href: COMMON_URLS.SECURITY_CENTER_SECURITY_ENABLEMENT,
                 icon: 'ic-security-scan',
             },
             {
@@ -486,8 +493,8 @@
                 href: `${URLS.GLOBAL_CONFIG_AUTH}/${Routes.SSO_LOGIN_SERVICES}`,
             },
             {
-                title: 'Host URLS',
-                dataTestId: 'host-urls',
+                title: 'Host URL',
+                dataTestId: 'host-url',
                 id: 'global-configuration-host-urls',
                 icon: 'ic-link',
                 href: URLS.GLOBAL_CONFIG_HOST_URL,

src/components/security/AddCVEPolicy/VulnerabilityExposure.tsx

@@ -92,18 +92,18 @@ const ExposureListContainer = ({ urlFilters }: ExposureListContainerProps) => {
         )
     }
 
-    const clusterListOptions: SelectPickerOptionType[] = filtersResponse?.filters.clusters || []
-    const environmentListOptions: SelectPickerOptionType[] = filtersResponse?.filters.environments || []
+    const clusterListOptions: SelectPickerOptionType[] = filtersResponse?.cluster || []
+    const environmentListOptions: SelectPickerOptionType[] = filtersResponse?.environment || []
 
     const getFilterLabelFromValue = (filterKey: string, filterValue: string) => {
         if (filterKey === VulnerabilityExposureFilterKeys.cluster) {
             return (
-                filtersResponse?.filters.clusters.find((clusterOption) => clusterOption.value === filterValue)?.label ??
-                filterValue
+                (filtersResponse?.cluster.find((clusterOption) => clusterOption.value === filterValue)
+                    ?.label as string) ?? filterValue
             )
         }
         return (
-            filtersResponse?.filters.environments.find((envOption) => envOption.value === filterValue)?.label ??
+            (filtersResponse?.environment.find((envOption) => envOption.value === filterValue)?.label as string) ??
             filterValue
         )
     }
@@ -114,7 +114,7 @@ const ExposureListContainer = ({ urlFilters }: ExposureListContainerProps) => {
     }))
 
     const selectedEnvironments: SelectPickerOptionType[] = environment.map((envId) => ({
-        label: getFilterLabelFromValue(VulnerabilityExposureFilterKeys.cluster, envId),
+        label: getFilterLabelFromValue(VulnerabilityExposureFilterKeys.environment, envId),
         value: envId,
     }))
 

src/components/security/AddCveModal.tsx

@@ -16,7 +16,6 @@
 
 import React, { Component } from 'react'
 import { Progressing, VisibleModal, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
-import { getCVEPolicies } from './security.service'
 import { CVE_ID_NOT_FOUND, ViewType } from '../../config'
 import { AddCveModalProps, AddCveModalState, ClusterEnvironment, VulnerabilityAction } from './security.types'
 import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
@@ -33,7 +32,6 @@ export class AddCveModal extends Component<AddCveModalProps, AddCveModalState> {
         }
         this.handleCveChange = this.handleCveChange.bind(this)
         this.handlePolicyChange = this.handlePolicyChange.bind(this)
-        this.searchCVE = this.searchCVE.bind(this)
     }
 
     handleCveChange(event: React.ChangeEvent<HTMLInputElement>): void {
@@ -54,21 +52,6 @@ export class AddCveModal extends Component<AddCveModalProps, AddCveModalState> {
         }
     }
 
-    searchCVE(event): void {
-        this.setState({ view: ViewType.LOADING })
-        getCVEPolicies(this.state.cve)
-            .then((response) => {
-                this.setState({
-                    cve: this.state.cve,
-                    clusters: response.result.clusters,
-                    view: ViewType.FORM,
-                })
-            })
-            .catch((error) => {
-                this.setState({ view: ViewType.FORM, isCveError: true })
-            })
-    }
-
     renderHeader() {
         return (
             <div className="modal__header ml-24 mr-24">

src/components/security/Security.tsx

@@ -20,12 +20,13 @@
 
 import { importComponentFromFELibrary } from '@Components/common'
 
-import { SecurityScansTab } from './SecurityScansTab/SecurityScansTab'
 import { SecurityPoliciesTab } from './SecurityPoliciesTab'
+import { VulnerabilitiesRouter } from './Vulnerabilities'
 
 import './security.scss'
 
 const SecurityCenterOverview = importComponentFromFELibrary('SecurityCenterOverview', null, 'function')
+const SecurityEnablement = importComponentFromFELibrary('SecurityEnablement', null, 'function')
 
 export const Security = () => (
     <Switch>
@@ -34,12 +35,17 @@
                 <SecurityCenterOverview />
             </Route>
         )}
-        <Route exact path={URLS.SECURITY_CENTER_SCANS}>
-            <SecurityScansTab />
+        <Route path={URLS.SECURITY_CENTER_VULNERABILITIES}>
+            <VulnerabilitiesRouter />
         </Route>
+        {SecurityEnablement && (
+            <Route path={URLS.SECURITY_CENTER_SECURITY_ENABLEMENT}>
+                <SecurityEnablement />
+            </Route>
+        )}
         <Route path={URLS.SECURITY_CENTER_POLICIES}>
             <SecurityPoliciesTab />
         </Route>
-        <Redirect to={SecurityCenterOverview ? URLS.SECURITY_CENTER_OVERVIEW : URLS.SECURITY_CENTER_SCANS} />
+        <Redirect to={SecurityCenterOverview ? URLS.SECURITY_CENTER_OVERVIEW : URLS.SECURITY_CENTER_VULNERABILITIES} />
     </Switch>
 )

src/components/security/SecurityPoliciesTab.tsx

@@ -15,15 +15,35 @@
  */
 
 import { Switch, Route, Redirect, NavLink, useRouteMatch } from 'react-router-dom'
+
+import {
+    BreadCrumb,
+    BreadcrumbText,
+    getSecurityCenterBreadcrumb,
+    PageHeader,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib'
+
 import { SecurityPolicyGlobal } from './SecurityPolicyGlobal'
 import { SecurityPolicyCluster } from './SecurityPolicyCluster'
 import { SecurityPolicyApp } from './SecurityPolicyApp'
 import { SecurityPolicyEnvironment } from './SecurityPolicyEnvironment'
 import { VulnerabilityExposure } from './AddCVEPolicy'
-import { SecurityPageHeader } from './SecurityPageHeader'
 
 export const SecurityPoliciesTab = () => {
     const { path } = useRouteMatch()
+
+    const { breadcrumbs } = useBreadcrumb({
+        alias: {
+            ...getSecurityCenterBreadcrumb(),
+            policies: {
+                component: <BreadcrumbText heading="Security Policies" isActive />,
+            },
+        },
+    })
+
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
     const renderRouter = () => {
         return (
             <Switch>
@@ -39,7 +59,8 @@ export const SecurityPoliciesTab = () => {
 
     return (
         <div className="security-scan-container bg__primary flexbox-col min-h-100">
-            <SecurityPageHeader />
+            <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
+
             <div className="security-policy flex-grow-1">
                 <div className="dc__secondary-nav">
                     <NavLink