Skip to content

Commit 91d6781

Browse files
RohitRaj011RohitRaj011
authored
Merge pull request #2063 from devtron-labs/feat/virtual-app-details
feat: Virtual Env App Details for Devtron App
2 parents 29b4478 + 828811c commit 91d6781

File tree

9 files changed

+102
-79
lines changed

9 files changed

+102
-79
lines changed

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,10 @@ export const Details: React.FC<DetailsType> = ({
407407
.then((response) => {
408408
isVirtualEnvRef.current = response.result?.isVirtualEnvironment
409409
// This means the CD is not triggered and the app is not helm migrated i.e. Empty State
410-
if (!response.result.isPipelineTriggered && response.result.releaseMode === ReleaseMode.NEW_DEPLOYMENT ) {
410+
if (
411+
!response.result.isPipelineTriggered &&
412+
response.result.releaseMode === ReleaseMode.NEW_DEPLOYMENT
413+
) {
411414
setResourceTreeFetchTimeOut(false)
412415
setLoadingResourceTree(false)
413416
setAppDetails(null)
@@ -609,7 +612,7 @@ export const Details: React.FC<DetailsType> = ({
609612
const environmentName = environmentsMap[+envId]
610613

611614
const renderAppDetails = (): JSX.Element => {
612-
if (isVirtualEnvRef.current && VirtualAppDetailsEmptyState) {
615+
if (!appDetails.resourceTree && isVirtualEnvRef.current && VirtualAppDetailsEmptyState) {
613616
return <VirtualAppDetailsEmptyState environmentName={environmentName} />
614617
}
615618
return (
@@ -905,10 +908,10 @@ export const EnvSelector = ({
905908
return acc
906909
}, []) || []
907910

908-
// Pushing the virtual environment group to the end of the list
909-
if(groupList[0]?.label === 'Virtual environments' && groupList.length === 2) {
910-
groupList.reverse()
911-
}
911+
// Pushing the virtual environment group to the end of the list
912+
if (groupList[0]?.label === 'Virtual environments' && groupList.length === 2) {
913+
groupList.reverse()
914+
}
912915

913916
return (
914917
<>

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

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
getIsManualApprovalConfigured,
2525
ReleaseMode,
2626
showError,
27+
Tooltip,
2728
} from '@devtron-labs/devtron-fe-common-lib'
2829
import { URLS } from '../../../../config'
2930
import { EnvSelector } from './AppDetails'
@@ -43,6 +44,8 @@ import { ReactComponent as RotateIcon } from '../../../../assets/icons/ic-arrows
4344
import { ReactComponent as LinkIcon } from '../../../../assets/icons/ic-link.svg'
4445
import { ReactComponent as Trash } from '../../../../assets/icons/ic-delete-dots.svg'
4546
import { ReactComponent as ScaleDown } from '../../../../assets/icons/ic-scale-down.svg'
47+
import { ConfigApplyStatusCard } from './ConfigApplyStatusCard'
48+
import HelmAppConfigApplyStatusCard from '@Components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard'
4649

4750
const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
4851
const DeploymentWindowStatusCard = importComponentFromFELibrary('DeploymentWindowStatusCard')
@@ -172,18 +175,17 @@ export const SourceInfo = ({
172175
disabled={loadingDetails || loadingResourceTree || (params.envId && !showCommitInfo)}
173176
/>
174177
{appDetails?.deploymentAppType && (
175-
<Tippy
176-
className="default-tt"
177-
arrow={false}
178+
<Tooltip
178179
placement="top"
180+
alwaysShowTippyOnHover={!appDetails.isVirtualEnvironment}
179181
content={`Deployed using ${
180182
isArgoCdApp ? DeploymentAppTypeNameMapping.GitOps : DeploymentAppTypeNameMapping.Helm
181183
}`}
182184
>
183-
<div className="flex">
185+
<div className={`flex ${!appDetails.isVirtualEnvironment ? 'ml-16' : ''}`}>
184186
<DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} />
185187
</div>
186-
</Tippy>
188+
</Tooltip>
187189
)}
188190
{isdeploymentAppDeleting && (
189191
<div data-testid="deleteing-argocd-pipeline">
@@ -207,10 +209,7 @@ export const SourceInfo = ({
207209
</button>
208210
)}
209211
{!isVirtualEnvironment && showHibernateModal && (
210-
<ConditionalWrap
211-
condition={isApprovalConfigured}
212-
wrap={conditionalScalePodsButton}
213-
>
212+
<ConditionalWrap condition={isApprovalConfigured} wrap={conditionalScalePodsButton}>
214213
<button
215214
data-testid="app-details-hibernate-modal-button"
216215
className="cta cta-with-img small cancel fs-12 fw-6 mr-6"
@@ -228,10 +227,7 @@ export const SourceInfo = ({
228227
</ConditionalWrap>
229228
)}
230229
{window._env_.ENABLE_RESTART_WORKLOAD && !isVirtualEnvironment && setRotateModal && (
231-
<ConditionalWrap
232-
condition={isApprovalConfigured}
233-
wrap={conditionalScalePodsButton}
234-
>
230+
<ConditionalWrap condition={isApprovalConfigured} wrap={conditionalScalePodsButton}>
235231
<button
236232
data-testid="app-details-rotate-pods-modal-button"
237233
className="cta cta-with-img small cancel fs-12 fw-6 mr-6"
@@ -289,7 +285,7 @@ export const SourceInfo = ({
289285
: !isdeploymentAppDeleting &&
290286
environment && (
291287
<div className="flex left w-100">
292-
{!isVirtualEnvironment && (
288+
{status && (
293289
<AppStatusCard
294290
appDetails={appDetails}
295291
status={status}
@@ -298,7 +294,6 @@ export const SourceInfo = ({
298294
message={message}
299295
/>
300296
)}
301-
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
302297
{!helmMigratedAppNotTriggered && (
303298
<>
304299
{!loadingResourceTree && (
@@ -309,6 +304,17 @@ export const SourceInfo = ({
309304
setDetailed={setDetailed}
310305
/>
311306
)}
307+
{isVirtualEnvironment && appDetails?.resourceTree && (
308+
<HelmAppConfigApplyStatusCard
309+
cardLoading={cardLoading}
310+
releaseStatus={appDetails.resourceTree.releaseStatus}
311+
/>
312+
)}
313+
</>
314+
)}
315+
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
316+
{!helmMigratedAppNotTriggered && (
317+
<>
312318
<DeploymentStatusCard
313319
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
314320
cardLoading={cardLoading}

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1927,11 +1927,6 @@ table.resource-tree {
19271927
margin-left: 8px !important;
19281928
}
19291929

1930-
.app-details-manifest-download-card {
1931-
overflow: hidden;
1932-
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
1933-
}
1934-
19351930
.app-details-info-card {
19361931
align-items: flex-start;
19371932
flex-direction: column;

‎src/components/common/ClusterMetaDataBar/ClusterMetaDataBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const ClusterMetaDataBar = ({
7575
>
7676
<span className="dc__opacity-0_8"> Cluster: {clusterName}</span>
7777
<div className={`${darkTheme ? 'dc__border-left-n0' : 'dc__border-left-n9'} h-12 dc__opacity-0_2`} />
78-
<span className="dc__opacity-0_8">Namespace: {namespace}</span>
78+
<span className="dc__opacity-0_8">Namespace: {namespace || '-'}</span>
7979
{!isVirtualEnvironment && (
8080
<>
8181
<ArrowLeft

‎src/components/common/DeploymentTypeIcon/DeploymentTypeIcon.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ function DeploymentTypeIcon({
3838
return <VirtualEnvHelpTippy isVirtualIcon />
3939
}
4040
if (deploymentAppType === DeploymentAppTypes.GITOPS || appType === AppType.EXTERNAL_ARGO_APP) {
41-
return <ArgoCD data-testid="argo-cd-app-logo" className="icon-dim-32 ml-16" />
41+
return <ArgoCD data-testid="argo-cd-app-logo" className="icon-dim-32" />
4242
}
4343
if (appType === AppType.EXTERNAL_FLUX_APP) {
44-
return <FluxCD data-testid="flux-cd-app-logo" className="icon-dim-32 ml-16" />
44+
return <FluxCD data-testid="flux-cd-app-logo" className="icon-dim-32" />
4545
}
4646
if (deploymentAppType === DeploymentAppTypes.HELM) {
47-
return <Helm data-testid="helm-app-logo" className="icon-dim-32 ml-16" />
47+
return <Helm data-testid="helm-app-logo" className="icon-dim-32" />
4848
}
4949
return null
5050
}

‎src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ const NodeComponent = ({
339339
<span className="pl-12 pr-12" />
340340
)}
341341
<div>
342-
<div className="resource__title-name flex left dc__align-start">
342+
<div className="resource__title-name flex left">
343343
<span data-testid="resource-node-name" className="fs-13">
344344
{node.name}
345345
</span>
@@ -359,42 +359,51 @@ const NodeComponent = ({
359359
<ClipboardButton content={node.name} />
360360
</div>
361361
</button>
362-
<div
363-
data-testid={`app-node-${index}-resource-tab-wrapper`}
364-
className={`flex left ${getWidthClassnameForTabs()} ${
365-
node.kind === NodeType.Containers ? '' : 'node__tabs'
366-
} en-2 bw-1 br-4 dc__w-fit-content`}
367-
>
368-
{getNodeDetailTabs(node.kind as NodeType).map((kind, index) => {
369-
return (
370-
<div
371-
key={`tab__${index}`}
372-
data-name={kind}
373-
data-testid={`${kind.toLowerCase()}-tab`}
374-
onClick={onClickNodeDetailsTab}
375-
className={`dc__capitalize flex cn-7 fw-6 cursor bcn-0 ${
376-
node.kind === NodeType.Containers
377-
? ''
378-
: 'resource-action-tabs__active'
379-
} ${
380-
index ===
381-
getNodeDetailTabs(node.kind as NodeType)?.length - 1
382-
? ''
383-
: 'dc__border-right'
384-
} pl-6 pr-6`}
385-
>
386-
{kind.toLowerCase()}
387-
</div>
388-
)
389-
})}
390-
</div>
391-
{node.kind !== NodeType.Containers && (
362+
{!appDetails.isVirtualEnvironment && (
392363
<>
393-
<div className="bw-1 en-2 dc__right-radius-4 node-empty dc__no-left-border" />
394-
{node.kind.toLowerCase() == NodeType.Pod.toLowerCase() && (
364+
<div
365+
data-testid={`app-node-${index}-resource-tab-wrapper`}
366+
className={`flex left ${getWidthClassnameForTabs()} ${
367+
node.kind === NodeType.Containers ? '' : 'node__tabs'
368+
} en-2 bw-1 br-4 dc__w-fit-content`}
369+
>
370+
{getNodeDetailTabs(node.kind as NodeType).map(
371+
(kind, index) => {
372+
return (
373+
<div
374+
key={`tab__${index}`}
375+
data-name={kind}
376+
data-testid={`${kind.toLowerCase()}-tab`}
377+
onClick={onClickNodeDetailsTab}
378+
className={`dc__capitalize flex cn-7 fw-6 cursor bcn-0 ${
379+
node.kind === NodeType.Containers
380+
? ''
381+
: 'resource-action-tabs__active'
382+
} ${
383+
index ===
384+
getNodeDetailTabs(node.kind as NodeType)
385+
?.length -
386+
1
387+
? ''
388+
: 'dc__border-right'
389+
} pl-6 pr-6`}
390+
>
391+
{kind.toLowerCase()}
392+
</div>
393+
)
394+
},
395+
)}
396+
</div>
397+
{node.kind !== NodeType.Containers && (
395398
<>
396399
<div className="bw-1 en-2 dc__right-radius-4 node-empty dc__no-left-border" />
397-
<div className="bw-1 en-2 dc__right-radius-4 node-empty dc__no-left-border" />
400+
{node.kind.toLowerCase() ==
401+
NodeType.Pod.toLowerCase() && (
402+
<>
403+
<div className="bw-1 en-2 dc__right-radius-4 node-empty dc__no-left-border" />
404+
<div className="bw-1 en-2 dc__right-radius-4 node-empty dc__no-left-border" />
405+
</>
406+
)}
398407
</>
399408
)}
400409
</>
@@ -480,7 +489,8 @@ const NodeComponent = ({
480489
)}
481490
</div>
482491
)}
483-
{node?.kind !== NodeType.Containers &&
492+
{!appDetails.isVirtualEnvironment &&
493+
node?.kind !== NodeType.Containers &&
484494
node?.kind !== 'Endpoints' &&
485495
node?.kind !== 'EndpointSlice' && (
486496
<div className="flex col-1 pt-9 pb-9 flex-row-reverse">

‎src/components/v2/appDetails/sourceInfo/EnvironmentSelector.component.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ const EnvironmentSelectorComponent = ({
312312
placement="top"
313313
content={`Deployed using ${getDeployedUsing()}`}
314314
>
315-
<div className="flex">
315+
<div className={`flex ${!isVirtualEnvironment ? 'ml-16' : ''}`}>
316316
<DeploymentTypeIcon
317317
deploymentAppType={appDetails.deploymentAppType}
318318
appType={appDetails.appType}
@@ -412,7 +412,7 @@ const EnvironmentSelectorComponent = ({
412412
<TriggerUrlModal
413413
installedAppId={params.appId}
414414
isExternalApp={isExternalApp}
415-
appId={appDetails.appType !== AppType.DEVTRON_HELM_CHART ? appIdentifier : '' }
415+
appId={appDetails.appType !== AppType.DEVTRON_HELM_CHART ? appIdentifier : ''}
416416
envId={params.envId}
417417
close={closeUrlInfo}
418418
appType={appDetails.appType}

0 commit comments

Comments
 (0)