Merge pull request #510 from devtron-labs/fix/security-card-threats

AbhishekA1509 · web-flow · commit 310651fbd2b7 · 2025-01-15T10:12:36.000+05:30
feat: add failed state in scan security card
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.4.8-beta-2",
+    "version": "1.4.8-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Shared/Components/Security/SecurityDetailsCards/SecurityCard.tsx b/src/Shared/Components/Security/SecurityDetailsCards/SecurityCard.tsx
@@ -1,6 +1,7 @@
 import { SegmentedBarChart } from '@Common/SegmentedBarChart'
 import { ReactComponent as ICShieldWarning } from '@Icons/ic-shield-warning-outline.svg'
 import { ReactComponent as ICShieldSecure } from '@Icons/ic-shield-check.svg'
+import { ReactComponent as ICError } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICArrowRight } from '@Icons/ic-caret-down-small.svg'
 import { SecurityCardProps } from './types'
 import { SUB_CATEGORIES } from '../SecurityModal/types'
@@ -9,19 +10,41 @@ import './securityCard.scss'
 import { getTotalSeverities } from '../utils'
 import { SECURITY_CONFIG } from '../constants'
 
-const SecurityCard = ({ category, subCategory, severityCount = {}, handleCardClick }: SecurityCardProps) => {
-    const totalCount = getTotalSeverities(severityCount)
+const SecurityCard = ({
+    category,
+    subCategory,
+    severities = {},
+    handleCardClick,
+    scanFailed = false,
+}: SecurityCardProps) => {
+    const totalCount = getTotalSeverities(severities)
 
     const hasThreats: boolean = !!totalCount
 
     const entities = Object.entries(SEVERITIES)
         .map(([key, severity]) => ({
             ...severity,
-            value: severityCount[key],
+            value: severities[key],
         }))
         .filter((entity) => !!entity.value)
 
+    const getInfoIcon = () => {
+        if (scanFailed) {
+            return <ICError className="icon-dim-24 dc__no-shrink" />
+        }
+        return hasThreats ? (
+            <ICShieldWarning className="icon-dim-24 scr-5 dc__no-shrink" />
+        ) : (
+            <ICShieldSecure className="icon-dim-24 scg-5 dc__no-shrink" />
+        )
+    }
+
     const getTitleSubtitle = (): { title: string; subtitle?: string } => {
+        if (scanFailed) {
+            return subCategory === SUB_CATEGORIES.VULNERABILITIES
+                ? { title: 'Vulnerability scan failed', subtitle: 'Failed' }
+                : { title: 'License scan failed', subtitle: 'Failed' }
+        }
         switch (subCategory) {
             case SUB_CATEGORIES.EXPOSED_SECRETS:
                 return hasThreats
@@ -55,7 +78,7 @@ const SecurityCard = ({ category, subCategory, severityCount = {}, handleCardCli
 
     return (
         <div
-            className={`w-100 bcn-0 p-20 flexbox-col dc__gap-16 br-8 dc__border security-card security-card${hasThreats ? '--threat' : '--secure'}`}
+            className={`w-100 p-20 flexbox-col dc__gap-16 br-8 dc__border security-card security-card${hasThreats || scanFailed ? '--threat' : '--secure'}`}
             role="button"
             tabIndex={0}
             onClick={handleCardClick}
@@ -69,22 +92,18 @@ const SecurityCard = ({ category, subCategory, severityCount = {}, handleCardCli
                         <ICArrowRight className="icon-dim-20 dc__flip-270 scb-5 arrow-right" />
                     </div>
                 </div>
-                {hasThreats ? (
-                    <ICShieldWarning className="icon-dim-24 scr-5 dc__no-shrink" />
-                ) : (
-                    <ICShieldSecure className="icon-dim-24 scg-5 dc__no-shrink" />
-                )}
+                {getInfoIcon()}
             </div>
             <div className="flexbox-col dc__gap-12">
-                {hasThreats || severityCount.success ? (
+                {scanFailed || !(hasThreats || severities.success) ? (
+                    <div className="bcn-1 br-4 h-8" />
+                ) : (
                     <SegmentedBarChart
                         entities={entities}
                         labelClassName="fs-13 fw-4 lh-20 cn-9"
                         countClassName="fs-13 fw-6 lh-20 cn-7"
                         swapLegendAndBar
                     />
-                ) : (
-                    <div className="bcn-1 br-4 h-8" />
                 )}
                 {subtitle && <span className="cn-9 fs-13 lh-20">{subtitle}</span>}
             </div>
diff --git a/src/Shared/Components/Security/SecurityDetailsCards/SecurityDetailsCards.tsx b/src/Shared/Components/Security/SecurityDetailsCards/SecurityDetailsCards.tsx
@@ -3,13 +3,14 @@ import { EMPTY_STATE_STATUS, SCAN_TOOL_ID_CLAIR, SCAN_TOOL_ID_TRIVY } from '@Sha
 import { useState } from 'react'
 import { GenericEmptyState } from '@Common/index'
 import { ReactComponent as NoVulnerability } from '@Icons/ic-vulnerability-not-found.svg'
+import { GenericSectionErrorState } from '@Shared/Components/GenericSectionErrorState'
 import SecurityCard from './SecurityCard'
 import { CATEGORIES, SecurityModalStateType, SUB_CATEGORIES } from '../SecurityModal/types'
 import { SecurityCardProps, SecurityDetailsCardsProps } from './types'
 import { SecurityModal } from '../SecurityModal'
 import { DEFAULT_SECURITY_MODAL_IMAGE_STATE } from '../SecurityModal/constants'
 import { ScanCategories, ScanSubCategories } from '../types'
-import { getSecurityConfig, getCompiledSecurityThreats, getTotalSeverities } from '../utils'
+import { getSecurityConfig, getCompiledSecurityThreats, getTotalSeverities, getStatusForScanList } from '../utils'
 import './securityCard.scss'
 
 const SecurityDetailsCards = ({ scanResult, Sidebar }: SecurityDetailsCardsProps) => {
@@ -74,31 +75,62 @@ const SecurityDetailsCards = ({ scanResult, Sidebar }: SecurityDetailsCardsProps
     return (
         <>
             <div className="flexbox-col dc__gap-20 mw-600 dc__mxw-1200">
-                {Object.keys(SECURITY_CONFIG).map((category: ScanCategories) => (
-                    <div className="flexbox-col dc__gap-12" key={category}>
-                        <div className="flexbox dc__content-space pb-8 dc__border-bottom-n1">
-                            <span className="fs-13 fw-6 lh-1-5 cn-9">{SECURITY_CONFIG[category].label}</span>
-                            <ScannedByToolModal scanToolId={getScanToolId(category)} />
-                        </div>
-                        <div className="dc__grid security-cards">
-                            {SECURITY_CONFIG[category].subCategories.map((subCategory: ScanSubCategories) => {
-                                const severityCount =
-                                    subCategory === SUB_CATEGORIES.MISCONFIGURATIONS
-                                        ? scanResult[category][subCategory]?.misConfSummary?.status
-                                        : scanResult[category][subCategory]?.summary?.severities
+                {Object.keys(SECURITY_CONFIG).map((category: ScanCategories) => {
+                    const categoryFailed: boolean =
+                        category !== CATEGORIES.IMAGE_SCAN &&
+                        (scanResult.codeScan?.status === 'Failed' || scanResult.kubernetesManifest?.status === 'Failed')
 
-                                return (
-                                    <SecurityCard
-                                        category={category}
-                                        subCategory={subCategory}
-                                        severityCount={severityCount}
-                                        handleCardClick={handleCardClick(category, subCategory)}
+                    return (
+                        <div className="flexbox-col dc__gap-12" key={category}>
+                            <div className="flexbox dc__content-space pb-8 dc__border-bottom-n1">
+                                <span className="fs-13 fw-6 lh-1-5 cn-9">{SECURITY_CONFIG[category].label}</span>
+                                <ScannedByToolModal scanToolId={getScanToolId(category)} />
+                            </div>
+                            {categoryFailed ? (
+                                <div className="dc__border br-8">
+                                    <GenericSectionErrorState
+                                        title={
+                                            category === CATEGORIES.CODE_SCAN
+                                                ? 'Code scan failed'
+                                                : 'Manifest scan failed'
+                                        }
+                                        subTitle=""
+                                        description=""
                                     />
-                                )
-                            })}
+                                </div>
+                            ) : (
+                                <div className="dc__grid security-cards">
+                                    {SECURITY_CONFIG[category].subCategories.map((subCategory: ScanSubCategories) => {
+                                        // Explicit handling if subcategory is null
+                                        if (!scanResult[category][subCategory]) {
+                                            return null
+                                        }
+
+                                        const scanFailed: boolean =
+                                            category === CATEGORIES.IMAGE_SCAN &&
+                                            getStatusForScanList(scanResult[category][subCategory].list ?? []) ===
+                                                'Failed'
+
+                                        const severities =
+                                            subCategory === SUB_CATEGORIES.MISCONFIGURATIONS
+                                                ? scanResult[category][subCategory]?.misConfSummary?.status
+                                                : scanResult[category][subCategory]?.summary?.severities
+
+                                        return (
+                                            <SecurityCard
+                                                category={category}
+                                                subCategory={subCategory}
+                                                severities={severities}
+                                                handleCardClick={handleCardClick(category, subCategory)}
+                                                scanFailed={scanFailed}
+                                            />
+                                        )
+                                    })}
+                                </div>
+                            )}
                         </div>
-                    </div>
-                ))}
+                    )
+                })}
             </div>
             {showSecurityModal && (
                 <SecurityModal
diff --git a/src/Shared/Components/Security/SecurityDetailsCards/types.tsx b/src/Shared/Components/Security/SecurityDetailsCards/types.tsx
@@ -4,8 +4,9 @@ import { ScanCategories, ScanSubCategories } from '../types'
 export interface SecurityCardProps {
     category: ScanCategories
     subCategory: ScanSubCategories
-    severityCount: Partial<Record<SeveritiesDTO, number>>
+    severities: Partial<Record<SeveritiesDTO, number>>
     handleCardClick: () => void
+    scanFailed?: boolean
 }
 
 export interface SecurityDetailsCardsProps extends Pick<SecurityModalPropsType, 'Sidebar'> {
diff --git a/src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx b/src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx
@@ -21,6 +21,7 @@ import { getSecurityScan } from '../SecurityModal/service'
 import { SecurityCard } from '../SecurityDetailsCards'
 import { CATEGORIES, SUB_CATEGORIES } from '../SecurityModal/types'
 import { SecurityModal } from '../SecurityModal'
+import { getStatusForScanList } from '../utils'
 
 const Vulnerabilities = ({
     isScanned,
@@ -90,13 +91,19 @@ const Vulnerabilities = ({
         setShowSecurityModal(false)
     }
 
+    const imageScanVulnerabilities = scanResultResponse.result?.imageScan?.vulnerability
+    const imageScanList = imageScanVulnerabilities?.list || []
+
+    const scanFailed: boolean = getStatusForScanList(imageScanList) === 'Failed'
+
     return (
         <div className="p-12">
             <SecurityCard
                 category={CATEGORIES.IMAGE_SCAN}
                 subCategory={SUB_CATEGORIES.VULNERABILITIES}
-                severityCount={scanResultResponse?.result?.imageScan?.vulnerability?.summary?.severities}
+                severities={imageScanVulnerabilities?.summary?.severities}
                 handleCardClick={handleCardClick}
+                scanFailed={scanFailed}
             />
             {showSecurityModal && (
                 <SecurityModal
diff --git a/src/Shared/Components/Security/utils.tsx b/src/Shared/Components/Security/utils.tsx
@@ -1,6 +1,12 @@
 import { SECURITY_CONFIG } from './constants'
 import { ScanResultDTO, SeveritiesDTO } from './SecurityModal'
-import { CATEGORIES, SUB_CATEGORIES } from './SecurityModal/types'
+import {
+    CATEGORIES,
+    ImageScanLicenseListType,
+    ImageScanVulnerabilityListType,
+    StatusType,
+    SUB_CATEGORIES,
+} from './SecurityModal/types'
 import { CategoriesConfig, SecurityConfigType, ScanCategories, ScanSubCategories } from './types'
 
 export const getCVEUrlFromCVEName = (cveName: string): string =>
@@ -43,7 +49,10 @@ export const getCompiledSecurityThreats = (scanResult: ScanResultDTO): Partial<R
                 subCategory === SUB_CATEGORIES.MISCONFIGURATIONS
                     ? scanResult[category][subCategory]?.misConfSummary?.status
                     : scanResult[category][subCategory]?.summary?.severities
-            threatsArray.push(severity)
+
+            if (Object.keys(severity || {}).length) {
+                threatsArray.push(severity)
+            }
         })
     })
 
@@ -60,3 +69,50 @@ export const getCompiledSecurityThreats = (scanResult: ScanResultDTO): Partial<R
 
     return scanThreats
 }
+
+const getIsStatusProgressing = (status: StatusType['status']): boolean =>
+    status === 'Progressing' || status === 'Running'
+
+export const getStatusForScanList = (
+    scanList: ImageScanVulnerabilityListType[] | ImageScanLicenseListType[],
+): StatusType['status'] => {
+    const scanProgressing = scanList.some((scan) => getIsStatusProgressing(scan.status))
+    if (scanProgressing) {
+        return 'Progressing'
+    }
+    const scanFailed = scanList.some((scan) => scan.status === 'Failed')
+    if (scanFailed) {
+        return 'Failed'
+    }
+    return 'Completed'
+}
+
+export const getSecurityScanStatus = (scanResult: ScanResultDTO): StatusType['status'] => {
+    const imageScanList = scanResult.imageScan?.vulnerability?.list ?? []
+    const licenseScanList = scanResult.imageScan?.license?.list ?? []
+    const codeScanStatus = scanResult.codeScan?.status
+    const manifestScanStatus = scanResult.kubernetesManifest?.status
+
+    const imageScanStatus = getStatusForScanList(imageScanList)
+    const licenseScanStatus = getStatusForScanList(licenseScanList)
+
+    if (
+        imageScanStatus === 'Progressing' ||
+        licenseScanStatus === 'Progressing' ||
+        getIsStatusProgressing(codeScanStatus) ||
+        getIsStatusProgressing(manifestScanStatus)
+    ) {
+        return 'Progressing'
+    }
+
+    if (
+        imageScanStatus === 'Failed' ||
+        licenseScanStatus === 'Failed' ||
+        codeScanStatus === 'Failed' ||
+        manifestScanStatus === 'Failed'
+    ) {
+        return 'Failed'
+    }
+
+    return 'Completed'
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "1.4.8-beta-2",`
	`3`	`+ "version": "1.4.8-beta-3",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`