Skip to content

Commit 035a453

Browse files
RohitRaj011RohitRaj011
committed
feat: Virtual Environment App Details for Devtron Apps
1 parent f09703a commit 035a453

File tree

7 files changed

+113
-86
lines changed

7 files changed

+113
-86
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: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,25 @@ import { ReactComponent as RotateIcon } from '../../../../assets/icons/ic-arrows
4343
import { ReactComponent as LinkIcon } from '../../../../assets/icons/ic-link.svg'
4444
import { ReactComponent as Trash } from '../../../../assets/icons/ic-delete-dots.svg'
4545
import { ReactComponent as ScaleDown } from '../../../../assets/icons/ic-scale-down.svg'
46+
import { ConfigApplyStatusCard } from './ConfigApplyStatusCard'
47+
import HelmAppConfigApplyStatusCard from '@Components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard'
4648

4749
const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
4850
const DeploymentWindowStatusCard = importComponentFromFELibrary('DeploymentWindowStatusCard')
4951

52+
const renderWithTippy = (isArgoCdApp: boolean) => (children: JSX.Element) => (
53+
<Tippy
54+
className="default-tt"
55+
arrow={false}
56+
placement="top"
57+
content={`Deployed using ${
58+
isArgoCdApp ? DeploymentAppTypeNameMapping.GitOps : DeploymentAppTypeNameMapping.Helm
59+
}`}
60+
>
61+
{children}
62+
</Tippy>
63+
)
64+
5065
export const SourceInfo = ({
5166
appDetails,
5267
setDetailed = null,
@@ -172,18 +187,11 @@ export const SourceInfo = ({
172187
disabled={loadingDetails || loadingResourceTree || (params.envId && !showCommitInfo)}
173188
/>
174189
{appDetails?.deploymentAppType && (
175-
<Tippy
176-
className="default-tt"
177-
arrow={false}
178-
placement="top"
179-
content={`Deployed using ${
180-
isArgoCdApp ? DeploymentAppTypeNameMapping.GitOps : DeploymentAppTypeNameMapping.Helm
181-
}`}
182-
>
190+
<ConditionalWrap wrap={renderWithTippy(isArgoCdApp)} condition={!appDetails.isVirtualEnvironment}>
183191
<div className="flex">
184192
<DeploymentTypeIcon deploymentAppType={appDetails?.deploymentAppType} />
185193
</div>
186-
</Tippy>
194+
</ConditionalWrap>
187195
)}
188196
{isdeploymentAppDeleting && (
189197
<div data-testid="deleteing-argocd-pipeline">
@@ -207,10 +215,7 @@ export const SourceInfo = ({
207215
</button>
208216
)}
209217
{!isVirtualEnvironment && showHibernateModal && (
210-
<ConditionalWrap
211-
condition={isApprovalConfigured}
212-
wrap={conditionalScalePodsButton}
213-
>
218+
<ConditionalWrap condition={isApprovalConfigured} wrap={conditionalScalePodsButton}>
214219
<button
215220
data-testid="app-details-hibernate-modal-button"
216221
className="cta cta-with-img small cancel fs-12 fw-6 mr-6"
@@ -228,10 +233,7 @@ export const SourceInfo = ({
228233
</ConditionalWrap>
229234
)}
230235
{window._env_.ENABLE_RESTART_WORKLOAD && !isVirtualEnvironment && setRotateModal && (
231-
<ConditionalWrap
232-
condition={isApprovalConfigured}
233-
wrap={conditionalScalePodsButton}
234-
>
236+
<ConditionalWrap condition={isApprovalConfigured} wrap={conditionalScalePodsButton}>
235237
<button
236238
data-testid="app-details-rotate-pods-modal-button"
237239
className="cta cta-with-img small cancel fs-12 fw-6 mr-6"
@@ -289,16 +291,13 @@ export const SourceInfo = ({
289291
: !isdeploymentAppDeleting &&
290292
environment && (
291293
<div className="flex left w-100">
292-
{!isVirtualEnvironment && (
293-
<AppStatusCard
294-
appDetails={appDetails}
295-
status={status}
296-
cardLoading={cardLoading}
297-
setDetailed={setDetailed}
298-
message={message}
299-
/>
300-
)}
301-
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
294+
<AppStatusCard
295+
appDetails={appDetails}
296+
status={status}
297+
cardLoading={cardLoading}
298+
setDetailed={setDetailed}
299+
message={message}
300+
/>
302301
{!helmMigratedAppNotTriggered && (
303302
<>
304303
{!loadingResourceTree && (
@@ -309,6 +308,17 @@ export const SourceInfo = ({
309308
setDetailed={setDetailed}
310309
/>
311310
)}
311+
{isVirtualEnvironment && appDetails?.resourceTree && (
312+
<HelmAppConfigApplyStatusCard
313+
cardLoading={cardLoading}
314+
releaseStatus={appDetails.resourceTree.releaseStatus}
315+
/>
316+
)}
317+
</>
318+
)}
319+
{isVirtualEnvironment && renderGeneratedManifestDownloadCard()}
320+
{!helmMigratedAppNotTriggered && (
321+
<>
312322
<DeploymentStatusCard
313323
deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
314324
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/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">

0 commit comments

Comments
 (0)