Merge pull request #982 from devtron-labs/trivy-image-scanning

feat: trivy Image scanning module Integration

Author: kartik-579

.env

@@ -29,4 +29,5 @@ CLUSTER_TERMINAL_CONNECTION_RETRY_COUNT=7
 ENABLE_CHART_SEARCH_IN_HELM_DEPLOY=false
 HIDE_EXCLUDE_INCLUDE_GIT_COMMITS=true
 ENABLE_BUILD_CONTEXT=false
-ENABLE_RESTART_WORKLOAD=false
+CLAIR_TOOL_VERSION= 
+ENABLE_RESTART_WORKLOAD=false

src/assets/icons/ic-clair-to-trivy.svg

@@ -8,7 +8,7 @@ import { useRouteMatch, useParams, useHistory, generatePath } from 'react-router
 import { BuildDetails, CIPipeline, HistoryLogsType, SecurityTabType } from './types'
 import { ReactComponent as Down } from '../../../../assets/icons/ic-dropdown-filled.svg'
 import { getLastExecutionByArtifactId } from '../../../../services/service'
-import { ScanDisabledView, ImageNotScannedView, NoVulnerabilityView, CIRunningView } from './cIDetails.util'
+import { ScanDisabledView, ImageNotScannedView, CIRunningView } from './cIDetails.util'
 import './ciDetails.scss'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
 import { ModuleStatus } from '../../../v2/devtronStackManager/DevtronStackManager.type'
@@ -20,6 +20,8 @@ import Artifacts from '../cicdHistory/Artifacts'
 import { CICDSidebarFilterOptionType, History, HistoryComponentType } from '../cicdHistory/types'
 import LogsRenderer from '../cicdHistory/LogsRenderer'
 import { EMPTY_STATE_STATUS } from '../../../../config/constantMessaging'
+import  novulnerability from '../../../../assets/img/ic-vulnerability-not-found.svg';
+import { ScannedByToolModal } from '../../../common/security/ScannedByToolModal'
 
 const terminalStatus = new Set(['succeeded', 'failed', 'error', 'cancelled', 'nottriggered', 'notbuilt'])
 let statusSet = new Set(['starting', 'running', 'pending'])
@@ -390,6 +392,21 @@ const HistoryLogs = ({ triggerDetails, isBlobStorageConfigured, isJobView, appId
         </div>
     )
 }
+export function NoVulnerabilityViewWithTool({scanToolId}:{scanToolId:number}) {
+    return (
+        <div className="flex h-100">
+            <GenericEmptyState
+                image={novulnerability}
+                title={EMPTY_STATE_STATUS.CI_DEATILS_NO_VULNERABILITY_FOUND}
+                children={
+                    <span className="flex workflow__header dc__border-radius-24 bcn-0">
+                        <ScannedByToolModal scanToolId={scanToolId} />
+                    </span>
+                }
+            />
+        </div>
+    )
+}
 
 const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: SecurityTabType) => {
     const [isCollapsed, setIsCollapsed] = useState(false)
@@ -405,6 +422,7 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: Secu
         scanned: false,
         isLoading: !!artifactId,
         isError: false,
+        ScanToolId: null,
     })
     const { appId } = useParams<{ appId: string }>()
     const { push } = useHistory()
@@ -419,6 +437,7 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: Secu
                 scanned: result.scanned,
                 isLoading: false,
                 isError: false,
+                ScanToolId: result.scanToolId,
             })
         } catch (error) {
             // showError(error);
@@ -433,7 +452,7 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: Secu
     function toggleCollapse() {
         setIsCollapsed(!isCollapsed)
     }
-
+        
     useEffect(() => {
         if (artifactId) {
             callGetSecurityIssues()
@@ -472,8 +491,9 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: Secu
             return <ImageNotScannedView />
         }
     } else if (artifactId && securityData.scanned && !securityData.vulnerabilities.length) {
-        return <NoVulnerabilityView />
+        return <NoVulnerabilityViewWithTool scanToolId={securityData.ScanToolId}/>  
     }
+    const scanToolId= securityData.ScanToolId
 
     return (
         <>
@@ -497,7 +517,9 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: Secu
                     {severityCount.critical === 0 && severityCount.moderate === 0 && severityCount.low !== 0 ? (
                         <span className="dc__fill-low">{severityCount.low} Low</span>
                     ) : null}
-                    <div className="security-scan__type">post build execution</div>
+                    <div className="security-scan__type flex">
+                        <ScannedByToolModal scanToolId={scanToolId}/>
+                    </div>
                 </div>
                 {isCollapsed ? (
                     ''

src/assets/icons/ic-clair.svg

@@ -17,7 +17,7 @@ import { DOCUMENTATION, TERMINAL_STATUS_MAP } from '../../../../config'
 import { extractImage } from '../../service'
 import { EMPTY_STATE_STATUS } from '../../../../config/constantMessaging'
 
-const ApprovedArtifact = importComponentFromFELibrary('ApprovedArtifact')
+const ApprovedArtifact = importComponentFromFELibrary && importComponentFromFELibrary('ApprovedArtifact')
 
 export default function Artifacts({
     status,

src/assets/icons/ic-trivy-to-clair.svg

@@ -10,7 +10,8 @@ export const CI_MATERIAL_EMPTY_STATE_MESSAGING = {
     Retry: 'Retry',
     WebhookModalCTA: 'View all incoming webhook payloads',
     NoCommitEligibleCommit: 'No eligible commit found in recent commits',
-    NoCommitEligibleCommitSubtitle: 'Commits that contain changes only in excluded files or folders are not eligible for build.',
+    NoCommitEligibleCommitSubtitle:
+        'Commits that contain changes only in excluded files or folders are not eligible for build.',
     NoCommitEligibleCommitButtonText: 'Show excluded commits',
 }
 export const IGNORE_CACHE_INFO = {
@@ -25,11 +26,11 @@ export const IGNORE_CACHE_INFO = {
     },
     CacheNotAvailable: {
         title: 'Cache will be generated for this pipeline run',
-        infoText: 'Cache will be used in future runs to reduce build time.'
+        infoText: 'Cache will be used in future runs to reduce build time.',
     },
     IgnoreCache: {
         title: 'Ignore Cache',
-        infoText: 'Ignoring cache will lead to longer build time.'
+        infoText: 'Ignoring cache will lead to longer build time.',
     },
 }
 export const BRANCH_REGEX_MODAL_MESSAGING = {
@@ -75,11 +76,20 @@ export const TRIGGER_VIEW_GA_EVENTS = {
     ApprovalNodeClicked: {
         category: 'Trigger View',
         action: 'Approval Node Clicked',
-    }
+    },
 }
 
 export const ARTIFACT_STATUS = {
     Progressing: 'Progressing',
     Degraded: 'Degraded',
     Failed: 'Failed',
 }
+
+export const NO_VULNERABILITY_TEXT = {
+    Secured: 'You’re secure!',
+    NoVulnerabilityFound: 'No security vulnerability found for this image.',
+}
+export const IMAGE_SCAN_TOOL = {
+    Clair: 'Clair',
+    Trivy: 'Trivy',
+}

src/assets/icons/ic-trivy.svg

@@ -950,6 +950,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
                                 node[this.state.materialType][materialIndex]['lastExecution'] =
                                     response.result.lastExecution
                                 node[this.state.materialType][materialIndex]['vulnerabilitiesLoading'] = false
+                                node[this.state.materialType][materialIndex]['scanToolId']=response.result.scanToolId
                             }
                             return node
                         })

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

@@ -42,7 +42,6 @@ import { CDButtonLabelMap, getCommonConfigSelectStyles, TriggerViewContext } fro
 import { getLatestDeploymentConfig, getRecentDeploymentConfig, getSpecificDeploymentConfig } from '../../service'
 import GitCommitInfoGeneric from '../../../common/GitCommitInfoGeneric'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
-import { ModuleNameMap } from '../../../../config'
 import { ModuleStatus } from '../../../v2/devtronStackManager/DevtronStackManager.type'
 import { DropdownIndicator, Option } from '../../../v2/common/ReactSelect.utils'
 import {
@@ -54,7 +53,9 @@ import {
 } from './TriggerView.utils'
 import TriggerViewConfigDiff from './triggerViewConfigDiff/TriggerViewConfigDiff'
 import Tippy from '@tippyjs/react'
-import { ARTIFACT_STATUS } from './Constants'
+import { ARTIFACT_STATUS,NO_VULNERABILITY_TEXT} from './Constants'
+import { ScannedByToolModal } from '../../../common/security/ScannedByToolModal'
+import { ModuleNameMap } from '../../../../config'
 
 const ApprovalInfoTippy = importComponentFromFELibrary('ApprovalInfoTippy')
 const ExpireApproval = importComponentFromFELibrary('ExpireApproval')
@@ -221,15 +222,24 @@ export class CDMaterial extends Component<CDMaterialProps, CDMaterialState> {
             )
         } else if (!mat.vulnerabilitiesLoading && mat.vulnerabilities.length === 0) {
             return (
-                <div className="security-tab-empty">
-                    <p className="security-tab-empty__title">No vulnerabilities Found</p>
+                <div className="security-tab-empty summary-view__card">
+                    <p className="security-tab-empty__title">{NO_VULNERABILITY_TEXT.Secured}</p>
+                    <p>{NO_VULNERABILITY_TEXT.NoVulnerabilityFound}</p>
                     <p className="security-tab-empty__subtitle">{mat.lastExecution}</p>
+                    <p className="workflow__header dc__border-radius-24 bcn-0">
+                        <ScannedByToolModal scanToolId={mat.scanToolId} />
+                    </p>
                 </div>
             )
         } else
             return (
                 <div className="security-tab">
-                    <p className="security-tab__last-scanned">Scanned on {mat.lastExecution} </p>
+                    <div className="flexbox dc__content-space">
+                        <span className="flex left security-tab__last-scanned ">Scanned on {mat.lastExecution} </span>
+                        <span className="flex right">
+                            <ScannedByToolModal scanToolId={mat.scanToolId} />
+                        </span>
+                    </div>
                     <ScanVulnerabilitiesTable vulnerabilities={mat.vulnerabilities} />
                 </div>
             )