Merge pull request #2295 from devtron-labs/feat/build-cache

feat: ignore build cache at workflow level

package.json

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

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigToolbar.tsx

@@ -138,7 +138,7 @@ const ConfigToolbar = ({
         if (configHeaderTab === ConfigHeaderTabType.INHERITED) {
             return (
                 <div className="flexbox dc__align-items-center dc__gap-6">
-                    <ICInfoOutlineGrey className="p-2 icon-dim-20 dc__no-shrink" />
+                    <ICInfoOutlineGrey className="p-2 icon-dim-20 dc__no-shrink scn-6" />
                     <span className="cn-9 fs-12 fw-4 lh-20">Inherited from</span>
                     <BaseConfigurationNavigation baseConfigurationURL={baseConfigurationURL} />
                 </div>
@@ -149,7 +149,7 @@ const ConfigToolbar = ({
             <>
                 {headerMessage && configHeaderTab === ConfigHeaderTabType.VALUES && !showProtectedTabs && (
                     <div className="flexbox dc__align-items-center dc__gap-6">
-                        <ICInfoOutlineGrey className="p-2 icon-dim-20 dc__no-shrink" />
+                        <ICInfoOutlineGrey className="p-2 icon-dim-20 dc__no-shrink scn-6" />
                         <span className="cn-9 fs-12 fw-4 lh-20">{headerMessage}</span>
                     </div>
                 )}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx

@@ -1677,7 +1677,7 @@ const DeploymentTemplate = ({
 
         return (
             <div className="flexbox dc__gap-6 dc__align-items-center dc__border-top-n1 bc-n50 py-6 px-10">
-                <ICInfoOutlineGrey className="flex icon-dim-16 p-2 dc__no-shrink" />
+                <ICInfoOutlineGrey className="flex icon-dim-16 dc__no-shrink scn-6" />
                 <div className="flexbox">
                     <span className="cn-8 fs-12 fw-4 lh-20 dc__truncate">
                         Application metrics is {!baseDeploymentTemplateData?.isAppMetricsEnabled ? 'not' : ''} enabled

src/components/ApplicationGroup/CreateAppGroup.tsx

@@ -189,7 +189,7 @@ export default function CreateAppGroup({
             <GenericEmptyState
                 title={title}
                 image={Info}
-                imageClassName="h-20"
+                imageClassName="h-20 scn-6"
                 styles={{ height: 'calc(100vh - 420px)' }}
             />
         )

src/components/CIPipelineN/CIPipeline.tsx

@@ -129,6 +129,8 @@ export default function CIPipeline({
     const [isSecurityModuleInstalled, setSecurityModuleInstalled] = useState<boolean>(false)
     const [selectedEnv, setSelectedEnv] = useState<EnvironmentWithSelectPickerType>()
     const [environments, setEnvironments] = useState<EnvironmentWithSelectPickerType[]>([])
+    // NOTE: don't want to show the warning until fetch; therefore true by default
+    const [isBlobStorageConfigured, setIsBlobStorageConfigured] = useState(true)
     const [formData, setFormData] = useState<PipelineFormType>({
         name: '',
         args: [],
@@ -475,13 +477,14 @@ export default function CIPipeline({
                     validateStage(BuildStageVariable.Build, ciPipelineResponse.form)
                     validateStage(BuildStageVariable.PostBuild, ciPipelineResponse.form)
                     setFormData(ciPipelineResponse.form)
+                    setIsBlobStorageConfigured(ciPipelineResponse.isBlobStorageConfigured)
                     setCIPipeline(ciPipelineResponse.ciPipeline)
                     await getInitialPlugins(ciPipelineResponse.form)
                     await getEnvironments(ciPipelineResponse.ciPipeline.environmentId)
                     setIsAdvanced(true)
                 }
             } else {
-                const ciPipelineResponse = await getInitData(appId, true, !isJobCard)
+                const ciPipelineResponse = await getInitData(appId, true, isJobCard)
                 if (ciPipelineResponse) {
                     setFormData(ciPipelineResponse.result.form)
                     await getInitialPlugins(ciPipelineResponse.result.form)
@@ -810,6 +813,7 @@ export default function CIPipeline({
             handleDisableParentModalCloseUpdate,
             handleValidateMandatoryPlugins,
             mandatoryPluginData,
+            isBlobStorageConfigured,
             uploadFile,
         }),
         [
@@ -824,6 +828,7 @@ export default function CIPipeline({
             pluginDataStore,
             availableTags,
             mandatoryPluginData,
+            isBlobStorageConfigured,
         ],
     )
 

src/components/CIPipelineN/Sidebar.tsx

@@ -22,6 +22,7 @@ import {
     PipelineFormType,
     SelectPicker,
     ResourceKindType,
+    WORKFLOW_CACHE_CONFIG_ENUM,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { BuildStageVariable, DOCUMENTATION, TriggerType } from '../../config'
@@ -37,6 +38,7 @@ import { GeneratedHelmPush } from '../cdPipeline/cdPipeline.types'
 import { EnvironmentList } from './EnvironmentList'
 
 const MandatoryPluginWarning = importComponentFromFELibrary('MandatoryPluginWarning')
+const CacheConfiguration = importComponentFromFELibrary('CacheConfiguration', null, 'function')
 
 export const Sidebar = ({
     isJobView,
@@ -60,6 +62,7 @@ export const Sidebar = ({
         isVirtualEnvironment,
         getPrePostStageInEnv,
         mandatoryPluginData,
+        isBlobStorageConfigured,
     } = useContext(pipelineContext)
 
     const [addConfigSecret, setAddConfigSecret] = useState<boolean>(false)
@@ -279,8 +282,8 @@ export const Sidebar = ({
         const triggerValue = isPreBuildTab ? formData.preBuildStage.triggerType : formData.postBuildStage.triggerType
 
         return (
-            <div className="sidebar-action-container sidebar-action-container-border">
-                <div className="dc__uppercase fw-6 fs-12 cn-6 mb-12">
+            <div className="sidebar-action-container sidebar-action-container-border flexbox-col dc__gap-4">
+                <div className="dc__uppercase fw-6 fs-12 cn-6">
                     Trigger {isPreBuildTab ? 'PRE' : 'POST'}-DEPLOYMENT STAGE
                 </div>
                 <div>
@@ -310,6 +313,35 @@ export const Sidebar = ({
         )
     }
 
+    const handleSetIsInheriting = () => {
+        // NOTE: don't do anything if in oss
+        if (!formData.workflowCacheConfig) {
+            return
+        }
+
+        const newWorkflowCacheConfigType =
+            formData.workflowCacheConfig.type === WORKFLOW_CACHE_CONFIG_ENUM.INHERIT
+                ? WORKFLOW_CACHE_CONFIG_ENUM.OVERRIDE
+                : WORKFLOW_CACHE_CONFIG_ENUM.INHERIT
+
+        setFormData({ ...formData, workflowCacheConfig: {
+            ...formData.workflowCacheConfig,
+            type: newWorkflowCacheConfigType,
+            ...(newWorkflowCacheConfigType === WORKFLOW_CACHE_CONFIG_ENUM.INHERIT ? {
+                value: formData.workflowCacheConfig.globalValue
+            } : {}),
+        }})
+    }
+
+    const handleSetUseRemoteCache = () => {
+        // NOTE: don't do anything if in oss
+        if (!formData.workflowCacheConfig) {
+            return
+        }
+
+        setFormData({ ...formData, workflowCacheConfig: { ...formData.workflowCacheConfig, value: !formData.workflowCacheConfig.value } })
+    }
+
     return (
         <div>
             {activeStageName !== BuildStageVariable.Build ? (
@@ -348,8 +380,8 @@ export const Sidebar = ({
                     )}
                 </div>
             ) : (
-                <div className="sidebar-action-container pr-20">
-                    <div className="dc__uppercase fw-6 fs-12 cn-6 mb-12">
+                <div className="sidebar-action-container pr-20 flexbox-col dc__gap-4">
+                    <div className="dc__uppercase fw-6 fs-12 cn-6">
                         Trigger {isJobCard ? 'JOB' : 'BUILD'} PIPELINE
                     </div>
                     <div>
@@ -379,6 +411,18 @@ export const Sidebar = ({
             )}
             {isCdPipeline && activeStageName !== BuildStageVariable.Build && renderConfigSecret()}
 
+            {!isCdPipeline && CacheConfiguration && activeStageName === BuildStageVariable.Build && formData.workflowCacheConfig && (
+                <div className='sidebar-action-container sidebar-action-container-border dc__border-top-n1'>
+                    <CacheConfiguration
+                        isInheriting={formData.workflowCacheConfig.type === WORKFLOW_CACHE_CONFIG_ENUM.INHERIT}
+                        handleSetIsInheriting={handleSetIsInheriting}
+                        useRemoteCache={formData.workflowCacheConfig.value}
+                        handleSetUseRemoteCache={handleSetUseRemoteCache}
+                        isBlobStorageConfigured={isBlobStorageConfigured}
+                    />
+                </div>
+            )}
+
             {!isCdPipeline && (
                 <div className="sidebar-action-container pr-20">
                     <div className="fw-6 fs-13 cn-9 mb-8">📙 Need help?</div>

src/components/app/details/triggerView/Constants.ts

@@ -47,6 +47,8 @@ export const IGNORE_CACHE_INFO = {
     IgnoreCache: {
         title: 'Ignore Cache',
         infoText: 'Ignoring cache will lead to longer build time.',
+        infoTooltipContent:
+            'Ignores existing Docker layer caches. A new cache will be generated and stored for future pipeline runs.',
     },
 }
 export const BRANCH_REGEX_MODAL_MESSAGING = {

src/components/app/details/triggerView/ciMaterial.tsx

@@ -29,8 +29,10 @@ import {
     SourceTypeMap,
     CommonNodeAttr,
     noop,
+    Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { CIMaterialProps, CIMaterialState, RegexValueType } from './types'
+import { ReactComponent as ICInfoOutline } from '@Icons/ic-info-outline-grey.svg'
 import { ReactComponent as Play } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Info } from '../../../../assets/icons/info-filled.svg'
 import { ReactComponent as Storage } from '../../../../assets/icons/ic-storage.svg'
@@ -167,8 +169,18 @@ class CIMaterial extends Component<CIMaterialProps, CIMaterialState> {
                 data-testid="set-clone-directory"
             >
                 <div className="mr-5">
-                    <div className="fs-13 fw-6">{IGNORE_CACHE_INFO.IgnoreCache.title}</div>
-                    <div className="fs-12 fw-4">{IGNORE_CACHE_INFO.IgnoreCache.infoText}</div>
+                    <div className="fs-13 fw-6 lh-20">{IGNORE_CACHE_INFO.IgnoreCache.title}</div>
+
+                    <div className='flex dc__gap-4'>
+                        <span className="fs-12 fw-4 lh-16">{IGNORE_CACHE_INFO.IgnoreCache.infoText}</span>
+
+                        <Tooltip content={IGNORE_CACHE_INFO.IgnoreCache.infoTooltipContent} alwaysShowTippyOnHover>
+                            {/* NOTE: need to wrap react elements with html elements when passing as children to tooltip */}
+                            <div>
+                                <ICInfoOutline className='dc__no-shrink icon-dim-16 flex scn-6' />
+                            </div>
+                        </Tooltip>
+                    </div>
                 </div>
             </Checkbox>
         )

src/components/ciPipeline/ciPipeline.service.ts

@@ -23,12 +23,14 @@ import {
     PluginType,
     RefVariableType,
     PipelineBuildStageType,
+    getModuleConfigured,
+    ModuleNameMap,
     VariableTypeFormat,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes, SourceTypeMap, TriggerType, ViewType } from '../../config'
 import { getSourceConfig, getWebhookDataMetaConfig } from '../../services/service'
 import { CiPipelineSourceTypeBaseOptions } from '../CIPipelineN/ciPipeline.utils'
-import { PatchAction } from './types'
+import { CIPipelineBuildType, PatchAction } from './types'
 import { safeTrim } from '../../util/Util'
 import { ChangeCIPayloadType } from '../workflowEditor/types'
 
@@ -54,18 +56,19 @@ export function getCIPipelineNameSuggestion(appId: string | number): Promise<any
 export function getInitData(
     appId: string | number,
     includeWebhookData: boolean = false,
-    preFillName: boolean = true,
+    isJobCard: boolean
 ): Promise<any> {
     return Promise.all([
         getCIPipelineNameSuggestion(appId),
-        getPipelineMetaConfiguration(appId.toString(), includeWebhookData, true),
-    ]).then(([pipelineNameRes, pipelineMetaConfig]) => {
+        getPipelineMetaConfiguration(appId.toString(), includeWebhookData, true, isJobCard),
+        getModuleConfigured(ModuleNameMap.BLOB_STORAGE),
+    ]).then(([pipelineNameRes, pipelineMetaConfig, { result: { enabled: isBlobStorageConfigured } }]) => {
         const scanEnabled =
             window._env_ && (window._env_.RECOMMEND_SECURITY_SCANNING || window._env_.FORCE_SECURITY_SCANNING)
         return {
             result: {
                 form: {
-                    name: preFillName ? pipelineNameRes.result : '',
+                    name: !isJobCard ? pipelineNameRes.result : '',
                     args: [{ key: '', value: '' }],
                     materials: pipelineMetaConfig.result.materials,
                     gitHost: pipelineMetaConfig.result.gitHost,
@@ -79,9 +82,11 @@ export function getInitData(
                     postBuildStage: emptyStepsData(),
                     scanEnabled,
                     ciPipelineEditable: true,
+                    workflowCacheConfig: pipelineMetaConfig.result.workflowCacheConfig ?? null
                 },
                 loadingData: false,
                 isAdvanced: false,
+                isBlobStorageConfigured,
             },
         }
     })
@@ -92,8 +97,11 @@ export function getCIPipeline(appId: string, ciPipelineId: string): Promise<any>
     return get(URL)
 }
 
-function getPipelineBaseMetaConfiguration(appId: string): Promise<any> {
-    return getSourceConfig(appId).then((response) => {
+function getPipelineBaseMetaConfiguration(
+    appId: string,
+    queryParams: Record<'pipelineType', CIPipelineBuildType.CI_BUILD | CIPipelineBuildType.CI_JOB>
+): Promise<any> {
+    return getSourceConfig(appId, queryParams).then((response) => {
         const materials = response?.result?.material?.map((mat) => {
             return {
                 id: 0,
@@ -116,6 +124,7 @@ function getPipelineBaseMetaConfiguration(appId: string): Promise<any> {
                 webhookEvents: undefined,
                 webhookConditionList: undefined,
                 ciPipelineSourceTypeOptions: _baseCiPipelineSourceTypeOptions,
+                workflowCacheConfig: response?.result?.workflowCacheConfig ?? null
             },
         }
     })
@@ -125,8 +134,13 @@ export function getPipelineMetaConfiguration(
     appId: string,
     includeWebhookData: boolean = false,
     isNewPipeline: boolean = true,
+    isJobCard = false,
 ): Promise<any> {
-    return getPipelineBaseMetaConfiguration(appId).then((baseResponse) => {
+    return getPipelineBaseMetaConfiguration(appId, {
+        // NOTE: need to send pipelineType to get corresponding workflowCacheConfig;
+        // this queryParam will be ignored in oss
+        pipelineType: isJobCard ? CIPipelineBuildType.CI_JOB : CIPipelineBuildType.CI_BUILD
+    }).then((baseResponse) => {
         // if webhook data is not to be included, or materials not found, or multigit new pipeline, then return
         const _materials = baseResponse.result.materials || []
         if (!includeWebhookData || _materials.length == 0 || (isNewPipeline && _materials.length > 1)) {
@@ -170,8 +184,12 @@ export function getInitDataWithCIPipeline(
 ): Promise<any> {
     return Promise.all([
         getCIPipeline(appId, ciPipelineId),
-        getPipelineMetaConfiguration(appId, includeWebhookData, false),
-    ]).then(([ciPipelineRes, pipelineMetaConfig]) => {
+        // NOTE: isJobCard parameter does not matter in this case
+        // isJobCard is only relevant to fetch workflowCacheConfig in meta config
+        // by default BE will send global cache config for that pipelineType (JOB or CI_BUILD)
+        getPipelineMetaConfiguration(appId, includeWebhookData, false, false),
+        getModuleConfigured(ModuleNameMap.BLOB_STORAGE),
+    ]).then(([ciPipelineRes, pipelineMetaConfig, { result: { enabled: isBlobStorageConfigured } }]) => {
         const ciPipeline = ciPipelineRes?.result
         const pipelineMetaConfigResult = pipelineMetaConfig?.result
         return parseCIResponse(
@@ -181,6 +199,7 @@ export function getInitDataWithCIPipeline(
             pipelineMetaConfigResult.gitHost,
             pipelineMetaConfigResult.webhookEvents,
             pipelineMetaConfigResult.ciPipelineSourceTypeOptions,
+            isBlobStorageConfigured,
         )
     })
 }
@@ -305,6 +324,9 @@ function createCIPatchRequest(ciPipeline, formData, isExternalCI: boolean, webho
         linkedCount: ciPipeline.linkedCount,
         isExternal: isExternalCI,
         isManual: formData.triggerType == TriggerType.Manual,
+        ...(formData.workflowCacheConfig ? {
+            workflowCacheConfig: formData.workflowCacheConfig,
+        } : {}),
         ciMaterial: formData.materials
             .filter((mat) => mat.isSelected)
             .map((mat) => {
@@ -480,6 +502,7 @@ function parseCIResponse(
     gitHost,
     webhookEvents,
     ciPipelineSourceTypeOptions,
+    isBlobStorageConfigured?: boolean,
 ) {
     if (ciPipeline) {
         if (ciPipeline.beforeDockerBuildScripts) {
@@ -544,10 +567,12 @@ function parseCIResponse(
                     counterX: +ciPipeline.customTag?.counterX || 0,
                 },
                 enableCustomTag: ciPipeline.enableCustomTag,
+                workflowCacheConfig: ciPipeline.workflowCacheConfig ?? null,
             },
             loadingData: false,
             showPreBuild: ciPipeline.beforeDockerBuildScripts?.length > 0,
             showPostBuild: ciPipeline.afterDockerBuildScripts?.length > 0,
+            isBlobStorageConfigured: isBlobStorageConfigured ?? false,
         }
     }
 }

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx

@@ -270,7 +270,7 @@ export const InputForSelectedOption = ({
                             </div>
                         </div>
                         <div className="flex mt-4 flex-justify-start">
-                            <Info className="icon-dim-16" />
+                            <Info className="icon-dim-16 scn-6" />
                             <div className="ml-4 fs-11 fw-4 cn-7">Browser time zone: {timeZone} </div>
                         </div>
                     </div>