Skip to content

Commit f3e951f

Browse files
author
Mukul Tayal
committed
App detaild UI fixes and shimmer on app page
1 parent 2c0c6b2 commit f3e951f

File tree

21 files changed

+403
-329
lines changed

21 files changed

+403
-329
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
@@ -304,7 +304,7 @@ export default function AppConfig({ appName, isJobView, filteredEnvIds }: AppCon
304304
if (state.canDeleteApp)
305305
return (
306306
<DeleteDialog
307-
title={`Delete '${state.appName}'?`}
307+
title={`Delete '${appName}'?`}
308308
delete={deleteAppHandler}
309309
closeDelete={() => {
310310
setState((state) => ({ ...state, showDeleteConfirm: false }))

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
DEPLOYMENT_STATUS,
2323
HELM_DEPLOYMENT_STATUS_TEXT,
2424
RESOURCES_NOT_FOUND,
25+
DEFAULT_STATUS_TEXT,
2526
} from '../../../../config'
2627
import { NavigationArrow, useAppContext, FragmentHOC, ScanDetailsModal } from '../../../common'
2728
import { CustomValueContainer, groupHeaderStyle, GroupHeading, Option } from './../../../v2/common/ReactSelect.utils'
@@ -177,7 +178,7 @@ export default function AppDetail({ filteredEnvIds }: { filteredEnvIds?: string
177178
const environment = useMemo(() => {
178179
return envList.find((env) => env.environmentId === +params.envId)
179180
}, [envList, params.envId])
180-
181+
181182
return (
182183
<div data-testid="app-details-wrapper" className="app-details-page-wrapper">
183184
{!params.envId && envList.length > 0 && (
@@ -264,7 +265,7 @@ export const Details: React.FC<DetailsType> = ({
264265
? processVirtualEnvironmentDeploymentData()
265266
: processDeploymentStatusDetailsData()),
266267
deploymentStatus: DEFAULT_STATUS,
267-
deploymentStatusText: DEFAULT_STATUS,
268+
deploymentStatusText: DEFAULT_STATUS_TEXT,
268269
})
269270
const isExternalToolAvailable: boolean =
270271
externalLinksAndTools.externalLinks.length > 0 && externalLinksAndTools.monitoringTools.length > 0
@@ -552,7 +553,8 @@ export const Details: React.FC<DetailsType> = ({
552553
toggleDetailedStatus(true)
553554
}
554555

555-
const showVulnerabilitiesModal = useCallback(() => {
556+
const showVulnerabilitiesModal = useCallback((e) => {
557+
e.stopPropagation()
556558
toggleScanDetailsModal(true)
557559
}, [toggleScanDetailsModal])
558560

@@ -663,7 +665,7 @@ export const Details: React.FC<DetailsType> = ({
663665
<div className="mb-9"></div>
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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ReactComponent as Question } from '../../../../assets/icons/ic-help-out
55
import { AppStatusCardType } from './appDetails.type'
66
import { DeploymentAppTypes } from '@devtron-labs/devtron-fe-common-lib'
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())

‎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 @@ function 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 } =
@@ -50,7 +52,7 @@ function DeploymentStatusCard({
5052
<div className="flex fs-12 fw-4">
5153
<span
5254
data-testid="deployment-status-name"
53-
className={`app-summary__status-name fs-14 mr-8 fw-6 f-${deploymentStatus?.toLowerCase()} ${
55+
className={`app-summary__status-name fs-13 mr-8 fw-6 f-${deploymentStatus?.toLowerCase()} ${
5456
ProgressingStateList.includes(deploymentStatus) ? 'dc__loading-dots' : ''
5557
}`}
5658
>

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

Lines changed: 74 additions & 60 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

@@ -88,7 +89,8 @@ export function SourceInfo({
8889
}
8990
}, [appDetails?.ciArtifactId, appDetails?.appId])
9091

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

@@ -100,6 +102,15 @@ export function SourceInfo({
100102
showHibernateModal(isHibernated ? 'resume' : 'hibernate')
101103
}
102104

105+
const shimmerLoaderBlocks = () => {
106+
const loadingCards = []
107+
for (let i = 0; i < 4; i++) {
108+
loadingCards.push(<LoadingCard key={i} />)
109+
}
110+
111+
return <div className="flex left ml-20 mb-16">{loadingCards}</div>
112+
}
113+
103114
const conditionalScalePodsButton = (children) => {
104115
return (
105116
<Tippy
@@ -215,65 +226,68 @@ export function SourceInfo({
215226
return (
216227
<div className="flex left w-100 column source-info-container">
217228
{renderDevtronAppsEnvironmentSelector(environment)}
218-
{!isdeploymentAppDeleting && environment && (
219-
<div className="flex left w-100">
220-
{!isVirtualEnvironment && (
221-
<AppStatusCard
222-
appDetails={appDetails}
223-
status={status}
224-
cardLoading={cardLoading}
225-
setDetailed={setDetailed}
226-
message={message}
227-
/>
228-
)}
229-
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
230-
{!loadingResourceTree && (
231-
<IssuesCard
232-
appStreamData={appStreamData}
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-
)}
229+
{loadingDetails
230+
? shimmerLoaderBlocks()
231+
: !isdeploymentAppDeleting &&
232+
environment && (
233+
<div className="flex left w-100">
234+
{!isVirtualEnvironment && (
235+
<AppStatusCard
236+
appDetails={appDetails}
237+
status={status}
238+
cardLoading={cardLoading}
239+
setDetailed={setDetailed}
240+
message={message}
241+
/>
242+
)}
243+
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
244+
{!loadingResourceTree && (
245+
<IssuesCard
246+
appStreamData={appStreamData}
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: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1794,11 +1794,9 @@ table.resource-tree {
17941794

17951795
.source-info-container,
17961796
.app-details-info-card {
1797-
.dc__app-summary__icon {
1798-
&.healthy {
1799-
background-size: contain, contain;
1800-
background: url(../../../../assets/icons/appstatus/ic-heart-green.svg), transparent;
1801-
}
1797+
.healthy {
1798+
background-size: contain, contain;
1799+
background: url(../../../../assets/icons/appstatus/ic-heart-green.svg), transparent;
18021800
}
18031801

18041802
.mw-340 {
@@ -1972,6 +1970,11 @@ table.resource-tree {
19721970
height: 100%;
19731971
overflow: scroll;
19741972

1973+
.issues-listing-modal__header {
1974+
position: sticky;
1975+
top: 0
1976+
}
1977+
19751978
&__body {
19761979
&__head-row {
19771980
display: flex;
@@ -2012,4 +2015,4 @@ table.resource-tree {
20122015
}
20132016
}
20142017
}
2015-
}
2018+
}

‎src/components/app/list-new/AppList.tsx

Lines changed: 40 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -982,60 +982,49 @@ export default function AppList({ isSuperAdmin, appListCount, isArgoInstalled }:
982982
{renderAppliedFilters()}
983983
{renderAppTabs()}
984984
{serverMode === SERVER_MODE.FULL && renderAppCreateRouter()}
985-
{dataStateType === AppListViewType.LOADING && (
986-
<div className="dc__height-reduce-172">
987-
<Progressing pageLoader />
985+
{params.appType === AppListConstants.AppType.DEVTRON_APPS && serverMode === SERVER_MODE.FULL && (
986+
<DevtronAppListContainer
987+
payloadParsedFromUrl={parsedPayloadOnUrlChange}
988+
environmentClusterList={environmentClusterListRes}
989+
clearAllFilters={removeAllFilters}
990+
sortApplicationList={sortApplicationList}
991+
appListCount={appListCount}
992+
isSuperAdmin={isSuperAdmin}
993+
openDevtronAppCreateModel={openDevtronAppCreateModel}
994+
setAppCount={setAppCount}
995+
updateDataSyncing={updateDataSyncing}
996+
isArgoInstalled={isArgoInstalled}
997+
/>
998+
)}
999+
{params.appType === AppListConstants.AppType.DEVTRON_APPS && serverMode === SERVER_MODE.EA_ONLY && (
1000+
<div style={{ height: 'calc(100vh - 250px)' }}>
1001+
<EAEmptyState
1002+
title="Create, build, deploy and debug custom apps"
1003+
msg="Create custom application by connecting your code repository. Build and deploy images at the click of a button. Debug your applications using the interactive UI."
1004+
stateType={EAEmptyStateType.DEVTRONAPPS}
1005+
knowMoreLink={DOCUMENTATION.HOME_PAGE}
1006+
/>
9881007
</div>
9891008
)}
990-
{dataStateType === AppListViewType.LIST && (
1009+
{params.appType === AppListConstants.AppType.HELM_APPS && (
9911010
<>
992-
{params.appType === AppListConstants.AppType.DEVTRON_APPS &&
993-
serverMode === SERVER_MODE.FULL && (
994-
<DevtronAppListContainer
995-
payloadParsedFromUrl={parsedPayloadOnUrlChange}
996-
environmentClusterList={environmentClusterListRes}
997-
clearAllFilters={removeAllFilters}
998-
sortApplicationList={sortApplicationList}
999-
appListCount={appListCount}
1000-
isSuperAdmin={isSuperAdmin}
1001-
openDevtronAppCreateModel={openDevtronAppCreateModel}
1002-
setAppCount={setAppCount}
1003-
updateDataSyncing={updateDataSyncing}
1004-
isArgoInstalled={isArgoInstalled}
1005-
/>
1006-
)}
1007-
{params.appType === AppListConstants.AppType.DEVTRON_APPS &&
1008-
serverMode === SERVER_MODE.EA_ONLY && (
1009-
<div style={{ height: 'calc(100vh - 250px)' }}>
1010-
<EAEmptyState
1011-
title="Create, build, deploy and debug custom apps"
1012-
msg="Create custom application by connecting your code repository. Build and deploy images at the click of a button. Debug your applications using the interactive UI."
1013-
stateType={EAEmptyStateType.DEVTRONAPPS}
1014-
knowMoreLink={DOCUMENTATION.HOME_PAGE}
1015-
/>
1016-
</div>
1017-
)}
1018-
{params.appType === AppListConstants.AppType.HELM_APPS && (
1019-
<>
1020-
<HelmAppList
1021-
serverMode={serverMode}
1022-
payloadParsedFromUrl={parsedPayloadOnUrlChange}
1023-
sortApplicationList={sortApplicationList}
1024-
clearAllFilters={removeAllFilters}
1025-
fetchingExternalApps={fetchingExternalApps}
1026-
setFetchingExternalAppsState={setFetchingExternalAppsState}
1027-
updateDataSyncing={updateDataSyncing}
1028-
setShowPulsatingDotState={setShowPulsatingDotState}
1029-
masterFilters={masterFilters}
1030-
syncListData={syncListData}
1031-
isArgoInstalled={isArgoInstalled}
1032-
/>
1033-
{fetchingExternalApps && (
1034-
<div className="mt-16">
1035-
<Progressing size={32} />
1036-
</div>
1037-
)}
1038-
</>
1011+
<HelmAppList
1012+
serverMode={serverMode}
1013+
payloadParsedFromUrl={parsedPayloadOnUrlChange}
1014+
sortApplicationList={sortApplicationList}
1015+
clearAllFilters={removeAllFilters}
1016+
fetchingExternalApps={fetchingExternalApps}
1017+
setFetchingExternalAppsState={setFetchingExternalAppsState}
1018+
updateDataSyncing={updateDataSyncing}
1019+
setShowPulsatingDotState={setShowPulsatingDotState}
1020+
masterFilters={masterFilters}
1021+
syncListData={syncListData}
1022+
isArgoInstalled={isArgoInstalled}
1023+
/>
1024+
{fetchingExternalApps && (
1025+
<div className="mt-16">
1026+
<Progressing size={32} />
1027+
</div>
10391028
)}
10401029
</>
10411030
)}

0 commit comments

Comments
 (0)