feat: update the SideNav component (#2858)

* feat: update the SideNav component

* chore: onClick is updated

* chore: selected condition is updated

* fix: build is fixed

---------

Co-authored-by: Nazarenko19 <danil.nazarenko2000@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/constants/routes.ts

@@ -30,6 +30,7 @@ const ROUTES = {
 	HOME_PAGE: '/',
 	PASSWORD_RESET: '/password-reset',
 	LIST_LICENSES: '/licenses',
+	TRACE_EXPLORER: '/trace-explorer',
 };
 
 export default ROUTES;

frontend/src/container/SideNav/config.ts

@@ -35,4 +35,5 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.UN_AUTHORIZED]: [QueryParams.resourceAttributes],
 	[ROUTES.USAGE_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.VERSION]: [QueryParams.resourceAttributes],
+	[ROUTES.TRACE_EXPLORER]: [QueryParams.resourceAttributes],
 };

frontend/src/container/SideNav/helper.ts

@@ -1,8 +1,8 @@
 export const getQueryString = (
-	avialableParams: string[],
+	availableParams: string[],
 	params: URLSearchParams,
 ): string[] =>
-	avialableParams.map((param) => {
+	availableParams.map((param) => {
 		if (params.has(param)) {
 			return `${param}=${params.get(param)}`;
 		}

frontend/src/container/SideNav/index.tsx

@@ -1,5 +1,5 @@
 import { CheckCircleTwoTone, WarningOutlined } from '@ant-design/icons';
-import { Menu, Space, Typography } from 'antd';
+import { Menu, MenuProps } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
 import ROUTES from 'constants/routes';
@@ -27,7 +27,6 @@ import {
 	Sider,
 	SlackButton,
 	SlackMenuItemContainer,
-	Tags,
 	VersionContainer,
 } from './styles';
 
@@ -42,6 +41,7 @@ function SideNav(): JSX.Element {
 	>((state) => state.app);
 
 	const { pathname, search } = useLocation();
+
 	const { t } = useTranslation('');
 
 	const onCollapse = useCallback(() => {
@@ -55,9 +55,9 @@ function SideNav(): JSX.Element {
 	const onClickHandler = useCallback(
 		(to: string) => {
 			const params = new URLSearchParams(search);
-			const avialableParams = routeConfig[to];
+			const availableParams = routeConfig[to];
 
-			const queryString = getQueryString(avialableParams, params);
+			const queryString = getQueryString(availableParams || [], params);
 
 			if (pathname !== to) {
 				history.push(`${to}?${queryString.join('&')}`);
@@ -66,6 +66,10 @@ function SideNav(): JSX.Element {
 		[pathname, search],
 	);
 
+	const onClickMenuHandler: MenuProps['onClick'] = (e) => {
+		onClickHandler(e.key);
+	};
+
 	const onClickSlackHandler = (): void => {
 		window.open('https://signoz.io/slack', '_blank');
 	};
@@ -104,30 +108,17 @@ function SideNav(): JSX.Element {
 		},
 	];
 
-	const currentMenu = useMemo(
+	const currentMenu = useMemo(() => {
-		() => menus.find((menu) => pathname.startsWith(menu.to)),
+		const routeKeys = Object.keys(ROUTES) as (keyof typeof ROUTES)[];
-		[pathname],
+		const currentRouteKey = routeKeys.find((key) => {
-	);
+			const route = ROUTES[key];
+			return pathname === route;
+		});
 
-	const items = [
+		if (!currentRouteKey) return null;
-		...menus.map(({ to, Icon, name, tags, children }) => ({
+
-			key: to,
+		return ROUTES[currentRouteKey];
-			icon: <Icon />,
+	}, [pathname]);
-			onClick: (): void => onClickHandler(to),
-			label: (
-				<Space>
-					<div>{name}</div>
-					{tags &&
-						tags.map((e) => (
-							<Tags key={e}>
-								<Typography.Text>{e}</Typography.Text>
-							</Tags>
-						))}
-				</Space>
-			),
-			children,
-		})),
-	];
 
 	const sidebarItems = (props: SidebarItem, index: number): SidebarItem => ({
 		key: `${index}`,
@@ -141,10 +132,11 @@ function SideNav(): JSX.Element {
 			<Menu
 				theme="dark"
 				defaultSelectedKeys={[ROUTES.APPLICATION]}
-				selectedKeys={currentMenu ? [currentMenu?.to] : []}
+				selectedKeys={currentMenu ? [currentMenu] : []}
 				mode="vertical"
 				style={styles}
-				items={items}
+				items={menus}
+				onClick={onClickMenuHandler}
 			/>
 			{sidebar.map((props, index) => (
 				<SlackMenuItemContainer
@@ -155,7 +147,7 @@ function SideNav(): JSX.Element {
 					<Menu
 						theme="dark"
 						defaultSelectedKeys={[ROUTES.APPLICATION]}
-						selectedKeys={currentMenu ? [currentMenu?.to] : []}
+						selectedKeys={currentMenu ? [currentMenu] : []}
 						mode="inline"
 						style={styles}
 						items={[sidebarItems(props, index)]}

frontend/src/container/SideNav/menuItems.ts

@@ -1,84 +0,0 @@
-import {
-	AlertOutlined,
-	AlignLeftOutlined,
-	ApiOutlined,
-	BarChartOutlined,
-	BugOutlined,
-	DashboardFilled,
-	DeploymentUnitOutlined,
-	LineChartOutlined,
-	MenuOutlined,
-	SettingOutlined,
-} from '@ant-design/icons';
-import type { MenuProps } from 'antd';
-import ROUTES from 'constants/routes';
-
-const menus: SidebarMenu[] = [
-	{
-		Icon: BarChartOutlined,
-		to: ROUTES.APPLICATION,
-		name: 'Services',
-	},
-	{
-		Icon: MenuOutlined,
-		to: ROUTES.TRACE,
-		name: 'Traces',
-	},
-	{
-		Icon: AlignLeftOutlined,
-		to: ROUTES.LOGS,
-		name: 'Logs',
-		// tags: ['Beta'],
-		// children: [
-		// 	{
-		// 		key: ROUTES.LOGS,
-		// 		label: 'Search',
-		// 	},
-		// ],
-	},
-	{
-		Icon: DashboardFilled,
-		to: ROUTES.ALL_DASHBOARD,
-		name: 'Dashboards',
-	},
-	{
-		Icon: AlertOutlined,
-		to: ROUTES.LIST_ALL_ALERT,
-		name: 'Alerts',
-	},
-	{
-		Icon: BugOutlined,
-		to: ROUTES.ALL_ERROR,
-		name: 'Exceptions',
-	},
-	{
-		to: ROUTES.SERVICE_MAP,
-		name: 'Service Map',
-		Icon: DeploymentUnitOutlined,
-	},
-	{
-		Icon: LineChartOutlined,
-		to: ROUTES.USAGE_EXPLORER,
-		name: 'Usage Explorer',
-	},
-	{
-		Icon: SettingOutlined,
-		to: ROUTES.SETTINGS,
-		name: 'Settings',
-	},
-	{
-		Icon: ApiOutlined,
-		to: ROUTES.INSTRUMENTATION,
-		name: 'Get Started',
-	},
-];
-
-interface SidebarMenu {
-	to: string;
-	name: string;
-	Icon: typeof ApiOutlined;
-	tags?: string[];
-	children?: Required<MenuProps>['items'][number][];
-}
-
-export default menus;

frontend/src/container/SideNav/menuItems.tsx

@@ -0,0 +1,108 @@
+import {
+	AlertOutlined,
+	AlignLeftOutlined,
+	ApiOutlined,
+	BarChartOutlined,
+	BugOutlined,
+	DashboardFilled,
+	DeploymentUnitOutlined,
+	LineChartOutlined,
+	MenuOutlined,
+	SettingOutlined,
+} from '@ant-design/icons';
+import { MenuProps, Space, Typography } from 'antd';
+import ROUTES from 'constants/routes';
+
+import { Tags } from './styles';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+export const createLabelWithTags = (
+	label: string,
+	tags: string[],
+): JSX.Element => (
+	<Space>
+		<div>{label}</div>
+		{tags.map((tag) => (
+			<Tags key={tag}>
+				<Typography.Text>{tag}</Typography.Text>
+			</Tags>
+		))}
+	</Space>
+);
+
+const menus: SidebarMenu[] = [
+	{
+		key: ROUTES.APPLICATION,
+		label: 'Services',
+		icon: <BarChartOutlined />,
+	},
+	{
+		key: 'traces',
+		label: 'Traces',
+		icon: <MenuOutlined />,
+		children: [
+			{
+				key: ROUTES.TRACE,
+				label: 'Traces',
+			},
+			// {
+			// 	key: ROUTES.TRACE_EXPLORER,
+			// 	label: 'Explorer',
+			// },
+		],
+	},
+	{
+		key: ROUTES.LOGS,
+		label: 'Logs',
+		icon: <AlignLeftOutlined />,
+		// label: createLabelWithTags('Logs', ['Beta']),
+		// children: [
+		// 	{
+		// 		key: ROUTES.LOGS,
+		// 		label: 'Search',
+		// 	},
+		// ],
+	},
+	{
+		key: ROUTES.ALL_DASHBOARD,
+		label: 'Dashboards',
+		icon: <DashboardFilled />,
+	},
+	{
+		key: ROUTES.LIST_ALL_ALERT,
+		label: 'Alerts',
+		icon: <AlertOutlined />,
+	},
+	{
+		key: ROUTES.ALL_ERROR,
+		label: 'Exceptions',
+		icon: <BugOutlined />,
+	},
+	{
+		key: ROUTES.SERVICE_MAP,
+		label: 'Service Map',
+		icon: <DeploymentUnitOutlined />,
+	},
+	{
+		key: ROUTES.USAGE_EXPLORER,
+		label: 'Usage Explorer',
+		icon: <LineChartOutlined />,
+	},
+	{
+		key: ROUTES.SETTINGS,
+		label: 'Settings',
+		icon: <SettingOutlined />,
+	},
+	{
+		key: ROUTES.INSTRUMENTATION,
+		label: 'Get Started',
+		icon: <ApiOutlined />,
+	},
+];
+
+type SidebarMenu = MenuItem & {
+	tags?: string[];
+};
+
+export default menus;

frontend/src/utils/permission/index.ts

@@ -70,4 +70,5 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	VERSION: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LIST_LICENSES: ['ADMIN'],
+	TRACE_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 };