Skip to content

Commit a693de4

Browse files
AbhishekA1509AbhishekA1509
committed
feat: add disconnect icon and integrate it into the application; enhance AppStatusModal with loading state handling
1 parent b5872cf commit a693de4

File tree

8 files changed

+80
-52
lines changed

8 files changed

+80
-52
lines changed

‎src/Assets/IconV2/ic-disconnect.svg

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const AppStatusModal = ({
2323
titleSegments,
2424
handleClose,
2525
type,
26+
isLoading: isLoadingProp,
2627
appDetails: appDetailsProp,
2728
deploymentStatusDetailsBreakdownData: deploymentStatusDetailsBreakdownDataProps,
2829
processVirtualEnvironmentDeploymentData,
@@ -78,7 +79,7 @@ const AppStatusModal = ({
7879
}
7980

8081
const areInitialAppDetailsLoadingWithAbortedError =
81-
areInitialAppDetailsLoading || getIsRequestAborted(fetchedAppDetailsError)
82+
isLoadingProp || areInitialAppDetailsLoading || getIsRequestAborted(fetchedAppDetailsError)
8283

8384
const appDetails = type === 'release' ? fetchedAppDetails?.appDetails : appDetailsProp
8485
const deploymentStatusDetailsBreakdownData =
@@ -146,6 +147,7 @@ const AppStatusModal = ({
146147
if (!appDetails?.resourceTree) {
147148
return 'Application status is not available'
148149
}
150+
return ''
149151
}
150152

151153
if (!deploymentStatusDetailsBreakdownData || !getShowDeploymentStatusModal({ type, appDetails })) {

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,19 @@ export type AppStatusModalProps = {
2121
processVirtualEnvironmentDeploymentData: (
2222
data?: DeploymentStatusDetailsType,
2323
) => DeploymentStatusDetailsBreakdownDataType
24-
appDetails?: never
25-
deploymentStatusDetailsBreakdownData?: never
2624
appId: number
2725
envId: number
26+
appDetails?: never
27+
deploymentStatusDetailsBreakdownData?: never
28+
isLoading?: never
2829
initialTab?: never
2930
}
3031
| {
3132
type: 'devtron-app' | 'other-apps' | 'stack-manager'
3233
appDetails: AppDetails
33-
deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType
34+
deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType | null
3435
initialTab: AppStatusModalTabType
36+
isLoading?: boolean
3537
processVirtualEnvironmentDeploymentData?: never
3638
appId?: never
3739
envId?: never

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

Lines changed: 47 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ import { AppType } from '@Shared/types'
2424

2525
import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
2626
import { DATE_TIME_FORMATS, showError } from '../../../Common'
27-
import { DEPLOYMENT_STATUS, statusIcon, TIMELINE_STATUS } from '../../constants'
27+
import { ComponentSizeType, DEPLOYMENT_STATUS, statusIcon, TIMELINE_STATUS } from '../../constants'
2828
import { AppStatusContent } from '../AppStatusModal'
29+
import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
2930
import { APP_HEALTH_DROP_DOWN_LIST, MANIFEST_STATUS_HEADERS, TERMINAL_STATUS_MAP } from './constants'
3031
import { ErrorInfoStatusBar } from './ErrorInfoStatusBar'
3132
import { getManualSync } from './service'
@@ -163,10 +164,13 @@ export const DeploymentStatusDetailRow = ({
163164

164165
{(deploymentDetailedData.deploymentStatus === DEPLOYMENT_STATUS.TIMED_OUT ||
165166
deploymentDetailedData.deploymentStatus === DEPLOYMENT_STATUS.UNABLE_TO_FETCH) && (
166-
// TODO: Try to make to Button
167-
<span className="cb-5 fw-6 ml-8 cursor" onClick={manualSyncData}>
168-
Try now
169-
</span>
167+
<Button
168+
dataTestId="manual-sync-resource-status"
169+
text="Try now"
170+
variant={ButtonVariantType.text}
171+
size={ComponentSizeType.xxs}
172+
onClick={manualSyncData}
173+
/>
170174
)}
171175
</div>
172176
)}
@@ -186,40 +190,52 @@ export const DeploymentStatusDetailRow = ({
186190
<>
187191
<div className="bw-1 en-2">
188192
<div
189-
className={`deployment-status-breakdown-row py-8 px-8 bg__primary ${collapsed ? (!isHelmManifestPushFailed ? 'br-4' : '') : 'border-collapse'}`}
193+
className={`flexbox dc__align-items-center dc__content-space dc__gap-12 py-8 px-8 bg__primary ${collapsed ? (!isHelmManifestPushFailed ? 'br-4' : '') : 'border-collapse'}`}
190194
>
191-
{renderIcon(statusBreakDownType.icon)}
192-
<span className="ml-12 mr-12 fs-13">
193-
<span data-testid="deployment-status-step-name" className="dc__truncate">
194-
{statusBreakDownType.displayText}
195+
<div className="flexbox dc__align-items-center dc__gap-12 flex-grow-1">
196+
{renderIcon(statusBreakDownType.icon)}
197+
<span className="fs-13 flexbox dc__gap-6">
198+
<span data-testid="deployment-status-step-name" className="dc__truncate">
199+
{statusBreakDownType.displayText}
200+
</span>
201+
{statusBreakDownType.displaySubText && (
202+
<span className={`app-summary__status-name f-${statusBreakDownType.icon || 'waiting'}`}>
203+
{statusBreakDownType.displaySubText}
204+
</span>
205+
)}
195206
</span>
196-
{statusBreakDownType.displaySubText && (
207+
208+
{statusBreakDownType.time !== '' && statusBreakDownType.icon !== 'inprogress' && (
197209
<span
198-
className={`ml-12 app-summary__status-name f-${statusBreakDownType.icon || 'waiting'}`}
210+
data-testid="deployment-status-kubernetes-dropdown dc__no-shrink"
211+
className={`px-8 py-4 br-12 ${
212+
statusBreakDownType.icon === 'failed' ? 'bcr-1 cr-5' : 'bcg-1 cg-7'
213+
}`}
199214
>
200-
{statusBreakDownType.displaySubText}
215+
{moment(statusBreakDownType.time, 'YYYY-MM-DDTHH:mm:ssZ').format(
216+
DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT,
217+
)}
201218
</span>
202219
)}
203-
</span>
204-
205-
{statusBreakDownType.time !== '' && statusBreakDownType.icon !== 'inprogress' && (
206-
<span
207-
data-testid="deployment-status-kubernetes-dropdown dc__no-shrink"
208-
className={`px-8 py-4 br-12 ${
209-
statusBreakDownType.icon === 'failed' ? 'bcr-1 cr-5' : 'bcg-1 cg-7'
210-
}`}
211-
>
212-
{moment(statusBreakDownType.time, 'YYYY-MM-DDTHH:mm:ssZ').format(
213-
DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT,
214-
)}
215-
</span>
216-
)}
220+
</div>
217221
{isAccordion && (
218-
<DropDownIcon
219-
style={{ marginLeft: 'auto', ['--rotateBy' as any]: `${180 * Number(!collapsed)}deg` }}
220-
className="icon-dim-24 rotate pointer"
222+
<Button
223+
dataTestId="steps-deployment-history-dropdown"
221224
onClick={toggleDropdown}
222-
data-testid="steps-deployment-history-dropdown"
225+
variant={ButtonVariantType.borderLess}
226+
style={ButtonStyleType.neutral}
227+
size={ComponentSizeType.small}
228+
icon={
229+
<DropDownIcon
230+
style={{
231+
marginLeft: 'auto',
232+
['--rotateBy' as any]: `${180 * Number(!!collapsed)}deg`,
233+
}}
234+
className="rotate"
235+
/>
236+
}
237+
ariaLabel="Toggle dropdown"
238+
showAriaLabelInTippy={false}
223239
/>
224240
)}
225241
</div>

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,12 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16-
import { ReactElement } from 'react'
16+
import { ComponentProps, ReactElement } from 'react'
1717
import moment from 'moment'
1818

1919
import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
20-
import { ReactComponent as Check } from '@Icons/ic-check-grey.svg'
2120
import { ReactComponent as Close } from '@Icons/ic-close.svg'
22-
import { ReactComponent as Disconnect } from '@Icons/ic-disconnected.svg'
23-
import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg'
24-
import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
2521
import { ReactComponent as ICInProgress } from '@Icons/ic-in-progress.svg'
26-
import { ReactComponent as TimeOut } from '@Icons/ic-timeout-red.svg'
27-
import { ReactComponent as Timer } from '@Icons/ic-timer.svg'
2822
import { DATE_TIME_FORMATS } from '@Common/Constants'
2923
import { ALL_RESOURCE_KIND_FILTER } from '@Shared/constants'
3024
import { isTimeStringAvailable } from '@Shared/Helpers'
@@ -123,29 +117,36 @@ export const buildHoverHtmlForWebhook = (eventName, condition, selectors) => {
123117
}
124118

125119
export const renderIcon = (iconState: string): JSX.Element => {
120+
const iconBaseProps: Pick<ComponentProps<typeof Icon>, 'size' | 'color'> = {
121+
color: null,
122+
size: 20,
123+
}
124+
126125
switch (iconState) {
127126
case 'success':
128-
return <Check className="icon-dim-20 green-tick" data-testid="success-green-tick" />
127+
return <Icon {...iconBaseProps} name="ic-check" color="G500" dataTestId="success-green-tick" />
129128
case 'failed':
130-
return <Error className="icon-dim-20" />
129+
return <Icon {...iconBaseProps} name="ic-error" />
131130
case 'unknown':
132-
return <ICHelpOutline className="icon-dim-20" />
131+
return <Icon {...iconBaseProps} name="ic-help-outline" />
133132
case 'inprogress':
134133
return (
135-
<div className="icon-dim-20">
134+
<div className="icon-dim-20 dc__no-shrink">
136135
<div className="pulse-highlight" />
137136
</div>
138137
)
139138
case 'unreachable':
140-
return <Close className="icon-dim-20" />
139+
return <Icon {...iconBaseProps} name="ic-close-small" />
141140
case 'loading':
142-
return <Icon name="ic-circle-loader" color="O500" size={20} />
141+
return <Icon {...iconBaseProps} name="ic-circle-loader" color="O500" />
143142
case 'disconnect':
144-
return <Disconnect className="icon-dim-20" />
143+
return <Icon {...iconBaseProps} name="ic-disconnect" />
145144
case 'time_out':
146-
return <TimeOut className="icon-dim-20" />
145+
case 'timed_out':
146+
// TODO: Test
147+
return <Icon {...iconBaseProps} name="ic-timeout-two-dash" color="R500" />
147148
default:
148-
return <Timer className="icon-dim-20 timer-icon" />
149+
return <Icon {...iconBaseProps} name="ic-timer" color="N600" />
149150
}
150151
}
151152

‎src/Shared/Components/Icon/Icon.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { ReactComponent as ICDeleteLightning } from '@IconsV2/ic-delete-lightnin
4141
import { ReactComponent as ICDelhivery } from '@IconsV2/ic-delhivery.svg'
4242
import { ReactComponent as ICDevtron } from '@IconsV2/ic-devtron.svg'
4343
import { ReactComponent as ICDevtronHeaderLogo } from '@IconsV2/ic-devtron-header-logo.svg'
44+
import { ReactComponent as ICDisconnect } from '@IconsV2/ic-disconnect.svg'
4445
import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg'
4546
import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg'
4647
import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg'
@@ -160,6 +161,7 @@ export const iconMap = {
160161
'ic-delhivery': ICDelhivery,
161162
'ic-devtron-header-logo': ICDevtronHeaderLogo,
162163
'ic-devtron': ICDevtron,
164+
'ic-disconnect': ICDisconnect,
163165
'ic-dockerhub': ICDockerhub,
164166
'ic-ecr': ICEcr,
165167
'ic-env': ICEnv,

‎src/Shared/Components/Icon/IconBase.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const conditionalWrap = (tooltipProps: IconBaseProps['tooltipProps']) => (childr
2828
</Tooltip>
2929
)
3030

31-
export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color }: IconBaseProps) => {
31+
export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color, dataTestId }: IconBaseProps) => {
3232
const IconComponent = iconMap[name]
3333

3434
if (!IconComponent) {
@@ -38,6 +38,7 @@ export const IconBase = ({ name, iconMap, size = 16, tooltipProps, color }: Icon
3838
return (
3939
<ConditionalWrap condition={!!tooltipProps?.content} wrap={conditionalWrap(tooltipProps)}>
4040
<IconComponent
41+
data-testid={dataTestId}
4142
className={`icon-dim-${size} ${color ? 'icon-component-color' : ''} ${ICON_STROKE_WIDTH_MAP[size] ? 'icon-component-stroke-width' : ''} dc__no-shrink`}
4243
style={{
4344
...(color ? { ['--iconColor' as string]: `var(--${color})` } : {}),

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,5 @@ export interface IconBaseProps {
3939
* @example `'B500'`, `'N200'`, `'G50'`, `'R700'`
4040
*/
4141
color: IconBaseColorType
42+
dataTestId?: string
4243
}

0 commit comments

Comments
 (0)