Skip to content

Commit 8d2118e

Browse files
RohitRaj011RohitRaj011
authored
Merge pull request #354 from devtron-labs/feat/pipeline-deploy-config-diff-revamp-uat
feat: Pipeline deploy & Deployment History config diff revamp API & UAT Changes
2 parents 56ef7a0 + 5f78425 commit 8d2118e

23 files changed

+381
-259
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "0.5.0",
3+
"version": "0.5.0-beta-6",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Common/ChartVersionAndTypeSelector.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,18 +72,17 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
7272
<div className="chart-type-options flex" data-testid="chart-type-options">
7373
<span className="cn-7 mr-4">Chart Type</span>
7474
<SelectPicker
75-
inputId='chart-type-select'
76-
label='Chart Type'
75+
inputId="chart-type-select"
7776
value={selectedChartType ?? chartTypeOptions[0]}
7877
options={chartTypeOptions}
7978
onChange={handleChartTypeChange}
8079
variant={SelectPickerVariantType.BORDER_LESS}
8180
/>
8281
</div>
8382
<div className="chart-version-options flex" data-testid="chart-version-options">
84-
<span className="cn-7 mr-4">Chart Version</span>
83+
<span className="cn-7 mr-4">Chart Version</span>
8584
<SelectPicker
86-
inputId='chart-version-select'
85+
inputId="chart-version-select"
8786
value={selectedChartVersion ?? chartVersionOptions[0]}
8887
options={chartVersionOptions}
8988
onChange={handleChartVersionChange}

‎src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx‎

Lines changed: 87 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
1-
import { useMemo, useRef, useState } from 'react'
1+
import { useMemo, useState } from 'react'
22
import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
33

4-
import { getAppEnvDeploymentConfigList, getDeploymentTemplateValues } from '@Shared/Components/DeploymentConfigDiff'
4+
import { ReactComponent as ICError } from '@Icons/ic-error.svg'
5+
import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
56
import { useAsync } from '@Common/Helper'
67
import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
78
import { groupArrayByObjectKey } from '@Shared/Helpers'
89
import ErrorScreenManager from '@Common/ErrorScreenManager'
910
import { Progressing } from '@Common/Progressing'
1011
import { useUrlFilters } from '@Common/Hooks'
12+
import { GenericEmptyState, InfoColourBar } from '@Common/index'
1113

12-
import { abortPreviousRequests, getIsRequestAborted } from '@Common/Api'
1314
import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
1415
import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
15-
import { getPipelineDeploymentsWfrIds, getPipelineDeployments, parseDeploymentHistoryDiffSearchParams } from './utils'
16+
import {
17+
getPipelineDeploymentsWfrIds,
18+
getPipelineDeployments,
19+
parseDeploymentHistoryDiffSearchParams,
20+
isDeploymentHistoryConfigDiffNotFoundError,
21+
getDeploymentHistoryConfigDiffError,
22+
} from './utils'
1623
import { renderDeploymentHistoryConfig } from './helpers'
1724

1825
export const DeploymentHistoryConfigDiff = ({
@@ -38,9 +45,6 @@ export const DeploymentHistoryConfigDiff = ({
3845
)
3946
const isPreviousDeploymentConfigAvailable = !!previousWfrId
4047

41-
// REFS
42-
const deploymentTemplateResolvedDataAbortControllerRef = useRef(new AbortController())
43-
4448
// URL FILTERS
4549
const { compareWfrId } = useUrlFilters<string, DeploymentHistoryConfigDiffQueryParams>({
4650
parseSearchParams: parseDeploymentHistoryDiffSearchParams(previousWfrId),
@@ -51,14 +55,9 @@ export const DeploymentHistoryConfigDiff = ({
5155

5256
// ASYNC CALLS
5357
// Load comparison deployment data
54-
const [
55-
compareDeploymentConfigLoader,
56-
compareDeploymentConfig,
57-
compareDeploymentConfigErr,
58-
reloadCompareDeploymentConfig,
59-
] = useAsync(
58+
const [compareDeploymentConfigLoader, compareDeploymentConfig, , reloadCompareDeploymentConfig] = useAsync(
6059
() =>
61-
Promise.all([
60+
Promise.allSettled([
6261
getAppEnvDeploymentConfig({
6362
params: {
6463
appName,
@@ -83,124 +82,84 @@ export const DeploymentHistoryConfigDiff = ({
8382
[currentWfrId, compareWfrId],
8483
)
8584

86-
const [
87-
deploymentTemplateResolvedDataLoader,
88-
deploymentTemplateResolvedData,
89-
deploymentTemplateResolvedDataErr,
90-
reloadDeploymentTemplateResolvedData,
91-
] = useAsync(
92-
() =>
93-
abortPreviousRequests(
94-
() =>
95-
Promise.all([
96-
getAppEnvDeploymentConfig({
97-
params: {
98-
configArea: 'ResolveData',
99-
appName,
100-
envName,
101-
},
102-
payload: {
103-
values: getDeploymentTemplateValues(
104-
compareDeploymentConfig[0].result?.deploymentTemplate,
105-
),
106-
},
107-
signal: deploymentTemplateResolvedDataAbortControllerRef.current?.signal,
108-
}),
109-
getAppEnvDeploymentConfig({
110-
params: {
111-
configArea: 'ResolveData',
112-
appName,
113-
envName,
114-
},
115-
payload: {
116-
values: getDeploymentTemplateValues(
117-
compareDeploymentConfig[1].result?.deploymentTemplate,
118-
),
119-
},
120-
signal: deploymentTemplateResolvedDataAbortControllerRef.current?.signal,
121-
}),
122-
]),
123-
deploymentTemplateResolvedDataAbortControllerRef,
124-
),
125-
[convertVariables, compareDeploymentConfig],
126-
convertVariables && !!compareDeploymentConfig,
127-
)
128-
12985
// METHODS
130-
const reload = () => {
131-
reloadCompareDeploymentConfig()
132-
reloadDeploymentTemplateResolvedData()
133-
}
134-
13586
const getNavItemHref = (resourceType: EnvResourceType, resourceName: string) =>
13687
`${generatePath(path, { ...params })}/${resourceType}${resourceName ? `/${resourceName}` : ''}${search}`
13788

13889
// Generate the deployment history config list
13990
const deploymentConfigList = useMemo(() => {
140-
const isDeploymentTemplateLoaded = !deploymentTemplateResolvedDataLoader && deploymentTemplateResolvedData
141-
const isComparisonDataLoaded = !compareDeploymentConfigLoader && compareDeploymentConfig
142-
143-
const shouldLoadData = convertVariables
144-
? isComparisonDataLoaded && isDeploymentTemplateLoaded
145-
: isComparisonDataLoaded
146-
147-
if (shouldLoadData) {
148-
const compareList = isPreviousDeploymentConfigAvailable
149-
? compareDeploymentConfig[1].result
150-
: {
151-
configMapData: null,
152-
deploymentTemplate: null,
153-
secretsData: null,
154-
isAppAdmin: false,
155-
}
156-
const currentList = compareDeploymentConfig[0].result
91+
if (!compareDeploymentConfigLoader && compareDeploymentConfig) {
92+
const compareList =
93+
isPreviousDeploymentConfigAvailable && compareDeploymentConfig[1].status === 'fulfilled'
94+
? compareDeploymentConfig[1].value.result
95+
: {
96+
configMapData: null,
97+
deploymentTemplate: null,
98+
secretsData: null,
99+
isAppAdmin: false,
100+
}
101+
102+
const currentList =
103+
compareDeploymentConfig[0].status === 'fulfilled' ? compareDeploymentConfig[0].value.result : null
157104

158105
const configData = getAppEnvDeploymentConfigList({
159106
currentList,
160107
compareList,
161108
getNavItemHref,
162109
convertVariables,
163-
...(convertVariables
164-
? {
165-
currentDeploymentTemplateResolvedData: deploymentTemplateResolvedData[0].result,
166-
compareDeploymentTemplateResolvedData: deploymentTemplateResolvedData[1].result,
167-
}
168-
: {}),
169110
})
170111
return configData
171112
}
172113

173114
return null
174-
}, [
175-
isPreviousDeploymentConfigAvailable,
176-
compareDeploymentConfigErr,
177-
compareDeploymentConfig,
178-
convertVariables,
179-
deploymentTemplateResolvedDataLoader,
180-
deploymentTemplateResolvedData,
181-
])
115+
}, [isPreviousDeploymentConfigAvailable, compareDeploymentConfigLoader, compareDeploymentConfig, convertVariables])
116+
117+
const compareDeploymentConfigErr = useMemo(
118+
() =>
119+
!compareDeploymentConfigLoader && compareDeploymentConfig
120+
? getDeploymentHistoryConfigDiffError(compareDeploymentConfig[0]) ||
121+
getDeploymentHistoryConfigDiffError(compareDeploymentConfig[1])
122+
: null,
123+
[compareDeploymentConfigLoader, compareDeploymentConfig],
124+
)
182125

183126
const groupedDeploymentConfigList = useMemo(
184127
() => (deploymentConfigList ? groupArrayByObjectKey(deploymentConfigList.configList, 'groupHeader') : []),
185128
[deploymentConfigList],
186129
)
187130

188-
const isLoading = compareDeploymentConfigLoader || deploymentTemplateResolvedDataLoader
189-
const isError =
190-
compareDeploymentConfigErr ||
191-
(deploymentTemplateResolvedDataErr && !getIsRequestAborted(deploymentTemplateResolvedDataErr))
131+
/** Previous deployment config has 404 error. */
132+
const hasPreviousDeploymentConfigNotFoundError =
133+
compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[1])
134+
/** Hide diff state if the previous deployment config is unavailable or returns a 404 error. */
135+
const hideDiffState = !isPreviousDeploymentConfigAvailable || hasPreviousDeploymentConfigNotFoundError
136+
// LOADING
137+
const isLoading = compareDeploymentConfigLoader || (!compareDeploymentConfigErr && !deploymentConfigList)
138+
// ERROR CONFIG
139+
const errorConfig = {
140+
code: compareDeploymentConfigErr?.code,
141+
error: compareDeploymentConfigErr && !compareDeploymentConfigLoader,
142+
reload: reloadCompareDeploymentConfig,
143+
}
144+
145+
if (compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[0])) {
146+
return (
147+
<div className="flex bcn-0 h-100">
148+
<GenericEmptyState
149+
title="Data not available"
150+
subTitle="Configurations used for this deployment execution is not available"
151+
/>
152+
</div>
153+
)
154+
}
192155

193156
return (
194157
<Switch>
195158
<Route path={`${path}/:resourceType(${Object.values(EnvResourceType).join('|')})/:resourceName?`}>
196159
<DeploymentHistoryConfigDiffCompare
197160
{...deploymentConfigList}
198-
isLoading={isLoading || (!isError && !deploymentConfigList)}
199-
errorConfig={{
200-
code: compareDeploymentConfigErr?.code || deploymentTemplateResolvedDataErr?.code,
201-
error: isError && !isLoading,
202-
reload,
203-
}}
161+
isLoading={isLoading}
162+
errorConfig={errorConfig}
204163
envName={envName}
205164
wfrId={wfrId}
206165
previousWfrId={previousWfrId}
@@ -211,27 +170,41 @@ export const DeploymentHistoryConfigDiff = ({
211170
runSource={runSource}
212171
resourceId={resourceId}
213172
renderRunSource={renderRunSource}
173+
hideDiffState={hideDiffState}
174+
isCompareDeploymentConfigNotAvailable={hasPreviousDeploymentConfigNotFoundError}
214175
/>
215176
</Route>
216177
<Route>
217-
{isError && !isLoading ? (
218-
<ErrorScreenManager code={compareDeploymentConfigErr?.code} reload={reload} />
178+
{compareDeploymentConfigErr && !compareDeploymentConfigLoader ? (
179+
<ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />
219180
) : (
220181
<div className="p-16 flexbox-col dc__gap-16 bcn-0 h-100">
221-
{isLoading || (!isError && !deploymentConfigList) ? (
182+
{isLoading ? (
222183
<Progressing fullHeight size={48} />
223184
) : (
224185
<>
225186
<h3 className="fs-13 lh-20 fw-6 cn-9 m-0">
226-
Showing configuration change with respect to previous deployment
187+
{hideDiffState
188+
? 'Configurations used for this deployment trigger'
189+
: 'Showing configuration change with respect to previous deployment'}
227190
</h3>
228-
<div className="flexbox-col dc__gap-12 dc__mxw-800">
229-
{Object.keys(groupedDeploymentConfigList).map((groupHeader) =>
230-
renderDeploymentHistoryConfig(
231-
groupedDeploymentConfigList[groupHeader],
232-
groupHeader !== 'UNGROUPED' ? groupHeader : null,
233-
pathname,
234-
),
191+
<div className="flexbox-col dc__gap-16 dc__mxw-800">
192+
<div className="flexbox-col dc__gap-12">
193+
{Object.keys(groupedDeploymentConfigList).map((groupHeader) =>
194+
renderDeploymentHistoryConfig(
195+
groupedDeploymentConfigList[groupHeader],
196+
groupHeader !== 'UNGROUPED' ? groupHeader : null,
197+
pathname,
198+
hideDiffState,
199+
),
200+
)}
201+
</div>
202+
{hasPreviousDeploymentConfigNotFoundError && (
203+
<InfoColourBar
204+
classname="error_bar cn-9 fs-13 lh-20"
205+
Icon={ICError}
206+
message="Diff unavailable: Configurations for previous deployment not found."
207+
/>
235208
)}
236209
</div>
237210
</>

0 commit comments

Comments
 (0)