External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-17 23:47:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix regex issue in route tab (#8440)

Browse Source
This commit is contained in:
Amlan Kumar Nandy 2025-07-07 16:55:23 +07:00 committed by GitHub
parent 273452352d
commit 8b62c8dced
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 69 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/RouteTab/index.tsx
View File

@ -1,5 +1,10 @@
import { Tabs, TabsProps } from 'antd';
import { useLocation, useParams } from 'react-router-dom';
import {
generatePath,
matchPath,
useLocation,
useParams,
} from 'react-router-dom';
import { RouteTabProps } from './types';
@ -17,20 +22,13 @@ function RouteTab({
const params = useParams<Params>();
const location = useLocation();
// Replace dynamic parameters in routes
const routesWithParams = routes.map((route) => ({
...route,
route: route.route.replace(
/:(\w+)/g,
(match, param) => params[param] || match,
),
}));
// Find the matching route for the current pathname
const currentRoute = routesWithParams.find((route) => {
const routePattern = route.route.replace(/:(\w+)/g, '([^/]+)');
const regex = new RegExp(`^${routePattern}$`);
return regex.test(location.pathname);
const currentRoute = routes.find((route) => {
const routePath = route.route.split('?')[0];
return matchPath(location.pathname, {
path: routePath,
exact: true,
});
});
const onChange = (activeRoute: string): void => {
@ -38,14 +36,15 @@ function RouteTab({
onChangeHandler(activeRoute);
}
const selectedRoute = routesWithParams.find((e) => e.key === activeRoute);
const selectedRoute = routes.find((e) => e.key === activeRoute);
if (selectedRoute) {
history.push(selectedRoute.route);
const resolvedRoute = generatePath(selectedRoute.route, params);
history.push(resolvedRoute);
}
};
const items = routesWithParams.map(({ Component, name, route, key }) => ({
const items = routes.map(({ Component, name, route, key }) => ({
label: name,
key,
tabKey: route,

1
frontend/src/constants/query.ts
View File

@ -46,4 +46,5 @@ export enum QueryParams {
msgSystem = 'msgSystem',
destination = 'destination',
kindString = 'kindString',
tab = 'tab',
}

23
frontend/src/pages/MetricsApplication/MetricsApplication.styles.scss
View File

@ -1,3 +1,26 @@
.service-route-tab {
margin-bottom: 64px;
.ant-tabs-nav {
&::before {
border-bottom: 1px solid var(--bg-slate-400);
}
.ant-tabs-nav-wrap {
.ant-tabs-nav-list {
.ant-tabs-ink-bar {
background-color: var(--bg-robin-500) !important;
}
.ant-tabs-tab {
font-size: 13px;
font-family: 'Inter';
color: var(--text-vanilla-100);
line-height: 20px;
letter-spacing: -0.07px;
gap: 10px;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: var(--bg-robin-500);
}
}
}
}
}

68
frontend/src/pages/MetricsApplication/MetricsApplication.tsx
View File

@ -1,15 +1,14 @@
import './MetricsApplication.styles.scss';
import RouteTab from 'components/RouteTab';
import ROUTES from 'constants/routes';
import { Tabs, TabsProps } from 'antd/lib';
import { QueryParams } from 'constants/query';
import DBCall from 'container/MetricsApplication/Tabs/DBCall';
import External from 'container/MetricsApplication/Tabs/External';
import Overview from 'container/MetricsApplication/Tabs/Overview';
import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
import { useSafeNavigate } from 'hooks/useSafeNavigate';
import useUrlQuery from 'hooks/useUrlQuery';
import history from 'lib/history';
import { useCallback, useMemo } from 'react';
import { generatePath, useParams } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import ApDexApplication from './ApDex/ApDexApplication';
import { MetricsApplicationTab, TAB_KEY_VS_LABEL } from './types';
@ -25,50 +24,41 @@ function MetricsApplication(): JSX.Element {
const activeKey = useMetricsApplicationTabKey();
const urlQuery = useUrlQuery();
const { safeNavigate } = useSafeNavigate();
const getRouteUrl = useCallback(
(tab: MetricsApplicationTab): string => {
urlQuery.set('tab', tab);
return `${generatePath(ROUTES.SERVICE_METRICS, {
servicename,
})}?${urlQuery.toString()}`;
const items: TabsProps['items'] = [
{
label: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
key: MetricsApplicationTab.OVER_METRICS,
children: <Overview />,
},
[servicename, urlQuery],
);
{
label: TAB_KEY_VS_LABEL[MetricsApplicationTab.DB_CALL_METRICS],
key: MetricsApplicationTab.DB_CALL_METRICS,
children: <DBCall />,
},
{
label: TAB_KEY_VS_LABEL[MetricsApplicationTab.EXTERNAL_METRICS],
key: MetricsApplicationTab.EXTERNAL_METRICS,
children: <External />,
},
];
const routes = useMemo(
() => [
{
Component: Overview,
name: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
route: getRouteUrl(MetricsApplicationTab.OVER_METRICS),
key: MetricsApplicationTab.OVER_METRICS,
},
{
Component: DBCall,
name: TAB_KEY_VS_LABEL[MetricsApplicationTab.DB_CALL_METRICS],
route: getRouteUrl(MetricsApplicationTab.DB_CALL_METRICS),
key: MetricsApplicationTab.DB_CALL_METRICS,
},
{
Component: External,
name: TAB_KEY_VS_LABEL[MetricsApplicationTab.EXTERNAL_METRICS],
route: getRouteUrl(MetricsApplicationTab.EXTERNAL_METRICS),
key: MetricsApplicationTab.EXTERNAL_METRICS,
},
],
[getRouteUrl],
);
const onTabChange = (tab: string): void => {
urlQuery.set(QueryParams.tab, tab);
safeNavigate(`/services/${servicename}?${urlQuery.toString()}`);
};
return (
<div className="metrics-application-container">
<ResourceAttributesFilter />
<ApDexApplication />
<RouteTab
routes={routes}
history={history}
<Tabs
items={items}
activeKey={activeKey}
className="service-route-tab"
destroyInactiveTabPane
onChange={onTabChange}
/>
</div>
);