feat: Dockerfile hadolint scan

config.md

@@ -18,7 +18,8 @@
 | ENABLE_CHART_SEARCH_IN_HELM_DEPLOY                        | "true"                                   | Enable chart search in Helm deploy                                                                               |
 | ENABLE_EXTERNAL_ARGO_CD                                   | "true"                                   | Enable External Argo CD                                                                                          |
 | ENABLE_SCOPED_VARIABLES                                   | "false"                                  | For enabling scoped variable from UI, also need to enable it in backend.                                         |
-| FORCE_SECURITY_SCANNING                                   | "false"                                  | Force security scanning                                                                                          |
+| FORCE_SECURITY_SCANNING                                   | "false"                                  | Force security                                                                                                   |
+| scanning                                                  |                                          |
 | GA_ENABLED                                                | "true"                                   | Enable Google Analytics (GA)                                                                                     |
 | GA_TRACKING_ID                                            | G-XXXXXXXX                               | Google Analytics tracking ID                                                                                     |
 | GLOBAL_API_TIMEOUT                                        | 60000                                    | Default timeout for all API requests in DASHBOARD                                                                |

package.json

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

src/components/CIPipelineN/Build.tsx

@@ -21,6 +21,7 @@ import {
     CiPipelineSourceTypeOption,
     CustomInput,
     SourceTypeMap,
+    Icon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ViewType } from '../../config'
 import { createWebhookConditionList } from '../ciPipeline/ciPipeline.service'
@@ -166,6 +167,12 @@ export const Build = ({
         setFormData(_formData)
     }
 
+    const handleDockerfileScanToggle = (): void => {
+        const _formData = { ...formData }
+        _formData.dockerfileScanEnabled = !_formData.dockerfileScanEnabled
+        setFormData(_formData)
+    }
+
     const renderBasicCI = () => {
         const _webhookData: WebhookCIProps = {
             webhookConditionList: formData.webhookConditionList,
@@ -206,53 +213,65 @@ export const Build = ({
 
     const renderPipelineName = () => {
         return (
-            <label className="form__row">
-                <CustomInput
-                    name="name"
-                    label="Pipeline Name"
-                    disabled={!!ciPipeline?.id}
-                    placeholder="e.g. my-first-pipeline"
-                    type="text"
-                    value={formData.name}
-                    onChange={handlePipelineName}
-                    required
-                    error={formDataErrorObj.name && !formDataErrorObj.name.isValid && formDataErrorObj.name.message}
-                />
-            </label>
+            <CustomInput
+                name="name"
+                label="Pipeline Name"
+                disabled={!!ciPipeline?.id}
+                placeholder="e.g. my-first-pipeline"
+                type="text"
+                value={formData.name}
+                onChange={handlePipelineName}
+                required
+                error={formDataErrorObj.name && !formDataErrorObj.name.isValid && formDataErrorObj.name.message}
+            />
         )
     }
 
     const renderScanner = () => (
-        <>
-            <hr />
-            <div>
-                <div
-                    className="en-2 bw-1 br-4 pt-12 pb-12 pl-16 pr-12"
-                    style={{ display: 'grid', gridTemplateColumns: '52px auto 32px' }}
-                >
-                    <BugScanner />
-                    <div>
-                        <p className="fs-13 lh-20 fw-6 cn-9 mb-4">Scan for vulnerabilities</p>
-                        <p className="fs-13 lh-18 mb-0 fs-12">Perform security scan after container image is built.</p>
-                    </div>
-                    <DTSwitch
-                        isDisabled={window._env_.FORCE_SECURITY_SCANNING && formData.scanEnabled}
-                        ariaLabel="Toggle scan for security vulnerabilities"
-                        isChecked={formData.scanEnabled}
-                        onChange={handleScanToggle}
-                        name="create-build-pipeline-scan-vulnerabilities-toggle"
-                    />
+        <div className="en-2 bw-1 br-4 p-16 flexbox-col dc__gap-16">
+            <div style={{ display: 'grid', gridTemplateColumns: '52px auto 32px' }}>
+                <div className="flex icon-dim-40 scan-icon-wrapper">
+                    <Icon name="ic-bg-scan" size={30} color={null} />
+                </div>
+                <div>
+                    <p className="fs-13 lh-20 fw-6 cn-9 mb-4">Scan for vulnerabilities</p>
+                    <p className="fs-13 lh-18 mb-0 fs-12">Perform security scan after container image is built.</p>
                 </div>
+                <DTSwitch
+                    isDisabled={window._env_.FORCE_SECURITY_SCANNING && formData.scanEnabled}
+                    ariaLabel="Toggle scan for security vulnerabilities"
+                    isChecked={formData.scanEnabled}
+                    onChange={handleScanToggle}
+                    name="create-build-pipeline-scan-vulnerabilities-toggle"
+                />
+            </div>
+            <div className="dc__border-bottom dc__secondary" />
+            <div style={{ display: 'grid', gridTemplateColumns: '52px auto 32px' }}>
+                <div className="icon-dim-40 scan-icon-wrapper flex">
+                    <Icon name="ic-bg-docker-scanner" size={30} color={null} />
+                </div>
+                <div>
+                    <p className="fs-13 lh-20 fw-6 cn-9 mb-4">Scan for recommendations</p>
+                    <p className="fs-13 lh-18 mb-0 fs-12">
+                        Perform linting scan of your docker file and get recommended optimizations.
+                    </p>
+                </div>
+                <DTSwitch
+                    ariaLabel="Toggle scan for security vulnerabilities"
+                    isChecked={formData.dockerfileScanEnabled}
+                    onChange={handleDockerfileScanToggle}
+                    name="create-build-pipeline-scan-vulnerabilities-toggle"
+                />
             </div>
-        </>
+        </div>
     )
 
     return pageState === ViewType.LOADING.toString() ? (
         <div style={{ minHeight: '200px' }} className="flex">
             <Progressing pageLoader />
         </div>
     ) : (
-        <div className="p-20 ci-scrollable-content">
+        <div className="p-20 ci-scrollable-content flexbox-col dc__gap-16">
             {renderBasicCI()}
             {!isJobView && isAdvanced && (
                 <>

src/components/CIPipelineN/CIPipeline.tsx

@@ -128,6 +128,7 @@
         materials: [],
         triggerType: window._env_.DEFAULT_CI_TRIGGER_TYPE_MANUAL ? TriggerType.Manual : TriggerType.Auto,
         scanEnabled: false,
+        dockerfileScanEnabled: false,
         gitHost: undefined,
         webhookEvents: [],
         ciPipelineSourceTypeOptions: [],
@@ -616,7 +617,10 @@
         validateStage(BuildStageVariable.Build, formData)
         validateStage(BuildStageVariable.PostBuild, formData)
         const scanValidation =
-            isJobCard || !isSecurityModuleInstalled || formData.scanEnabled || !window._env_.FORCE_SECURITY_SCANNING
+            isJobCard ||
+            !isSecurityModuleInstalled ||
+            formData.scanEnabled ||
+            !window._env_.FORCE_SECURITY_SCANNING
         if (!scanValidation) {
             setApiInProgress(false)
             ToastManager.showToast({
@@ -679,6 +683,7 @@
                 ...formData,
                 materials: _materials,
                 scanEnabled: !isJobCard && isSecurityModuleInstalled ? formData.scanEnabled : false,
+                dockerfileScanEnabled: !isJobCard && isSecurityModuleInstalled ? formData.dockerfileScanEnabled : false,
             },
             _ciPipeline,
             _materials,

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

@@ -14,9 +14,17 @@
  * limitations under the License.
  */
 
-import { getSecurityScan, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import { useEffect } from 'react'
 
-import { UseGetAppSecurityDetailsProps, UseGetAppSecurityDetailsReturnType } from './appDetails.type'
+import { getSecurityScan, getSecurityScanRecommendations, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+
+import {
+    UseGetAppSecurityDetailsProps,
+    UseGetAppSecurityDetailsReturnType,
+    UseSecurityRecommendationReturnType,
+} from './appDetails.type'
+
+const SECURITY_SCAN_RECOMMENDATIONS_POLLING_INTERVAL = 3000
 
 export const useGetAppSecurityDetails = ({
     appId,
@@ -26,7 +34,7 @@
 }: UseGetAppSecurityDetailsProps): UseGetAppSecurityDetailsReturnType => {
     const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
         () => getSecurityScan({ appId, envId, artifactId, installedAppId }),
-        [appId, envId, installedAppId],
+        [appId, envId, artifactId, installedAppId],
         !!appId || !!installedAppId,
     )
 
@@ -37,3 +45,36 @@
         reloadScanResult,
     }
 }
+
+export const useGetAppSecurityDetailsRecommendations = ({
+    appId,
+    buildId,
+}: UseGetAppSecurityDetailsProps): UseSecurityRecommendationReturnType => {
+    const [
+        scanRecommendationsResultLoading,
+        scanRecommendationsResultResponse,
+        scanRecommendationsResultError,
+        reloadScanRecommendationsResult,
+    ] = useAsync(() => getSecurityScanRecommendations({ appId, buildId }), [appId, buildId], !!appId && !!buildId)
+
+    useEffect(() => {
+        if (!appId || !buildId || scanRecommendationsResultResponse?.result?.status !== 0) {
+            return undefined
+        }
+
+        const timeoutId = window.setTimeout(() => {
+            reloadScanRecommendationsResult()
+        }, SECURITY_SCAN_RECOMMENDATIONS_POLLING_INTERVAL)
+
+        return () => {
+            window.clearTimeout(timeoutId)
+        }
+    }, [appId, buildId, reloadScanRecommendationsResult, scanRecommendationsResultResponse?.result?.status])
+
+    return {
+        scanRecommendationsResultLoading,
+        scanRecommendationsResultResponse,
+        scanRecommendationsResultError,
+        reloadScanRecommendationsResult,
+    }
+}

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

@@ -22,14 +22,21 @@ import {
     AppEnvironment,
     DeploymentStatusDetailsBreakdownDataType,
     EnvAppsMetaDTO,
+    FiltersTypeEnum,
     OptionType,
     ResponseType,
+    ScanRecommendationsDTO,
     ScanResultDTO,
     SelectPickerProps,
     ServerErrors,
+    TableCellComponentProps,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { AggregatedNodes, UseGetDTAppDetailsReturnType } from '../../types'
+import {
+    SecurityScanRecommendationRowTypes,
+    SecurityScanRecommendationTableAdditionalProps,
+} from '../cIDetails/DockerfileScanRecommendation/types'
 
 export enum AppMetricsTab {
     Aggregate = 'aggregate',
@@ -182,13 +189,20 @@ export interface UseGetAppSecurityDetailsProps {
     envId?: number
     installedAppId?: number
     artifactId?: number
+    buildId?: number
 }
 export interface UseGetAppSecurityDetailsReturnType {
     scanResultLoading: boolean
     scanResultResponse: ResponseType<ScanResultDTO>
     scanResultError: ServerErrors
     reloadScanResult: () => void
 }
+export interface UseSecurityRecommendationReturnType {
+    scanRecommendationsResultLoading: boolean
+    scanRecommendationsResultResponse: ResponseType<ScanRecommendationsDTO>
+    scanRecommendationsResultError: ServerErrors
+    reloadScanRecommendationsResult: () => void
+}
 
 export enum HibernationModalTypes {
     HIBERNATE = 'hibernate',
@@ -218,3 +232,24 @@ export type AppEnvSelectorProps =
           applications: EnvAppsMetaDTO['apps']
           environments?: never
       }
+
+export type SecurityScanRecommendationColumn = {
+    label: string
+    field: string
+    size: { fixed: number } | null
+    CellComponent: (
+        props: TableCellComponentProps<
+            SecurityScanRecommendationRowTypes,
+            FiltersTypeEnum.URL,
+            SecurityScanRecommendationTableAdditionalProps
+        >,
+    ) => JSX.Element | null
+} & (
+    | {
+          isSortable: true
+          comparator: (a: unknown, b: unknown) => number
+      }
+    | {
+          isSortable?: false
+      }
+)

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

@@ -41,8 +41,6 @@ import {
     EMPTY_STATE_STATUS,
     TabGroup,
     TRIGGER_STATUS_PROGRESSING,
-    ErrorScreenManager,
-    SecurityDetailsCards,
     sanitizeTargetPlatforms,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Switch, Route, Redirect, useRouteMatch, useParams, useHistory, generatePath } from 'react-router-dom'
@@ -54,18 +52,15 @@ import {
     getArtifactForJobCi,
 } from '../../service'
 import { URLS, Routes } from '../../../../config'
-import { BuildDetails, CIPipeline, HistoryLogsType, SecurityTabType } from './types'
-import { ImageNotScannedView, CIRunningView } from './cIDetails.util'
+import { BuildDetails, CIPipeline, HistoryLogsType } from './types'
 import './ciDetails.scss'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
 import { ModuleStatus } from '../../../v2/devtronStackManager/DevtronStackManager.type'
 import { getModuleConfigured } from '../appDetails/appDetails.service'
 import { CIPipelineBuildType } from '../../../ciPipeline/types'
 import { renderCIListHeader, renderDeploymentHistoryTriggerMetaText } from '../cdDetails/utils'
-import { importComponentFromFELibrary } from '@Components/common'
-import { useGetAppSecurityDetails } from '../appDetails/AppSecurity'
+import { SecurityTab } from './SecurityTab'
 
-const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 const terminalStatus = new Set(['succeeded', 'failed', 'error', 'cancelled', 'nottriggered', 'notbuilt'])
 const statusSet = new Set(['starting', 'running', 'pending'])
 
@@ -219,7 +214,9 @@ export default function CIDetails({ isJobView, filteredEnvIds }: { isJobView?: b
     const pipeline = pipelinesMap.get(+pipelineId)
 
     const redirectToArtifactLogs = () => {
-        push(`${URLS.APPLICATION_MANAGEMENT_APP}/${pipeline.parentAppId}/${URLS.APP_CI_DETAILS}/${pipeline.parentCiPipeline}/logs`)
+        push(
+            `${URLS.APPLICATION_MANAGEMENT_APP}/${pipeline.parentAppId}/${URLS.APP_CI_DETAILS}/${pipeline.parentCiPipeline}/logs`,
+        )
     }
     const renderSourcePipelineButton = () => {
         return (
@@ -484,7 +481,7 @@ export const Details = ({
                                     ? [
                                           {
                                               id: 'security-tab',
-                                              label: 'Security',
+                                              label: 'Reports',
                                               tabType: 'navLink' as const,
                                               props: {
                                                   to: 'security',
@@ -649,46 +646,3 @@ const HistoryLogs = ({
     )
 }
 
-const SecurityTab = ({ artifactId, status, appIdFromParent }: SecurityTabType) => {
-    const { appId } = useParams<{ appId: string }>()
-
-    const computedAppId = appId ?? appIdFromParent
-
-    const { scanResultLoading, scanResultResponse, scanResultError, reloadScanResult } = useGetAppSecurityDetails({
-        appId: +computedAppId,
-        artifactId,
-    })
-
-    if (['starting', 'running'].includes(status.toLowerCase())) {
-        return <CIRunningView isSecurityTab />
-    }
-
-    if (!artifactId) {
-        return (
-            <GenericEmptyState
-                title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsGenerated}
-                subTitle={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsError}
-            />
-        )
-    }
-
-    if (scanResultLoading) {
-        return (
-            <div className="bg__primary flex-grow-1">
-                <Progressing pageLoader />
-            </div>
-        )
-    }
-    if (scanResultError) {
-        return <ErrorScreenManager code={scanResultError.code} reload={reloadScanResult} />
-    }
-    if (!scanResultResponse?.result.scanned) {
-        return <ImageNotScannedView />
-    }
-
-    return (
-        <div className="p-20 bg__primary flex-grow-1">
-            <SecurityDetailsCards scanResult={scanResultResponse?.result} Sidebar={SecurityModalSidebar} />
-        </div>
-    )
-}