Skip to content

Commit 488b86a

Browse files
arunjaindevarunjaindev
authored
Merge pull request #759 from devtron-labs/feat/live-config-diff
feat: add radio selector in deployment config diff
2 parents e5f4a81 + be48e38 commit 488b86a

20 files changed

+271
-97
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": "1.15.0-pre-5",
3+
"version": "1.15.0-pre-6",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Shared/Components/AppStatusModal/AppStatusBody.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export const AppStatusBody = ({
169169
<div className="flexbox-col px-20 dc__gap-16 dc__overflow-auto">
170170
{/* Info card */}
171171
<div className="flexbox-col pt-20">
172-
<div className="flexbox-col br-8 border__primary bg__primary shadow__card--secondary">
172+
<div className="flexbox-col br-8 border__primary bg__primary shadow__card--20">
173173
{infoCardItems.map((item, index) => (
174174
<InfoCardItem
175175
key={item.id}

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

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@ import { ToggleResolveScopedVariables } from '@Shared/Components/ToggleResolveSc
2323
import { ReactComponent as Info } from '../../../../Assets/Icon/ic-info-filled.svg'
2424
import { MODES, YAMLStringify } from '../../../../Common'
2525
import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '../../../constants'
26-
import { DeploymentHistorySingleValue, DeploymentTemplateHistoryType } from '../types'
26+
import { DeploymentTemplateHistoryType } from '../types'
2727
import { DeploymentHistoryParamsType } from './types'
28+
import { renderDetailedValue } from './utils'
2829

2930
const DeploymentHistoryDiffView = ({
3031
currentConfiguration,
@@ -84,19 +85,6 @@ const DeploymentHistoryDiffView = ({
8485
setConvertVariables(!convertVariables)
8586
}
8687

87-
const renderDetailedValue = (
88-
parentClassName: string,
89-
singleValue: DeploymentHistorySingleValue,
90-
dataTestId: string,
91-
) => (
92-
<div className={`${parentClassName} px-16 py-8`}>
93-
<div className="cn-6 lh-16" data-testid={dataTestId}>
94-
{singleValue.displayName}
95-
</div>
96-
<div className="cn-9 fs-13 lh-20 dc__word-break">{singleValue.value}</div>
97-
</div>
98-
)
99-
10088
return (
10189
<div className="deployment-history-diff-view">
10290
{!previousConfigAvailable && (

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@
1717
import moment from 'moment'
1818

1919
import { DATE_TIME_FORMATS, ERROR_STATUS_CODE } from '@Common/Constants'
20+
import { Icon } from '@Shared/Components/Icon'
2021
import { SelectPickerOptionType } from '@Shared/Components/SelectPicker'
2122
import { DeploymentStatus } from '@Shared/Components/StatusComponent'
2223
import { DeploymentStageType } from '@Shared/constants'
2324

24-
import { History } from '../types'
25+
import { DeploymentHistorySingleValue, History } from '../types'
2526
import { renderPipelineDeploymentOptionDescription } from './helpers'
2627
import { DeploymentHistoryConfigDiffProps } from './types'
2728

@@ -88,3 +89,28 @@ export const isDeploymentHistoryConfigDiffNotFoundError = <T extends unknown>(re
8889

8990
export const getDeploymentHistoryConfigDiffError = <T extends unknown>(res: PromiseSettledResult<T>) =>
9091
res.status === 'rejected' && res.reason?.code !== ERROR_STATUS_CODE.NOT_FOUND ? res.reason : null
92+
93+
export const renderDetailedValue = (
94+
parentClassName: string,
95+
singleValue: DeploymentHistorySingleValue,
96+
dataTestId: string,
97+
) => (
98+
<div className={`${parentClassName} px-16 py-8 flexbox dc__content-space dc__gap-12`}>
99+
<div>
100+
<div className="cn-6 lh-16" data-testid={dataTestId}>
101+
{singleValue.displayName}
102+
</div>
103+
<div className="cn-9 fs-13 lh-20 dc__word-break">{singleValue.value}</div>
104+
</div>
105+
{singleValue.tooltipContent && (
106+
<Icon
107+
name="ic-info-outline"
108+
tooltipProps={{
109+
alwaysShowTippyOnHover: true,
110+
content: singleValue.tooltipContent,
111+
}}
112+
color={null}
113+
/>
114+
)}
115+
</div>
116+
)

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

Lines changed: 20 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,18 @@
1515
*/
1616

1717
/* eslint-disable dot-notation */
18+
import moment from 'moment'
19+
1820
import { get, getUrlWithSearchParams, ResponseType, ROUTES, sanitizeUserApprovalMetadata, trash } from '../../../Common'
19-
import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP, EXTERNAL_TYPES } from '../../constants'
20-
import { decode } from '../../Helpers'
21+
import { DATE_TIME_FORMAT_STRING, DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP, EXTERNAL_TYPES } from '../../constants'
22+
import { decode, isNullOrUndefined } from '../../Helpers'
2123
import { ResourceKindType, ResourceVersionType } from '../../types'
2224
import {
23-
DeploymentConfigurationsRes,
2425
DeploymentHistoryDetail,
25-
DeploymentHistoryDetailRes,
2626
DeploymentHistoryResult,
2727
DeploymentHistorySingleValue,
2828
DeploymentStatusDetailsResponse,
2929
FetchIdDataStatus,
30-
HistoryDiffSelectorRes,
3130
ModuleConfigResponse,
3231
TriggerDetailsResponseType,
3332
TriggerHistoryParamsType,
@@ -107,26 +106,7 @@ export function getManualSync(params: { appId: string; envId: string }): Promise
107106
return get(`${ROUTES.MANUAL_SYNC}/${params.appId}/${params.envId}`)
108107
}
109108

110-
export const getDeploymentHistoryList = (
111-
appId: string,
112-
pipelineId: string,
113-
triggerId: string,
114-
): Promise<DeploymentConfigurationsRes> => get(`app/history/deployed-configuration/${appId}/${pipelineId}/${triggerId}`)
115-
116-
export const getDeploymentHistoryDetail = (
117-
appId: string,
118-
pipelineId: string,
119-
id: string,
120-
historyComponent: string,
121-
historyComponentName: string,
122-
): Promise<DeploymentHistoryDetailRes> =>
123-
get(
124-
`app/history/deployed-component/detail/${appId}/${pipelineId}/${id}?historyComponent=${historyComponent
125-
.replace('-', '_')
126-
.toUpperCase()}${historyComponentName ? `&historyComponentName=${historyComponentName}` : ''}`,
127-
)
128-
129-
export const prepareDeploymentTemplateData = (rawData): Record<string, DeploymentHistorySingleValue> => {
109+
const prepareDeploymentTemplateData = (rawData): Record<string, DeploymentHistorySingleValue> => {
130110
const deploymentTemplateData = {}
131111
if (rawData.templateVersion) {
132112
deploymentTemplateData['templateVersion'] = { displayName: 'Chart Version', value: rawData.templateVersion }
@@ -140,7 +120,7 @@ export const prepareDeploymentTemplateData = (rawData): Record<string, Deploymen
140120
return deploymentTemplateData
141121
}
142122

143-
export const preparePipelineConfigData = (rawData): Record<string, DeploymentHistorySingleValue> => {
123+
const preparePipelineConfigData = (rawData): Record<string, DeploymentHistorySingleValue> => {
144124
const pipelineConfigData = {}
145125
if (rawData.pipelineTriggerType) {
146126
pipelineConfigData['pipelineTriggerType'] = {
@@ -149,15 +129,28 @@ export const preparePipelineConfigData = (rawData): Record<string, DeploymentHis
149129
}
150130
}
151131
if (rawData.strategy) {
132+
const { updatedBy, updatedOn, selectedAtRuntime } = rawData
152133
pipelineConfigData['strategy'] = {
153134
displayName: 'Deployment strategy',
154135
value: rawData.strategy,
136+
...(updatedBy && updatedOn && !isNullOrUndefined(selectedAtRuntime)
137+
? {
138+
tooltipContent: (
139+
<div className="flexbox-col br-4 w-200">
140+
<span className="fw-6">
141+
{selectedAtRuntime ? 'Selected at runtime' : 'Default Strategy'}
142+
</span>
143+
<span className="fw-4">{`${selectedAtRuntime ? '' : 'Last updated '}by ${updatedBy} at ${moment(updatedOn).format(DATE_TIME_FORMAT_STRING)}`}</span>
144+
</div>
145+
),
146+
}
147+
: {}),
155148
}
156149
}
157150
return pipelineConfigData
158151
}
159152

160-
export const prepareConfigMapAndSecretData = (
153+
const prepareConfigMapAndSecretData = (
161154
rawData,
162155
type: string,
163156
historyData: DeploymentHistoryDetail,
@@ -277,24 +270,6 @@ export const prepareHistoryData = (
277270
return historyData
278271
}
279272

280-
export const getDeploymentDiffSelector = (
281-
pipelineId: string,
282-
historyComponent,
283-
baseConfigurationId,
284-
historyComponentName,
285-
): Promise<HistoryDiffSelectorRes> => {
286-
const url = getUrlWithSearchParams(
287-
`${ROUTES.RESOURCE_HISTORY_DEPLOYMENT}/${ROUTES.CONFIG_CD_PIPELINE}/${ResourceVersionType.v1}`,
288-
{
289-
baseConfigurationId,
290-
historyComponent: historyComponent.replace('-', '_').toUpperCase(),
291-
filterCriteria: `cd-pipeline|id|${pipelineId}`,
292-
historyComponentName,
293-
},
294-
)
295-
return get(url)
296-
}
297-
298273
export const getTriggerHistory = async ({
299274
appId,
300275
envId,

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

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
PromotionApprovalMetadataType,
2828
ReleaseTag,
2929
ResponseType,
30+
TooltipProps,
3031
UserApprovalMetadataType,
3132
useScrollable,
3233
} from '../../../Common'
@@ -529,15 +530,12 @@ export interface DeploymentStatusDetailRowType extends Pick<DeploymentStatusDeta
529530
deploymentDetailedData: DeploymentStatusDetailsBreakdownDataType
530531
}
531532

532-
export interface DeploymentConfigurationsRes extends ResponseType {
533-
result?: DeploymentTemplateList[]
534-
}
535-
536533
export interface DeploymentHistorySingleValue {
537534
displayName: string
538535
value: string
539536
variableSnapshot?: object
540537
resolvedValue?: string
538+
tooltipContent?: TooltipProps['content']
541539
}
542540
export interface DeploymentHistoryDetail {
543541
componentName?: string
@@ -552,23 +550,6 @@ export interface DeploymentTemplateHistoryType {
552550
rootClassName?: string
553551
}
554552

555-
export interface DeploymentHistoryDetailRes extends ResponseType {
556-
result?: DeploymentHistoryDetail
557-
}
558-
559-
export interface HistoryDiffSelectorList {
560-
id: number
561-
deployedOn: string
562-
deployedBy: string
563-
deploymentStatus: string
564-
wfrId?: number
565-
runSource?: RunSourceType
566-
}
567-
568-
export interface HistoryDiffSelectorRes {
569-
result?: HistoryDiffSelectorList[]
570-
}
571-
572553
export interface DeploymentHistorySidebarType {
573554
deploymentHistoryList: DeploymentTemplateList[]
574555
setDeploymentHistoryList: React.Dispatch<React.SetStateAction<DeploymentTemplateList[]>>

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,26 @@
5151
}
5252
}
5353
}
54+
55+
.config-strategy-radio {
56+
.form__radio-item {
57+
border: none !important;
58+
}
59+
60+
.form__radio-item-content {
61+
padding-block: 6px;
62+
padding-inline: 0px;
63+
64+
.radio__button {
65+
margin-right: 8px;
66+
margin-top: 2px;
67+
}
68+
69+
.radio__title {
70+
font-size: 13px;
71+
line-height: 20px;
72+
font-weight: 400;
73+
color: var(--N900) !important;
74+
}
75+
}
76+
}

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

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

1717
import { SortingOrder } from '@Common/Constants'
18+
import { RadioGroupItemProps, RadioGroupProps } from '@Common/Types'
1819
import {
1920
AppEnvDeploymentConfigDTO,
2021
ConfigMapSecretDataConfigDatumDTO,
@@ -27,7 +28,7 @@ import { ManifestTemplateDTO } from '@Pages/Applications'
2728
import { DeploymentHistoryDetail } from '../CICDHistory'
2829
import { CollapseProps } from '../Collapse'
2930
import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList'
30-
import { SelectPickerProps } from '../SelectPicker'
31+
import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
3132

3233
export enum DeploymentConfigDiffState {
3334
NO_DIFF = 'noDiff',
@@ -53,6 +54,18 @@ export interface DeploymentConfigListItem {
5354
groupHeader?: string
5455
}
5556

57+
interface DeploymentConfigDiffRadioConfig extends Pick<RadioGroupProps, 'name' | 'onChange'> {
58+
title: string
59+
options: (Pick<RadioGroupItemProps, 'disabled'> &
60+
Pick<SelectPickerOptionType<string>, 'label' | 'value' | 'description' | 'tooltipProps'>)[]
61+
groupValue: string
62+
}
63+
64+
export interface DeploymentConfigDiffRadioSelectConfig {
65+
triggerElementTitle: string
66+
radioGroupConfig: DeploymentConfigDiffRadioConfig[]
67+
}
68+
5669
export type DeploymentConfigDiffSelectPickerProps =
5770
| {
5871
type: 'string'
@@ -66,6 +79,13 @@ export type DeploymentConfigDiffSelectPickerProps =
6679
text?: never
6780
selectPickerProps: SelectPickerProps
6881
}
82+
| {
83+
type: 'radio-group'
84+
id: string
85+
text?: never
86+
radioSelectConfig: DeploymentConfigDiffRadioSelectConfig
87+
selectPickerProps?: never
88+
}
6989

7090
export interface DeploymentConfigDiffNavigationItem
7191
extends Pick<CollapsibleListItem<'navLink'>, 'href' | 'title' | 'onClick'> {

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -667,6 +667,23 @@ const getConfigDataWithResolvedDeploymentTemplate = (
667667
}
668668
}
669669

670+
const removeTooltipContent = (
671+
valuesObj: Record<string, DeploymentHistorySingleValue>,
672+
): Record<string, DeploymentHistorySingleValue> => {
673+
if (!valuesObj) return valuesObj
674+
return Object.fromEntries(
675+
Object.entries(valuesObj).map(([key, val]) => {
676+
if (val && typeof val === 'object' && 'tooltipContent' in val) {
677+
// Remove tooltipContent so that diff is not checked in this property
678+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
679+
const { tooltipContent, ...rest } = val
680+
return [key, rest]
681+
}
682+
return [key, val]
683+
}),
684+
)
685+
}
686+
670687
/**
671688
* Generates a list of deployment configurations for application environments and identifies changes between the current and compare lists.
672689
*
@@ -738,6 +755,17 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
738755
compareWithObject.pipelineConfigData,
739756
sortingConfig,
740757
)
758+
759+
const currentPipelineConfigDataForDiff = {
760+
...currentPipelineConfigData,
761+
values: removeTooltipContent(currentPipelineConfigData.values),
762+
}
763+
764+
const comparePipelineConfigDataForDiff = {
765+
...comparePipelineConfigData,
766+
values: removeTooltipContent(comparePipelineConfigData.values),
767+
}
768+
741769
pipelineConfigData = {
742770
id: EnvResourceType.PipelineStrategy,
743771
pathType: EnvResourceType.PipelineStrategy,
@@ -750,7 +778,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
750778
heading: null,
751779
list: currentPipelineConfigData,
752780
},
753-
diffState: getDiffState(currentPipelineConfigData, comparePipelineConfigData),
781+
diffState: getDiffState(currentPipelineConfigDataForDiff, comparePipelineConfigDataForDiff),
754782
}
755783
}
756784

0 commit comments

Comments
 (0)