Merge pull request #2058 from devtron-labs/feat/security-migration

feat: security migration

Author: arunjaindev

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.3.5-beta-3",
+        "@devtron-labs/devtron-fe-common-lib": "0.3.5-beta-6",
         "@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, SecurityModal } 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'
@@ -29,7 +39,24 @@ 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', 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)
     }
@@ -143,15 +186,13 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
 
             {showVulnerabilityModal && !!isFELibAvailable && (
                 <SecurityModal
-                    resourceScanPayload={{
-                        name: String(resourceData.name),
-                        namespace: String(resourceData.namespace),
-                        group: selectedResource?.gvk?.Group,
-                        kind: selectedResource?.gvk?.Kind,
-                        version: selectedResource?.gvk?.Version,
-                        clusterId: +clusterId,
-                    }}
+                    isResourceScan
                     handleModalClose={handleCloseVulnerabilityModal}
+                    Sidebar={SecurityModalSidebar}
+                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
+                    isLoading={resourceScanLoading}
+                    error={resourceScanError}
+                    responseData={resourceScanResponse?.result}
                 />
             )}
         </>

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

@@ -1,29 +1,60 @@
-import { getSecurityScan, useAsync } from '@devtron-labs/devtron-fe-common-lib'
-import { getLastExecutionMinByAppAndEnv } from '@Services/service'
+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,
+    imageScanDeployInfoId,
     isSecurityScanV2Enabled,
 }: UseGetAppSecurityDetailsProps): UseGetAppSecurityDetailsReturnType => {
     const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
-        () => getSecurityScan({ appId, envId }),
-        [appId, envId],
-        isSecurityScanV2Enabled,
+        () => getSecurityScan({ appId, envId, installedAppId }),
+        [appId, envId, installedAppId],
+        getSecurityScan && isSecurityScanV2Enabled && (!!appId || !!installedAppId),
     )
 
     const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
-        () => getLastExecutionMinByAppAndEnv(appId, envId),
-        [appId, envId],
-        !isSecurityScanV2Enabled,
+        () => getExecutionDetails({ appId, envId, imageScanDeployInfoId }),
+        [appId, envId, imageScanDeployInfoId],
+        !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,
-        scanResultResponse,
-        executionDetailsResponse,
+        scanDetailsResponse,
         scanDetailsError: scanResultError || executionDetailsError,
         reloadScanDetails: isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails,
+        severityCount,
+        totalCount,
     }
 }

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

@@ -16,7 +16,12 @@
 
 import React, { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { getSeverityCountFromSummary, getTotalSeverityCount, SecurityModal, SeverityCount } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    getSeverityCountFromSummary,
+    getTotalSeverityCount,
+    SecurityModal,
+    SeverityCount,
+} 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'
@@ -26,6 +31,7 @@ import { importComponentFromFELibrary } from '../../../common'
 import { useGetAppSecurityDetails } from './AppSecurity'
 
 const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
+const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 
 export const SecurityVulnerabilityCard = ({
     cardLoading,
@@ -39,11 +45,13 @@ export const SecurityVulnerabilityCard = ({
 
     const handleModalClose = () => setShowScanDetailsModal(false)
 
-    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails } =
-        useGetAppSecurityDetails({ appId, envId, isSecurityScanV2Enabled })
+    const { scanDetailsLoading, scanDetailsResponse, scanDetailsError, reloadScanDetails, severityCount } =
+        useGetAppSecurityDetails({ appId: +appId, envId: +envId, installedAppId, isSecurityScanV2Enabled })
 
-    const imageScanFailed = scanResultResponse?.result.codeScan.status === 'Failed'
-    const imageScanProgressing = scanResultResponse?.result.codeScan.status === 'Progressing'
+    // 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 handleOnCardClick = () => {
         if (!cardLoading && !scanDetailsError && !showScanDetailsModal) {
@@ -52,11 +60,6 @@ export const SecurityVulnerabilityCard = ({
         }
     }
 
-    const scanResultSeverities = scanResultResponse?.result.imageScan.vulnerability?.summary.severities // For scan-result Api
-    const severityCount: SeverityCount = isSecurityScanV2Enabled
-        ? getSeverityCountFromSummary(scanResultSeverities)
-        : executionDetailsResponse?.result.severityCount ?? { critical: 0, high: 0, medium: 0, low: 0, unknown: 0 }
-
     const totalCount = getTotalSeverityCount(severityCount)
 
     const getIcon = () => {
@@ -140,10 +143,7 @@ export const SecurityVulnerabilityCard = ({
         return <LoadingCard />
     }
 
-    if (
-        (scanResultResponse && !scanResultResponse.result.scanned) ||
-        (executionDetailsResponse && !executionDetailsResponse.result.scanned)
-    ) {
+    if (scanDetailsResponse && !scanDetailsResponse.result.scanned) {
         return null
     }
 
@@ -190,21 +190,12 @@ export const SecurityVulnerabilityCard = ({
                 <SecurityModal
                     handleModalClose={handleModalClose}
                     isExternalCI={isExternalCI}
-                    {...(isSecurityScanV2Enabled
-                        ? {
-                              appDetailsPayload: {
-                                  appId,
-                                  envId,
-                                  installedAppId: installedAppId ? String(installedAppId) : null,
-                              },
-                          }
-                        : {
-                              executionDetailsPayload: {
-                                  appId,
-                                  envId,
-                                  imageScanDeployInfoId: executionDetailsResponse?.result.imageScanDeployInfoId,
-                              },
-                          })}
+                    Sidebar={SecurityModalSidebar}
+                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
+                    isHelmApp={!!installedAppId}
+                    isLoading={scanDetailsLoading}
+                    error={scanDetailsError}
+                    responseData={scanDetailsResponse?.result}
                 />
             )}
         </button>

src/components/app/details/appDetails/appDetails.type.ts

@@ -14,8 +14,13 @@
  * limitations under the License.
  */
 
-import { ACTION_STATE, getSecurityScan, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
-import { getLastExecutionMinByAppAndEnv } from '@Services/service'
+import {
+    ACTION_STATE,
+    ApiResponseResultType,
+    ResponseType,
+    ServerErrors,
+    SeverityCount,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { AggregatedNodes, OptionType } from '../../types'
 import { SyncErrorType, AppDetails } from '../../../v2/appDetails/appDetails.type'
 
@@ -260,14 +265,17 @@ export interface LastUpdatedCardType {
 }
 
 export interface UseGetAppSecurityDetailsProps {
-    appId: string
-    envId: string
+    appId: number
+    envId: number
+    installedAppId?: number
+    imageScanDeployInfoId?: number
     isSecurityScanV2Enabled: boolean
 }
 export interface UseGetAppSecurityDetailsReturnType {
     scanDetailsLoading: boolean
-    scanResultResponse: Awaited<ReturnType<typeof getSecurityScan>>
-    executionDetailsResponse: Awaited<ReturnType<typeof getLastExecutionMinByAppAndEnv>>
-    scanDetailsError: any
+    scanDetailsResponse: ResponseType<ApiResponseResultType>
+    scanDetailsError: ServerErrors
     reloadScanDetails: () => void
+    severityCount: SeverityCount
+    totalCount: number
 }

src/components/app/details/cIDetails/CIDetails.tsx

@@ -48,6 +48,7 @@ import {
     ErrorScreenManager,
     getTotalSeverityCount,
     getSeverityCountFromSummary,
+    parseExecutionDetailResponse,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Switch, Route, Redirect, useRouteMatch, useParams, useHistory, generatePath } from 'react-router-dom'
 import {
@@ -71,6 +72,7 @@ import { importComponentFromFELibrary } from '@Components/common'
 import { useGetCISecurityDetails } from './CISecurity.utils'
 
 const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
+const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 const terminalStatus = new Set(['succeeded', 'failed', 'error', 'cancelled', 'nottriggered', 'notbuilt'])
 const statusSet = new Set(['starting', 'running', 'pending'])
 
@@ -640,8 +642,6 @@ const HistoryLogs = ({
                             artifactId={triggerDetails.artifactId}
                             status={triggerDetails.status}
                             appIdFromParent={appIdFromParent}
-                            isJobCI={isJobCI}
-                            isJobView={isJobView}
                         />
                     </Route>
                 }
@@ -673,19 +673,19 @@ export const NoVulnerabilityViewWithTool = ({ scanToolId }: { scanToolId: number
     )
 }
 
-const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent, isJobCI, isJobView }: SecurityTabType) => {
+const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: SecurityTabType) => {
     const { appId } = useParams<{ appId: string }>()
     const { push } = useHistory()
     const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && !!isFELibAvailable
 
     const computedAppId = appId ?? appIdFromParent
 
-    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails } = useGetCISecurityDetails({
-        appId: computedAppId,
-        artifactId,
-        isJobCard: isJobCI || isJobView,
-        isSecurityScanV2Enabled,
-    })
+    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails, severityCount, totalCount } =
+        useGetCISecurityDetails({
+            appId: +computedAppId,
+            artifactId,
+            isSecurityScanV2Enabled,
+        })
 
     const redirectToCreate = () => {
         if (!ciPipelineId) {
@@ -727,14 +727,7 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent, isJobC
         return <ImageNotScannedView />
     }
 
-    const scanResultSeverities = scanResultResponse?.result.imageScan.vulnerability?.summary.severities // For scan-result Api
-    const severityCount: SeverityCount = isSecurityScanV2Enabled
-        ? getSeverityCountFromSummary(scanResultSeverities)
-        : executionDetailsResponse?.result.severityCount ?? { critical: 0, high: 0, medium: 0, low: 0, unknown: 0 }
-
-    const totalSeverities = getTotalSeverityCount(severityCount)
-
-    if (artifactId && !totalSeverities) {
+    if (artifactId && !totalCount) {
         return (
             <NoVulnerabilityViewWithTool
                 scanToolId={isSecurityScanV2Enabled ? SCAN_TOOL_ID_TRIVY : executionDetailsResponse.result?.scanToolId} // Since v2 scan is via trivy only
@@ -748,14 +741,9 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent, isJobC
                 severityCount={severityCount}
                 scanToolId={executionDetailsResponse?.result.scanToolId ?? SCAN_TOOL_ID_TRIVY}
                 rootClassName="w-500"
-                {...(isSecurityScanV2Enabled
-                    ? { appDetailsPayload: { appId: computedAppId, artifactId } }
-                    : {
-                          executionDetailsPayload: {
-                              appId: computedAppId,
-                              artifactId,
-                          },
-                      })}
+                SecurityModalSidebar={SecurityModalSidebar}
+                isSecurityScanV2Enabled={isSecurityScanV2Enabled}
+                responseData={isSecurityScanV2Enabled ? scanResultResponse?.result : parseExecutionDetailResponse(executionDetailsResponse?.result)}
             />
         </div>
     )