Merge pull request #485 from devtron-labs/fix/inegrate-scans

fix: integrate scans

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.3.9-beta-2",
+    "version": "1.3.9-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -17,9 +17,9 @@ import { ReactComponent as ICBack } from '@Icons/ic-caret-left-small.svg'
 import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components/Button'
 import { ComponentSizeType } from '@Shared/constants'
 import { Table, InfoCard } from './components'
-import { DEFAULT_SECURITY_MODAL_STATE } from './constants'
+import { getDefaultSecurityModalState } from './constants'
 import { getTableData, getInfoCardData } from './config'
-import { SecurityModalPropsType, SecurityModalStateType, DetailViewDataType } from './types'
+import { SecurityModalPropsType, SecurityModalStateType, DetailViewDataType, SidebarPropsType } from './types'
 import { getEmptyStateValues } from './config/EmptyState'
 import './styles.scss'
 
@@ -41,10 +41,17 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     responseData,
     hidePolicy = false,
 }) => {
-    const [state, setState] = useState<SecurityModalStateType>(DEFAULT_SECURITY_MODAL_STATE)
-
     const data = responseData ?? null
 
+    const categoriesConfig: SidebarPropsType['categoriesConfig'] = {
+        imageScan: !!data?.imageScan,
+        imageScanLicenseRisks: !!data?.imageScan?.license,
+        codeScan: !!data?.codeScan,
+        kubernetesManifest: !!data?.kubernetesManifest,
+    }
+
+    const [state, setState] = useState<SecurityModalStateType>(getDefaultSecurityModalState(categoriesConfig))
+
     const setDetailViewData = (detailViewData: DetailViewDataType) => {
         setState((prevState) => ({
             ...prevState,
@@ -152,18 +159,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
             /* NOTE: the height is restricted to (viewport - header) height since we need overflow-scroll */
             <div className="flexbox" style={{ height: 'calc(100vh - 49px)' }}>
                 {/* NOTE: only show sidebar in AppDetails */}
-                {Sidebar && (
-                    <Sidebar
-                        modalState={state}
-                        setModalState={setState}
-                        categoriesConfig={{
-                            imageScan: !!data?.imageScan,
-                            imageScanLicenseRisks: !!data?.imageScan?.license,
-                            codeScan: !!data?.codeScan,
-                            kubernetesManifest: !!data?.kubernetesManifest,
-                        }}
-                    />
-                )}
+                {Sidebar && <Sidebar modalState={state} setModalState={setState} categoriesConfig={categoriesConfig} />}
                 <div className="dc__border-right-n1 h-100" />
                 <div className="dc__overflow-scroll flex-grow-1" style={{ width: '744px' }}>
                     {selectedDetailViewData && renderDetailViewSubHeader()}

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

@@ -5,14 +5,50 @@
 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'
+import {
+    CATEGORIES,
+    SUB_CATEGORIES,
+    SeveritiesDTO,
+    SortOrderEnum,
+    EmptyStateType,
+    StatusType,
+    SidebarPropsType,
+    SecurityModalStateType,
+} from './types'
 
-export const DEFAULT_SECURITY_MODAL_STATE = {
+const DEFAULT_SECURITY_MODAL_IMAGE_STATE = {
     category: CATEGORIES.IMAGE_SCAN,
     subCategory: SUB_CATEGORIES.VULNERABILITIES,
     detailViewData: null,
 }
 
+const DEFAULT_SECURITY_MODAL_CODE_STATE = {
+    category: CATEGORIES.CODE_SCAN,
+    subCategory: SUB_CATEGORIES.VULNERABILITIES,
+    detailViewData: null,
+}
+
+const DEFAULT_SECURITY_MODAL_MANIFEST_STATE = {
+    category: CATEGORIES.KUBERNETES_MANIFEST,
+    subCategory: SUB_CATEGORIES.MISCONFIGURATIONS,
+    detailViewData: null,
+}
+
+export const getDefaultSecurityModalState = (
+    categoriesConfig: SidebarPropsType['categoriesConfig'],
+): SecurityModalStateType => {
+    if (categoriesConfig.imageScan) {
+        return DEFAULT_SECURITY_MODAL_IMAGE_STATE
+    }
+    if (categoriesConfig.codeScan) {
+        return DEFAULT_SECURITY_MODAL_CODE_STATE
+    }
+    if (categoriesConfig.kubernetesManifest) {
+        return DEFAULT_SECURITY_MODAL_MANIFEST_STATE
+    }
+    return DEFAULT_SECURITY_MODAL_IMAGE_STATE
+}
+
 export const CATEGORY_LABELS = {
     IMAGE_SCAN: 'Image Scan',
     CODE_SCAN: 'Code Scan',

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

@@ -33,7 +33,7 @@ const Vulnerabilities = ({
     SecurityModalSidebar,
 }: VulnerabilitiesProps) => {
     const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
-        () => getSecurityScan({ artifactId, appId: applicationId }),
+        () => getSecurityScan({ artifactId, appId: applicationId, envId: environmentId }),
         [],
         isScanned && isScanEnabled,
         {
@@ -43,7 +43,7 @@ const Vulnerabilities = ({
 
     useEffect(() => {
         if (scanResultResponse) {
-            setVulnerabilityCount(scanResultResponse.result.imageScan.vulnerability?.list?.[0].list?.length)
+            setVulnerabilityCount(scanResultResponse.result.imageScan?.vulnerability?.list?.[0].list?.length)
         }
     }, [scanResultResponse])