feat: add support for v2 api in vulnerabilities.tsx

Author: Arun Jain

src/Assets/Icon/ic-error.svg

@@ -4,7 +4,7 @@
 
 import dayjs from 'dayjs'
 import { Progressing } from '@Common/Progressing'
-import { ReactComponent as ICError } from '@Icons/ic-error.svg'
+import { ReactComponent as ICError } from '@Icons/ic-error-cross.svg'
 import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
 import { ZERO_TIME_STRING, DATE_TIME_FORMATS } from '../../../../../Common/Constants'
 import {
@@ -118,7 +118,7 @@ const getImageScanProgressingState = (status: StatusType['status']) => {
         case 'Completed':
             return <ICSuccess className="icon-dim-16" />
         case 'Failed':
-            return <ICError className="icon-dim-16" />
+            return <ICError className="icon-dim-16 ic-error-cross-red" />
         case 'Progressing':
             return (
                 <Progressing

src/Shared/Components/Security/SecurityModal/config/ImageScan.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import { SCAN_TOOL_ID_TRIVY } from '@Shared/constants'
+import { SCAN_TOOL_ID_CLAIR, SCAN_TOOL_ID_TRIVY } from '@Shared/constants'
 import PageNotFound from '@Images/ic-page-not-found.svg'
 import { ReactComponent as MechanicalOperation } from '@Icons/ic-mechanical-operation.svg'
 import { CATEGORIES, SUB_CATEGORIES, SeveritiesDTO, SortOrderEnum, EmptyStateType, StatusType } from './types'
@@ -88,4 +88,5 @@ export const SCAN_IN_PROGRESS_EMPTY_STATE: EmptyStateType = {
 
 export const MAP_SCAN_TOOL_NAME_TO_SCAN_TOOL_ID: Record<StatusType['scanToolName'], number> = {
     TRIVY: SCAN_TOOL_ID_TRIVY,
+    CLAIR: SCAN_TOOL_ID_CLAIR,
 }

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

@@ -19,7 +19,7 @@ export const getExecutionDetails = async (
     executionDetailPayload: SecurityModalPropsType['executionDetailsPayload'],
 ): Promise<ResponseType<ApiResponseResultType>> => {
     // To replace url with constants in common
-    const url = getUrlWithSearchParams('security/scan/executionDetail', executionDetailPayload)
+    const url = getUrlWithSearchParams(ROUTES.SECURITY_SCAN_EXECUTION_DETAILS, executionDetailPayload)
     const response = await get(url)
     return { ...response, result: parseExecutionDetailResponse(response.result) }
 }

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

@@ -119,7 +119,7 @@ export interface InfoCardPropsType {
 export interface StatusType {
     status: 'Completed' | 'Running' | 'Failed' | 'Progressing'
     StartedOn: string
-    scanToolName: 'TRIVY'
+    scanToolName: 'TRIVY' | 'CLAIR'
 }
 
 export type DetailViewDataType = {

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

@@ -8,6 +8,7 @@ import { Severity } from '@Shared/types'
 import { VulnerabilityType } from '@Common/Types'
 import { ZERO_TIME_STRING } from '@Common/Constants'
 import { ReactComponent as NoVulnerability } from '@Icons/ic-vulnerability-not-found.svg'
+import { SCAN_TOOL_ID_TRIVY } from '@Shared/constants'
 import {
     ApiResponseResultType,
     SeveritiesDTO,
@@ -136,12 +137,12 @@ export const parseExecutionDetailResponse = (scanResult): ApiResponseResultType
                         fixedInVersion: vulnerability?.fixedVersion,
                         severity: getSeverityFromVulnerabilitySeverity(vulnerability?.severity),
                     })),
-                    scanToolName: 'TRIVY' /* TODO: need to create a mapping */, // this can be acc to scan tool id
+                    scanToolName: scanResult.scanToolId === SCAN_TOOL_ID_TRIVY ? 'TRIVY' : 'CLAIR',
                     StartedOn:
                         scanResult.executionTime && scanResult.executionTime !== ZERO_TIME_STRING
                             ? scanResult.executionTime
                             : '--',
-                    status: 'Completed', // TODO: get status from executionDetailsApi
+                    status: scanResult.scanned ? 'Completed' : 'Progressing',
                 },
             ],
         },

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

@@ -15,7 +15,8 @@
  */
 
 import { useEffect } from 'react'
-import { EMPTY_STATE_STATUS } from '@Shared/constants'
+import { EMPTY_STATE_STATUS, SCAN_TOOL_ID_TRIVY } from '@Shared/constants'
+import { SeverityCount } from '@Shared/types'
 import { Progressing, useAsync } from '../../../../Common'
 import { ScannedByToolModal } from '../../ScannedByToolModal'
 import { getLastExecutionByArtifactAppEnv } from './service'
@@ -60,7 +61,11 @@ const Vulnerabilities = ({
         }
     }, [vulnerabilitiesResponse, scanResultResponse])
 
-    if (!isScanned) {
+    if (
+        !isScanned ||
+        (vulnerabilitiesResponse && !vulnerabilitiesResponse.result.scanned) ||
+        (scanResultResponse && !scanResultResponse?.result.scanned)
+    ) {
         return (
             <div className="security-tab-empty">
                 <p className="security-tab-empty__title">Image was not scanned</p>
@@ -99,16 +104,33 @@ const Vulnerabilities = ({
         )
     }
 
-    if (vulnerabilitiesResponse.result.vulnerabilities.length === 0) {
+    const imageScanSeverities = scanResultResponse?.result.imageScan.vulnerability?.summary.severities
+    const severityCount: SeverityCount = isScanV2Enabled
+        ? {
+              critical: imageScanSeverities?.CRITICAL || 0,
+              high: imageScanSeverities?.HIGH || 0,
+              medium: imageScanSeverities?.MEDIUM || 0,
+              low: imageScanSeverities?.LOW || 0,
+              unknown: imageScanSeverities?.UNKNOWN || 0,
+          }
+        : vulnerabilitiesResponse?.result.severityCount
+
+    const totalCount =
+        severityCount.critical + severityCount.high + severityCount.low + severityCount.medium + severityCount.unknown
+
+    if (!totalCount) {
         return (
             <div className="security-tab-empty">
                 <p className="security-tab-empty__title">
                     {EMPTY_STATE_STATUS.CI_DEATILS_NO_VULNERABILITY_FOUND.TITLE}
                 </p>
                 <p>{EMPTY_STATE_STATUS.CI_DEATILS_NO_VULNERABILITY_FOUND.SUBTITLE}</p>
-                <p className="security-tab-empty__subtitle">{vulnerabilitiesResponse.result.lastExecution}</p>
+                <p className="security-tab-empty__subtitle">
+                    {vulnerabilitiesResponse?.result.lastExecution ??
+                        scanResultResponse?.result.imageScan.vulnerability.list[0].StartedOn}
+                </p>
                 <p className="pt-8 pb-8 pl-16 pr-16 flexbox dc__align-items-center">
-                    <ScannedByToolModal scanToolId={vulnerabilitiesResponse.result.scanToolId} />
+                    <ScannedByToolModal scanToolId={vulnerabilitiesResponse?.result.scanToolId ?? SCAN_TOOL_ID_TRIVY} />
                 </p>
             </div>
         )
@@ -117,8 +139,8 @@ const Vulnerabilities = ({
     return (
         <div className="p-12">
             <SecuritySummaryCard
-                severityCount={vulnerabilitiesResponse.result.severityCount}
-                scanToolId={vulnerabilitiesResponse.result.scanToolId}
+                severityCount={severityCount}
+                scanToolId={vulnerabilitiesResponse?.result.scanToolId ?? SCAN_TOOL_ID_TRIVY}
                 {...(isScanV2Enabled
                     ? { appDetailsPayload: { appId: applicationId, envId: environmentId, artifactId } }
                     : { executionDetailsPayload: { appId: applicationId, envId: environmentId, artifactId } })}

src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx

@@ -34,6 +34,11 @@ export const STAGE_TYPE = {
 
 export const SCAN_TOOL_ID_TRIVY = 3
 
+/**
+ * @description This is only used to show mapping for clair, scan tool id for clair can be either 1 or 2
+ *   */
+export const SCAN_TOOL_ID_CLAIR = 2
+
 export const IMAGE_SCAN_TOOL = {
     Clair: 'Clair',
     Trivy: 'Trivy',