Skip to content

Commit d0949d1

Browse files
RohitRaj011RohitRaj011
committed
feat: DeploymentConfigDiff - UAT changes, code refactor; DeploymentHistoryConfigDiff - renderRunSource integration
1 parent b7a2280 commit d0949d1

File tree

13 files changed

+129
-42
lines changed

13 files changed

+129
-42
lines changed

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

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ export const DeploymentHistoryConfigDiff = ({
2222
wfrId,
2323
triggerHistory,
2424
setFullScreenView,
25+
runSource,
26+
resourceId,
27+
renderRunSource,
2528
}: DeploymentHistoryConfigDiffProps) => {
2629
// HOOKS
2730
const { path, params } = useRouteMatch()
@@ -182,23 +185,20 @@ export const DeploymentHistoryConfigDiff = ({
182185
[deploymentConfigList],
183186
)
184187

188+
const isLoading = compareDeploymentConfigLoader || deploymentTemplateResolvedDataLoader
189+
const isError =
190+
compareDeploymentConfigErr ||
191+
(deploymentTemplateResolvedDataErr && !getIsRequestAborted(deploymentTemplateResolvedDataErr))
192+
185193
return (
186194
<Switch>
187195
<Route path={`${path}/:resourceType(${Object.values(EnvResourceType).join('|')})/:resourceName?`}>
188196
<DeploymentHistoryConfigDiffCompare
189197
{...deploymentConfigList}
190-
isLoading={
191-
(compareDeploymentConfigLoader || deploymentTemplateResolvedDataLoader) &&
192-
(!compareDeploymentConfigErr ||
193-
(deploymentTemplateResolvedDataErr &&
194-
!getIsRequestAborted(deploymentTemplateResolvedDataErr)))
195-
}
198+
isLoading={isLoading || (!isError && !deploymentConfigList)}
196199
errorConfig={{
197200
code: compareDeploymentConfigErr?.code || deploymentTemplateResolvedDataErr?.code,
198-
error:
199-
compareDeploymentConfigErr ||
200-
(deploymentTemplateResolvedDataErr &&
201-
!getIsRequestAborted(deploymentTemplateResolvedDataErr)),
201+
error: isError && !isLoading,
202202
reload,
203203
}}
204204
envName={envName}
@@ -208,14 +208,17 @@ export const DeploymentHistoryConfigDiff = ({
208208
setFullScreenView={setFullScreenView}
209209
convertVariables={convertVariables}
210210
setConvertVariables={setConvertVariables}
211+
runSource={runSource}
212+
resourceId={resourceId}
213+
renderRunSource={renderRunSource}
211214
/>
212215
</Route>
213216
<Route>
214-
{compareDeploymentConfigErr && !compareDeploymentConfigLoader ? (
217+
{isError && !isLoading ? (
215218
<ErrorScreenManager code={compareDeploymentConfigErr?.code} reload={reload} />
216219
) : (
217220
<div className="p-16 flexbox-col dc__gap-16 bcn-0 h-100">
218-
{compareDeploymentConfigLoader || !deploymentConfigList ? (
221+
{isLoading || (!isError && !deploymentConfigList) ? (
219222
<Progressing fullHeight size={48} />
220223
) : (
221224
<>

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
SelectPickerOptionType,
1010
SelectPickerVariantType,
1111
} from '@Shared/Components/SelectPicker'
12+
import { ComponentSizeType } from '@Shared/constants'
1213

1314
import { DeploymentHistoryDiffDetailedProps, DeploymentHistoryConfigDiffQueryParams } from './types'
1415
import { getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
@@ -21,6 +22,9 @@ export const DeploymentHistoryConfigDiffCompare = ({
2122
previousWfrId,
2223
convertVariables,
2324
setConvertVariables,
25+
runSource,
26+
renderRunSource,
27+
resourceId,
2428
...props
2529
}: DeploymentHistoryDiffDetailedProps) => {
2630
// HOOKS
@@ -47,7 +51,13 @@ export const DeploymentHistoryConfigDiffCompare = ({
4751
}, [])
4852

4953
// DEPLOYMENT_CONFIG_DIFF_PROPS
50-
const { currentDeployment, pipelineDeploymentsOptions } = getPipelineDeploymentsOptions(pipelineDeployments, wfrId)
54+
const { currentDeployment, pipelineDeploymentsOptions } = getPipelineDeploymentsOptions({
55+
pipelineDeployments,
56+
wfrId,
57+
runSource,
58+
renderRunSource,
59+
resourceId,
60+
})
5161

5262
const deploymentSelectorOnChange = ({ value }: SelectPickerOptionType<number>) => {
5363
updateSearchParams({ compareWfrId: value })
@@ -68,6 +78,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
6878
value: getSelectPickerOptionByValue(pipelineDeploymentsOptions, compareWfrId, null),
6979
onChange: deploymentSelectorOnChange,
7080
showSelectedOptionIcon: false,
81+
menuSize: ComponentSizeType.large,
7182
},
7283
},
7384
],

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

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NavLink } from 'react-router-dom'
22

33
import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
4+
import { ReactComponent as ICDocker } from '@Icons/ic-docker.svg'
45
import {
56
DeploymentConfigDiffProps,
67
DeploymentConfigDiffState,
@@ -9,6 +10,9 @@ import {
910
diffStateTextMap,
1011
} from '@Shared/Components/DeploymentConfigDiff'
1112

13+
import { History } from '../types'
14+
import { DeploymentHistoryConfigDiffProps } from './types'
15+
1216
const renderState = (diffState: DeploymentConfigDiffState) => {
1317
const Icon = diffStateIconMap[diffState]
1418

@@ -31,19 +35,18 @@ export const renderDeploymentHistoryConfig = (
3135
<h4 className="m-0 cn-7 fs-12 lh-20 fw-6">{heading}</h4>
3236
</div>
3337
)}
34-
{config.map(({ id, title, diffState }, index) => {
35-
const resourceType = (title.split('/')[0] || title).trim().toLowerCase().replace(' ', '-')
36-
const resourceName = title.split('/')[1]?.trim()
38+
{config.map(({ id, title, name, diffState, pathType }, index) => {
39+
const href = `${pathname}/${name ? `${pathType}/${name}` : pathType}`
3740

3841
return (
3942
<NavLink
4043
key={id}
4144
className={`cursor dc__no-decor px-16 py-12 flex dc__content-space ${index !== config.length - 1 ? 'dc__border-bottom-n1' : ''}`}
42-
to={`${pathname}/${resourceType}${resourceName ? `/${resourceName}` : ''}`}
45+
to={href}
4346
>
4447
<p className="m-0 flex dc__gap-8">
4548
<ICFileCode className="icon-dim-20 scn-6" />
46-
<span className="cb-5 fs-13 lh-20">{resourceName || title}</span>
49+
<span className="cb-5 fs-13 lh-20">{name || title}</span>
4750
</p>
4851
{renderState(diffState)}
4952
</NavLink>
@@ -59,3 +62,30 @@ export const renderPipelineDeploymentStatusIcon = (status: string) => (
5962
.replace(/\s+/g, '')}`}
6063
/>
6164
)
65+
66+
export const renderPipelineDeploymentOptionDescription = ({
67+
stage,
68+
triggeredBy,
69+
triggeredByEmail,
70+
artifact,
71+
renderRunSource,
72+
resourceId,
73+
runSource,
74+
}: Pick<History, 'triggeredBy' | 'triggeredByEmail' | 'artifact' | 'stage'> &
75+
Pick<DeploymentHistoryConfigDiffProps, 'renderRunSource' | 'resourceId' | 'runSource'>) => (
76+
<div>
77+
<p className="m-0 fs-12 lh-20 cn-7 flex dc__gap-4">
78+
<span className="dc__capitalize">{stage}</span>
79+
<span className="dc__bullet dc__bullet--d2" />
80+
{artifact && (
81+
<span className="dc__app-commit__hash dc__app-commit__hash--no-bg dc__no-shrink">
82+
<ICDocker className="commit-hash__icon grayscale" />
83+
{artifact.split(':')[1].slice(-12)}
84+
</span>
85+
)}
86+
<span className="dc__bullet dc__bullet--d2" />
87+
<span className="dc__truncate">{triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}</span>
88+
</p>
89+
{runSource && renderRunSource && renderRunSource(runSource, resourceId === runSource?.id)}
90+
</div>
91+
)

‎src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import { Dispatch, SetStateAction } from 'react'
33
import { DeploymentConfigDiffProps } from '@Shared/Components/DeploymentConfigDiff'
44
import { EnvResourceType } from '@Shared/Services'
55

6-
import { History } from '../types'
6+
import { History, HistoryLogsProps, RunSourceType } from '../types'
77

8-
export interface DeploymentHistoryConfigDiffProps {
8+
export interface DeploymentHistoryConfigDiffProps
9+
extends Required<Pick<HistoryLogsProps, 'renderRunSource' | 'resourceId'>> {
910
appName: string
1011
envName: string
1112
pipelineId: number
1213
wfrId: number
14+
runSource: RunSourceType
1315
triggerHistory: Map<number, History>
1416
setFullScreenView: (fullscreen: boolean) => void
1517
}
@@ -18,7 +20,12 @@ export type DeploymentHistoryDiffDetailedProps = Pick<
1820
DeploymentConfigDiffProps,
1921
'collapsibleNavList' | 'configList' | 'errorConfig' | 'isLoading' | 'navList'
2022
> &
21-
Pick<DeploymentHistoryConfigDiffProps, 'setFullScreenView' | 'wfrId' | 'envName'> & {
23+
Required<
24+
Pick<
25+
DeploymentHistoryConfigDiffProps,
26+
'setFullScreenView' | 'wfrId' | 'envName' | 'renderRunSource' | 'resourceId' | 'runSource'
27+
>
28+
> & {
2229
pipelineDeployments: History[]
2330
previousWfrId: number
2431
convertVariables: boolean

‎src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import moment from 'moment'
22

33
import { DATE_TIME_FORMATS } from '@Common/Constants'
44
import { DeploymentStageType } from '@Shared/constants'
5+
import { SelectPickerOptionType } from '@Shared/Components/SelectPicker'
56

67
import { History } from '../types'
7-
import { renderPipelineDeploymentStatusIcon } from './helpers'
8+
import { renderPipelineDeploymentOptionDescription, renderPipelineDeploymentStatusIcon } from './helpers'
89
import { DeploymentHistoryConfigDiffProps } from './types'
910

1011
export const getPipelineDeployments = (triggerHistory: DeploymentHistoryConfigDiffProps['triggerHistory']) =>
@@ -25,15 +26,32 @@ export const getPipelineDeploymentsWfrIds = ({
2526
}
2627
}
2728

28-
export const getPipelineDeploymentsOptions = (pipelineDeployments: History[], wfrId: number) => {
29+
export const getPipelineDeploymentsOptions = ({
30+
pipelineDeployments,
31+
wfrId,
32+
renderRunSource,
33+
resourceId,
34+
runSource,
35+
}: Required<Pick<DeploymentHistoryConfigDiffProps, 'renderRunSource' | 'runSource' | 'resourceId'>> & {
36+
pipelineDeployments: History[]
37+
wfrId: number
38+
}) => {
2939
const currentDeploymentIndex = pipelineDeployments.findIndex(({ id }) => id === wfrId)
3040
const previousDeployments = pipelineDeployments.slice(currentDeploymentIndex + 1)
3141

32-
const pipelineDeploymentsOptions = previousDeployments.map(
33-
({ id, finishedOn, stage, triggeredBy, triggeredByEmail, status }) => ({
42+
const pipelineDeploymentsOptions: SelectPickerOptionType<number>[] = previousDeployments.map(
43+
({ id, finishedOn, stage, triggeredBy, triggeredByEmail, status, artifact }) => ({
3444
value: id,
3545
label: moment(finishedOn).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT),
36-
description: `${stage} · ${triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}`,
46+
description: renderPipelineDeploymentOptionDescription({
47+
stage,
48+
triggeredByEmail,
49+
triggeredBy,
50+
artifact,
51+
renderRunSource,
52+
resourceId,
53+
runSource,
54+
}),
3755
startIcon: renderPipelineDeploymentStatusIcon(status),
3856
}),
3957
)

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -498,6 +498,8 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
498498
tagsEditable,
499499
hideImageTaggingHardDelete,
500500
selectedEnvironmentName,
501+
resourceId,
502+
renderRunSource,
501503
processVirtualEnvironmentDeploymentData,
502504
renderDeploymentApprovalInfo,
503505
renderCIListHeader,
@@ -597,6 +599,9 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
597599
wfrId={+triggerId}
598600
triggerHistory={triggerHistory}
599601
setFullScreenView={setFullScreenView}
602+
resourceId={resourceId}
603+
renderRunSource={renderRunSource}
604+
runSource={triggerDetails.runSource}
600605
/>
601606
</Route>
602607
)}

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ export interface DeploymentConfigType {
2828
export interface DeploymentConfigListItem {
2929
id: string
3030
title: string
31+
name?: string
32+
pathType: EnvResourceType
3133
primaryConfig: DeploymentConfigType
3234
secondaryConfig: DeploymentConfigType
3335
diffState: DeploymentConfigDiffState

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -454,7 +454,7 @@ const getConfigMapSecretData = (
454454
getConfigMapSecretResolvedValues(compareWithList, convertVariables),
455455
)
456456

457-
const deploymentConfig = combinedList.map(([currentItem, compareItem]) => {
457+
const deploymentConfig: DeploymentConfigDiffProps['configList'] = combinedList.map(([currentItem, compareItem]) => {
458458
const { compareToDiff, compareWithDiff, diffState } = getDiffViewData(
459459
currentItem,
460460
compareItem,
@@ -465,6 +465,8 @@ const getConfigMapSecretData = (
465465

466466
return {
467467
id: `${resourceType === ConfigResourceType.ConfigMap ? EnvResourceType.ConfigMap : EnvResourceType.Secret}-${currentItem?.name || compareItem?.name}`,
468+
pathType:
469+
resourceType === ConfigResourceType.ConfigMap ? EnvResourceType.ConfigMap : EnvResourceType.Secret,
468470
title: `${resourceType === ConfigResourceType.ConfigMap ? 'ConfigMap' : 'Secret'} / ${currentItem?.name || compareItem?.name}`,
469471
name: currentItem?.name || compareItem?.name,
470472
primaryConfig: {
@@ -537,6 +539,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
537539

538540
const deploymentTemplateData = {
539541
id: EnvResourceType.DeploymentTemplate,
542+
pathType: EnvResourceType.DeploymentTemplate,
540543
title: 'Deployment Template',
541544
primaryConfig: {
542545
heading: getDiffHeading(_compareList.deploymentTemplate, true),
@@ -560,7 +563,8 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
560563
currentPipelineConfigData = getPipelineConfigDiffViewData(_currentList.pipelineConfigData)
561564
comparePipelineConfigData = getPipelineConfigDiffViewData(_compareList.pipelineConfigData)
562565
pipelineConfigData = {
563-
id: EnvResourceType.PipelineConfiguration,
566+
id: EnvResourceType.PipelineStrategy,
567+
pathType: EnvResourceType.PipelineStrategy,
564568
title: 'Pipeline Configuration',
565569
primaryConfig: {
566570
heading: null,
@@ -617,7 +621,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
617621
{
618622
title: pipelineConfigData.title,
619623
diffState: pipelineConfigData.diffState,
620-
href: getNavItemHref(EnvResourceType.PipelineConfiguration, null),
624+
href: getNavItemHref(EnvResourceType.PipelineStrategy, null),
621625
onClick: () => {
622626
const element = document.querySelector(`#${pipelineConfigData.id}`)
623627
element?.scrollIntoView({ block: 'start' })
@@ -673,6 +677,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
673677

674678
const manifestData = {
675679
id: EnvResourceType.Manifest,
680+
pathType: EnvResourceType.Manifest,
676681
title: 'Manifest Output',
677682
primaryConfig: {
678683
heading: <span className="fs-12 fw-6 cn-9">Generated Manifest</span>,

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const DeploymentConfigDiffMain = ({
9090

9191
return (
9292
<Fragment key={configItem.id}>
93-
<div className="dc__mxw-200">
93+
<div className="dc__mxw-300">
9494
<SelectPicker<string | number, false>
9595
{...selectPickerProps}
9696
isDisabled={isLoading || selectPickerProps?.isDisabled}

‎src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
*/
1616

1717
import Tippy from '@tippyjs/react'
18+
import { Tooltip } from '@Common/Tooltip'
1819
import { DefaultUserKey } from '../../../types'
1920
import { ImagePathTippyContentProps } from './types'
2021
import { ArtifactInfoProps } from '../types'
@@ -57,8 +58,8 @@ const ArtifactInfo = ({
5758
}
5859

5960
return (
60-
<div className="material-history__info flex left fs-13">
61-
<DeployIcon className="icon-dim-16 scn-6 mr-8" />
61+
<div className="material-history__info flex left fs-13 dc__gap-8">
62+
<DeployIcon className="icon-dim-16 scn-6" />
6263
<span className="fs-13 fw-4">{deployedTime}</span>
6364
</div>
6465
)
@@ -88,7 +89,9 @@ const ArtifactInfo = ({
8889
>
8990
{deployedBy[0]}
9091
</span>
91-
<span className="fs-13 fw-4">{deployedBy}</span>
92+
<Tooltip content={deployedBy}>
93+
<span className="fs-13 fw-4 dc__truncate dc__mxw-200">{deployedBy}</span>
94+
</Tooltip>
9295
</div>
9396
)
9497
}

‎src/Shared/Components/SelectPicker/common.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -165,13 +165,16 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
165165
{label}
166166
</h4>
167167
{/* Add support for custom ellipsis if required */}
168-
{showDescription && (
169-
<p
170-
className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__ellipsis-right__2nd-line' : ''}`}
171-
>
172-
{description}
173-
</p>
174-
)}
168+
{showDescription &&
169+
(typeof description === 'string' ? (
170+
<p
171+
className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__ellipsis-right__2nd-line' : ''}`}
172+
>
173+
{description}
174+
</p>
175+
) : (
176+
description
177+
))}
175178
</div>
176179
{endIcon && (
177180
<div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{endIcon}</div>

0 commit comments

Comments
 (0)