Skip to content

Commit a618cf3

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #1570 from devtron-labs/fix(ci-pipeline)/override-workflows-api
feat: separate configOverrideWorkflows api call from CIConfig
2 parents 15a6383 + 210626a commit a618cf3

File tree

4 files changed

+103
-99
lines changed

4 files changed

+103
-99
lines changed

‎src/components/ciConfig/CIConfig.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import React, { useState, useEffect } from 'react'
22
import { sortObjectArrayAlphabetically } from '../common'
33
import { showError, Progressing} from '@devtron-labs/devtron-fe-common-lib'
44
import { getDockerRegistryMinAuth } from './service'
5-
import { getSourceConfig, getCIConfig, getConfigOverrideWorkflowDetails } from '../../services/service'
5+
import { getSourceConfig, getCIConfig } from '../../services/service'
66
import { useParams } from 'react-router-dom'
77
import { ComponentStates } from '../EnvironmentOverride/EnvironmentOverrides.type'
88
import { CIConfigProps } from './types'
9-
import { ConfigOverrideWorkflowDetails } from '../../services/service.types'
109
import './CIConfig.scss'
1110
import CIConfigForm from './CIConfigForm'
1211

@@ -27,7 +26,6 @@ export default function CIConfig({
2726
const [dockerRegistries, setDockerRegistries] = useState(parentState?.dockerRegistries)
2827
const [sourceConfig, setSourceConfig] = useState(parentState?.sourceConfig)
2928
const [ciConfig, setCIConfig] = useState(parentState?.ciConfig)
30-
const [configOverrideWorkflows, setConfigOverrideWorkflows] = useState<ConfigOverrideWorkflowDetails[]>([])
3129
const [parentReloading, setParentReloading] = useState(false)
3230
const [loading, setLoading] = useState(
3331
configOverrideView && parentState?.loadingState === ComponentStates.loaded ? false : true,
@@ -47,12 +45,10 @@ export default function CIConfig({
4745
{ result: dockerRegistries },
4846
{ result: sourceConfig },
4947
{ result: ciConfig },
50-
{ result: configOverrideWorkflows },
5148
] = await Promise.all([
5249
getDockerRegistryMinAuth(appId),
5350
getSourceConfig(appId),
5451
getCIConfig(+appId),
55-
getConfigOverrideWorkflowDetails(appId),
5652
])
5753
Array.isArray(dockerRegistries) && sortObjectArrayAlphabetically(dockerRegistries, 'id')
5854
setDockerRegistries(dockerRegistries || [])
@@ -61,7 +57,6 @@ export default function CIConfig({
6157
sortObjectArrayAlphabetically(sourceConfig.material, 'name')
6258
setSourceConfig(sourceConfig)
6359
setCIConfig(ciConfig)
64-
setConfigOverrideWorkflows(configOverrideWorkflows?.workflows || [])
6560

6661
if (setParentState) {
6762
setParentState({
@@ -137,7 +132,6 @@ export default function CIConfig({
137132
reload={reload}
138133
appId={appId}
139134
selectedCIPipeline={parentState?.selectedCIPipeline}
140-
configOverrideWorkflows={configOverrideWorkflows}
141135
configOverrideView={configOverrideView}
142136
allowOverride={allowOverride}
143137
updateDockerConfigOverride={updateDockerConfigOverride}

‎src/components/ciConfig/CIConfigDiffView.tsx

Lines changed: 95 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
1-
import React, { useState } from 'react'
2-
import { showError, Progressing, Drawer, DeleteDialog, noop, DockerConfigOverrideType } from '@devtron-labs/devtron-fe-common-lib'
1+
import React, { useEffect, useState } from 'react'
2+
import {
3+
showError,
4+
Progressing,
5+
Drawer,
6+
DeleteDialog,
7+
noop,
8+
DockerConfigOverrideType,
9+
Reload,
10+
} from '@devtron-labs/devtron-fe-common-lib'
311
import { ReactComponent as CloseIcon } from '../../assets/icons/ic-cross.svg'
412
import { ReactComponent as EditIcon } from '../../assets/icons/ic-pencil.svg'
513
import { ReactComponent as DeleteIcon } from '../../assets/icons/ic-delete-interactive.svg'
614
import { Workflow } from '../workflowEditor/Workflow'
715
import { Link, useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'
816
import { URLS } from '../../config'
9-
import { CIConfigDiffViewProps } from './types'
17+
import { CIConfigDiffViewProps, ProcessedWorkflowsType } from './types'
1018
import { WorkflowType } from '../app/details/triggerView/types'
1119
import { CIBuildConfigDiff } from './CIBuildConfigDiff'
1220
import Tippy from '@tippyjs/react'
1321
import { getInitDataWithCIPipeline, saveCIPipeline } from '../ciPipeline/ciPipeline.service'
1422
import { toast } from 'react-toastify'
23+
import { ConfigOverrideWorkflowDetails } from '../../services/service.types'
24+
import { getConfigOverrideWorkflowDetails, getWorkflowList } from '../../services/service'
25+
import { WorkflowCreate } from '../app/details/triggerView/config'
26+
import { processWorkflow } from '../app/details/triggerView/workflow.service'
1527

1628
export default function CIConfigDiffView({
1729
parentReloading,
1830
ciConfig,
1931
configOverridenPipelines,
20-
configOverrideWorkflows,
21-
processedWorkflows,
2232
toggleConfigOverrideDiffModal,
2333
reload,
2434
gitMaterials,
@@ -34,7 +44,42 @@ export default function CIConfigDiffView({
3444
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
3545
const [deleteInProgress, setDeleteInProgress] = useState(false)
3646
const [selectedWFId, setSelectedWFId] = useState(0)
47+
const [configOverrideWorkflows, setConfigOverrideWorkflows] = useState<ConfigOverrideWorkflowDetails[]>([])
48+
const [processedWorkflows, setProcessedWorkflows] = useState<ProcessedWorkflowsType>({
49+
workflows: [],
50+
})
51+
const [loading, setLoading] = useState<boolean>(true)
52+
const [error, setError] = useState<boolean>(false)
53+
54+
const handleOnMountAPICalls = async () => {
55+
setLoading(true)
56+
setError(false)
57+
try {
58+
const [{ result: _configOverridenWorkflows }, { result: _processedWorkflows }] = await Promise.all([
59+
getConfigOverrideWorkflowDetails(appId),
60+
getWorkflowList(appId),
61+
])
62+
63+
const { workflows = [] } =
64+
processWorkflow(_processedWorkflows, ciConfig, null, null, WorkflowCreate, WorkflowCreate.workflow) ||
65+
{}
66+
67+
setProcessedWorkflows({ workflows })
68+
setConfigOverrideWorkflows(_configOverridenWorkflows?.workflows ?? [])
69+
} catch (e) {
70+
showError(e)
71+
setError(true)
72+
} finally {
73+
setLoading(false)
74+
}
75+
}
76+
77+
useEffect(() => {
78+
handleOnMountAPICalls()
79+
}, [])
80+
3781
const wfCIMap = new Map<number, number>()
82+
// NOTE: Even on reload after delete the data is going to be stale since we are not updating configOverrideWorkflows
3883
const _configOverridenWorkflows = configOverrideWorkflows.filter((_cwf) => {
3984
const _ciPipeline = configOverridenPipelines?.find((_ci) => _ci.id === _cwf.ciPipelineId)
4085
if (!!_ciPipeline) {
@@ -173,48 +218,56 @@ export default function CIConfigDiffView({
173218
}
174219
}
175220

221+
const renderBodyContent = () => {
222+
if (parentReloading || loading) {
223+
return <Progressing pageLoader />
224+
}
225+
226+
if (error) {
227+
return <Reload reload={handleOnMountAPICalls} />
228+
}
229+
230+
return _overridenWorkflows.map((_wf) => (
231+
<div className="mb-20 dc__position-rel" key={_wf.id}>
232+
<Workflow
233+
key={_wf.id}
234+
id={+_wf.id}
235+
name={_wf.name}
236+
startX={_wf.startX}
237+
startY={_wf.startY}
238+
height={getWorkflowHeight(_wf)}
239+
width="100%"
240+
nodes={_wf.nodes}
241+
history={history}
242+
location={location}
243+
match={match}
244+
handleCDSelect={noop}
245+
handleCISelect={noop}
246+
openEditWorkflow={noop}
247+
showDeleteDialog={noop}
248+
addCIPipeline={noop}
249+
addWebhookCD={noop}
250+
cdWorkflowList={_configOverridenWorkflows}
251+
/>
252+
{renderViewBuildPipelineRow(+_wf.id)}
253+
<CIBuildConfigDiff
254+
configOverridenWorkflows={_configOverridenWorkflows}
255+
wfId={_wf.id}
256+
configOverridenPipelines={configOverridenPipelines}
257+
materials={ciConfig?.materials}
258+
globalCIConfig={globalCIConfig}
259+
gitMaterials={gitMaterials}
260+
/>
261+
</div>
262+
))
263+
}
264+
176265
return (
177266
<Drawer parentClassName="dc__overflow-hidden" position="right" width="87%" minWidth="1024px" maxWidth="1246px">
178267
<div className="modal__body modal__config-override-diff br-0 modal__body--p-0 dc__overflow-hidden">
179268
{renderConfigDiffModalTitle()}
180269
<div className="config-override-diff__view h-100 p-20 dc__window-bg dc__overflow-scroll">
181-
{parentReloading || processedWorkflows.processing ? (
182-
<Progressing pageLoader />
183-
) : (
184-
_overridenWorkflows.map((_wf) => (
185-
<div className="mb-20 dc__position-rel">
186-
<Workflow
187-
key={_wf.id}
188-
id={+_wf.id}
189-
name={_wf.name}
190-
startX={_wf.startX}
191-
startY={_wf.startY}
192-
height={getWorkflowHeight(_wf)}
193-
width={'100%'}
194-
nodes={_wf.nodes}
195-
history={history}
196-
location={location}
197-
match={match}
198-
handleCDSelect={noop}
199-
handleCISelect={noop}
200-
openEditWorkflow={noop}
201-
showDeleteDialog={noop}
202-
addCIPipeline={noop}
203-
addWebhookCD={noop}
204-
cdWorkflowList={_configOverridenWorkflows}
205-
/>
206-
{renderViewBuildPipelineRow(+_wf.id)}
207-
<CIBuildConfigDiff
208-
configOverridenWorkflows={_configOverridenWorkflows}
209-
wfId={_wf.id}
210-
configOverridenPipelines={configOverridenPipelines}
211-
materials={ciConfig?.materials}
212-
globalCIConfig={globalCIConfig}
213-
gitMaterials = {gitMaterials}
214-
/>
215-
</div>
216-
))
217-
)}
270+
{renderBodyContent()}
218271
</div>
219272
{showDeleteDialog && (
220273
<DeleteDialog

‎src/components/ciConfig/CIConfigForm.tsx

Lines changed: 7 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import React, { useEffect, useState } from 'react'
22
import { toast } from 'react-toastify'
33
import { DOCUMENTATION } from '../../config'
4-
import { getWorkflowList } from '../../services/service'
54
import { OptionType } from '../app/types'
65
import { CIPipelineBuildType, DockerConfigOverrideKeys } from '../ciPipeline/types'
76
import { useForm } from '../common'
8-
import {
9-
CIBuildConfigType,
10-
CIBuildType,
11-
showError,
12-
ConfirmationDialog,
13-
} from '@devtron-labs/devtron-fe-common-lib'
7+
import { CIBuildConfigType, CIBuildType, showError, ConfirmationDialog } from '@devtron-labs/devtron-fe-common-lib'
148
import { saveCIConfig, updateCIConfig } from './service'
15-
import { CIBuildArgType, CIConfigFormProps, LoadingState, ProcessedWorkflowsType } from './types'
16-
import { processWorkflow } from '../app/details/triggerView/workflow.service'
17-
import { WorkflowCreate } from '../app/details/triggerView/config'
9+
import { CIBuildArgType, CIConfigFormProps, LoadingState } from './types'
1810
import warningIconSrc from '../../assets/icons/ic-warning-y6.svg'
1911
import { ReactComponent as BookOpenIcon } from '../../assets/icons/ic-book-open.svg'
2012
import { ReactComponent as NextIcon } from '../../assets/icons/ic-arrow-right.svg'
@@ -39,7 +31,6 @@ export default function CIConfigForm({
3931
reload,
4032
appId,
4133
selectedCIPipeline,
42-
configOverrideWorkflows,
4334
configOverrideView,
4435
allowOverride,
4536
updateDockerConfigOverride,
@@ -106,11 +97,9 @@ export default function CIConfigForm({
10697
const [showCustomPlatformWarning, setShowCustomPlatformWarning] = useState<boolean>(_customTargetPlatorm)
10798
const [showCustomPlatformConfirmation, setShowCustomPlatformConfirmation] = useState<boolean>(false)
10899
const [showConfigOverrideDiff, setShowConfigOverrideDiff] = useState<boolean>(false)
109-
const [processedWorkflows, setProcessedWorkflows] = useState<ProcessedWorkflowsType>({
110-
processing: false,
111-
workflows: [],
112-
})
113-
const configOverridenPipelines = ciConfig?.ciPipelines?.filter((_ci) => _ci.isDockerConfigOverridden && _ci?.pipelineType !== CIPipelineBuildType.CI_JOB)
100+
const configOverridenPipelines = ciConfig?.ciPipelines?.filter(
101+
(_ci) => _ci.isDockerConfigOverridden && _ci?.pipelineType !== CIPipelineBuildType.CI_JOB,
102+
)
114103
const [currentCIBuildConfig, setCurrentCIBuildConfig] = useState<CIBuildConfigType>(
115104
initCurrentCIBuildConfig(
116105
allowOverride,
@@ -268,31 +257,6 @@ export default function CIConfigForm({
268257
)
269258
}
270259

271-
// FIXME: Not using anywhere but after opening of modal, so move it to child component
272-
const processFetchedWorkflows = async () => {
273-
if (!processedWorkflows.processing) {
274-
try {
275-
setProcessedWorkflows({
276-
...processedWorkflows,
277-
processing: true,
278-
})
279-
const { result } = await getWorkflowList(appId)
280-
const { workflows } = processWorkflow(
281-
result,
282-
ciConfig,
283-
null,
284-
null,
285-
WorkflowCreate,
286-
WorkflowCreate.workflow,
287-
)
288-
289-
setProcessedWorkflows({ processing: false, workflows })
290-
} catch (err) {
291-
showError(err)
292-
}
293-
}
294-
}
295-
296260
const handleOnChangeConfig = (e) => {
297261
handleOnChange(e)
298262

@@ -336,9 +300,6 @@ export default function CIConfigForm({
336300

337301
const toggleConfigOverrideDiffModal = () => {
338302
setShowConfigOverrideDiff(!showConfigOverrideDiff)
339-
if (!showConfigOverrideDiff) {
340-
processFetchedWorkflows()
341-
}
342303
}
343304

344305
const { repository, dockerfile, projectPath, registry, repository_name, buildContext, key, value } = state
@@ -434,13 +395,13 @@ export default function CIConfigForm({
434395
</div>
435396
)}
436397
{showCustomPlatformConfirmation && renderConfirmationModal()}
398+
{/* Might cause bug in future since we are toggling the state but directly closes the modal on empty workflow */}
399+
{/* TODO: Connect with product if empty state is better? */}
437400
{configOverridenPipelines?.length > 0 && showConfigOverrideDiff && (
438401
<CIConfigDiffView
439402
parentReloading={parentReloading}
440403
ciConfig={ciConfig}
441404
configOverridenPipelines={configOverridenPipelines}
442-
configOverrideWorkflows={configOverrideWorkflows}
443-
processedWorkflows={processedWorkflows}
444405
toggleConfigOverrideDiffModal={toggleConfigOverrideDiffModal}
445406
reload={reload}
446407
gitMaterials={sourceConfig.material}

‎src/components/ciConfig/types.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ export interface CIConfigState {
6060
}
6161

6262
export interface ProcessedWorkflowsType {
63-
processing: boolean
6463
workflows: WorkflowType[]
6564
}
6665

@@ -97,8 +96,6 @@ export interface CIConfigDiffViewProps {
9796
parentReloading: boolean
9897
ciConfig: CiPipelineResult
9998
configOverridenPipelines: CiPipeline[]
100-
configOverrideWorkflows: ConfigOverrideWorkflowDetails[]
101-
processedWorkflows: ProcessedWorkflowsType
10299
toggleConfigOverrideDiffModal: () => void
103100
reload: (skipPageReload?: boolean) => Promise<void>
104101
gitMaterials: any
@@ -112,7 +109,6 @@ export interface CIConfigFormProps {
112109
reload: (skipPageReload?: boolean) => Promise<void>
113110
appId: string
114111
selectedCIPipeline: CIPipelineDataType
115-
configOverrideWorkflows: ConfigOverrideWorkflowDetails[]
116112
configOverrideView: boolean
117113
allowOverride: boolean
118114
updateDockerConfigOverride: (key: string, value: CIBuildConfigType | boolean | string) => void

0 commit comments

Comments
 (0)