Skip to content

Commit 7b62efb

Browse files
author
Alberto Gutierrez
committed
Add views in entity view and fix routes
1 parent bfbb755 commit 7b62efb

File tree

17 files changed

+206
-82
lines changed

17 files changed

+206
-82
lines changed

‎plugins/kiali/src/components/BreadcrumbView/BreadcrumbView.tsx

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ import { HistoryManager } from '../../app/History';
77
import { isMultiCluster, Paths } from '../../config';
88
import { kialiStyle, useLinkStyle } from '../../styles/StyleUtils';
99
import { dicIstioType } from '../../types/IstioConfigList';
10+
import {
11+
getJanusEntityView,
12+
getJanusObjectLink,
13+
getJanusSectionLink,
14+
} from '../../utils/janusLinks';
1015
import { FilterSelected } from '../Filters/StatefulFilters';
1116

1217
const ItemNames = {
@@ -16,7 +21,6 @@ const ItemNames = {
1621
istio: 'Istio Object',
1722
};
1823

19-
export const pluginRoot = 'kiali';
2024
const IstioName = 'Istio Config';
2125
const namespaceRegex =
2226
/kiali\/([a-z0-9-]+)\/([\w-.]+)\/([\w-.*]+)(\/([\w-.]+))?(\/([\w-.]+))?/;
@@ -45,7 +49,7 @@ const breadcrumStyle = kialiStyle({
4549
marginTop: '-20px',
4650
});
4751

48-
export const BreadcrumbView = () => {
52+
export const BreadcrumbView = (props: { entity?: boolean }) => {
4953
const capitalize = (str: string) => {
5054
return str?.charAt(0)?.toUpperCase() + str?.slice(1);
5155
};
@@ -70,7 +74,11 @@ export const BreadcrumbView = () => {
7074

7175
const getItemPage = () => {
7276
if (path) {
73-
let pathT = `/${pluginRoot}/${path?.pathItem}/${path?.namespace}/${path?.item}`;
77+
let pathT = getJanusObjectLink(
78+
path?.pathItem,
79+
path?.namespace,
80+
path?.item,
81+
);
7482
if (path?.cluster && isMultiCluster) {
7583
pathT += `?clusterName=${path.cluster}`;
7684
}
@@ -94,23 +102,37 @@ export const BreadcrumbView = () => {
94102
</Link>
95103
);
96104

97-
const linkTo = `/${pluginRoot}/${pathItem}?namespaces=${namespace}&type=${
98-
// @ts-ignore
99-
dicIstioType[path?.istioType || '']
100-
}`;
105+
const tab = `tabresources=${pathItem}`;
106+
const filterNs = `namespaces=${namespace}`;
107+
108+
const linkTo = getJanusSectionLink(
109+
pathItem,
110+
`${filterNs}&type=${
111+
// @ts-ignore
112+
dicIstioType[path?.istioType || '']
113+
}`,
114+
);
101115

102116
return (
103117
<div className={breadcrumStyle}>
104118
<Breadcrumbs>
105119
<Link
106-
to={`/${pluginRoot}/${pathItem}`}
120+
to={
121+
props.entity
122+
? getJanusEntityView(tab)
123+
: getJanusSectionLink(pathItem)
124+
}
107125
onClick={cleanFilters}
108126
className={linkStyle}
109127
>
110128
{isIstio ? IstioName : capitalize(pathItem)}
111129
</Link>
112130
<Link
113-
to={`/${pluginRoot}/${pathItem}?namespaces=${namespace}`}
131+
to={
132+
props.entity
133+
? getJanusEntityView(`${tab}&${filterNs}`)
134+
: getJanusSectionLink(pathItem, filterNs)
135+
}
114136
onClick={cleanFilters}
115137
className={linkStyle}
116138
>

‎plugins/kiali/src/components/Link/IstioObjectLink.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react';
22
import { Link as RouterLink } from 'react-router-dom';
33

4+
import { useRouteRef } from '@backstage/core-plugin-api';
5+
46
import { Link, Tooltip } from '@material-ui/core';
57

68
import { isMultiCluster, KialiIcon, Paths } from '../../config';
9+
import { istioConfigDetailRouteRef } from '../../routes';
710
import { kialiStyle } from '../../styles/StyleUtils';
8-
import { pluginRoot } from '../BreadcrumbView/BreadcrumbView';
911
import { PFBadge } from '../Pf/PfBadges';
1012
import { IstioTypes } from '../VirtualList/Config';
1113

@@ -29,10 +31,13 @@ export const getIstioObjectUrl = (
2931
cluster?: string,
3032
query?: string,
3133
): string => {
34+
const link = useRouteRef(istioConfigDetailRouteRef);
3235
const istioType = IstioTypes[type];
33-
let to = `/${pluginRoot}/${Paths.ISTIO}/${namespace}`;
34-
35-
to = `${to}/${istioType.url}/${name}`;
36+
let to = link({
37+
namespace: namespace,
38+
objectType: istioType.url,
39+
object: name,
40+
});
3641

3742
if (cluster && isMultiCluster) {
3843
to = `${to}?clusterName=${cluster}`;

‎plugins/kiali/src/components/Link/ServiceLink.tsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from 'react';
2-
import { Link as RouterLink } from 'react-router-dom';
32

4-
import { Link } from '@material-ui/core';
3+
import { Link } from '@backstage/core-components';
4+
import { useRouteRef } from '@backstage/core-plugin-api';
55

66
import { PFBadge, PFBadges } from '../../components/Pf/PfBadges';
7-
import { isMultiCluster, Paths } from '../../config';
8-
import { pluginRoot } from '../BreadcrumbView/BreadcrumbView';
7+
import { isMultiCluster } from '../../config';
8+
import { servicesDetailRouteRef } from '../../routes';
99

1010
type ServiceLinkProps = {
1111
cluster?: string;
@@ -20,9 +20,8 @@ export const getServiceURL = (
2020
cluster?: string,
2121
query?: string,
2222
): string => {
23-
let to = `/${pluginRoot}/${Paths.SERVICES}/${namespace}`;
24-
25-
to = `${to}/${name}`;
23+
const link = useRouteRef(servicesDetailRouteRef);
24+
let to = link({ namespace: namespace, service: name });
2625

2726
if (cluster && isMultiCluster) {
2827
to = `${to}?clusterName=${cluster}`;
@@ -44,11 +43,7 @@ const ServiceLinkItem = (props: ServiceLinkProps) => {
4443
const href = getServiceURL(name, namespace, cluster, query);
4544

4645
return (
47-
<Link
48-
component={RouterLink}
49-
to={href}
50-
data-test={`service-${namespace}-${name}`}
51-
>
46+
<Link to={href} data-test={`service-${namespace}-${name}`}>
5247
{`${namespace}/${name}`}
5348
</Link>
5449
);

‎plugins/kiali/src/components/Link/WorkloadLink.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Link as RouterLink } from 'react-router-dom';
44
import { Link } from '@material-ui/core';
55

66
import { isMultiCluster, Paths } from '../../config';
7-
import { pluginRoot } from '../BreadcrumbView/BreadcrumbView';
7+
import { pluginName } from '../../plugin';
88
import { PFBadge, PFBadges } from '../Pf/PfBadges';
99

1010
type WorkloadLinkProps = {
@@ -20,7 +20,7 @@ export const getWorkloadURL = (
2020
cluster?: string,
2121
query?: string,
2222
): string => {
23-
let to = `/${pluginRoot}/${Paths.WORKLOADS}/${namespace}`;
23+
let to = `/${pluginName}/${Paths.WORKLOADS}/${namespace}`;
2424

2525
to = `${to}/${name}`;
2626

‎plugins/kiali/src/Router.tsx renamed to ‎plugins/kiali/src/components/Router.tsx

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@ import { Entity } from '@backstage/catalog-model';
55
import { Content, Page } from '@backstage/core-components';
66
import { useEntity } from '@backstage/plugin-catalog-react';
77

8-
import { pluginRoot } from './components/BreadcrumbView/BreadcrumbView';
9-
import { AppDetailsPage } from './pages/AppDetails/AppDetailsPage';
10-
import { AppListPage } from './pages/AppList/AppListPage';
11-
import { IstioConfigDetailsPage } from './pages/IstioConfigDetails/IstioConfigDetailsPage';
12-
import { IstioConfigListPage } from './pages/IstioConfigList/IstioConfigListPage';
13-
import { KialiNoPath } from './pages/Kiali';
14-
import { KialiHeader } from './pages/Kiali/Header/KialiHeader';
15-
import { KialiHeaderEntity } from './pages/Kiali/Header/KialiHeaderEntity';
16-
import { KialiTabs } from './pages/Kiali/Header/KialiTabs';
17-
import { KialiEntity } from './pages/Kiali/KialiEntity';
18-
import { KialiNoAnnotation } from './pages/Kiali/KialiNoAnnotation';
19-
import { OverviewPage } from './pages/Overview/OverviewPage';
20-
import { ServiceDetailsPage } from './pages/ServiceDetails/ServiceDetailsPage';
21-
import { ServiceListPage } from './pages/ServiceList/ServiceListPage';
22-
import { WorkloadDetailsPage } from './pages/WorkloadDetails/WorkloadDetailsPage';
23-
import { WorkloadListPage } from './pages/WorkloadList/WorkloadListPage';
8+
import { AppDetailsPage } from '../pages/AppDetails/AppDetailsPage';
9+
import { AppListPage } from '../pages/AppList/AppListPage';
10+
import { IstioConfigDetailsPage } from '../pages/IstioConfigDetails/IstioConfigDetailsPage';
11+
import { IstioConfigListPage } from '../pages/IstioConfigList/IstioConfigListPage';
12+
import { KialiNoPath } from '../pages/Kiali';
13+
import { KialiHeader } from '../pages/Kiali/Header/KialiHeader';
14+
import { KialiHeaderEntity } from '../pages/Kiali/Header/KialiHeaderEntity';
15+
import { KialiTabs } from '../pages/Kiali/Header/KialiTabs';
16+
import { KialiEntity } from '../pages/Kiali/KialiEntity';
17+
import { KialiNoAnnotation } from '../pages/Kiali/KialiNoAnnotation';
18+
import { OverviewPage } from '../pages/Overview/OverviewPage';
19+
import { ServiceDetailsPage } from '../pages/ServiceDetails/ServiceDetailsPage';
20+
import { ServiceListPage } from '../pages/ServiceList/ServiceListPage';
21+
import { WorkloadDetailsPage } from '../pages/WorkloadDetails/WorkloadDetailsPage';
22+
import { WorkloadListPage } from '../pages/WorkloadList/WorkloadListPage';
23+
import { pluginName } from '../plugin';
2424
import {
2525
appDetailRouteRef,
2626
appsRouteRef,
@@ -31,8 +31,8 @@ import {
3131
servicesRouteRef,
3232
workloadsDetailRouteRef,
3333
workloadsRouteRef,
34-
} from './routes';
35-
import { KialiProvider } from './store/KialiProvider';
34+
} from '../routes';
35+
import { KialiProvider } from '../store/KialiProvider';
3636

3737
export const KUBERNETES_ANNOTATION = 'backstage.io/kubernetes-id';
3838
export const KUBERNETES_NAMESPACE = 'backstage.io/kubernetes-namespace';
@@ -65,7 +65,23 @@ export const EmbeddedRouter = () => {
6565
<KialiHeaderEntity />
6666
<Routes>
6767
<Route path="/" element={<KialiEntity />} />
68+
<Route
69+
path={`${workloadsDetailRouteRef.path}`}
70+
element={<WorkloadDetailsPage entity />}
71+
/>
72+
<Route
73+
path={`${servicesDetailRouteRef.path}`}
74+
element={<ServiceDetailsPage entity />}
75+
/>
76+
<Route
77+
path={`${appDetailRouteRef.path}`}
78+
element={<AppDetailsPage entity />}
79+
/>
6880
<Route path="*" element={<KialiNoPath />} />
81+
<Route
82+
path={`${istioConfigDetailRouteRef.path}`}
83+
element={<IstioConfigDetailsPage entity />}
84+
/>
6985
</Routes>
7086
</KialiProvider>
7187
);
@@ -74,61 +90,61 @@ export const EmbeddedRouter = () => {
7490
export const getRoutes = (dev?: boolean) => {
7591
return (
7692
<Routes>
77-
<Route path="/" element={<OverviewPage />} />
93+
<Route path="/*" element={<OverviewPage />} />
7894
<Route
79-
path={dev ? `/${pluginRoot}/overview` : overviewRouteRef.path}
95+
path={dev ? `/${pluginName}/overview` : overviewRouteRef.path}
8096
element={<OverviewPage />}
8197
/>
8298
<Route
83-
path={dev ? `/${pluginRoot}/workloads` : workloadsRouteRef.path}
99+
path={dev ? `/${pluginName}/workloads` : workloadsRouteRef.path}
84100
element={<WorkloadListPage />}
85101
/>
86102
<Route
87-
path={dev ? `/${pluginRoot}/services` : servicesRouteRef.path}
103+
path={dev ? `/${pluginName}/services` : servicesRouteRef.path}
88104
element={<ServiceListPage />}
89105
/>
90106
<Route
91-
path={dev ? `/${pluginRoot}/applications` : appsRouteRef.path}
107+
path={dev ? `/${pluginName}/applications` : appsRouteRef.path}
92108
element={<AppListPage />}
93109
/>
94110
<Route
95-
path={dev ? `/${pluginRoot}/istio` : istioConfigRouteRef.path}
111+
path={dev ? `/${pluginName}/istio` : istioConfigRouteRef.path}
96112
element={<IstioConfigListPage />}
97113
/>
98114
<Route
99115
path={
100116
dev
101-
? `/${pluginRoot}/workloads/:namespace/:workload`
117+
? `/${pluginName}/workloads/:namespace/:workload`
102118
: workloadsDetailRouteRef.path
103119
}
104120
element={<WorkloadDetailsPage />}
105121
/>
106122
<Route
107123
path={
108124
dev
109-
? `/${pluginRoot}/services/:namespace/:service`
125+
? `/${pluginName}/services/:namespace/:service`
110126
: servicesDetailRouteRef.path
111127
}
112128
element={<ServiceDetailsPage />}
113129
/>
114130
<Route
115131
path={
116132
dev
117-
? `/${pluginRoot}/applications/:namespace/:app`
133+
? `/${pluginName}/applications/:namespace/:app`
118134
: appDetailRouteRef.path
119135
}
120136
element={<AppDetailsPage />}
121137
/>
122138
<Route
123139
path={
124140
dev
125-
? `/${pluginRoot}/istio/:namespace/:objectType/:object`
141+
? `/${pluginName}/istio/:namespace/:objectType/:object`
126142
: istioConfigDetailRouteRef.path
127143
}
128144
element={<IstioConfigDetailsPage />}
129145
/>
130146
{dev && (
131-
<Route path={`/${pluginRoot}/kiali/entity`} element={<KialiEntity />} />
147+
<Route path={`/${pluginName}/kiali/entity`} element={<KialiEntity />} />
132148
)}
133149
<Route path="*" element={<KialiNoPath />} />
134150
</Routes>

‎plugins/kiali/src/components/VirtualList/Renderers.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react';
2-
import { Link } from 'react-router-dom';
2+
3+
import { Link } from '@backstage/core-components';
4+
import { SubRouteRef, useRouteRef } from '@backstage/core-plugin-api';
35

46
import { Chip, TableCell, Tooltip } from '@material-ui/core';
57

@@ -8,6 +10,11 @@ import { isWaypoint } from '../../helpers/LabelFilterHelper';
810
import { infoStyle } from '../../pages/Overview/OverviewCard/CanaryUpgradeProgress';
911
import { ControlPlaneBadge } from '../../pages/Overview/OverviewCard/ControlPlaneBadge';
1012
import { OverviewCardSparklineCharts } from '../../pages/Overview/OverviewCard/OverviewCardSparklineCharts';
13+
import {
14+
appDetailRouteRef,
15+
servicesDetailRouteRef,
16+
workloadsDetailRouteRef,
17+
} from '../../routes';
1118
import { Health } from '../../types/Health';
1219
import { IstioConfigItem } from '../../types/IstioConfigList';
1320
import { ValidationStatus } from '../../types/IstioObjects';
@@ -34,23 +41,30 @@ import {
3441
} from './Config';
3542

3643
const topPosition = 'top';
37-
const rootPath = 'kiali';
3844
// Istio Links
3945
const getIstioLink = (item: TResource): string => {
4046
let type = '';
4147
if ('type' in item) {
4248
type = item.type;
4349
}
44-
4550
return getIstioObjectUrl(item.name, item.namespace, type, item.cluster);
4651
};
4752

53+
const routes: { [key: string]: { id: string; ref: SubRouteRef } } = {
54+
workloads: { id: 'workload', ref: workloadsDetailRouteRef },
55+
services: { id: 'service', ref: servicesDetailRouteRef },
56+
applications: { id: 'app', ref: appDetailRouteRef },
57+
};
58+
4859
// Links
4960
const getLink = (item: TResource, config: Resource, query?: string): string => {
50-
let url =
51-
config.name === 'istio'
52-
? `${getIstioLink(item)}`
53-
: `/${rootPath}/${config.name}/${item.namespace}/${item.name}`;
61+
if (config.name === 'istio') {
62+
return getIstioLink(item);
63+
}
64+
const link = useRouteRef(routes[config.name].ref);
65+
const items: { [key: string]: string } = { namespace: item.namespace };
66+
items[routes[config.name].id] = item.name;
67+
let url = link(items);
5468

5569
if (item.cluster && isMultiCluster && !url.includes('cluster')) {
5670
if (url.includes('?')) {
@@ -67,7 +81,6 @@ const getLink = (item: TResource, config: Resource, query?: string): string => {
6781
url = `${url}?${query}`;
6882
}
6983
}
70-
7184
return url;
7285
};
7386

0 commit comments

Comments
 (0)