feat: add support for scan-result api in security scans tab

Author: arunjaindev

src/components/app/details/appDetails/AppSecurity.tsx

@@ -2,7 +2,10 @@ import {
     ApiResponseResultType,
     AppDetailsPayload,
     getExecutionDetails,
+    getSeverityCountFromSummary,
+    getTotalSeverityCount,
     ResponseType,
+    SeverityCount,
     useAsync,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { importComponentFromFELibrary } from '@Components/common'
@@ -22,25 +25,36 @@ export const useGetAppSecurityDetails = ({
     appId,
     envId,
     installedAppId,
+    imageScanDeployInfoId,
     isSecurityScanV2Enabled,
 }: UseGetAppSecurityDetailsProps): UseGetAppSecurityDetailsReturnType => {
     const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
         () => getSecurityScan({ appId, envId, installedAppId }),
         [appId, envId, installedAppId],
-        getSecurityScan && isSecurityScanV2Enabled,
+        getSecurityScan && isSecurityScanV2Enabled && (!!appId || !!installedAppId),
     )
 
     const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
-        () => getExecutionDetails({ appId, envId }),
-        [appId, envId],
-        !isSecurityScanV2Enabled,
+        () => getExecutionDetails({ appId, envId, imageScanDeployInfoId }),
+        [appId, envId, imageScanDeployInfoId],
+        !isSecurityScanV2Enabled && !!appId,
     )
 
+    const scanDetailsResponse = isSecurityScanV2Enabled ? scanResultResponse : executionDetailsResponse
+
+    const severities = isSecurityScanV2Enabled
+        ? scanResultResponse?.result.imageScan.vulnerability?.summary.severities
+        : executionDetailsResponse?.result.imageScan.vulnerability?.summary.severities
+    const severityCount: SeverityCount = getSeverityCountFromSummary(severities)
+
+    const totalCount = getTotalSeverityCount(severityCount)
+
     return {
         scanDetailsLoading: scanResultLoading || executionDetailsLoading,
-        scanResultResponse,
-        executionDetailsResponse,
+        scanDetailsResponse,
         scanDetailsError: scanResultError || executionDetailsError,
         reloadScanDetails: isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails,
+        severityCount,
+        totalCount,
     }
 }

src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx

@@ -16,7 +16,12 @@
 
 import React, { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { getSeverityCountFromSummary, getTotalSeverityCount, SecurityModal, SeverityCount } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    getSeverityCountFromSummary,
+    getTotalSeverityCount,
+    SecurityModal,
+    SeverityCount,
+} 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'
@@ -40,11 +45,13 @@ export const SecurityVulnerabilityCard = ({
 
     const handleModalClose = () => setShowScanDetailsModal(false)
 
-    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails } =
-        useGetAppSecurityDetails({ appId, envId, installedAppId, isSecurityScanV2Enabled })
+    const { scanDetailsLoading, scanDetailsResponse, scanDetailsError, reloadScanDetails, severityCount } =
+        useGetAppSecurityDetails({ appId: +appId, envId: +envId, installedAppId, isSecurityScanV2Enabled })
 
-    const imageScanFailed = scanResultResponse?.result.codeScan.status === 'Failed'
-    const imageScanProgressing = scanResultResponse?.result.codeScan.status === 'Progressing'
+    // Since we get status in v2 Api only
+    const imageScanFailed: boolean = isSecurityScanV2Enabled && scanDetailsResponse?.result.codeScan.status === 'Failed'
+    const imageScanProgressing: boolean =
+        isSecurityScanV2Enabled && scanDetailsResponse?.result.codeScan.status === 'Progressing'
 
     const handleOnCardClick = () => {
         if (!cardLoading && !scanDetailsError && !showScanDetailsModal) {
@@ -53,12 +60,6 @@ export const SecurityVulnerabilityCard = ({
         }
     }
 
-    const scanResultSeverities = scanResultResponse?.result.imageScan.vulnerability?.summary.severities 
-    const executionDetailsSeverities = executionDetailsResponse?.result.imageScan.vulnerability?.summary.severities 
-    const severityCount: SeverityCount = isSecurityScanV2Enabled
-        ? getSeverityCountFromSummary(scanResultSeverities)
-        : getSeverityCountFromSummary(executionDetailsSeverities)
-
     const totalCount = getTotalSeverityCount(severityCount)
 
     const getIcon = () => {
@@ -142,10 +143,7 @@ export const SecurityVulnerabilityCard = ({
         return <LoadingCard />
     }
 
-    if (
-        (scanResultResponse && !scanResultResponse.result.scanned) ||
-        (executionDetailsResponse && !executionDetailsResponse.result.scanned)
-    ) {
+    if (scanDetailsResponse && !scanDetailsResponse.result.scanned) {
         return null
     }
 
@@ -197,7 +195,7 @@ export const SecurityVulnerabilityCard = ({
                     isHelmApp={!!installedAppId}
                     isLoading={scanDetailsLoading}
                     error={scanDetailsError}
-                    responseData={isSecurityScanV2Enabled ? scanResultResponse?.result : executionDetailsResponse?.result}
+                    responseData={scanDetailsResponse?.result}
                 />
             )}
         </button>

src/components/app/details/appDetails/appDetails.type.ts

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import { ACTION_STATE, ApiResponseResultType, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ACTION_STATE,
+    ApiResponseResultType,
+    ResponseType,
+    ServerErrors,
+    SeverityCount,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { AggregatedNodes, OptionType } from '../../types'
 import { SyncErrorType, AppDetails } from '../../../v2/appDetails/appDetails.type'
 
@@ -259,15 +265,17 @@ export interface LastUpdatedCardType {
 }
 
 export interface UseGetAppSecurityDetailsProps {
-    appId: string
-    envId: string
-    installedAppId: number
+    appId: number
+    envId: number
+    installedAppId?: number
+    imageScanDeployInfoId?: number
     isSecurityScanV2Enabled: boolean
 }
 export interface UseGetAppSecurityDetailsReturnType {
     scanDetailsLoading: boolean
-    scanResultResponse: ResponseType<ApiResponseResultType>
-    executionDetailsResponse: ResponseType<ApiResponseResultType>
-    scanDetailsError: any
+    scanDetailsResponse: ResponseType<ApiResponseResultType>
+    scanDetailsError: ServerErrors
     reloadScanDetails: () => void
+    severityCount: SeverityCount
+    totalCount: number
 }

src/components/app/details/cIDetails/CIDetails.tsx

@@ -680,9 +680,9 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: Secu
 
     const computedAppId = appId ?? appIdFromParent
 
-    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails } =
+    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails, severityCount, totalCount } =
         useGetCISecurityDetails({
-            appId: computedAppId,
+            appId: +computedAppId,
             artifactId,
             isSecurityScanV2Enabled,
         })
@@ -727,14 +727,7 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: Secu
         return <ImageNotScannedView />
     }
 
-    const scanResultSeverities = scanResultResponse?.result.imageScan.vulnerability?.summary.severities // For scan-result Api
-    const severityCount: SeverityCount = isSecurityScanV2Enabled
-        ? getSeverityCountFromSummary(scanResultSeverities)
-        : executionDetailsResponse?.result.severityCount ?? { critical: 0, high: 0, medium: 0, low: 0, unknown: 0 }
-
-    const totalSeverities = getTotalSeverityCount(severityCount)
-
-    if (artifactId && !totalSeverities) {
+    if (artifactId && !totalCount) {
         return (
             <NoVulnerabilityViewWithTool
                 scanToolId={isSecurityScanV2Enabled ? SCAN_TOOL_ID_TRIVY : executionDetailsResponse.result?.scanToolId} // Since v2 scan is via trivy only

src/components/app/details/cIDetails/CISecurity.utils.tsx

@@ -1,4 +1,12 @@
-import { ApiResponseResultType, AppDetailsPayload, ResponseType, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ApiResponseResultType,
+    AppDetailsPayload,
+    getSeverityCountFromSummary,
+    getTotalSeverityCount,
+    ResponseType,
+    SeverityCount,
+    useAsync,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { getLastExecutionByAppArtifactId } from '@Services/service'
 import { importComponentFromFELibrary } from '@Components/common'
 import { UseGetCISecurityDetailsProps, UseGetCISecurityDetailsReturnType } from './types'
@@ -30,11 +38,19 @@ export const useGetCISecurityDetails = ({
         !isSecurityScanV2Enabled,
     )
 
+    const severityCount: SeverityCount = isSecurityScanV2Enabled
+        ? getSeverityCountFromSummary(scanResultResponse?.result.imageScan.vulnerability?.summary.severities)
+        : executionDetailsResponse?.result.severityCount ?? { critical: 0, high: 0, medium: 0, low: 0, unknown: 0 }
+
+    const totalCount = getTotalSeverityCount(severityCount)
+
     return {
         scanDetailsLoading: scanResultLoading || executionDetailsLoading,
         scanResultResponse,
         executionDetailsResponse,
         scanDetailsError: scanResultError || executionDetailsError,
         reloadScanDetails: isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails,
+        severityCount,
+        totalCount,
     }
 }

src/components/app/details/cIDetails/types.tsx

@@ -21,6 +21,7 @@ import {
     useScrollable,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { getLastExecutionByAppArtifactId } from '@Services/service'
+import { UseGetAppSecurityDetailsProps, UseGetAppSecurityDetailsReturnType } from '../appDetails/appDetails.type'
 
 export interface CIPipeline {
     name: string
@@ -70,16 +71,16 @@ export interface SecurityTabType {
     appIdFromParent?: string
 }
 
-export interface UseGetCISecurityDetailsProps {
-    appId: string
+export interface UseGetCISecurityDetailsProps
+    extends Pick<UseGetAppSecurityDetailsProps, 'appId' | 'isSecurityScanV2Enabled'> {
     artifactId: number
-    isSecurityScanV2Enabled: boolean
 }
 
-export interface UseGetCISecurityDetailsReturnType {
-    scanDetailsLoading: boolean
+export interface UseGetCISecurityDetailsReturnType
+    extends Pick<
+        UseGetAppSecurityDetailsReturnType,
+        'scanDetailsLoading' | 'scanDetailsError' | 'reloadScanDetails' | 'severityCount' | 'totalCount'
+    > {
     scanResultResponse: ResponseType<ApiResponseResultType>
     executionDetailsResponse: Awaited<ReturnType<typeof getLastExecutionByAppArtifactId>>
-    scanDetailsError: any
-    reloadScanDetails: () => void
 }

src/components/app/details/triggerView/cdMaterial.tsx

@@ -1581,7 +1581,6 @@ const CDMaterial = ({
                                 changesCard={renderGitMaterialInfo(mat)}
                                 isScanned={mat.scanned}
                                 isScanEnabled={mat.scanEnabled}
-                                isScanV2Enabled={isScanV2Enabled}
                                 SecurityModalSidebar={SecurityModalSidebar}
                                 getSecurityScan={getSecurityScan}
                             />

src/components/security/SecurityScansTab/SecurityScansTab.tsx

@@ -20,10 +20,10 @@ import {
     abortPreviousRequests,
     getIsRequestAborted,
     SecurityModal,
-    getExecutionDetails,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useMemo, useRef, useState } from 'react'
 import { getSeverityWithCount, importComponentFromFELibrary } from '@Components/common'
+import { useGetAppSecurityDetails } from '@Components/app/details/appDetails/AppSecurity'
 import { ReactComponent as ICDevtron } from '../../../assets/icons/ic-devtron-app.svg'
 import { getSecurityScanList, getVulnerabilityFilterData } from '../security.service'
 import {
@@ -66,16 +66,14 @@ export const SecurityScansTab = () => {
         updateSearchParams,
     } = urlFilters
 
-    const [executionDetailsLoading, executionDetailsResponse, executionsDetailsError] = useAsync(
-        () =>
-            getExecutionDetails({
-                appId: scanDetails.uniqueId.appId,
-                envId: scanDetails.uniqueId.envId,
-                imageScanDeployInfoId: scanDetails.uniqueId.imageScanDeployInfoId,
-            }),
-        [scanDetails],
-        !!scanDetails.uniqueId.appId,
-    )
+    const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && SecurityModalSidebar
+
+    const { scanDetailsLoading, scanDetailsResponse, scanDetailsError } = useGetAppSecurityDetails({
+        appId: scanDetails.uniqueId.appId,
+        envId: scanDetails.uniqueId.envId,
+        imageScanDeployInfoId: scanDetails.uniqueId.imageScanDeployInfoId,
+        isSecurityScanV2Enabled,
+    })
 
     const payload: ScanListPayloadType = {
         offset,
@@ -362,11 +360,11 @@ export const SecurityScansTab = () => {
                 <SecurityModal
                     handleModalClose={handleCloseScanDetailsModal}
                     Sidebar={SecurityModalSidebar}
-                    isSecurityScanV2Enabled={false}
+                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
                     isHelmApp={false}
-                    isLoading={executionDetailsLoading}
-                    error={executionsDetailsError}
-                    responseData={executionDetailsResponse?.result}
+                    isLoading={scanDetailsLoading}
+                    error={scanDetailsError}
+                    responseData={scanDetailsResponse?.result}
                 />
             )
         }