Skip to content

Commit ee0f3b1

Browse files
RohitRaj011RohitRaj011
committed
feat: TriggerOutput - DeploymentHistoryConfigDiff - revamp UI - using DeploymentConfigDiff
1 parent e5e69fd commit ee0f3b1

33 files changed

+903
-833
lines changed

‎src/Assets/Icon/ic-diff-file-added.svg

Lines changed: 10 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-diff-file-removed.svg

Lines changed: 10 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-file-code.svg

Lines changed: 7 additions & 0 deletions
Loading

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

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
import { useMemo, useRef, useState } from 'react'
2+
import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
3+
4+
import { getAppEnvDeploymentConfigList, getDeploymentTemplateValues } from '@Shared/Components/DeploymentConfigDiff'
5+
import { useAsync } from '@Common/Helper'
6+
import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
7+
import { groupArrayByObjectKey } from '@Shared/Helpers'
8+
import ErrorScreenManager from '@Common/ErrorScreenManager'
9+
import { Progressing } from '@Common/Progressing'
10+
import { useUrlFilters } from '@Common/Hooks'
11+
12+
import { abortPreviousRequests, getIsRequestAborted } from '@Common/Api'
13+
import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
14+
import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
15+
import { getPipelineDeploymentsWfrIds, getPipelineDeployments, parseDeploymentHistoryDiffSearchParams } from './utils'
16+
import { renderDeploymentHistoryConfig } from './helpers'
17+
18+
export const DeploymentHistoryConfigDiff = ({
19+
appName,
20+
envName,
21+
pipelineId,
22+
wfrId,
23+
triggerHistory,
24+
setFullScreenView,
25+
}: DeploymentHistoryConfigDiffProps) => {
26+
// HOOKS
27+
const { path, params } = useRouteMatch()
28+
const { pathname, search } = useLocation()
29+
30+
// CONSTANTS
31+
const pipelineDeployments = useMemo(() => getPipelineDeployments(triggerHistory), [triggerHistory])
32+
const { currentWfrId, previousWfrId } = useMemo(
33+
() => getPipelineDeploymentsWfrIds({ pipelineDeployments, wfrId }),
34+
[pipelineDeployments, wfrId],
35+
)
36+
const isPreviousDeploymentConfigAvailable = !!previousWfrId
37+
38+
// REFS
39+
const deploymentTemplateResolvedDataAbortControllerRef = useRef(new AbortController())
40+
41+
// URL FILTERS
42+
const { compareWfrId } = useUrlFilters<string, DeploymentHistoryConfigDiffQueryParams>({
43+
parseSearchParams: parseDeploymentHistoryDiffSearchParams(previousWfrId),
44+
})
45+
46+
// STATES
47+
const [convertVariables, setConvertVariables] = useState(false)
48+
49+
// ASYNC CALLS
50+
// Load comparison deployment data
51+
const [
52+
compareDeploymentConfigLoader,
53+
compareDeploymentConfig,
54+
compareDeploymentConfigErr,
55+
reloadCompareDeploymentConfig,
56+
] = useAsync(
57+
() =>
58+
Promise.all([
59+
getAppEnvDeploymentConfig({
60+
params: {
61+
appName,
62+
envName,
63+
configArea: 'DeploymentHistory',
64+
pipelineId,
65+
wfrId: currentWfrId,
66+
},
67+
}),
68+
isPreviousDeploymentConfigAvailable
69+
? getAppEnvDeploymentConfig({
70+
params: {
71+
appName,
72+
envName,
73+
configArea: 'DeploymentHistory',
74+
pipelineId,
75+
wfrId: compareWfrId,
76+
},
77+
})
78+
: null,
79+
]),
80+
[currentWfrId, compareWfrId],
81+
)
82+
83+
const [
84+
deploymentTemplateResolvedDataLoader,
85+
deploymentTemplateResolvedData,
86+
deploymentTemplateResolvedDataErr,
87+
reloadDeploymentTemplateResolvedData,
88+
] = useAsync(
89+
() =>
90+
abortPreviousRequests(
91+
() =>
92+
Promise.all([
93+
getAppEnvDeploymentConfig({
94+
params: {
95+
configArea: 'ResolveData',
96+
appName,
97+
envName,
98+
},
99+
payload: {
100+
values: getDeploymentTemplateValues(
101+
compareDeploymentConfig[0].result?.deploymentTemplate,
102+
),
103+
},
104+
signal: deploymentTemplateResolvedDataAbortControllerRef.current?.signal,
105+
}),
106+
getAppEnvDeploymentConfig({
107+
params: {
108+
configArea: 'ResolveData',
109+
appName,
110+
envName,
111+
},
112+
payload: {
113+
values: getDeploymentTemplateValues(
114+
compareDeploymentConfig[1].result?.deploymentTemplate,
115+
),
116+
},
117+
signal: deploymentTemplateResolvedDataAbortControllerRef.current?.signal,
118+
}),
119+
]),
120+
deploymentTemplateResolvedDataAbortControllerRef,
121+
),
122+
[convertVariables, compareDeploymentConfig],
123+
convertVariables && !!compareDeploymentConfig,
124+
)
125+
126+
// METHODS
127+
const reload = () => {
128+
reloadCompareDeploymentConfig()
129+
reloadDeploymentTemplateResolvedData()
130+
}
131+
132+
const getNavItemHref = (resourceType: EnvResourceType, resourceName: string) =>
133+
`${generatePath(path, { ...params })}/${resourceType}${resourceName ? `/${resourceName}` : ''}${search}`
134+
135+
// Generate the deployment history config list
136+
const deploymentConfigList = useMemo(() => {
137+
const isDeploymentTemplateLoaded = !deploymentTemplateResolvedDataLoader && deploymentTemplateResolvedData
138+
const isComparisonDataLoaded = !compareDeploymentConfigLoader && compareDeploymentConfig
139+
140+
const shouldLoadData = convertVariables
141+
? isComparisonDataLoaded && isDeploymentTemplateLoaded
142+
: isComparisonDataLoaded
143+
144+
if (shouldLoadData) {
145+
const compareList = isPreviousDeploymentConfigAvailable
146+
? compareDeploymentConfig[1].result
147+
: {
148+
configMapData: null,
149+
deploymentTemplate: null,
150+
secretsData: null,
151+
isAppAdmin: false,
152+
}
153+
const currentList = compareDeploymentConfig[0].result
154+
155+
const configData = getAppEnvDeploymentConfigList({
156+
currentList,
157+
compareList,
158+
getNavItemHref,
159+
convertVariables,
160+
...(convertVariables
161+
? {
162+
currentDeploymentTemplateResolvedData: deploymentTemplateResolvedData[0].result,
163+
compareDeploymentTemplateResolvedData: deploymentTemplateResolvedData[1].result,
164+
}
165+
: {}),
166+
})
167+
return configData
168+
}
169+
170+
return null
171+
}, [
172+
isPreviousDeploymentConfigAvailable,
173+
compareDeploymentConfigErr,
174+
compareDeploymentConfig,
175+
convertVariables,
176+
deploymentTemplateResolvedDataLoader,
177+
deploymentTemplateResolvedData,
178+
])
179+
180+
const groupedDeploymentConfigList = useMemo(
181+
() => (deploymentConfigList ? groupArrayByObjectKey(deploymentConfigList.configList, 'groupHeader') : []),
182+
[deploymentConfigList],
183+
)
184+
185+
return (
186+
<Switch>
187+
<Route path={`${path}/:resourceType(${Object.values(EnvResourceType).join('|')})/:resourceName?`}>
188+
<DeploymentHistoryConfigDiffCompare
189+
{...deploymentConfigList}
190+
isLoading={
191+
(compareDeploymentConfigLoader || deploymentTemplateResolvedDataLoader) &&
192+
(!compareDeploymentConfigErr ||
193+
(deploymentTemplateResolvedDataErr &&
194+
!getIsRequestAborted(deploymentTemplateResolvedDataErr)))
195+
}
196+
errorConfig={{
197+
code: compareDeploymentConfigErr?.code || deploymentTemplateResolvedDataErr?.code,
198+
error:
199+
compareDeploymentConfigErr ||
200+
(deploymentTemplateResolvedDataErr &&
201+
!getIsRequestAborted(deploymentTemplateResolvedDataErr)),
202+
reload,
203+
}}
204+
envName={envName}
205+
wfrId={wfrId}
206+
previousWfrId={previousWfrId}
207+
pipelineDeployments={pipelineDeployments}
208+
setFullScreenView={setFullScreenView}
209+
convertVariables={convertVariables}
210+
setConvertVariables={setConvertVariables}
211+
/>
212+
</Route>
213+
<Route>
214+
{compareDeploymentConfigErr && !compareDeploymentConfigLoader ? (
215+
<ErrorScreenManager code={compareDeploymentConfigErr?.code} reload={reload} />
216+
) : (
217+
<div className="p-16 flexbox-col dc__gap-16 bcn-0 h-100">
218+
{compareDeploymentConfigLoader || !deploymentConfigList ? (
219+
<Progressing fullHeight size={48} />
220+
) : (
221+
<>
222+
<h3 className="fs-13 lh-20 fw-6 cn-9 m-0">
223+
Showing configuration change with respect to previous deployment
224+
</h3>
225+
<div className="flexbox-col dc__gap-12 dc__mxw-800">
226+
{Object.keys(groupedDeploymentConfigList).map((groupHeader) =>
227+
renderDeploymentHistoryConfig(
228+
groupedDeploymentConfigList[groupHeader],
229+
groupHeader !== 'UNGROUPED' ? groupHeader : null,
230+
pathname,
231+
),
232+
)}
233+
</div>
234+
</>
235+
)}
236+
</div>
237+
)}
238+
</Route>
239+
</Switch>
240+
)
241+
}

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { useEffect } from 'react'
2+
import { generatePath, useRouteMatch } from 'react-router-dom'
3+
4+
import { DeploymentConfigDiff, DeploymentConfigDiffProps } from '@Shared/Components/DeploymentConfigDiff'
5+
import { SortingOrder } from '@Common/Constants'
6+
import { useUrlFilters } from '@Common/Hooks'
7+
import {
8+
getSelectPickerOptionByValue,
9+
SelectPickerOptionType,
10+
SelectPickerVariantType,
11+
} from '@Shared/Components/SelectPicker'
12+
13+
import { DeploymentHistoryDiffDetailedProps, DeploymentHistoryConfigDiffQueryParams } from './types'
14+
import { getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
15+
16+
export const DeploymentHistoryConfigDiffCompare = ({
17+
envName,
18+
setFullScreenView,
19+
pipelineDeployments,
20+
wfrId,
21+
previousWfrId,
22+
convertVariables,
23+
setConvertVariables,
24+
...props
25+
}: DeploymentHistoryDiffDetailedProps) => {
26+
// HOOKS
27+
const { path, params } = useRouteMatch()
28+
29+
// URL FILTERS
30+
const { compareWfrId, updateSearchParams, sortBy, sortOrder, handleSorting } = useUrlFilters<
31+
'sort-config' | '',
32+
DeploymentHistoryConfigDiffQueryParams
33+
>({
34+
parseSearchParams: parseDeploymentHistoryDiffSearchParams(previousWfrId),
35+
})
36+
37+
useEffect(() => {
38+
// Default Search Params Update
39+
updateSearchParams({ compareWfrId })
40+
// Set fullscreen for comparing deployment history config
41+
setFullScreenView(true)
42+
43+
return () => {
44+
setConvertVariables(false)
45+
setFullScreenView(false)
46+
}
47+
}, [])
48+
49+
// DEPLOYMENT_CONFIG_DIFF_PROPS
50+
const { currentDeployment, pipelineDeploymentsOptions } = getPipelineDeploymentsOptions(pipelineDeployments, wfrId)
51+
52+
const deploymentSelectorOnChange = ({ value }: SelectPickerOptionType<number>) => {
53+
updateSearchParams({ compareWfrId: value })
54+
}
55+
56+
const selectorsConfig: DeploymentConfigDiffProps['selectorsConfig'] = {
57+
primaryConfig: [
58+
{
59+
id: 'deployment-config-diff-deployment-selector',
60+
type: 'selectPicker',
61+
selectPickerProps: {
62+
name: 'deployment-config-diff-deployment-selector',
63+
inputId: 'deployment-config-diff-deployment-selector',
64+
classNamePrefix: 'deployment-config-diff-deployment-selector',
65+
variant: SelectPickerVariantType.BORDER_LESS,
66+
options: pipelineDeploymentsOptions,
67+
placeholder: 'Select Deployment',
68+
value: getSelectPickerOptionByValue(pipelineDeploymentsOptions, compareWfrId, null),
69+
onChange: deploymentSelectorOnChange,
70+
showSelectedOptionIcon: false,
71+
},
72+
},
73+
],
74+
secondaryConfig: [
75+
{
76+
id: 'base-configuration',
77+
type: 'string',
78+
text: `Deployed on ${currentDeployment}`,
79+
},
80+
],
81+
}
82+
83+
const onSorting = () => handleSorting(sortOrder !== SortingOrder.DESC ? 'sort-config' : '')
84+
85+
const sortingConfig: DeploymentConfigDiffProps['sortingConfig'] = {
86+
handleSorting: onSorting,
87+
sortBy,
88+
sortOrder,
89+
}
90+
91+
const scopeVariablesConfig: DeploymentConfigDiffProps['scopeVariablesConfig'] = {
92+
convertVariables,
93+
onConvertVariablesClick: () => setConvertVariables(!convertVariables),
94+
}
95+
96+
return (
97+
<DeploymentConfigDiff
98+
{...props}
99+
showDetailedDiffState
100+
navHeading={`Comparing ${envName}`}
101+
navHelpText={
102+
compareWfrId
103+
? `Showing diff in configuration deployed on: ${pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId).label} & ${currentDeployment}`
104+
: null
105+
}
106+
goBackURL={generatePath(path.split('/:resourceType')[0], params)}
107+
selectorsConfig={selectorsConfig}
108+
sortingConfig={sortingConfig}
109+
scopeVariablesConfig={scopeVariablesConfig}
110+
/>
111+
)
112+
}

0 commit comments

Comments
 (0)