feat: move sidebar and scan-result api to fe-lib

Author: arunjaindev

package-lock.json

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

package.json

@@ -107,8 +107,6 @@ export const ROUTES = {
     PLUGIN_GLOBAL_LIST_DETAIL_V2: 'plugin/global/list/detail/v2',
     PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
     PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
-    K8S_RESOURCE_SECURITY: 'k8s/resource/security',
-    SCAN_RESULT: 'scan-result',
     PLUGIN_LIST_MIN: 'plugin/global/list/v2/min',
     DEPLOYMENT_CHARTS_LIST: 'deployment/template/fetch',
     USER_LIST_MIN: 'user/list/min',

src/Common/Constants.ts

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

src/Shared/Components/ImageCardAccordion/ImageCardAccordion.tsx

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

src/Shared/Components/ImageCardAccordion/types.ts

@@ -6,7 +6,6 @@ import React, { useState } from 'react'
 import {
     ErrorScreenManager,
     ClipboardButton,
-    useAsync,
     GenericEmptyState,
     ImageType,
     Progressing,
@@ -15,9 +14,8 @@ import {
 } from '@Common/index'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { ReactComponent as ICBack } from '@Icons/ic-caret-down.svg'
-import { Sidebar, Table, InfoCard } from './components'
+import { Table, InfoCard } from './components'
 import { DEFAULT_SECURITY_MODAL_STATE } from './constants'
-import { getExecutionDetails, getResourceScanDetails, getSecurityScan } from './service'
 import { getTableData, getInfoCardData } from './config'
 import { SecurityModalPropsType, SecurityModalStateType, DetailViewDataType } from './types'
 import { getEmptyStateValues } from './config/EmptyState'
@@ -34,25 +32,19 @@ import './styles.scss'
  * For further detail please refer the types to understand the Api Response and workflow of the modal component.
  * */
 const SecurityModal: React.FC<SecurityModalPropsType> = ({
-    appDetailsPayload,
-    resourceScanPayload,
-    executionDetailsPayload,
+    Sidebar,
     handleModalClose,
-    isExternalCI,
+    isLoading,
+    error,
+    responseData,
+    isResourceScan = false,
+    isHelmApp = false,
+    isSecurityScanV2Enabled = false,
+    isExternalCI = false,
 }) => {
     const [state, setState] = useState<SecurityModalStateType>(DEFAULT_SECURITY_MODAL_STATE)
 
-    const [loading, _data, error] = useAsync(() => {
-        if (appDetailsPayload) {
-            return getSecurityScan(appDetailsPayload)
-        }
-        if (executionDetailsPayload) {
-            return getExecutionDetails(executionDetailsPayload)
-        }
-        return getResourceScanDetails(resourceScanPayload)
-    })
-
-    const data = _data?.result || null
+    const data = responseData ?? null
 
     const setDetailViewData = (detailViewData: DetailViewDataType) => {
         setState((prevState) => ({
@@ -140,7 +132,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     }
 
     const renderContent = () => {
-        if (loading) {
+        if (isLoading) {
             return (
                 <div className="h-100 w-100 flex">
                     <Progressing size={24} pageLoader />
@@ -160,9 +152,9 @@ 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 */}
-                {appDetailsPayload && (
+                {isSecurityScanV2Enabled && !isResourceScan && Sidebar && (
                     <Sidebar
-                        isHelmApp={!!appDetailsPayload?.installedAppId}
+                        isHelmApp={isHelmApp}
                         modalState={state}
                         setModalState={setState}
                         isExternalCI={isExternalCI}
@@ -180,7 +172,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     return (
         <VisibleModal2 className="dc__position-rel" close={handleModalClose}>
             <div
-                className={`${resourceScanPayload ? 'w-800' : 'w-1024'} h-100vh bcn-0 flexbox-col dc__right-0 dc__top-0 dc__position-abs`}
+                className={`${isResourceScan ? 'w-800' : 'w-1024'} 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

@@ -2,7 +2,6 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-export { default as Sidebar } from './Sidebar'
 export { default as Table } from './Table'
 export { default as InfoCard } from './InfoCard'
 export { default as OpenDetailViewButton } from './OpenDetailViewButton'

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

@@ -3,6 +3,22 @@
  */
 
 export { default as SecurityModal } from './SecurityModal'
-export { getSecurityScan } from './service'
-export { getSecurityScanSeveritiesCount } from './utils'
-export type { AppDetailsPayload, ExecutionDetailsPayload, ApiResponseResultType } from './types'
+export {
+    getSecurityScanSeveritiesCount,
+    getTotalVulnerabilityCount,
+    parseGetResourceScanDetailsResponse,
+    parseExecutionDetailResponse,
+} from './utils'
+export type {
+    AppDetailsPayload,
+    ExecutionDetailsPayload,
+    ApiResponseResultType,
+    SidebarPropsType,
+    SidebarDataChildType,
+    SidebarDataType,
+    GetResourceScanDetailsPayloadType,
+    GetResourceScanDetailsResponseType,
+} from './types'
+export { SIDEBAR_DATA } from './config'
+export { CATEGORY_LABELS } from './constants'
+export { getExecutionDetails } from './service'

src/Shared/Components/Security/SecurityModal/components/index.ts

@@ -2,90 +2,31 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import { get, post } from '@Common/Api'
+import { get } from '@Common/Api'
 import { ResponseType } from '@Common/Types'
 import { getUrlWithSearchParams } from '@Common/Helper'
 import { ROUTES } from '@Common/Constants'
-import { getParsedScanResult } from '../Vulnerabilities'
-import {
-    ApiResponseResultType,
-    GetResourceScanDetailsPayloadType,
-    GetResourceScanDetailsResponseType,
-    SecurityModalPropsType,
-} from './types'
-import { getTotalVulnerabilityCount, parseExecutionDetailResponse, parseGetResourceScanDetailsResponse } from './utils'
+import { ApiResponseResultType, ExecutionDetailsPayload } from './types'
+import { parseExecutionDetailResponse } from './utils'
 
 export const getExecutionDetails = async (
-    executionDetailPayload: SecurityModalPropsType['executionDetailsPayload'],
+    executionDetailPayload: ExecutionDetailsPayload,
 ): Promise<ResponseType<ApiResponseResultType>> => {
     const url = getUrlWithSearchParams(ROUTES.SECURITY_SCAN_EXECUTION_DETAILS, executionDetailPayload)
     const response = await get(url)
-    return { ...response, result: parseExecutionDetailResponse(response.result) }
-}
-
-export const getResourceScanDetails = async ({
-    name,
-    namespace,
-    clusterId,
-    group,
-    version,
-    kind,
-    appId,
-    appType,
-    deploymentType,
-    isAppDetailView,
-}: GetResourceScanDetailsPayloadType): Promise<ResponseType<ApiResponseResultType>> => {
-    const baseObject = {
-        k8sRequest: {
-            resourceIdentifier: {
-                groupVersionKind: {
-                    Group: group || '',
-                    Version: version || 'v1',
-                    Kind: kind,
-                },
-                namespace,
-                name,
-            },
-        },
-        clusterId: clusterId ? +clusterId : 0,
+    const parsedResult = {
+        ...response.result,
+        scanExecutionId: response.result.ScanExecutionId,
+        lastExecution: response.result.executionTime,
+        objectType: response.result.objectType,
+        vulnerabilities: response.result.vulnerabilities?.map((cve) => ({
+            name: cve.cveName,
+            severity: cve.severity,
+            package: cve.package,
+            version: cve.currentVersion,
+            fixedVersion: cve.fixedVersion,
+            policy: cve.permission,
+        })),
     }
-
-    const payload = isAppDetailView
-        ? {
-              ...baseObject,
-              appId,
-              appType,
-              deploymentType,
-          }
-        : baseObject
-
-    const response = await post(ROUTES.K8S_RESOURCE_SECURITY, payload)
-    const parsedScannedResult =
-        response.result?.map((resourceData) => ({
-            ...resourceData,
-            scanResult: getParsedScanResult(resourceData.scanResult),
-        })) ?? []
-    const data: GetResourceScanDetailsResponseType = {
-        ...getTotalVulnerabilityCount(parsedScannedResult),
-        imageVulnerabilities: parsedScannedResult,
-    }
-    response.result = parseGetResourceScanDetailsResponse(data)
-    return response
-}
-
-export const getSecurityScan = async ({
-    appId,
-    envId,
-    installedAppId,
-    artifactId,
-    installedAppVersionHistoryId,
-}: SecurityModalPropsType['appDetailsPayload']) => {
-    const url = getUrlWithSearchParams(ROUTES.SCAN_RESULT, {
-        appId,
-        envId,
-        installedAppId,
-        artifactId,
-        installedAppVersionHistoryId,
-    })
-    return get(url) as Promise<ResponseType<ApiResponseResultType>>
+    return { ...response, result: parseExecutionDetailResponse(parsedResult) }
 }