Merge pull request #1974 from devtron-labs/feat/security-summary-card

feat: add security summary card and merge v1 and v2 security modal

Author: arunjaindev

.eslintignore

@@ -293,7 +293,6 @@ src/components/common/icons/Icons.tsx
 src/components/common/lineChart/lineChart.tsx
 src/components/common/navigation/Navigation.tsx
 src/components/common/navigation/NavigationRoutes.tsx
-src/components/common/security/ScanDetailsModal.tsx
 src/components/deploymentConfig/ChartSelectorDropdown.tsx
 src/components/deploymentConfig/DeploymentConfig.tsx
 src/components/deploymentConfig/DeploymentConfig.utils.ts

package.json

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

src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx

@@ -15,7 +15,17 @@
  */
 
 import React, { useState } from 'react'
-import { PopupMenu, Nodes, useMainContext, ModuleNameMap } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    PopupMenu,
+    Nodes,
+    useMainContext,
+    ModuleNameMap,
+    SecurityModal,
+    ResponseType,
+    ApiResponseResultType,
+    GetResourceScanDetailsPayloadType,
+    useAsync,
+} from '@devtron-labs/devtron-fe-common-lib'
 import DeleteResourcePopup from './DeleteResourcePopup'
 import { importComponentFromFELibrary, getShowResourceScanModal } from '../../common'
 import { RESOURCE_ACTION_MENU } from '../Constants'
@@ -28,8 +38,25 @@ import { ReactComponent as DeleteIcon } from '../../../assets/icons/ic-delete-in
 import { ReactComponent as MenuDots } from '../../../assets/icons/appstatus/ic-menu-dots.svg'
 import { NodeType } from '../../v2/appDetails/appDetails.type'
 
-const OpenSecurityModalButton = importComponentFromFELibrary('OpenSecurityModalButton')
-const SecurityModal = importComponentFromFELibrary('SecurityModal')
+const OpenSecurityModalButton = importComponentFromFELibrary('OpenSecurityModalButton', null, 'function')
+const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', false, 'function')
+const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
+const getResourceScanDetails: ({
+    name,
+    namespace,
+    clusterId,
+    group,
+    version,
+    kind,
+    appId,
+    appType,
+    deploymentType,
+    isAppDetailView,
+}: GetResourceScanDetailsPayloadType) => Promise<ResponseType<ApiResponseResultType>> = importComponentFromFELibrary(
+    'getResourceScanDetails',
+    null,
+    'function',
+)
 
 const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
     clusterId,
@@ -41,9 +68,25 @@ 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)
 
+    const [resourceScanLoading, resourceScanResponse, resourceScanError] = useAsync(
+        () =>
+            getResourceScanDetails({
+                name: String(resourceData.name),
+                namespace: String(resourceData.namespace),
+                group: selectedResource?.gvk?.Group,
+                kind: selectedResource?.gvk?.Kind,
+                version: selectedResource?.gvk?.Version,
+                clusterId: +clusterId,
+            }),
+        [],
+        showVulnerabilityModal && getResourceScanDetails && isSecurityScanV2Enabled,
+    )
+
     const toggleDeleteDialog = () => {
         setShowDeleteDialog((prevState) => !prevState)
     }
@@ -56,10 +99,12 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
         setShowVulnerabilityModal(false)
     }
 
-    const showResourceScanModal = getShowResourceScanModal(
-        selectedResource?.gvk?.Kind as NodeType,
-        installedModuleMap.current?.[ModuleNameMap.SECURITY_TRIVY],
-    )
+    const showResourceScanModal =
+        getShowResourceScanModal(
+            selectedResource?.gvk?.Kind as NodeType,
+            installedModuleMap.current?.[ModuleNameMap.SECURITY_TRIVY],
+        ) && window._env_.ENABLE_RESOURCE_SCAN_V2
+
     return (
         <>
             <PopupMenu autoClose>
@@ -141,17 +186,15 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
                 />
             )}
 
-            {showVulnerabilityModal && SecurityModal && (
+            {showVulnerabilityModal && !!isFELibAvailable && (
                 <SecurityModal
-                    resourceScanPayload={{
-                        name: resourceData.name,
-                        namespace: resourceData.namespace,
-                        group: selectedResource?.gvk?.Group,
-                        kind: selectedResource?.gvk?.Kind,
-                        version: selectedResource?.gvk?.Version,
-                        clusterId,
-                    }}
+                    isResourceScan
                     handleModalClose={handleCloseVulnerabilityModal}
+                    Sidebar={SecurityModalSidebar}
+                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
+                    isLoading={resourceScanLoading}
+                    error={resourceScanError}
+                    responseData={resourceScanResponse?.result}
                 />
             )}
         </>

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

@@ -0,0 +1,62 @@
+import {
+    ApiResponseResultType,
+    AppDetailsPayload,
+    getExecutionDetails,
+    getSeverityCountFromSummary,
+    getTotalSeverityCount,
+    ResponseType,
+    SeverityCount,
+    useAsync,
+} 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),
+    )
+
+    const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
+        () =>
+            getExecutionDetails(appId && artifactId ? { appId, 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 severityCount: SeverityCount = getSeverityCountFromSummary(severities)
+
+    const totalCount = getTotalSeverityCount(severityCount)
+
+    return {
+        scanDetailsLoading: scanResultLoading || executionDetailsLoading,
+        scanDetailsResponse,
+        scanDetailsError: scanResultError || executionDetailsError,
+        reloadScanDetails: isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails,
+        severityCount,
+        totalCount,
+    }
+}