Merge pull request #481 from devtron-labs/feat/integrate-scans

feat: intergrate scanning for v1 and v2 APIs

Author: arunjaindev

package-lock.json

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

package.json

@@ -89,7 +89,7 @@ export const ROUTES = {
     CD_MATERIAL_GET: 'app/cd-pipeline',
     DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
     INFRA_CONFIG_PROFILE: 'infra-config/profile',
-    SECURITY_SCAN_EXECUTION_DETAILS: 'security/scan/executionDetail',
+    SCAN_RESULT: 'scan-result',
     NOTIFIER: 'notification',
     APP_LIST: 'app/list',
     TELEMETRY_EVENT: 'telemetry/event',

src/Common/Constants.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React, { ChangeEvent } from 'react'
+import { ChangeEvent } from 'react'
 import { WidgetProps } from '@rjsf/utils'
-import Toggle from '../../Toggle/Toggle'
 import { isNullOrUndefined } from '@Shared/Helpers'
+import Toggle from '../../Toggle/Toggle'
 
 export const Checkbox = ({
     id,

src/Common/RJSF/widgets/Checkbox.tsx

@@ -49,7 +49,6 @@ const ImageCardAccordion = ({
     isScanned,
     isScanEnabled,
     SecurityModalSidebar,
-    getSecurityScan,
 }: ImageCardAccordionProps) => {
     const [isOpened, setIsOpened] = useState<boolean>(false)
     const [activeTab, setActiveTab] = useState<CDModalTabType>(CDModalTab.Changes)
@@ -77,7 +76,6 @@ const ImageCardAccordion = ({
                 environmentId={environmentId}
                 setVulnerabilityCount={setVulnerabilityCount}
                 SecurityModalSidebar={SecurityModalSidebar}
-                getSecurityScan={getSecurityScan}
             />
         )
     }

src/Shared/Components/ImageCardAccordion/ImageCardAccordion.tsx

@@ -15,9 +15,9 @@
  */
 
 import React, { ReactNode } from 'react'
-import { CDModalTabType, ResponseType, VulnerabilityType } from '../../../Common'
+import { CDModalTabType, VulnerabilityType } from '../../../Common'
 import { MaterialSecurityInfoType } from '../../types'
-import { ApiResponseResultType, AppDetailsPayload, SidebarPropsType } from '../Security'
+import { SidebarPropsType } from '../Security'
 
 export interface ImageCardAccordionProps extends MaterialSecurityInfoType {
     isSecurityModuleInstalled: boolean
@@ -28,9 +28,6 @@ export interface ImageCardAccordionProps extends MaterialSecurityInfoType {
     isScanned: boolean
     isScanEnabled: boolean
     SecurityModalSidebar: React.FC<SidebarPropsType>
-    getSecurityScan: (
-        props: Pick<AppDetailsPayload, 'appId' | 'artifactId'>,
-    ) => Promise<ResponseType<ApiResponseResultType>>
 }
 
 export interface SecurityDetailsType {

src/Shared/Components/ImageCardAccordion/types.ts

@@ -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'
 
@@ -39,16 +39,19 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     isLoading,
     error,
     responseData,
-    isResourceScan = false,
-    isHelmApp = false,
-    isSecurityScanV2Enabled = false,
-    isExternalCI = false,
     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,
@@ -156,14 +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 */}
-                {isSecurityScanV2Enabled && !isResourceScan && Sidebar && (
-                    <Sidebar
-                        isHelmApp={isHelmApp}
-                        modalState={state}
-                        setModalState={setState}
-                        isExternalCI={isExternalCI}
-                    />
-                )}
+                {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()}
@@ -176,7 +172,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     return (
         <VisibleModal2 className="dc__position-rel" close={handleModalClose}>
             <div
-                className={`${isResourceScan ? 'w-800' : 'w-1024'} h-100vh bcn-0 flexbox-col dc__right-0 dc__top-0 dc__position-abs`}
+                className={`${Sidebar ? 'w-1024' : 'w-800'} h-100vh bcn-0 flexbox-col dc__right-0 dc__top-0 dc__position-abs`}
                 onClick={stopPropagation}
             >
                 {renderHeader()}

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

@@ -17,7 +17,7 @@ import {
     SEVERITY_DEFAULT_SORT_ORDER,
 } from '../constants'
 import {
-    ApiResponseResultType,
+    ScanResultDTO,
     CATEGORIES,
     CodeScan,
     CodeScanExposedSecretsListType,
@@ -454,7 +454,7 @@ const getCompletedEmptyState = (
     detailViewData: DetailViewDataType,
 ) => {
     /* NOTE: show empty state only when we don't have any data to show */
-    if ((data[subCategory]?.list && !detailViewData) || detailViewData?.rows) {
+    if ((data[subCategory]?.list?.length && !detailViewData) || detailViewData?.rows) {
         return null
     }
 
@@ -489,7 +489,7 @@ const getCompletedEmptyState = (
 }
 
 export const getCodeScanEmptyState = (
-    data: ApiResponseResultType,
+    data: ScanResultDTO,
     subCategory: SecurityModalStateType['subCategory'],
     detailViewData: DetailViewDataType,
 ): EmptyStateType => {

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

@@ -5,10 +5,10 @@
 import { getCodeScanEmptyState } from './CodeScan'
 import { getImageScanEmptyState } from './ImageScan'
 import { getKubernetesManifestEmptyState } from './KubernetesManifest'
-import { ApiResponseResultType, CATEGORIES, DetailViewDataType, SecurityModalStateType } from '../types'
+import { ScanResultDTO, CATEGORIES, DetailViewDataType, SecurityModalStateType } from '../types'
 
 export const getEmptyStateValues = (
-    data: ApiResponseResultType,
+    data: ScanResultDTO,
     category: SecurityModalStateType['category'],
     subCategory: SecurityModalStateType['subCategory'],
     detailViewData: DetailViewDataType,

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

@@ -18,7 +18,7 @@ import {
     InfoCardPropsType,
     ImageScanLicenseListType,
     EmptyStateType,
-    ApiResponseResultType,
+    ScanResultDTO,
     CATEGORIES,
     OpenDetailViewButtonProps,
 } from '../types'
@@ -105,7 +105,7 @@ const getVulnerabilitiesDetailData = (
     setDetailViewData: OpenDetailViewButtonProps['setDetailViewData'],
     hidePolicy: boolean,
 ) => {
-    const shouldGroupByTarget = element.list.every((item) => !!item.target)
+    const shouldGroupByTarget = element.list?.every((item) => !!item.target)
     if (!shouldGroupByTarget) {
         return {
             ...getVulnerabilitiesDetailBaseData(element),
@@ -355,14 +355,14 @@ const getCompletedEmptyState = (
 }
 
 export const getImageScanEmptyState = (
-    data: ApiResponseResultType,
+    data: ScanResultDTO,
     subCategory: SecurityModalStateType['subCategory'],
     detailViewData: DetailViewDataType,
 ): EmptyStateType => {
     /**
      * NOTE: handling for resourceScan in ResourceBrowser
      * TODO: handle properly */
-    if (!data[CATEGORIES.IMAGE_SCAN][subCategory]?.list?.length) {
+    if (!data[CATEGORIES.IMAGE_SCAN]?.[subCategory]?.list?.length) {
         return SCAN_IN_PROGRESS_EMPTY_STATE
     }