feat: merge calls for security tabs

Author: arunjaindev

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

@@ -0,0 +1,29 @@
+import { getSecurityScan, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import { getLastExecutionMinByAppAndEnv } from '@Services/service'
+import { UseGetAppSecurityDetailsProps, UseGetAppSecurityDetailsReturnType } from './appDetails.type'
+
+export const useGetAppSecurityDetails = ({
+    appId,
+    envId,
+    isSecurityScanV2Enabled,
+}: UseGetAppSecurityDetailsProps): UseGetAppSecurityDetailsReturnType => {
+    const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
+        () => getSecurityScan({ appId, envId }),
+        [appId, envId],
+        isSecurityScanV2Enabled,
+    )
+
+    const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
+        () => getLastExecutionMinByAppAndEnv(appId, envId),
+        [appId, envId],
+        !isSecurityScanV2Enabled,
+    )
+
+    return {
+        scanDetailsLoading: scanResultLoading || executionDetailsLoading,
+        scanResultResponse,
+        executionDetailsResponse,
+        scanDetailsError: scanResultError || executionDetailsError,
+        reloadScanDetails: isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails,
+    }
+}

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

@@ -16,14 +16,14 @@
 
 import React, { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { getSecurityScan, SecurityModal, SeverityCount, useAsync } 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'
 import { SecurityVulnerabilityCardType } from './appDetails.type'
 import LoadingCard from './LoadingCard'
 import { importComponentFromFELibrary } from '../../../common'
-import { getLastExecutionMinByAppAndEnv } from '../../../../services/service'
+import { useGetAppSecurityDetails } from './AppSecurity'
 
 const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 
@@ -39,56 +39,35 @@ export const SecurityVulnerabilityCard = ({
 
     const handleModalClose = () => setShowScanDetailsModal(false)
 
-    const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
-        () => getSecurityScan({ appId, envId }),
-        [appId, envId],
-        isSecurityScanV2Enabled,
-    )
-
-    const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
-        () => getLastExecutionMinByAppAndEnv(appId, envId),
-        [appId, envId],
-        !isSecurityScanV2Enabled,
-    )
+    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails } =
+        useGetAppSecurityDetails({ appId, envId, isSecurityScanV2Enabled })
 
-    const imageScanErrored = scanResultError || executionDetailsError
     const imageScanFailed = scanResultResponse?.result.codeScan.status === 'Failed'
     const imageScanProgressing = scanResultResponse?.result.codeScan.status === 'Progressing'
 
     const handleOnCardClick = () => {
-        if (!cardLoading && !imageScanErrored && !showScanDetailsModal) {
+        if (!cardLoading && !scanDetailsError && !showScanDetailsModal) {
             // hack: added timeout to prevent click outside
             setTimeout(() => setShowScanDetailsModal(true), 100)
         }
     }
 
-    const imageScanSeverities = scanResultResponse?.result.imageScan.vulnerability?.summary.severities // For scan-result Api
+    const scanResultSeverities = scanResultResponse?.result.imageScan.vulnerability?.summary.severities // For scan-result Api
     const severityCount: SeverityCount = isSecurityScanV2Enabled
-        ? {
-              critical: imageScanSeverities?.CRITICAL || 0,
-              high: imageScanSeverities?.HIGH || 0,
-              medium: imageScanSeverities?.MEDIUM || 0,
-              low: imageScanSeverities?.LOW || 0,
-              unknown: imageScanSeverities?.UNKNOWN || 0,
-          }
+        ? getSeverityCountFromSummary(scanResultSeverities)
         : executionDetailsResponse?.result.severityCount ?? { critical: 0, high: 0, medium: 0, low: 0, unknown: 0 }
 
-    const totalCount =
-        (severityCount?.critical || 0) +
-        (severityCount?.high || 0) +
-        (severityCount?.medium || 0) +
-        (severityCount?.low || 0) +
-        (severityCount?.unknown || 0)
+    const totalCount = getTotalSeverityCount(severityCount)
 
     const getIcon = () => {
-        if (imageScanErrored || imageScanFailed || imageScanProgressing || totalCount) {
+        if (scanDetailsError || imageScanFailed || imageScanProgressing || totalCount) {
             return <Bug className="scy-7" />
         }
         return <Secure />
     }
 
     const getTitle = () => {
-        if (imageScanErrored) {
+        if (scanDetailsError) {
             return '--'
         }
         if (imageScanFailed) {
@@ -108,7 +87,7 @@ export const SecurityVulnerabilityCard = ({
     }
 
     const getSubtitle = () => {
-        if (imageScanErrored) {
+        if (scanDetailsError) {
             return 'Failed to fetch'
         }
         if (imageScanFailed) {
@@ -136,11 +115,11 @@ export const SecurityVulnerabilityCard = ({
     }
 
     const getActionButton = () => {
-        if (imageScanErrored) {
+        if (scanDetailsError) {
             return (
                 <button
                     className="app-details-info-card__bottom-container__details fs-12 fw-6 dc__unset-button-styles"
-                    onClick={isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails}
+                    onClick={reloadScanDetails}
                     data-testid="security-card-handle-refetch-button"
                 >
                     Refetch
@@ -157,7 +136,7 @@ export const SecurityVulnerabilityCard = ({
         )
     }
 
-    if (cardLoading || scanResultLoading || executionDetailsLoading) {
+    if (cardLoading || scanDetailsLoading) {
         return <LoadingCard />
     }
 
@@ -172,7 +151,7 @@ export const SecurityVulnerabilityCard = ({
         <button type="button" className="dc__unset-button-styles" onClick={handleOnCardClick}>
             <div
                 data-testid="security-vulnerability-card"
-                className={`app-details-info-card flex left bcn-0 br-8 mr-12 lh-20 w-200 ${cardLoading || imageScanErrored ? '' : 'pointer'}`}
+                className={`app-details-info-card flex left bcn-0 br-8 mr-12 lh-20 w-200 ${cardLoading || scanDetailsError ? '' : 'pointer'}`}
             >
                 <div className="app-details-info-card__top-container flex">
                     <div className="app-details-info-card__top-container__content">

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

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { ACTION_STATE, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
+import { ACTION_STATE, getSecurityScan, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
+import { getLastExecutionMinByAppAndEnv } from '@Services/service'
 import { AggregatedNodes, OptionType } from '../../types'
 import { SyncErrorType, AppDetails } from '../../../v2/appDetails/appDetails.type'
 
@@ -257,3 +258,16 @@ export interface LastUpdatedCardType {
     triggeredBy: string
     cardLoading: boolean
 }
+
+export interface UseGetAppSecurityDetailsProps {
+    appId: string
+    envId: string
+    isSecurityScanV2Enabled: boolean
+}
+export interface UseGetAppSecurityDetailsReturnType {
+    scanDetailsLoading: boolean
+    scanResultResponse: Awaited<ReturnType<typeof getSecurityScan>>
+    executionDetailsResponse: Awaited<ReturnType<typeof getLastExecutionMinByAppAndEnv>>
+    scanDetailsError: any
+    reloadScanDetails: () => void
+}

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

@@ -41,11 +41,13 @@ import {
     ModuleNameMap,
     EMPTY_STATE_STATUS,
     SecuritySummaryCard,
-    getSecurityScan,
     SeverityCount,
     TabGroup,
     TRIGGER_STATUS_PROGRESSING,
     SCAN_TOOL_ID_TRIVY,
+    ErrorScreenManager,
+    getTotalSeverityCount,
+    getSeverityCountFromSummary,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Switch, Route, Redirect, useRouteMatch, useParams, useHistory, generatePath } from 'react-router-dom'
 import {
@@ -57,7 +59,6 @@ import {
 } from '../../service'
 import { URLS, Routes } from '../../../../config'
 import { BuildDetails, CIPipeline, HistoryLogsType, SecurityTabType } from './types'
-import { getLastExecutionByAppArtifactId } from '../../../../services/service'
 import { ScanDisabledView, ImageNotScannedView, CIRunningView } from './cIDetails.util'
 import './ciDetails.scss'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
@@ -67,6 +68,7 @@ import { ReactComponent as NoVulnerability } from '../../../../assets/img/ic-vul
 import { CIPipelineBuildType } from '../../../ciPipeline/types'
 import { renderCIListHeader, renderDeploymentHistoryTriggerMetaText } from '../cdDetails/utils'
 import { importComponentFromFELibrary } from '@Components/common'
+import { useGetCISecurityDetails } from './CISecurity.utils'
 
 const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 const terminalStatus = new Set(['succeeded', 'failed', 'error', 'cancelled', 'nottriggered', 'notbuilt'])
@@ -678,17 +680,12 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent, isJobC
 
     const computedAppId = appId ?? appIdFromParent
 
-    const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
-        () => getSecurityScan({ artifactId, ...((isJobCI || isJobView) && { appId: computedAppId }) }),
-        [artifactId, computedAppId],
+    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails } = useGetCISecurityDetails({
+        appId: computedAppId,
+        artifactId,
+        isJobCard: isJobCI || isJobView,
         isSecurityScanV2Enabled,
-    )
-
-    const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
-        () => getLastExecutionByAppArtifactId(artifactId, isJobCI || isJobView ? computedAppId : null),
-        [artifactId, computedAppId],
-        !isSecurityScanV2Enabled,
-    )
+    })
 
     const redirectToCreate = () => {
         if (!ciPipelineId) {
@@ -714,11 +711,11 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent, isJobC
         )
     }
 
-    if (scanResultLoading || executionDetailsLoading) {
+    if (scanDetailsLoading) {
         return <Progressing pageLoader />
     }
-    if (scanResultError || executionDetailsError) {
-        return <Reload reload={isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails} />
+    if (scanDetailsError) {
+        return <ErrorScreenManager code={scanDetailsError.code} reload={reloadScanDetails} />
     }
     if (
         (executionDetailsResponse && !executionDetailsResponse.result.scanned) ||
@@ -730,23 +727,12 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent, isJobC
         return <ImageNotScannedView />
     }
 
-    const imageScanSeverities = scanResultResponse?.result.imageScan.vulnerability.summary.severities // For scan-result Api
+    const scanResultSeverities = scanResultResponse?.result.imageScan.vulnerability?.summary.severities // For scan-result Api
     const severityCount: SeverityCount = isSecurityScanV2Enabled
-        ? {
-              critical: imageScanSeverities.CRITICAL || 0,
-              high: imageScanSeverities.HIGH || 0,
-              medium: imageScanSeverities.MEDIUM || 0,
-              low: imageScanSeverities.LOW || 0,
-              unknown: imageScanSeverities.UNKNOWN || 0,
-          }
+        ? getSeverityCountFromSummary(scanResultSeverities)
         : executionDetailsResponse?.result.severityCount ?? { critical: 0, high: 0, medium: 0, low: 0, unknown: 0 }
 
-    const totalSeverities =
-        (severityCount.critical || 0) +
-        (severityCount.high || 0) +
-        (severityCount.medium || 0) +
-        (severityCount.low || 0) +
-        (severityCount.unknown || 0)
+    const totalSeverities = getTotalSeverityCount(severityCount)
 
     if (artifactId && !totalSeverities) {
         return (

src/components/app/details/cIDetails/CISecurity.utils.tsx

@@ -0,0 +1,30 @@
+import { getSecurityScan, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import { getLastExecutionByAppArtifactId } from '@Services/service'
+import { UseGetCISecurityDetailsProps, UseGetCISecurityDetailsReturnType } from './types'
+
+export const useGetCISecurityDetails = ({
+    appId,
+    artifactId,
+    isJobCard,
+    isSecurityScanV2Enabled,
+}: UseGetCISecurityDetailsProps): UseGetCISecurityDetailsReturnType => {
+    const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
+        () => getSecurityScan({ artifactId, ...(isJobCard && { appId }) }),
+        [artifactId, appId],
+        isSecurityScanV2Enabled,
+    )
+
+    const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
+        () => getLastExecutionByAppArtifactId(artifactId, isJobCard ? appId : null),
+        [artifactId, appId],
+        !isSecurityScanV2Enabled,
+    )
+
+    return {
+        scanDetailsLoading: scanResultLoading || executionDetailsLoading,
+        scanResultResponse,
+        executionDetailsResponse,
+        scanDetailsError: scanResultError || executionDetailsError,
+        reloadScanDetails: isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails,
+    }
+}

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

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import { GenericEmptyState } from '@devtron-labs/devtron-fe-common-lib'
 import notScanned from '../../../../assets/img/not-scanned.png'
 import scannedDisabled from '../../../../assets/img/ic-empty-scanner-disabled.png'

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

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FetchIdDataStatus, History, useScrollable } from '@devtron-labs/devtron-fe-common-lib'
+import { FetchIdDataStatus, getSecurityScan, History, useScrollable } from '@devtron-labs/devtron-fe-common-lib'
+import { getLastExecutionByAppArtifactId } from '@Services/service'
 
 export interface CIPipeline {
     name: string
@@ -64,3 +65,18 @@ export interface SecurityTabType {
     isJobCI: boolean
     isJobView: boolean
 }
+
+export interface UseGetCISecurityDetailsProps {
+    appId: string
+    artifactId: number
+    isJobCard: boolean
+    isSecurityScanV2Enabled: boolean
+}
+
+export interface UseGetCISecurityDetailsReturnType {
+    scanDetailsLoading: boolean
+    scanResultResponse: Awaited<ReturnType<typeof getSecurityScan>>
+    executionDetailsResponse: Awaited<ReturnType<typeof getLastExecutionByAppArtifactId>>
+    scanDetailsError: any
+    reloadScanDetails: () => void
+}

src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx

@@ -111,7 +111,7 @@ const ChartDeploymentHistory = ({
             DEPLOYMENT_HISTORY_TAB.SOURCE,
             DEPLOYMENT_HISTORY_TAB.VALUES_YAML,
             DEPLOYMENT_HISTORY_TAB.HELM_GENERATED_MANIFEST,
-            DEPLOYMENT_HISTORY_TAB.SECURITY,
+            (ChartSecurityTab && isScanV2Enabled && DEPLOYMENT_HISTORY_TAB.SECURITY),
         ]
         if (installedAppInfo?.deploymentType === DeploymentAppTypes.GITOPS) {
             tabs.unshift(DEPLOYMENT_HISTORY_TAB.STEPS)