Skip to content

Commit a53c4c8

Browse files
RohitRaj011RohitRaj011
authored
Merge pull request #2052 from devtron-labs/feat/app-details-resource-tree-ui
feat: app details resource tree UI
2 parents 5c9eba3 + 53bf143 commit a53c4c8

21 files changed

+403
-498
lines changed

‎.eslintignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -410,7 +410,6 @@ src/components/v2/appDetails/appDetails.store.ts
410410
src/components/v2/appDetails/appDetails.type.ts
411411
src/components/v2/appDetails/ea/EAAppDetail.component.tsx
412412
src/components/v2/appDetails/k8Resource/FilterResource.tsx
413-
src/components/v2/appDetails/k8Resource/K8Resource.component.tsx
414413
src/components/v2/appDetails/k8Resource/NodeTreeTabList.tsx
415414
src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
416415
src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component.tsx
@@ -433,7 +432,6 @@ src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.ts
433432
src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx
434433
src/components/v2/appDetails/k8Resource/nodeType/NodeDelete.component.tsx
435434
src/components/v2/appDetails/k8Resource/nodeType/NodeTree.component.tsx
436-
src/components/v2/appDetails/k8Resource/nodeType/PodHeader.component.tsx
437435
src/components/v2/appDetails/k8Resource/nodeType/PodTabSection.tsx
438436
src/components/v2/appDetails/k8Resource/nodeType/__tests__/NodeTree.component.test.ts
439437
src/components/v2/appDetails/k8Resource/nodeType/nodeType.util.ts

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "0.3.6",
7+
"@devtron-labs/devtron-fe-common-lib": "0.3.7",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/components/ClusterNodes/NodeDetails.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,6 @@ const NodeDetails = ({ isSuperAdmin, addTab, k8SObjectMapRaw, updateTabUrl }: Cl
211211
label: NODE_DETAILS_TABS.yaml,
212212
tabType: 'navLink',
213213
icon: Edit,
214-
iconType: 'stroke',
215214
props: {
216215
to: `?tab=${NODE_DETAILS_TABS.yaml.toLowerCase()}`,
217216
onClick: changeNodeTab,

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,10 @@ export const Details: React.FC<DetailsType> = ({
408408
.then((response) => {
409409
isVirtualEnvRef.current = response.result?.isVirtualEnvironment
410410
// This means the CD is not triggered and the app is not helm migrated i.e. Empty State
411-
if (!response.result.isPipelineTriggered && response.result.releaseMode === ReleaseMode.NEW_DEPLOYMENT ) {
411+
if (
412+
!response.result.isPipelineTriggered &&
413+
response.result.releaseMode === ReleaseMode.NEW_DEPLOYMENT
414+
) {
412415
setResourceTreeFetchTimeOut(false)
413416
setLoadingResourceTree(false)
414417
setAppDetails(null)
@@ -761,7 +764,6 @@ export const Details: React.FC<DetailsType> = ({
761764
) : (
762765
renderAppDetails()
763766
)}
764-
765767
{detailedStatus && <AppStatusDetailModal close={hideAppDetailsStatus} showAppStatusMessage={false} />}
766768
{location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM) && (
767769
<DeploymentStatusDetailModal
@@ -909,10 +911,10 @@ export const EnvSelector = ({
909911
return acc
910912
}, []) || []
911913

912-
// Pushing the virtual environment group to the end of the list
913-
if(groupList[0]?.label === 'Virtual environments' && groupList.length === 2) {
914-
groupList.reverse()
915-
}
914+
// Pushing the virtual environment group to the end of the list
915+
if (groupList[0]?.label === 'Virtual environments' && groupList.length === 2) {
916+
groupList.reverse()
917+
}
916918

917919
return (
918920
<>

‎src/components/externalLinks/ExternalLinks.utils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export const NodeLevelSelectStyles = {
153153
...customMultiSelectStyles,
154154
menu: (base) => ({
155155
...base,
156-
width: '150px',
156+
width: '120px',
157157
}),
158158
control: (base) => ({
159159
...base,

‎src/components/v2/appDetails/NodeTreeDetailTab.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import { useState, useEffect, useRef } from 'react'
18-
import K8ResourceComponent from './k8Resource/K8Resource.component'
18+
import { K8ResourceComponent } from './k8Resource/K8Resource.component'
1919
import './appDetails.scss'
2020
import LogAnalyzerComponent from './logAnalyzer/LogAnalyzer.component'
2121
import { Route, Switch, useRouteMatch, Redirect, useParams } from 'react-router-dom'

‎src/components/v2/appDetails/k8Resource/FilterResource.tsx

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/components/v2/appDetails/k8Resource/K8Resource.component.tsx

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,23 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useEffect } from 'react'
18-
import NodeTreeComponent from './nodeType/NodeTree.component'
19-
import FilterResource from './FilterResource'
20-
import AppDetailsStore, { AppDetailsTabs } from '../appDetails.store'
21-
import NodeComponent from './nodeType/Node.component'
22-
import { useSharedState } from '../../utils/useSharedState'
17+
import { useEffect } from 'react'
18+
19+
import { StatusFilterButtonComponent, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
20+
21+
import { ReactComponent as K8ResourceIcon } from '@Icons/ic-object.svg'
22+
import { ReactComponent as Info } from '@Icons/ic-info-outline.svg'
23+
import { useSharedState } from '@Components/v2/utils/useSharedState'
24+
2325
import IndexStore from '../index.store'
26+
import AppDetailsStore, { AppDetailsTabs } from '../appDetails.store'
2427
import { K8ResourceComponentProps } from '../appDetails.type'
25-
import { ReactComponent as K8ResourceIcon } from '../../../../assets/icons/ic-object.svg'
26-
import { ReactComponent as Info } from '../../../../assets/icons/ic-info-outline.svg'
28+
import NodeTreeComponent from './nodeType/NodeTree.component'
29+
import NodeComponent from './nodeType/Node.component'
30+
2731
import './k8resources.scss'
28-
import { useMainContext } from '@devtron-labs/devtron-fe-common-lib'
2932

30-
export default function K8ResourceComponent({
33+
export const K8ResourceComponent = ({
3134
clickedNodes,
3235
registerNodeClick,
3336
handleFocusTabs,
@@ -37,7 +40,7 @@ export default function K8ResourceComponent({
3740
clusterId,
3841
isDeploymentBlocked,
3942
isExternalApp,
40-
}: K8ResourceComponentProps) {
43+
}: K8ResourceComponentProps) => {
4144
const [nodes] = useSharedState(IndexStore.getAppDetailsNodes(), IndexStore.getAppDetailsNodesObservable())
4245
const { isSuperAdmin } = useMainContext()
4346
useEffect(() => {
@@ -46,18 +49,18 @@ export default function K8ResourceComponent({
4649

4750
return (
4851
<div className="bcn-0" style={{ justifyContent: 'space-between' }}>
49-
<div className="pt-16 pl-20 pb-8">
50-
<FilterResource nodes={nodes} />
51-
</div>
5252
{nodes.length > 0 ? (
5353
<div
5454
className={`resource-node-wrapper flexbox ${isSuperAdmin ? 'pb-28' : ''}`}
5555
data-testid="resource-node-wrapper"
5656
>
5757
<div
58-
className="k8-resources-node-tree pt-8 pl-16 dc__border-right"
58+
className="k8-resources-node-tree p-8 dc__border-right--n1"
5959
data-testid="k8-resources-node-tree"
6060
>
61+
<div className="flexbox mb-8 px-12">
62+
<StatusFilterButtonComponent nodes={nodes} />
63+
</div>
6164
<NodeTreeComponent
6265
clickedNodes={clickedNodes}
6366
registerNodeClick={registerNodeClick}
@@ -83,39 +86,35 @@ export default function K8ResourceComponent({
8386
)
8487
}
8588

86-
export const EmptyK8sResourceComponent = ({ emptyStateMessage }: { emptyStateMessage: string }) => {
87-
return (
88-
<>
89-
<div
90-
data-testid="resource-tree-wrapper"
91-
className="resource-tree-wrapper flexbox pl-20 pr-20"
92-
style={{ outline: 'none' }}
93-
>
94-
<ul className="tab-list">
95-
<li className="flex left dc__ellipsis-right">
96-
<div className="flex">
97-
<div className="resource-tree-tab bcn-0 cn-9 left pl-12 pt-8 pb-8 pr-12">
98-
<div className="resource-tree__tab-hover tab-list__tab resource-tab__node cursor cn-9 fw-6 dc__no-decor m-0-imp">
99-
<div className="flex left cn-9">
100-
<span className="icon-dim-16 resource-tree__tab-hover fcn-9">
101-
<K8ResourceIcon />
102-
</span>
103-
<span className="ml-8 dc__capitalize fs-12">
104-
{AppDetailsTabs.k8s_Resources}
105-
</span>
106-
</div>
89+
export const EmptyK8sResourceComponent = ({ emptyStateMessage }: { emptyStateMessage: string }) => (
90+
<>
91+
<div
92+
data-testid="resource-tree-wrapper"
93+
className="resource-tree-wrapper flexbox pl-20 pr-20"
94+
style={{ outline: 'none' }}
95+
>
96+
<ul className="tab-list">
97+
<li className="flex left dc__ellipsis-right">
98+
<div className="flex">
99+
<div className="resource-tree-tab bcn-0 cn-9 left pl-12 pt-8 pb-8 pr-12">
100+
<div className="resource-tree__tab-hover tab-list__tab resource-tab__node cursor cn-9 fw-6 dc__no-decor m-0-imp">
101+
<div className="flex left cn-9">
102+
<span className="icon-dim-16 resource-tree__tab-hover fcn-9">
103+
<K8ResourceIcon />
104+
</span>
105+
<span className="ml-8 dc__capitalize fs-12">{AppDetailsTabs.k8s_Resources}</span>
107106
</div>
108107
</div>
109108
</div>
110-
</li>
111-
</ul>
112-
</div>
113-
<div className="bcn-0 flex h-100">
114-
<div className="flex column h-100">
115-
<Info className="icon-dim-20 icon-n5" />
116-
<span className="mt-10">{emptyStateMessage}</span>
117-
</div>
109+
</div>
110+
</li>
111+
</ul>
112+
</div>
113+
<div className="bcn-0 flex h-100">
114+
<div className="flex column h-100">
115+
<Info className="icon-dim-20 icon-n5" />
116+
<span className="mt-10">{emptyStateMessage}</span>
118117
</div>
119-
</>
120-
)
121-
}
118+
</div>
119+
</>
120+
)

‎src/components/v2/appDetails/k8Resource/NodeTreeTabList.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export default function NodeTreeTabList({ logSearchTerms, setLogSearchTerms, tab
9999
className={`${
100100
tab.name !== AppDetailsTabs.k8s_Resources && tab.name !== AppDetailsTabs.log_analyzer
101101
? 'mr-8'
102-
: 'ml-8 dc__capitalize '
102+
: 'ml-6 dc__capitalize '
103103
} fs-12 `}
104104
>
105105
{tab.name}
@@ -116,7 +116,7 @@ export default function NodeTreeTabList({ logSearchTerms, setLogSearchTerms, tab
116116
return (
117117
<div
118118
data-testid="resource-tree-wrapper"
119-
className="resource-tree-wrapper flexbox pl-20 pr-20 dc__position-sticky dc__zi-10"
119+
className="resource-tree-wrapper flexbox px-12 dc__position-sticky dc__zi-10"
120120
style={{ outline: 'none', top: '77px' }}
121121
tabIndex={0}
122122
ref={tabRef}

‎src/components/v2/appDetails/k8Resource/k8resources.scss

Lines changed: 11 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,13 @@
1515
*/
1616

1717
.k8-resources-node-tree {
18-
width: 270px;
19-
min-width: 260px;
18+
flex: 0 0 270px;
2019
min-height: 532px;
2120
overflow-y: auto;
2221
}
2322

2423
.resource-node-wrapper {
25-
min-height: calc(100vh - 168px);
24+
min-height: calc(100vh - 120px);
2625
}
2726

2827
.node-container-fluid {
@@ -36,49 +35,15 @@
3635
}
3736

3837
.node-row {
39-
--bs-gutter-x: 1.5rem;
40-
--bs-gutter-y: 0;
41-
display: flex;
42-
flex-wrap: wrap;
43-
}
44-
45-
.col-10 {
46-
flex: 0 0 auto;
47-
width: 83.33333333%;
48-
}
49-
50-
.col-7 {
51-
flex: 0 0 auto;
52-
width: 58.3333333%;
53-
}
54-
55-
.col-11 {
56-
flex: 0 0 auto;
57-
width: 91.66666667%;
58-
}
38+
display: grid;
39+
grid-template-columns: 1fr 80px 20px;
40+
column-gap: 12px;
5941

60-
.col-6 {
61-
flex: 0 0 auto;
62-
width: 50%;
63-
}
64-
65-
.col-5 {
66-
flex: 0 0 auto;
67-
width: 41.66666667%;
68-
}
69-
70-
.col-1 {
71-
flex: 0 0 auto;
72-
width: 8.33333333%;
73-
}
74-
75-
.flex-row-reverse {
76-
flex-direction: row-reverse !important;
77-
}
42+
&--col-6 {
43+
grid-template-columns: 1fr 50px 100px 60px 80px 20px;
44+
}
7845

79-
.node-row > * {
80-
box-sizing: border-box;
81-
padding-right: calc(var(--bs-gutter-x) * 0.5);
82-
padding-left: calc(var(--bs-gutter-x) * 0.5);
83-
margin-top: var(--bs-gutter-y);
46+
&--col-3 {
47+
grid-template-columns: 1fr 1fr 20px;
48+
}
8449
}

0 commit comments

Comments
 (0)