Skip to content

Commit 2f61145

Browse files
authored
Merge pull request #2898 from devtron-labs/feat/navigation-route
feat: navigation route
2 parents 4a3e92c + 8766c5e commit 2f61145

File tree

29 files changed

+342
-187
lines changed

29 files changed

+342
-187
lines changed

.eslintignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,6 @@ src/components/scopedVariables/__tests__/utils.test.tsx
285285
src/components/scopedVariables/utils.tsx
286286
src/components/security/AddCveModal.tsx
287287
src/components/security/DeleteCVEModal.tsx
288-
src/components/security/Security.tsx
289288
src/components/security/SecurityPoliciesTab.tsx
290289
src/components/security/SecurityPolicyApp.tsx
291290
src/components/security/SecurityPolicyCluster.tsx

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": "1.20.0-alpha-4",
7+
"@devtron-labs/devtron-fe-common-lib": "1.20.1-pre-1",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

src/Pages-Devtron-2.0/ApplicationManagement/Configurations/ConfigurationsRouter.tsx

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { lazy } from 'react'
2-
import { Redirect, Route, Switch } from 'react-router-dom'
2+
import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
33

44
import {
5+
BreadCrumb,
6+
getApplicationManagementBreadcrumb,
57
noop,
68
PageHeader,
79
SERVER_MODE,
810
SideNavigation,
911
URLS as COMMON_URLS,
12+
useBreadcrumb,
1013
useMainContext,
1114
} from '@devtron-labs/devtron-fe-common-lib'
1215

@@ -31,6 +34,7 @@ const BuildInfra = lazy(() =>
3134
const CatalogFramework = importComponentFromFELibrary('CatalogFramework')
3235

3336
export const Configurations = () => {
37+
const { pathname } = useLocation()
3438
const { featureGitOpsFlags: isFeatureGitOpsEnabled, serverMode, isSuperAdmin } = useMainContext()
3539

3640
const getDefaultRoute = () => {
@@ -41,10 +45,24 @@ export const Configurations = () => {
4145
return URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_EXTERNAL_LINKS
4246
}
4347

48+
const { breadcrumbs } = useBreadcrumb(
49+
{
50+
alias: {
51+
...getApplicationManagementBreadcrumb(),
52+
configurations: {
53+
component: <span className="cn-9 fs-16 fw-6 lh-24">Configurations</span>,
54+
linked: true,
55+
},
56+
},
57+
},
58+
[pathname],
59+
)
60+
61+
const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
62+
4463
return (
4564
<>
46-
{/* TODO: Update with Application Management Header */}
47-
<PageHeader headerName="Application Management / Configurations" />
65+
<PageHeader breadCrumbs={renderBreadcrumbs} isBreadcrumbs />
4866
<div className="application-management-configurations dc__grid flex-grow-1 dc__overflow-auto">
4967
<div className="py-12 pl-8 pr-7 border__primary--right">
5068
<SideNavigation list={APPLICATION_MANAGEMENT_CONFIGURATIONS} />

src/Pages/ChartStore/ChartDetails/ChartDetails.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom'
2020
import {
2121
APIResponseHandler,
2222
BreadCrumb,
23+
getApplicationManagementBreadcrumb,
2324
handleAnalyticsEvent,
2425
PageHeader,
2526
SegmentedControl,
@@ -83,6 +84,7 @@ export const ChartDetails = () => {
8384
const { breadcrumbs } = useBreadcrumb(
8485
{
8586
alias: {
87+
...getApplicationManagementBreadcrumb(),
8688
':chartSegment?': null,
8789
':chartId': {
8890
component: (

src/components/ApplicationGroup/AppGroupDetailsRoute.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import {
4242
DeleteConfirmationModal,
4343
useMainContext,
4444
OptionType,
45+
getApplicationManagementBreadcrumb
4546
} from '@devtron-labs/devtron-fe-common-lib'
4647
import ReactGA from 'react-ga4'
4748
import { MultiValue } from 'react-select'
@@ -587,6 +588,7 @@ export const EnvHeader = ({
587588
const { breadcrumbs } = useBreadcrumb(
588589
{
589590
alias: {
591+
...getApplicationManagementBreadcrumb(),
590592
':envId': {
591593
component: <EnvSelector onChange={handleEnvChange} envId={+envId} envName={envName} />,
592594
linked: false,

src/components/ApplicationGroup/Constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,3 +249,4 @@ export const BULK_CI_BUILD_STATUS = (noOfApps) => ({
249249

250250
export const ENV_GROUP_LOCAL_STORAGE_KEY: AppEnvLocalStorageKeyType = 'envGroup__filter'
251251
export const APP_GROUP_LOCAL_STORAGE_KEY: AppEnvLocalStorageKeyType = 'appGroup__filter'
252+
export const APP_GROUP_TIPPY_CONTENT = 'Application Groups represent an environment and display all applications deployed to it. They simplify deploying interdependent microservices by allowing you to build and deploy multiple applications together.'

src/components/ApplicationGroup/List/EnvironmentsList.tsx

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,21 @@
1515
*/
1616

1717
import { useMemo } from 'react'
18+
import { useLocation } from 'react-router-dom'
1819

1920
import {
21+
BreadCrumb,
2022
ErrorScreenManager,
21-
FeatureTitleWithInfo,
2223
FilterChips,
2324
FilterSelectPicker,
2425
GenericEmptyState,
26+
getApplicationManagementBreadcrumb,
2527
ImageType,
2628
PageHeader,
2729
SearchBar,
2830
SelectPickerOptionType,
2931
useAsync,
32+
useBreadcrumb,
3033
useUrlFilters,
3134
} from '@devtron-labs/devtron-fe-common-lib'
3235

@@ -36,22 +39,11 @@ import { getClusterListMinWithoutAuth } from '../../../services/service'
3639
import { getEnvAppList } from '../AppGroup.service'
3740
import { AppGroupAdminType, AppGroupUrlFilters, AppGroupUrlFiltersType } from '../AppGroup.types'
3841
import { parseSearchParams } from '../AppGroup.utils'
42+
import { APP_GROUP_TIPPY_CONTENT } from '../Constants'
3943
import EnvironmentsListView from './EnvironmentListView'
4044

4145
import './EnvironmentsList.scss'
4246

43-
const renderAppGroupDescriptionContent = () =>
44-
'Application Groups represent an environment and display all applications deployed to it. They simplify deploying interdependent microservices by allowing you to build and deploy multiple applications together.'
45-
46-
const renderAdditionalHeaderInfo = () => (
47-
<FeatureTitleWithInfo
48-
title="Application Groups"
49-
docLink="APP_GROUP"
50-
showInfoIconTippy
51-
renderDescriptionContent={renderAppGroupDescriptionContent}
52-
/>
53-
)
54-
5547
const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
5648
const urlFilters = useUrlFilters<never, AppGroupUrlFiltersType>({
5749
parseSearchParams,
@@ -210,10 +202,35 @@ const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
210202
</div>
211203
)
212204
}
205+
const { pathname } = useLocation()
206+
207+
const { breadcrumbs } = useBreadcrumb(
208+
{
209+
alias: {
210+
...getApplicationManagementBreadcrumb(),
211+
'application-group': {
212+
component: <span className="cb-5 fs-16 dc__capitalize">Application groups</span>,
213+
linked: true,
214+
},
215+
},
216+
},
217+
[pathname],
218+
)
219+
220+
const renderBreadCrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
213221

214222
return (
215223
<div className="flexbox-col h-100 dc__overflow-auto">
216-
<PageHeader additionalHeaderInfo={renderAdditionalHeaderInfo} />
224+
<PageHeader
225+
isBreadcrumbs
226+
breadCrumbs={renderBreadCrumbs}
227+
tippyProps={{
228+
isTippyCustomized: true,
229+
tippyRedirectLink: 'APP_GROUP',
230+
tippyMessage: APP_GROUP_TIPPY_CONTENT,
231+
tippyHeader: 'Application Groups',
232+
}}
233+
/>
217234
{renderBody()}
218235
</div>
219236
)

src/components/ResourceBrowser/ClusterInstallationStatus.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
import { useMemo } from 'react'
1818
import { useHistory, useParams } from 'react-router-dom'
1919

20-
import { useAsync, useBreadcrumb } from '@devtron-labs/devtron-fe-common-lib'
20+
import { getInfrastructureManagementBreadcrumb, useAsync, useBreadcrumb } from '@devtron-labs/devtron-fe-common-lib'
2121

2222
import { importComponentFromFELibrary } from '@Components/common'
2323

@@ -60,8 +60,9 @@ const ClusterInstallationStatus = () => {
6060
const { breadcrumbs } = useBreadcrumb(
6161
{
6262
alias: {
63+
...getInfrastructureManagementBreadcrumb(),
6364
'resource-browser': {
64-
component: <span className="cb-5 fs-16 dc__capitalize">Resource Browser</span>,
65+
component: <span className="cn-9 fs-16 fw-6 lh-24">Resource Browser</span>,
6566
linked: true,
6667
},
6768
'installation-cluster': {

src/components/ResourceBrowser/Constants.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,3 +385,14 @@ export const ResourceBrowserRouteToTabIdMap: Partial<
385385
[`${URLS.INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER}/:clusterId/terminal`]: ResourceBrowserTabsId.terminal,
386386
[`${URLS.INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER}/:clusterId/resource-recommender`]: RESOURCE_RECOMMENDER_TAB_ID,
387387
}
388+
389+
export const INFRASTRUCTURE_MANAGEMENT_BREADCRUMB_CONFIG = [
390+
{
391+
key: 'resource-browser',
392+
route: URLS.INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER,
393+
heading: 'Resource Browser',
394+
},
395+
]
396+
397+
export const KUBERNETES_RESOURCE_BROWSER_DESCRIPTION =
398+
'The Resource Browser gives you a powerful, centralized view of all your Kubernetes objects across clusters. Effortlessly troubleshoot and manage resources with features like live manifest editing, log viewing, and direct resource creation or deletion—right from the UI. All in one place, across all your cluster'

src/components/ResourceBrowser/ResourceBrowser.tsx

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,26 @@
1515
*/
1616

1717
import React, { useEffect, useMemo, useRef } from 'react'
18+
import { useLocation } from 'react-router-dom'
1819

1920
import {
21+
BreadCrumb,
2022
ClusterDetail,
2123
DevtronProgressing,
2224
ErrorScreenManager,
2325
PageHeader,
2426
useAsync,
27+
useBreadcrumb,
2528
} from '@devtron-labs/devtron-fe-common-lib'
2629

2730
import { ClusterListView } from '@Components/ClusterNodes/ClusterList'
2831
import { DEFAULT_CLUSTER_ID } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.type'
2932

3033
import { sortObjectArrayAlphabetically } from '../common'
34+
import { KUBERNETES_RESOURCE_BROWSER_DESCRIPTION } from './Constants'
3135
import { renderNewClusterButton } from './PageHeader.buttons'
3236
import { getClusterListing } from './ResourceBrowser.service'
33-
import { renderAdditionalBrowserHeaderInfo } from './Utils'
37+
import { getInfrastructureManagementBreadcrumbsConfig } from './Utils'
3438

3539
const ResourceBrowser: React.FC = () => {
3640
const parentRef = useRef<HTMLDivElement>(null)
@@ -41,6 +45,9 @@ const ResourceBrowser: React.FC = () => {
4145
)
4246
const [initialLoading, clusterListMinData, error] = useAsync(() => getClusterListing(true, abortControllerRef))
4347

48+
const { pathname } = useLocation()
49+
const { breadcrumbs } = useBreadcrumb(getInfrastructureManagementBreadcrumbsConfig(pathname), [pathname])
50+
4451
useEffect(
4552
() => () => {
4653
abortControllerRef.current.abort()
@@ -83,11 +90,19 @@ const ResourceBrowser: React.FC = () => {
8390
return <DevtronProgressing parentClasses="h-100 flex bg__primary" classes="icon-dim-80" />
8491
}
8592

93+
const renderBreadcrumb = () => <BreadCrumb breadcrumbs={breadcrumbs} />
94+
8695
return (
8796
<div className="flexbox-col h-100 bg__primary" ref={parentRef}>
8897
<PageHeader
89-
additionalHeaderInfo={renderAdditionalBrowserHeaderInfo}
90-
isBreadcrumbs={false}
98+
tippyProps={{
99+
isTippyCustomized: true,
100+
tippyRedirectLink: 'RESOURCE_BROWSER',
101+
tippyMessage: KUBERNETES_RESOURCE_BROWSER_DESCRIPTION,
102+
tippyHeader: 'Resource Browser',
103+
}}
104+
isBreadcrumbs
105+
breadCrumbs={renderBreadcrumb}
91106
renderActionButtons={renderNewClusterButton(reloadDetailClusterList, sortedClusterList.length)}
92107
/>
93108
{renderContent()}

0 commit comments

Comments
 (0)