feat: scan CVE listing

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.20.6-pre-51",
+    "version": "1.20.6-pre-53",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/Constants.ts

@@ -131,7 +131,10 @@ export const URLS = {
     // SECURITY CENTER
     SECURITY_CENTER: SECURITY_CENTER_ROOT,
     SECURITY_CENTER_OVERVIEW: `${SECURITY_CENTER_ROOT}/overview`,
-    SECURITY_CENTER_SCANS: `${SECURITY_CENTER_ROOT}/scans`,
+    SECURITY_CENTER_VULNERABILITIES: `${SECURITY_CENTER_ROOT}/vulnerabilities`,
+    SECURITY_CENTER_VULNERABILITY_DEPLOYMENTS: `${SECURITY_CENTER_ROOT}/vulnerabilities/deployments`,
+    SECURITY_CENTER_VULNERABILITY_CVES: `${SECURITY_CENTER_ROOT}/vulnerabilities/cves`,
+    SECURITY_CENTER_SECURITY_ENABLEMENT: `${SECURITY_CENTER_ROOT}/security-enablement`,
     SECURITY_CENTER_POLICIES: `${SECURITY_CENTER_ROOT}/policies`,
     // AUTOMATION AND ENABLEMENT
     AUTOMATION_AND_ENABLEMENT: AUTOMATION_AND_ENABLEMENT_ROOT,

src/Common/SegmentedBarChart/SegmentedBarChart.tsx

@@ -32,6 +32,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     countClassName,
     labelClassName,
     isProportional,
+    hideTotal,
     swapLegendAndBar = false,
     showAnimationOnBar = false,
     isLoading,
@@ -58,7 +59,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
             <div className="shimmer w-64 lh-1-5 h-24" />
         ) : (
             <span className={countClassName} data-testid={`segmented-bar-chart-${label}-value`}>
-                {isProportional ? `${value}/${total}` : value}
+                {isProportional && !hideTotal ? `${value}/${total}` : value}
             </span>
         )
 

src/Common/SegmentedBarChart/types.ts

@@ -32,13 +32,23 @@ type EntityPropType =
           entities: NonNullable<Omit<Entity, 'label'> & { label?: never }>[]
       }
 
+type ProportionalType =
+    | {
+          isProportional?: true
+          hideTotal?: boolean
+      }
+    | {
+          isProportional?: false | never
+          hideTotal?: never
+      }
+
 export type SegmentedBarChartProps = {
     rootClassName?: string
     countClassName?: string
     labelClassName?: string
-    isProportional?: boolean
     swapLegendAndBar?: boolean
     showAnimationOnBar?: boolean
     isLoading?: boolean
     size?: ComponentSizeType
-} & EntityPropType
+} & EntityPropType &
+    ProportionalType

src/Common/SegmentedControl/constants.ts

@@ -22,10 +22,12 @@ export const COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP: Record<SegmentedControlProps['
     [ComponentSizeType.xs]: 'py-2 px-6 fs-12 lh-18',
     [ComponentSizeType.small]: 'py-2 px-6 fs-12 lh-20',
     [ComponentSizeType.medium]: 'py-4 px-8 fs-13 lh-20',
+    [ComponentSizeType.large]: 'py-6 px-10 fs-13 lh-20',
 } as const
 
 export const COMPONENT_SIZE_TO_ICON_CLASS_MAP: Record<SegmentedControlProps['size'], string> = {
     [ComponentSizeType.xs]: 'py-1',
     [ComponentSizeType.small]: 'py-2',
     [ComponentSizeType.medium]: 'py-2',
+    [ComponentSizeType.large]: 'py-3',
 } as const

src/Common/SegmentedControl/types.ts

@@ -78,7 +78,10 @@ export type SegmentedControlProps<T = string | number> = {
      * Please make sure this is unique
      */
     name: string
-    size?: Extract<ComponentSizeType, ComponentSizeType.xs | ComponentSizeType.small | ComponentSizeType.medium>
+    size?: Extract<
+        ComponentSizeType,
+        ComponentSizeType.xs | ComponentSizeType.small | ComponentSizeType.medium | ComponentSizeType.large
+    >
     fullWidth?: boolean
     disabled?: boolean
 } & (

src/Common/Types.ts

@@ -1116,6 +1116,7 @@ export type AppsGroupedByProjectsType = {
     projectName: string
     appList: {
         name: string
+        id: number
     }[]
 }[]
 

src/Shared/Components/Security/SecurityDetailsCards/SecurityCard.tsx

@@ -21,7 +21,7 @@ import { ReactComponent as ICShieldWarning } from '@Icons/ic-shield-warning-outl
 import { SegmentedBarChart } from '@Common/SegmentedBarChart'
 
 import { SECURITY_CONFIG } from '../constants'
-import { SEVERITIES } from '../SecurityModal/constants'
+import { SEVERITIES_LABEL_COLOR_MAP } from '../SecurityModal/constants'
 import { SUB_CATEGORIES } from '../SecurityModal/types'
 import { getTotalSeverities } from '../utils'
 import { SecurityCardProps } from './types'
@@ -39,7 +39,7 @@ const SecurityCard = ({
 
     const hasThreats: boolean = !!totalCount
 
-    const entities = Object.entries(SEVERITIES)
+    const entities = Object.entries(SEVERITIES_LABEL_COLOR_MAP)
         .map(([key, severity]) => ({
             ...severity,
             value: severities[key],

src/Shared/Components/Security/SecurityModal/constants.tsx

@@ -73,7 +73,7 @@ export const SUB_CATEGORY_LABELS = {
     EXPOSED_SECRETS: 'Exposed Secrets',
 } as const
 
-export const SEVERITIES = {
+export const SEVERITIES_LABEL_COLOR_MAP = {
     [SeveritiesDTO.CRITICAL]: {
         label: 'Critical',
         color: 'var(--R700)',

src/Shared/Components/Security/SecurityModal/index.ts

@@ -20,7 +20,7 @@ export {
     getSecurityModalSidebarId,
     getSidebarData,
 } from './config'
-export { CATEGORY_LABELS } from './constants'
+export { CATEGORY_LABELS, SEVERITIES_LABEL_COLOR_MAP } from './constants'
 export { default as SecurityModal } from './SecurityModal'
 export { getSecurityScan } from './service'
 export type {

src/Shared/Components/Security/SecurityModal/utils.tsx

@@ -20,7 +20,7 @@ import { VulnerabilityType } from '@Common/Types'
 import { ScannedByToolModal } from '@Shared/Components/ScannedByToolModal'
 import { Severity } from '@Shared/types'
 
-import { ORDERED_SEVERITY_KEYS, SEVERITIES, TRIVY_ICON_URL } from './constants'
+import { ORDERED_SEVERITY_KEYS, SEVERITIES_LABEL_COLOR_MAP, TRIVY_ICON_URL } from './constants'
 import {
     CATEGORIES,
     GetResourceScanDetailsResponseType,
@@ -34,27 +34,30 @@ import {
 } from './types'
 
 export const mapSeveritiesToSegmentedBarChartEntities = (
-    severities: Partial<Record<keyof typeof SEVERITIES, number>>,
+    severities: Partial<Record<keyof typeof SEVERITIES_LABEL_COLOR_MAP, number>>,
 ) =>
     /* for all the SEVERITY keys in @severities create @Entity */
     severities &&
     ORDERED_SEVERITY_KEYS.map(
-        (key: keyof typeof SEVERITIES) =>
+        (key: keyof typeof SEVERITIES_LABEL_COLOR_MAP) =>
             severities[key] && {
-                color: SEVERITIES[key].color,
-                label: SEVERITIES[key].label,
+                color: SEVERITIES_LABEL_COLOR_MAP[key].color,
+                label: SEVERITIES_LABEL_COLOR_MAP[key].label,
                 value: severities[key],
             },
     ).filter((entity: SegmentedBarChartProps['entities'][number]) => !!entity)
 
-export const stringifySeverities = (severities: Partial<Record<keyof typeof SEVERITIES, number>>) =>
+export const stringifySeverities = (severities: Partial<Record<keyof typeof SEVERITIES_LABEL_COLOR_MAP, number>>) =>
     severities &&
     Object.keys(severities)
         .sort(
-            (a: keyof typeof SEVERITIES, b: keyof typeof SEVERITIES) =>
+            (a: keyof typeof SEVERITIES_LABEL_COLOR_MAP, b: keyof typeof SEVERITIES_LABEL_COLOR_MAP) =>
                 ORDERED_SEVERITY_KEYS.indexOf(a) - ORDERED_SEVERITY_KEYS.indexOf(b),
         )
-        .map((key: keyof typeof SEVERITIES) => `${severities[key]} ${SEVERITIES[key].label}`)
+        .map(
+            (key: keyof typeof SEVERITIES_LABEL_COLOR_MAP) =>
+                `${severities[key]} ${SEVERITIES_LABEL_COLOR_MAP[key].label}`,
+        )
         .join(', ')
 
 export const getSeverityWeight = (severity: SeveritiesDTO): number =>

src/Shared/Components/Security/index.tsx

@@ -17,5 +17,7 @@
 export { SEVERITY_LABEL_MAP } from './constants'
 export * from './SecurityDetailsCards'
 export * from './SecurityModal'
+export { default as SeverityChip } from './SeverityChip'
+export { FixAvailabilityOptions, VulnerabilityDiscoveryAgeOptions } from './types'
 export * from './utils'
 export * from './Vulnerabilities'

src/Shared/Components/Security/types.tsx

@@ -42,3 +42,15 @@ export interface GetSidebarDataParamsType extends Record<ScanCategoriesWithLicen
     selectedId: string
     scanResult: ScanResultDTO
 }
+
+export enum VulnerabilityDiscoveryAgeOptions {
+    LESS_THAN_30_DAYS = 'lt_30d',
+    BETWEEN_30_AND_60_DAYS = '30_60d',
+    BETWEEN_60_AND_90_DAYS = '60_90d',
+    GREATER_THAN_90_DAYS = 'gt_90d',
+}
+
+export enum FixAvailabilityOptions {
+    FIX_AVAILABLE = 'fixAvailable',
+    FIX_NOT_AVAILABLE = 'fixNotAvailable',
+}

src/Shared/Components/SelectPicker/index.ts

@@ -20,4 +20,4 @@ export * from './GroupedFilterSelectPicker'
 export { default as SelectPicker } from './SelectPicker.component'
 export * from './SelectPickerTextArea.component'
 export * from './type'
-export { getSelectPickerOptionByValue } from './utils'
+export { getSelectPickerOptionByValue, getSelectPickerOptionsByValue } from './utils'

src/Shared/Components/SelectPicker/utils.ts

@@ -435,3 +435,18 @@ export const getSelectPickerOptionByValue = <OptionValue>(
         }) ?? defaultOption
     )
 }
+
+export const getSelectPickerOptionsByValue = <OptionValue>(
+    optionsList: OptionsOrGroups<SelectPickerOptionType<OptionValue>, GroupBase<SelectPickerOptionType<OptionValue>>>,
+    values: OptionValue[],
+): SelectPickerOptionType<OptionValue>[] => {
+    if (!Array.isArray(optionsList)) {
+        return []
+    }
+
+    const flatOptionsList = optionsList.flatMap<SelectPickerOptionType<OptionValue>>((groupOrBaseOption) =>
+        'options' in groupOrBaseOption ? groupOrBaseOption.options : [groupOrBaseOption],
+    )
+
+    return flatOptionsList.filter((option) => values.includes(option.value))
+}

src/Shared/Hooks/useUserPreferences/types.ts

@@ -40,7 +40,8 @@ export type NavigationItemID =
     | 'cost-visibility-cost-breakdown'
     | 'cost-visibility-configurations'
     | 'security-center-overview'
-    | 'security-center-security-scans'
+    | 'security-center-security-vulnerabilities'
+    | 'security-center-security-enablement'
     | 'security-center-security-policy'
     | 'automation-and-enablement-jobs'
     | 'automation-and-enablement-alerting'