Skip to content

Commit 23aae1a

Browse files
vivek-devtronvivek-devtron
authored
Merge pull request #1619 from devtron-labs/UI-fixes-AppDetails
fix: App details UI fixes and shimmer on app list page
2 parents 599e752 + 5683039 commit 23aae1a

File tree

23 files changed

+385
-363
lines changed

23 files changed

+385
-363
lines changed

‎src/components/Jobs/ExpandedRow/ExpandedRow.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
}
4444

4545
.app-list__row--expanded {
46-
box-shadow: inset 0 -1px 0 0 #d1d1d1;
46+
border-bottom: 1px solid var(--N100);
4747
background-color: var(--N50) !important;
4848
position: relative;
4949
}

‎src/components/app/details/appConfig/AppConfig.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ export default function AppConfig({ appName, isJobView, filteredEnvIds }: AppCon
305305
if (state.canDeleteApp) {
306306
return (
307307
<DeleteDialog
308-
title={`Delete '${state.appName}'?`}
308+
title={`Delete '${appName}'?`}
309309
delete={deleteAppHandler}
310310
closeDelete={() => {
311311
setState((state) => ({ ...state, showDeleteConfirm: false }))

‎src/components/app/details/appDetails/AppDetails.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
DEPLOYMENT_STATUS,
2828
HELM_DEPLOYMENT_STATUS_TEXT,
2929
RESOURCES_NOT_FOUND,
30+
DEFAULT_STATUS_TEXT,
3031
} from '../../../../config'
3132
import { NavigationArrow, useAppContext, FragmentHOC, ScanDetailsModal } from '../../../common'
3233
import { CustomValueContainer, groupHeaderStyle, GroupHeading, Option } from '../../../v2/common/ReactSelect.utils'
@@ -179,7 +180,7 @@ export default function AppDetail({ filteredEnvIds }: { filteredEnvIds?: string
179180
const environment = useMemo(() => {
180181
return envList.find((env) => env.environmentId === +params.envId)
181182
}, [envList, params.envId])
182-
183+
183184
return (
184185
<div data-testid="app-details-wrapper" className="app-details-page-wrapper">
185186
{!params.envId && envList.length > 0 && (
@@ -265,7 +266,7 @@ export const Details: React.FC<DetailsType> = ({
265266
? processVirtualEnvironmentDeploymentData()
266267
: processDeploymentStatusDetailsData()),
267268
deploymentStatus: DEFAULT_STATUS,
268-
deploymentStatusText: DEFAULT_STATUS,
269+
deploymentStatusText: DEFAULT_STATUS_TEXT,
269270
})
270271
const isExternalToolAvailable: boolean =
271272
externalLinksAndTools.externalLinks.length > 0 && externalLinksAndTools.monitoringTools.length > 0
@@ -554,7 +555,8 @@ export const Details: React.FC<DetailsType> = ({
554555
toggleDetailedStatus(true)
555556
}
556557

557-
const showVulnerabilitiesModal = useCallback(() => {
558+
const showVulnerabilitiesModal = useCallback((e) => {
559+
e.stopPropagation()
558560
toggleScanDetailsModal(true)
559561
}, [toggleScanDetailsModal])
560562

@@ -614,10 +616,12 @@ export const Details: React.FC<DetailsType> = ({
614616
/>
615617
)
616618
}
617-
619+
const isdeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
618620
return (
619621
<>
620-
<div className="w-100 pt-16 pr-20 pb-16 pl-20 app-info-bg-gradient">
622+
<div
623+
className={`w-100 pt-16 pr-20 pb-16 pl-20 dc__gap-16 ${isdeploymentAppDeleting ? 'app-info-bg' : 'app-info-bg-gradient'}`}
624+
>
621625
<SourceInfo
622626
appDetails={appDetails}
623627
setDetailed={toggleDetailedStatus}
@@ -640,7 +644,7 @@ export const Details: React.FC<DetailsType> = ({
640644
setErrorsList={setErrorsList}
641645
/>
642646
</div>
643-
{!loadingDetails && !loadingResourceTree && !appDetails?.deploymentAppDeleteRequest ? (
647+
{!loadingDetails && !loadingResourceTree && !appDetails?.deploymentAppDeleteRequest && (
644648
<>
645649
{environment && !isVirtualEnvRef.current && (
646650
<AppMetrics
@@ -659,11 +663,9 @@ export const Details: React.FC<DetailsType> = ({
659663
/>
660664
)}
661665
</>
662-
) : (
663-
<div className="mb-9" />
664666
)}
665667
{loadingResourceTree ? (
666-
<div className="bcn-0 dc__border-top h-100">
668+
<div className="bcn-0 h-100">
667669
<Progressing pageLoader fullHeight size={32} fillColor="var(--N500)" />
668670
</div>
669671
) : (

‎src/components/app/details/appDetails/AppStatusCard.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { DeploymentAppTypes } from '@devtron-labs/devtron-fe-common-lib'
55
import { ReactComponent as Question } from '../../../../assets/icons/ic-help-outline.svg'
66
import { AppStatusCardType } from './appDetails.type'
77
import LoadingCard from './LoadingCard'
8+
import './appDetails.scss'
89

910
const AppStatusCard = ({ appDetails, status, cardLoading, setDetailed, message }: AppStatusCardType) => {
1011
const isHibernated = ['hibernating', 'hibernated'].includes(status.toLowerCase())
@@ -72,7 +73,7 @@ const AppStatusCard = ({ appDetails, status, cardLoading, setDetailed, message }
7273
</div>
7374
<div className="flex br-4">
7475
<figure
75-
className={`${status.toLowerCase()} h-24 w-24`}
76+
className={`dc__app-summary__icon dc__zi-0 ${status.toLowerCase()} h-24 w-24`}
7677
style={{ margin: 'auto', backgroundSize: 'contain, contain' }}
7778
/>
7879
</div>

‎src/components/app/details/appDetails/DeploymentStatusCard.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,10 @@ const DeploymentStatusCard = ({
2626
}
2727
const ProgressingStateList: string[] = [
2828
DEPLOYMENT_STATUS.INPROGRESS,
29+
DEPLOYMENT_STATUS.PROGRESSING,
2930
DEPLOYMENT_STATUS.STARTING,
3031
DEPLOYMENT_STATUS.INITIATING,
32+
DEPLOYMENT_STATUS.CHECKING
3133
]
3234
const renderDeploymentStatus = () => {
3335
const { triggeredBy, deploymentStatus, deploymentTriggerTime, deploymentStatusText } =
@@ -52,7 +54,7 @@ const DeploymentStatusCard = ({
5254
<div className="flex fs-12 fw-4">
5355
<span
5456
data-testid="deployment-status-name"
55-
className={`app-summary__status-name fs-14 mr-8 fw-6 f-${deploymentStatus?.toLowerCase()} ${
57+
className={`app-summary__status-name fs-13 mr-8 fw-6 f-${deploymentStatus?.toLowerCase()} ${
5658
ProgressingStateList.includes(deploymentStatus) ? 'dc__loading-dots' : ''
5759
}`}
5860
>

‎src/components/app/details/appDetails/SourceInfo.tsx

Lines changed: 75 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import IssuesCard from './IssuesCard'
2020
import SecurityVulnerabilityCard from './SecurityVulnerabilityCard'
2121
import AppStatusCard from './AppStatusCard'
2222
import { getLastExecutionByArtifactId } from '../../../../services/service'
23+
import LoadingCard from './LoadingCard'
2324

2425
const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
2526

@@ -87,7 +88,8 @@ export const SourceInfo = ({
8788
}
8889
}, [appDetails?.ciArtifactId, appDetails?.appId])
8990

90-
const onClickShowCommitInfo = (): void => {
91+
const onClickShowCommitInfo = (e): void => {
92+
e.stopPropagation()
9193
showCommitInfo(true)
9294
}
9395

@@ -99,6 +101,15 @@ export const SourceInfo = ({
99101
showHibernateModal(isHibernated ? 'resume' : 'hibernate')
100102
}
101103

104+
const shimmerLoaderBlocks = () => {
105+
const loadingCards = []
106+
for (let i = 0; i < 4; i++) {
107+
loadingCards.push(<LoadingCard key={i} />)
108+
}
109+
110+
return <div className="flex left mb-16">{loadingCards}</div>
111+
}
112+
102113
const conditionalScalePodsButton = (children) => {
103114
return (
104115
<Tippy
@@ -114,7 +125,7 @@ export const SourceInfo = ({
114125

115126
const renderDevtronAppsEnvironmentSelector = (environment) => {
116127
return (
117-
<div className="flex left w-100 mb-16">
128+
<div className="flex left w-100">
118129
<EnvSelector
119130
environments={environments}
120131
disabled={loadingDetails || loadingResourceTree || (params.envId && !showCommitInfo)}
@@ -214,66 +225,69 @@ export const SourceInfo = ({
214225
}
215226

216227
return (
217-
<div className="flex left w-100 column source-info-container">
228+
<div className="flex left w-100 column source-info-container dc__gap-16">
218229
{renderDevtronAppsEnvironmentSelector(environment)}
219-
{!isdeploymentAppDeleting && environment && (
220-
<div className="flex left w-100">
221-
{!isVirtualEnvironment && (
222-
<AppStatusCard
223-
appDetails={appDetails}
224-
status={status}
225-
cardLoading={cardLoading}
226-
setDetailed={setDetailed}
227-
message={message}
228-
/>
229-
)}
230-
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
231-
{!loadingResourceTree && (
232-
<IssuesCard
233-
cardLoading={cardLoading}
234-
toggleIssuesModal={toggleIssuesModal}
235-
setErrorsList={setErrorsList}
236-
setDetailed={setDetailed}
237-
/>
238-
)}
239-
<DeploymentStatusCard
240-
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
241-
cardLoading={cardLoading}
242-
hideDetails={appDetails?.deploymentAppType === DeploymentAppTypes.HELM}
243-
isVirtualEnvironment={isVirtualEnvironment}
244-
refetchDeploymentStatus={refetchDeploymentStatus}
245-
/>
246-
{appDetails?.dataSource !== 'EXTERNAL' && (
247-
<DeployedCommitCard
248-
cardLoading={cardLoading}
249-
showCommitInfoDrawer={onClickShowCommitInfo}
250-
envId={envId}
251-
ciArtifactId={ciArtifactId}
252-
/>
253-
)}
254-
{!appDetails?.deploymentAppDeleteRequest && showVulnerabilitiesCard && (
255-
<SecurityVulnerabilityCard
256-
cardLoading={cardLoading}
257-
severityCount={severityCount}
258-
showVulnerabilitiesModal={showVulnerabilitiesModal}
259-
/>
260-
)}
261-
<div className="flex right ml-auto">
262-
{appDetails?.appStoreChartId && (
263-
<>
264-
<span className="mr-8 fs-12 cn-7">Chart:</span>
265-
<Link
266-
className="cb-5 fw-6"
267-
to={`${URLS.CHARTS}/discover/chart/${appDetails.appStoreChartId}`}
268-
>
269-
{appDetails.appStoreChartName}/{appDetails.appStoreAppName}(
270-
{appDetails.appStoreAppVersion})
271-
</Link>
272-
</>
273-
)}
274-
</div>
275-
</div>
276-
)}
230+
{loadingDetails
231+
? shimmerLoaderBlocks()
232+
: !isdeploymentAppDeleting &&
233+
environment && (
234+
<div className="flex left w-100">
235+
{!isVirtualEnvironment && (
236+
<AppStatusCard
237+
appDetails={appDetails}
238+
status={status}
239+
cardLoading={cardLoading}
240+
setDetailed={setDetailed}
241+
message={message}
242+
/>
243+
)}
244+
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
245+
{!loadingResourceTree && (
246+
<IssuesCard
247+
cardLoading={cardLoading}
248+
toggleIssuesModal={toggleIssuesModal}
249+
setErrorsList={setErrorsList}
250+
setDetailed={setDetailed}
251+
/>
252+
)}
253+
<DeploymentStatusCard
254+
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
255+
cardLoading={cardLoading}
256+
hideDetails={appDetails?.deploymentAppType === DeploymentAppTypes.HELM}
257+
isVirtualEnvironment={isVirtualEnvironment}
258+
refetchDeploymentStatus={refetchDeploymentStatus}
259+
/>
260+
{appDetails?.dataSource !== 'EXTERNAL' && (
261+
<DeployedCommitCard
262+
cardLoading={cardLoading}
263+
showCommitInfoDrawer={onClickShowCommitInfo}
264+
envId={envId}
265+
ciArtifactId={ciArtifactId}
266+
/>
267+
)}
268+
{!appDetails?.deploymentAppDeleteRequest && showVulnerabilitiesCard && (
269+
<SecurityVulnerabilityCard
270+
cardLoading={cardLoading}
271+
severityCount={severityCount}
272+
showVulnerabilitiesModal={showVulnerabilitiesModal}
273+
/>
274+
)}
275+
<div className="flex right ml-auto">
276+
{appDetails?.appStoreChartId && (
277+
<>
278+
<span className="mr-8 fs-12 cn-7">Chart:</span>
279+
<Link
280+
className="cb-5 fw-6"
281+
to={`${URLS.CHARTS}/discover/chart/${appDetails.appStoreChartId}`}
282+
>
283+
{appDetails.appStoreChartName}/{appDetails.appStoreAppName}(
284+
{appDetails.appStoreAppVersion})
285+
</Link>
286+
</>
287+
)}
288+
</div>
289+
</div>
290+
)}
277291
</div>
278292
)
279293
}

‎src/components/app/details/appDetails/appDetails.scss

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1912,6 +1912,11 @@ table.resource-tree {
19121912
margin-left: 8px !important;
19131913
}
19141914

1915+
.app-details-manifest-download-card {
1916+
overflow: hidden;
1917+
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.20);
1918+
}
1919+
19151920
.app-details-info-card {
19161921
align-items: flex-start;
19171922
flex-direction: column;
@@ -1972,6 +1977,11 @@ table.resource-tree {
19721977
height: 100%;
19731978
overflow: scroll;
19741979

1980+
.issues-listing-modal__header {
1981+
position: sticky;
1982+
top: 0
1983+
}
1984+
19751985
&__body {
19761986
&__head-row {
19771987
display: flex;
@@ -2012,4 +2022,4 @@ table.resource-tree {
20122022
}
20132023
}
20142024
}
2015-
}
2025+
}

0 commit comments

Comments
 (0)