Merge pull request #2344 from devtron-labs/feat/scanning-breakdown

feat: bifurcate image cards in imageScan codeScan and manifestScan
devtron-labs · Jan 13, 2025 · 93ca68c · 93ca68c
2 parents 5c2e014 + 2cb5f5b
commit 93ca68c
Show file tree

Hide file tree

Showing 12 changed files with 208 additions and 337 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.4.0-patch-1",
+        "@devtron-labs/devtron-fe-common-lib": "1.4.3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

diff --git a/src/assets/img/ic-vulnerability-not-found.svg b/src/assets/img/ic-vulnerability-not-found.svg
diff --git a/src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx b/src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx
@@ -16,7 +16,14 @@
 
 import React, { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { getScanToolAndSeverityCount, SecurityModal } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    API_STATUS_CODES,
+    capitalizeFirstLetter,
+    getCompiledSecurityThreats,
+    getTotalSeverities,
+    SecurityModal,
+    SeveritiesDTO,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Question } from '../../../../assets/icons/ic-help-outline.svg'
 import { ReactComponent as Bug } from '../../../../assets/icons/ic-nav-bug.svg'
 import { ReactComponent as Secure } from '../../../../assets/icons/ic-secure.svg'
@@ -47,24 +54,20 @@ export const SecurityVulnerabilityCard = ({
         return <LoadingCard />
     }
 
-    // Here for devtron app scanned, isImageScanEnabled both should be true and imageScan shouldn't be null
-    // where as for helm app we only check scanned true since helm app can be scanned without imageScan
-    if (
-        scanResultResponse &&
-        (!scanResultResponse.result.scanned ||
-            (appId ? !scanResultResponse.result.isImageScanEnabled || !scanResultResponse.result.imageScan : false))
-    ) {
+    if (!scanResultResponse?.result?.scanned || scanResultError?.code === API_STATUS_CODES.UNAUTHORIZED) {
         return null
     }
 
-    const { severityCount, totalCount } = getScanToolAndSeverityCount(scanResultResponse?.result)
+    const scanThreats: Partial<Record<SeveritiesDTO, number>> = getCompiledSecurityThreats(scanResultResponse.result)
 
-    const imageScanVulnerabilities = scanResultResponse?.result.imageScan?.vulnerability
+    const threatCount = getTotalSeverities(scanThreats)
+
+    const imageScanVulnerabilities = scanResultResponse.result.imageScan?.vulnerability
     const imageScanList = imageScanVulnerabilities?.list ?? []
     const imageScanProgressing: boolean = imageScanList.some(
         (image) => image.status === 'Running' || image.status === 'Progressing',
     )
-    const imageScanFailed: boolean = imageScanList[0]?.status === 'Failed'
+    const imageScanFailed: boolean = imageScanList.every((image) => image.status === 'Failed')
 
     const handleOnCardClick = () => {
         if (!cardLoading && !scanResultLoading && !scanResultError && !showScanDetailsModal) {
@@ -74,7 +77,7 @@ export const SecurityVulnerabilityCard = ({
     }
 
     const getIcon = () => {
-        if (scanResultError || imageScanFailed || imageScanProgressing || totalCount) {
+        if (scanResultError || imageScanFailed || imageScanProgressing || threatCount) {
             return <Bug className="scy-7" />
         }
         return <Secure />
@@ -84,48 +87,39 @@ export const SecurityVulnerabilityCard = ({
         if (scanResultError) {
             return '--'
         }
-        if (imageScanFailed) {
-            return <div className="dc__info-title lh-20 f-failed">Scan failed</div>
+        if (threatCount) {
+            return (
+                <div className="fs-13 fw-6 lh-20 cy-7" data-testid="security-card-total-count">
+                    Potential threat
+                </div>
+            )
         }
         if (imageScanProgressing) {
             return <div className="f-progressing dc__loading-dots">Scanning</div>
         }
-        if (!totalCount) {
-            return <div className="dc__info-title lh-20 ">You&apos;re secure!</div>
+        if (imageScanFailed) {
+            return <div className="dc__info-title lh-20 f-failed">Scan failed</div>
         }
-        return (
-            <div className="fs-13 fw-6 lh-20 f-waiting" data-testid="security-card-total-count">
-                {totalCount} Vulnerabilities
-            </div>
-        )
+        return <div className="dc__info-title lh-20 ">You&apos;re secure!</div>
     }
 
     const getSubtitle = () => {
         if (scanResultError) {
             return 'Failed to fetch'
         }
+        if (threatCount) {
+            return Object.entries(scanThreats)
+                .filter(([, value]) => !!value)
+                .map(([key, value]) => `${value} ${capitalizeFirstLetter(key)}`)
+                .join(', ')
+        }
         if (imageScanProgressing) {
             return 'Security scan in progress'
         }
         if (imageScanFailed) {
             return 'Security scan failed'
         }
-        if (!totalCount) {
-            return 'No Vulnerabilities found'
-        }
-
-        const criticalities = [
-            { label: 'Critical', value: severityCount.critical },
-            { label: 'High', value: severityCount.high },
-            { label: 'Medium', value: severityCount.medium },
-            { label: 'Low', value: severityCount.low },
-            { label: 'Unknown', value: severityCount.unknown },
-        ]
-
-        return criticalities
-            .filter((criticality) => !!criticality.value)
-            .map((criticality) => `${criticality.value} ${criticality.label}`)
-            .join(', ')
+        return 'No Vulnerabilities found'
     }
 
     const getActionButton = () => {
@@ -196,7 +190,7 @@ export const SecurityVulnerabilityCard = ({
                     Sidebar={SecurityModalSidebar}
                     isLoading={scanResultLoading || cardLoading}
                     error={scanResultError}
-                    responseData={scanResultResponse?.result}
+                    responseData={scanResultResponse.result}
                     hidePolicy
                 />
             )}