Skip to content

Commit 2006e9a

Browse files
shivani170shivani170
authored
Merge pull request #1588 from devtron-labs/pull-image-digest-cd
feat: Image pull Digest UI for deployment integration
2 parents c03e0fa + 1578d05 commit 2006e9a

File tree

8 files changed

+113
-22
lines changed

8 files changed

+113
-22
lines changed

‎src/assets/icons/ic-docker-with-image.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/components/cdPipeline/BuildCD.tsx‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { ValidationRules } from '../ciPipeline/validationRules'
3737
import { DeploymentAppRadioGroup } from '../v2/values/chartValuesDiff/ChartValuesView.component'
3838
import CodeEditor from '../CodeEditor/CodeEditor'
3939
import CustomImageTags from '../CIPipelineN/CustomImageTags'
40+
import PullImageDigestToggle from './PullImageDigestToggle'
4041

4142
const VirtualEnvSelectionInfoText = importComponentFromFELibrary('VirtualEnvSelectionInfoText')
4243
const HelmManifestPush = importComponentFromFELibrary('HelmManifestPush')
@@ -50,7 +51,7 @@ export default function BuildCD({
5051
parentPipelineId,
5152
isWebhookCD,
5253
dockerRegistries,
53-
envIds
54+
envIds,
5455
}) {
5556
const {
5657
formData,
@@ -66,7 +67,7 @@ export default function BuildCD({
6667
setIsEnvUsedState,
6768
savedCustomTagPattern,
6869
selectedCDStageTypeValue,
69-
setSelectedCDStageTypeValue
70+
setSelectedCDStageTypeValue,
7071
} = useContext(pipelineContext)
7172
const validationRules = new ValidationRules()
7273
let { cdPipelineId } = useParams<{
@@ -243,27 +244,28 @@ export default function BuildCD({
243244
}
244245

245246
const setRepositoryName = (event): void => {
246-
const form = {...formData}
247-
const formDataError = {...formDataErrorObj}
247+
const form = { ...formData }
248+
const formDataError = { ...formDataErrorObj }
248249
formDataError.repositoryError = validationRules.repository(event.target.value)
249250
form.repoName = event.target.value
250251
setFormData(form)
251252
setFormDataErrorObj(formDataError)
252253
}
253254

254255
const handleRegistryChange = (selectedRegistry): void => {
255-
const form = {...formData}
256-
const formDataError = {...formDataErrorObj}
257-
formDataError.containerRegistryError = validationRules.containerRegistry(selectedRegistry.id || formData.containerRegistryName)
256+
const form = { ...formData }
257+
const formDataError = { ...formDataErrorObj }
258+
formDataError.containerRegistryError = validationRules.containerRegistry(
259+
selectedRegistry.id || formData.containerRegistryName,
260+
)
258261
form.selectedRegistry = selectedRegistry
259262
form.containerRegistryName = selectedRegistry.id
260263
setFormData(form)
261264
setFormDataErrorObj(formDataError)
262-
263265
}
264266

265-
const onChangeSetGeneratedHelmPush = (selectedGeneratedHelmValue: string): void => {
266-
const form = {...formData}
267+
const onChangeSetGeneratedHelmPush = (selectedGeneratedHelmValue: string): void => {
268+
const form = { ...formData }
267269
form.generatedHelmPushAction = selectedGeneratedHelmValue
268270
setFormData(form)
269271
}
@@ -331,7 +333,7 @@ export default function BuildCD({
331333
<div className="w-50 mr-8">
332334
<div className="form__label dc__required-field">Environment</div>
333335
<ReactSelect
334-
menuPosition={isAdvanced ? null : "fixed"}
336+
menuPosition={isAdvanced ? null : 'fixed'}
335337
closeMenuOnScroll={true}
336338
isDisabled={!!cdPipelineId}
337339
classNamePrefix="cd-pipeline-environment-dropdown"
@@ -691,16 +693,19 @@ export default function BuildCD({
691693
</>
692694
)}
693695
{isAdvanced && (
694-
<CustomImageTags
695-
formData={formData}
696-
setFormData={setFormData}
697-
formDataErrorObj={formDataErrorObj}
698-
setFormDataErrorObj={setFormDataErrorObj}
699-
isCDBuild={true}
700-
savedTagPattern={savedCustomTagPattern}
701-
selectedCDStageTypeValue={selectedCDStageTypeValue}
702-
setSelectedCDStageTypeValue={setSelectedCDStageTypeValue}
703-
/>
696+
<>
697+
<CustomImageTags
698+
formData={formData}
699+
setFormData={setFormData}
700+
formDataErrorObj={formDataErrorObj}
701+
setFormDataErrorObj={setFormDataErrorObj}
702+
isCDBuild={true}
703+
savedTagPattern={savedCustomTagPattern}
704+
selectedCDStageTypeValue={selectedCDStageTypeValue}
705+
setSelectedCDStageTypeValue={setSelectedCDStageTypeValue}
706+
/>
707+
<PullImageDigestToggle formData={formData} setFormData={setFormData} />
708+
</>
704709
)}
705710
</>
706711
)

‎src/components/cdPipeline/NewCDPipeline.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,8 @@ export default function NewCDPipeline({
126126
repoName: '',
127127
selectedRegistry: null,
128128
generatedHelmPushAction: GeneratedHelmPush.DO_NOT_PUSH,
129+
isDigestEnforcedForPipeline: false,
130+
isDigestEnforcedForEnv: false,
129131
})
130132
const [configMapAndSecrets, setConfigMapAndSecrets] = useState([])
131133
const [savedCustomTagPattern, setSavedCustomTagPattern] = useState<string>('')
@@ -444,6 +446,8 @@ export default function NewCDPipeline({
444446
form.customTag = pipelineConfigFromRes.customTag
445447
form.enableCustomTag = pipelineConfigFromRes.enableCustomTag
446448
form.customTagStage = pipelineConfigFromRes.customTagStage
449+
form.isDigestEnforcedForEnv = pipelineConfigFromRes.isDigestEnforcedForEnv
450+
form.isDigestEnforcedForPipeline = pipelineConfigFromRes.isDigestEnforcedForEnv || pipelineConfigFromRes.isDigestEnforcedForPipeline
447451

448452
if (pipelineConfigFromRes?.preDeployStage) {
449453
if(pipelineConfigFromRes.preDeployStage.steps?.length > 0){
@@ -565,6 +569,8 @@ export default function NewCDPipeline({
565569
},
566570
enableCustomTag: formData.enableCustomTag,
567571
customTagStage: formData?.customTagStage ? formData.customTagStage : StageTypeEnums.PRE_CD,
572+
isDigestEnforcedForPipeline: formData.isDigestEnforcedForPipeline,
573+
isDigestEnforcedForEnv: formData.isDigestEnforcedForEnv,
568574
}
569575

570576
if (isVirtualEnvironment) {

‎src/components/cdPipeline/PullImageDigestToggle.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { ConditionalWrap, Toggle } from '@devtron-labs/devtron-fe-common-lib'
2+
import React from 'react'
3+
import Tippy from '@tippyjs/react'
4+
import { ReactComponent as DockerWithImage } from '../../assets/icons/ic-docker-with-image.svg'
5+
import { PullImageDigestToggleType } from './types'
6+
import { DIGEST_DISABLE_TOGGLE_MESSAGE } from '../../config'
7+
8+
function PullImageDigestToggle({ formData, setFormData }: PullImageDigestToggleType): JSX.Element {
9+
const handleImageDigestToggle = (): void => {
10+
const _formData = { ...formData }
11+
_formData.isDigestEnforcedForPipeline = !_formData.isDigestEnforcedForPipeline
12+
setFormData(_formData)
13+
}
14+
15+
const renderDogestToggle = () => {
16+
return (
17+
<ConditionalWrap
18+
condition={formData.isDigestEnforcedForEnv}
19+
wrap={(children) => (
20+
<Tippy className="default-tt w-200" content={DIGEST_DISABLE_TOGGLE_MESSAGE}>
21+
<div>{children}</div>
22+
</Tippy>
23+
)}
24+
>
25+
<div className={`w-32 h-20 ${formData.isDigestEnforcedForEnv ? 'dc__opacity-0_4' : ''}`}>
26+
<Toggle
27+
selected={formData.isDigestEnforcedForPipeline}
28+
onSelect={handleImageDigestToggle}
29+
dataTestId="create-build-pipeline-image-pull-digest-toggle"
30+
disabled={formData.isDigestEnforcedForEnv}
31+
/>
32+
</div>
33+
</ConditionalWrap>
34+
)
35+
}
36+
37+
const renderImageDigestBody = (): JSX.Element => {
38+
return (
39+
<div className="fs-13">
40+
<div className="flex dc__content-space w-100 cursor flex top">
41+
<div className="flex left">
42+
<div className="pc-icon-container bcn-1 br-8 mr-16 flexbox">
43+
<DockerWithImage className="icon-dim-24" />
44+
</div>
45+
<div>
46+
<span className="fw-6">Pull container image with image digest</span>
47+
<div className="cn-7 ">
48+
When enabled, image will be pulled with image digest to ensure uniqueness of image.
49+
</div>
50+
</div>
51+
</div>
52+
{renderDogestToggle()}
53+
</div>
54+
<hr />
55+
</div>
56+
)
57+
}
58+
59+
return renderImageDigestBody()
60+
}
61+
export default PullImageDigestToggle

‎src/components/cdPipeline/types.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeCIPayloadType } from '../workflowEditor/types'
1+
import { ChangeCIPayloadType, PipelineFormType } from '../workflowEditor/types'
22

33
// Have added any type for most of these since they were legacy do not know the implications of changing them
44
export interface NewCDPipelineProps {
@@ -36,3 +36,8 @@ export interface DeleteCDNodeProps {
3636
isLoading?: boolean
3737
showConfirmationBar?: boolean
3838
}
39+
40+
export interface PullImageDigestToggleType{
41+
formData: PipelineFormType
42+
setFormData: React.Dispatch<React.SetStateAction<PipelineFormType>>
43+
}

‎src/components/workflowEditor/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,8 @@ export interface PipelineFormType extends Partial<FormType>, Partial<CDFormType>
210210
customTag?: CustomTagType
211211
enableCustomTag?: boolean
212212
customTagStage?: string
213+
isDigestEnforcedForPipeline?: boolean
214+
isDigestEnforcedForEnv?: boolean
213215
}
214216

215217
export interface PipelineFormDataErrorType {

‎src/config/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -812,3 +812,4 @@ export const CVE_ID_NOT_FOUND = "CVE ID not found"
812812
export const CONFIGURE_LINK_NO_NAME = "Please provide name for the tool you want to link"
813813
export const NO_HOST_URL = "Please enter host url"
814814
export const WEBHOOK_NO_API_TOKEN_ERROR = "API Token is required to execute webhook"
815+
export const DIGEST_DISABLE_TOGGLE_MESSAGE= "Pull image digest policy is enforced in Global Configurations. Go to Global Configurations to change."

‎src/css/base.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3680,6 +3680,10 @@ textarea::placeholder {
36803680
}
36813681

36823682
// opacity
3683+
.dc__opacity-0_4 {
3684+
opacity: 0.4;
3685+
}
3686+
36833687
.dc__opacity-0_5 {
36843688
opacity: 0.5;
36853689
}

0 commit comments

Comments
 (0)