mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-14 04:55:55 +08:00
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>
This commit is contained in:
dnazarenkosignoz
GitHub
parent
a67d064418
commit
540568d29f
@ -30,6 +30,7 @@ const ROUTES = {
|
||||
HOME_PAGE: '/',
|
||||
PASSWORD_RESET: '/password-reset',
|
||||
LIST_LICENSES: '/licenses',
|
||||
TRACE_EXPLORER: '/trace-explorer',
|
||||
};
|
||||
|
||||
export default ROUTES;
|
||||
|
||||
@ -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],
|
||||
};
|
||||
|
||||
@ -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)}`;
|
||||
}
|
||||
|
||||
@ -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(
|
||||
() => menus.find((menu) => pathname.startsWith(menu.to)),
|
||||
[pathname],
|
||||
);
|
||||
const currentMenu = useMemo(() => {
|
||||
const routeKeys = Object.keys(ROUTES) as (keyof typeof ROUTES)[];
|
||||
const currentRouteKey = routeKeys.find((key) => {
|
||||
const route = ROUTES[key];
|
||||
return pathname === route;
|
||||
});
|
||||
|
||||
const items = [
|
||||
...menus.map(({ to, Icon, name, tags, children }) => ({
|
||||
key: to,
|
||||
icon: <Icon />,
|
||||
onClick: (): void => onClickHandler(to),
|
||||
label: (
|
||||
<Space>
|
||||
<div>{name}</div>
|
||||
{tags &&
|
||||
tags.map((e) => (
|
||||
<Tags key={e}>
|
||||
<Typography.Text>{e}</Typography.Text>
|
||||
</Tags>
|
||||
))}
|
||||
</Space>
|
||||
),
|
||||
children,
|
||||
})),
|
||||
];
|
||||
if (!currentRouteKey) return null;
|
||||
|
||||
return ROUTES[currentRouteKey];
|
||||
}, [pathname]);
|
||||
|
||||
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)]}
|
||||
|
||||
@ -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;
|
||||
108
frontend/src/container/SideNav/menuItems.tsx
Normal file
108
frontend/src/container/SideNav/menuItems.tsx
Normal file
@ -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;
|
||||
@ -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'],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user