feat: integrate scanning for v1 and v2 APIs

.env

@@ -44,9 +44,7 @@ SIDEBAR_DT_LOGO=
 ENABLE_EXTERNAL_ARGO_CD=false
 API_BATCH_SIZE=20
 SERVICE_WORKER_TIMEOUT=3
-ENABLE_RESOURCE_SCAN=false
 FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE=false
-ENABLE_RESOURCE_SCAN_V2=false
 HIDE_RELEASES=true
 HIDE_RESOURCE_WATCHER=true
 ORGANIZATION_NAME=

.eslintignore

@@ -104,7 +104,6 @@ src/components/app/details/appDetails/AppStatusCard.tsx
 src/components/app/details/appDetails/DeploymentStatusDetailModal.tsx
 src/components/app/details/appDetails/GraphsModal.tsx
 src/components/app/details/appDetails/IssuesCard.tsx
-src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx
 src/components/app/details/appDetails/SourceInfo.tsx
 src/components/app/details/appDetails/__tests__/GenericInfo.test.tsx
 src/components/app/details/appDetails/index.tsx

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.3.5",
+        "@devtron-labs/devtron-fe-common-lib": "1.3.5-beta-2",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx

@@ -22,9 +22,9 @@ import {
     ModuleNameMap,
     SecurityModal,
     ResponseType,
-    ApiResponseResultType,
     GetResourceScanDetailsPayloadType,
     useAsync,
+    ScanResultDTO,
 } from '@devtron-labs/devtron-fe-common-lib'
 import DeleteResourcePopup from './DeleteResourcePopup'
 import { importComponentFromFELibrary, getShowResourceScanModal } from '../../common'
@@ -39,8 +39,6 @@ import { ReactComponent as MenuDots } from '../../../assets/icons/appstatus/ic-m
 import { NodeType } from '../../v2/appDetails/appDetails.type'
 
 const OpenSecurityModalButton = importComponentFromFELibrary('OpenSecurityModalButton', null, 'function')
-const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', false, 'function')
-const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 const getResourceScanDetails: ({
     name,
     namespace,
@@ -52,7 +50,7 @@ const getResourceScanDetails: ({
     appType,
     deploymentType,
     isAppDetailView,
-}: GetResourceScanDetailsPayloadType) => Promise<ResponseType<ApiResponseResultType>> = importComponentFromFELibrary(
+}: GetResourceScanDetailsPayloadType) => Promise<ResponseType<ScanResultDTO>> = importComponentFromFELibrary(
     'getResourceScanDetails',
     null,
     'function',
@@ -69,8 +67,6 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
 }) => {
     const { installedModuleMap } = useMainContext()
 
-    const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && isFELibAvailable
-
     const [showDeleteDialog, setShowDeleteDialog] = useState(false)
     const [showVulnerabilityModal, setShowVulnerabilityModal] = useState(false)
 
@@ -85,7 +81,7 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
                 clusterId: +clusterId,
             }),
         [],
-        showVulnerabilityModal && getResourceScanDetails && isSecurityScanV2Enabled,
+        showVulnerabilityModal && !!getResourceScanDetails,
     )
 
     const toggleDeleteDialog = () => {
@@ -100,11 +96,10 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
         setShowVulnerabilityModal(false)
     }
 
-    const showResourceScanModal =
-        getShowResourceScanModal(
-            selectedResource?.gvk?.Kind as NodeType,
-            installedModuleMap.current?.[ModuleNameMap.SECURITY_TRIVY],
-        ) && window._env_.ENABLE_RESOURCE_SCAN_V2
+    const showResourceScanModal = getShowResourceScanModal(
+        selectedResource?.gvk?.Kind as NodeType,
+        installedModuleMap.current?.[ModuleNameMap.SECURITY_TRIVY],
+    )
 
     return (
         <>
@@ -193,12 +188,9 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
                 />
             )}
 
-            {showVulnerabilityModal && !!isFELibAvailable && (
+            {showVulnerabilityModal && !!getResourceScanDetails && (
                 <SecurityModal
-                    isResourceScan
                     handleModalClose={handleCloseVulnerabilityModal}
-                    Sidebar={SecurityModalSidebar}
-                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
                     isLoading={resourceScanLoading}
                     error={resourceScanError}
                     responseData={resourceScanResponse?.result}

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

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

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

@@ -16,10 +16,7 @@
 
 import React, { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import {
-    getTotalSeverityCount,
-    SecurityModal,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { getTotalSeverityCount, SecurityModal } 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'
@@ -28,32 +25,28 @@ import LoadingCard from './LoadingCard'
 import { importComponentFromFELibrary } from '../../../common'
 import { useGetAppSecurityDetails } from './AppSecurity'
 
-const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 
 export const SecurityVulnerabilityCard = ({
     cardLoading,
     appId,
     envId,
     installedAppId,
-    artifactId,
-    isExternalCI,
 }: SecurityVulnerabilityCardType) => {
     const [showScanDetailsModal, setShowScanDetailsModal] = useState<boolean>(false)
-    const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && !!isFELibAvailable
 
     const handleModalClose = () => setShowScanDetailsModal(false)
 
-    const { scanDetailsLoading, scanDetailsResponse, scanDetailsError, reloadScanDetails, severityCount } =
-        useGetAppSecurityDetails({ appId: +appId, envId: +envId, installedAppId, artifactId, isSecurityScanV2Enabled })
+    const { scanResultLoading, scanResultResponse, scanResultError, reloadScanResult, severityCount } =
+        useGetAppSecurityDetails({ appId: +appId, envId: +envId, installedAppId })
 
-    // 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 imageScanProgressing: boolean = scanResultResponse?.result.imageScan?.vulnerability?.list.some(
+        (image) => image.status === 'Running' || image.status === 'Progressing',
+    )
+    const imageScanFailed: boolean = scanResultResponse?.result.imageScan?.vulnerability?.list[0].status === 'Failed'
 
     const handleOnCardClick = () => {
-        if (!cardLoading && !scanDetailsError && !showScanDetailsModal) {
+        if (!cardLoading && !scanResultLoading && !scanResultError && !showScanDetailsModal) {
             // hack: added timeout to prevent click outside
             setTimeout(() => setShowScanDetailsModal(true), 100)
         }
@@ -62,14 +55,14 @@ export const SecurityVulnerabilityCard = ({
     const totalCount = getTotalSeverityCount(severityCount)
 
     const getIcon = () => {
-        if (scanDetailsError || imageScanFailed || imageScanProgressing || totalCount) {
+        if (scanResultError || imageScanFailed || imageScanProgressing || totalCount) {
             return <Bug className="scy-7" />
         }
         return <Secure />
     }
 
     const getTitle = () => {
-        if (scanDetailsError) {
+        if (scanResultError) {
             return '--'
         }
         if (imageScanFailed) {
@@ -79,7 +72,7 @@ export const SecurityVulnerabilityCard = ({
             return <div className="f-progressing dc__loading-dots">Scanning</div>
         }
         if (!totalCount) {
-            return <div className="dc__info-title lh-20 ">You're secure!</div>
+            return <div className="dc__info-title lh-20 ">You&apos;re secure!</div>
         }
         return (
             <div className="fs-13 fw-6 lh-20 f-waiting" data-testid="security-card-total-count">
@@ -89,15 +82,15 @@ export const SecurityVulnerabilityCard = ({
     }
 
     const getSubtitle = () => {
-        if (scanDetailsError) {
+        if (scanResultError) {
             return 'Failed to fetch'
         }
-        if (imageScanFailed) {
-            return 'Security scan failed'
-        }
         if (imageScanProgressing) {
             return 'Security scan in progress'
         }
+        if (imageScanFailed) {
+            return 'Security scan failed'
+        }
         if (!totalCount) {
             return 'No Vulnerabilities found'
         }
@@ -117,12 +110,13 @@ export const SecurityVulnerabilityCard = ({
     }
 
     const getActionButton = () => {
-        if (scanDetailsError) {
+        if (scanResultError) {
             return (
                 <button
                     className="app-details-info-card__bottom-container__details fs-12 fw-6 dc__unset-button-styles"
-                    onClick={reloadScanDetails}
+                    onClick={reloadScanResult}
                     data-testid="security-card-handle-refetch-button"
+                    type="button"
                 >
                     Refetch
                 </button>
@@ -138,19 +132,19 @@ export const SecurityVulnerabilityCard = ({
         )
     }
 
-    if (cardLoading || scanDetailsLoading) {
+    if (cardLoading || scanResultLoading) {
         return <LoadingCard />
     }
 
-    if (scanDetailsResponse && !scanDetailsResponse.result.scanned) {
+    if (scanResultResponse && !scanResultResponse.result.scanned) {
         return null
     }
 
     return (
         <button type="button" className="dc__unset-button-styles" onClick={handleOnCardClick}>
             <div
                 data-testid="security-vulnerability-card"
-                className={`app-details-info-card flex left bcn-0 br-8 mr-12 lh-20 w-200 ${cardLoading || scanDetailsError ? '' : 'pointer'}`}
+                className={`app-details-info-card flex left bcn-0 br-8 mr-12 lh-20 w-200 ${cardLoading || scanResultError ? '' : 'pointer'}`}
             >
                 <div className="app-details-info-card__top-container flex">
                     <div className="app-details-info-card__top-container__content">
@@ -188,13 +182,10 @@ export const SecurityVulnerabilityCard = ({
             {showScanDetailsModal && (
                 <SecurityModal
                     handleModalClose={handleModalClose}
-                    isExternalCI={isExternalCI}
                     Sidebar={SecurityModalSidebar}
-                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
-                    isHelmApp={!!installedAppId}
-                    isLoading={scanDetailsLoading}
-                    error={scanDetailsError}
-                    responseData={scanDetailsResponse?.result}
+                    isLoading={scanResultLoading || cardLoading}
+                    error={scanResultError}
+                    responseData={scanResultResponse?.result}
                     hidePolicy
                 />
             )}

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

@@ -158,15 +158,18 @@ export const SourceInfo = ({
                         </div>
                     </Tooltip>
                 )}
-                {appDetails?.resourceTree && !isIsolatedEnv && window._env_.FEATURE_CONFIG_DRIFT_ENABLE && ConfigSyncStatusButton && (
-                    <div className="pl-8">
-                        <ConfigSyncStatusButton
-                            areConfigurationsDrifted={appDetails.resourceTree.hasDrift}
-                            appId={appDetails.appId}
-                            envId={envId}
-                        />
-                    </div>
-                )}
+                {appDetails?.resourceTree &&
+                    !isIsolatedEnv &&
+                    window._env_.FEATURE_CONFIG_DRIFT_ENABLE &&
+                    ConfigSyncStatusButton && (
+                        <div className="pl-8">
+                            <ConfigSyncStatusButton
+                                areConfigurationsDrifted={appDetails.resourceTree.hasDrift}
+                                appId={appDetails.appId}
+                                envId={envId}
+                            />
+                        </div>
+                    )}
                 {isdeploymentAppDeleting && (
                     <div data-testid="deleteing-argocd-pipeline" className="flex left">
                         <Trash className="icon-dim-16 mr-8 ml-12" />
@@ -364,8 +367,6 @@ export const SourceInfo = ({
                                   cardLoading={cardLoading}
                                   appId={params.appId}
                                   envId={params.envId}
-                                  artifactId={ciArtifactId}
-                                  isExternalCI={isExternalCI}
                               />
                           )}
                           <div className="flex right ml-auto">